Proceedings 19th Triennial Congress of the IEA, Melbourne 9-14 August 2015

Webpage Usability Evaluation and Optimization Design: A case study

Yanmin Xue, Yefei Shi
School of Art and Design, Xi’an University of Technology, Xi’an, Shaanxi,CHINA

Abstract:   Webpage usability research catches the attention in recent years. This article combines
the user survey and the methods of art design. Firstly, construct the evaluation system according to
the usability criteria, and adopt in-depth survey of situation investigation, questionnaire survey, and
interviews step by step. Some problems on browsing the webpage process are summarized. Usability
evaluation from three aspects of customer satisfaction, use easy, use efficiency is researched.
Translation is done for each evaluation into design requirements of webpage design elements, namely
color, text, pictures, layout. According to the evaluation conclusion, optimize design on webpage’s
color, text, pictures and layout is then carried out. It is in form of art design that solves the problem of
bad webpage usability. The method in this paper manifests the combination of science and art. Users
reflect that the optimized webpage meets the needs of visual characteristics, improves the
effectiveness of receiving information and increases browsing pleasure and dominancy.  

Keywords: webpage, usability, user survey, art design

1. Introduction
With the webpage information amount increasing, how to improve the information communicating efficiency
is quite important. This requires not only browsing process smoothly and effective obtaining information, but
also good visual experience. These are the content of the usability research, which has now become a
research focus in the field of web interface design.
Nielsen Norman(2014) proposed that product usability covers multiple elements, mainly related to five
usability attributes: learnability, memory ability, efficiency, error, satisfaction. Usability concepts applying to
web design can be called as website usability. Carlos(2006) proposed five factors of website usability. 1) The
ease of understanding the structure of a system, its functions. 2) Simplicity of use in its initial stages.3) The
speed with which the users can find the item they are looking for. 4) The perceived ease of site navigation. 5)
The ability of the user to control. Jungmin Yoo, Minjeong Kim(2014)examined the effect of home page
design on consumer responses based on the Hierarchy of Effects model and impression formation theory.
The findings revealed that: an image-oriented design is more effective in enhancing a home page’s visual
fluency, and people in both high and low CVPA(centrality of visual product aesthetics) groups preferred an
image-oriented home page to a text-oriented home page. In the process of user access to webpage
information, the receiving effect is affected by the information quantity(Jakob Nielsen,2008), density(Jie
Liu,Peilun Rao,2006), interference(Robert J.Sternberg,2006), sharpness, contrast, practical experience ,etc.
Ladislao Salmerón (2013) found that in the process of receiving webpage information, user’s visual
movement has flow and characteristics. Such as, web users tend to search only the pages displayed at the
top of the search engine results page (the ‘top link’ heuristic).
Existing web usability research mainly pays attention to some factors influencing the web usability,
rarely combining with art design and visual communication design. The analysed case seldom was modified
according to their researching result. And art design study of the webpage is just from the angle of design
aesthetics, and analysis on design elements such as color, text. They attach great importance on aesthetic
feeling, rarely considering the message conveying effectiveness from the Angle of users. This study focuses
on the relationship between web usability and web interface design elements. The user survey results are
translated to design requirements about webpage elements such as color, text, typography design. The
problems raised in user survey are solved through optimization design on color, text, pictures, typography.
The new design meets the needs of user's visual characteristics, improves the effectiveness of user
receiving information, browsing pleasure and dominant feeling.

2. Build the evaluation criteria

  1  
 Proceedings 19th Triennial Congress of the IEA, Melbourne 9-14 August 2015

Based on the definition on usability of ISO9241-11 and the content architecture of usability test, at the
beginning this study is building an evaluation system of web interface design. This evaluation system has
three aspects of user's satisfaction, efficiency and ease of use. The three indexes are user- centralized and
are analysed from visual design, interaction design and information structure design. Although the content is
different, test results is always around the user's visual characteristics. The evaluation system construct is
shown as figure1.
Whether  reach  the  expected  goal  

User satisfaction
Subjective  feeling  

Information  complexion  
Evaluation system
on webpage Use efficiency Information  correct  

Whether  there  are  blocks  

Information  clear  

Use Effectiveness Ease  to  understand    

Navigation  
clear    
Figure1.The construct of the evaluation system

3. Design survey
3.1 Choose experiment users
First of all, preliminary analysis on user groups of web usability test. User group types can be
preliminarily determined as three categories. Selected interview users are shown in table: 1) Mainstream
users, their purpose is clear to learn the design ideas and release design works. They try to improve design
ability through participation in design activity. So they have higher requirements for access to information. 2)
Professional design users, they pay more attention to the quality of information. They want to get more
information by Haier creative design platform. They demand higher requirements for conveying information
and browsing experience. 3) The visitor user, this type of users’ features and number are difficult to
determine. They generally browse web sites in unconscious condition, with random and contingency. They
maybe don’t love or know about design. But it is also possible to stimulate them to participate in by browsing
satisfaction or attracting by the webpage information and design. Then they will probably transform into
mainstream users. The common features of the user: has the rich site experience, has a certain aesthetic
feeling and sharpness to find problem. The common requirement for interview users is more than 3 years
network ages.

