100% found this document useful (2 votes)

2K views

Web Interface Handbook

The document discusses spacing in typography. It recommends using increased spacing above headings to better structure text and separate sections. For smaller headings, it is best to use smaller spacing at the bottom to connect the heading visually to the following text. Consistent and thoughtful use of spacing helps improve readability and the overall user experience.

Uploaded by

Ada

Available Formats

Download as PDF, TXT or read online on Scribd

100% found this document useful (2 votes)

2K views

Web Interface Handbook

Uploaded by

Ada

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 212

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 Web Interface Handbook

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

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. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

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

The quick brown fox jumps over the lazy dog

The heading has a larger spacing at the top.

7
Typography / Spacing Web Interface Handbook

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

The quick brown fox jumps over the lazy dog

The small heading is too far from the text.

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

The small heading is close to the text that follows.

8
Typography / Spacing Web Interface Handbook

03
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

The big heading is too close to the text.

The quick brown fox

jumps over the lazy dog
40

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

9
Typography / Spacing Web Interface Handbook

04
Spacing between paragraphs
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
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
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.

Eligible spacing between paragraphs.

10
Typography / Spacing Web Interface Handbook

05
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

Unequal spacing before and after the list breaks the rhythm.

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

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

11
Typography / Spacing Web Interface Handbook

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

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.

Increased spacing after the image.

13
Typography / Spacing Web Interface Handbook

07
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.
20

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

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

15
Typography / Spacing Web Interface Handbook

08
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

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.

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.

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

17
Typography Web Interface Handbook

Images

18
Typography / Images Web Interface Handbook

01
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 Web Interface Handbook

02
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 The heading is

and separates the text. 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 Attention turns to the text.

the text from the heading.

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 Web Interface Handbook

03
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 The image with the caption makes
no sense. sense.

22
Typography / Images Web Interface Handbook

04
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 Web Interface Handbook

05
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 It works well as a cover.

layout.

24
Typography / Images Web Interface Handbook

06
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 The vertical image

to the text column. creates balance.

25
Typography / Images Web Interface Handbook

07
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 The floating image on the

causes disharmony. right looks balanced.

27
Typography / Images Web Interface Handbook

08
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 Web Interface Handbook

01
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 Hierarchy creates structure.

the design look flat.

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 1
Heading 2 Heading 2
Heading 3 Heading 3
Heading 4 Heading 4

A weak heading hierarchy has A strong heading hierarchy

poor contrast. 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

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

A strong heading hierarchy has a good

contrast.

32
Typography / Headings Web Interface Handbook

02
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 Web Interface Handbook

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

The quick brown fox

A large heading without bold

looks contrasting.

34
Typography / Headings Web Interface Handbook

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

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

The quick brown fox

The color creates the contrast of the heading.

35
Typography / Headings Web Interface Handbook

05
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 Web Interface Handbook

06
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 Web Interface Handbook

07
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

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

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 Web Interface Handbook

01
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

The line spacing value is too small.

Size 16px / Line spacing 1.5

Eligible line spacing.

40
Typography / Text Web Interface Handbook

02
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 x-
height.

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

For Source Sans Pro line spacing 1.5 looks perfect.

Montserrat / Size 16px / Line spacing 1.6

Montserrat has increased x-height and

line spacing of 1.6 may be preferable.

41
Typography / Text Web Interface Handbook

03
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

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 Web Interface Handbook

04
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

Size 12px / Line spacing 1.5

No special line spacing is needed for small text

Size 12px / Line spacing 1.5

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 Web Interface Handbook

05
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 Web Interface Handbook

06
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

1s
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
Light travels
accumsan tincidunt. Maecenas tincidunt, velit ac porttitor
to the Moon
pulvinar, tortor eros facilisis libero, vitae commodo nunc
quam et ligula.

White dwarfs

Donec libero turpis, lacinia nec leo sit amet, dignissim dignissim
lacus. Nunc semper, leo vel bibendum dapibus, justo lectus dapibus Aenean ullamcorper urna tortor,
libero, vitae volutpat mi justo eget sem. Curabitur sagittis, dui vitae ut elementum felis volutpat
accumsan dictum, leo metus lobortis leo, ut sagittis lorem sem eu faucibus. Interdum et malesuada
elit. Nulla facilisi. fames ac ante ipsum primis in
faucibus. Proin euismod lacus
Mauris imperdiet diam ac maximus auctor. Donec sed nisl nibh. diam, a faucibus dui ultrices in.
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.

