Webpage Usability Evaluation and Optimization Design: A case study

Transcription

1 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

2 Based on the definition on usability of ISO 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 Evaluation system on webpage Use efficiency Information complexion Information correct Whether there are blocks Use Effectiveness Information clear 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 More than 3 years Major in design Professional designer More than 3 years Employed designer Visitor 28 1 More than 3 years Employer 2

3 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 minutes Browse for a long time, several times return for 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 difficulty Yes Page choosing is hard and finding the wanted 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. Navigation function is clear and complete. 3

4 3 Will keep reading. Format structure is good for smooth reading. 4 Reading process is smooth. function is complete. Information search is convenient. 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 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 impression and feeling on webpage In the beginning I don't know where to click and how to get in. The website feels not so prominent. Some content is not interesting. No special attracts me, and no place can let me continue to focus on. I hope this webpage has more feeling of design, or is creative. These words is too much, I kind of don't want to read. The format structure of the web interface should conform to the user's visual browsing habits. The website design style should be prominent. The webpage content should be interesting, and the displaying information should attract users. The webpage design and information should attract users. The webpage design style should have more feeling of design, or is creative. The words number is proper for user to read comfortable. Dislikes Some of the headline is not very clear, I also think it can click. I don't like the page so long. I have to drag the mouse, so the following content I don't watch carefully. Turning page is not convenient. I can not choose the page. The webpage headline text is clear without misleading. The webpage length is reasonable. The webpage allows users to choose the page. 4

5 Proceedings 19th Triennial Congress of the IEA, Melbourne 9-14 August 2015 Some pages color is confusing, causing uncomfortable on the vision. I have to click several times to see the other information, too much trouble. Color design should be neat and comfortable. Likes Feel good on platform introduction. Suggestion Introduction word is too much and they can be in the next level page. Add the search function. 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. The webpage format design should be convenient for users to browse information. 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

6 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) Nielsen J. Usability Engineering. New York: AP Professional. 1996: 23-37, ,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)