Mobile design: Plain and (not so) Simple

Mobile Design .Plain and (not-so) Simple

ANDREW MAIER

Wednesday, April 24, 13

Hi, I’m Andrew.

http://uxbooth.com

Andrew


mailto:[email protected]



2007


2009 – 2010


Our muse


“[We've had] a total of 880 million Android & iOS devices entering the market in just over five years. Consider the shift that occurs when iOS & Android put a combined billion [mobile] devices in people’s hands. That’s almost half the Internet population of the world and equivalent to the total number of (Windows) PCs in use around the world.”

–LUKE WROBLEWSKI


§ Luke Wroblewski, Author of Mobile First

§ Brad Frost, Mobile evangelist

§ Rachel Hinman, Author of The Mobile Frontier

§ Josh Clark, Author of Tapworthy

§ Bryan and Stephanie Rieger, Nokia

§ Scott Jehl, Author of Designing with Progressive Enhancement

Luminaries


CONTEXT

APPROACH

DESIGN

CODEWednesday, April 24, 13

I CONTEXTWednesday, April 24, 13

2 How, whereand when

How we behave and feel

1 Physicality andspecifications

3

http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

What’s different?




DEVICESLOCATIONS BEHAVIORS


http://www.flickr.com/photos/lukew/7382570546/in/photostream




In bed On the couchWatching TV

In the bathroomWaiting rooms

In linesRetail stores

At workLibrariesChurches

TrainsIn the car

http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/Wednesday, April 24, 13

http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Lookup

Check-in

Game

EditWednesday, April 24, 13

DEVICESLOCATIONS BEHAVIORS


II APPROACHWednesday, April 24, 13

Contextually appropriate

CONTENTAND

FUNCTIONALITY


CONTENT = 15%


CONTENT = 70%


Mobile FirstLUKE WROBLEWSKI


STORYTELLINGNATURAL UIPROGRESSIVE ENHANCEMENT


Mental ModelsINDI YOUNG


http://www.balsamiq.com/




UnderstandingComicsSCOTT McCLOUD


http://proto.io


http://malarkey.github.com/Rock-Hammer/


NEXT-GEN

GUIWednesday, April 24, 13

I’m a Button, believe you me


Zoom


http://lukew.com/touchWednesday, April 24, 13

http://lukew.com/touch

http://lukew.com/touch

TheFOLLOWING EXAMPLE

is used with permission from

ANDY FITZGERALD

(Because he’s an awesome, generous fellow)


50%


Brave NUIWorldDANIEL WIGDOR &DENNIS WIXON


MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY)

MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/Wednesday, April 24, 13

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

Users have javascript enabled, right?

It’s 2013.


–STEPHANIE RIEGER

“And the menu failed. Never even opened. Suddenly, the site was without navigation...at all.”

http://stephanierieger.com/a-plea-for-progressive-enhancement/




WORKED


DIDN’T■ Galaxy Nexus ■ iPhone 4 (iOS 5)

■ iPhone 4 (iOS 4.3.5)■ iPod Touch■ Nexus One■ Nokia Lumia 800■ HTC ChaCha■ HTC Wildfire■ Huawei Blaze■ Galaxy SII■ Galaxy Mini■ Blackberry 9810 Torch■ Blackberry 9300

■ Galaxy Tab 7″■ Galaxy Tab 10″■ Amazon Kindle Fire




Designing withProgressiveEnhacementTODD PARKERPATTY TOLANDSCOTT JEHLMAGGIE COSTELLO WACHS


http://modernizr.com




ULTIMATELYWednesday, April 24, 13

WEB

WEB


THERE’S NO SUCH THINGAS FUTURE-PROOF


BUT WE CAN BE FUTURE-FRIENDLY

http://futurefriend.ly/Wednesday, April 24, 13

BUT WE CAN BE FUTURE-FRIENDLY

http://futurefriend.ly/

http://futurefriend.ly




III DESIGNWednesday, April 24, 13

FINGER

tipsWednesday, April 24, 13

RESPONSIVE DESIGNSCREEN-WIDE SPACING


?


ResponsiveWeb DesignETHAN MARCOTTE


Column dropOff canvas Mostly fluid

Layout shifterTiny tweaks

http://www.lukew.com/ff/entry.asp?1514

Responsive patterns




Column drop


Off canvas


Mostly fluid


Layout shifter


Tiny tweaks


Tiny tweaks

(lucky people)


Thumb zone

Ideal forprimary navigation


THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THING

LINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENT


1-2 cm wide


7mm minimum


5mm


2

1


Mobile DesignPattern GalleryTHERESA NEIL

Free chapter available: http://www.uxbooth.com/articles/mobile-design-patters/


http://www.uxbooth.com/articles/mobile-design-patters/

http://www.uxbooth.com/articles/mobile-design-patters/

IV CODEWednesday, April 24, 13

Use the cascade, Luke!


ANTI-PATTERN ALERT


44px

44px

1em

1em

Regular vs. Retina


TheFOLLOWING EXAMPLE

is used with permission from

BRAD FROST(Because he’s an awesome, generous fellow)


DEMO

TUTORIAL

WALKTHROUGH

http://bit.ly/mobilefirstrwd

http://bit.ly/rwdanatomy

http://bit.ly/rwdtutorial


1 2 3 4 5 6


EXHIBIT A: MASTHEAD


EXHIBIT B: LOGO


44px

44px

1em

1em

Regular vs. Retina


http://blog.netvlies.nl/design-interactie/retina-revolution/

RETINA COMPRESSION




EXHIBIT C: NAVIGATION


EXHIBIT D: SEARCH FORM


EXHIBIT F: PRODUCT IMAGESWednesday, April 24, 13

EXHIBIT G: PRODUCT FORM


EXHIBIT I: FIND NEARBYEXHIBIT I: FIND NEARBY


COMFORTABLE

STATIONARY

FOCUSEDCAPABLE BROWSER

EFFICIENT INPUT

LARGE SCREEN

FAST CONNECTION

POWERFUL CPU

OLD CONTEXT


NEW CONTEXT


EXHIBIT J: AUXILIARY CONTENT

1 2 3 4 5 6


RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW WEIGHS AS MUCH AS THE LARGE SCREEN VIEW

http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/

86%


THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THING


THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THING

NOT THE THING

LINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENT


1 2 3

4 5 6


EXHIBIT J: FOOTER NAV


EXHIBIT K: CALL NUMBER


1 2 3 4 5 6


IN SUMWednesday, April 24, 13

Mobile is different.

It requires a new approach.

Designers have some stuff figured out...


BUTWednesday, April 24, 13

THIS IS JUST THE

BEGINNINGWednesday, April 24, 13

2015?


Smartphones are less than a decade old.


Smartphones are less than a decade old.

Even the luminaries are learning as they’re going.


HAVE

FUN!Wednesday, April 24, 13

http://bradfrost.github.com/this-is-responsive/resources.html




http://bradfrost.github.com/this-is-responsive/patterns.html




fin@andrewmaier

[email protected]




Mobile design: Plain and (not so) Simple

Design

Transcript of Mobile design: Plain and (not so) Simple