Human Computer Interaction Methods And Techniques Used 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.

With the development of internet technologies and internet being used as one of the most common mediums of communication, business, marketing and a wide range of other applicability, a lot of importance has been given on user interaction on the internet. To a large degree Human Computer Interaction contributes to deciding how efficient a web-site or a piece of software is in terms of easy user access. Using attributes of measuring human computer interaction it is possible to measure parameters that could help improving the usability of a software or on-line page. A range of methodologies could be used to verify and measure these parameters. HCI utilities can be as simple as keystrokes and mouse analysis to as advanced as eye tracking.

In this report we consider a web-site and make a critical analysis of the interface on that website and its relation to how a human user would interact with it. There are so many web-sites where human interaction is cumbersome and not effective. Analysing such sites for HCI parameters will allow us to make it more efficient. In this report we consider a case study of a website that needs a lot of improvement. We make a general list of comments based on observation and then we use the COG tool to suggest a better interface for the site.


Human Computer Interaction relates to user to computer interaction and vice-versa. HCI analysis has gained a lot of use in the recent years to define user needs and navigational convenience. Many a times a simple visual analysis would not be sufficient to determine user needs. Sometimes the help of research tools to analyse interfaces might be needed (Booth 2000). We use one such research tool to make our analysis later. Research tools could use a combination of hardware and software resources to make an analysis of system interaction. Also in use are a range of models that define different user interaction patterns and methods.

For example, models defining parameters for efficiency are different for a mouse user to someone using speech as a form of interaction. New forms of input mean newer models being constantly developed. Most research happens in dedicated HCI labs or corporate labs. Sometimes a combination of user input devices may be recommended to enhance the usability of a website. So as we can see, the areas of applicability and enhancements are huge. There is no one correct or perfect human interface design although there are parameters that help us measure attributes that can increase efficiency in terms of usability. Also alternative means of input and interaction can be used in conjunction or in-lieu of keyboard and mouse.

The time taken to use touch screen for input is significantly lot less compared to key-board and mouse (Hartson, 2000). The content delivered has significantly changed in the recent years. What used to be predominantly text based is being migrated into graphical interfaces. Again the issue here is where these graphics are placed and how the user would interact or view them effectively. As new methods for interaction evolved new HCI testing tools were developed. HCI research can help improving man to machine interaction and would allow making recommendations for appropriate devices, modes, techniques, and styles. The report we have produced studies various aspects of a website. Our case study is a cluttered un-professional website that has many issues. We will make our case and propose a simpler interface to make interaction much easier.

Methods and techniques used:

There are many methods to examine, assess and sketch a website. All the methods are nothing but alternation of well known HCI techniques which explains the information task and approach to a website. According to the suggestion of Rosenfeld and Morville (Information architecture for the world wide web, 1998) initially, we have to pay attention towards client meetings about pros and cons of existing website examples. As the clients visit different sites which are similar in purpose, they can give a clear review on the website we have chosen. The analysis of a web design and user is usually difficult form other software types. The best ways is to detect the main viewers and concentrate and analyse their tasks. The main method in HCI is evaluation. The best technique which can be used in our course work on havens work website is heuristic evaluation.

This type of evaluation method is developed by Jakob Nielsen. Heuristic evaluation is an assessment method which consists of ten general guidelines for better usability. A group of users freely evaluate in the form of questions. They give the entire statement of the usability issues in the website structured along the guidelines.


Visibility of system status.

Match between system and the real world.

 User control and freedom.

 Consistency and standards.

Error prevention.

 Recognition rather than recall.

Flexibility and efficiency of use.

Aesthetic and minimalist design.

Help users recognize, diagnose and recover from errors.

 Help and documentation.



There is no one correct way to measure the effectiveness of Human Computer Interaction. A diverse set of techniques and methodologies exist to measure this. Among other factors, each of these techniques is dependent on the interface, interaction methods, input devices, target audience. Improving HCI also directly contributes to saving time and improving technology. A range of methods exist. Some could be as basic as analysing a webpage just by viewing at it and listing the problems with it and identifying the complexity of interaction. In recent developments eye tracing has been used to identify problems with software interfaces. Also eye movement has been used as a form of interaction as well.

For example, looking at an icon on the screen can tell a system to display some related information about that icon or what it represents. This is referred to as the quick technique where the user uses his sight rather than using mouse or keyboard (Jacob, 2000). There is no doubt that other advanced forms of interaction will be developed. Dialog interaction is another form of interaction where the user "talks" to the system to tell it what to do. There are already many systems in the business sectors which have discarded the typical mouse and keyboard approach. There has been a reliance on alternative forms of pointing techniques. Due to increased bandwidth available for communication between humans and computers the communication speed and accuracy improves.

Improvements to Human computer interaction can also be made using stylus (Beun et al, 2001). HCI analysis is not restricted to just software entities. HCI analysis has also become main-stream with regard to web technologies. Internet sites are frequently tested for HCI efficiency. This actually relates to my case study which about a website which I will describe in the next section. Internet sites are used as business resources and it is important that the interface is easy to navigate, input and get information. This is why HCI analysis and tuning is vital to get maximum people using the website. HCI is developing at a rapid pace and a lot of time and money is being invested in devising better and efficient interactive systems.

