Agile, lean and responsive are huge new buzzwords. But let’s put these aside for a moment and focus on user perception and UI consistency. During this session we will discuss how trying to reach consistent visual and behavioral patterns, reflecting different mental models and form factors, can "drive you crazy" and how understanding the ways UI consistency affects UX is the key to achieving a well-balanced design language.

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

13. Consistency
or …
Inconsistency

14. What is Consistency?
and
How to identify it?

15. Dimensions of Consistency

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;
}

20. Shape
button {
border-radius: 50%;
}

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;
}

24. Interaction states
Source: http://www.google.com/design/spec/

25. x~20properties
~5states
≈ 100consistency dimensions

26. Internal Consistency

27. Source: http://www.telerik.com

28. External Consistency

30. Real-World Consistency

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

47. CONSISTENCY
STREAM
USER PRODUCT

48. CONSISTENCY
STREAM
USER PRODUCT
GOOD
UX

50. CONSISTENCY
STREAM
USER PRODUCT
BAD
UX

51. CONSISTENCY
STREAM
USER PRODUCT
BAD
UX

52. CONSISTENCY
STREAM
USER PRODUCT
GOOD
UX

53. - Surprises
- Ease of Learning vs. Ease of Use
- Design Patterns and Best Practices
- UI segmentation
- UI Guidelines

55. Consistency is Your Friend!

57. Thank You!
vasil.yordanov@telerik.com
@yordanov
@ux_progress