Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

UI/UX Tips & Tricks for developers - FOSDEM2020

544 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

UI/UX Tips & Tricks for developers - FOSDEM2020

  1. 1. UI/UX Tips & Tricks for developers @evalica #FOSDEM2020 #OPENSOURCEDESIGN
  2. 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. 3. Consistency 3 / 30 p1# Similar objects should have similar meanings and functions Allow users to recognize usage patterns, decreasing the learning curve
  4. 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. 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. 6. Buttons Placement: Modal Layout 6 / 30 Left aligned Right aligned Vertical scanning Faster Z-shaped flow 3#
  7. 7. Buttons Placement: Full Page Layout 7 / 30 Left aligned Right aligned 3#
  8. 8. Buttons Placement: Primary Action 8 / 30 Adapt buttons position Primary action on outer edge Natural placement Tertiary Secondary Primary 4#
  9. 9. Color as meaning 9 / 30 5# Use color to differentiate button types Limit color selection Cancel
  10. 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
  11. 11. Affordance 11 / 30 p2# Cues which give a hint on how users may interact with an object
  12. 12. Affordance: Links 12 / 30 Differentiate links from content Non-linked content Hyperlinked content Hard to recognize p2#
  13. 13. Buttons vs. Links 13 / 30 Use for Navigation Doesn’t affect the interface Use for Actions Affects the interface 6#
  14. 14. Objects that are close together are perceived to be related Proximity (Gestalt) 14 / 30 p3#
  15. 15. Proximity: Menus 15 / 30 p3# Use spacing to group similar items
  16. 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. 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. 18. Law of Unity: Grouping 18 / 30 p5# Using lines and backgrounds to group related elements
  19. 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. 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
  21. 21. Serial Position Effect 21 / 30 p8# We remember best the first and last items in a serie
  22. 22. Chunking 22 / 30 p9# Group items to make them easier to process and remember
  23. 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#
  24. 24. Text Align: Numbers 24 / 30 Hard to compare values Right-align numbers 8#
  25. 25. Text Align: Tables 25 / 30 Hard to scan Choose the right alignment 8#
  26. 26. Icon Metaphor 26 / 30 9# Iconography is not universal
  27. 27. Icon + Text 27 / 30 10#
  28. 28. Learn more principles and apply them in an Open Source project of your choice Want more?
  29. 29. Thank you @evalica Questions? #FOSDEM2020

×