1

Applying Patterns to Mobile Design

Designing Mobile Interfaces: Patterns for Interaction Design

2

Why mobile patterns?To fill a gap in the literature:• Platform agnostic, without being technical.• Interface agnostic.• Structured and organized.• Researched and scientifically-founded.

3

How to use patterns• Understand the interaction and interface.• Understand the reasoning and use.• Know when not to use it.• Determine how to apply it to your design.• Codify it as a standard for your project or organization.

This is what we’ll talk about today.

4

How to use patternsApply the right information at the right level• Grid: Viewport, scale, type, gutters,

margins and columns.• Wrapper: • Templates: • Pages:

5

Knowing history is knowing design

• We always prefer the next big thing, and follow the winners.• But this has all happened before, and it will all happen again.• Know where ideas and technologies come from, why they work, and

what failed about them in the past.

With a good grasp of history, you can predict the future.

6

Patterns are not scrapbooks• Collection is not enough.• Curation is better.• Analysis and comprehension is the key.

7

Patterns are universalMobile devices all share key attributes. Understand them all to understand any one.

8

Patterns are universal

9

Patterns are universalLive a mobile lifestyle:• Believe in your users, and your product.• Try out the competition.• Use mobile, even when you don’t have to.• Browse, share, tweet, photograph.• Try new things.

10

Patterns are generalized• Illustrative & explanatory.• Focused.• Examples can be confusing.

11

Patterns are organized

12

Patterns are organized

13

Patterns are explained

14

Patterns are explained

15

Patterns are explained

16

Patterns are best practices• Not necessarily common practice.• Not necessarily popular or fashionable.

You have to know enough about why design works, and how your users work, to avoid trendy solutions and worst practices.

17

Patterns are misunderstood• Reactionary.• Single view.• First solutions.

Avoid these traps to make good design decisions.

• Rote solutions.• Too high level.

18

Learn more• Buy the book: Designing Mobile Interfaces available now as an eBook,

soon in print.• Visit the Wiki: Basically the whole book is up on 4ourth.com/wiki. Check

back for updates.• Listen more:

• Next month, right here, Avoiding the Heuristic Solution – How to take your design from functional and correct to joyful and inspiring.

• In January, User Centered Execution – How to get your well-intended, well-designed systems built as you want and, and promised.

19

Steven Hoober

shoobe01@gmail.com

816 210 0455

@shoobe01

shoobe01 on:

www.donttouchme.com

www.4ourth.com