Principles And Theories Of Hci Computer Science Essay

Published: Last Edited:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

In this advance technology era, the words Content is King had made Internet an information superhighway which most of the people come and search for more information. The content gives the information on a websites.

However, the constitution of websites with the textual, visual graphics, sound, video and animation as the web content is faced as part of the user experience on websites. (Wikipedia, 2010). In order to design for the user experience, a research on Human-Computer Interaction (HCI) to analyze the design, evaluation and method used in the area needed to be carry out. According to ACM SIGCHI (1992, p.6), HCI is interpreted as "the concern of design, evaluate, and implementation discipline of computing systems interactions for human use and with the major phenomenon studies which is surrounding them". Design and evaluation are the two main key terms in achieving web usability but it takes a different way individually to accomplish the goals. John Carroll (2002) claims that "HCI is about to understand and create the software and other technology that people will want to use it and bring the effectiveness to them in using this software". The negative effects rise on productivity will lead to user frustration and product stop in using. This situation apply the same to the website while the focus of three main parts which is human, computing system, interaction was not aware during the designing, implementing, and evaluating user interfaces.

The goals of HCI can be abridged as 'to achieve the development or improvement of the computer systems safeness, effectiveness, efficiency, usefulness and usability' (Interacting with Computers, 1989, p.3).

In this paper, I will discuss about the principles and theories of HCI applied for the web designing development process. Besides, evaluation of the interaction between human and web interface design will be evaluated in the later part of this paper.

Part II Selection of Design Methodology

It was not an easy task in designing a computer system as computer system is a complex entity. So, much skill and experience is needed in selecting the appropriate designing method. The focus of user-centered design principles in HCI design fundamental is the factor to be considered in designing human-computer systems. The differences between software engineering 'Waterfall Model' and the new HCI design model is that a design should:

Be user-centered, involve as much as possible the users in order to persuade the design

Integrating and applying expertise and knowledge from different HCI-related disciplines that given to the HCI design

Highly iterative in testing to ensure that the design is actually meet users' requirements.

2.1 Differences of Traditional and Modern Software Development Life Cycle (SDLC) Methodologies

2.1.1 Traditional software design approaches: Waterfall Model

Requirements analysis and definition

System and software design

Implementation and unit testing

Integration and system testing

Figure 2.1.1: Traditional waterfall model of software design and development

In the software development life cycle (SDLC), software functionality and how it can be implemented has been concerned traditionally. End users are typically involved at the beginning of the cycle after the requirements had been determined while the steps of design and implementation are undertaking by the software developers. End users will only involve themselves once again during the final testing phases. The whole cycle must be repeated if the software functionality does not match with the user work tasks or the user interface is unsatisfactory.

However, this traditional software development approaches had encountered change with the born of HCI. The end user now is required to involve in the all stages of the software development.

2.1.2 Modern HCI Software Design Model: Star Life Cycle



Task Analysis, Feature Analysis

Conceptual Design


Requirements Specification

Figure 2.1.2: Star Life Cycle. Adapted fromHix and Hartson (1993)

'Star life cycle' design model proposed by Hix and Hartson (1993) encouraging iteration as we can noticed that the central focus point is the evaluation. Evaluation is an essential part of the design process as it is being connected at every stage in this life cycle. Besides, we noted that there has no one particular starting stage in the star life cycle and is 'intended to equally supportive of both top-down and bottom-up development, plus inside-out and outside-in development' (Hix and Hartson, 1993).

Part III Techniques and Principles of HCI

3.1 Basic Concepts of Dialogues in UI Design

The term of dialogueue make sense when text was typed in and were displayed on the screen as a respond to the user. This referred to the interaction between human and computer for the information and instructions exchanging.

3.2 Dialogue Interaction Styles

Interaction dialogue style is a technique to prompt and receive input from users. The level of user training required and the speed of system respond is the main key term in consider the used of dialogue styles for the sequence control of tasks and subtasks. Dialogue types are divided into five categories:

Structured command language

Menu selection

Form filling

Question and answer

Direct manipulation

However, it is usual to combine more than one dialogue style in the system. For example: combination of menus and direct manipulation.

3.2.1 Structured Command Language

Command language is the oldest and most commonly used dialogue style which provided a way of expressing instructions to the computer directly. While using command language, user has to type in any form of user input other than programming and natural language to the computer system.

In the command prompt screen, '>' symbol shows that the system is waiting to receive a command to tell it what to response for the next. Such as user may enter >DELETE FREDFILE.