Table1. Webpage User selection matrix

User Age Number Age of web browsing User type

College students 18-25 10 More than 3 years Major in design
Professional designer 18-30 2 More than 3 years Employed designer
Visitor 28 1 More than 3 years Employer

  2  
 Proceedings 19th Triennial Congress of the IEA, Melbourne 9-14 August 2015

3.2 Three kinds of survey on the webpage usability

a. Situation survey
In daily work environment，observe the users’ practical work and record the details. The research
process should avoid influencing the users’ natural working condition. By observation and study, record
users’ browse webpage process. The users’ visual characteristics, the reading habits are studied and some
related issues on design are revealed.
In this step, observe 13 users who are browsing web interface and record the process by screen
recording software, total time is about 200 minutes. The survey content involves: the mouse click and move
condition during the users browse pages, residence time at webpage, webpage functional, fluid interaction,
information convey effectiveness, etc, as shown in table2. From which we can find which information attracts
more attention on the web interface. For example, if users takes longer time for some webpage, it shows that
the users are interested in this part of the information content, or it is also said the users spend a certain
amount of time to understand or access to this part of the contents; By observing the user mouse click, we
can understand whether the web interface reading is smooth and know the user's browsing flow.

Table2. User data template filled in by observer on user browsing webpage behaviour.
Content Evaluation Features
Items
Residence time About 3 Browse for a long time, several times return for
minutes continue reading
Click Clear Choose content interested to read.
Mistake Few Some text causes the illusion that it can be
clicked; The relevance between information and
the secondary navigation is weak.
Whether there is Yes Page choosing is hard and finding the wanted
difficulty content is confusing.
Complete of Not complete Information with too many words is ignored.
information
Expression Serious Reading the information carefully

b. Questionnaire
Relevant data and information are obtained from written forms. User comments on web interface reading
condition are collected. Scale is made up of statements, with 5 grades of 1, 2, 3, 4, 5 which separately
stands “very bad, bad, common, good, very good”.

Formulate the questionnaire content from three aspects of user's satisfaction, efficiency, and usability. User
experience on text, colors, graphics/pictures, format and information structure design, and effect of
information convey are investigated. Evaluation standard is divided into: 1 is very bad, 2 is bad, 3 is
common, 4 is good, 5 is very good. The questionnaire results show that each user’s evaluation for each item
is different; degree is also not the same. After the summary of the result of the questionnaire and computing,
retain content which has a greater difference among evaluation. The retaining items are shown in table 3 as
the contents for user interviews to proceed further web usability testing.

Table3. The retained items of three aspects (User satisfaction, Use effectiveness, Use effectiveness)
User satisfaction Use efficiency Use effectiveness
1 The webpage is creative. The text is easy to read. Information distribution density is
reasonable.
2 The webpage is special. Color using helps to read. Navigation function is clear and
2 The webpage is special. Color using helps to read. complete. function is clear and
Navigation
complete.

  3  
 Proceedings 19th Triennial Congress of the IEA, Melbourne 9-14 August 2015

3 Will keep reading. Format structure is good Information search is convenient.

for smooth reading.
4 Reading process is smooth.
function is complete.

c. User interview
Based on the above interview outline, interviews are carried out in users’ browsing environment. Interview
questions focus on difficulty, uncomfortable, unsatisfied, ignored details in the process of browsing web
interface. Discuss the user browsing experience and allow users to ask questions. The interview process is
based on language communication, the researcher needs to be good at capturing the information provided
by the user. We can give them some help or guidance, such as: where do you like the web interface? What
and where information has reading difficulties in the process of browsing the web interface?
There are 13 users taking part in this interview. Each lasting time is about one hour. One of the users
interview is shown in the following table. User interviews can directly and clearly understand the user's
browsing experience and get their evaluation of the web. For example, the user states that “I don't like the
page so long. I have to drag the mouse, so the following content I don't watch seriously”. This content
presentation shows that the webpage is too long than the normal range for user to accept.

Table 4. User data template filled with sample user statements and interpreted needs
User JY Interviewer YF
Address - Date 2015-01-10
Tel - Current website Hair creative platform
Willing to do Yes User type College students major in design
follow-up?
Question/Prompt User statement Interpreted need
Vision In the beginning I don't know where The format structure of the web interface
impression and to click and how to get in. should conform to the user's visual
feeling on browsing habits.
webpage The website feels not so prominent. The website design style should be
prominent.
Some content is not interesting. The webpage content should be
interesting, and the displaying
information should attract users.
No special attracts me, and no The webpage design and information
place can let me continue to focus should attract users.
on.
I hope this webpage has more The webpage design style should have
feeling of design, or is creative. more feeling of design, or is creative.
These words is too much, I kind of The words number is proper for user to
don't want to read. read comfortable.
Some of the headline is not very The webpage headline text is clear
clear, I also think it can click. without misleading.
I don't like the page so long. I have The webpage length is reasonable.
Dislikes to drag the mouse, so the following
content I don't watch carefully.
Turning page is not convenient. I The webpage allows users to choose the
can not choose the page. page.

  4  
 Proceedings 19th Triennial Congress of the IEA, Melbourne 9-14 August 2015

