User Attention And Performance In Websites 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.

We are becoming increasingly connected to the internet through various devices i.e. PDAs Laptops, tablets PCs, etc due to advancements in technologies and investment in infrastructure that reduced the costs and increased the speed of the internet connection. This helped people to stay online for longer durations and according to the statistics in 2007 the internet crossed 1 billion unique users and on average they spent 44 seconds on a page [ HYPERLINK "" \l "Int07" 1 ].

The internet is growing at much faster, becoming larger and widespread then anticipated as 46 million websites were added in Jan-April 2009 alone2] thus becoming increasingly complex with new websites catering different genres and different structure or layout. So naturally the users will have increasingly less time to view the website and make up his mind that he wants to view the site further or just reject it and move on. So it is essential to grab user's attention in those crucial seconds in order to encourage him to explore further and get the message of the website across.


This project mainly aims to investigate the effects of web page layout in framing users' eye movements as we want to gauge the fact that which layout is more efficient in getting the information across that would benefit user and the website owners alike by identifying hot-zones (high fixation densities through heat map) and inserting the critical information at these points . It is well known that low level features, such as: animations, colour contrast, and brightness, do trigger visual attention. However, until now little research efforts have focused on the influence of structure in guiding user attention.

In this research, user testing will be conduced to determine how structure effects attention distribution. Four different contents on four different layouts will be tested i.e. every layout will contain four different content and the experiment will be repeated using these entire layout on a single user. Insuring that no content or media type (images, animations, menus, etc) is repeated to any user. To capture users' objective attention, the Tobii eye tracking system will be used. These structures are chosen because these are the most commonly used structures today and we want to research the effect these design will have on the user experience and search capabilities. Many websites are designed with the combinations of these layouts some of the examples being,, etc. The four sites to be tested are indicated below:

Three columns website(BBC news)

Four columns website

Website will compromise of many blocks looking like widgets e.g.(Google widgets,,

And the fourth website will follow an open layout style (i.e. no columns or blocks or flash websites).

The empirical study investigates user search behaviour (or called search condition) wherein tasks of various difficulties are employed, easy tasks and difficult tasks. In the search condition, users will be instructed to search for specific goals located either in the main page (representing easy tasks) or in second or subsequent pages (representing difficult tasks). Hence, the overall aim is to examine how web page layout guides users viewing' behaviour in directed search conditions.


The findings of this study will have great impact on websites' design as the designer will have a practical and proven design guidelines that will help them utilize the website to maximize its potential and beneficial to the owners in terms of revenue(e-commerce site or advertisement), information exchange( will be done in less time) user retention and traffic increase. Designers usually have very limited knowledge about which elements guide user attention and about the browsing and searching behaviour of their end users. Therefore, the outcomes of the current study, expressed in the form of practical design guidelines, are judged to be very beneficial and relevant to web designs.

Structure of the report

In the later chapters we will be discussing some of the usability issues that are essential to our project later on going into specifics regarding the websites issues. We will also be discussing the research of different people in this field that includes textbooks, research papers and online material available. The detailed layout and subject matter of the websites, experiment setup and different search cues and options will also be discussed. At the end the list to references will be published.


The website and the internet certainly has come a long way from accomplishing simple functions such as retrieving files from the server to being fully grown dynamic website that can change the content automatically or customize itself according to the user preferences and behaviour. As web space is becoming increasingly complex there is a need to find the right structure or layout to direct users to the important information and entice him to explore more because if he finds the website difficult, feels bored or gets frustrated they will simply leave and will try to avoid the website in future. This can have a negative impact on the business or the website credibility as the user won't waste their time on that website because they could find what they are looking for from any of the other sources.

Usability requirements/engineering is becoming increasingly relevant to the current scenarios because we want the user to become our regular customer that brings us more money and increasing traffic. Extensive research is being done about different aspects of the website that includes study about the banner ads [ HYPERLINK "" \l "urk05" 3 ] (types, placement, content and benefits), colour schemes and design etc by the means of controlled experimentation using user feedback or eye tracking software readily available in the market.

This project mainly explores the broader field of HCI (Human computer Interaction) that includes usability issues, visual attention and human psychology.

Usability as a Science:

According to the definition (ISO 9241 part 11); "Usability is defined as the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use". Usability can be defined by five attributes 4]:


How well the user accomplishes the tasks handed to him the first time. As the systems are becoming increasingly complex we want the user to get accustomed to the system easily thus retaining the previous user base as well as attracting new users. Taking the examples of Facebook or hotmail upgrade we can evaluate this through user feedback as how did they like new interface or do they have any difficulty doing the tasks they did previously etc


How quickly they can perform the tasks. If the user performs certain tasks that it is designed for in minimal time then that system is said to be efficient.


