MOBILE DESIGN AND PROTOTYPING

Jeanette DeHoff 9.19.14

www.jeanettedehoff.com

25% of Americans use

mobile devices (primarily

tablets) only to access the

Internet.

There are five times as

many cellphones in the world

as there are PCs

The Social Media Hat – Why Your Business is in Danger (Nov 2013) http://www.thesocialmediahat.com/blog/why-your-business-danger-11262013

NEA

RLY

HALF

OF

CO

NSU

MER

S

say they won’t return to a website if it doesn’t load properly on their mobile devices.

iMedia Connection - 27 marketing myths (that we all believe) (Nov 2013) http://www.imediaconnection.com/content/35471.asp

are used only once before they are removed from the device

99% of apps

iMedia Connection - 27 marketing myths (that we all believe) (Nov 2013) http://www.imediaconnection.com/content/35471.asp

even in the smaller categories, are happening on a mobile phone

Roughly one in seven searches

mobiThinking - Global mobile statistics 2012 Part D: Consumer mobile behavior (Jun 2012) http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/d#mobile-search

MOBILE FIRST DESIGN - WHAT IS IT REALLY?

Design for the optimal experience on the smallest screen first.

Evaluate each addition as you scale up the design through tablets/mid sized up to desktop

DESIGNERS AND DEVELOPERS LIVING TOGETHER – MASS HYSTERIA!Bandwidth usage

Images – Retina optimized versus pixilation

Intuitive interface and content hints

Pre-loading content

INPUT METHODS

Mouse / Finger / Something else

How big is your finger?

Innovation versus established methods

Accessibility

PROTOTYPING

FAIL FAST AND LEARN FASTER

USES

Test your assumptions

Communicating ideas and intentions

Usability testing

LOW FIDELITY PROTOTYPES

Pros Fast to produce; easy to change Cheap way to get feedback and discover problems early in the process

Cons Some finer details get lost and can impact findings

HIGH FIDELITY PROTOTYPES

Pros User gets a real feel for the product

Cons Expensive and time consuming to create; costly to change

Questions?

EXAMPLES St Paul’s School (http://www.stpaulsschool.org.uk/)

They defined the central point of the image and crop it as the screen gets narrower rather than shrinking the image They also took away the imagery in the callouts near bottom

Cacao Tour (http://www.cacaotour.com/index.php/es/inicio)

Rather than hiding their menu behind a button, they get rid of the hero image on smaller formats and stacked the menu front and center

Removed background images Entire section of images is hidden in mobile

dConstruct 2011 (http://2011.dconstruct.org/)

Their 3-item menu turns into icons that are easy to find and click

Robot... or Not? (http://robot-or-not.com/)

They reorganized their content in mobile based on priorities - they don’t just take the content left-to-right and top-to-bottom

Authentic Jobs (http://www.authenticjobs.com/)

Dropped data from the table to allow it to get smaller (the 'new tag and the additional company info) Other examples of responsive data tables:

Reflow - Takes the data out of table form and has an entry for each, stacked one after the other (http://demos.jquerymobile.com/1.3.0-beta.1/docs/tables/table-reflow.html)

Column toggle - Reduces the number of columns but still lets you decide (http://demos.jquerymobile.com/1.3.0-beta.1/docs/tables/table-column-toggle.html)

Very cool tool for taking paper prototyping to the next level: POP App (https://popapp.in/)