Some pages color is confusing, Color design should be neat and

causing uncomfortable on the
vision.
I have to click several times to see
the other information, too much
trouble.
Likes Feel good on platform introduction.
Introduction word is too much and
they can be in the next level page.
Suggestion Add the search function.
comfortable.
The webpage format design should be
convenient for users to browse
information.
The webpage visual effect is good to
attract user to keep reading.
Reasonable design the structure and
content webpages.
The website has the search function.

4. Optimization design of the web interface

Through gradually in-depth research of situational investigation, questionnaire, interview and so on,
evaluation result is obtained. A. visual impression: the design sense and creative sense of webpage is not
good. In the process of browsing, visual impression is less attractive. The color of the webpage is too
shallow and format design is too simple. B. visual capacity: text size, word, color number and format screen
number are more than reasonable amount for users to receive information. User access to information is
more arduous. Some interface format and color is random. Browsing process lacks of direction and
regulation; Text information is too much and reading process is more arduous. C. Visual flow: because the
format structure is not neat, so in the process of the user browsing it is hard to form a clear visual flow.

 
Figure1. The original webpage (left) and the optimized one(right)

According to the research conclusion, optimization design was carried out for the original webpage, as
shown in figure 1. The left is the original page, and the right is the optimized webpage. Some existing
reading problems of the original one respectively are: too much color, too many words, the format unclear,
not good navigation, etc. The new web design is optimized for color, text and format.
a. Text: highlight the theme of the content, improve the text visual clarity. Edit the information content of
the large number of text to a shorter paragraph, which enables users to read patiently.
b. Color: highlight color collocation. "blue, white, grey" is the interface main-tone, a variety of bright colors
is for auxiliary. "blue" is the color of web logo. "white" and "grey" are background color, clear foil interface
information and does not appear too dull. Use colour to classify information content and also foil the text, in

  5  
 Proceedings 19th Triennial Congress of the IEA, Melbourne 9-14 August 2015

which color is as visual guidance and improves the visual impression of information. Through interaction
design, different colour meaning of text and graphics on the secondary navigation bar relates the
classification way of the information content. The purpose of the optimization is visual effect more tidy, and
avoiding making stimuli to user's vision.
c. Graphics/image: keep well-designed graphics/pictures, and use graphic design to realize format
partition. Optimize the size and distance of the pictures to produce proper visual information amount.
d. Format: This webpage has four major areas, namely, "creative ideas", "design", "lab" and "activity" .
Flat design is used. Various elements are used to guide users to browse information, making the browsing
process conform to the characteristics of the user's visual flow. The optimized format improves the browsing
efficiency, reduces unnecessary thinking, and reduces the user's visual and aesthetic fatigue.
By color collocation, simple and highlight text design, format design and interaction design, the optimized
design allows users to view and access information process more relaxed, cheerful. Later User interview
shows that the refinement create clear content, neat format for webpage, causing good visual impression,
visual pleasure. Also the information conveying effect is clearer, conforming to the user's visual capacity.

5. Conclusions
This article constructs the evaluation system according to the usability criteria, and adopts in-depth survey of
situation investigation, questionnaire survey, and interviews step by step towards user browsing webpage
process. User evaluation on webpage usability is analysed and summarized, from three aspects of customer
satisfaction, use easy, use efficiency. The evaluation result shows that there are some dissatisfaction with
web impression, vision capacity, and vision flow. The paper translates each evaluation into design
requirements of webpage design elements, namely color, text, pictures, layout. According to the obtained
requirements, optimized design on webpage’s’ color, text, pictures and layout is then carried out. Users
reflect that the Optimized webpage meets the needs of visual characteristics, improves the effectiveness of
receiving information and increase browsing pleasure and dominant. The method in this paper emphasizes
on application, solving the problem of bad webpage usability in form of art design. Usability evaluation in this
article uses qualitative analysis. The next step of research work is to use equipment such as eye tracker to
get quantitative analysis, combining with qualitative analysis, to guide webpage design.

References
Nielsen Norman. User Experience Careers.International Experience Design Committee. 2014,7
Carlos Flavian, Miguel Guinalıu, Raquel Gurrea. “The role played by perceived usability, satisfaction and consumer trust
on website loyalty”. Information & Management 43 (2006) 1–14
Jungmin Yoo,Minjeong Kim. “The effects of home page design on consumer responses: Moderating role of centrality of
visual product aesthetics”. Computers in Human Behavior 38 (2014) 240–247
Nielsen J. Usability Engineering. New York: AP Professional. 1996: 23-37, 195-200,224p.
Jie Liu,Peilun Rao. “A study on the User Visual Search Performances for Web Visual Design”.Chinese Journal of
Ergonomics,2006（2）:1-3
Robert J.Sternberg.Cognitive Psychology[M](Bingjun Yang translate). China Light Industry Press，2006
Ladislao Salmerón, Yvonne Kammerer, Pilar García-Carrión. “Searching the Web for conflicting topics: Page and user
factors” .Computers in Human Behavior 29 (2013) 2161–2171

  6