How quickly can they perform task after some time has passed and minimize the "amount that they are memorizing". Some examples can be checking email on the new interface or buying product again after some time.


How well the system is able to handle the errors the human makes and how easy is it for the system to recover.


How 'pleasant' is it to use the system. This is an important attribute because if the system is pleasant and the user is satisfied with the outcome and the time taken to get that result he will prefer this system or website from the other competitors.

Usability Testing:

So the main concern remains that is how to do usability testing? [ HYPERLINK "" \l "Usa09" 5 ] has outlined some guidelines that can be used to test our system but before testing our system we should ensure that the test subjects are future or past users, tasks must be realistic i.e. tasks that are normally performed on the system and ensure that an iterative approach is used, in this approach the user feedback is evaluated, the system is redesigned and tested again. "The more iterations the better the website!" 5] [ HYPERLINK "" \l "8Gu06" 6 ] It is mentioned by citing the examples of three recent studies that iterative approach has substantially improved the usability of the website in one case by 40 percent. Some of the other issues that need to be considered are:

Gather user feedback either during the tasks (think aloud- speaking what's on your mind when performing the tasks) or finishing the tasks and then giving the feedback. Although it is observed that we get no significant changes in the result while using any of the method however in think-aloud participants completed fewer tasks as they tended to read the text on screen rather then what they are thinking.

Distinguish between frequency (the number of users faced problems) and severity (problems faced in completion on individual user).

Select the right number of participants as too few may reduce the usability of the system and using too many will be a waste of valuable resources.

Using the appropriate prototyping technology i.e. either choosing paper prototyping or computer based prototyping.

Below are some of the ways that are not recommended although they are good practices and you may get some insight into requirements and personal preferences but until and unless the user tests the system it is of no use:

Demonstrating the system to the user and getting their feedback is good but until testing they would not know how would they fair when they are using the system.

Surveys might also give you preferences but until they use the system you can never know real usability issues.

Asking other software developer they might know more about the technology that is being used rather then knowing the subject or core functionalities of the system.

Eye Tracking:

One of the important tools that helps test usability in modern times is using eye tracking software that gives you gaze and fixation patterns of the user when he is testing the system. By combining and analyzing these patterns we can have a "representative pattern" that applies to most of the people7]. We can use eye tracking software to study how the users view the websites (pictures, ads, content and so on), to gauge the effectiveness and benefits of your design to the company or the user. The more formal definition by [ HYPERLINK "" \l "Bla" 8 ] is "Intelligent camera sensor technology that detects the viewing of a screen by a person; reflective light is used to determine when the person's eyes turn in the direction of the screen". A study was conducted that compared eye tracking with think aloud and video recording method it was observed that eye tracking identified more usability problems and the users completed the more tasks in less time by 42% to 79% 9].

Some of the answers that we previously unanswered are answered through eye tracking:

Difference between reading("orderly fixation") and scanning( for particular word phrase)

Learning the gazing and fixation patterns of the user. The time spent on each area of the system, includes number and duration of fixations which can be analysed through the use of heat map which, with red being the most fixated and green being the least fixated

Comparing scan data of users; by combining all the users scan data it will give us some idea about the user need device user strategies [ HYPERLINK "" \l "SCH98" 10 ].

Some of the drawbacks are that they have trouble with eyeglasses, contact lenses or who smiled (causing them to squint)10].

Human Perception & Attention:

As usability is user-centred, so human perception and attention also plays a huge part and comes into consideration when designing the system because we want the user to be attracted to the system and grab his attention while providing him with timely, important and useful information while not distracting or overloading him with it. The attention [ HYPERLINK "" \l "ben05" 11 ] is usually defined in "terms of the focusing of mental resources at or on a particular task or object". In everyday life attention in pivotal in performing day to day tasks such as working on a computer, driving a car, cooking a meal etc. So in terms of 11]we must design a system that makes most of the system while minimizing its limitation. Attention can also be divided between tasks e.g. writing this report as well as listening songs, driving a car and talking on the mobile etc. So by practising we can reduce the amount of attention required to perform the task thus we can perform some task concurrently.

Models of attention:

There are three different models [ HYPERLINK "" \l "ben05" 11 ] which psychologists have developed over time:

The first and the oldest model that says that there is a mental switch or filter which tells us which information to ignore or pay attention. This model is not widely accepted today.

Another approach tells us that we have limited processing power and doing or choosing some task depends on the power needed to do it task. This kind of model is known as allocation model but it does not tell us the capacity of the processing power neither tells us how attention is focused.

