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:

1. 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.
2. 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.
3. Search: Most sites need to have a prominently displayed search box on the homepage.
4. Teases: Entice user with hints of the “good stuff” inside.
5. Content promos: Spotlight the newest, best or most popular pieces like top stories and hot deals.
6. Feature promos: Invite user to explore additional sections.
7. Timely content: Content must be updated frequently.
8. Deals: advertising, promotion, and co-branding deals.
9. Shortcuts: Most frequently requested content should have their own links.
10. 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).

There is a structure for usability tests suggested by the author. http://www.sensible.com/downloads/test-script-web.pdf

After tests are done, It is important focusing first on most serious problems, how to do this?

1. Make a list of all the problems detected
2. Choose the ten most serious problems
3. Rate them from 1 to ten, being 1 the most problematic.
4. Order the list

Instructions on what to fix and what not to

• Keep a separate list of things that can be done in less than an hour
• Don’t add things. If users are not getting something don’t add instructions or explanations, try getting things out rather than adding more.
• Don’t take too serious “new feature” requests from users as they are not designers.

Some important insights

• In responsive always include zoom and the possibility to see the entire page mode.
• For buttons is better to use the 3d appearance. And for filling fields to use the frame.
• Apps must be delightful, which is more than good, in order to differentiate your app must not only be usable, but magical.
• Apps must be easy to learn how to use them
• Never hide information people usually look for such as support phone numbers, shipping rates, and prices.
• Never punish people for not doing things your way, such as spaces on credit card numbers or parenthesis on phone numbers.
• Never ask for information you don’t need
• Never put a lot of marketing ads all over the site.

Important to have clarity on:

• Know the main things that people want to do on your site and make them obvious and easy.
• Save steps to the user wherever possible.
• Add meaningful FAQ’s.
• Printer-friendly pages dropping the ads.
• Be upfront about things like shipping costs, service outages.

Accessibility

Making sites accessible is just the right thing to do.

4 steps to go through accessibility:

1. Fix usability problems that confuse everyone
2. Read an article about accessibility “Guideline for accessible and usable websites: Observing users who work with screen readers“
3. Read a book about web accessibility. Recommended “A web for everyone: Designing accessible user experiences” and “Web Accessibility: Web standards and regulatory compliance“
4. Implement specific changes to the site.

Most important things to do:

• 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.

Thanks for reading.