mobile design and prototyping
DESCRIPTION
Some basics on designing for mobile devices and using prototyping to expand on ideas.TRANSCRIPT
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/)