Web Design Principles

It will be difficult to present an "ultimate best principles" in any point of time due to the rapid development of web designs, Contnet Management Sytems (CMS) like Joomla, Drupal, Wordpress and others, but also due to the changing behaviour of people interacting with web sites.  Having said that, some of the "old" research is still applicable and useful in design web pages, or is it?.

1.  Introduction

Research done by Gitte Lindgaard  (Lindgaard, Fernandes, Dudek, & Brown, 2006) from the Carleton University found that web designers have 50 milliseconds to attract web visitors’ attention.  Another cognitive psychologist, Andy Edmonds (Edmonds, 2006), is not so sure that this study is unambiguous as other factors also determine “decision time”.  “The time, say as observed through browser instrumentation, not only includes the human decision time (>50msec), it also includes page load, render time, and the user’s time to make a response.”  (Edmonds, 2006).  

Although these studies concentrate on the visual appearance of web sites, it is clear that visual appearance is not the only thing that matters in attracting and keeping visitors to a web site.  The content is equally important.  As Jayes states, “Just having a beautiful website is not enough, the main reason for having the site in the first place is to earn an income from it, so no matter how lovely it looks, it still needs to be able to convert visitors, either into customers or subscribers or both.” (Jayes, 2009).  Similarly, Smashing Magazine also refers to the role of usability in relation to the visual appearance of a web site.  “Usability and the utility, not the visual design, determine the success or failure of a web-site.” (Smashing Editorial, 2008).  

One can therefore imagine that between visual vs content: both is equally important.  No one should be superior to the other.  “Apparently, both the first impression and the pleasure associated with continued usage are at least as important as usability concerns. Thus, more effective resource allocation in web design, especially in e-commerce web design, is one positive and immediate outcome of that understanding.” (Lindgaard, 2007, p. 11).

Looking at 3 major companies' web sites, we thought of citically giving our opinion based on eight usfull design principles.  

2.  Web Design Principles

Despite having said that an "ultimate list of best design principles" are close to impossible, we found the design principles of McGlurg-Genevese (2005), Bernardino (2008) and Turner (1999) useful and will use it as the basis of this discussion.  

2.1 Balance

Balance refers to the first impression one gets when accessing a web site in regards to the text and images.  “It is the arrangement of the objects in a given design as it relates to their visual weight within a composition” (McGlurg-Genevese, 2005).  Balance will affect the elements of text and images, or typography.  Typography has all to do with font size and font types, colour, paragraphing, line layout etc.  Again, consistency is important as well as ease of read.  As pointed out, visitors don’t necessarily read, but scans.  “For this reason, designers create typographic contrast and flow by emphasizing certain text” (La, 2007).  Therefore, "less is more", which makes it possible to choose a bigger font size for easier reading, or "eye-catching" words. 

2.2 Structure

Structure refers to the “connection, interaction and interference” (Turner, 1999) of a web site and effects the interface and navigation.  The navigation through your site should be clear and easy.  Moving around a web site can be very confusing.   “If the user has to figure out how to move around within a site you have lost” (Winfield, 2008).  It is therefore important to either add a site map, which will provide visitors with a graphical representation of the entire site and its relation to other pages, or indicate clearly to the visitor where they are (breadcrumbs).   “Navigation should give readers a clear and unambiguous indication of what page of the website they are on.” (Charlotte, 2009).  Navigation should therefore indicate to visitors where they are and where they can go to, or as Ta’eed (2008) indicated; “navigation” and “orientation”. 

2.3 Security

With the increase of malicious activities, cyber-crime and hacking, security is a principle that are crucial for eCommerce web sites.  Visitors participating on eCommerce web sites need to know what secure principles are incorporated on a web site and what are the Terms and Conditions of using the web services.   

2.4 Dominance

Domincan “determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design” (McGlurg-Genevese, 2005).  Much has been written on the "eye-catching" element of a web site.  Steve Krug’s book, Don’t Make Me Think, also referred to the fact that readers don’t necessarily read web page content, but scans a page (McGlurg-Genevese, 2005).  Nielsen (2006) has also done Eye-tracking Research and refers to the F-shaped pattern of eye-catching elements on a page.  “Eye-tracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe” (Nielsen, 2006).  From this research, Nielsen concluded that 

• visitors don’t read the entire text
• clear indication of your products or service should appear in the first few paragraphs, and
• the correct words used should immediately direct the users attention as they rarely will read further. 

2.5 Unity

Unity refers to the “relationship between individual parts and the whole” (McGlurg-Genevese, 2005).  Many web designers points out the importance not to clutter a web page but to effectively use “white space” (Smashing Editorial, 2008).  Effective use of white space helps guiding visitor’s eyes to the important elements of a web page. 

2.6 Usability

