20
1 Applying Patterns to Mobile Design Designing Mobile Interfaces: Patterns for Interaction Design

Nov. 8, 2011 webcast desiging mobile interfaces by steven hoober

Embed Size (px)

DESCRIPTION

This webcast covers the intent of mobile patterns, and how to use them correctly in your design. Designed to be especially helpful for those migrating from other platforms, such as desktop web design. Presenter by: Steven Hoober

Citation preview

Page 1: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

1

Applying Patterns to Mobile Design

Designing Mobile Interfaces: Patterns for Interaction Design

Page 2: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

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.

Page 3: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

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.

Page 4: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

4

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

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

Page 5: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

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.

Page 6: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

6

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

Page 7: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

7

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

Page 8: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

8

Patterns are universal

Page 9: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

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.

Page 10: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

10

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

Page 11: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

11

Patterns are organized

Page 12: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

12

Patterns are organized

Page 13: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

13

Patterns are explained

Page 14: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

14

Patterns are explained

Page 15: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

15

Patterns are explained

Page 16: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

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.

Page 17: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

17

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

Avoid these traps to make good design decisions.

• Rote solutions.• Too high level.

Page 18: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

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.

Page 19: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

19

Steven Hoober

[email protected]

816 210 0455

@shoobe01

shoobe01 on:

www.donttouchme.com

www.4ourth.com

Page 20: Nov. 8, 2011 webcast   desiging mobile interfaces by steven hoober

20

Special OfferVisit http://oreilly.com to purchase your copy of Designing Mobile Interfaces and enter code 4CAST to save 40% off print book & 50% off ebook with special code 4CAST

Visit http://oreilly.com/webcasts to view upcoming webcasts and online events.