The last approach distinguishes between controlled ("makes heavy demand on attention resources and involves consciously directing attention towards a task") and automatic processing ("no demand on attention resources and is difficult to modify and in not subject to conscious awareness").

Despite effort there is no agreement on any model some of the model discussed in 11] is that attention is studied in different ways and context and it is difficult what attention is?

When studying attention another variable comes into mind that how aroused or awake we are i.e. are we stressed or sleepy etc. It is an important factor because the higher level of arousal the better the performance will be. As shown in the figure:

Usability studies of Websites:

Current practices tells us that by spending 10% of the project design resources on usability aspects, we can double the website's desired quality matrices or key performance indicators values those would normally include conversion rates (visitors who become regular customer), website traffic, user performance(time taken to complete a set of desired tasks) and targeted viewing( where you want to divert the user attention or want the user to click on the desired information or link) [ HYPERLINK "" \l "Nei08" 12 ]. . Another feature of the website is that it should be consistent, it should be flexible and the user should feel in control of the system.

Developing Website:

(Garrett, 2003) presents the idea of developing website in five steps keeping in mind all the usability aspects as in the figure above:


The strategy (bottom layer) mainly deals with the site objectives, the type of users using the system and their needs i.e. what to they want to accomplish form the site. Strategy mainly deals with "business goals, the organization's brand and a market analysis".


The layer mainly deals with the functional requirements (the user requirements and what is the purpose the site is being designed for?) and content requirement (what information do you want the website to contain i.e. is it going to be e-commerce website, news, blogs?). Garrett reasoned that this is the important layer because the designer should have clear picture what they will be building as the result we have "a set of clear, prioritized set of requirement" so it should be accorded more time


In the layer it contains information architecture is like creating a blue print 13] (paths, flow of information, placements of buttons and bars etc) of the site before starting its construction. It is basically a conceptual design [ HYPERLINK "" \l "ben05" 11 ].


It encompasses three designs namely

Information Design is presenting your information in a clear coherent way that facilitates the users in accessing the information efficiently and effectively 14].

Navigation Design is basically a site map or a road map of your site which will tell the user how to get their while being simple and clearly marked.

Interface design: designing the Graphical User Interface with continuous user feedback.

A technique of combining all the above design is by using wireframes to represent your website. Wireframe is a rough sketch of the website structure showcasing the basic elements (textboxes, banner ads, navigation bar, search bar and so on.) what and where will they be inserted, how will they be accessed and so on. We not only have to look at the elements we will also look into the information that they may contain e.g. if the information is large we will not use small text box that compels users to scroll down unnecessarily. An example of wireframe is below [ HYPERLINK "" \l "Web09" 15 ]:


It is a final layer is where the entire website layout finally takes shapes. This layer deals with all the web aesthetics (colour, banner and navigation placements etc) it's more about striking balance between classical and expressive aesthetics. Classical aesthetics emphasizes clear and orderly design" while adhering to the good design principles. While expressive aesthetics encompasses the designers' creativity, originality and breaking of deign convention rules16]

Aesthetics is not a new concept; the paper defines two philosophical perspectives to aesthetics and then defines aesthetics in modern era.

One school of though believes in "intentionality of aesthetics attitude". The underlying question that they tend to answer is that; is the subject or user guided by the purpose or set of attributes or functions that is performed by the object? When deciding if the object is aesthetic or not? Louis Sullivan quote "form follows function" sums up this perspective.

The second perspective is opposing extreme as "Kant has claimed that the aesthetic attitude is found when one attends to the object in the absence of any purpose whatsoever". In simple words user can only judge the object aesthetics when that object is not serving any purpose or functionality that is essential for any task completion.

While modern prospective finds the middle ground and concludes that requirements stated by the user do not dictate design but design is bounded by it. Designers have the freedom to be creative but their creativity should not compromise the requirements set forth.

In order to maintain consistency across several web pages we use style sheet. Style sheets is designed mainly to create clear separation of document content with document presentation on screen and on paper (print), this may include layout, colours and fonts [ HYPERLINK "" \l "ben05" 11 ]17].

Using the style sheet has many advantages. It provides more flexibility as we can change the layout without interfering content, enable multiple sharing among WebPages, and remove "complexity and repetition" from our design as we can declare the variable with the colour and then can use it multiple times, as the CSS is written in different file so you can change or replace that file with any other style file and the website will start depicting the new style.

Visual Search:

Attention and perception plays an important part when a user is doing a visual search of the word or phrase in the website. In a visual search there can be no visual patterns as the User may not start his search from the left, right or any clockwise direction. When the user is searching for the words, it has been observed that most people "fixated first" on the upper left corner of the page before moving from left to right [ HYPERLINK "" \l "Out" 18 ], so if you want to convey an important information the best option would be to put that information at upper left corner where there will be maximum fixation.

