This document discusses various topics related to mobile design and usability testing. It notes that many users will not return to a website that does not load properly on mobile devices. It also mentions that roughly 1 in 7 searches are now happening on mobile phones. The document provides tips for designing for mobile like starting with the smallest screen and testing assumptions. It discusses pros and cons of paper prototyping versus high-fidelity prototyping. Examples of responsive design techniques from various websites are also listed.

1. Jeanette DeHoff
9.19.14
www.jeanettedehoff.com

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

3. 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

4. are used only once
before they are
removed from the
device
iMedia Connection - 27 marketing myths (that we all believe) (Nov 2013)
http://www.imediaconnection.com/content/35471.asp

5. Roughly one in
seven searches
even in the
smaller
categories, are
happening on a
mobile phone
mobiThinking - Global mobile statistics 2012 Part D: Consumer mobile behavior (Jun 2012)
http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/d#mobile-search

6.  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

7. Bandwidth usage
 Images – Retina optimized versus pixilation
 Intuitive interface and content hints
 Pre-loading content

8. Mouse / Finger / Something else
How big is your finger?
 Innovation versus established methods
 Accessibility

10. Test your assumptions
Communicating ideas and intentions
 Usability testing

11. 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

12. Pros
 User gets a real feel for the product
 Cons
 Expensive and time consuming to create; costly to change

13. Questions?

14.  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/)