UI tipsa handbook of interface patterns

UI tipsA handbook of interface patterns

UI tips

This handbook is for anyone who makes screens: websites, apps, online shops, booking forms. You might be a designer, a developer, or a shop owner who built the site alone on a weekend. Each page looks at one part of a screen. It shows a common mistake next to a better version and explains in simple words why the better one is easier for people.

Think of the person who will use your screen as a sensible grown-up who is busy, maybe tired, maybe using a phone in one hand while holding a bag in the other. Most of the advice here comes down to being kind to that person.

Updated:

On this page
  1. Where the advice comes from
  2. Ten things that fix most screens
  3. The pages
  4. Who writes it
  5. Sources

Fig. 00.1Before and after

Before

Create an accountNameEmailPasswordI agree to the termsSubmit

After

Create an accountNameAnna KovalEmailanna@Enter an email like name@example.comPassword••••••••••I agree to the termsCreate account1234
The same form with four small changes. Every page of this handbook works like this.

Where the advice comes from

When a page gives a number, such as how big a button should be, the number comes from a published rulebook and the page links to it. The main one is WCAG 2.2, the web accessibility guidelines that many countries use in their laws. We also use the design guides from Apple and Google, and research from the Nielsen Norman Group. When something is simply our own experience, we say so.

You don’t need any special program to follow the advice. Most fixes are small: a name above a box, a clearer word on a button, a darker grey, a bit more space.

Ten things that fix most screens

  1. Every box you type into has a name written above it, and the name stays there while you type.
  2. A button says what will happen when you press it, like “Save changes”, instead of just “OK”.
  3. Text is dark enough to read easily on its background.
  4. Colour is never the only clue. A red box also gets a warning sign or a word.
  5. Anything you tap with a finger is big enough to hit on the first try.
  6. An empty list tells people what will appear there and how to start.
  7. If something takes more than a second, the screen shows that it is working.
  8. When something goes wrong, the message says what happened and how to fix it, right next to the problem.
  9. People who use the keyboard can always see where they are on the page.
  10. The page fits a small phone without scrolling sideways.

The pages

If you are working on something people fill in or press, start with Forms and Buttons. For helping people find their way, read Menus and navigation and Tables.

Screens also need to tell people what is going on. That is covered in Empty, loading and error screens and in Pop-up windows.

Whether people can see and reach things depends on Colour and contrast, Tap sizes, Phone layouts and Text size and spacing. The words themselves have their own page, Words on the screen.

When you are about to publish, go through the review checklist. It collects the most useful questions from all the pages in one place.

Who writes it

The handbook is written by a small web studio in Kyiv. You can read more about us, and about how we check the pages, on the about page.

Sources