The limitation in using this method is that user has to remember the exactly syntax for many of the command name. Whether the system will accept and carries out the command is depend on the proper placing of separators such as commas, semicolons and spaces.

3.2.2 Menu Selection

Menu selection has a set of options displayed on the screen to allow users choose from the list of alternatives. For example, a food restaurant's website might have a menu of the various food categories offered. User might select from the choice of the food categories and the interface will change to the state based on the chosen option.

This dialogue style bring the great benefit to the beginner because they do not need to memorize the item shown on the screen, they only need to recognize it. So, the names or icons selected have to be self-explanatory in order for menus to be effective.

However it may be few of the problems with using menus. One of the major problems is the structure design of complex menus which is always take up a lot of screen space. The solution to this problem is to use pop-up or pull-down menus. Pull-down menus appear as a vertical list of menu items when the user clicks on the single title from the top of the screen. The menu will automatically return back to its original title after the items had been selected by the users. Pop-up menus appear when user clicks on the icon which is in the particular area of the screen. Menu will remains in the position until the users clicking on a "close box" in the menu's window.

It is important for the designer to decide the best way in displaying menus in the comprehensive and natural manner. Organizing the commands in a hierarchical way is useful in most of the cases. The items have to take into consideration to include at various levels and which item to group together at different levels.

3.2.3 Form Filling

Form filling is suitable for the tasks which require information input or where the several different categories of data need to be seen at one time. Form filling is helpful in design the screen if the same type of data has to be entered repeatedly such as a registration form where people fill in their personal details.

The benefit of fill-in forms is that it minimized the need in watching the screen very carefully due to the form help user position data in the correct place. As the cursor usually moves directly to the next position of the data item which needed to be entered after one part of the form is completed.

A poor design form is possible make users' life difficult. Hence, it is important to let users know which kind of data are allow in each field and informing users of input inconsistence by include a checks for non-completion.

3.2.4 Question and Answer

The term 'question and answer dialogueue' refer to the keystone type of menu system where every interaction comprise of a question, choices set and response from the user and typically display in just one or two lines. The question to be asked next is depending on the previous answer given by the user.

This kind of dialogue style is often used in the task such as in automatic bank tellers where information is elicited from users in a limited form. Question and answer dialogue is a

system-driven dialogue which user do not need to take any consideration on the navigation but it could be lead to user frustrating for those who is experienced on what they actually want to do.

3.2.5 Direct Manipulation

Direct manipulation usually referred to as point-and-click or drag-and-drop GUI user interface. The key advantage of this direct manipulation enable user in control of the dialogue whereby it give the user a feeling of empowerment. For example, user attach file by dragging the file onto the email program and send to the receiver compare to open a dialogue via menu.

3.3 User Models Design

In order to know how the users will react to the user interface design, designer must be aware of their mental activities but not only their physical characteristics. Thus, few models of the users is form to accomplish this and use it as a prediction mechanism once the information had been decided to be presented in the user interface.

3.3.1 Mental Models

Mental model is explained as a kind of flexible behavior on how a people act while faced with new circumstances. It is possible to design the system which support the mental model and avoid from errors occur by exploring what users can understand about the system based on the idea of mental model from the human-computer interaction.

3.3.2 User Model

According to Markus Pauer (2004), a user model is needed to build when we want to personalized computer system so that the system knows the skills, preferences, and capabilities of user.

3.3.3 Conceptual Models

Conceptual model is referred to how the system is conceptualized. Primarily, it concerned about the way users interpret the user interface design and the way designers conceptualize and view the system. People is always use their prior knowledge to develop mental models in interact with any type of devices such as machines and computer to enable them understand and predict their behavior. So, capitalize on users' existing knowledge and use of metaphor will be a successful method in interface design.

However, finding a suitable metaphor is the problem face by the designer who is using this approach. As Donald Norman (1986, p.46) claims that 'designer face the problem in design model so that the system is design follow a consistent, coherent conceptualizations and secondly the user model which is to make sure that the user can develop a mental model of that system and to be consistent with the design model'.

Part IV Understanding the Importance of Web Page Navigation

In web space, it is important that a necessary tools and techniques been given to the navigators in order to navigate successfully to the page destination. Thus, a page designer playing the important role in web page navigation to ensure that reader navigates without difficulties. The construction of the navigation elements is depending on the purpose of the web site. The website's navigation should make sure that visitor can find their way around the web site easily and intuitively and feel comfortable on locate their information quickly.

4.1 Navigation Elements Aids

Navigation aids help in implement the navigation systems in the web sites. They are:


Site maps


4.1.1 Link Labeling