Cognitive Analysis:

Analysis of Users and Tasks:

A visual analysis of shows a variety of flaws. It does not need an expert to conclude that this site is not professionally developed and certainly not in accordance to Human Computer Interactivity requirements. Also certain usability issues have not been considered when the site was created. From the comments made at the bottom of the site it is almost certain that this site might have been created as some sort of practical joke. Nevertheless, it does allow us to pin-point some of the issues in this site and to gain an understanding of designing sites that support efficient human computer interactivity.

To analyze what are user's expectations and needs from the website we have prepared some questionnaires to make improvements for the existing website model. Those are:

What are the reasons for user to visit this website?

What is the user looking on this website for?

What is the time taken by the user for the data he is looking for?

Is the user able to find search bar easily on the website?

Is a user able to navigate easily on the website?

Is the user comfortable with the structure of the website?

Is the user able to remember the contents of the webpage in a period of time since he last visited?

From the above survey we found out the main issues regarding the website from user point of view, those are:

No Structure: This web-site is all over the place. There is no categorisation of articles and in many cases unrelated links are put close to each-other. Lot of unrelated articles seem to follow one another in no particular sequence or pattern which makes it hard to quickly navigate to a particular section. The page looks and feels haphazard and feels like a rush job. The lack of structure certainly makes users think that this is an amateur's handy work. It just feels like a huge billboard with newspaper cuttings pasted all over. There is no specific priority to importance of news. For example, a new article that might be the highlight of the day could be anywhere on the page that is not obvious to the user. There is too much unwanted information. While the primary objective of the site is to provide news information, it has unwanted links to book reviews, calendar

Navigational issues: This is a mammoth of a website. It spans for many pages mainly because articles have not been condensed and in many cases full and lengthy news articles are just plonked on the main page. The page is like a maze and from a user's perspective it is going to be a lot confusing for him to find the relevant news article without having to scroll the pages a few times in all directions. It is quite easy to get lost and the amount of detail in the page can be overwhelming for many users. The page also scrolls horizontally showing the content that extends beyond the visible area. It is quite possible that the information a user is looking for might have been in the extended section rather than the main page. In the search for relevant news the user is subject to areas that might not be of his concern. This adds to the complexity in searching and also contributes the time for searching for information. Even so there is no guaranteeing that the information will be found. When a user clicks on a link, there is no obvious way that indicates how to get back to the home page.

Graphic Design: The graphic design is shoddy, unprofessional and again all over the place literally. Users prefer a few images to more relevant links. In the case of Haven Works there are plenty of small images all over the site. Many of these are also bright coloured, scattered and seem that they have been placed there just for the sake of it. The graphic design is definitely not easy on the eyes. It is complex and not required for a site of this nature. Some of the pictures have been put in there only to offer a shortcut to some text that is not easy to understand in the first place. Many of the pictures don't even have anything to do with the article.

Usability: The web site does not have any usability factor whatsoever. It is too much hassle to navigate and too tedious to search of required information. Most users will inevitably keep staring at different sections for long periods of time trying to look for what they want.

Interaction: The user's primary medium of interaction on the website is using the mouse to click on the links. The user may prefer to look for information on the web or on the site by typing for key words in the Google search feature. But this feature which might be handy is not obvious. As with other links, finding this search feature is stressful. It took me a while to figure out if there was any search feature and if so where. Given below is a screen shot of part of the cluttered screen. The area marked in red shows the Google search feature. Not many users can find this easily unless pointed out. Hence the interaction on this website is cumbersome. Interacting with this website is equally difficult both with mouse and keyboard.

Design and analytical testing:

Now as we know what the user wants, it's time to accomplish that in the website. The website structure need not be fancy and should not be complicated. A well built website is one which allows the user to navigate easily according to his needs. If the website is easier to use, the user may stay on the website and tries to see more content on it. Good website structure makes it easier for us to grow logically.

In our search on the internet, we found the work of Jared spool and colleagues at user interface. They performed a major study in usability of website in 1996. They have studied nine different sites with a large group of test users, who were asked to do information tasks of four types, those are:

Finding simple facts.

Making single judgements.

Comparing judgments of several issues.

After conducting this study the brief output of it is mentioned below.

"Graphic design neither helps nor hurts in terms of user performance on the test questions.

The design of text links is vital. In particular, the user must be able to predict where the link will take her.

Navigation and content are inseparable. In other words, generic navigation labels don't work as well as specific, informative ones.

Information finding is a focused task, where anything superfluous is seen as a distraction.

 User preference does not correlate with their performance. In other kinds of software, there is typically a strong correlation."


In many analysis of web usability it has been proved that most of the user who visit the website scan rather than read the webpage. In a study of web usability it has been showed that 79% of the test users scanned the website and 16% of them read the pages word by word. Another most important part is it should not take more than two clicks from the home page to other pages on the website. Otherwise, the search engine spider may not index all the pages. A well organised website should be in the following way

Typical basic website structure

The structure of the website is very important part. It's like backbone of a human body. So website should be connected through a network of links which provides shape and function to the website. A layout of a website for better user interaction would be as shown in the figure below:

