The following article is a compilation of some of the most important principles introduced by Steve Krug in his best seller book “Don’t make me think“. If you are working in the software industry, creating websites or products, you need to read this book. It’s not intended for UX designers only, because It has basic concepts that everybody should know when creating applications.
In the following words, I’m going to list some of the main ideas, that you can explore more deeply in the book. This article doesn’t pretend to be a reading-friendly because It’s just a list of ideas we grouped at Swapps for our internal reference and we are sharing to the world.
Usability principles
Main principle: Don’t make the user think
The user should be able to look at the homepage and immediately know what is it for.
Eliminate all the question marks from the user, this means, the user should never ask himself about anything on the site, everything should be obvious.
If you can’t make something self- evident (obvious), make it self-explanatory (that it explains itself). This means that for example, linkable items in a site should be self-evident, which means being highlighted with some other color, but if it is something that cannot be as evident as this, you can add some text that explains what you should do with that specific button (it could also be a label).
Things that make the user think and should be avoided as much as possible:
Using weird names. Just keep it simple with names putting the most common words for your user.
Buttons and links not highlighted
The user should never ask himself if something is clickable (images, links, buttons)
What do people do?
What people really do when they visit your webpage is just scanning the page, see some of the text and click on the first link that catches their attention.
People look for words or phrases that catch our eye.
People scan pages because they normally have an objective (searching for something, buying something, in particular, getting information about something specific, etc.) that they won’t pay attention to anything not related to that.
“What we, when we look at a page, depends on what we have in mind, and it’s usually just a fraction of what’s there”
We tend to focus on phrases that match the task at hand, our current personal interests or words such as “free” or “sale”.
People choose the first reasonable option.
People don’t like reading instructions, people like muddling through. Apps and websites should be intuitive, no wizards or instructions explaining anything should be added.
How to improve the usability?
1. Take advantage of conventions
This means using the widely used or standardized design patterns. For example:
Company logo on the top left corner and primary navigation across the top or down the left side.
Use the most used icons.
2. Create effective visual hierarchies
This means that the site should portray the relationships between things on the page: which things are most important, which things are similar and which things are part of other things.
The more important something is, the more prominent it should be. Prominent in the way of larger, bolder, in a distinctive color, set off by more white space, or/and nearer to the top of the page.
Things that are related should have the same format.
Things that are grouped should let this now visually. Like grouping everything under the same title, in the same box, etc.
“A good visual hierarchy saves us work by pre-processing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly”
3. Break up pages into clearly defined areas
The user should be able to clearly point up things he can do on the site, links to top stories, products the company sells, things the company wants to sell me and navigation to get to the rest of the site.
Dividing the page into clearly defined areas allows users to quickly decide which areas of the page to focus on.
4. Make it obvious what’s clickable
should take into account shape, location and formatting.
For this, you’ll be fine if you just stick to one color for all text links.
Avoid mistakes like using the same color for links and non-clickable headings.
5. Keep the noise down to a dull roar
This means not distracting the user with:
A lot of items claiming attention like lots of invitations to buy, exclamation points or bright colors.
Disorganization: information all over not well organized, not aligned.
Clutter: just too much information in the page.
Here is important to start with the assumption that everything is visual noise, this way, you will get rid of everything that does not make a real contribution.
Everything that is not part of the solution must go away.
6. Format text to support scanning
Use plenty of headings and format them correctly. Also, don’t leave a lot of space between the heading and its content.
Keep paragraphs short.
Use bulleted lists.
Highlight key terms.
Don’t make things complicated
Make choices mindless for users. This can be achieved by putting the link or button so is encountered exactly where the user needs it, with the smallest amount of information and formatted in a way that ensures the user will notice it.
Omit needless words on the website as this will:
Reduce the noise level of the page
Make useful content more prominent
Make pages shorter, allowing users to see more of each page at a glance without scrolling.
Avoid “happy talk” which are introductory paragraphs, welcoming the people to your site and in general just text to be sociable.
Instructions must die
Your site should be intuitive enough to avoid adding instructions. The main thing you need to know about instructions is that no one is going to read them. The main objective should always be to eliminate instructions entirely by making everything self-explanatory. When instructions are absolutely necessary, cut them back to the bare minimum.
Designing Navigation
Some users will almost always look for a search box as soon as they enter a site. Others will almost always browse first.
Users look around the homepage for a list of site’s main sections.
“Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression”
Persistent navigation should include the four elements you most need to have on hand at all times: site ID, utilities (sign in, track order, contact), search and sections. This applies for all pages except forms or payment pages where you don’t want the user to be distracted until they finish the action.
Always have a search bar in all pages with the typical format. box, button and the word “search” or the magnifying glass icon.
Every page needs a name and the name needs to be in the right place, this means, by framing the content that is unique to this page.
It is important that the link that guides me to a certain page has the same name. Link and page should have the same names.
Recommendations for breadcrumbs
Put them at the top
Use “>” between levels
Boldface the last item
Considerations for the homepage
What to take into account in the homepage:
Site identity: Homepage has to tell the user what site this is and what it is for, and if possible, why should Ibe in this page and not at some other site.
Site hierarchy: Homepage must give an overview of what the site can offer. What can I find here and what can I do here and how it is all organized. This is covered by the persistent navigation.
Search: Most sites need to have a prominently displayed search box on the homepage.
Teases: Entice user with hints of the “good stuff” inside.
Content promos: Spotlight the newest, best or most popular pieces like top stories and hot deals.
Feature promos: Invite user to explore additional sections.
Timely content: Content must be updated frequently.
Deals: advertising, promotion, and co-branding deals.
Shortcuts: Most frequently requested content should have their own links.
Registration: Registration/sign in box.
Homepage objectives
Show the user what they are looking for, make it obvious how to get to where the user wants.
Show the user some wonderful things he might be interested in.
Show the user where to start
Establish credibility and trust- Homepage must create a good impression.
Three important places on the page where users expect to find explicit statements of what the site is about
Tagline: Statement next to the site ID
Welcome Blurb: Brief description of the site displayed in a prominent block on the homepage usually at the top left or center.
The “Learn More”: Explanation of new products recommended to use short videos rather than text.
Considerations for design
There is no point in discussing colors or designs on the site as everyone will have its personal opinion.
The right thing is user testing the site and asking the right question: Does this thing we are discussing on, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?
Usability Tests
They must be done if you want a great site
Testing even with one user is better than testing with none
Testing one user early in the project is better than testing 50 near the end
How often to test? one morning in a month (three participants is enough) or twice if working with agile.
Is important programming a testing day and not link the testing to a milestone.
Testing sessions should be live and all the team should be watching and hearing about it in another room. After the test, each team member should write the three main usability problems they perceived.
To prepare the test we first must have the tasks determined, which is what will we ask the participant to do for example (log in, register, find something you will like to buy).
Add appropriate alt text to every image. Recommended to add “null” or ” ” for images screen readers should ignore and add helpful, descriptive text for the rest.
Use headings correctly. H1 for the page title or main content heading, h2 for major section headings, h3 for subheadings and so on.
Make forms accessible. Use the HTML <label> element to associate the field with their text labels so people know what they’re supposed to enter.
Put a “Skip to main content” link at the beginning of each page.
Make all content accessible by keyboard.
Create significant contrast between text and background (Never use light grey text over dark grey background)
Use an accessible template if you are using WordPress for example.
An important site for accessibility webaim.org
Hopefully, this information is useful to you as a reference as It is for us. If you consider we should explain something better please leave a comment.