Links can be found within heading or blocks of text which allow users access to the large portion of information in a limited space on the web page. Link text or link images can be represented as a simple links in the web pages. According to Rosenfeld and Morville (1998) suggested that "headings and subheadings of the web page can be an effective labels by emphasize the need of consistency maintenance." The use of "Home" in one place and "Main" in another side in the higher level page might confuse the users. The determination on using a set of common use terms is recommended such as use "search" instead of "find" which is more standard on the web sites.

Other than that, designer should aware of using a label which is too general. For example, labels which is used as link text should match with the page title to which pointed by the user.

4.1.2 Site Maps

Site map is an area collection of links of the web site to easily inform users of the web site hierarchy. It supports a user's mental model of presenting a graphical site map. The link text in the site map should be blue in color and underlined for easy recognize. However, the modern browsers provide us the feedback while the cursor moves over the text link. The feedback is the cursor changes into hand symbol when users point on the link text and the URL loaded is displayed in the status line at the bottom left of the browser window while user clicks on the link.

4.1.3 URL

URL can also be a useful navigation tool even through it is intended to be used by the user. URL names represent the location of a category in the web site. There are some useful tips on URL:

Carefully choose of web server domain name to make sure that it is easy remember and spell.

Use short, meaningful names which can convey meaning to the user.

Do not use underscores and any others special characters in the file and folders name so that URLs is easy to type.

URL should avoid from changing over time once it is chosen in the site hierarchy.

4.2 Information Architecture and Navigation Diagram

4.2.1 Site Design Blueprints

Blueprint is sometimes referred as sitemaps whereby it shows the relationship between pages and its elements. It displays the overview of the information and can be use for discussion during the initial design stage. (Hamilton, 2010)

Below is the high-level blueprint diagram for a college web site.



Figure 4.2.1: High-level blueprint diagram for a college web site.

4.2.2 Wireframes

Wireframes illustrate the look of individual pages form the architectural perspective. With wireframe, it forces designer to think on the navigation system issues on a page. The navigation system is translated into "page" from the blueprint. Blueprint may lead to revise again if the navigation does not work well during this stage. (Hamilton, 2010)

Typically, wireframe is created for main page or the major category pages to be applied as a template on many pages for the purpose of consistency looks. Wireframe can help designer decide on the content grouping. (Hamilton, 2010)

In order to produce a final product, it is require to involve interaction design specialist and the programmer to define the aesthetical site. (Hamilton,2010)

Below is the wireframe for the college site main page based on the previous blueprint diagram.


Figure 4.2.2: Wireframe for the college site main page

Part V Web Usability and Accessibility

The process of usability testing on web sites needed to be carrying out throughout the development process so that it is readable, accessible, and usable. It is important for designer to keep in mind that the design of navigation tools, graphics, site structure, contents, and interface layout demonstrate a good usability. The constant revision of previous work and testing help in identify any problems users may have with the navigation, design and functionality.

There are few of the usability testing method used in testing web sites such as task-based tests, user scenarios, browser tests, heuristic evaluations, and accessibility tests. Usability testing always involves a set of measurements used to evaluate specific aspect of a web site.

Technical usability checks, visual-spatial usability testing, and accessibility checks are three of the usability testing method to address the issues of visual quality, content accessible, organization, function, and user perception.

5.1 Process of Usability Testing

A testing process helps in organized tasks and to ensure that all the important issues testing issues are addressed which contributes to the quality of result. The four major steps in usability testing process: establishing goals, developing instruments, conducting the test, and result analyzing.

Step 1: Establish Goals

Includes what the test should measure, its methods, test population and criteria used in the test.

Most tests can be performed by using about five to seven users.

Step 2: Develop Instruments

Develop the test instruments including writing test questions, data recording worksheet, site prototype for testing.

Task-based, scenario-based, objective, or process-oriented questions are the type of test question which is often used in usability testing.

Be sure that a fully functional copy of web site is published on the web server or available for test on the stand-alone system.

Step 3: Conduct Test

This step involves monitoring the test and recording data.

Provide participants with the background information on the site. For example: subject, purpose, location, and the testing guidelines.

It is good to have participants distinguish specific problems from general comments in identify the items that violate any evaluation criteria.

Step 4: Analyze Result

Reviewing and interpreting the data then based on the test results determine the changes needed to be implemented.

Compile the responses and meet with the team to plan for the solutions for every problems noted by the participants.

5.1.1 Type of Usability Test Questions

The following table show the four types of usability test question which is usually used in the usability testing during the process of test instruments development.

Question Type



Provide user with a scenario, setting, or situation and ask questions based on that context.


