Web Interface Handbook [PDF]

Zitiervorschau

Web Interface Handbook Aleksei Baranov

imperavi.com/books

Table of contents

Web Interface Handbook

Table of contents Typography 4

Inputs 116

Spacing 6

Sizes 118

Images 18

States 122

Headings 29

Labels 127

Text 39

Country 132

Tables 49

Address 135

Quotes 53

Search 138

Lists 59

Phone 143

Links 63

Date & time 146

Layout 67

Buttons 151

Principles 69

Competition 153

Grid 75

Style 157 States 162 Sizes 166

Forms 83

Patterns 170

Required & optional 85 Hints 90 Errors 94

Color 173

Buttons 99

Palette 175

Long & complicated forms 107

Dark theme 180

Horizontal forms 110

Patterns 190 Navigation 192 Cards 199 Slideshow 203 Tabs & accordion 206

3

Typography

Web Interface Handbook

Typography

4

Typography

Web Interface Handbook

Typography is what readers will judge when choosing a particular site/application. It can be a subconscious decision. Just as people distinguish professional music from bad amateur music. People see harmony, balance, rhythm. People distinguish good composition from bad composition. They do this constantly throughout the day, conducting many processes of comparison, identification, analyzing ratios. It looks "reliable," it looks "beautiful," it seems to be "well-made," all the result of an analysis of harmony, balance, rhythm, and other basics of perception. People do this analysis in a fraction of a second and base their choices in favor of one or the other. Good typography helps to make a choice. Typography is based on the same natural and mathematical principles as everything else in the world. So all other things being equal, people will choose good typography over bad. People can see the harmony, the balance, color ratios, size ratios in good typography, and make their decision based on that.

5

Typography

Web Interface Handbook

Spacing

6

Typography / Spacing

01

Web Interface Handbook

Spacing above the heading An increased distance above the heading helps to better structure the text and separate parts of the text from each other. A large space from a paragraph or other content to the heading creates a pause and makes the text easier to read. It also creates an interesting rhythm and adds variety to long texts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar. 20

The quick brown fox jumps over the lazy dog

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The heading has the same spacing at the bottom and top.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar. 48

The quick brown fox jumps over the lazy dog 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The heading has a larger spacing at the top.

7

Typography / Spacing

02

Web Interface Handbook

Smaller spacing for smaller headings For small headings, it's best to make a smaller spacing at the bottom. This will make it closer to the following text. This way the heading won't be visually detached from the text and will get a good connection to it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar. 36

The quick brown fox jumps over the lazy dog 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The small heading is too far from the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar. 36

The quick brown fox jumps over the lazy dog 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The small heading is close to the text that follows.

8

Typography / Spacing

03

Web Interface Handbook

Larger spacing for larger headings It is good when the headings have a larger space at the bottom. This creates an ease of reading the text and a good balance. If the distance is too small, the heading presses the text with its contrast.

The quick brown fox jumps over the lazy dog 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The big heading is too close to the text.

The quick brown fox jumps over the lazy dog 40

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The big heading and text have a good balance of spacing.

9

Typography / Spacing

Web Interface Handbook

Spacing between paragraphs

04

Eligible spacing between paragraphs is 0.5..1 of line spacing. So, if line spacing is 24px, good spacing between paragraphs would be 12..24px. This helps to separate the paragraphs from each other and make the text easier to read.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 8

8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Spacing between paragraphs is too small.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Eligible spacing between paragraphs.

10

Typography / Spacing

05

Web Interface Handbook

Spacing between paragraphs and lists It is not a good idea to decrease the spacing before the list. At first glance, it may seem like a nice trick to improve the connection between the list and the previous text. But such a step rather breaks the vertical rhythm, introduces unnecessary pauses, and worsens the readability of the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 8

1. Consensuses of futility 2. Stone and conceptual rationalism 3. The dialectic paradigm of context and subdialectic sublimation

20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Unequal spacing before and after the list breaks the rhythm.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

1. Consensuses of futility 2. Stone and conceptual rationalism 3. The dialectic paradigm of context and subdialectic sublimation 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The list at the top and bottom has the same spacing as between paragraphs.

11

Typography / Spacing

06

Web Interface Handbook

Spacing between text and image or table It's a good idea to increase the spacing after an image or table to the following content. With equal spacing, there is no way to pause and focus on the image or table. The eye immediately turns to the text that follows.

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Spacing after the image is the same as between the paragraphs.

12

Typography / Spacing

Web Interface Handbook

If the spacing after the image or table is increased, it will help to create text dynamics by pausing between these elements and their different kinds of data.

36

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Increased spacing after the image.

13

Typography / Spacing

07

Web Interface Handbook

Spacing between text and quote or line It is a good way to add extra emphasis to the text and the quote or horizontal line by adding spacing at the bottom and top. With equal distances between the various elements, the rhythm of the content is static and monotonous.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. 20

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci. 20 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

Quote and line have the same spacing as between paragraphs.

14

Typography / Spacing

Web Interface Handbook

By making different spacing, this creates an interesting visual rhythm, allowing the reader to pause before and after these elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. 32

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. 32

Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci. 32 32

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

Quote and line have an increased spacing at the top and bottom.

15

Typography / Spacing

08

Web Interface Handbook

The vertical rhythm based on the 8px or baseline grid is of little importance Equal spacing between elements or arranging all blocks of text based on the baseline or 8px grid does not make the text visually more attractive or easier to read. Just as in music, so in typography, pauses and changes in rhythm are more important than something boring and uniform.

The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

The quick brown fox jumps over the lazy dog Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

A baseline or 8px grid does not automatically give a good vertical rhythm.

16

Typography / Spacing

Web Interface Handbook

A good vertical rhythm is achieved by contrasting headings and texts, by different distances between headings, text and other content.

The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

The quick brown fox jumps over the lazy dog Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

Working with distance and contrast creates a unique and interesting vertical rhythm.

17

Typography

Web Interface Handbook

Images

18

Typography / Images

01

Web Interface Handbook

Lead images A lead image creates good structure, hierarchy, and allows you to show the main thing. It always makes the design more cohesive and visually attractive.

Faceless, boring, no accent. There is an accent and a clear visual hierarchy.

The lead image is always a good technique, whether it's the display of cards, text, or any other element on the page.

Faceless, boring, no accent.

There is an accent and a clear visual hierarchy.

19

Typography / Images

02

Web Interface Handbook

Relationship with the headings It's not good when the image separates the heading from the text. So it becomes not quite clear what the heading refers to. It is good if the image comes first, and only after that the title and text.

The image is below the heading and separates the text.

The heading is under the image.

The same thing happens when the heading combines two columns: the image on the left and the text on the right. In this case the heading also becomes detached from the text and it looks strange.

The image separates the text from the heading.

Attention turns to the text.

20

Typography / Images

Web Interface Handbook

If you arrange the top edge of the image to the same level as the header, the text will read well, regardless of where the image: left or right.

Good.

Also good.

21

Typography / Images

03

Web Interface Handbook

Caption An image without a caption makes no sense and it is not clear what it illustrates. A caption gives people an understanding of what is shown in the image and why it relates to the text. Also, a caption always works well for accessibility.

An image without a caption makes no sense.

The image with the caption makes sense.

22

Typography / Images

04

Web Interface Handbook

Gallery Showing a gallery with equal sizes of images and equal columns is always boring and uniform. It is better to vary the layout by changing the size of images, width and number of columns in the gallery.

Boring.

Varied and interesting.

23

Typography / Images

05

Web Interface Handbook

Outside the layout It's a good idea to pull the image outside the edges of the layout. This often creates a more cohesive layout and looks interesting. This works well in many cases, such as when it is a text or card cover.

The image goes outside the layout.

It works well as a cover.

24

Typography / Images

06

Web Interface Handbook

Vertical image A horizontal image next to a column of text can look strange. In that case, it's best to use vertical images.

A horizontal image next to the text column.

The vertical image creates balance.

25

Typography / Images

07

Web Interface Handbook

Text wrapping It's always weird to make an image float in text, especially on websites and in app design. It implies small images, which in itself is not such a good thing. Larger images in text are better. It also creates some other problems, like jagged margins from the image, and generally makes the text worse to read.

A floating image is not the best idea. A big picture without floating is always a good thing.

Instead of floating images, it's always a good idea to separate text and images into columns. It reads better and looks great.

Image and text in columns. Text wraps around the image.

25

Typography / Images

Web Interface Handbook

If, for some reason, you still need to wrap text around the image, it's better to place it to the right of the text. It's better to put the image to the right of the text. In this case it will be much more ethereal and readable. Especially if the text has a heading.

The image floating to the left causes disharmony.

The floating image on the right looks balanced.

27

Typography / Images

08

Web Interface Handbook

Vertical image blocks Vertical blocks with an image mix with each other even if there is a good distance between them. Therefore, it is better to separate such blocks with a line or alternating backgrounds.

The blocks with the image are mixed with each other. The line separates each block well.

28

Typography

Web Interface Handbook

Headings

29

Typography / Headings

01

Web Interface Handbook

Heading hierarchy Hierarchy is one of the foundations of design and good typography. Work on the design is always a process of separating the primary from the secondary. Hierarchy is one way of doing this.

The weak hierarchy makes the design look flat.

Hierarchy creates structure.