The text can be interesting

46
Typography / Text Web Interface Handbook

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean ullamcorper urna tortor, ut Maecenas varius tortor nibh, sit amet tempor nibh finibus
elementum felis volutpat faucibus.
et. Aenean eu enim justo. Vestibulum aliquam hendrerit
Interdum et malesuada fames ac ante
ipsum primis in faucibus. Proin euismod molestie. Mauris malesuada nisi sit amet augue accumsan
lacus diam, a faucibus dui ultrices in. 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 Aenean ullamcorper urna tortor, ut
elementum felis volutpat faucibus.
et. Aenean eu enim justo. Vestibulum aliquam hendrerit
Interdum et malesuada fames ac ante
molestie. Mauris malesuada nisi sit amet augue accumsan ipsum primis in faucibus. Proin euismod
tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, lacus diam, a faucibus dui ultrices in.

tortor eros facilisis libero, vitae commodo nunc quam et

ligula.

Looks familiar.

47
Typography / Text Web Interface Handbook

08
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 Web Interface Handbook

01
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 Web Interface Handbook

02
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

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 Web Interface Handbook

01
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 Web Interface Handbook

02
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 Web Interface Handbook

03
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 Web Interface Handbook

04
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 Web Interface Handbook

05
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 Web Interface Handbook

01
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 Web Interface Handbook

02
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 Web Interface Handbook

03
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 Web Interface Handbook

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

An underlined link the same color as

the text looks invisible.

A link with a color different from the

text is instantly visible.

64
Typography / Links Web Interface Handbook

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

A link without an underline looks

strange.

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 Web Interface Handbook

03
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 Web Interface Handbook

01
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 The card has a point of focus and
point. it is directed at the main thing.

70
Layout / Principles Web Interface Handbook

02
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 Web Interface Handbook

03
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 The layout design with one line of force.
lines of force.

72
Layout / Principles Web Interface Handbook

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

Button Button
16

The hard grid limits the design and if the A soft grid gives you more freedom when
height of the elements is not a multiple of designing web sites and web apps.
the grid unit, that's a problem.

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 The sidebar has nothing to do
grid. 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 The header as well as the footer
into the page grid. 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 It's okay to combine grids
grid. 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 It's good to make a grid if the

grid. 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 Web Interface Handbook

01
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 All fields are required, optional fields
fields. are removed from the form.

86
Forms / Required & optional Web Interface Handbook

02
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 Web Interface Handbook

03
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 Web Interface Handbook

04
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
Password *

Phone *

All fields are required, although the The form has the fields that are needed
Phone input does not make sense to to use the site.
use the site in the future.

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 The hint below the input field is also
readable. 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 Email

myemail.com myemail.com

The email is wrong. It seems you forgot to type @ in email.

The message simply points out the The message helps solve the problem.
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.

Email myemail.com

The email is typed incorrectly.

myemail.com

Password
Password
***
***
Password must be at least 8 characters long

Error messages are placed at the Error messages are shown in context.
beginning of the form.

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 The error message above the input
field. 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

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.

Email Email

Password Password

A button with a disabled state can tell The form definitely works, the button
that a form is not working. 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.

Password

The button is not aligned to the left

edge of the input fields.

Password

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 The button is visually highlighted.
controls.

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 The button to add data is to the right of
input field. 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.

Password

Forgot password?

The Forgot password link has no Forgot password is next to the password
context. 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.

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 Buttons in a row by priority of

unreadable. importance.

106
Forms Web Interface Handbook

Long
&
complicated
forms

107
Forms / Long & complicated forms Web Interface Handbook

01
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 Grouping fields with lines, borders or
groups. background.

108
Forms / Long & complicated forms Web Interface Handbook

02
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

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 Web Interface Handbook

01
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 Web Interface Handbook

02
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 Web Interface Handbook

03
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 Web Interface Handbook

04
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 Select...

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

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 Web Interface Handbook

05
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

The weird position of inputs and button All inputs and button have the same
in the horizontal form. 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.

Password

Radios First radio

Second radio

Example checkbox

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
John Smith

Input with low height and small text is It's good when the input is of a
always a bad choice. 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 The width of the inputs fits the format
and does not match the format of the of the data.
entered 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
aequitate, quam ob aliquam causam ista,
The textarea height is too low and the quae ab illo inventore veritatis et dolore suo
text is hidden behind the scroll.
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 Name

