Mobile UX

Mobile User ExperienceNick FinckAugust 18, 2010 Refresh Bellingham

?Who the f#@kis this dude?

Nick Finck Blue Flavor ‣ Principal & Director of User Experience ‣ Over 15 years of experience working in the web ﬁeld ‣ Has worked with Adobe, Boeing, CBS, Cisco, CitiGroup, Comcast, Fandango, FDIC, HP, IBM, and Microsoft ‣ Co-organized and curated more than 10 national and international web conferences & events‣ BlueFlavor.com ‣ Judged the Webby’s and several other web awards‣ NickFinck.com ‣ Founder of Digital Web Magazine‣ Google “Nick” ‣ Expertise in information architecture, interaction design, and user research

Outline‣ Some bullshit about me‣ Re-thinking computing‣ Some technical examples‣ A deep dive into mobile‣ Really cool shit

The way we thinkabout computing

A mobile phone is now used more for data than actual phone callsNew York TimesJenna Worthham May 13, 2010

Photo by Rion Nakayahttp://www.ﬂickr.com/photos/rion/47437262/

The iPad reached more than one million units sold in half the time it took the iPhoneYahoo NewsBen Patterson May 3, 2010

We need to change the way we think about the Web

The User Experience of Mobile

The is no One Web

There are many contexts

Mobile should not be ﬁrst

Lets Get Technical!

Fitts’s Law

“ In ergonomics, Fittss law is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target.”Description of Fitts’s LawWikipedia

Not so goodWay better

Optimized Markup

digital-web.comScreen based CSS & Print based CSS

Developing for the Mobile Context• XHTML ✓ Well formed ✓ Semantically correct ✓ Highly optimized• CSS ✓ Handheld media type (sometimes even screen media type) ✓ Highly optimized

http://nytimes.com http://app.getleaﬂets.com/nyt/NYTimes.com NY Times on LeaﬂetMinimum 30 Seconds to lo load 796kb Maximum of 7 seconds to lo load 30kbplus requests to multiple servers

Highly optimized header markupNon-optimized header markup

Optimized UI

Highly optimized UINon-optimized UI

A Deep Dive into Mobile Web

Content

Readability & Page Width

The problem

UnreadableMust zoom

UnreadableAgain

Text does not ﬁt within screen

Possible solutions

Readablewithoutzooming Fits perfectly within screen

Readable without zoomingText ﬁts on screen

Interaction

Navigation

The problem

Navigation

Hotspots visible & clickable only after zoomed 10x

Content issomewhere waythe fuck up here

Navigationcould havelargerhotspots

Microscopichotspots

Barelynavigable

Possible solutions

Navigationalong sidethe content

Nice bigand juicyhotspots

Super size hotspots

Visuallycalled outnavigation

Use largerheadings &visual hints

Pagination

The problem

The world’ssmallestpagination

A possible solution

Excellentpaginationsolution

Search

The problem

A possible solution

A perfectcase forsearch ahead

Buttons

The problem

Very typicalweb button

Possible solutions

Big ass buttons!

Designedwith thespeciﬁc 555-5555context inmind

Calls to Action

The problem

Calls toaction arelost in page

A possible solution

Make callsto actionvery obvious

?What is Next?

LegoAugmented Reality Kiosk

ToyotaAugmented Reality Advertisement

ARhrrrrAugmented Reality Game

InsqribeLocation Based Augmented Reality

Nintendo WiiMotion based gaming

Microsoft SurfaceSurface-based computing

Microsoft’s Project NatalController-less Interface

Minority Report20th Century Fox

Oblongs g-speakSpatial Operating Environment

Sixth SenseWearable Gestural Interface

We have just barely begun to understandthe potential of Mobile

Thank you!

?Questions

Mobile User ExperienceNick Fincknick@blueflavor.comBlue Flavor - http://blueflavor.comPersonal - http://nickfinck.com Refresh Bellingham

Mobile UX

by Nick Finck on Dec 13, 2010

Accessibility

Tags

Upload Details

Usage Rights

3 Embeds 5

Statistics

Mobile UX — Presentation Transcript

http://paper.li	3
http://twitter.com	1
http://zootool.com	1