Provide users with the specific task to perform for testing their responses and the accuracy.


Provide users with the questions and a set of options to choose.


Provide users with the task that require them to describe the process use to execute the task.

5.2 Web Usability Test Methods

According to Nah and Davis (2010), web usability refers to the 'ability in finding their way in the web with the minimal effort required to obtain the desire information'. Ease of navigation and search is the core idea of usability concepts. There is variety kind of usability testing methods use in testing web sites. Here are the three methods going to discuss further: technical usability checks, visual-spatial usability testing, and accessibility checks.

5.2.1 Technical Usability Testing

Technical usability testing purpose is to assure that a web site will be functional across a variety platforms, browsers, and different system settings. The display and the function of the web site can affect by the different system setting and the types of platform use by the user. Web developer, Robin Williams and John Tollett (2002) advice that it is important to perform browser check as what a user sees may not be same as what others sees on their screen. The four step of usability testing process need to be follow while performing the technical usability test.

In the step 1: Establish goals

Developer, design team and users can be involve in the test population while the test parameter including types of OS, browser type, screen resolution, and color depth setting.

In step 2: Develop instruments

Specifying at least two different OS with two different browser, more recent version of each OS and browser is preferred to develop a testing worksheet. Use at least two different screen resolution which is one higher-resolution setting for newer systems and one lower-resolution setting for older systems.

In step 3: Conduct test

Participants should examine the elements of prototype site including navigation, consistency of page layouts, clarity of visual elements, content readability and the functionality. Besides, they are required to record the problems encountered.

In step 4: Analyze result

Review and identify problem encountered and develop solution for the problems to establish redesign task.

5.2.2 Visual-Spatial Usability Testing

Usability test based on the visual-spatial principles helps to test how well the site fits user perceptual habits, needs, and actions while browsing a web site. The testing population involves small group of five to seven actual users. The test questions can develop based on the visual-spatial concepts to evaluate major features of a web site such as navigation, page layout, content and functionality. The questions require user to identify the difficulties with site elements and the additional questions developed to examine specifics element such as advanced search features and feedback form. Besides that, usability test worksheet should provide for participants to record the comments, notes and observations.

5.2.3 Accessibility Test

The purpose of accessibility test is to ensure that user have equal access to the content despite of any physical, mental, or technical limitations. Some of the user may have trouble on specific disability such as visual impairment and need the assistance of the hardware and software product to access the web site.

Two of the most commonly used accessibility guidelines are U.S. Government Section 508 and World Wide Web Consortium Web Content. Although it is impossible for designer to control all the issues, the best way is to check the pages against at least one set of accessibility guidelines to ensure the site accessibility.

Part VI Case Study: Usability and User-friendliness of Education Web Interface

ABC Tuition Centre is tuition centre uses web-based system to provide online services to its clients. This case study focuses on describing user interface of Tuition Center System, and the way it is designed in order to achieve maximum possible usability and friendliness.

According to Peter Tarasewich (2008), usability of a web page is directly influenced by complexity of the web page. Usability reaches its maximum value at some intermediate value of complexity.

Figure below shows the relationships between usability and complexity:

Peter Tarasewich (2008) also defined the metrics for measuring web site complexity:

Aspect ratio - ratio of height and weight of a web page, and amount of scrolling required.

Percentage of white space - percentage of page not taken up

Horizontal symmetry - how well items on left side of a page match with items on right side of the same page.

Horizontal and vertical balances - how evenly distributed the material is on a web page.

Number of graphics / words / links / pages

Average depth of pages - average number of pages from its homepage to a page with no more forward links.

Graphics size

Figure 6(a): Illustrate wireframe of the Homepage of ABC Tuition Centre

Based on Figure 6(a) above, there are several approaches had been taken to optimize usability of the homepage.

Not every visitor surfing the website uses wide resolution, some of them still remained in limited resolution such as 1024x768 or 800x600. If the web page is too wide for them, the amount of scrolling required increases, which leads to bad aspect ratio. To resolve this, the left column of the content is set 60% of the window's width (dynamic width), and the right column is fixed at 280px. So that the left column is able to shrink / grow according to user's window width.

Instead of putting every details information at the homepage, ABC used a "Start Tour" button to guide user step by step in another web page.

A client login form in placed at the homepage so that existing clients can login easily without having to dig into web pages. Client can also use the "Remember Me" checkbox so that he/she does not have to login every time he/she enters the web page.

Sitemap is included to aids users' navigation through the web site.

FAQ (Frequently Asked Questions) helps to answer common users' questions quickly.


Figure 6(b): Illustrate the performance of Biology subject of a student.

