30 Usability Issues To Be Aware Of


You don’t have to agree upon everything. As a professional web developer you are the advocate of your visitors’ interests and needs; you have to protect your understanding of good user experience and make sure the visitors will find their way through (possibly) complex site architecture. And this means that you need to be able to protect your position and communicate your ideas effectively — in discussions with your clients and colleagues. In fact, it’s your job to compromise wrong ideas and misleading concepts instead of following them blindly.

In this context nothing can support you more than the profound knowledge of fundamental issues related to your work. But even if you know most of them it’s important to know how to name these concepts and how to refer to them once they appear in the conversation. Furthermore, it’s always useful to have some precise terms ready to hand once you might need them as an argument in your discussions.

In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. What is the difference between readability and legibility? What exactly does 80/20 or Pareto principle mean? What is meant with minesweeping and satisficing? And what is Progressive Enhancement and Graceful Degradation? OK, it’s time to dive in.

Usability: Rules and Principles

7±2 Principle
Since human brain has some limits on its capacity for processing information, it deals with complexity dividing information into chunks and units. According to George A. Miller’s studies humans’ short term memory can retain only about 5-9 things at one time. This fact is often used as an argument for limiting the number of options in navigation menus to 7; however there are heated debates about The Myth of “Seven, Plus or Minus 2″1. Therefore it’s not clear how the 7±2 Principle can, could or should be applied to the Web. Miller’s studies2.

A loose principle that a user shouldn’t need to wait more than 2 seconds for certain types of system response, such as application-switching and application launch time. The choice of 2 seconds is somewhat arbitrary, but a reasonable order of magnitude. Reliable principle: the less users have to wait, the better is the user experience. [UF3]

According to this rule users stop using the site if they aren’t able to find the information or access the site feature within 3 mouse clicks. In other words, the rule emphasizes the importance of clear navigation, logical structure and easy-to-follow site hierarchy. In most situations the number of clicks is irrelevant; what is really important is that visitors always know where they are, where they were and where they can go next. Even 10 clicks are OK if users feel that they have a full understanding of how the system works.

80/20 Rule (The Pareto principle)
The Pareto principle (also known as the law of the vital few and the principle of factor sparsity) states that 80% of the effects comes from 20% of the causes. This is the basic rule of thumb in business (“80% of your sales comes from 20% of your clients”), but can also be applied to design and usability. For instance, dramatic improvements can often be achieved by identifying the 20% of users, customers, activities, products or processes that account for the 80% of contribution to profit and maximizing the attention applied to them. [Wikipedia4]

Eight Golden Rules of Interface Design
As a result of Interface Design Studies, Ben Shneiderman proposed a collection of principles that are derived heuristically from experience and applicable in most interactive systems. These principles are common for user interface design, and as such also for web design.

  1. Strive for consistency.
  2. Enable frequent users to use shortcuts.
  3. Offer informative feedback.
  4. Design dialog to yield closure.
  5. Offer simple error handling.
  6. Permit easy reversal of actions.
  7. Provide the sense of control. Support internal locus of control.
  8. Reduce short-term memory load.

You can learn more details about Shneiderman’s Rules For Design in Wikipedia: Shneiderman’s rules for design5.

Fitts’ Law
Published by Paul Fitts in 1954, Fitts’ law is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target. The law is usually applied to the movement of the mouse visitors have to perform to get from point A to point B. For instance, the rule can be important to place the content areas in a more usable way to maximize their accessibility and improve click rates.

Inverted Pyramid
The inverted pyramid is a writing style where the summary of the article is presented in the beginning of the article. This approach makes use of the “waterfall effect” well-known in journalism where writers try to give their readers an instant idea about the topic they’re reporting. The article begins with a conclusion, followed by key points and finally the minor details such as background information. Since web users want instant gratification, the inverted pyramid style, as supported by Nielsen6, is important for web writing and for better user experience.

Web users don’t prefer optimal ways to find the information they’re looking for. They aren’t interested in the most reasonable and sound solution to their problem. Instead they permanently scan for quick’n’dirty-solutions which are “good enough”. Applied to Web, satisficing describes exactly this approach: users settle with a solution to a problem that is “good enough” — even if alternative solutions can better fulfill their requirements in a long run. [I-D7]

Psychology Behind Usability

Baby Duck Syndrome describes the tendency for visitors to stick to the first design they learn and judge other designs by their similarity to that first design. The result is that users generally prefer systems similar to those they learned on and dislike unfamiliar systems. This results in the usability problems most re-designs have: users, get used with previous designs, feel uncomfortable with new site structure they have to find their way through.

