The Eye Has to Travel: What makes good web design

When “a web design” or “a website look” is mentioned the first association that comes to mind is its aesthetics: does it look nice, is it likeable. How we appreciate how something looks represents a set of collective cultural values, but it is also a result of individual taste. The saying goes “Beauty is in the eye of the beholder”, and judging website design by its looks is a highly subjective and debatable matterInflatable Marquees. Web site aesthetics plays a role in assessing a good web design, but is that the only judging criterion or there are some other elements that combined together differentiate a good web design from a bad one.

Studies have showed that when a visitor opens a website a very little time is needed for them to make a decision whether to stay on the webpage or leave it. A research team lead by Dr Gitte Lindgaard found that people can make rough decisions about a Web page’s visual appeal after being exposed to it for as little as 50 ms, which is 1/20 of a second. It is important to note that this is not how users actually approach web pages during real use. For one the page takes longer to load, and people usually spend a few seconds (less than ten) looking over the page before they decide what to do next. “Ten seconds is also the time users typically allocate to examining a page before deciding that it’s so bad that they’re going to leave.” (For more on this subject see Nielsen Norman Group. Powers of 10: Time Scales in User Experience)

The word “design” is often associated with notions of style, visually pleasing, functional and attractive, and carries positive values. It is in the human nature to react positively to good-looking people and good-looking things. This is the way that our brain is wired. The first impression does really count and there are studies to support that. Having a visually appealing website will tick the first box with most users, but a website as an art piece is not what users have come for. A website has to have a function and this is the first of several elements-qualities of good web design that this essay is going to explore.

 

1. Functionality: A good website has to serve its purpose and in order to do so successfully it has to address the requirements of a specific website genre, i.e. to inform its users, to entertain or educate them, or serve as an e-commerce platform. The website functionality can be described as “the user friendly aspects of interfaces and Human Computer Interaction (HCI), where the main objective is to create effective websites where the user quickly and efficiently can obtain the desired pieces of information without being delayed by long downloading times or blind alleys when navigating on the site.” (Thorlacius, 2007:64) The importance of website functionality can not be stressed enough as there are examples of beautifully designed websites, that represent an art piece as they satisfy the highest aesthetic criteria, but are useless and fail to serve it purpose and its users.

2. User-friendly and user-centric. Design elements, typeface, graphic and visuals, color choice and layout have to send a unified message to a user, to attract their attention and initiate an action i.e. make a user click on links or buttons, go to the next page, search the site and behave actively. Well designed website and its elements have to draw attention, evoke interest and desire and call users to action. This is especially important for commercial websites. (The AIDA model outlines the four basic stages in the purchase decision-making process: attention, interest, desire and action.) (Lamb et all. 2010:495)

A good web site is designed with users in mind. If a website does not meet users’ expectations, they will leave it and go somewhere else. Therefore knowing and following users’ expectations means to understand what users expect from a site’s navigation, text structure, search placement and other site elements. (see Nielsen’s Usability Alertbox for more information) (Navigation describes how users move around a web site by clicking on the various hypertext links built into that site.) (Gay et all, 2007:281)

