1
Design for Every Screen
Designing Mobile Interfaces: Patterns for Interaction Design
2
What is Mobile?
3
Design for Clients“What we need is… “
• Trends• Fashion• Competition• Please the boss
4
Design for What You Know
4
5
You Are the Mobile Team
6
Design for Every Screen
7
Design for Everything
• Desktop consumer web• Mobile web• Mobile app• Store terminals• Call center terminals• Call center logging• Call center scripts• Kiosks• Printed bills• Bill inserts• Envelope printing• Emails
• SMS• MMS• IVR• TV• Projection• Touch• Gesture• Shared interfaces• Pen input• Biometrics• Location• Environments
8
Design for Experiences
9
Design for Connections
10
Design for Connections
11
Design Principles• Gather information• Design for users, tasks, and goals• Do not design for technology, interfaces or platforms• Create a blueprint of the whole service• Design to target experiences
Use that to create IAs (and then interaction flows, wires, etc.) for each channel.
12
Design for Users
User-Centered Design informs your decisions.
Before you can design, you have to define:• Audience• Purpose• Context
12
13
Design for Services
Service Design principles may inform the process even more.
Key elements that have to be defined, using formal processes, are:• Actors• Scenarios• Components
13
14
How About an Example?
15
Every Platform We Can Think Of
16
One IA for All
17
Blueprint for Systems
18
One IA for eReaders
19
Another IA for Web
20
Blueprint the IxD & Interface
21
Branch for Platforms
22
A Checklist for Design• Blueprint:
• Gather – Collect info• Define – Personas, objectives• List – All possible features• Filter – Keep only what you need• Group – Cluster and establish dependencies• Prioritize – Earlier and higher, in system or backlog• Arrange – Notional interfaces
• IA, IxD (per channel)• Re-Filter – What cannot, should not be here• Branch – Executable IA• Optimize – Interaction, and interfaces
23
Implement for Every Screen
24
Communicate Objectives
25
Own Your Design
26
Gain Buy-In
