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

27

Steven Hoober

steven@4ourth.com

+1 816 210 0455

@shoobe01

shoobe01 on:

www.4ourth.com