Page 1
UI Consistency vs. UXBulgaria Web Summit 201518 April 2015
Page 2
Vasil YordanovSenior UX Designer at Telerik, A Progress Company
@yordanov
Page 3
User Interface Consistency vs.
User Experience
Page 4
Yes, I’m a button!
Page 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
Page 8
Any Browser Any Device Any Location
Page 12
Consistent Visuals and Interactivity
Consistent Communication
Consistent Organisation and Layout
Page 13
Consistencyor …
Inconsistency
Page 14
What is Consistency?and
How to identify it?
Page 15
Dimensions of Consistency
Page 17
button { position: absolute; top: 100px; left: 100px; margin: 0;}
Layout
Page 18
Sizebutton { width: 200px; height: 32px; line-height: 32px; border-width: 2px;}
Page 19
Color and Texturebutton { background-color: blue; background-image: button.png; border-color: blue; color: white;}
Page 20
Shapebutton { border-radius: 50%;}
Page 21
Typographybutton { font-family: Georgia; font-size: 24px; font-weight: normal; text-transform: uppercase;}
Page 22
Animations and Transitionsbutton:hover { transition: background 1s; transform: rotate(180deg);}
Page 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;}
Page 24
Interaction states
Source: http://www.google.com/design/spec/
Page 25
x~20properties
~5states
≈ 100consistency dimensions
Page 26
Internal Consistency
Page 27
Source: http://www.telerik.com
Page 28
External Consistency
Page 30
Real-World Consistency
Page 31
Source: OS X Human Interface Guidelines
Page 32
Internal Consistency External ConsistencyReal-world Consistency
Page 33
Consistency is not easy.
Page 35
Pay Attention to Ease of Learning and Ease of Use.
Page 37
Use Design Patterns and Best Practices.
Page 39
Break up your UI.
Page 41
Create and Adhere to Guidelines.
Page 42
Source: Material Design Guidelines
Page 43
- Surprises
- Ease of Learning vs. Ease of Use
- Design Patterns and Best Practices
- UI segmentation
- UI Guidelines
Page 47
CONSISTENCY STREAM
USER PRODUCT
Page 48
CONSISTENCY STREAM
USER PRODUCTGOOD
UX
Page 50
CONSISTENCY STREAM
USER PRODUCTBAD
UX
Page 51
CONSISTENCY STREAM
USER PRODUCTBAD
UX
Page 52
CONSISTENCY STREAM
USER PRODUCTGOOD
UX
Page 53
- Surprises
- Ease of Learning vs. Ease of Use
- Design Patterns and Best Practices
- UI segmentation
- UI Guidelines
Page 55
Consistency is Your Friend!
Page 57
Thank You! [email protected]
@yordanov @ux_progress