John Smi John Smi

The cursor is in the input but there is The state of focus shows what is now
no focus state. 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 The error message shows what is

wrong and how to fix it. 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 What is your full name?

John Smith John Smith

The label of input is too long. 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 Name

Your name John Smith

Email Email

Your email [email protected]

The placeholder does not give The placeholder helps to

an understanding of the format understand the format of the
of the data. It simply duplicates data.
the label of the input.

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 Country

Select... Finland

It's not good to make the user scroll It is good to automatically detect the
through a long list of countries. 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

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 It is good when the address form has
single input. 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 Country

Germany Germany

State (optional for non US)

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

137
Inputs Web Interface Handbook

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.. Type to search…

Without the search icon, the search The search field with the icon
input is just a field. 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 Cookie

A search query cannot be erased in The typed query can be erased in one
one click. 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... Search... Search

Raises doubts. 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 Phone

+1 (555) 123-45-67 1 555 123 45 67

It's not good to force the user to enter a The user types his number from
phone number only in a specific format. 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 It is good to give a placeholder with
input into the country code and the expected data and keep a single field
number itself. 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 Web Interface Handbook

01
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 Date of birth

01 January 2021 01 January 2021

Complex input that takes up a lot of the The perfect form for entering the date
user's time. 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 Date of birth

mm.dd.yyyy 01 January 2021

The strict format makes input difficult. The perfect form for entering the date
of birth.

147
Inputs / Date & time Web Interface Handbook

02
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 January 2021

Calendar is an inconvenient control, The perfect form for entering the

which is difficult to use. 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 Delivery date

mm.dd.yyyy < January 2021 >

Mon Tue Wed Thu Fri Sat Sun

The calendar is hidden, you need to 30 1 2 3 4 5 6

make an extra click on the icon and
only then select the date. 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 Web Interface Handbook

03
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 From — To

Calendar icons create noise and don't When you click on the date field, a
make sense. 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 Web Interface Handbook

04
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 If there is a value, it is hard to change

long lists and miss choices, especially it. It is not always obvious whether
on small screens. 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

- - - - am

Hours Minutes Hours Minutes

Perfect. 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 Web Interface Handbook

01
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 Save Cancel

The buttons compete with each other It is clear which button is more
for the user's attention, although the important.
Cancel action is secondary.

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 Save Cancel

Both buttons have too much contrast. 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 Web Interface Handbook

02
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 Start now Contact sales >

The buttons compete with each other Differences in style, help to see the
for the user's attention. 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 Checkout View cart

Not bad, but it could be better. The icon emphasizes what is important
and helps the user make a decision
faster.

155
Buttons / Competition Web Interface Handbook

03
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 Start now »

CTA button as a button. 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 Save Cancel

Buttons have different Unity of style with the same

border radius. border radius.

Save Cancel Save Cancel

Both buttons are rounded. 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 20

Button Button

Visually, the padding on the right side It looks balanced with reduced padding
looks too big. 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 Save Delete

Destructive action draws more attention The destructive button style is quiet and
to itself. 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. That's a real button. Its purpose is
It's hard to say if it's even a link. 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 Chekout View cart

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

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 Button

Disabled state Disabled state

Button Button Button Button

Color is a powerful tool to get attention, Better. It is always clear that the button
and even muted it creates the false in the disabled state has a different
impression that the button can be style and is the same with all buttons in
pressed. 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 Default state

Button Button Button Button

Disabled state Disabled state

Button Button Button Button

The red outline button may not seem Regardless of the type, the buttons
disabled. 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

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 Default state

Button Button Button Button

Hover state Hover state

Button Button Button Button

The colors are bright and contrasting The background is a little darker on the
when hovering. 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 Button

The font size of the button is too small, That's better. Even though the button is
it is inconvenient to read. 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 Button

The font size is too large, most likely it The font size in the big button is slightly
will be disproportionate to the larger than in the regular button.
surrounding text size on the page.

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 Button

The input and button have different The input and button are the same
heights. The unity of style is broken. height.

169
Buttons Web Interface Handbook

Patterns

170
Buttons / Patterns Web Interface Handbook

01
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 Web Interface Handbook

02
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 White

Sienna Blue

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.

base darker
lighter light dark

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 active negative positive

The color and state of "Warning" Active, positive, and negative colors are
makes no sense. enough for all needs.