3. Usability When planning a website design users’ goals, their online behavior and habits have to be taken into account. Eye tracking studies have showed that users do not read, they scan a web page moving their eyes in a F-shaped pattern starting from the upper left-hand corner. http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ Also users’ attention span is shorter on the Internet. “Web users are impatient and insist on instant gratification.” (http://www.guardian.co.uk/media-network/media-network-blog/2012/mar/19/attention-span-internet-consumer). This patterns of users’ online behavior are highly relevant for website usability.

Gay et all tell us that “web usability has its origins in the science of graphical user interface (GUI) and human computer interface (HCI) and it is all about making the website user friendly.” The idea behind the usability principle is pretty simple: to make site simple to use and make create a positive users’ experience. Gay et all quote web usability guru Jacob Nielsen, (2001) who says that “usability” means making technology easy and approachable for people, making technology adapt to the way people behave, not the other way round.” (Gay et all.2007: 282) In practice that means that users should not feel confused or overwhelmed with technical or any kind of requirements from the site. The less action is required from users to do on the site, the more likely they will stay on it and explore it. Otherwise they will leave and search for alternatives. (Hutchins and Rowe, 2012).

4. Design: The “keep it simple” principle should be the primary goal of website design. Users are rarely on a site to enjoy the design, in most cases they are looking for the information despite the design. A webpage that is not cluttered and that complies with the above listed criteria will enable users to have positive experience while on the site. The visual effects play an important role in the communication of content, in addition to creating more or less aesthetic experiences, but only as long as it serve website purpose. (Thorlacius, 2007:63)The aesthetic effects must support the content and the functional aspects. Web sites are more user-friendly when they contain aesthetic effects that support the navigation and interaction functions. (Thorlacius, 2007:67) Therefore the layout, the individual graphic, textual and interactive elements should be appropriate for the site audience and the website purpose, but the designer should strive for simplicity, and that simplicity should not be only a matter of visual experience. Steve Kruger the author of “Don’t make me think” book says: “Create a clear visual hierarchy; (…), the more important something is, the more prominent it is.” (Kruger, 2006:31) And here is why this matters: websites have both static and dynamic content, some of their elements attract attention more than others, visuals are more prominent than plain text, and animated ads are more eye catching than static visuals. Complex and cluttered structured web pages are harder to read, scan, analyze and work with. Simplicity in design and layout should be used for managing users’ focus. The eye has to travel and the design should make that travel easy. (For more on web design see Shelly et all. 2012)

 

Based on all above said every webpage of a website should be obvious and self-explanatory. To paraphrase Steve Krug “Do not make users think!” Users follow their intuition and having intuitive and simple navigation makes it easier for users to find their way around the site. In other words reducing cognitive load makes it easier for users to understand the information they see on the screen. In practice this means having simple site structure, moderate visual clues and easily recognizable links that help users achieve their goal. Web design should focus on users expectations and experience with interacting with the screen. That helps achieve better navigation and functionality of the website as users search for some fixed anchors which would guide them through the content of the site. The user is the only person who clicks the mouse and a user-friendly and user-centric design is a must in quality web design. Usability, functionality and visually pleasing design combined together determine the success or failure of a website. Therefore a website that is conceived, planned and produced to fulfill all these requirements is a recipe for successful and profit-oriented web design.

 

Bibliography:

1. Brinck, B., D. Gergle, S. Wood. 2002. Usability for the Web: Designing Web Sites that Work. Academic Press.

2. DiMarco, J. 2010. Digital Design for Print and Web: An Introduction to Theory, Principles and Techniques. Wiley and Sons.

3. Gay, R., A. Charlesworth, R. Esen. 2007. Online Marketing: A Customer-Led Approach. Oxford University Press.

4. Hutchins, B., D. Rowe. 2012. Sport Beyond Television: The Internet, Digital Media and the Rise of Networked Media Sport. Routledge.

5. Krug, S. 2006. “Don’t make me think.” 2nd edition. New Readers.

6. Lamb, C. W., J. F. Hair, Jr., C. McDaniel 2010. Marketing. Cengage Learning.

7. Landau, E. “Beholding beauty: How it’s been studied”. http://www.cnn.com/2012/03/02/health/mental-health/beauty-brain-research/index.html [accessed January, 27. 2013]

8. Nielsen, J., H. Loranger, 2006. Prioritizing Web Usability. Nielsen Norman Group.

9a. Nielsen Norman Group. Powers of 10: Time Scales in User Experience.http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/ [accessed January, 27. 2013]

9b. Nielsen Norman Group. F-Shaped Pattern For Reading Web Content. http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ [accessed January, 27. 2013]

10. Nielsen Norman Group. http://www.nngroup.com/articles/ [accessed January, 27. 2013]

11. Shelly, G. B., J. T. Campbell. Web Design: Introductory. 2012. 4th edition. Cengage Learning.

12. Sklar, J. 2011. Principles of Web Design. Cengage Learning.

13a. Smashing Magazine. 2012. Psychology of Web Design. Smashing Media GmbH.

13b. Smashing Magazine. 2012. User Experience Design. Smashing Media GmbH.

14. Thorlacius L. The Role of Aesthetics in Web Design. Nordicom Review 28 (2007), pp. 63-76 http://www.carlosmoreno.info/upn/2012/PDF-1.pdf [accessed January, 27. 2013]

One comment:

  1. Thoughtful, informative paper, Jelena. Do you have any examples of websites that use these principles well, or don’t? I’m particularly interested in what a website would look like as a work of art with zero functionality! It sounds amusing from a critical perspective.

    I was also wondering about the fact that a website needs a clear call to action, but then can’t require too much action of the user or they will get frustrated and leave. Is this a sliding scale of the same issue (in which one must find the compromise between some action and too little)? Or is it the difference between a suggestion and a command?

    Good job overall!

Comments are Closed.

css.php