1.
DroidCon Torino
10 April 2015
Julie Blitzer
LESSONS FROM MATERIAL DESIGN
ON CROSS-CHANNEL DIGITAL
EXPERIENCES

2.
Introduction
Designing cross-channel experiences

3.
Designing cross-channel experiences
3
USER-CENTERED
DESIGN
“Consider your
users…”
User experience
“Put yourself in the
user’s shoes…”
Human factors

4.
Designing cross-channel experiences
4
USER-CENTERED
DESIGN
“Consider your
users…”
User experience
“Put yourself in the
user’s shoes…”
Human factors
“Good” digital experiences don’t
just start and end with the user.
Real projects are way more
complicated!

5.
Designing cross-channel experiences / A better way…
5
Stephen P. Anderson’s Fundamentals of Experience Design

6.
Designing cross-channel experiences / People
6
LANGUAGE
Character vs. alphabetic
Bidirectionality:
Left Right
Left Right

7.
Designing cross-channel experiences / People
7
PREFERENCES
How has the user
configured his or her
device?
Android is so customizable
that your app could be
different on every device!

8.
Designing cross-channel experiences / People
8
ACCESSIBILITY
A11y
Accessibility means
accommodating users with
all sorts of limitations…
• vision
• hearing
• dexterity of hands and
motor skills
• cognitive or learning

9.
Designing cross-channel experiences / Context
9
“LEAN FORWARD” “LEAN BACK”vs.
Google Drive Feedly

10.
Designing cross-channel experiences / Platform
10

11.
Designing cross-channel experiences
11
Stephen P. Anderson’s Fundamentals of Experience Design
Activities can
happen across
many “channels”

12.
Designing cross-channel experiences
12
Stephen P. Anderson’s Fundamentals of Experience Design
Activities can
happen across
many “channels”
SMARTPHONE
WEBSITE /
DESKTOP
IN-STORE
TOTEM

13.
Designing cross-channel experiences
13
Google’s approach to cross-device:
Material Design

14.
Designing cross-channel experiences
14
Google’s approach to cross-device:
Material Design
But…

15.
Designing cross-channel experiences
15
Google’s approach to cross-device:
Material Design
Cross-device
≠
Cross-channel
But…

16.
Introduction
Design languages & pattern libraries

17.
Design languages & pattern libraries / What?
“Recurring solutions that solve common
design problems.”
—UI-Patterns.com
17

18.
Design languages & pattern libraries / What?
“Recurring solutions that solve common
design problems.”
—UI-Patterns.com
“A design language or design vocabulary is an overarching
scheme or style that guides the design of a complement of
products… a unique but consistent look and feel define a design
language…materials, color schemes, shapes, patterns, textures
or layouts.”
—Wikipedia on design language
18

19.
Design languages & pattern libraries / Why?
• Consistency
for the user, designers and developers
• Maintenance
fewer components to update
• Regulation
gives new team members a starting point
19

20.
Design languages & pattern libraries / Other Examples
• Yahoo Design Pattern Library
• Mailchimp
• UI-Patterns.com
• Patternry
• Welie
• BBC Gel
20

21.
Design languages & pattern libraries / Make your own!
• Your pattern library/manifesto/language/list of
principles should be a living document.
• Consider do’s and don’ts
21

22.
Lesson #1
Define actions and priorities

23.
1. Define actions and priorities
23
Stephen P. Anderson’s Fundamentals of Experience Design
What’s the
purpose of this
product or
service?
What will it do
for the user?

24.
1. Define actions and priorities
24
Stephen P. Anderson’s Fundamentals of Experience Design
What’s the
purpose of this
product or
service?
What will it do
for the user?
On each channel

25.
1. Define actions and priorities
25
Material Design’s Primary Action Button in various applications
What is the primary task? What are the secondary tasks?
Inbox S Converter SimpleNote

26.
Lesson #2
Real world metaphors help the user
make sense of the digital world

27.
2. Real world metaphors / as used in Material Design
27
Cards The Z-Axis and Three Dimensional Space

28.
2. Real world metaphors / Mental Models
28
Mental Model
Read more:
Mental Models by Indi Young
Mental Models and UX Design by Jakob Nielsen
A person’s intuition of how
something works based on
past experiences, knowledge
or common sense.
- abovethefolddesign.com

29.
2. Real world metaphors / Cards in Material Design
29
Weather Timeline Unclouded Field Trip

30.
2. Real world metaphors / Avoid skeumorphism
30
Skeumorphism
designing digital elements to resemble their
real-world counterparts
Don’t do
this!
(iBooks
from iOS 6)

31.
2. Real world metaphors / Cross-channel
31
Stephen P. Anderson’s Fundamentals of Experience Design
Do users have the
same mental
models when
channels and
contexts change?
SMARTPHONE
WEBSITE /
DESKTOP
IN-STORE
TOTEM

32.
Lesson #3
Meaningful visual design

33.
3. Meaningful visual design / Relate to user actions
33
Visual styling should
always relate to the
user’s actions and
content
Don’t add decoration
just because

34.
3. Meaningful visual design / Relate to user actions
34
Visual styling should
always relate to the
user’s actions and
content
Don’t add decoration
just because

35.
3. Meaningful visual design / Icons
35
Be deliberate and
thoughtful when
using icons, both the
shape and style.
play, next or link?

36.
3. Meaningful visual design / Cross-channel
36
Stephen P. Anderson’s Fundamentals of Experience Design
How should we
adapt the visual
design elements to
each channel?
SMARTPHONE
WEBSITE /
DESKTOP
IN-STORE
TOTEM

37.
Lesson #4
Motion and animation are excellent for
user feedback

38.
4. Motion for feedback / What is feedback?
38
A system should
always give the user
feedback, which is an
acknowledgement
that the input has
been received.
Sound is not enough,
animation is better!

39.
4. Motion for feedback / Cross-channel
39
Stephen P. Anderson’s Fundamentals of Experience Design
What kinds of
feedback are
best for each of
these channels?
SMARTPHONE
WEBSITE /
DESKTOP
IN-STORE
TOTEM

40.
4. Motion for feedback / Examples
40
Evernote’s Menu

41.
Testo
4. Motion for feedback / More Examples
• Numix Calculator
• Source (News Reader)
• Weather Timeline
41

42.
Conclusion
For your next Android project

43.
Testo
Conclusion / For your next project
• Read up!
The official Material Design documentaion
• Make your own library
Catalog your components and choices in a
personalized manifesto for your app
• Set priorities and activities up front
Is your app cross-channel? Then it needs to
support users in various contexts
43

44.
THANKS!
@zhuli
jblitzer
uxblitz.com
julieblitzer.com
jblitzer
Julie Blitzer
UX Designer