Video: https://fosdem.org/2020/schedule/event/ui_ux_trips_and_tricks_for_developers/
UI/UX is a craft. The more you practice it, the better you are at it. Some people argue that you need to have 'good taste' in order to be a designer, to be the 'artsy type'. While this might be true for Graphic Design, Branding and Visual Arts in general, when it comes to Interface, Interaction and Product Design, the focus is more on practicality and 'common sense'.
I will present some general UI/UX tips & tricks that will help you design better. Everyone should know the basic principles and patterns of design, and once you understand them you will naturally integrate them in your work.
2. UI Principles & Patterns
2 / 30
Patterns are describing recurring solutions
that solve common design problems
Principles are fundamental rules about the
practice of design
3. Consistency
3 / 30
p1#
Similar objects should have similar
meanings and functions
Allow users to recognize usage patterns,
decreasing the learning curve
4. Buttons: Primary / Secondary Actions
4 / 30
Secondary
action
Primary
action
Equal visual weight
No hierarchy
Have only one
primary action
per screen
1#
5. Buttons: Verbs as Actions
5 / 30
Avoid generic ‘OK’ or ‘Yes’
Avoid confusing phrases
(like double negatives)
Use explicit verbs
Make it the obvious choice
Can take the action without reading
2#
6. Buttons Placement: Modal Layout
6 / 30
Left aligned Right aligned
Vertical scanning Faster Z-shaped flow
3#
9. Color as meaning
9 / 30
5#
Use color to differentiate
button types
Limit color
selection
Cancel
10. Color: Destructive Actions
10 / 30
Red is a strong visual cue
that captures attention
Do not use regular
colors, like Blue
Always ask for
Confirmation
for destructive
actions
5#
Explain the
consequences
16. Objects sharing attributes are perceived
to be related
Similarity (Gestalt)
16 / 30
p4#
Color, size, shape or orientation can be
used for contrast
17. Law of Unity (Gestalt)
17 / 30
p5#
Objects connected by lines or boxes are
perceived to be related
Overrides cues from proximity or
similarity
18. Law of Unity: Grouping
18 / 30
p5#
Using lines and backgrounds to
group related elements
19. Choice Paralysis (Hick’s Law)
19 / 30
p6#
The time to make a decision increases with
the number and complexity of choices
Recommended
20. 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
23. 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#