Web users tend to ignore everything that looks like advertisement and, what is interesting, they’re pretty good at it. Although advertisement is noticed, it is almost always ignored8. Since users have constructed web related schemata for different tasks on the Web, when searching for specific information on a website, they focus only on the parts of the page where they would assume the relevant information could be, i.e. small text and hyperlinks. Large colourful or animated banners and other graphics are in this case ignored.

Banner Blindness9
Source: Banner Blindness: Old and New Findings10

Cliffhanger-Effect (Zeigarnik-Effect)
Human beings can’t stand uncertainty. We tend to find answers to unanswered questions we are interested in as soon as possible. Cliffhanger-effects are based upon this fact; movies, articles and plots with Cliffhanger-effect have an abrupt ending, often leaving with a sudden shock revelation or difficult situation. The effect is often used in advertisement: asking the visitors unanswered and provocative questions advertisers often tend to force them to read the ad, click on the banner or follow a link.

Found out by Bluma W. Zeigarnik in 1927, this effect establishes an emotional connection with readers and is extremely effective in terms of marketing. Visitors can better remember what the ad is about and even smallest details are stored more clearly and precisely. In Web writing the Cliffhanger-effect is also used to bound the visitors to a web-site (e.g. “Grab our RSS-Feed to ensure you don’t miss the second part of the article!”).

Gestalt principles of form perception
These principles are the fundamental rules of human psychology in terms of human-computer-interaction-design.

  • The law of proximity posits that when we perceive a collection of objects, we will see objects close to each other as forming a group.
    A real-world example of the law of proximity from MTV Music Awards 2002. Source161412.
  • The law of similarity captures the idea that elements will be grouped perceptually if they are similar to each other.
  • The Law of Prägnanz (figure-ground) captures the idea that in perceiving a visual field, some objects take a prominent role (the figures) while others recede into the background (the ground).
    The Macintosh logo can be viewed as a regular happy face and a happy face in profile (looking at a computer screen). Source161412.
  • The law of symmetry captures the idea that when we perceive objects we tend to perceive them as symmetrical shapes that form around their centre.
  • The law of closure posits that we perceptually close up, or complete, objects that are not, in fact, complete.
    The Law of closure15
    We perceive the letters ‘I’, ‘B’, and ‘M’ although the shapes we see, in fact, are only lines of white space of differing length hovering above each other. Source161412.

You can find more information in the article Gestalt principles of form perception17

The Self-Reference Effect
Self-reference effect is particularly important for web writing and can dramatically improve the communication between authors and readers. Things that are connected to our personal concept are remembered better than those which aren’t directly connected to us. For instance, after reading an article users better remember the characters, stories or facts they had personal experience with. In Usability the self-reference effect is usually used in terms of web writing and content presented on a web-site.

Usability Glossary: Terms and Concepts

Eye tracking is the process of measuring either the point of gaze (“where we are looking”) or the motion of an eye relative to the head. eye tracking monitor records every eye movement and highlights the most active areas on the site visually. Eye-tracking studies can help to estimate how comfortable web users are with the web-site they’re browsing through and how quickly they can understand the structure and system behind it. You can find some interesting usability findings from recent eye-tracking study Eyetrack0718.

Eye-Tracking: Source20.

The fold is defined as the lowest point where a web-site is no longer visible on the screen. The position of the fold is, of course, defined by the screen resolution of your visitor. The region above the fold (also called screenful) describes the region of a page that is visible without scrolling. Since the fold is seen directly without scrolling, it is often considered as the area which guarantees the highest possible ad click rates and revenues. However, Fold area isn’t that important21. [Usability.gov2622]

Foveal viewport (Foveal area)
The fovea, a part of human’s eye, is responsible for sharp central vision, which is necessary in humans for reading, watching television or movies, driving, and any activity where visual detail is of primary importance. Foveal area is a small wide space area where your eyes are aimed at and it is the only area where you can perceive the maximum level of detail. Foveal area is a tight area of about two degrees of visual field or two thumbnails held in front of your eyes. This is the place where you’d like to deliver the most important messages of your visitors.

Foveal viewport is important, because outside of this wide screen area how your visitors see your web-pages change dramatically. Inside this area is the only part of your vision with the maximal resolution – only here no eye scanning is necessary. [Source23]