For Figure 6(b) on usability improvements:

Although the student page is slightly different from the homepage, but the placement of logo and web page layout remain consistent. So that user knows he/she is still staying on the same web site.

By providing the breadcrumb trail (Subjects > Biology Performance), users know which part of the web site they are currently staying at, and how to go back to previous pages.

Organizing detail information in table form is able to reduce complexity of the page, while still can effectively convey the information.

Using the balloon tool tip can easily remind and tell what the users what they are supposed to do, eg: Reminding number of outstanding items.

In a usability analysis done by James J. Cappel and Zhenyu Huang (2007) on a company website, they had concluded several important items needed to improve usability:

Breadcrumb trail - Some users may not know how to go back to previous pages, especially those who enter the "middle" of a site from a search engine; users may get lost, confused. Example of breadcrumb trail: Products > xyz > abc.

A FAQ or Help Option - Users must be given guidance on common operations or problems; getting assistance through other methods such as "help lines" may take longer.

Web sites should not use splash screen - Splash screen lengthens the time it takes a user to get to the true content of the site; users may get bored, confused or frustrated.

Text links must be underlined - Some users will not recognize these entries as links and miss important information.

Comparison between ABC Tuition Centre and Mawar Tuition Centre:

Mawar website has fixed width. For users with smaller or larger screen resolution, the aspect ratio of webpage increases, therefore the amount of scrolling required also increases.

Figure 3: Illustrate Mawar website when displayed in low resolution monitor.

There is neither breadcrumb trail or navigation highlight to indicate users' current location at the website. Furthermore, every web page of Mawar looks very similar, leading to more confusion whenever users browse across the website.

There is no FAQ or similar help option available in the web site. Users must contact (email the administrator) to get the answer for their questions.

Text links are not underlined, making users harder to identify the links.

Part VII HCI Issues for Evaluating the Future of HCI

The user interface software tools had brings developer a great impact on design and implement user interface. However, the lesson of success and failure of this tool is important because of the rapid change technology are likely to significantly change user interface.

Many of the different kind computing devices had now evolved from desktop computer to various sizes and display characteristics. This will now be the challenge for design developer on creating user interface that work effectively with the tiny and various input and output capabilities computing devices. Different interaction techniques require to be used in different platform. This is because of the input style changing from a mouse and keyboard to touch sensitive screen. Not only that, some devices support handwriting recognition, speech, and gestures.

7.1 Recognition-Based User Interfaces

Today's use of gesture, speech input, handwriting support by nowadays devices require recognition-based user interface to interpret user input stream to identify the content. So, menus and dialog boxes will be a minor part of the interface in the future. Thus, developer may need to have knowledge about vocabularies, parsers and Hidden-Markov-Models (HMMs) in creating speech user interface. For creating gestural interfaces, knowledge of HMMS, feature vectors and Mahalanobis distance is important to the programmer.

7.2 Three-Dimensional Technologies

The migration of two-dimensional (2-D) presentation space to three-dimensional offer human-computer interface opportunities significantly. Training and simulation is one of the applications that use three-dimensional interface. However, developer had face with the challenge in providing tools for 3D because lack of acceptance for Virtual Reality Modeling Language (VRML). From data management through computation to graphic rendering, near-real-time interactivity is important for the system to respond rapidly and the direct manipulation is achieved. This presents HCI community the challenge on designing interface and application to meet with the demand of application-independent manner.

7.3 Further Future HCI Issues

Other than the issues I had discussed above, there will be additional future trends that challenge the research on HCI tools.

Based on the demographic shown that not only the youngest group of people is using the interactive systems nowadays but older adults as well. It is an unavoidable weakens in memory, motor, and perceptual skills. Therefore, specific interaction technique is required to perform for supporting older adults.

Part XI Conclusion

After I had carried out the research for the major study of Human-Computer Interaction, I found out that it is important for interaction designer to involve users from the beginning till the end of software development process to maximize the usability. The succession of interactive product is determined by whether it helps people in the way they communicate and interact during their daily life and reduce their workforce. In order for designer to achieve this goal, they have to decrease the barriers between human cognitive model of what users want to achieve and the computer's comprehension of uses' task which is very challenge for them.

Besides that, an effective interaction design can increase user productivity and satisfaction and at the same time it reduces frustration while using the product. Therefore, understand people's needs, establish requirements, prototype development usability testing, system evaluation are those iterative activities to end up with an effective interaction design.

However, it is challenging for HCI designer to develop a usable and affordable applications for users from different kind of background and experiences due to the multidisciplinary nature of HCI.