Basic Website Layout

Website structure and navigation:

For a website to be successful the key factor is the ease with which a user can navigate in the website. The important rule in building a website is that a user should not take more than three clicks to find what they are looking for. In the above example it consists to three tiers of contents which can be accessed in two clicks. From the home page first click leads to main section and the second click leads to subsections. If we want we can keep another tier of data but the user may get confused and the search engine spider may not index all the pages.

Dividing the structure of website:

Homepage of the website:

The Home Page

Homepage of the website is the first impression. As soon as the visitor is on the homepage it should reflect what is the purpose of the website. It should reflect the answer for the question who, what and why about the site purpose.

The homepage should be designed in such a way that, it should have a table of contents which allows the user to navigate faster and reach the required goal of the user. If the user can navigate easily and quickly and find the information they want, then they can enjoy the visit to the website. If the user is comfortable, he stays longer on the website and may visit the site again and again.

Homepage should not contain lots of text on it, as it may be irritating for the user. The home page should contain only 400-500 words. It should provide the brief information about what is present on the website and how to get to that information. This page should contain a search bar which can make the user comfortable to search required information without getting confused. Also it should not contain lots of links to every single page on the site, as the main section and subsection serves this purpose. It has been determined that most of the users browse the homepage very quickly. They look to see if there is any reason for them to go deeper into the site. As most of the web user does not see deeper in to the site than its home page, it should provide basic information what is the site about and having the links prominently displayed making sure to the visitor what the site is about.

Main section of the website:

The Main Sections of a Website

The main section is an access to particular data on the website. It can be considered as the backbone of the navigation system. For example, if you are searching for Local news in India then the main section should consist of different links in it regarding the news, which can be viewed in detail at the subsection. The links in this part should be arraigned in such a way that the link should directly lead to the required matter in one click. The links should be chosen correctly as it will design the shape of the website.

This part of the website is primarily the collection of different links which will give access to the subsection of the site. Each main section should have a data regarding specific subject on single topic. Each main section corresponds to its subsection content.

Subsection of the website:

The Subsections

Subsection is the place where all the information is kept. All the data regarding the link in the main section is available at sub section. Subsection is considered to be heart and soul of the website. If the user wants to look further in to the site it is the subsection were he wants to see. So the user should be directed correctly to the subsection from the main section using good navigation system. All the main content of the website is present at this part of the section.

Recommendations for a better Design using COG tool:

Interface design technique using a tool can be very handy to check for the usability of a website and also formulate an effective means of human interaction method. For this study I will continue to consider the website and try to devise a website that serves a similar purpose i.e. a news blog website but which will demonstrate better user interface and supports better Human Computer Interaction. In the process, we will create a prototype for a much user friendly interface.

To do this we use a tool called the COG tool. Using this tool, we create a basic interface for the news blog. It tries to achieve everything that does, but our prototype design is organised much better. The simple prototype we built does not have the news content but it is only to demonstrate how a simple and organised interface will contribute to human interaction efficiency.

In our prototype model, the menu is organised in the left-hand side with the main content appearing below the header. The menu has most of the original news categories that havenworks has. Our categories are classified as US General News, US Politics, World News, Local Weather and a link back to the home page. The prototype looks as follows


In COG we create 6 Frames each one having some content that can be shown on screen by clicking on a link on the left hand side. The input mode selected was mouse and a keyboard. The keyboard is only used for entering search string but apart from that the site is straightforward HTML link based.

The steps taken were

Define the frames (i.e. Content pages that are navigated by user). In our case six pages each for a news category and one home page.

Then we define the widgets on the page. Widgets are tools for interaction used by the user. These could be text boxes, hyperlinks, drop down lists etc

Then we defined the transitions between pages. This defines how specific actions cause the interface to change. For example clicking on a link brings a new page (i.e. a new frame)

Then we defined a task to simulate and record human interaction with the website. This allows us to calculate timing efficiency and interface performance tuning.

The following figure shows the definition of the frames and the transition flow that happens when then widgets (links on left) are clicked.


Also defined for each transition is some delay that might be caused due to various reasons including technical like web-page fetch time, server delay etc. We have assumed the web-page load delay as 2 seconds and the search time using keyword search to be 3 seconds. After defining the task, we ran a demonstration (recording of human interaction) to get a script that describes every step taken by the user. The Script I got from my first run clocked at 16.283 seconds. The script is given below:


We have taken some liberal time delays during phase transitions. Even then the model site we developed is far more efficient compared to the original. Looking for new items in was stressful and might have taken many minutes to look for an item. However the user interface design I proposed using COG tool gives a simplistic approach to the news blog site.


In the case study, we saw how the interface design affects human interaction with a piece of software or webpage. It gave us an understanding on the factors that influence human computer interaction. We studied a website and analysed the problems a user would face when navigating the website or using it to find information. We suggested an alternative prototype using the COG tool. It serves the same purpose but it is a lot easier to interact and gather information. By using COG tool I also gained an understanding of using automation to study human computer interaction. It has shown the usefulness of interface testing and user accessibility before releasing a professional piece of software.