However flashy colours, animations and large fonts can draw attention to it so the headlines (large font) drew the attention to itself while pictures were not gazed first on entry but they did receive significant eye grazes during the test18] due to this observation text can be our most preferred medium. The users read the headlines as well as the following paragraphs if they were of the same font size otherwise they would just read the headlines and skip the paragraphs. People fixated on the first few words of the paragraph and if they found them interesting then they read the whole thing so it is necessary to engage the customer in those few words otherwise the user will move on.

Physical organization can also have affect on search patterns, displays or dials organized in rows intended to be searched from left to right while columns were searched from top to bottom and then vice versa for the next column as shown in [ HYPERLINK "" \l "Hor03" 19 ]. While there was a noticeable difference of eye fixation time and revisits count where their was hierarchical labelling present against none present because user searched the labels until they find the "target group" and then confined their search to that group. It was also noticed that users can scan multiple entries in one fixation so it is recommended that designers should group similar items together and lastly, Text shapes were also ignored by the user.

"Parasuraman (1986) has reported the evidence of edge effect where it was reported that users tend to look in the middle of the display while ignoring the peripherals". So we need to design the system keeping visual ability and attention in mind and it will help us design a better system.

When we are designing the website we should keep in mind that how good or focused the website is but over time it becomes increasingly large that soon there will be problems of navigation we still do want the people to find their way to the required information in minimum time. According to 11] some of the common standards that the websites employ today is using top banner to tell people where they are, in clear and simple words and navigation panel placed just below the banner because it will attract more attention [ HYPERLINK "" \l "Out" 18 ] or on the left of the page. If the webpage is smaller, navigation tools will be used more as compared to larger websites as users can scroll down for more information although it is a good idea to put important information on upper portions of the page put that may lead to clutter20], so if you remove content then you will have more space for advertisements that can increase your revenue as well.

A lot of research is also being done on the advertisement banner on the website. It was reported that the ads at the top and left portions received more eye fixations. Designers should post their ads that are relevant and in close proximity to the content of the page as it has been proved that users performed their tasks when irrelevant, distracters were added. According to [ HYPERLINK "" \l "urk05" 3 ]18] advertisements are disliked and ignored intentionally because users think that advertisements are hassle and nothing good comes out as 70% of the fixations occurred when in the first eye movement and also by analysing eye tracking data it was noticed that "11.7% of the banners being fixated on" in the whole experiment [ HYPERLINK "" \l "Sut08" 20 ]. It is reported that ads text or animated distract the user and increase the search time "banner ads degrade visual search and are quickly forgotten"19]. "An animation that appears alongside primary content will disrupt your readers' concentration and keep them from the objective of your site." (Web Style Guide, 1999).

Shorter paragraphs were also better rated as they received the twice number of fixation in comparison with the longer paragraphs. It is learned that the bigger the image the more the people look into it as the experiment was done between an image size of 80X80 Pixels(small), 210X230(medium) and 365X240(large). It was observed that medium sized photos, people faces clearly visible kept the user more interested [ HYPERLINK "" \l "Sut08" 20 ] and it is more likely that they will click the photo so it is a good idea to link that photo with its bigger version or some relevant topic that is associated with it18].

According to [ HYPERLINK "" \l "Sut08" 20 ] after they did test on a number of websites they did agree with previous research that animation did attract attention but static areas are ignored and that "columnar structure distribute attention evenly and promotes attention". This is what we are exploring how the columnar structure fares against the other layout that are commonly used and does number of columns make difference on the preference of the users?

But the difference in our approach from this paper will be that in 20] they have used some well known sites (BBC, NIKE, PC world), due to which they have already used the website and they already know where and what to look for. This experiment does not eliminate prior knowledge and biasness as some may like Adidas more, likes tabloids or does not like the article written so naturally his opinion and result will be biased towards personal preferences and prior knowledge of the website. We are trying to eliminate this biasness by creating new websites where the content will be neutral (in order to eliminate personal preferences) and the content will not resemble any commonly visited websites to eliminate prior knowledge.

Moreover the second difference is we will be systematically testing websites with clear distinction between designs structures and layouts, unlike no distinguishable difference between these sites. (Go through it some more)

So now we are using 4 different and common layout as defined above then we will map four different contents on these four sites then we will choose exact words or phrases that the user must search in the website. The words can be on main page(easy task) or in the secondary page(hard task).we will then use Tobii eye tracking software that will give us a fair idea, where the user gazed more by using heat maps.

By keeping the content same on different layouts we will experiment that does site structure matters when the user is searching for the word or not. We can also note the time it takes to search the words in different designs according to the task classification and then deduce the result at the end.