179
Color Web Interface Handbook

Dark
theme

180
Color / Dark theme Web Interface Handbook

01
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 Web Interface Handbook

02
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 Web Interface Handbook

03
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 The quick brown fox

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

Text with pure white is too White text with 90-95% transparency is
contrasty and hard to read. more comfortable to read.

184
Color / Dark theme Web Interface Handbook

04
Buttons
In a light theme, buttons can be bright and contrasty, especially if they are call-to-
action 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 Button

The contrast between the button The muted color of the button will
and the background is too strong. 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 Button

The white button has a high contrast. 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 Button

The white button has a high contrast. Ghost or outlined button has a
reduce contrast.

185
Color / Dark theme Web Interface Handbook

05
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] [email protected]

The input field has too much Reduced contrast for inputs
contrast. works better.

186
Color / Dark theme Web Interface Handbook

06
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 Reducing contrast helps to

contrasty and interfere with balance the design as a whole.
other information.

The background is too bright. Reducing the contrast of the

background helps you better
read the information on it.

187
Color / Dark theme Web Interface Handbook

07
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 Web Interface Handbook

07
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 Web Interface Handbook

01
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 items of footer navigation are

the main menu. expanded and show a map of the site.

193
Patterns / Navigation Web Interface Handbook

02
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 Navigation that doesn't change position

bad pattern. when user scrolls is a good thing.

194
Patterns / Navigation Web Interface Handbook

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

The three dashes are incomprehensible The menu icon with the label gives an
to users. unambiguous understanding.

195
Patterns / Navigation Web Interface Handbook

04
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 Web Interface Handbook

05
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 Mega menu is better than dropdowns.
best solution, especially if they are
multi-level.

197
Patterns / Navigation Web Interface Handbook

06
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

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 Web Interface Handbook

01
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 Web Interface Handbook

02
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 Web Interface Handbook

01
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 Web Interface Handbook

02
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 Web Interface Handbook

03
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 Reader Author

It's hard to understand which It is clear which segment is

segment is active. 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 Reader Author

The style difference is not The difference in style is quite

enough. 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 There is logic. The active state

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

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 Reader Author

Confused. There is no The difference in shape gives

difference in shape. an understanding of the active
state.

211
Web Interface Handbook
imperavi.com/books

Aleksei Baranov
2021