By manually scaling headlines or using type scale tools (https://type-scale.com), you can create a strong hierarchy, thereby increasing content contrast. This will greatly improve the structure of the content and the design as a whole.

Heading 1 Heading 2 Heading 3

Heading 1 Heading 2 Heading 3

Heading 4

Heading 4

A weak heading hierarchy has poor contrast.

A strong heading hierarchy has a good contrast.

30

Typography / Headings

Web Interface Handbook

In the example below, all four headers are different sizes from H1 to H4. Although at first glance they seem to be about the same. In such text, it is difficult to distinguish which of the headings is more important and what structure it forms.

Down the road Around the world Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

Can’t stay for long Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula.

Voice that keeps on calling me Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

A weak heading hierarchy has poor contrast.

31

Typography / Headings

Web Interface Handbook

A strong hierarchy creates a good contrast between the text and the headings, and between the headings themselves. In the example below, the strong hierarchy is the only reason the structure is set up so well, helping to immediately identify what is primary and secondary and to understand the relationship of each text element to the other.

Down the road Around the world Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

Can’t stay for long Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula.

Voice that keeps on calling me Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

A strong heading hierarchy has a good contrast.

32

Typography / Headings

02

Web Interface Handbook

Don't put the headings in the body text baseline Building text on a baseline has little to do with vertical rhythm and text harmony. It only complicates typography, as it becomes impossible to size multiline headlines. It also puts unnecessary limitations on the size of headings, so that they match the body text's baseline. The baseline of the text has nothing to do with the line height of the headings. It is better to choose for each heading an independent ratio of size and line height.

Size 32px / Line spacing 24px

The quick brown fox jumps over the lazy dog Size 32px / Line spacing 48px

The quick brown fox jumps over the lazy dog Do not put the headings in the text baseline.

Size 32px / Line spacing 38px

The quick brown fox jumps over the lazy dog Independent heading size and line height.

33

Typography / Headings

03

Web Interface Handbook

Large headings don't have to be bold Sometimes large headings don't need to be bold. A large heading in regular fontweight has a good contrast to the text.

The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis.

A large heading without bold looks contrasting.

34

Typography / Headings

04

Web Interface Handbook

Contrast of heading with the color or italic Contrasting headings can be achieved through color and style without bolding. This often looks more advantageous and interesting than monochrome bold headings.

The quick brown fox jumps over the lazy dog Stone and conceptual rationalism Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis.

The italic font style creates a good contrast of the heading.

The quick brown fox jumps over the lazy dog Stone and conceptual rationalism Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis.

The color creates the contrast of the heading.

35

Typography / Headings

05

Web Interface Handbook

Heading balance by reducing letter spacing Large headings can look unbalanced because of the large spacing between characters. Therefore, you can reduce the letter spacing a bit, and it will give a nice balance and make the heading more coherent. There are no strict rules for letter spacing; it depends on the size of the font and on the font itself. So it depends solely on practice and experimentation in your case.

Letter spacing 0

The quick brown fox jumps over the lazy dog Letter spacing -0.6

The quick brown fox jumps over the lazy dog Reduced letter spacing for large heading sizes creates a good balance.

36

Typography / Headings

06

Web Interface Handbook

Balance all caps heading by increasing letter spacing For headings in uppercase, it is better to increase the letter spacing so that the characters do not merge into a single line. This increases the readability of the heading. Normally, the larger the header's uppercase size, the larger the letter spacing should be.

Letter spacing 0

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Letter spacing +0.7

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Increased letter spacing for uppercase headings creates better readability.

37

Typography / Headings

07

Web Interface Handbook

Positioning the line at the heading Usually, the purpose of a horizontal line is to separate one from the other. So if the line is below the title, it rather separates it from the text. Thus, if you are using the line as a decorative element, it is better to place it above the heading. That way the line, heading, and text will be one block.

The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The line separates the heading from the text, even though it refers to the text

The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

The line does not separate the heading from the text.

38

Typography

Web Interface Handbook

Text

39

Typography / Text

01

Web Interface Handbook

The choice of line spacing is a subjective Line spacing affects how quickly and comfortably the text can be read. Usually, the range of convenient values is between 1.3..1.7 of the font size. The choice of line spacing depends on several factors. One of them is the subjective feeling of reading comfort. There are no strict rules in this aspect, compare texts with different line spacing, read and try to understand which value allows you to do it most comfortably.

Size 16px / Line spacing 1.25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.

The line spacing value is too small.

Size 16px / Line spacing 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.

Eligible line spacing.

40

Typography / Text

02

Web Interface Handbook

The choice of line spacing depends on the font params The higher the x-height of the font, the more line spacing may be needed. For example, Source Sans Pro has a small x-height, while Montserrat has a higher xheight.

x-height

Source Sans Pro

Montserrat

Different fonts have different height characteristics.

Text typed in these two fonts with the same size and line spacing will look and read differently. For Montserrat, the line spacing may need to be increased.

Source Sans Pro / Size 16px / Line spacing 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.

For Source Sans Pro line spacing 1.5 looks perfect.

Montserrat / Size 16px / Line spacing 1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.

Montserrat has increased x-height and line spacing of 1.6 may be preferable.

41

Typography / Text

03

Web Interface Handbook

The choice of line spacing depends on the line length The longer the line or column of text, the larger the line spacing can be. The opposite also works, the shorter the line/column length, the smaller the line spacing.

Size 16px / Line spacing 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.

Size 16px / Line spacing 1.4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.

The longer the line, the larger the line spacing can be.

42

Typography / Text

04

Web Interface Handbook

Choose the line spacing for small text The rules remain the same for small text. The choice of line spacing still depends on subjective feeling, font params, and line length.

Size 16px / Line spacing 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.

Size 12px / Line spacing 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.

No special line spacing is needed for small text

Size 12px / Line spacing 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar.

Size 12px / Line spacing 1.4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor.

The shorter the line, the smaller the line spacing can be.

43

Typography / Text

05

Web Interface Handbook

Line length and font size The larger the font size, the longer the line length can be. Small text is less easy to read if it is in a wide column. Conversely, the large text is readable even if the line is long enough.

Size 16px / Line spacing 1.5

Bataille’s essay on the dialectic paradigm of context holds that reality is used to disempower minorities, but only if culture is equal to truth; otherwise, class, somewhat surprisingly, has significance. In a sense, an abundance of discourses concerning structural subtextual theory exist.

Size 20px / Line spacing 1.5

Bataille’s essay on the dialectic paradigm of context holds that reality is used to disempower minorities, but only if culture is equal to truth; otherwise, class, somewhat surprisingly, has significance. In a sense, an abundance of discourses concerning structural subtextual theory exist.

The longer the line, the larger the font can be.

44

Typography / Text

06

Web Interface Handbook

Boring text Well-chosen fonts, vertical rhythm, line spacing, and other fine-tuning do not guarantee that people will read the text. Even if the text is beautifully written and extremely valuable, its presentation can stop they from reading.

Across the cosmic ocean Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Donec libero turpis, lacinia nec leo sit amet, dignissim dignissim lacus. Nunc semper, leo vel bibendum dapibus, justo lectus dapibus libero, vitae volutpat mi justo eget sem. Curabitur sagittis, dui vitae accumsan dictum, leo metus lobortis leo, ut sagittis lorem sem eu elit. Nulla facilisi. Mauris imperdiet diam ac maximus auctor. Donec sed nisl nibh. Nunc est nibh, porttitor sit amet metus vitae, suscipit convallis nisl. Pellentesque non fringilla enim, at luctus quam. Quisque vitae magna molestie, faucibus nunc eget, rutrum elit. Nulla euismod metus sem. Aenean ullamcorper urna tortor, ut elementum felis volutpat faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin euismod lacus diam, a faucibus dui ultrices in.

Boring text

45

Typography / Text

Web Interface Handbook

A good strategy is to put callouts and notes in the right column. Separate the text with headings, make decorative elements. Such texts are interesting to read, consider the details, dwell on the highlighted accents and notes.

Across the cosmic ocean Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula.

1s

Light travels to the Moon

White dwarfs Donec libero turpis, lacinia nec leo sit amet, dignissim dignissim lacus. Nunc semper, leo vel bibendum dapibus, justo lectus dapibus libero, vitae volutpat mi justo eget sem. Curabitur sagittis, dui vitae accumsan dictum, leo metus lobortis leo, ut sagittis lorem sem eu elit. Nulla facilisi. Mauris imperdiet diam ac maximus auctor. Donec sed nisl nibh. Nunc est nibh, porttitor sit amet metus vitae, suscipit convallis nisl. Pellentesque non fringilla enim, at luctus quam. Quisque vitae magna molestie, faucibus nunc eget, rutrum elit. Nulla euismod metus sem.

Aenean ullamcorper urna tortor, ut elementum felis volutpat faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin euismod lacus diam, a faucibus dui ultrices in.

The text can be interesting

46

Typography / Text

07

Web Interface Handbook

Note or callout position in the text A callout or note looks strange if it is placed to the left of the main text. It looks familiar and balanced on the right side.

Aenean ullamcorper urna tortor, ut elementum felis volutpat faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin euismod lacus diam, a faucibus dui ultrices in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula.

It looks weird.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula.

Aenean ullamcorper urna tortor, ut elementum felis volutpat faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin euismod lacus diam, a faucibus dui ultrices in.

Looks familiar.

47

Typography / Text

08

Web Interface Handbook

The first column must be larger than the second If the last column of text more than the first, it always raises questions and looks strange. This only works for text columns, for other modules, cards or images it doesn't matter.

It looks weird.

Looks perfect.

48

Typography

Web Interface Handbook

Tables

49

Typography / Tables

01

Web Interface Handbook

Readable tables Tables are designed to display numerical data. If the cells of a table contain multiline text and images it looks like a questionable way. In this case, it is better to avoid presenting the data in a table.

Dessert

100g

Frozen yougurt - 159 KCal - 6g fat - 4g protein

Ice cream - 237 KCal - 9g fat - 4.3g protein

The data in such a table is unreadable.

Dessert 100g

KCal

Fat g

Protein g

Frozen yougurt

159

6

4

Ice cream

237

9

4.3

Eclair

262

16

6

Cupcake

305

3.7

4.3

The data in the table is well readable.

50

Typography / Tables

02

Web Interface Handbook

Borders in the table should be light Too thick lines in tables create noise and block attention. When reading a table, it's better to see the data itself, not the borders. So thinner and lighter lines are more comfortable to read the table.

Dessert 100g

KCal

Fat g

Protein g

Frozen yougurt

159

6

4.0

Ice cream

237

9

4.3

Eclair

262

16

6

Cupcake

305

3.7

4.3

Too thick and bright borders make it hard to read the table

Dessert 100g

KCal

Fat g

Protein g

Frozen yougurt

159

6

4

Ice cream

237

9

4.3

Eclair

262

16

6

Cupcake

305

3.7

4.3

Fewer borders and lighter lines look more comfortable to read.

51

Typography / Tables

03

Web Interface Handbook

Lines in tables are not necessary Often lines and borders are not needed at all. This only increases the readability of the table. Sufficient spacing between table rows is quite good as separators.

Dessert 100g

KCal

Fat g

Protein g

Frozen yougurt

159

6

4

Ice cream

237

9

4.3

Eclair

262

16

6

Cupcake

305

3.7

4.3

The table reads well without lines and borders.

52

Typography

Web Interface Handbook

Quotes

53

Typography / Quotes

01

Web Interface Handbook

A quote with a large font size breaks up the text A strong emphasis on the quote is not always necessary; changing the rhythm with an italic style or increasing the font size relative to the body text is sufficient. If the quote has too much contrast at the expense of increased font size, it may distract from reading the main text. Although visually it may seem that a quote with more size of the text looks interesting and attractive.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

Epicurus in culpa, qui ratione intellegi posse et quasi naturalem atque admonitionem altera occulta quaedam et dolorem. — John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

The contrast of the quote is too high, making it difficult to read the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

Epicurus in culpa, qui ratione intellegi posse et quasi naturalem atque admonitionem altera occulta quaedam et dolorem. — John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

The quote is harmonious in the text.

54

Typography / Quotes

02

Web Interface Handbook

Emphasis the quote with color There is no need to increase the font size of the quote. You can change the color of its text and make it bold. This will increase the contrast of the quote without having to increase the font size. This keeps the balance between the size of the text and the quote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

Epicurus in culpa, qui ratione intellegi posse et quasi naturalem atque admonitionem altera occulta quaedam et dolorem. — John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

Quote in color and bold has a good contrast.

55

Typography / Quotes

03

Web Interface Handbook

Decorative element It's a great solution to add decorative elements to the quote. This helps draw attention to the quote without the need to increase its font size.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

Epicurus in culpa, qui ratione intellegi posse et quasi naturalem atque admonitionem altera occulta quaedam et dolorem. — John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

The decorative element in the quote is exciting.

56

Typography / Quotes

04

Web Interface Handbook

Border or background Creating a frame around the quote seems like a questionable solution, taking away the freedom of the quote and not solving practical goals. Emphasizing it with a light background might be more appropriate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

Epicurus in culpa, qui ratione intellegi posse et quasi naturalem atque admonitionem altera occulta quaedam et dolorem. — John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

The bordered quote looks doubtful.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

Epicurus in culpa, qui ratione intellegi posse et quasi naturalem atque admonitionem altera occulta quaedam et dolorem. — John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

A quote with a background is preferable.

57

Typography / Quotes

05

Web Interface Handbook

Outside the layout If the quote or its background extends beyond outside the text layout, it allows you to alternate the rhythm of the text interestingly and diversify the presentation of content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

Epicurus in culpa, qui ratione intellegi posse et quasi naturalem atque admonitionem altera occulta quaedam et dolorem. — John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

Quote is going outside the layout on the sides.

58

Typography

Web Interface Handbook

Lists

59

Typography / Lists

01

Web Interface Handbook

List without a clarification text Lists in a text without a clarification make little sense. If the heading is immediately followed by a list, it looks strange. It is better to place a paragraph before the list that is linked to it.

The quick brown fox jumps over the lazy dog • Consensuses of futility • Stone and conceptual rationalism • The dialectic paradigm of context and subdialectic sublimation Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

A list with no clarification text looks strange.

The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. • Consensuses of futility • Stone and conceptual rationalism • The dialectic paradigm of context and subdialectic sublimation Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

A list with a clarification makes sense.

60

Typography / Lists

02

Web Interface Handbook

Decorative markers It is a good idea to use symbols other than bullets as markers for lists, such as ticks, squares, dashes, etc. This makes the lists more attractive to read.

The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Consensuses of futility Stone and conceptual rationalism The dialectic paradigm of context and subdialectic sublimation Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien.

A list with non-standard markers.

61

Typography / Lists

03

Web Interface Handbook

The list item in multiple lines It is better to separate multiline items in the list with an increased spacing, but less than the distance between paragraphs.

The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Therefore, the subject is interpolated into a structural subtextual theory that includes narrativity as a whole. Bataille’s essay on the dialectic paradigm of context holds that reality is used to disempower minorities, but only if culture is equal. In a sense, an abundance of discourses concerning structural subtextual theory exist. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

The default spacing between items on the list.

The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Therefore, the subject is interpolated into a structural subtextual theory that includes narrativity as a whole. Bataille’s essay on the dialectic paradigm of context holds that reality is used to disempower minorities, but only if culture is equal. In a sense, an abundance of discourses concerning structural subtextual theory exist. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.

Increased spacing between items.

62

Typography

Web Interface Handbook

Links

63

Typography / Links

01

Web Interface Handbook

The color of links It makes no difference what color the link is, as long as its color is different from the text and it looks like a link. Although it is common for links to be blue.

My blue link

My red link

My green link

The link can have any color, especially if it is different from the text.

If the link is underlined and has the same color as the text, it dissolves into the text and is difficult to see. Links need emphasis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

An underlined link the same color as the text looks invisible.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

A link with a color different from the text is instantly visible.

64

Typography / Links

02

Web Interface Handbook

Underlining links If a link in the text is not underlined it raises questions and makes people think. Even if the color of the link is different from the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

A link without an underline looks strange.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

A link with an underline is always unambiguously readable.

In navigation and other elements that explicitly read as a set of menu items, the color of the links is irrelevant, as is the underline.

Products

Services

About us

Contact

Link color and underline do not matter in navigation.

65

Typography / Links

03

Web Interface Handbook

Scattered links in the text Links scattered throughout the text cause clutter, reduce focus, and make the text difficult to read. It is good if there is only one link in one paragraph.

Links scattered throughout the text make it hard to read.

One link in one paragraph.

If you need more than one link in the text, the best solution may be to put them in a separate block below the text. For example, as a list.

A block of links after the text.

66

Layout

Web Interface Handbook

Layout

67

Layout

Web Interface Handbook

This chapter describes the principles of design construction. How to make a composition and design so that it is effective, not boring, and works. The part about grids tells you how and when to use column designs. Why it can make a difference and when it doesn't make sense. Layout and grids are the foundation and walls of a house that set the structure. The reliability, flexibility, and organization of these basic things, set the overall approach for all subsequent design and style.

68

Layout

Web Interface Handbook

Principles

69

Layout / Principles

01

Web Interface Handbook

Primary and secondary Separating the primary from the secondary is one of the basic principles of design. A good layout first focuses on the main thing, and then reveals the secondary. Without emphasizing the primary, the design is boring and impersonal, and often even useless.

The page layout has no focus point. The layout definitely has a focus and it is clear what the main thing is.

Emphasizing the main thing works not only for the whole layout but also for each of its components, like modules and cards. The same principle applies to them: emphasize the main thing by directing the focus to it, and then show secondary.

The card does not have a focus point.

The card has a point of focus and it is directed at the main thing.

70

Layout / Principles

02

Web Interface Handbook

Rhythm There's nothing more boring than repetitive blocks in a layout. It makes the design look impersonal and monotonous. The user simply scrolls through the page without stopping at anything. Variety of content and change of rhythm is one of the important rules of design. Rhythm creates music, the design becomes engaging and the content is something you want to read, look at, and notice the details.

Monotonous design.

Rhythmic and attractive design.

71

Layout / Principles

03

Web Interface Handbook

Lines of force Lines of force are a good way to build a solid and eye-catching layout that is based on vertical points of attraction. It can be several lines or even just one.

The layout design with several lines of force.

The layout design with one line of force.

72

Layout / Principles

04

Web Interface Handbook

Algorithm of design The easiest way to achieve a solid design and get a great result is in four steps:

1. Content The first step is to understand what kind of content you're working with, what text, images and other components there are. 2. Structure The second is to emphasize the primary and secondary, to separate the text with headings. Understand what blocks the content can be divided into and what relationships are formed. 3. Layout The third step is to create a layout that reflects the idea and best represents the content and its structure. The way the design should work. 4. Style And finally, the fourth step: design, style, color and other visual details. The way the design should look.

73

Layout / Principles

Web Interface Handbook

1. Content

2. Structure

3. Layout

4. Style

74

Layout

Web Interface Handbook

Grid

75

Layout / Grid

Web Interface Handbook

01

Hard or soft vertical grid There are two ways to simplify work with vertical spacing: a hard grid and a soft grid. A hard grid means that the height and spacing of the elements are always multiples of a grid unit. A soft grid does not limit the height of the elements in any way, but only defines multiples of the spacing between them. In the design of sites and web applications soft grid is preferred. It gives more freedom in making design decisions and does not impose such restrictions as a hard grid.

8

16

Button

Button 16

8

The hard grid limits the design and if the height of the elements is not a multiple of the grid unit, that's a problem.

A soft grid gives you more freedom when designing web sites and web apps.

76

Layout / Grid

Web Interface Handbook

02

Types of grids There are several types of grids: column, modular, hierarchical and others. Each type of grid can solve a particular problem. It all depends on the content and design requirements.

Column

Modular

Hierarchical

Each type of grid can be used for different tasks.

It is quite normal to combine different types of grids in one layout if the task requires it.

Combining different types of grid.

77

Layout / Grid

Web Interface Handbook

03

No need to fit the sidebar into the page grid There is no need to fit the sidebar into the page grid. The sidebar may well be separate from the overall grid, or it may have its own grid. Often the sidebar has a fixed pixel width, and the content area stretches according to the width of the page. In that case, it's difficult to fit the sidebar into the grid. And there is no point to do that.

The sidebar is fit into the page grid.

The sidebar has nothing to do with the page grid.

78

Layout / Grid

Web Interface Handbook

04

No need to fit header & footer into the page grid There is no need to fit the header into a single page grid. First, the header is usually a line, not a column module, and the default line does not require a grid. Second, it's quite difficult because the header can have a wide variety of elements, menus, and logos that you can't fit into a single column. So unless the content requires a direct relationship between the page columns and the header, there's no point in fitting it into the overall page grid. You can do without the grid in the header or make your own grid for it. The same goes for footer.

The header and footer are fit into the page grid.

The header as well as the footer usually doesn't need to fit into the page grid.

79

Layout / Grid

Web Interface Handbook

05

If the content fits into a three-column grid, you don't need to use a 12-column grid There is no point in using a 12-column grid if 3 columns or any other number of columns is right for the content.

A 12-column grid makes no sense.

The number of columns is defined by the content.

80

Layout / Grid

Web Interface Handbook

06

If the content requires the use of different grids, you can use different grids It's perfectly normal to combine several grids in one layout, in one page, in one application. If the content requires different approaches, that's fine and allows you to build the most effective layout possible. You shouldn't always fit content into the one grid. It's not the grid that dictates the terms, it's the content.

The contents do not fit into one grid.

It's okay to combine grids depending on the contents

81

Layout / Grid

Web Interface Handbook

07

There is no need to use a grid if the content does not require it The grid is just a tool for organizing content. It's one way to build interfaces more efficiently, especially multi-page UI. The grid gives format and structure to speed up and simplify content. If the content doesn't need to be grid-based, you shouldn't artificially create limits that don't make sense.

The contents do not require a grid.

It's good to make a grid if the contents require it.

82

Forms

Web Interface Handbook

Forms

83

Forms

Web Interface Handbook

The design of the forms is based on several basic principles: You need the data, not the user. So you have to do all the work for him as much as possible and make it easier and faster to enter them. By substituting default values, shortening fields, removing fields that are not required. You need to collect the necessary minimum of data first, and then during or after you get additional data. Reward with discounts, bonuses, benefits additional data collection. One of the significant indicators of the form is the speed at which it is filled out. The higher it is, the higher the probability that the user will fill it out. Forms have three efficiency indicators. They are the basis for all analytics and measure how well the form is made. 1. Conversion. What percentage of people filled out the form. 2. Bounces. What percentage of people began to fill and stopped. 3. Correct data. How accurate the data collected is. When there is no fake data in optional fields, when users make fewer mistakes thanks to good design.

84

Forms

Web Interface Handbook

Required & optional

85

Forms / Required & optional

01

Web Interface Handbook

All fields are required If the form has required and optional fields, it is better to remove optional and make all fields required. Then you can remove asterisks and other required indicators from the form. This always makes the form easier and cleaner. And most importantly, it makes it unambiguous - the user just has to fill out the entire form.

The form has required and optional fields.

All fields are required, optional fields are removed from the form.

86

Forms / Required & optional

02

Web Interface Handbook

Optional fields An optional field must be reasonable and make sense. If we see the optional field Company in the registration form, what does it mean? Why should it be specified? Usually there is no answer to this question and no reason to fill out such a field either. Additional data can always be received later but now it is important that the user as soon as possible became your client.

Email

Email

Password

Password

Company

(optional)

The Company field makes no sense.

The form has only those fields that make sense.

If we still want to get more data or a certain field for some users will make sense in the future work with the site or service, you must explain why we want to get this data.

Email

Email

Password

Password

Company

(optional)

Company

(optional)

If you are a team, we provide extra bonuses.

The Company field makes no sense.

The hint explains the purpose of the optional field.

87

Forms / Required & optional

03

Web Interface Handbook

Long and complicated forms In long and complex forms, it may be impossible to remove optional fields. For example, if these fields make sense to the part of the audience. In this case, a good solution is to separate required from optional. The form should have required fields first, and then the optional separated by a border or background. This visual separation will simplify the form and make it more predictable: it will make it clear what the user needs to fill out and what is filled out depending on their case.

Optional and required fields are mixed.

Optional fields are in a separate block.

88

Forms / Required & optional

04

Web Interface Handbook

When the optional becomes required Sometimes there are forms in which all fields are required, although some of them have no value in the future use of the site. Perhaps they do so because of technical simplicity, or because they could not decide which data are important, shifting the responsibility to the user. The typical result of such solutions is low conversion of forms and frequent refusals of users at the step of filling out. People don't like forms with something they don't want to fill out and don't understand why. When I see that they want my phone number, but I don't know why or know that it won't be important, I always enter 1234567.

Email

Email *

Password

Phone

*

Password

*

All fields are required, although the Phone input does not make sense to use the site in the future.

The form has the fields that are needed to use the site.

89

Forms

Web Interface Handbook

Hints

90

Forms / Hints

Web Interface Handbook

01

The hint makes the input clear Hints at the input fields make the form more human. They help tell people how to fill out the data and why to fill it out.

Your weight (kg)

Weight (kg) This will help us find the right training for you.

It's a weird input field.

More reasonable.

91

Forms / Hints

Web Interface Handbook

02

Position of hints It's a good idea to place hints below the label of the input field, below the field itself, or to the right of the input field, if space allows it. It's a bad decision to make the hint in the form of the label itself, it reduces the readability of the form.

Еnter your company name to get extra bonuses.

It's not good to make a hint inside the label.

Company

Company

If you are a team, we provide extra bonuses.

If you are a team, we provide extra bonuses.

A hint below the label makes the form readable.

The hint below the input field is also good.

92

Forms / Hints

Web Interface Handbook

03

Hidden hints You often see a solution where the hint is hidden behind a question mark. When you click it, it opens a popover and you can read the hint in it. There are two problems here. First, if something is hidden, it is not there, which means the user is likely to miss or not notice. Secondly, it's always an inconvenient solution, the small icon is hard to get to, the popover is always off-screen and disappears when accidentally tapped on the page or inside the popover.

Password

?

Password

Password must be at least 8 characters long and have at least one uppercase letter and a digit.

Hint is hidden.

Hint is shown.

Do not be afraid of hints with a long text. They can be shown at once and it won't complicate the form in any way and won't scare the user. On the contrary, it will help to understand faster and easier what data are required and how to fill them out.

93

Forms

Web Interface Handbook

Errors

94

Forms / Errors

Web Interface Handbook

01

Displaying errors Error messages on the form should help the user and guide them to fill in the fields correctly. More often we see the opposite situation, where an angry form turns red and screams at the user that they are wrong everywhere. This is unpleasant and leads to refusals to fill out the form.

Email

Email

jo

jo

The email is wrong.

The form is checked while user is typing.

The field should only be checked after entering the data.

It is not a good idea to check data entry when typing. The user gets an error before he has had a chance to enter everything he needs. It is better to check the data when the form button is pressed. If in your case it makes sense to check the data as the user is typing, you should do it on the blur event, when the cursor moves to another field. It's not perfect, but it's better than the user getting an error when he starts typing the first letters of his email.

95

Forms / Errors

Web Interface Handbook

02

A good message helps solve the problem It's good when the error message doesn't just point to a problem, but helps to solve it or specifies what went wrong. Being polite and tactful in reporting mistakes is always a good thing. The user will react more calmly to errors if they are not swearing at them, but politely asking and prompting.

Email

myemail.com The email is wrong.

The message simply points out the problem.

Email

myemail.com It seems you forgot to type @ in email.

The message helps solve the problem.

96

Forms / Errors

Web Interface Handbook

03

Message location It is bad practice to display error messages in isolation from the fields themselves. I know that this is usually done when developers are a bit lazy. It is technically easier to display all errors in one place without context. But it's better not to do so, it breaks the whole logic of the form and the user may not understand which error refers to which field.

Login

Login

The email is typed incorrectly. Password must be at least 8 characters long

Email

myemail.com

Email

myemail.com The email is typed incorrectly.

Password Password

***

Log in

Error messages are placed at the beginning of the form.

*** Password must be at least 8 characters long

Log in

Error messages are shown in context.

It is best to show the error message below or above the input field. This gives a clear understanding of which field it applies to.

Password

Password Password must be at least 8 characters long

Password must be at least 8 characters long

The error message below the input field.

The error message above the input field.

97

Forms / Errors

Web Interface Handbook

04

Error summary Long and complex forms may need an extra move to give a better understanding of errors. The error field may be hidden at the top of the page and out of sight. By clicking the button on the form, the user won't see which field the error is in. So in this case it's a good solution to show an additional message above the button. At the same time the field itself should also have a message.

Long form Email

myemail.com It seems the email is incorrect.

Name

City

ZIP

Company

It seems the email is incorrect.

Continue

On long forms, you can duplicate the error message before the form submit button.

Another option is to show the error message as a notification in the upper right corner of the page. This will also help the user understand why he clicks the button of the filled form, and it is not sent.

98

Forms

Web Interface Handbook

Buttons

99

Forms / Buttons

Web Interface Handbook

01

Disabled button Unambiguity is an important criterion for an effective form that will be easy and quick to fill out. Therefore, the less controversial points in the form, the better. One of these ambiguous factors is the button in the form, which has a disabled state until all fields are filled in. To the user, it looks like a non-working form. Therefore, it is better to avoid this solution.

Login

Login

Email

Email

Password

Password

Log in

A button with a disabled state can tell that a form is not working.

Log in

The form definitely works, the button has no disabled state.

100

Forms / Buttons

Web Interface Handbook

02

Align button in horizontal form In a horizontal form, the button should be aligned to the left edge of the input fields, not to the edge of the labels. This will create vertical consistency and a single form reading line. The same can be done with the title of the form. Then the eye will simply glide over the form from top to bottom without wandering to the sides. The labels will be read by the peripheral vision.

Login Email

Password

Log in

The button is not aligned to the left edge of the input fields.

Login Email

Password

Log in

The button is aligned to the left edge of the input fields and so is the form title.

101

Forms / Buttons

Web Interface Handbook

03

The final button in a complex form In long and complex forms, it's a good idea to visually highlight the final button, for example, with a background. This allows it not to get lost among other form controls. Especially when the form has other buttons that add fields or data.

The button is lost among other form controls.

The button is visually highlighted.

102

Forms / Buttons

Web Interface Handbook

04

Button for adding data In long and complex forms, it's a good idea to visually highlight the final button, for example, with a background. This allows it not to get lost among other form controls. Especially when the form has other buttons that add fields or data.

Person name

Person name

Add

Add

The button to add data is under the input field.

The button to add data is to the right of the input field.

103

Forms / Buttons

Web Interface Handbook

05

Forgot password The "Forgot password" link should be placed contextually to the password field, so that it's as close to it as possible. If this link is at the beginning of the form, the user might not notice it.

Login Forgot password?

Login Email

Email

Password Password Forgot password?

Log in

The Forgot password link has no context.

Log in

Forgot password is next to the password field.

104

Forms / Buttons

Web Interface Handbook

06

Back button The "Back" link is better placed at the beginning of the form and duplicated at the end of the form. Especially for long and complex forms. This will help the user navigate through the form at any given time.

Sign in Back Name

City

Continue

Back

The Back link and the button are in the right places.

105

Forms / Buttons

Web Interface Handbook

07

Multiple action buttons When a form has multiple action buttons, it's best to arrange them in a row by priority of importance. This will make them more readable, understandable, and help reduce the risk of accidental clicks.

Application

Application

Name

Name

City

City

Continue

Continue

Save & exit

Save & exit

Stacked buttons are unwieldy and unreadable.

Buttons in a row by priority of importance.

106

Forms

Web Interface Handbook

Long & complicated forms

107

Forms / Long & complicated forms

01

Web Interface Handbook

Grouping fields Sometimes the form cannot be simple with few fields. Some data require you to build a long and complex form. In this case, it is always a good idea to group fields of similar data by separating them with lines, spacing, or combining them with a border or background.

Fields in the form are not separated into groups.

Grouping fields with lines, borders or background.

108

Forms / Long & complicated forms

02

Web Interface Handbook

Form with steps It's better not to make a form with steps of several pages. Such forms show the lowest conversion rate possible, cause the most fill-outs, and stress users out more often. People have other interesting things to do than fill out a multi-page form with an endless number of steps. Usually, the form is divided into steps, because it's scary to show all the fields on one page at once. It seems that such a form will be complicated and confusing for the user. But there is no need to fear this, on the contrary, showing the entire form will give the user an understanding of all the required data and make filling out the form unambiguous and straightforward, and therefore only speeds up the process of filling out.

1

2

3

The form with the steps is challenging.

1

1

2 2

3 3

The steps open up gradually as they are filled

All steps are at once visible on one page

109

Forms

Web Interface Handbook

Horizontal forms

110

Forms / Horizontal forms

01

Web Interface Handbook

Horizontal form saves space on the page Horizontal forms help save space on the page and make the form as compact in height as possible. This, in some cases, increases readability and filling speed.

Long vertical form.

Compact horizontal form

On mobile screens, it's better to turn the horizontal form into a vertical one and make labels above the input fields. The horizontal space is significantly limited on mobile screens, and a horizontal form would look weird.

111

Forms / Horizontal forms

02

Web Interface Handbook

Align the labels in a horizontal form In the horizontal form, it is better to align the labels to the left edge. This makes them easier to read, allowing you to glide along the flat left edge with your peripheral vision and read the label names quickly.

Labels aligned on the right edge

Labels aligned on the left edge

112

Forms / Horizontal forms

03

Web Interface Handbook

Using a grid for horizontal form Using a grid helps to better structure the horizontal form and give it predictable columns.

The grid defines the structure.

113

Forms / Horizontal forms

04

Web Interface Handbook

Vertical alignment of labels and inputs In the horizontal form, label alignment is not the same for different fields. For a text and select field, the label should be aligned to the centerline of the field. For radios, checkboxes, and textarea the label should be aligned to the top line of the control.

Name

Type

Radios

Select...

First radio Second radio

About

Align labels to the input fields.

All labels are aligned to the top edge of the input fields if they have hint. However, if there is no hint, the alignment remains depending on the type of field.

Email Name What do you prefer to be known as?

Radios

First radio

Which option do you choose?

Second radio

About Tell us a little bit about yourself.

All labels with hint are aligned to the top edge of the input fields

114

Forms / Horizontal forms

05

Web Interface Handbook

Lines of force The rule for positioning fields in a horizontal form is very simple: they must all be aligned on a single line. This applies not only to text inputs but also to radios & checkboxes.

Email

Email

Password

Password

Radios

Radios

First radio

First radio Second radio

Second radio Example checkbox

Example checkbox

Sign in

Sign in

The weird position of inputs and button in the horizontal form.

All inputs and button have the same vertical line.

There are only two vertical lines in the horizontal form. The first is the line of labels. The second is the line of inputs and buttons.

Email Password

Radios

First radio Second radio Example checkbox

Sign in

Lines of force in horizontal form

115

Inputs

Web Interface Handbook

Inputs

116

Inputs

Web Interface Handbook

Forms conversion depends on the design of inputs. Sometimes the input design improvements can increase form conversion rates by times or even tens of times. Well-designed input fields are what make a form efficient and quick to fill out. The way the input fields in the form are made affects the result. The easier the input for the user, the faster the goal will be reached. The fewer refusals to fill out the form and the higher the conversion will be. Custom inputs reduce the form's effectiveness User-familiar input fields such as text boxes, checkboxes, and radios are always more efficient and faster to fill than unusual controls. Time is very easy to enter simply by numbers, rather than selecting with the mouse or touch from an unusual clock-like control. It's always faster to type or make a selection from a small number of items There is nothing faster than the user entering data into a text input. Unless you have two or three choices in checkboxes or radios. All other input fields and controls complicate the form in advance and make it hard to fill. Of course, this does not mean that other controls should never be used. It means that you should always think about choices and text input boxes, checkboxes and radios should come first. Nothing is faster and more efficient than copy/paste When designing input fields, always keep in mind that users often just copy and paste data into a form. Phone numbers, email, address, and even their last name. This is the fastest way to fill out the form and get results. Don't stop them from doing this. A good form has feedback and helps to fill itself in The user will simply close the browser tab if they don't understand how to fill out the form, get an error message with no explanation of how to fill out the field, or worse yet, get no explanation for errors. The good form itself substitutes all the necessary data, the default data, in every way helps with hints to fill out the form and does not scream at the user with red fields.

117

Inputs

Web Interface Handbook

Sizes

118

Inputs / Sizes

Web Interface Handbook

01

Small height It is better to avoid input fields with small text sizes and low field height. Such inputs are difficult to click with the cursor or touch and difficult to read the entered data. An input field with a low height is always a bad choice at the cost of reduced clickable area. It is good when the input has a height equal to or greater than that acceptable for click and tap, i.e. at least 40px.

John Smith

Input with low height and small text is always a bad choice.

John Smith

It's good when the input is of a reasonable height.

119

Inputs / Sizes

Web Interface Handbook

02

Width of input It is good when the width of input matches the format of the data. It makes no sense to stretch the "email" field to the full width of the page. It doesn't make sense to make the five-digit ZIP code field long. The width of input is a good indication of what kind of data and what size is expected.

Email

Email

ZIP

ZIP

The width of the fields is the same and does not match the format of the entered data.

The width of the inputs fits the format of the data.

120

Inputs / Sizes

Web Interface Handbook

03

Height of textarea It is incredibly inconvenient if the textarea is so small and a scroll appears in it. The vast majority of users don't know they can drag the bottom right corner to enlarge the textarea. It is best if the height of textarea is equal to the expected number of lines of text. Even better, if the height will automatically adjust depending on the amount of text.

About

About

In quo aut officiis debitis aut interrogari ut

In quo aut officiis debitis aut interrogari ut

placet, inquam tum dicere exorsus est cur

placet, inquam tum dicere exorsus est cur

nec segniorem ad respondendum reddidisti

nec segniorem ad respondendum reddidisti

quorum facta

quorum facta quem modo ista sis

The textarea height is too low and the text is hidden behind the scroll.

aequitate, quam ob aliquam causam ista, quae ab illo inventore veritatis et dolore suo sanciret militaris.

The size of the textarea is about the number of lines in the text.

121

Inputs

Web Interface Handbook

States

122

Inputs / States

Web Interface Handbook

01

Focus state Feedback in the interface is always a good idea. The user needs to understand what's going on now at any given time. It's good to make the inputs have a focus state. It helps to navigate the form and the current action.

Name

John Smi The cursor is in the input but there is no focus state.

Name

John Smi The state of focus shows what is now happening on the screen.

123

Inputs / States

Web Interface Handbook

02

Error message A good error message must not only explain what the problem is but also tell the solution. The user should always understand what's going on and how to fix it in the fastest possible way. So you reduce the likelihood that he will stop and refuse to fill out the form.

ZIP code

ZIP code

2367

2367 The code seems to be entered incorrectly, your country uses a five-digit code.

There is no explanation of what went wrong and how to fix it.

The error message shows what is entered incorrectly and how to fix it.

124

Inputs / States

Web Interface Handbook

03

Error state of checkboxes & radios The rule for single checkboxes is slightly different than other inputs. The checkbox label contains a description of the expected data, so if a checkbox is not selected, this can be indicated by a red border without additional explanations.

I agree to the terms of use of the site

It's obvious from the label itself what the problem is.

Showing an error message can be useful in the checkboxes group, especially if it explains why these are required fields.

Notifications Please select a notification method so that we can let you know when the item is shipped.

I would like to be notified by email I would like to receive text messages by phone.

An explanation of the error can be useful in the checkboxes group.

Radios do not require error messages because they should always have a default choice.

Notifications

Receive notifications on my phone Don't send notifications to my phone

Error messages are meaningless for radios.

125

Inputs / States

Web Interface Handbook

04

Disabled state The text on the radio or checkbox label should also be disabled if the input is disabled. If the label does not have reduced transparency, it becomes unobvious that the input field is disabled.

Checkbox

Checkbox

Radio

Radio

The disabled state is unobvious.

Definitely inputs have a disabled state.

126

Inputs

Web Interface Handbook

Labels

127

Inputs / Labels

Web Interface Handbook

01

Input without label Labels at the form fields are one of the foundations of a good form structure. How they are named and how they are associated with the fields determines how quickly and accurately the form is filled out. An input without a label with only a placeholder causes problems if text is typed in it.

Your favorite food

Typing

Pizza

If text is typed in a field without a label, the context of that input disappears.

Your favorite food

Your favorite food Typing

Pizza

A label is always a good thing.

128

Inputs / Labels

Web Interface Handbook

02

Floating labels Sometimes, you still want to make the input field without the label. For example, to make the form look more compact. In this case, you can use a floating label that will move over the input during typing.

Your favorite food

Your favorite food

Typing

Pizza

Floating labels make the input field and data understandable.

129

Inputs / Labels

Web Interface Handbook

03

Long labels People scan the forms, they dislike forms and try to fill them out as quickly as possible and get on with more important things. Short labels at the inputs make reading the form more efficient and help the user think less about filling it out.

Please enter your first and last name

John Smith

The label of input is too long.

What is your full name?

John Smith

The label is still too long.

Name

John Smith

The label is short and clear.

130

Inputs / Labels

Web Interface Handbook

04

Placeholder The placeholder is an important part of an effective form. It helps to understand the format of the data being entered and tells the user what you are expected of them. Often in forms you will find that the placeholder simply duplicates the field label. This makes little sense. In that case, placeholder is not needed at all and just creates noise. It is better for placeholder to show the expected data or format.

Name

Your name

Email

Your email

The placeholder does not give an understanding of the format of the data. It simply duplicates the label of the input.

Name

John Smith

Email

[email protected]

The placeholder helps to understand the format of the data.

131

Inputs

Web Interface Handbook

Country

132

Inputs / Country

Web Interface Handbook

01

Default value Today automatic country detection works with high accuracy. So it would be strange not to use it, forcing the user to scroll through a 200 item list in search of the country.

Country

Select...

It's not good to make the user scroll through a long list of countries.

Country

Finland

It is good to automatically detect the country of the user and set it as the default value.

133

Inputs / Country

Web Interface Handbook

02

Autocomplete If you can't detect the country automatically, or if the choice doesn't depend on where the user is now, the best solution is an autocomplete input. Typing the first letters of the country and choosing from the options found is faster than scrolling through a list of many countries.

Country

Fi Fiji Finland

It is good to use the input with autocomplete to select the country.

134

Inputs

Web Interface Handbook

Address

135

Inputs / Address

Web Interface Handbook

01

Address fields Usually, a good strategy for improving the form is to minimize fields, merge them, and simplify the form. In the case of address input, the rules change. Combining address fields into a single input may not be a good idea.

Address

Address line

City

State

ZIP

It's not good to combine address in a single input.

It is good when the address form has detailed fields. It helps to fill it out faster and reduces the risk of errors and typos.

136

Inputs / Address

Web Interface Handbook

02

Selection a region If the field is optional, it doesn't need to be shown in the form. This is a very simple principle that always works. In many countries, the state or region does not matter when you enter an address. Therefore, it makes no sense to show an extra field. It is always best to hide the state or region input if it does not matter in the user's chosen country. Or conversely, show the state field if you selected a country where it is relevant.

Country

Germany State

Country

Germany

(optional for non US)

The state input is optional and makes no sense in the specified country.

If the region or state is optional in the specified country, you do not need to show its input.

137

Inputs

Web Interface Handbook

Search

138

Inputs / Search

Web Interface Handbook

01

Click to display a search When the user has to do extra actions to achieve results, it reduces the effectiveness of using the site or filling out the form. If the search field is hidden and only shows up when the icon is clicked — to the user it means that there is no search on the site. If something is hidden — it's not there.

Click

Search...

It is bad when the search field is hidden behind the icon and is only displayed when the user clicks on it.

Search...

The search field is immediately available on the page without unnecessary clicks.

139

Inputs / Search

Web Interface Handbook

02

Search icon If the search is important on the site, it is even better to add an icon to the input field, this will emphasize the form and help the user better distinguish it when quickly browsing the site.

Type to search..

Without the search icon, the search input is just a field.

Type to search…

The search field with the icon becomes more visible.

140

Inputs / Search

Web Interface Handbook

03

Clear the query If the search results are displayed immediately on the page, it is a good idea to add an icon to erase the typed query in the input. This speeds up the work with the search and gives a clear understanding of how to remove its results. Undo action with one click is always a good solution.

Cookie

A search query cannot be erased in one click.

Cookie

The typed query can be erased in one click.

141

Inputs / Search

Web Interface Handbook

04

Search button An icon in a button without a label can be misleading. A label with text or an icon plus text is more familiar. A button with only an icon usually triggers a toggle action, like opening a popup or switching from one state to another. It raises doubts if there is only an icon button to the right of the search field. Maybe there are additional search parameters hidden under the icon?

Search...

Raises doubts.

Search...

Search

It's familiar and clear.

142

Inputs

Web Interface Handbook

Phone

143

Inputs / Phone

Web Interface Handbook

01

Phone format It causes problems when a strict format is required in the phone number input. The user should be able to enter his number the way he is used to writing it down. If he is used to separating characters with spaces — that's fine. If he is used to putting hyphens — that's fine.

Phone

+1 (555) 123-45-67

It's not good to force the user to enter a phone number only in a specific format.

Phone

1 555 123 45 67

The user types his number from memory as he likes or copy/paste it from the contacts as it is written there.

The computer must do its job and be able to recognize phone numbers with spaces, with hyphens, with brackets, with a country code, and without a country code. And be able to determine, regardless of the format, the correctness of the data entered. Don't make the user struggle with input errors. He will just leave and won't continue filling out the form.

144

Inputs / Phone

Web Interface Handbook

02

Country code Sometimes it is important to get a phone number in international format with a country code. Especially when you need it for two-factor authorization or for sensitive financial transactions. In this case, the free input format may not work, as there is a chance that the user will enter the number in a format other than international. The straightforward solution is to split the input field into two fields: one with a country code and one with a phone number without a code. This is a bad solution. We might get the country code right, but the second part can have the wrong data. People will just put in this second field a phone number as they have it with or without a code.

Phone

Phone

+44

+44

It's not good to separate the phone input into the country code and the number itself.

It is good to give a placeholder with expected data and keep a single field with free number entry.

It's a good idea to give a placeholder with expected data. If we expect a phone number in international format, a hint with a plus sign and an automatically detected country code will obviously help with correct entry. The user can type the rest of the number however he wants: with spaces, with hyphens, with brackets etc.

145

Inputs

Web Interface Handbook

Date & time

146

Inputs / Date & time

01

Web Interface Handbook

Date of birth One of the principles of a good form is how quickly it can be filled out. If the date of birth field consists of three selects with a choice of day, month, and year, the speed of entry is greatly reduced. The user is forced to scroll through large lists. It's always faster to type the day and year than choose from lists. For months, there are only 12, it's not a hard list to select. So, for the day and year, text inputs are fine, and for the month you can use select.

Date of birth

01

January

Date of birth

2021

01

Complex input that takes up a lot of the user's time.

January

2021

The perfect form for entering the date of birth.

A single date field is not the best solution because of formatting issues. The date format may vary from country to country. Unfortunately, a computer can't help either. The date of birth 12.4.1987 cannot be recognized automatically. The number 4 can be both day and month.

Date of birth

mm.dd.yyyy

The strict format makes input difficult.

Date of birth

01

January

2021

The perfect form for entering the date of birth.

147

Inputs / Date & time

02

Web Interface Handbook

Calendar The calendar is an awkward control for selecting dates that are not relevant to the current month. Forcing the user to scroll through several months, much less years, in a small calendar is always a bad choice.

Date

Date

mm.dd.yyyy

01

Calendar is an inconvenient control, which is difficult to use.

January

2021

The perfect form for entering the date.

There is a simple rule for the calendar: the date selection should refer to the current month or at most to the previous and next month. For example, when you want to choose a convenient delivery date in the coming week. In that case, the calendar is quite a good solution. Especially if it is immediately visible to the user without additional clicks.

Delivery date

mm.dd.yyyy

Delivery date < Mon

The calendar is hidden, you need to make an extra click on the icon and only then select the date.

>

January 2021 Tue

Wed

Thu

Fri

Sat

Sun

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

The calendar immediately shows the information you need and allows you to make choices.

A calendar is primarily a visualization of data. It is a pattern for showing information in a convenient way: which days are busy or free, which days have tasks, and which have not yet. Use the calendar as a control, especially in forms, with great care.

148

Inputs / Date & time

03

Web Interface Handbook

Selecting a period One of the cases where the calendar is suitable as a control is the selection of the date period: from the start to the end date. In such a selection, the visibility of the date display is important and the calendar does the job. It would be good not to go overboard with redundancy and simplify the period selection form as much as possible.

Report period

Report period

—

From

To

Calendar icons create noise and don't make sense.

From

—

To

When you click on the date field, a popup calendar is shown immediately. The calendar icon is not needed.

There is another reasonable pattern for period selection: show the dates as a single text plus a calendar icon. In this case, the period looks as a whole and is better readable. When you click, you can show an expanded calendar, for example, with the last three months expanded.

Report period

Feb 1, 2021 — Feb 15, 2021 Period as a single line.

It's an interesting solution, but not perfect. The problem is the calendar. It's not easy to choose a start date and end date. Everyone is always confused: have I already selected the end date or am I still selecting the start date? One field for the start date and one field for the end date is the best solution possible. The interface should be as unambiguous and predictable as possible. Complicated controls that combine a selection of different things are a less efficient solution in advance.

Report period

Feb 1, 2021

—

Feb 15, 2021

The best solution is a predictable interface.

149

Inputs / Date & time

04

Web Interface Handbook

Time You can see a lot of attempts and variations to come up with time controls. This includes choosing the hours and minutes with the select field. These are unusual controls that look like clocks. There are even sliders to select the time.

Time

Time

00

00

2:45

Too bad. You'll have to go through long lists and miss choices, especially on small screens.

If there is a value, it is hard to change it. It is not always obvious whether hours or minutes have been entered.

The simplest solution is to type the hours and minutes in two different input fields. Just text inputs. This is the fastest and most unambiguous way.

Time

Time

Hours

Minutes

Perfect.

Hours

-

am

Minutes

Perfect, if am/pm is needed.

150

Buttons

Web Interface Handbook

Buttons

151

Buttons

Web Interface Handbook

In addition to the usual UI actions, buttons are a critical element of business. When buttons are the actions of buying, going to registration, etc. Not just the effectiveness of a site or app, but the actual revenue and success of the business behind the interface depends on these actions. This chapter describes how to work with buttons, their style, states, sizes, and how to create typical patterns to make buttons work. The entire business depends on how effectively and quality buttons are designed in your project. Button clicks are essentially the most real feedback from the users of your project. If the design is done well, you'll see it in the button clicks as the brightest indicator of analytics.

152

Buttons

Web Interface Handbook

Competition

153

Buttons / Competition

01

Web Interface Handbook

Fighting for attention It's not good when buttons fight for the user's attention with their brightness and contrast. The interface always has a primary and a secondary. Also with the buttons. It's better to separate the primary from the secondary, so that the secondary gets a little less attention.

Save

Cancel

The buttons compete with each other for the user's attention, although the Cancel action is secondary.

Save

Cancel

It is clear which button is more important.

When the buttons are the same color, but bright and contrasting to the whole interface, they still take too much attention. It is better to reduce their brightness or give them a lighter style.

Save

Cancel

Both buttons have too much contrast.

Save

Cancel

The user can find the main thing based on the meaning of what is written, not on the color. It's fast.

154

Buttons / Competition

02

Web Interface Handbook

Create the difference Sometimes it is not easy to understand which button is the primary and which is the secondary. Both actions have value. In this case, one of the actions can be designed stylistically differently. For example, by making one of the buttons as a link.

Start now

Contact sales

The buttons compete with each other for the user's attention.

Start now

Contact sales >

Differences in style, help to see the difference in meaning.

A good way to emphasize the main button is to add an icon for the button. This makes the primary button even more obvious.

Checkout

View cart

Not bad, but it could be better.

Checkout

View cart

The icon emphasizes what is important and helps the user make a decision faster.

155

Buttons / Competition

03

Web Interface Handbook

Call-to-action A call-to-action button doesn't have to be a button. Especially if there are several CTA buttons on the page. They take up too much attention and the user subconsciously abstracts from them and stops noticing. A large, brightly colored link often works more effectively than a huge button, and it looks more aesthetically pleasing and balanced in the design.

Start now CTA button as a button.

Start now » CTA button as a link.

156

Buttons

Web Interface Handbook

Style

157

Buttons / Style

Web Interface Handbook

01

Uniform buttons Unity of style is one of the basic rules of design. It is better to use the same border radius, the same shadow style, etc. on all buttons. Otherwise, the buttons look messy, sloppy and ruin the whole impression of the design.

Save

Cancel

Buttons have different border radius.

Save

Cancel

Both buttons are rounded.

Save

Cancel

Unity of style with the same border radius.

Save

Cancel

Both buttons have a shadow.

158

Buttons / Style

Web Interface Handbook

02

Optical adjustment If there is a caret icon to the right of the button label, it is better to reduce the right padding of the button. This works with vertical icons.

24

24

24

Button

20

Button

Visually, the padding on the right side looks too big.

It looks balanced with reduced padding on the right.

Square, round, and horizontally stretching icons usually don't require optical adjustments.

24

24

Button

The rectangular icon creates too small an optical illusion and can be ignored.

159

Buttons / Style

Web Interface Handbook

03

Destructive button The destructive action should always be secondary and have less contrast than the primary action. This action does not need to be bright as it increases the risk of mistakes and accidental clicks.

Save

Delete

Destructive action draws more attention to itself.

Save

Delete

The destructive button style is quiet and draws less attention.

In fact, the destructive button does not even have to be red at all. Delete, cancel is always a secondary action. So it might be a more low-key and quieter button.

Save

Delete

Save is the primary and Delete is secondary action. Accidental clicks will be minimized.

160

Buttons / Style

Web Interface Handbook

04

Ghost button The button must be shaped and look like a button. Even if this is a ghost button, it shouldn't really like a ghost.

Save

Save

The button does not look like a button. It's hard to say if it's even a link.

That's a real button. Its purpose is obvious.

Sometimes not all actions need to appear as buttons. That's okay. It's just important to try to make a link or button look like a clickable item.

Chekout

View cart

"View cart" looks like just text. It is not obvious that it can be clicked.

Chekout

View cart

"View cart" looks clickable.

161

Buttons

Web Interface Handbook

States

162

Buttons / States

Web Interface Handbook

01

Disabled state A button that has a colored background or border in the disabled state must get a gray background. Otherwise it will be visually seen as not disabled.

Default state

Default state

Button

Button

Button

Disabled state

Disabled state

Button

Button

Button

Color is a powerful tool to get attention, and even muted it creates the false impression that the button can be pressed.

Button

Button

Better. It is always clear that the button in the disabled state has a different style and is the same with all buttons in this state.

Same with outline and ghost buttons. Color is too powerful a tool and even with reduced transparency a colored button with disabled state doesn't look off.

Default state

Button

Default state

Button

Disabled state

Button

Button

Button

Disabled state

Button

The red outline button may not seem disabled.

Button

Button

Regardless of the type, the buttons have the same disabled style.

163

Buttons / States

Web Interface Handbook

You don't need to complicate styles and make different tones for each disabled state on different backgrounds. A single style for all types of buttons with reduced transparency is enough. That way they'll look natural on any background.

Button

Button

Button

Button

Button

Button

Make buttons with disabled state have transparent backgrounds. Then they will work well on any background.

164

Buttons / States

Web Interface Handbook

02

Hover state You don't need to change the color to a brighter shade for the hover state. The button should not change its appearance significantly, because the hover state is just an indication of an intermediate state and it doesn't need much emphasis. It is better to make the color of the button a little darker and this will already be enough to indicate the hover state.

Default state

Button

Default state

Button

Hover state

Button

Button

Button

Hover state

Button

The colors are bright and contrasting when hovering.

Button

Button

The background is a little darker on the hover state.

With dark and black buttons you have to do the opposite. The color should be a little lighter on the hover state.

Default state

Button

Button

Hover state

Button

Button

The dark button has a lighter background on hovering, while the white or transparent button has a slightly darker one.

165

Buttons

Web Interface Handbook

Sizes

166

Buttons / Sizes

Web Interface Handbook

01

Small button It is better to increase the font size in small buttons. This makes the button label more readable. Although in general, it is questionable the use of small buttons. They are difficult to click by cursor or tap by finger on mobile.

Button

The font size of the button is too small, it is inconvenient to read.

Button

That's better. Even though the button is small, but thanks to the size of the font, the readability is good.

167

Buttons / Sizes

Web Interface Handbook

02

Big button Big buttons with a huge font size in them usually look out of proportion to the overall design and does not solve any problem. It is enough to make the font size slightly larger than the regular button.

Button The font size is too large, most likely it will be disproportionate to the surrounding text size on the page.

Button

The font size in the big button is slightly larger than in the regular button.

168

Buttons / Sizes

Web Interface Handbook

03

Button height If the button is to the right or left of the input, it must be the same height as the input. This simple rule should be considered at the design stage of the interface and create all the inputs and buttons of the same height.

Button

The input and button have different heights. The unity of style is broken.

Button

The input and button are the same height.

169

Buttons

Web Interface Handbook

Patterns

170

Buttons / Patterns

01

Web Interface Handbook

Destructive button location It is better to place the destructive action in the opposite side from the primary action to prevent accidental clicks.

Save

Delete

Cancel

There is a high chance of accidental clicks on Delete.

Save

Cancel

Delete

It's better, now the destructive action will always be conscious.

171

Buttons / Patterns

02

Web Interface Handbook

Buttons in a column Bright buttons in the column increase noise, take up too much attention and reduce readability of the data.

John Smith

[email protected]

Edit

Rosaline Francis

[email protected]

Edit

Adam Mellow

[email protected]

Edit

Too much attention for the "Edit" buttons it makes it difficult to read data in the table.

John Smith

[email protected]

Edit

Rosaline Francis

[email protected]

Edit

Adam Mellow

[email protected]

Edit

This is better, now the attention to the buttons is reduced.

John Smith

[email protected]

Edit

Rosaline Francis

[email protected]

Edit

Adam Mellow

[email protected]

Edit

Even better, even less attention, even more readable data and kept the the "Edit" action clear thanks to the color emphasis.

John Smith

[email protected]

Rosaline Francis

[email protected]

Adam Mellow

[email protected]

Quite good. The role of the action is combined with the name of the user and clicking on it will open an edit form.

172

Color

Web Interface Handbook

Color

173

Color

Web Interface Handbook

This chapter covers the basic principles of creating a color palette for a project and the basics of building a dark design theme. Color in design is not only an expression of style and mood. It's also a utility for creating a lot of UI elements. The quality and effectiveness of a design depends on the right color palette.

174

Color

Web Interface Handbook

Palette

175

Color / Palette

Web Interface Handbook

01

Creating a palette A small number of colors is enough to create a good and solid color palette of the interface. Black, white and a few base colors.

Black

Burnt

Bdazzled

Sienna

Blue

White

A palette of base colors.

In addition to the base colors, you will need shades of these colors to create your design. Usually three to seven shades are enough. If more is required, that's fine. It all depends on the design goals and visual style. The shades of the base color are found by mixing with white or black. If necessary, you can fine-tune the Saturation parameter for shade harmony. For black shades, the easy way is to first find a base gray, which is within 40-60% of the lightness of black. And then from the base gray you can create a palette of grayscale shades. These are usually used for backgrounds, borders, and controls.

lighter

light

base

dark

darker

Shades of base colors.

176

Color / Palette

Web Interface Handbook

02

States & controls In addition to the base colors often you need a palette of colors for states, notifications, buttons and other controls. Usually there are three states Active, Negative and Positive. Active — links, buttons, call-to-action elements. Negative — error messages, accents, notification. Positive — successful messages and other positive notification. The colors of the states and controls can be the same as the base colors, or they can be different if the base colors do not contain enough options to reflect all the states. As a rule, the colors of the states and controls are slightly brighter and more saturated than the base colors. Blue, green, and red state colors - can often be out of harmony all together. That's okay. Their role is auxiliary. They do not even have to be in harmony with the base colors of the site. And they are unlikely to appear on the screen together three at once, so their disharmony will not affect the overall perception of design. But of course, the tonality of color states should still be close to the base colors. The balance is important so that in any state the design is not screaming and tasteless.

active

negative

positive

Color palette of states and controls.

177

Color / Palette

Web Interface Handbook

As with the base colors, the additional colors of the states and controls also need to be tinted. Shades are used for borders, backgrounds, and text colors in different states. The shades of these colors are found by mixing with white or black. If necessary, you can fine-tune the Saturation parameter for shade harmony.

lighter

light

base

dark

darker

Shades of states and controls colors.

178

Color / Palette

Web Interface Handbook

03

Warning The "Warning" state makes no sense and does not need to be done in the design.

warning

The color and state of "Warning" makes no sense.

active

negative

positive

Active, positive, and negative colors are enough for all needs.

179

Color

Web Interface Handbook

Dark theme

180

Color / Dark theme

01

Web Interface Handbook

Grayscale without blue The dark mode interface of Mac OS and Windows operating systems has a black color and its shades close to pure black. Therefore, for dark theme of the website, it is better to avoid mixing blue, green, and so on in grayscale colors. Such a theme looks alien to the interface of the system

The base color dark theme and other colors with a mix of blue.

The base color of the dark theme and other colors are closer to pure black and its shades.

181

Color / Dark theme

02

Web Interface Handbook

Levels The easiest way to build a color difference in a dark theme design is to use depth levels. The closer an object or layer is, the lighter it is. The farther or deeper, the darker it is. And all depth levels are on a base background.

base background

depth-40

depth-30

depth-20

depth-10

depth-5

Colors based on depth levels.

182

Color / Dark theme

Web Interface Handbook

Depth levels allow you to simplify the color construction of a dark theme. You don't have to think about how to rearrange the colors of a regular light theme, how to invert or replace them. Just decompose everything in the design into layers and imagine which objects are closer and which are deeper.

base background

box of cards (depth-30)

card (depth-10)

card (depth-10)

Build design layers with depth in mind.

183

Color / Dark theme

03

Web Interface Handbook

Text Any pure white text and headings are better muted in a dark theme. This will reduce the contrast of the text and it will be more comfortable to read. It is sufficient to reduce the transparency of the text to 85-95%.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt.

Text with pure white is too contrasty and hard to read.

White text with 90-95% transparency is more comfortable to read.

184

Color / Dark theme

04

Web Interface Handbook

Buttons In a light theme, buttons can be bright and contrasty, especially if they are call-toaction buttons. In a dark theme, you should be more careful with contrast. Strong and bright accents make it hard to read and understand the information in a dark theme. Therefore, it is worth muting the bright colors of the buttons.

Button

The contrast between the button and the background is too strong.

Button

The muted color of the button will make it harmonious and balanced in a dark theme.

Buttons with white or light gray backgrounds by default will have too much contrast and accent in a dark theme. That's why it's better to replace their background color with a neutral gray, which will contrast less.

Button

The white button has a high contrast.

Button

Neutral gray reduces contrast.

Also for light buttons is a good technique to make them ghost or outline in a dark theme. A light border is sufficient design to make the button stand out among other elements.

Button

The white button has a high contrast.

Button

Ghost or outlined button has a reduce contrast.

185

Color / Dark theme

05

Web Interface Handbook

Inputs For input fields, it is better to reduce contrast, as well as buttons and other design elements. This makes it easier to fill out forms in a dark theme. Thus input fields do not stand out in the interface and do not take away all the attention with their brightness.

[email protected]

The input field has too much contrast.

[email protected]

Reduced contrast for inputs works better.

186

Color / Dark theme

06

Web Interface Handbook

Brightness Reducing contrast in a dark theme works for all design elements, including images and backgrounds. High contrast of images or backgrounds makes it harder to read the text and understand the information on the site. So a good trick is to make images with little transparency, this will automatically lower their contrast. And for bright backgrounds should lower the Lightness and Saturation parameters of their color.

The image may be too contrasty and interfere with other information.

The background is too bright.

Reducing contrast helps to balance the design as a whole.

Reducing the contrast of the background helps you better read the information on it.

187

Color / Dark theme

07

Web Interface Handbook

Shadows The regular shadow settings in the light theme are not suitable for the dark one. They are faintly visible on dark backgrounds. Colored shadows create a strange glow on dark and their use is also questionable.

Regular shadows are faintly visible, and colored shadows create an alien glow.

It is best to use shadows with pure black color and significantly increase the saturation of the shadows, i.e. make them less transparent. In this case, they will look clearly and distinctly on dark backgrounds.

It is good to use rich shadows in a dark theme.

188

Color / Dark theme

07

Web Interface Handbook

Palette The color palette for the dark theme is different from the light one. The dark theme builds on the color differences in the depth of the design layers. The accent or primary colors are more muted. Also, three shades are enough for the base colors in the dark theme, instead of five or seven in the light theme. Below you can see an example of a dark theme palette that shows the base background color and colors for displaying layer depth. Black and muted white for borders and other auxiliary needs. As well as accent colors for buttons and other elements that need attention.

base background

depth-40

black

white depth-30

accent blue depth-20

depth-10

accent green

depth-5

Example of dark theme palette

189

Patterns

Web Interface Handbook

Patterns

190

Patterns

Web Interface Handbook

This chapter describes typical design patterns. Such as navigation, cards, slideshows, tabs and accordion. These are design components that the user often interacts with and can affect the user's overall experience with the design. So a lot depends on how well these components are done. Including the overall experience of the site or application, its effectiveness, and the all-important metrics of usage.

191

Patterns

Web Interface Handbook

Navigation

192

Patterns / Navigation

01

Web Interface Handbook

Expanded footer The menu at the end of a page or application interface is an important part of navigation. If the user scrolls to the end of the page, it's good to have a map of actions instead of a dead end. An expanded menu in the footer does just that and helps the user go further around the site or app. Therefore, you should not ignore the footer menu and make it truncated and simple. It is better to expand all possible items of navigation and show them at once. This way it will be easier for the user to find something inside the site.

Footer menu simply duplicates the main menu.

The items of footer navigation are expanded and show a map of the site.

193

Patterns / Navigation

02

Web Interface Handbook

Sticky navigation Many sites and applications use sticky navigation. When users scroll through a page, the menu is fixed at the top edge of the browser and moves with the content. Sticky navigation is about solving a non-existent problem and creating a new problem. 1. It overlaps the content. Especially on small screens. It's terrible. 2. Users already know that the menu is at the top of the page and will scroll up if necessary. This is not a problem. 3. Content should have call-to-action or tell users to navigate all the way to other sections of the site or app. If the content doesn't contain onward direction, the navigation won't help. 4. At the bottom of the page should be pointers to where the user should go next. It's a good pattern to show the user a map of where to go next instead of a dead end. So it is better not to use sticky navigation in any case or in any way.

Sticky navigation is always a bad pattern.

Navigation that doesn't change position when user scrolls is a good thing.

194

Patterns / Navigation

03

Web Interface Handbook

Burger menu icon Users don't recognize the "burger" icon as a control to show the menu. And they can't find the navigation on the site or in the app because of it. Despite the fact that this has long been a common pattern of showing hidden navigation. This problem is especially evident in desktop versions of sites, when users do not expect any hidden menus and the shape of three dashes "burger" just do not perceive them as a control. Expecting a normal, expanded menu on the page of the site. On mobile versions, the "burger" icon is a more expected pattern, but nevertheless can also go unnoticed. In reality, sites drop significantly in the number of views and conversions within the site if the "burger" icon is not emphasized enough and looks ambiguous. If you add the word "Menu" or something similar next to the "burger" icon, the problem is solved. The label gives unambiguity and clearly indicates that it is a menu.

Menu

The three dashes are incomprehensible to users.

The menu icon with the label gives an unambiguous understanding.

195

Patterns / Navigation

04

Web Interface Handbook

Read next It is bad when there is no navigation at the end of a blog post or article. It's always better to navigate to the next or previous post. It can be just a header with an arrow or even a header with the image that tells the user what to read next. In fact, this is true of almost any content on the site, not just blog posts or other texts. It's always good to show the user related pages of the site or something else on topic. This navigation greatly increases page views and visitor engagement.

It's bad when there's a dead end at the end of a post or article. It's good to have navigation to the next or previous entry at the end of the page.

196

Patterns / Navigation

05

Web Interface Handbook

Mega menu A good solution is to use Mega menu instead of dropdowns, especially if they are multi-level. Mega menu immediately shows all internal navigation items and helps you conveniently group them into specific categories. Which makes it much easier to navigate the site. The user always has a map at hand. Also, there is no problem if the mega menu has two or more rows of links and categories. It's still better than wandering through dropdowns.

Dropdowns for navigation are not the best solution, especially if they are multi-level.

Mega menu is better than dropdowns.

197

Patterns / Navigation

06

Web Interface Handbook

Search is the best navigation The best way to navigate the site is to search. Filters, categories, and sorting are secondary and should only help the user filter out the results he finds. Even if the page contains a small number of elements, the search will be relevant the user will find what he needs faster and easier.

Display items without search only with navigation by category. Display items with search and in addition navigation by category.

198

Patterns

Web Interface Handbook

Cards

199

Patterns / Cards

Web Interface Handbook

01

Spacing system Good card design starts with building a system of spacing within it and spacing between its elements.

24

24

20

20

28

The system always gives quality.

200

Patterns / Cards

Web Interface Handbook

02

Heading position The heading in the card will be disconnected from the meaning if it is separated by an image from the text. It is better to place the heading after the image, to connect it to the text or other main content of the card.

The headline above the image.

The heading below the image.

201

Patterns / Cards

Web Interface Handbook

03

Overflow The fewer elements in a card, the easier it will be to read. Cards with a lot of elements create too much noise individually, and in a group merge into a single noisy lump. In this flow of small elements, the user will not be able to find the main thing. The simpler the card and the fewer elements it contains, the more effective its role.

Less is better.

A card has a lot of elements.

202

Patterns

Web Interface Handbook

Slideshow

203

Patterns / Slideshow

01

Web Interface Handbook

Users don't scroll through slideshow Users do not scroll through images in slideshow. If something is hidden, it's not there. Of course, users don't have time to wait for an animated slideshow to change frames. So in real life, slideshows are simply ignored, especially if it's a Hero or Header element. The user simply scrolls down the page looking for what they want, especially on mobile. So the best solution is to expand the slideshow into image and caption blocks. This way users will always see what's hidden inside.

Users don't scroll through slideshow, bad pattern.

Expanded blocks instead of slideshow, good pattern.

204

Patterns / Slideshow

02

Web Interface Handbook

Slideshow navigation There are cases where a slideshow makes sense, for example, it is an acceptable pattern when displaying images on a product page. In this case, it is better to show slide thumbnails to navigate through the slideshow. This is a convenient and obvious interface. Dots navigation should always be avoided. Although this is a frequently used pattern, most users don't see dots as navigation.

Bad navigation through the slides.

The slide thumbnails are good navigation.

205

Patterns

Web Interface Handbook

Tabs & accordion

206

Patterns / Tabs & accordion

01

Web Interface Handbook

Tabs on mobile Tabs don't work well on small screens. Therefore, when the screen is smaller, it is best to turn the tabs into an accordion view with collapsible blocks.

-

+

Tabs do not work well on small screens.

+ +

Tabs turn into an accordion on small screens.

207

Patterns / Tabs & accordion

02

Web Interface Handbook

When to use Accordion When something is hidden, it's not there. So basically any pattern that hides something and requires some action to open/expand it is potentially a bad solution. Accordion on large screens looks questionable more often than not. Users are much more comfortable scrolling through the page looking for information than clicking on the small controllers of the Accordion blocks, looking through each panel in sequence. Terrible pattern. So on large screens, it's better to expand the accordion panels and show their content immediately without hiding them. Better yet, add a search or table of contents. Or both together. This is a good solution. It makes no sense to save space in height on big screens.

+ + + +

Accordion on big screens is not the best solution.

Expanded blocks are always a good solution, especially if there is a content search or table of contents.

208

Patterns / Tabs & accordion

Web Interface Handbook

On small screens, both solutions make sense. Content that is immediately shown is always a good thing. Accordion, on the other hand, is suitable as a solution when you want to show the main thing and it's immediately expanded, but also to show on demand the secondary things that may be of little importance to the user. For example, on a product page: its description is important and should be shown immediately in the Accordion expanded panel. Technical specifications and other less relevant information can be hidden in other panels

-

+ + +

Accordion on small screens is sometimes okay. Expanded blocks on small screens are quite fine.

209

Patterns / Tabs & accordion

03

Web Interface Handbook

Active state in tabs and segments The display of active state in tabs and segments, often raises questions. It can be difficult to understand which segment is currently active. There are three ways to highlight the active state: 1. Color 2. Style 3. Shape Color is always a good indication of the active state. There is only one trick, if the inactive is not muted, confusion appears. So inactive must be muted. Then highlighting with color the active state always works.

Reader

Author

It's hard to understand which segment is active.

Reader

Author

It is clear which segment is active when inactive is muted.

The difference in style with the border, shadow, etc., also helps to make the active one stand out. The difference needs to be really significant.

Reader

Author

The style difference is not enough.

Reader

Author

The difference in style is quite significant.

210

Patterns / Tabs & accordion

Web Interface Handbook

Sometimes the style has enough difference, but something goes wrong. The logic is simple: the active state should be highlighted, the inactive muted.

Reader Author

Reader Author

Although there is a difference in style, the logic is wrong. Active is muted, inactive is highlighted. It should be the other way around.

There is logic. The active state is highlighted.

And finally, the third way: shape difference. If the shape of the active state is clearly different, it is always a good and unambiguous indicator.

Reader

Author

Confused. There is no difference in shape.

Reader

Author

The difference in shape gives an understanding of the active state.

211

Web Interface Handbook imperavi.com/books

Aleksei Baranov 2021