This document summarizes a presentation on cross-channel digital experiences and lessons learned from Material Design. It discusses defining user actions and priorities across channels, using real-world metaphors to help users understand digital experiences, employing meaningful visual design related to user actions, and using motion and animation for user feedback. The presentation concludes by recommending that for future Android projects, designers read Material Design documentation, create a personal pattern library, define priorities and activities upfront, and support cross-channel experiences.
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
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
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
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
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
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
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