The UI Professional's Design Manual (600+ Pages) 2022
100% (3)
The UI Professional's Design Manual (600+ Pages) 2022
321 pages
The One Act Play That Goes Wrong
100% (1)
The One Act Play That Goes Wrong
61 pages
UI UX Playbook
60% (10)
UI UX Playbook
19 pages
Giants in The Sky - Into The Woods PDF
100% (1)
Giants in The Sky - Into The Woods PDF
10 pages
Anastasia - Journey To The Past PDF
88% (8)
Anastasia - Journey To The Past PDF
8 pages
Minna No Nihongo Fukushuu Answers PDF
33% (15)
Minna No Nihongo Fukushuu Answers PDF
2 pages
Wicked - Dancing Through Life
100% (3)
Wicked - Dancing Through Life
7 pages
LETRS Unit 2 Session 1-8 Answers Quizzma
75% (4)
LETRS Unit 2 Session 1-8 Answers Quizzma
12 pages
Laying The Foundations Smaller Compressed
No ratings yet
Laying The Foundations Smaller Compressed
268 pages
Writing Down The Story of My Life - Junie B Jones
100% (2)
Writing Down The Story of My Life - Junie B Jones
10 pages
UI Design Principles: Learn To Create Beautiful and Usable Interfaces From Scratch
100% (2)
UI Design Principles: Learn To Create Beautiful and Usable Interfaces From Scratch
323 pages
Godfrey Selig - Secrets of The Psalms
92% (151)
Godfrey Selig - Secrets of The Psalms
138 pages
For Good - Wicked
100% (11)
For Good - Wicked
9 pages
James E.. Fifty Shades of Grey
89% (9)
James E.. Fifty Shades of Grey
258 pages
Design Systems
84% (25)
Design Systems
289 pages
Marina Budarina - UI Design Systems Mastery v3 (2023)
100% (1)
Marina Budarina - UI Design Systems Mastery v3 (2023)
360 pages
Noises Off Script
83% (30)
Noises Off Script
82 pages
Essentials of Ui Design
100% (3)
Essentials of Ui Design
105 pages
101 Dos & Don'Ts of UI Design
100% (1)
101 Dos & Don'Ts of UI Design
106 pages
Curses Hexes and Crossing A Magicians Guide X S. Connolly
92% (25)
Curses Hexes and Crossing A Magicians Guide X S. Connolly
142 pages
Form Design Patterns
100% (5)
Form Design Patterns
386 pages
Principles of Web Design
From Everand
Principles of Web Design
Brian D Miller
No ratings yet
Hack The Design System Idean
100% (1)
Hack The Design System Idean
228 pages
Fundamentals of Creating A Great UI - UX
100% (2)
Fundamentals of Creating A Great UI - UX
272 pages
The Complete Stories by Flannery O'Connor
92% (13)
The Complete Stories by Flannery O'Connor
309 pages
Book Ben Folds Songs For Silverman 1
100% (4)
Book Ben Folds Songs For Silverman 1
94 pages
Marcus T. Bottomley - Real Magick For Real Problems
93% (92)
Marcus T. Bottomley - Real Magick For Real Problems
64 pages
2024 – 2025 Newbies Guide to UI/UX Design Using Figma
From Everand
2024 – 2025 Newbies Guide to UI/UX Design Using Figma
Anthony E. Sanchez
No ratings yet
How To Design Better Ui Components
100% (2)
How To Design Better Ui Components
138 pages
Web Interface Handbook Preview
100% (2)
Web Interface Handbook Preview
18 pages
Toni Morrison The Bluest Eye 2007
96% (77)
Toni Morrison The Bluest Eye 2007
196 pages
Sondheim - Company (Vocal Score)
100% (12)
Sondheim - Company (Vocal Score)
228 pages
Designing for Emotion: Second Edition
From Everand
Designing for Emotion: Second Edition
Aarron Walter
No ratings yet
Free Sample - The UI UX Playbook
100% (1)
Free Sample - The UI UX Playbook
19 pages
The UI & UX Cheatsheet PDF
89% (9)
The UI & UX Cheatsheet PDF
25 pages
Invent With Idean Hack The Design System 1st Edition
100% (1)
Invent With Idean Hack The Design System 1st Edition
232 pages
Send in The Clowns
100% (4)
Send in The Clowns
4 pages
The Sound of Music-I Have Confidence-SheetMusicDownload
100% (1)
The Sound of Music-I Have Confidence-SheetMusicDownload
4 pages
How To Design Better UI Components Ebook Compressed 1
100% (2)
How To Design Better UI Components Ebook Compressed 1
138 pages
The UX UI Design Playbook
No ratings yet
The UX UI Design Playbook
14 pages
100 Practical Ui:Ux Tips
No ratings yet
100 Practical Ui:Ux Tips
25 pages
The Beginner'S Guide To: Spanish
91% (11)
The Beginner'S Guide To: Spanish
35 pages
Uiux Playbook Hacktack - Us
No ratings yet
Uiux Playbook Hacktack - Us
14 pages
Japanes e For Class VI Text Book: Japanfoundation
0% (3)
Japanes e For Class VI Text Book: Japanfoundation
20 pages
Ultimate Glossary Ux Ui Designers
100% (1)
Ultimate Glossary Ux Ui Designers
68 pages
Doobie Brothers Guitar Anthology
100% (26)
Doobie Brothers Guitar Anthology
88 pages
The Big Book of Folk Songs
88% (8)
The Big Book of Folk Songs
276 pages
Robin Williams Original Autopsy Protocol
100% (4)
Robin Williams Original Autopsy Protocol
7 pages
Psychology of User
No ratings yet
Psychology of User
94 pages
E Book - Dos and Don'ts For UI Design
60% (5)
E Book - Dos and Don'ts For UI Design
55 pages
2022 Guide To UX - UI Design in 45 Minutes For Beginners - A Quick Reference Guide To Intuitive User Experience and User Interface Designs
100% (6)
2022 Guide To UX - UI Design in 45 Minutes For Beginners - A Quick Reference Guide To Intuitive User Experience and User Interface Designs
137 pages
Uxpin Consistency Ui Design Creativity Without Confusion
100% (2)
Uxpin Consistency Ui Design Creativity Without Confusion
38 pages
InVision DesignSystemsHandbook PDF
100% (1)
InVision DesignSystemsHandbook PDF
222 pages
Blue Book of Heuristics and UX Tenets
100% (4)
Blue Book of Heuristics and UX Tenets
38 pages
Interaction Design & Complex Animations
100% (7)
Interaction Design & Complex Animations
69 pages
Above the Fold: Understanding the Principles of Successful Web Site Design
From Everand
Above the Fold: Understanding the Principles of Successful Web Site Design
Brian D Miller
No ratings yet
I Don't Know How To Love Him-JC Superstar
100% (6)
I Don't Know How To Love Him-JC Superstar
4 pages
The New Drawing On The Right Side of The Brain PDF
100% (16)
The New Drawing On The Right Side of The Brain PDF
314 pages
Billie Holiday - Stormy Weather
100% (4)
Billie Holiday - Stormy Weather
3 pages
Word Processing Terminologies
No ratings yet
Word Processing Terminologies
5 pages
Ultimate UI Design Roadmap
No ratings yet
Ultimate UI Design Roadmap
36 pages
Uxpin The Guide To Wireframing
100% (1)
Uxpin The Guide To Wireframing
118 pages
Web UI Design Best Practices
83% (6)
Web UI Design Best Practices
109 pages
UI & UX Micro Tips - The Ultimate Collection
100% (1)
UI & UX Micro Tips - The Ultimate Collection
62 pages
Designing Web Interfaces PDF
100% (4)
Designing Web Interfaces PDF
334 pages
UI UX Design Strategy (Advanced Certification)
No ratings yet
UI UX Design Strategy (Advanced Certification)
13 pages
Webinar UX UI Design Wireframes and Prototypes
100% (2)
Webinar UX UI Design Wireframes and Prototypes
34 pages
UI & UX Micro Tips - The Ultimate Collection
No ratings yet
UI & UX Micro Tips - The Ultimate Collection
62 pages
The Guide To Wireframing
100% (4)
The Guide To Wireframing
114 pages
Uxpin Web Ui Design Patterns 2016 Volume
100% (2)
Uxpin Web Ui Design Patterns 2016 Volume
143 pages
The UX Jobs Handbook v1.01
No ratings yet
The UX Jobs Handbook v1.01
58 pages
Mobile Design Pattern Gallery PDF
100% (7)
Mobile Design Pattern Gallery PDF
278 pages
How To Design Better UI Components
No ratings yet
How To Design Better UI Components
139 pages
Design Systems Formatted PDF
No ratings yet
Design Systems Formatted PDF
66 pages
Creative Brief (Template)
No ratings yet
Creative Brief (Template)
2 pages
Uxpin Principles of Visual Consistency
100% (2)
Uxpin Principles of Visual Consistency
50 pages
Ebook - UX - UI Dictionary - U
100% (1)
Ebook - UX - UI Dictionary - U
45 pages
The Basics of Ux Design
100% (3)
The Basics of Ux Design
73 pages
The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow
From Everand
The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow
Daniel Schwarz
3/5 (1)
Designing for Touch
From Everand
Designing for Touch
Josh Clark
No ratings yet
Distinctive Design: A Practical Guide to a Useful, Beautiful Web
From Everand
Distinctive Design: A Practical Guide to a Useful, Beautiful Web
Alexander Dawson
No ratings yet
Designing User Interfaces: Exploring User Interfaces, UI Elements, Design Prototypes and the Figma UI Design Tool (English Edition)
From Everand
Designing User Interfaces: Exploring User Interfaces, UI Elements, Design Prototypes and the Figma UI Design Tool (English Edition)
Dario Calonaci
5/5 (2)
UX: Essential Tools
From Everand
UX: Essential Tools
Daniel Schwarz
No ratings yet
From Psychology to UX: The Evolution of a Career and the Intersection of Disciplines
From Everand
From Psychology to UX: The Evolution of a Career and the Intersection of Disciplines
Breanna Gentile, Ph.D.
No ratings yet
Mastering User Surveys: A Guide for UX Designers and Researchers
From Everand
Mastering User Surveys: A Guide for UX Designers and Researchers
William Webb
No ratings yet
Beyond UX Design: Master Your Craft Beyond Pixels and Prototypes
From Everand
Beyond UX Design: Master Your Craft Beyond Pixels and Prototypes
Jeremy miller
3/5 (2)
A UX Designers Guide to Coding: Merging the Worlds of Design and Development
From Everand
A UX Designers Guide to Coding: Merging the Worlds of Design and Development
Jason Miller
No ratings yet
UX Decoded: Think and Implement User-Centered Research Methodologies, and Expert-Led UX Best Practices
From Everand
UX Decoded: Think and Implement User-Centered Research Methodologies, and Expert-Led UX Best Practices
Dushyant Kanungo
No ratings yet
On Killing
100% (4)
On Killing
404 pages
Learning French e Book
100% (4)
Learning French e Book
81 pages
Running Up That Hill - Kate Bush
100% (1)
Running Up That Hill - Kate Bush
7 pages
Allen Shamblin - I Can't Make You Love Me (Bonnie Raitt)
100% (3)
Allen Shamblin - I Can't Make You Love Me (Bonnie Raitt)
5 pages
Burt Bacharach - Anthology
100% (10)
Burt Bacharach - Anthology
155 pages
1 Gemilang 2024-2025 PBD Transit Forms
No ratings yet
1 Gemilang 2024-2025 PBD Transit Forms
15 pages
1 Effective Academic Writing With Cover Page v2
No ratings yet
1 Effective Academic Writing With Cover Page v2
165 pages
1.8 Hebrew Pictograms
100% (1)
1.8 Hebrew Pictograms
3 pages
List of Examinees For The Early Language, Literacy, and Numeracy Assessment (Ellna) S.Y. 2021-2022
No ratings yet
List of Examinees For The Early Language, Literacy, and Numeracy Assessment (Ellna) S.Y. 2021-2022
2 pages
Referencing APA 6 Ed. Style
No ratings yet
Referencing APA 6 Ed. Style
30 pages
Paper Word Processors in The Classroom
No ratings yet
Paper Word Processors in The Classroom
18 pages
Popular Fiction
No ratings yet
Popular Fiction
2 pages
Slide La Casa de Papel
No ratings yet
Slide La Casa de Papel
20 pages
Paragraph - Essay
No ratings yet
Paragraph - Essay
12 pages
Summary Paragraph Assignment
100% (1)
Summary Paragraph Assignment
3 pages
Lab 5 & 6 - CSS
No ratings yet
Lab 5 & 6 - CSS
17 pages
Chapter 5
No ratings yet
Chapter 5
4 pages
SATNAC Paper Template: Gys Booysen, Martin Smuts, Third Author
No ratings yet
SATNAC Paper Template: Gys Booysen, Martin Smuts, Third Author
2 pages
Thesis Paper Table of Contents Example
100% (3)
Thesis Paper Table of Contents Example
7 pages
New First Step Reading-Resource-Book
No ratings yet
New First Step Reading-Resource-Book
231 pages
Criminal Justice Reaction Paper Assignment 2013
No ratings yet
Criminal Justice Reaction Paper Assignment 2013
2 pages
LC International ESOL - Central Exams - Answer Sheet - C1
No ratings yet
LC International ESOL - Central Exams - Answer Sheet - C1
16 pages
English 285
No ratings yet
English 285
9 pages
English Shorthand (F) Alphabet Phraseography
No ratings yet
English Shorthand (F) Alphabet Phraseography
4 pages
Paperless Proofreading: A Publishing Revolution: Features
No ratings yet
Paperless Proofreading: A Publishing Revolution: Features
3 pages
Romanization of Amharic 22
No ratings yet
Romanization of Amharic 22
3 pages
Lesson 2 Time Signatures
No ratings yet
Lesson 2 Time Signatures
16 pages
Phil IRI Assessment Results and Intervention
No ratings yet
Phil IRI Assessment Results and Intervention
25 pages
L11 - Baby Farm Animals
No ratings yet
L11 - Baby Farm Animals
6 pages
2 Dedikasi & 2 Ikhlas Rumusan Tahap Penguasaan Literasi Bahasa Inggeris
No ratings yet
2 Dedikasi & 2 Ikhlas Rumusan Tahap Penguasaan Literasi Bahasa Inggeris
3 pages
Po Leung Kuk Ngan Po Ling College English Language Paper 1 Question-Answer Book Time Allowed: 1 Hour and 30 Minutes Instructions
No ratings yet
Po Leung Kuk Ngan Po Ling College English Language Paper 1 Question-Answer Book Time Allowed: 1 Hour and 30 Minutes Instructions
10 pages
Elements of Graphic Fiction - Google Search
No ratings yet
Elements of Graphic Fiction - Google Search
1 page