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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

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?

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