Gloss is an automated action that provides hints and summary information on where the link refers to and where it will take the user once it’s clicked. Hints can be provided via title-attribute of links. From the usability point of view users want to have the full control over everything what is happening on a web-site; clear and precise explanations of internal and outgoing links, supported by sound anchor text, can improve the usability of a web-site.

Graceful Degradation (Fault-tolerance)
Graceful Degradation is the property of a web-site to present its content and its basic features even if some of its components (partly or at all) can’t be displayed or used. In practice it means that web-sites display their content in every possible “fault” scenario and can be used in every configuration (browser, plug-ins, connection, OS etc.) the visitor might have. “Power-users” are still offered a full, enhanced version of the page. For instance, it’s typical to offer alternatives for Multimedia-content (for instance image) to ensure that the content can be perceived if images can’t be displayed. [Wikipedia24]

Granularity is the degree to which a large, usually complex data set or information has been broken down into smaller units.

Hotspots are clickable site areas which change their form or/and outer appearance once they are clicked. This is typical for :focus-effects when a link or any other site element is clicked.

Focus on Smashingmagazine.com25
Hotspot and gloss on Smashingmagazine.com

Legibility indicates how clear the text is visually.

Minesweeping stands for user interactions which aim to identify the links on a web-site. In most cases minesweeping is a clear alarm signal for usability problems. Usually minesweeping involves the user rapidly moving the cursor or pointer over a page, watching to see where the cursor or pointer changes to indicate the presence of a link. [Usability.gov2622]

Mystery-Meat Navigation (MMN)
In Web mystery-meat navigation describes designs in which it is extremely difficult for users to recognize the destinations of navigational hyperlinks — or determine where the hyperlinks are.

Physical consistency
This concept describes the consistent outer appearance of a web-site – e.g. the position of logos, navigation, the use of graphic elements and typography. Physical consistency is essential for better orientation and effective site navigation.

Progressive Enhancement (PE)
Progressive Enhancement is a design strategy in which sites are created in a layered fashion — from the basic functionality for all browsers to the additional, enhanced features for modern browsers. The main advantage of progressive enhancement lies in its “universal usability” — i.e. the fact that it allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page. [Wikipedia27]

Readability describes the degree to which the meaning of text is understandable, based on the complexity of sentences and the difficulty of vocabulary. Indexes for readability usually rank usability by the age or grade level required for someone to be able to readily understand a reading passage. Readability is not legibility. [Usability Glossary3828]

User-centered design (UCD)
User-centered design is a design philosophy in which users, their needs, interests and behavior define the foundation of web-site in terms of site structure, navigation and obtaining the information. UCD is considered as a standard approach for modern web-applications, particularly due to the rise of user generated content. In Web 2.0 visitors have to be motivated to participate and therefore need conditions optimized for their needs.

Vigilance (sustained attention)
Vigilance is the ability to sustain attention during prolonged, monotonous tasks such as proofreading a text looking for spelling errors, reminding of appointments, auto-saving word processor documents etc. In modern web-applications vigilance tasks are performed in background, automatically and thus improve the usability of the service. [I-D29]

Walk-Up-And-Use Design
A Walk-up-and-use design is self-explanatory and intuitive, so that first-time or one-time users can use it effectively without any prior introduction or training. [I-D30]

A wireframe is a basic structure — skeleton — of a site that describes the ideas, concepts and site structure of a web-site. Wireframes can be designed as presentations which explain to the stake holders how the site is designed, which functionality it offers and how users can accomplish their tasks. Wireframes usually don’t have any visual elements or a complete page layouts; they are often first drafts and sketches designers create on paper. Example? Here you go31. [Glossary32, Wikipedia: Wireframes33]

Wireframes: DDD34
Wireframes: Example35.

