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

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

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

Lookup

Check-in

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

NEXT-GEN

GUIWednesday, April 24, 13

I’m a Button, believe you me

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

TheFOLLOWING EXAMPLE

is used with permission from

ANDY FITZGERALD

(Because he’s an awesome, generous fellow)

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

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

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

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

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

(lucky people)

Thumb zone

Ideal forprimary navigation

THE THING

NOT THE THING

LINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENT

1-2 cm wide

7mm minimum

Mobile DesignPattern GalleryTHERESA NEIL

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

IV CODEWednesday, April 24, 13

Use the cascade, Luke!

ANTI-PATTERN ALERT

Regular vs. Retina

TheFOLLOWING EXAMPLE

is used with permission from

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

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

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/

THE THING

NOT THE THING

THE THING

NOT THE THING

LINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENT

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

Smartphones are less than a decade old.

Even the luminaries are learning as they’re going.

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

andrew@uxbooth.com

Mobile design: Plain and (not so) Simple

Design

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

OFS: Plain and Simple Carol Lieser OFS Summer Workshop LTC 1.

Aluminizing of plain carbon steel - DiVA - Simple search

plain simple and ornate either or Silver SELBERTnyx.uky.edu/dips/xt7rn872wg47/data/0358.pdfI Cases plain simple and ornate 1 Silver in either Gold Gold Filled or Written for the Roundabout

TECHNICAL ANALYSIS PLAIN AND SIMPLE, THIRD …ptgmedia.pearsoncmg.com/images/9780137042012/samplepages/... · technical analysis plain and simple, third edition ... just what makes

plain + simple Lookbook

A Plain and Simple Christmas by Amy Clipston, Excerpt

Test-Driven Development for Developers: Plain and Simple

Consumer Protection Basics, Plain and Simple

Simple mobile pro review

Microsoft Press Word 2013 Plain and Simple (2013).pdf

WILLS, TRUSTS & ESTATES: PLAIN & SIMPLE · 2018-12-13 · WILLS, TRUSTS & ESTATES: PLAIN & SIMPLE What Does An Executor Do? By Patricia C. Marcin, Esq. ©2014 Patricia C. Marcin is

Plain Language: The Clear and Simple Content Strategy

IJS 2016 Paper - Plain not Simple - Gooding FINAL

Plain and simple - Put character first

SIMPLE STOCK MOBILE

Part 1 • Chapters 1 through 10 - Plain & Simple Press

Plain & simple

Windows 8 Plain Simple

No Tall Tale: Just the Plain and Simple Truth. · 2016-01-15 · No Tall Tale: Just the Plain and Simple Truth. ... This interdisciplinary unit was designed for fourth graders to

Simple Mobile Marketing Strategy - Vivid Image, Inc.vimm.com/.../uploads/2011/08/Simple-Mobile-Marketing-Strategy2.pdf · Vivid Image has created this Simple Mobile Marketing Strategy