A talk on UX and visual design for Android tablets & Google TV given by visual designer Dani Storlie and me at Google DevFest in September 2012.

1. Designing for
Tablets & TVs
Google DevFest 2012
Presented by
DANI STORLIE
ANDY FITZGERALD

5. Overview
Design Process
Color Theory
Visual Hierarchy

6. Design Process

7. “The design process is about designing and
prototyping and making. When you separate
those, I think the final result suffers”
- Jonathan Ive. 2012

8. Idea
Market Research
Sketch
Design
Prototype

9. Have an idea

10. Have an idea
Find a unique problem
Consider the form factor
Know your platform

11. Market Research

12. Market Research
Who is this for?
What else is out there?
What can you do better?

13. Sketch it Out

14. Sketch it Out
Information on the screen
Navigating through application
How do elements fit on the screen

15. Visual Design

16. Visual Design
Color
Visual Hierarchy
Layout

17. Prototype

18. Prototype
Build you application
Test it with users
Iterate till you perfect

19. Celebrate!

20. Visual Design

22. Visual Design

23. Designing for 10ft
10ft

24. Designing up close

26. Color Theory

28. Color Wheel

29. Monochromatic
shade

30. Color Wheel

31. Primary

32. Secondary

33. Secondary

34. Tertiary

35. Tertiary

36. Complimentary

38. Analogous

39. Warm/Cool

40. Google +

41. DropBox

42. Evernote

43. Google Play

44. Hierarchy

45. Hierarchy
Size
Color
Contrast
Alignment
Repetition
Proximity

46. Hierarchy

47. Size

48. Size & Alignment

49. Color

50. Contrast

51. Repetition & Proximity
Text Text Text
Line of text Line of text Line of text
Text Text Text
Line of text Line of text Line of text

53. Visual Information
Seeking

54. Visual Information Seeking
Overview
Zoom
Filter
Details on Demand
Visual
Informa.on
Seeking
Mantra,
Ben
Schneiderman
(1996)

55. Visual Information Seeking

56. Visual Information Seeking

57. Visual Information Seeking

58. Visual Information Seeking

59. Visual Information Seeking

60. Visual Information Seeking

61. User Knowledge
Knowledge in the World
Interpretation substitutes for learning
High ease of use on first encounter
Efficiency slowed by the need of interpretation
Knowledge in the Head
Requires learning
Low ease of use on first encounter
High efficiency
Adapted
from
The
Design
of
Everyday
Things,
Donald
Norman
(1988)

62. Identifying Priorities
& Translating Value

63. “Mobile users’ priorities change,
but their intents don’t.”
- Emily Wengert
Beyond Channels (IAS 2012)

64. Value in Context

65. Value in Context

66. Value in Context

67. Value in Context

68. Value in Context

69. Value in Context

70. Value in Context

71. Value in Context

72. Value in Context

73. Value in Context

74. Value in Context

75. Value in Context

76. Value in Context Heuristics
Clearly Identify:
The value proposition
The target user
The target context
Leverage Context Specific Assets
Accommodate Context Specific Limitations
Purge Unnecessary Features & Content

77. Q&A.

78. Thank you.
@DANISTORLIE
@ANDYBYWIRE