introduction to mobile for (web) designers

18
Elements, unless noted, shared under Creative Commons Attribution-Share Alike 3.0 http://creativecommons.org/licenses/by-sa/3.0/ Mobile-Intro Saved on 2 November 2010 at 11:28 PM Brand and format ©2010 Steven Hoober Introduction to mobile for designers Prepared by Steven Hoober for User Centered Design at AII 2 November 2010 Presentations mobile design in :20

Upload: steven-hoober

Post on 13-May-2015

630 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Introduction to Mobile for (Web) Designers

Elements, unless noted, shared under Creative CommonsAttribution-Share Alike 3.0http://creativecommons.org/licenses/by-sa/3.0/

Mobile-Intro Saved on 2 November 2010 at 11:28 PM Brand and format ©2010 Steven Hoober

Introduction to mobile for designers

Prepared by Steven Hoober for User Centered Design at AII

2 November 2010

Presentations

mobile design in :20

Page 2: Introduction to Mobile for (Web) Designers

2Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA ...or both? Wait, or a service? Or?

Web or App?

Utility:• To reach the broadest audience, you need a mobile website.• Apps require maintenance, can rarely be ported well or easily.

Need:• Repeated use, deep information is an app.• Quick hits, rare usage is an app. • Towtruck and accident apps are stupid. What do your users really need?

Marketability:• Even if free, apps are functionally products. If you have customers instead of

viewers, maybe an app is the way to go. Else, you are a website.• Apps that are just installable websites are rejected by users. Be careful.

Content:• Apps work offline. Websites must be connected.• But make sure your data is fresh.• And app engines have limits on storage. How much data do you have?

Availability:• Watch the analytics. If getting lots of web traffic, make a website. • How can people discover your app? They can get desktop, and pre app-store

platforms did fine. Can your website sell your apps?

Cost:• Mobile web is much cheaper (50-80% of a desktop site), including fitting to

multiple device types.• Apps are much more expensive, and that’s per platform. Very, very, very few

app providers are making money in even Apple’s store.

Web• Runs anywhere (customize if you want, though).• Always has to be connected (for now).• Mercy or blessing of operators.• Revenue models?• Google is powerful.

App• Platform dependent.• Always works.• Hardware access.• Mercy or blessing of stores.• May have limited revenue models.• Important to keep?

Services• Network related (BBM) or super-universal (SMS).• Low learning curve.• Minimal ability to teach or discover.• Viral, but only viral.

Page 3: Introduction to Mobile for (Web) Designers

3Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Ten or eleven things .

web designers .

need to know .

before going .

mobile .

Being a mobile designer

Page 4: Introduction to Mobile for (Web) Designers

4Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Live a mobile life

One

Page 5: Introduction to Mobile for (Web) Designers

5Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Believe it’s a communications device

And a computer

Two

Page 6: Introduction to Mobile for (Web) Designers

6Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Use mobile analytics

Desktop web tools won’t cut it

Three

Page 7: Introduction to Mobile for (Web) Designers

7Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Know your platform

Four

Page 8: Introduction to Mobile for (Web) Designers

8Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Target the devices your users have

Five

Page 9: Introduction to Mobile for (Web) Designers

9Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Design for contexts of use

Six

Page 10: Introduction to Mobile for (Web) Designers

10Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Understand the region and culture

Seven

Page 11: Introduction to Mobile for (Web) Designers

11Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Learn the implications of intermediaries

Eight

Page 12: Introduction to Mobile for (Web) Designers

12Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Use device repositories

Nine

Page 13: Introduction to Mobile for (Web) Designers

13Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Send only what is needed

Ten

Page 14: Introduction to Mobile for (Web) Designers

14Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Design with rules and patterns

Not pixels

Eleven

Page 15: Introduction to Mobile for (Web) Designers

15Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Everything

What is mobile?

1980 1990 2000 20101985 1995 2005

PDAs

Portable gamers

Paging Alpha paging

2-way paging

Film cameras

IMTS

Portable music players

MP3 players

Broadcast television

Digitalcameras

Day planners

Portable games

Navigational assistants

GPS

Navigator phones

TV phones

Everything phones

AMPS

GSM

PCS

PDAphones

Blackberry, etc.

Cameraphones

Musicphones

TV phones

Camera phones

Feature phones

Game phones

Music phones

Message phones

Smart phones

Navigation

Television

Photography

Paging

Radiotelephony

Calendars

Gaming

Music

Telephony

Page 16: Introduction to Mobile for (Web) Designers

16Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Anything

What is mobile?

Page 17: Introduction to Mobile for (Web) Designers

17Mobile-Intro Saved on 2 November 2010 at 11:28 PM ©2010 Steven Hoober

4ourth mobile design in twenty minutes PresentationsA Interactive

Personal

The new normal

What is mobile?

Page 18: Introduction to Mobile for (Web) Designers

Elements, unless noted, shared under Creative CommonsAttribution-Share Alike 3.0http://creativecommons.org/licenses/by-sa/3.0/

18Mobile-Intro Saved on 2 November 2010 at 11:28 PM Brand and format ©2010 Steven Hoober

4ourth Mobile Design Documentation

Operating System DocumentationD

Visit www.4ourth.com/wiki/ to contribute to the design patterns, and to add and view other mobile design tips and tools.

Join the mobile community

mobile patterns wiki