UI Consistency vs UX
3 likes1,441 views
The document discusses the importance of user interface (UI) consistency and its impact on user experience (UX) during a presentation at the Bulgaria Web Summit 2015 by Vasil Yordanov and Arin Bhowmick. It emphasizes the need for consistent visuals, interactivity, and organization to enhance user productivity, while also highlighting various dimensions of consistency in design. The presentation advocates for following design patterns, guidelines, and best practices to minimize user surprises and improve both ease of learning and ease of use.
UI Consistency vs UX
- 1. UI Consistency vs. UX Bulgaria Web Summit 2015 18 April 2015
- 2. Vasil Yordanov Senior UX Designer at Telerik, A Progress Company @yordanov
- 3. User Interface Consistency vs. User Experience
- 4. Yes, I’m a button!
- 7. Our goal is to create and inspire simple, consistent and contemporary experiences for user productivity, through iterative research driven user understanding, innovative design and best practices. ARIN BHOWMICK – Vice President, User Experience & Product Design, Progress User Experience @ Progress
- 8. Any Browser Any Device Any Location
- 9. Organize
- 10. Economize or
- 11. Communicate
- 12. Consistent Visuals and Interactivity Consistent Communication Consistent Organisation and Layout
- 14. What is Consistency? and How to identify it?
- 16. It’s me again :)
- 17. button { position: absolute; top: 100px; left: 100px; margin: 0; } Layout
- 18. Size button { width: 200px; height: 32px; line-height: 32px; border-width: 2px; }
- 19. Color and Texture button { background-color: blue; background-image: button.png; border-color: blue; color: white; }
- 21. Typography button { font-family: Georgia; font-size: 24px; font-weight: normal; text-transform: uppercase; }
- 22. Animations and Transitions button:hover { transition: background 1s; transform: rotate(180deg); }
- 23. Properties button { position: absolute; top: 100px; left: 100px; margin: 0; width: 200px; height: 32px; line-height: 32px; border-width: 2px; border-radius: 50%; border-color: blue; background-color: blue; background-image: button.png; color: white; font-family: Georgia; font-size: 24px; font-weight: normal; text-transform: uppercase; }
- 31. Source: OS X Human Interface Guidelines
- 32. Internal Consistency External Consistency Real-world Consistency
- 33. Consistency is not easy.
- 34. Avoid Surprises
- 35. Pay Attention to Ease of Learning and Ease of Use.
- 37. Use Design Patterns and Best Practices.
- 38. www.goodui.org
- 39. Break up your UI.
- 41. Create and Adhere to Guidelines.
- 42. Source: Material Design Guidelines
- 43. - Surprises - Ease of Learning vs. Ease of Use - Design Patterns and Best Practices - UI segmentation - UI Guidelines
- 44. ? UX
- 45. User ? UX
- 46. Product ? UX
- 53. - Surprises - Ease of Learning vs. Ease of Use - Design Patterns and Best Practices - UI segmentation - UI Guidelines
- 55. Consistency is Your Friend!