- Take advantage of conventions
- Create effective visual hierarchies
- Break pages into clearly defined areas
- Make it obvious and clickable
- Eliminate distractions
- Format content to support scanning
Conventions help the user to grasp anything quickly, without much cognitive load.
- How conventions are built up?
- They come from someone's idea
- If the idea works, people imitate it
- And eventually, people see it in so many places that they don't need any explanation anymore.
- If conventions are great then why do we feel reluctant to go with the existing convention?
- convention works but we might feel to innovate our new design and move away from the same old design for every website.
- re-inventing the wheel
- re-inventing is okay, as long as there is significant value in return.
- If you're not choosing the existing convention, then you should keep in mind 2 important things.
- It should be very clear and self-explanatory such that there's no learning curve.
- It should add so much value that is worth of learning curve.
Consistency vs Clarity – CLARITY TRUMPS CONSISTENCY
Consistency is a good thing to strive for, but there will be cases where things are clearer if they are slightly inconsistent. Choose clarity in favor of consistency.
Clear visual hierarchy has 3 traits:
- More important bits are more prominent
- They are either larger/bolder/distinctive color
- have more white space, nearer to the top of the page
- Logically related things are related visually as well.
- Things are nested visually to create a distinction to group similar parts.
Having the visual hierarchy helps the user to grasp the content efficiently. In the case of missing visual hierarchy, the scanning time increases which leads to confusion and frustration.
Users should be able to quickly identify which parts of the page do what. It allows users to focus on an area that is more important to their current task and which parts of the page can be safely ignored.
Banner Blindness - The ability of users to completely ignore areas they think will contain ads
Users are always scanning for visual cues on the page to click somewhere to get their task done. Make that obvious. It's important to make it easy to tell what's clickable. Keep the clickable elements consistent and distinctive from the non-clickable elements like headings.
Complexity and distractions are downright annoying. There are three kinds of noise:
- Shouting. When everything on the page is screaming for attention, the effect is overwhelming.
everything cannot be important. It is a failure to make a decision and identify the important parts of the page.
- Disorganization. When pages are not visually aligned. looks like a mess.
- Clutter. Strive for a high signal to noise ratio.
- Remove the parts that are not making any real contribution.
- When there's a lot of stuff on the page, it is hard to focus on the important part.
The way text is formatted can do a lot to make it easier for them.
- Use plenty of headings. Helps to decide which part to read, scan or skip.
- Format the headings clearly and keep ample whitespace
- Do not float the headings in between sections, they should be close to the section they're part of.
- Keep the para's short. Web reading is not printed text. Keep the paras short and once sentence paragraphs are also fine.
- Use bulleted lists. Things that are separated with comma, semicolons could be translated to bulleted lists. They lead to optimal readability.
- Highlight key terms. bold the important parts of the text on their first occurrence to make them easier to find. But don't overdo it.
It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.—KRUG’S SECOND LAW OF USABILITY
In most cases, if a user wants to reach a certain page clicks should be simple. Here, simple means, the decision to click should be easy. If a long thought is required to click due to the uncertainty, that's a bad sign.
There is still value in fewer clicks when the need is very frequent. Also when the page load time increases, the value of fewer click increases as well.
Avoid presenting many choices based details from the beginning, take the first step of taking the user to a particular screen and then ask for details.
Scenario 1 - Avoid
- Member login - fill details
- Not a member - subscriber login? - fill details
- Not a member OR subscriber - sign up
Scenario 2 - Better
- 2.1 Ask for choice
- Members -> go here to login
- Not a subscriber -> subscribe here
- 2.2 (Member login page) or (Subscriber signup page)
Though scenario 2 will require an extra click to get to the page with a form, this will simplify user decision to focus on just one form.
In scenario 1, the user would be presented with both forms in the first screen itself causing fatigue to go through all info just to discard useless info.
The main crux, make the choice easy to make for the user. And if it is difficult, then guide the user. Guidance should be
- Brief - crisp information, easy to read
- Timely - should be around the place I need to act (tooltips, ? icon, what's this link).
- Unavoidable - Make sure it gets noticed.
Get rid of half the words on each page, then get rid of half of what’s left. — KRUG’S THIRD LAW OF USABILITY
Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts — William Strunk, Jr., and E. B. White, The Elements of Style (Allyn and Bacon, 1979).
Get rid of extra words which do not add much value to the content
- It reduces the noise level
- make the content more prominent
- makes pages shorter, easier to scan without scrolling.
When there is no value in filling the page with words providing no real information. for eg introductory text. it is like wasting time.
Get to the point directly. Most web users don't have time to small talk when they arrive at your page.
Majority of users don't read, and if they repeatedly fail on their task, then they might read it, but if the instruction itself is a big block of words, the user may not find it there.
The objective should be to eliminate by making things self-explanatory. And bare minimum instructions if necessary.