ui ux developers tips tricks for - apachecon€¦ · ui/ux @evalica tips & tricks for...

29
UI/UX @evalica Tips & Tricks for developers #APACHECON

Upload: others

Post on 05-Jul-2020

16 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

UI/UX

@evalica

Tips & Tricks for developers

#APACHECON

Page 2: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

UI Principles & Patterns

2 / 30

Patterns are describing recurring solutions

that solve common design problems(ex. Breadcrumbs, Wizard, Undo, etc.)

Principles are fundamental rules about the

practice of design

(ex. Consistency, Hierarchy, Contrast, etc.)

Page 3: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Consistency

3 / 30

p1#

Similar objects should have similar

meanings and functions

Allow users to recognize usage patterns,

decreasing the learning curve

Page 4: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Buttons: Primary / Secondary Actions

4 / 30

Secondary

action

Primary

actionEqual visual weight

No hierarchy

Have only one

primary action

per screen

1#

Page 5: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Buttons: Verbs as Actions

5 / 30

Avoid generic ‘OK’ or ‘Yes’Avoid confusing phrases (like double negatives)

Use explicit verbsMake it the obvious choiceCan take the action without reading

2#

Page 6: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Buttons Placement: Modal Layout

6 / 30

Left aligned Right aligned

Vertical scanning Faster Z-shaped flow

3#

Page 7: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Buttons Placement: Full Page Layout

7 / 30

Left aligned Right aligned

3#

Page 8: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Buttons Placement: Primary Action

8 / 30

Adapt buttons positionPrimary action on outer edge

Natural placement

TertiarySecondary

Primary

4#

Page 9: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Color as meaning

9 / 30

5#

Use color to differentiate button types

Limit color

selection

Cancel

Page 10: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Color: Destructive Actions

10 / 30

Red is a strong visual cue

that captures attentionDo not use regular

colors, like Blue

Always ask for

Confirmation

for destructive

actions

5#

Explain the

consequences

Page 11: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Affordance

11 / 30

p2#

Cues which give a hint on how users

may interact with an object

Page 12: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Affordance: Links

12 / 30

Differentiate links from

content

Non-linked

content

Hyperlinked content

Hard to recognize

p2#

Page 13: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Buttons vs. Links

13 / 30

Use for NavigationDoesn’t affect the interface

Use for ActionsAffects the interface

6#

Page 14: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Objects that are close together are

perceived to be related

Proximity (Gestalt)

14 / 30

p3#

Page 15: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Proximity: Menus

15 / 30

p3#

Use spacing to

group similar

items

Page 16: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Objects sharing attributes are perceived

to be related

Similarity (Gestalt)

16 / 30

p4#

Color, size, shape or orientation can be

used for contrast

Page 17: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Law of Unity (Gestalt)

17 / 30

p5#

Objects connected by lines or boxes are

perceived to be related

Overrides cues from proximity or

similarity

Page 18: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Law of Unity: Grouping

18 / 30

p5#

Using lines and backgrounds to

group related elements

Page 19: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Choice Paralysis (Hick’s Law)

19 / 30

p6#

The time to make a decision increases with

the number and complexity of choices

Recommended

Page 20: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

7±2 Rule (Miller’s Law)

20 / 30

p7#

Human brain is limited to retain 7±2 items in the short-term memory at one time

Limit menu

entries

The new estimate is 4±1 chunks

Page 21: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Serial Position Effect

21 / 30

p8#

We remember best the

first and last items in a serie

Page 22: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Chunking

22 / 30

p9#

Group items to make them easier to process and remember

Page 23: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Form Fields

23 / 30

Size fields

accordingly

Use Placeholders

Use Masks and

Limiters

Focus state for

selected field

Highlight and

explain error

White background triggers the

tendency to fill empty spaces

Place label on top

7#

Page 24: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Text Align: Numbers

24 / 30

Hard to compare values Right-align numbers

8#

Page 25: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Text Align: Tables

25 / 30

Hard to scan Choose the right alignment

8#

Page 27: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Icon + Text

27 / 30

10#

Page 28: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Learn more principles and apply them in an Open Source project of your choice

Want more?

Page 29: UI UX developers Tips Tricks for - ApacheCon€¦ · UI/UX @evalica Tips & Tricks for developers #APACHECON. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions

Thank you

@evalica

Questions?

#APACHECON