Menu Search
Jump to the content X

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 Link

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”. Therefore it’s not clear how the 7±2 Principle can, could or should be applied to the Web. Miller’s studies.

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.

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. [Wikipedia]

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 Shneiderman’s rules for design.

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, 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-D]

Psychology Behind Usability Link

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 ignored. 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 Blindness
Banner Blindness: Old and New Findings

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. Source.
  • 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). Source.
  • 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 closure
    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. Source.

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

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 Link

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.

Eye-Tracking: Source.

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 important. []

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. [Source]

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. [Wikipedia]

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
Hotspot and gloss on

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. []

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. [Wikipedia]

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.

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-D]

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-D]

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 go. Wikipedia: Wireframes]

Wireframes: DDD
Wireframes: Example.
Smashing Book #5

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ 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 UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Very detailed research, and very useful info right here! Thanks!

  2. 2

    “The Law of Prägnanz” should be correctly translated in “The law of conciseness”.

  3. 3

    Must say, another very interesting read!

  4. 4

    Nice one, nice!

    But what happened with the law of continuity :-)

  5. 5

    This website always has great stuff, keep it coming plz…

  6. 6

    Amazing article! This definately goes beyond the “put your link here” and “you should do this” for usability. A really good read worth more in depth study! Thank you!!!!

  7. 7

    A Ultimate List again..

  8. 8

    Very nice post, thanks for bringing that all together. I’ve especially begun to be intrigued by hot-spot and eye-tracking studies.

  9. 9

    Super! Gute Zusammenfassung von Journalismus-Regeln, Psychologie und deren Applikation für das Web.

  10. 10

    Very useful article, user-friendly written ;) Thanks you!

  11. 11

    Probably the best article I have read here!

  12. 12

    Always so good and interesting ! I see you later !

  13. 13

    I love the idea of “Baby-Duck-Syndrome” I know how hard it is to move beyond on your first design even if is very flawed.

  14. 14

    Have you read Steve Krug’s book Don’t Make Me Think (Second edition published 2005) or seen his site at SENSIBLE ?

  15. 15

    try again with the site


  16. 16

    thanks for the article, simple and clarify many principles and the major points!

  17. 17

    This site is my web-developer Holy Grail of HQ info !!!

    (put a donate paypal button so that i can send you some money… ’cause the type of work you guys are doing surely needs support of any kind)

  18. 18

    Loving SMagazine more every day!…


  19. 19

    I’m going to impress my boss with some of these principles!! Hehehe

  20. 20

    This is really great artical to read and learn !!

  21. 21

    Jonathan Hedrén

    October 9, 2007 3:15 pm

    Very well written and useful content.

    Keep the good work up!

  22. 22

    keep up the good work

  23. 23

    Thomas David Baker

    October 9, 2007 5:06 pm

    Regarding the three-click rule.

    Steve Krug makes an interesting counterpoint in ‘Don’t Make Me Think’:

    “It doesn’t matter how many times I click as long as each click is a mindless unambiguous choice.”

  24. 24

    Thanks for the tips, some of them are new for me ;)

  25. 25

    Really good! Like everytime :>

  26. 26

    all pints duely noted …
    thanks for sharing …

  27. 27

    Very useful information that is often times taken for granted. Thanks for a great post.

  28. 28

    Very useful information and I would say that this was much awaited article.

  29. 29

    interesting, but one comment on the wait thing.

    in my experience, one is more likely to wait longer, if one can see that the system is working on something.

    just like you will wait if you see a person you want to talk to, working on something, you are more likely to wait if you have a indicator that the system is working on something.

    but, this will also require that the person waiting has a clear sense of progress. if the system seems to just stand there, doing nothing, then the user may start to think that it has stopped for some reason or other.

    this is why one often see people click the same button two or more times if the feedback isnt there. worse still, often said clicks are buffered, leading to unexpected events ones whatever that the system is working on gets done.

  30. 30

    This resource is great. Usability is something Ive been meaning to read up on. Thanks!


↑ Back to top