27
1 Design for Every Screen Designing Mobile Interfaces: Patterns for Interaction Design

Design for Every Screen

Embed Size (px)

DESCRIPTION

Even for the simplest, most-focused product, your users will engage in multiple ways, and in multiple channels. Learn about a user centric approach to developing a target experience to guide better, more efficient design, planning and implementation of your product.Steven Hoober has been practicing UX and IxD for 15 years, and has been designing mobile products since 1999. His mobile work has included design of browsers, e-readers, search, NFC, mobile banking, data communications, location, and OS overlays. Steven spent eight years at U.S. mobile operator Sprint, and has also worked with AT&T, Qualcomm, Samsung, Skyfire, Bitstream, VivoTech, The Weather Channel, Lowe's, and Hallmark Cards. He has a just-released book of patterns, Designing Mobile Interfaces from O'Reilly.

Citation preview

Page 1: Design for Every Screen

1

Design for Every Screen

Designing Mobile Interfaces: Patterns for Interaction Design

Page 2: Design for Every Screen

2

What is Mobile?

Page 3: Design for Every Screen

3

Design for Clients“What we need is… “

• Trends• Fashion• Competition• Please the boss

Page 4: Design for Every Screen

4

Design for What You Know

4

Page 5: Design for Every Screen

5

You Are the Mobile Team

Page 6: Design for Every Screen

6

Design for Every Screen

Page 7: 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

Page 8: Design for Every Screen

8

Design for Experiences

Page 9: Design for Every Screen

9

Design for Connections

Page 10: Design for Every Screen

10

Design for Connections

Page 11: Design for Every Screen

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.

Page 12: Design for Every Screen

12

Design for Users

User-Centered Design informs your decisions.

Before you can design, you have to define:• Audience• Purpose• Context

12

Page 13: Design for Every Screen

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

Page 14: Design for Every Screen

14

How About an Example?

Page 15: Design for Every Screen

15

Every Platform We Can Think Of

Page 16: Design for Every Screen

16

One IA for All

Page 17: Design for Every Screen

17

Blueprint for Systems

Page 18: Design for Every Screen

18

One IA for eReaders

Page 19: Design for Every Screen

19

Another IA for Web

Page 20: Design for Every Screen

20

Blueprint the IxD & Interface

Page 21: Design for Every Screen

21

Branch for Platforms

Page 22: Design for Every Screen

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

Page 23: Design for Every Screen

23

Implement for Every Screen

Page 24: Design for Every Screen

24

Communicate Objectives

Page 25: Design for Every Screen

25

Own Your Design

Page 26: Design for Every Screen

26

Gain Buy-In

Page 27: Design for Every Screen

27

Steven Hoober

[email protected]

+1 816 210 0455

@shoobe01

shoobe01 on:

www.4ourth.com