References, Sources


  1. 1 http://www.ddj.com/184412300
  2. 2 http://www.musanim.com/miller1956/
  3. 3 http://www.usabilityfirst.com/glossary/term_1005.txl
  4. 4 http://en.wikipedia.org/wiki/Pareto_principle
  5. 5 http://en.wikipedia.org/wiki/Shneiderman's_rules_for_design
  6. 6 http://www.useit.com/alertbox/9606.html
  7. 7 http://www.interaction-design.org/encyclopedia/satisficing.html
  8. 8 http://www.useit.com/alertbox/banner-blindness.html
  9. 9 http://www.useit.com/alertbox/banner-blindness.html
  10. 10 http://www.useit.com/alertbox/banner-blindness.html
  11. 11 http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
  12. 12 http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
  13. 13 http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
  14. 14 http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
  15. 15 http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
  16. 16 http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
  17. 17 http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
  18. 18 http://eyetrack.poynter.org/
  19. 19 http://www.simpleusability.com/services/usability/eye-tracking/gaze-plot
  20. 20 http://www.simpleusability.com/services/usability/eye-tracking/gaze-plot
  21. 21 http://www.boxesandarrows.com/view/blasting-the-myth-of
  22. 22 http://www.usability.gov
  23. 23 http://youtube.com/watch?v=GzgRfE5B1Yc
  24. 24 http://en.wikipedia.org/wiki/Graceful_degradation
  25. 25 http://www.smashingmagazine.com/category/graphics/
  26. 26 http://www.usability.gov
  27. 27 http://en.wikipedia.org/wiki/Progressive_enhancement
  28. 28 http://www.d.umn.edu/itss/support/Training/Online/usability/glossary.html
  29. 29 http://www.interaction-design.org/encyclopedia/vigilance.html
  30. 30 http://www.interaction-design.org/encyclopedia/walk_up_and_use_system.html
  31. 31 http://www.thinkvitamin.com/features/design/deliverables-that-work-design-description-documentsprint/
  32. 32 http://www.d.umn.edu/itss/support/Training/Online/usability/glossary.html
  33. 33 http://en.wikipedia.org/wiki/Website_wireframe
  34. 34 http://www.thinkvitamin.com/features/design/deliverables-that-work-design-description-documents
  35. 35 http://www.thinkvitamin.com/features/design/deliverables-that-work-design-description-documents
  36. 36 http://www.interaction-design.org/encyclopedia/
  37. 37 http://www.usabilityfirst.com/glossary/index_terms.txl
  38. 38 http://www.d.umn.edu/itss/support/Training/Online/usability/glossary.html

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

  1. 1

    I always love the thorough posts from you guys. I had to take issue with a couple of the entries, User-Centered Design and Walk-up-and-use design. Why do we have to label something that should be the norm? That’s like labeling an advertising technique “Advertising That Sells Stuff”. I wrote a bit more, including kudos to sites designed for non-readers, on my company blog and linked back to you guys. Cheers!

  2. 52

    According to this rule users stop using the site if they aren’t able to find the information or access the site feature within 3 mouse clicks.

    Great post. This one I think is especially important. People spend so much time worried about eye candy and added features that they forget to actually cater to the visitor. When i am on a website looking for info, If I can’t find it, I leave…especially if it’s business. I think websites say a lot about who your dealing with and should sway your opinion of them from a business standpoint.

  3. 103

    Highly interesting and informative. I may not always comment, but I love the work you guys do.

  4. 154

    I’d like to echo the thanks going out for this great collection of usability concepts and studies. They will certainly help me professionally!

  5. 205

    Please keep this site FREE.

    you guys are Absolutely worth of paying for the content..


  6. 256

    For someone who’s just ventured into web design, this is a great resource. I will definitely be applying some of the stuff I’ve read about on here to improve my own website.

  7. 307

    Jennifer Van Grove

    October 16, 2007 10:26 pm

    Great resource, definitely inspired me to start thinking about best practices in terms of the fold. I’ve always been an above the fold person, but maybe i need to rethink this. Thanks!

  8. 358

    Great list! There are plenty of bits and pieces that people might debate, but it’s really useful to see some of the core principles and theories that have guided modern usability all in one place.

  9. 409

    Very useful information and help to learn more about user experience design.

  10. 460

    One important point not covered is KISS. Keep it simple stupid. The entire purpose of the site is to communicate. To inform, puruade and influence. Ultimately ever part of the design should focus on communication to acheive your objectives NOT trying to impress the viewer OR create a work of art OR show case webdesign skills.


  11. 511

    Kalpana Aravabhumi

    October 19, 2007 12:21 am

    Awesome information at one place, Thanks for the post!

  12. 562

    Who wrote this article? I want to site it, but I don’t know who – the site editors?

  13. 613

    Really great!!

    I found all the information about usability what I search from last few days…….Thanks.
    Do you have information about Agile Usability process?

  14. 664

    Very interesting. I’m going to keep this list front-of-mind during the overhaul of my association’s website. editors.ca


  15. 715

    Victor Saldaña D.

    December 10, 2007 7:43 am

    Quality reading. Thanks!

  16. 766

    Thank you for such a wonderful article. I use many of these tips, and will use additional in my designs at ARRiiVE.com, for sure. I found the evaluation of logos quite interesting.

  17. 817

    Cool article, thanks :)

  18. 868

    whatever you do, the content on the site matters, even if the site is pathetic it does not make any difference.

  19. 919

    great article! I am fascinated with the eye-tracking findings out there applied to the web… Definitely great graphics it’s not enough! I am not sure nowadays web designers are taught a lot about usability on their courses… however it must be somethng that is improving.

  20. 970

    Good article, but why was I forced to read it wrapped in 320px ?

  21. 1021

    Thanx for such helpful information………….

    Thanx agaIn……. :-)

  22. 1072

    Very useful information…..Thanks.

  23. 1123

    web design in cheltenham

    March 3, 2008 5:45 am

    very useful article people should always treat viewers as not very bright so that even the most computer ilierate perosn can navigate the site with ease. not sure about the 2 sec’s for loading times – whilst loading times should always be kept down the use of preloaders etc. can be used in cases where loading times can not be kept down. also things such as large pfd’s will always take longer than 2 sec’s. all in all great article and very indepth

  24. 1174

    Is Smashingmagazine website built with usability-concern?

  25. 1225

    Trushin Vladislav

    March 15, 2008 6:27 am

    U a mf stuped americans… Design hasn’t rules… Only taste of style

  26. 1276

    thanks for this info. i can use most of it.. =)

  27. 1327

    Thanks a lot for the article.
    Is the first one I read that combines usability rules & principles, psychology behavior and usability glossary altogether. I have never came accross all these usability rules. I will definetely go through this list again!!!

  28. 1378

    wow, this was really helpful information. Loved al the terms that can be used when dealing with a client in order to help him project powerful websites

  29. 1429

    Very detailed and most comprehensive post that I have seen for a while. Though am not much into the subject of website development, just stumbled upon the website and ” WOW” is the word that explains the research that has been done behind the post.

    I wish that more people are producing similar quality content in my niche too ” Health & Fitness” And judging by the comments that similar posts are being posted on the blog … I guess excelence is more of a habit :-)

    Keep up the good work

  30. 1480

    very helpful info, just like the Jakob Nielsen’s article

  31. 1531

    Not sure if this would work. Regarding cliffhanger principle, there’s a small non-profit site w/ a conference. Putting the link to print the conference form on another site may be a bad usability practice, but it would force users to visit sponsor sites. That’s what those “ticket outlet” are in the real world. Is there a better way to recreate this in the online world?

  32. 1582

    Interesting read.

  33. 1633

    I need detailed information about the recent studies on usability and positive effects of usability tests, where can I found?

  34. 1684

    Nice article. Thanks a lot

  35. 1735

    nice one…..

  36. 1786

    This article is akin to describing the internet as a “cloud”. Very nebulous without clear cut, by the numbers, rules to follow, step by step. Example: Write an article titled “How to bake a pie”. Alright, lets give it a try.

    Wild berries used as a thoughtful pie filling employs a meaningful, coherent, and trustworthy benefit in combination with most non standard pie crusts utilizing cake mixing methodologies which produce the group basics of dealing with graham crackers in conjunction with wheat flour.

    I say that this “30 Usability Issues” article doesn’t help to improve a web site any more than this pie article helps you to bake a pie. Both articles are nebulous, like the internet being a “cloud”.

    Anyway, my 2 cents. Hot dog anyone?

  37. 1837
  38. 1888

    pretty straight forward articles and hope to see more such in coming months, we too have a usability centric approach for our clients

  39. 1939

    very useful. Superb

  40. 1990

    Fantastic. I’ll be referring to this again and again.

  41. 2041

    Great article, summarize some of the subjects i studied during my Master in HCI

  42. 2092

    Good research.
    Pretty confused how to remember all of these points :)
    good job and thanks.

  43. 2143

    Would’ve been better if you could group up some topics like : readability –> legibility, progressive enhancement –> graceful degradation and I’m not sure but ‘Satisficing’ may come in Psychology as well ? All in all, a really good and informative read. Kudos.

  44. 2194

    Btw, I really love the concept of ‘Error Handling’ in these comments… We don’ believe in preaching only, do we ?

  45. 2245

    Speaking of good design, enjoyed the article, but it’s not easy to print. You may want to think of having a print icon at the top and bottom of the article/ print friendly version that doesn’t include the comments. Great work on the content though.

  46. 2296

    sanjay nemichand

    May 23, 2011 2:00 am

    Good article… Really helpful.. Thanks

  47. 2347

    Very good, Very useful


↑ Back to top