Steve Krug’s (McGlurg-Genevese, 2005) book also refers to the usability of web sites as a primary concern for web design.  According to Krug, a first principle should be not to make users think (Smashing Editorial, 2008).  In other words, a web site shouldn’t make statements which create more questions in the mind of visitors than answers, what McGlurg-Genevese call “unnecessary question mark” (2008).  What is been offered on a web site, should be usable and must align to the purpose of the site. 

2.7 Consistency

Web site levels and pages can become very confusing for visitors.  The only way a user can be assured to be still at the same “company” is by consistency in the design.  The same applies to consistency regarding a web site as a whole.  If visitors access an online banking site which changes its design (and even colour scheme) regularly, users might lose trust and would have to re-“learn” the navigational flow of the site.  “The more a website works the same every time the more the user feels comfortable with a design” (Winfield, 2008).  Inconsistency in design portray lesser quality.  Consistency also applies to typographical design and not only navigational elements. 

2.8 Testing

Lastly, many designers points out the importance of testing a web site.  “Knowing how users interact and use your website is incredibly valuable information, and if used correctly can greatly change your UIs (user interface) to better suit your users” (Stansberry, 2008). Broken links and services, especially eCommerce services that is not functional in different browsers (Mozilla, IE, Google Chrome) is not only unprofessional, but will also fail to work properly and execute the server-side function.  In terms of online banking, this can pose a security risk to visitors. 

4.Conclusion

Bernardino (2008) wrote an interesting article on the difference between a web developer and a web designer.  According to Bernardino, a web developer concentrates more on the programming side of a web site while the designer is more inclined to the artistic side of the web site (Bernardino, 2008, p. 1), but also points out the importance of both these elements to be considered when designing a web site.  

Although mention was made on the usability of a web site in contrast to appearance or visual appeal, Lindgaard (2007) pointed out that visual appeal has much to do with a visitor’s first impression of a site, as much as first impression is a lasting impression in human behaviour.  Therefore, a balance should be struck between appearance and content.  “So, an e-commerce web site representing a business that is in competition with numerous others on the Internet and that fails to meet users’ expectations both in terms of aesthetics and in terms of its informative content is unlikely to be successful at converting browsers to customers even if its quality of products or services is superior to its competitors.” (Lindgaard, 2007, p. 5).  

It is somewhat an ambiguous task to select "Best Design Principles" as every second web designer claims to have the "Best Design Principles" and developments in CMS are rapid.  This article only touched briefly on some research done on the interesting field of human behaviour and web site design (Lindgaard, Fernandes, Dudek, & Brown, 2006). 

Much needed ongoing research will definitely help the field of Web Design.  

### 

Bibliography

1. Bernardino, P. J. (2008). What a Good Website Designer and a Web Developer Should Know about Web Design! Retrieved July 19, 2009, from Web Design Library.  Link here.
2. Charlotte. (2009). 10 Principles Of Navigation Design And Why Quality Navigation Is So Critical. Retrieved July 19, 2009, from Onextrapixel. Link here.
3. Edmonds, A. (2006). 50 milliseconds and your home page. Retrieved July 20, 2009, from Surfmind Musings. Link here.
4. Gonzalez, J. (2009). Importance of Web Content on Web Design. Retrieved July 19, 2009, from 123triad.com Web Design & Web Marketing. Link here.
5. Jayes, M. (2009). What is Important a Website that Sells or Generating Traffic? Retrieved July 19, 2009, from Article Alley. Link here.
6. La, N. (2007). Typographic Contrast and Flow. Retrieved July 19, 2009, from WebDesignerWall. Link here.
7. Lindgaard, G. (2007). Aesthetics, Visual Appeal, Usability and User Satisfaction: What Do the User’s Eyes Tell the User’s Brain? Australian Journal of Emerging Technologies and Society , 5 (1), pp. 1 - 14.  Retrieved July 20, 2009, from here..
8. Lindgaard, G., Fernandes, G., Dudek, C., & Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression. Behaviour and Information Technology , 25 (2), pp. 115 - 126.
9. McGlurg-Genevese, J. D. (2005). trhe Principles of Design. Retrieved July 19, 2009, from Digital Web Magazine. Link here.
10. Nielsen, J. (2006). F-Shaped Pattern For Reading Web Content. Retrieved July 20, 2009, from here..
11. Smashing Editorial. (2008, July 31). 10 Principles Of Effective Web Design. Retrieved July 19, 2009, from Smashing Magazine. Link here.
12. Stansberry, G. (2008). 10 Principles of the UI Design Masters. Retrieved July 19, 2009, from here.
13. Ta'eed, C. (2008). 9 Essential Principles for Good Web Design. Retrieved July 19, 2009, from psdtuts+.  Link here.
14. Turner, M. (1999). Fundamental Web Design Principles? Retrieved July 19, 2009, from here.
15. Winfield, P. (2008). 7 Essential web design principles to earn trust and 4 things to avoid. Retrieved July 19, 2009, from 10e20 Blog.