Web Design: 15 Important Research Findings You Should Know
A small selection of web design, usability, and accessibility related results of research, most of them derived from Human Factors International (newsletter). Some of them are relatively known, while others may enrich our professional self-understanding:
Design is a key determinant to building online trust with consumers. For motivated users of an information site, bad design (busy layout, small print, too much text) hurts more than good design helps.
—Sillence, Briggs, et al. (2004).
Layout on a web page (whitespace and advanced layout of headers, indentation, and figures) may not measurably influence performance, but it does influence satisfaction.
—Chaperro, Shaikh, and Baker (2005).
Experience matters: Blue links are easier to click than black ones, even though black ones have higher visual contrast and are easier to see.
—Van Schaik and Ling (2003).
It’s important to consider the users when you have a choice of icons, links, or both. Initial performance is best with the link alone. Frequent users can use either equally effectively. Icons are not faster, relative to text links alone.
Rules of thumb for icons: Make them as large as feasible, place frequently used icons in a persistent task bar, and arrange them either in a square (first choice) or in a horizontal layout.
—Grobelny, Karwowski, and Drury (2005).
The acceptance and impact of animation is enhanced when users are warned to expect it and allowed to start it when they want.
—Weiss, Knowlton, and Morrison (2002).
Use of whitespace between paragraphs and in the left and right margins increases comprehension by almost 20%.
A format of 95 characters per line is read significantly faster than shorter line lengths; however, there are no significant differences in comprehension, preference, or overall satisfaction, regardless of line length.
Applications vs. websites: In general, visual layout guidelines for GUIs also apply to the web, but there are differences to be aware of. For example, dense pages with lots of links take longer to scan for both GUI and web; however, alignment may not be as critical for web pages as previously thought.
—Parush, Shwarts, et al. (2005).
Narrative presentation enhances comprehension and memory. Narrative advertisements produce more positive attitude about the brand and a higher incidence of intent to purchase.
On sites with clear labels and prominent navigation options, users tend to browse rather than search. Searching is no faster than browsing in this context.
—Katz and Byrne (2003).
Users will wait longer for better content. Users will wait between 8-10 seconds for information on the web, depending on the quality of the information.
—Ryan and Valverde (2003).
Consumer purchase behavior is driven by perceived security, privacy, quality of content and design, in that order.
—Ranganathan and Ganapathy (2002).
In 2001, Bernard found that prior user experience with websites dictated where they expected common web page elements to appear on a page. The same still holds true today: Users have clear expectations about where to find the things they want (search and back-to-home links) as well as the things they want to avoid (advertising).
—Shaihk and Lenz (2006).
When assessing web accessibility under four conditions (expert review, screenreader using JAWS, automated testing via “Bobby,” and remote testing by blind users) those using screenreaders find the most issues, while automated testing finds the least number of accessibility issues.
—Mankoff, Fait, and Tran (2005).
If you have a question or suggestion about what I write, please leave a comment (if available) or a message.
On January 14, 2007, 18:41 CET, Nathan said:
Too few people believe in the power of usable web design… And in a professional environment, it is unfortunately usually not the first thing considered for investment…
Very nice post! May I forward it to my colleagues and put it on my blog?
Grüsse aus München
On January 16, 2007, 23:13 CET, Alicia said:
I am one of the usability and accessibility advocates too, so you can imagine I love this entry you have put up. It sums up what we know, and in the manner we can just flick to those who are still not yet convinced!
We don’t need to sacrifice design for accessibility all the time! The judgement call is always on who your target audience and purpose of the project. Gee!
On January 17, 2007, 15:02 CET, dharma said:
Wow, this was really nice. Every webdesigner should be aware of these.
Fantastic post! thanks!
On January 18, 2007, 19:47 CET, alex said:
i figured out the following:
compared to grey background color
#555555 to #cccccc
white background really hurts the eyes.
it is derived from book paper color, however monitors are active light sources! background color provides no information, and thus can be reduced to #555555 / #777777 easily.
web designers should stop to see hypertext screen space as ordinary paper.
On January 19, 2007, 5:54 CET, Sardionerak said:
I work as a web coordinator at a higher education institution. Although I really like your entry, there are a few things that I would not leave uncontested:
This would be a very new revelation. The last time I read about this (I think it was Jakob Nielsen), it said that optimal line lengths were between 55 and 75 characters… who to believe now? The tricky bit with 95 characters is that on some monitors, and also depending on your own distance to the screen, you can start to experience difficulties to get to the correct start of the next line. And that really hinders easy comprehension.
Are they refering to the writing style? Because that would significantly decrease scanability of the text. Or does it relate to product presentation in general, ie with images and all?
I very much doubt that! This would only be the case if users already knew in advance that something good was to come up on their screens. But how should they know in advance? If a web site needs 10 seconds to build, I am long gone… and especially with the high level of substitution on the web, people would flock to the competitor who can offer a similar degree of content without that click-and-wait stress.
I like this point. It would mean that if we found out where on the web our users spend most of our time (like MySpace among students) we could determine quite accurately where they would expect certain things to come up on our site. I will look into that.
Are many of those papers available online? It would be really useful to have links to them.
Thanks for this clear and effective post! I’ll talk about it on my French blog…
On February 7, 2007, 18:00 CET, Patrick said:
Thak you for the clues.
There is a very interesting book about it: www.usability.gov/…
Salutation de Geneva (Switzerland)
On May 18, 2007, 0:50 CEST, alex said:
“Use of whitespace between paragraphs and in the left and right margins increases comprehension by almost 20 %.”
I like this one… Very nice article, thanks.
On November 15, 2007, 9:10 CET, Web designer Fredrick said:
wonderful post. Amazing research on webdesign usability. i supposed to agree to this point “Users will wait longer for better content. Users will wait between 8-10 seconds for information on the web, depending on the quality of the information” exactly in your post.
every web designer should aware of this 15 important valuable points while developing a professional website.
so here seems to be a contradiction. In one post you advise against Conditional Commenting, while it seems to help for achieving better accessibility, as Dive Into Accessibility book shows in chapter on font sizes.
Do you know any more elegant way of achieving this relative size effect?
On January 21, 2008, 14:10 CET, Lazar said:
Sometimes I don’t express my thoughts well. Let me clarify it.
On October 5, 2008, 18:23 CEST, mohamed Hassan said:
I am undergraduate BA student in Mogadishu - Somalia; I am currently under the preparation of the diploma thesis. Therefore, your support is highly needed by Mohamed. For instance, free samples of early written thesis etc.
On April 19, 2009, 16:38 CEST, Ricardo Lopes said:
Hello, I’m starting a classifieds website on my city(Jaraguá do Sul - Brazil) and this post was of definitely great help to me! Would it be possible, if not asking much, for you to give me 1 or 2 tips on my website? Thanks in advance!
You know, this is a very good article but may I suggest you take a leaf from your own book here and redesign your site!
Your information is all white space and layed out and rendered to the left! Why?
Don’t kid yourselves that users will wait for better content. Users do not want not wait longer for anything let alone better content. They want information a nd quick! Where on Earth does that derive?
Our experience tells us that users do not want to wait and if they are made to will go elsewhere.
Good design is a little like obscenity, you can’t describe it but you know it when you see it.
“Layout on a web page (whitespace and advanced layout of headers, indentation, and figures) may not measurably influence performance, but it does influence satisfaction. – Chaperro, Shaikh, and Baker, 2005.”
Other than that nice article. Thank you.
On September 28, 2009, 15:03 CEST, ohp said:
To only pick a few:
Point 1. To much text? You arrive on your site and what do you see?
Point 12. Are you serious?
To make my comment short. The rules to apply depend on your indent and audience.
On August 15, 2010, 23:05 CEST, Tony said:
Layout is important but it has also to navigate very easy, also for older people, which is often the problem. More and more older people are going online and often are fighting with websites they do not understand.
Have a look at the most popular posts, possibly including:
- Internet Explorer Filter or Hack Using Character Escapes
- 1 + 1 = 3: Explaining Busyness and Background Noise on Websites
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out some of the most important aspects of such CSS. (Also available in a bundle with Upgrade Your HTML and The Web Development Glossary.)
Looking for a way to comment? Comments have been disabled, unfortunately.