Interactive cues observed in flat design UI.

1. Interactive Cues
in FLAT DESIGN
Dec. 2014

2. Flat Design
http://www.google.com/trends/explore#q=flat%20design

3. Flat Design
Zune HD Windows
Phone 7
http://www.google.com/trends/explore#q=flat%20design
Windows 8 Material
Design
iOS7

4. What about affordance?
http://www.doctordisruption.com/wp-content/uploads/2013/09/Sensory_Feedback_in_Brain_Computer_Interfaces1.jpg

5. Affordance
“The perceived and actual properties of the thing, primarily those
fundamental properties that determine just how the thing could possibly be
used. (e.g. a chair affords sitting; glass affords seeing through, breaking;
wood affords solidity, opacity, support, carving)”
The Psychology of Everyday Things, 1988
Donald A. Norman
Note: The book title changed to “The Design of Everyday Things” in 1990.

6. You know that it can be clicked, because it has affordance?

7. Perceived Affordance
“ In today's screen design sometimes the cursor shape changes to indicate
the desired action (e.g., the change from arrow to hand shape in a browser),
but this is a convention, not an affordance. After all, the user can still click
anywhere, whatever the shape of the cursor. Now if we locked the mouse
button when the wrong cursor appeared, that would be a real affordance,
although somewhat ponderous. The cursor shape is visual information: it is a
learned convention. When you learn not to click unless you have the proper
cursor form, you are following a cultural constraint. ”
Affordance, Conventions and Design, Interactions, May 1999
Donald A. Norman
http://www.jnd.org/dn.mss/affordance_conv.html

8. Learned Conventions
We learned how to use modern technology.
http://coverhound.com/system/posts/images/000/000/050/original/baby-internet-1200.png?1357952480

9. Are there interactive cues that make
use of learned conventions helping us
perceive interactivity in UI design?
http://www.3ders.org/images/3d-printed-pool-cue-1.jpg

10. Observation
Disclaimer: Just personal observation and opinions
on UI designs. No research to back my opinions.
http://www.google.com/design/spec/material-design/introduction.html
http://cdn.iphonehacks.com/wp-content/uploads/2013/06/ios-7-new-icons-iphone.png

11. Visual Cue
Button Shape

12. Simplified
Button
Flatten Simplify
Button
Flat design UI removes excessive decorative chrome; use minimal visual
elements just enough to communicate.

13. Rectangle and circle
Rectangular and circular shapes are commonly used button shapes.

14. iOS
Rounded corner rectangular (and circular) shapes are used on iOS for
actionable controls.

15. Android (Material Design)
Rectangular (and circle) shapes are used on Material Design for actionable
controls.

16. Windows Phone
Rectangular (and circular) shapes are used on Windows 8 devices for
actionable controls.

17. Size matters
Too BiG
It looks like a backgound.

18. Size matters
Too small,
It is less likely to be seen as actionable.
(Especially on touch input devices.)

19. Visual Cue
Distinctive Color

20. Distinct Color for actionable text
Blue is a commonly used distinctive font color for actionable text (link) on
web UI.
Google+ (left), Facebook (right)

21. Distinct Color for actionable text
Blue is also commonly used as distinctive font color on mobiles.

22. Inline actionable text
Guidelines for Links – User Experience Guideline for Windows Phone
Useful to put actionable text inline with other texts.

23. Not just blue
“Consider choosing a key color to indicate interactivity and
state. Key colors in the built-in apps include yellow in Notes and
red in Calendar. If you define a key color to indicate interactivity
and state, make sure that the other colors in your app don’t
compete with it.”
12/4/201
4
2
iOS Human Interface Guideline

24. Not just blue
“Avoid using the same color in both interactive and
noninteractive elements. Color is one of the ways that a UI
element indicates its interactivity. If interactive and noninteractive
elements have the same color, it’s harder for users to know
where to tap.”
iOS Human Interface Guideline

25. Semantic Cue
Actionable Verb

26. Click Here

27. Actionable text label or control label mostly starts with a verb.

28. Semantic Cue
Symbol / icon

29. Actionable pictograms
Some icons become actionable (when put in right context) because years of
user education in modern UI.

30. Platform Conventions
iOS system icons
Android system icons

31. Leaned language
UI Conventions

32. Standard UI Controls
People can still guess how to operate a control if it still looks similar to
conventional design.

33. Top header (web)
Most web savvy users know that elements on top header of a web site are
most likely actionable. Even they are just text in black (or even gray).

34. Top and bottom bars (mobile)
App bar
Tool bar
Navigation
/ tool bar

35. Tab bars (mobile)

36. List/Menu (mobile)

37. List/Menu (web)

38. Grid Menu

39. Reinforce perceived
interactivity

40. Drop shadow to create depth
Subtle drop shadow can also be seen on some UI control design to create
depth and reinforce interactivity.

41. Progress Disclosure on Hover
Confidential | Copyright 2013 TrendMicro Inc.
 Google+ uses button shape for primary (encouraged) actions
 Reveals interactivity on secondary controls when hover on container
 Least used actions remain hidden until hover over it

42. Use multiple cues to emphasize primary
actions
Save
 Visual cues help users scan and locate actionable
elements on screen
 Verb helps users confirm that it’s actionable

43. Summary
 Perceived affordance is learned convention in screen
design.
 Distinctive color, shape (rectangular and circular),
size, action verbs are commonly used to indicate
interactivity.
 Leverage user’s existing knowledge:
 Learned conventions
 Standard UI controls, layout, icons

44. Recommendations
 Strategically use visual treatment to create visual
hierarchy for interactivity.
 The more encouraging an action is, the stronger visual
treatment is applied.
 So that users can easily scan and find primary actions.
 Combine multiple interactivity cue (shape, color) for stronger
treatments.
 Use verb for actionable text whenever possible, especially
when there is no visual cues. Verb suggests action.
 Use platform standard controls.
 Make use user’s known knowledge: learned conventions.

45. Reference
Most UI screenshots are collected from:
 iOS Human Interface Guideline
 Material Design
 User Experience Guideline for Windows Phone
Perceived Affordance
 Affordance, Conventions and Design