• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Speed and Simplicity: Design and Usability for Multi-device Websites
 

Speed and Simplicity: Design and Usability for Multi-device Websites

on

  • 828 views

We’ve entered the age of sequential and simultaneous browsing. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. Tablets and mobile remain hot topics for ...

We’ve entered the age of sequential and simultaneous browsing. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. Tablets and mobile remain hot topics for sales, use, and design. In an age where most users are accessing sites via multiple devices, top companies are focusing on fast and clean delivery of information.

This webinar focused on how new realities are changing web design, web design process, and usability standards.

Session Outline
• Ubiquitous computing, ubiquitous internet
• Sequential and simultaneous browsing
• The rise of the tablet
• Flat design for a lumpy web
• Speed matters
• Usability strategies

Statistics

Views

Total Views
828
Views on SlideShare
824
Embed Views
4

Actions

Likes
5
Downloads
4
Comments
0

1 Embed 4

https://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Speed and Simplicity: Design and Usability for Multi-device Websites Speed and Simplicity: Design and Usability for Multi-device Websites Presentation Transcript

  • byDougGapinskiSpeed &Simplicity
  • chrome.com/racer
  • @DougGapinski mstoner.com responsive.lyME
  • SHARE#mstoner @DougGapinski
  • mstonerblog.comSTEAL
  • STEALmstonerblog.com
  • Ubiquitous internetPlanningDesignTablets & TouchSpeedUsability
  • as coined by Mark Weiser of Xerox PARCUBIQUITOUSCOMPUTING
  • UBIQUITOUSCOMPUTINGINTERNET
  • 61%39%offlineonlineHow much of theworld’s populationis online?source: ITU
  • 022.54567.590Americas Asia Pacific Middle East Africasource: ITU+28%+45%+55%+82%AmericasAsia-PacificMiddle EastAfricaWhere is the biggest growthin mobile broadband?
  • 075000000015000000002250000000Americas Asia PacificTotal mobilebroadbandsubscriptions,2007 vs. 2013268MILLION2.1BILLIONin 2007in 2013source: ITU
  • 2020The year Google predicts theentire world will be online.source: CNN
  • What are some of the realitiesof ubiquitous internet?
  • SCREENS
  • “The technology required for ubiquitouscomputing: cheap, low-power computers thatinclude equally convenient displays...”--Mark Weiser of Xerox PARC
  • Aakash Ubislate tablet$69 ($20 for students in India)Archos 35 Carbon smartphone$120Cheap devices and displays for browsing
  • Lower quality displays that display limited informationPebble smartwatch$150Fitbit Zip fitness data collector$60
  • In some objects, sensors + connectivity matter more than displayFitbit Ariatransmits weight to appParrot Flower Powertransmits plantdata to app
  • 6 basic screensizes* for 22 ofthe most populartablets1200 x 1920800 x 1280768 x 1280600 x 1024600 x 8001536 x 2046Screensiz.es
  • 1200 x 1920800 x 1280768 x 1280600 x 1024600 x 8001536 x 20461200x1920800x1280768x1280600x1024600x8001536x20466 basic screensizes* for 22 ofthe most populartabletsScreensiz.es
  • That’s only the tablets!
  • SEQUENTIAL+SIMULTANEOUSUSEusing more than one deviceusing more than one device at the same time
  • 98% used more than onedevice within 24 hours.source: Google
  • 90% browsed sequentially:beginning a task on one deviceand finishing on another.source: Google
  • 66% used more than onedevice at the same time.source: Google
  • 66% used more than onedevice at the same time.81% if you alsoinclude televisions.source: Google
  • 22% performedcomplementaryactivities.source: GoogleFor simultaneous users,78% multi-tasked
  • for different screen sizesPLANNING
  • teehanlax.com: pixel density converter for handling images
  • PROTOTYPES
  • The primary purpose of a prototypeis to get to better, more useful work.REMEMBER!
  • The primary purpose of a prototypeis to get to better, more useful work.client educationbuy-in iterative buildingearly user testing visualizing content strategy
  • The primary purpose of a prototypeis to get to better, more useful work.IT’S CRAP!
  • Ask your clients to focus on thereading experience and typographyas the most important design choice.
  • styletil.es: style prototypes our own in-browser version
  • typecast.com: typography prototypes
  • typecast.com: can also generate style guides
  • Seesparkbox.com: mobile-first content prototypewith an in-browser responsive style tile+
  • uxpin.com: multi-device, in-browser prototypes
  • Adobe Edge Reflow: import PSDs, edit/add media queries, andexport CSS to the editor of your choiceJUNE17Coming
  • foundation.zurb.com: responsive, front-end framework
  • TABLETSThe rise of the
  • Tablet traffic to the web surpassedsmartphone traffic in December 2012.source: Adobe
  • All countries saw tablet traffic double(or more) in 2012).source: Adobe
  • Users spend 54% more time on tabletsthan they do on smartphones.source: Adobe
  • Users view 70% more pages on tabletsthan they do on smartphones.source: Adobe
  • Tablets are predicted to outpace desktopand laptop combined sales around 2015.source: Gartner
  • “New rule: every desktop design has to gofinger-friendly.” --Josh Clark (@globalmoxie)read this: Global Moxie blog
  • To build for the future, we need to makeour responsive designs more tablet-friendly.
  • Places primary navigation in easy range of fingers, on the sides or bottom.Example: Google +
  • Adjust designs for height to accommodate the dual display nature of tablets.read this: Luke W’s blog
  • uExample: Apple iPhoneAdjust designs for height to accommodate the dual display nature of tablets.
  • Use bigger touch target areas to accommodate finger / thumb input.Example: Good.isMIT researchshowed the averagefingertip is8 to 10 mm.~7 to 9 mmminimumrecommendedbased onmanufacturer.
  • Consider side-swipe navigation where appropriate.Example: Yale School of Management
  • Anchor content to the side of the browser (not just to the side of the body).Example: Quartz
  • Designing for speed
  • SKEUOMORPHICFLAT
  • Responsive design requires differentlayouts for different breakpoints.webster.edu
  • Layout means more design anddevelopment time per breakpoint...webster.edu
  • ...and multiply the breakpoints timesthe browsers / devices you’re testing for.Baseline browsers we test:• IE 8+• Firefox 18+• Chrome 24+Devices for mobile / tablet testing:• iPad 3• iPhone 4s• HTC DNA• Kindle Fire 2• Nexus 7• Galaxy S II• Droid Razr• iPhone 5
  • Simpler design makes it easier to designacross layouts, devices, and browsers.
  • Page weight has a linear, negative impacton conversions, page views, bouncerate, and returning visitors.Source: Web Performance Today
  • Tests at Amazon showed that every 100 msincrease in load time decreased sales by 1%.Source: Web Site Optimization
  • Speed touches nearly every measurablemetric of a web project.
  • That means speed is everyone’s problem.
  • Four things everyone on a web teamcan do to help with web performance.
  • 1. Learn how to check pageweight in your browser.
  • 2. Work to devise a solution the responsiveimages problem on the CMS level.
  • 3. Minimize the number of custom fontsand external widgets per page.
  • 4. Hire and talk to competent developers.
  • GOOD+FASTEXAMPLES
  • nd.edu 23 page requests / 333 KB mobile size / 2.8 MB desktop size
  • ct.edu 21 page requests / 410 KB mobile size / 420 KB desktop size
  • uvm.edu 38 page requests / 451 KB mobile size / 753 KB desktop size
  • Thanks to Erik Runyon,Director of Web Communications at Notre Dame,for the examples and data.Check out his blog and Higher Education RWD Directory at weedygarden.net.
  • Further reading on web performance:www.stevesouders.comwww.igvita.comwww.dmolsen.com
  • USABILITY
  • “If you aren’t talking to your users and lettingthem have a say, you aren’t doing UX.Keep the user at the heart of our work.”--@TimothyWhalen
  • What is a minimum viable strategy forpostdesktop usability testing?
  • 1. If you can, always user testyour prototypes AND your alpha site.
  • 2. Perform critical path testing for eachbreakpoint where layout changes.mobile tablet desktop
  • 3. Test users on different devices toconfirm input types work intuitively—a minimum is mouse & trackpad vs. touch.
  • 4. Always do usability testsfor the mobile breakpoint.
  • Gotomeeting.com: make user the presenter, enable webcam, and record.
  • Pros:Works remotelyCons:Doesn’twork for mobileHack:Ask your desktop usersto make the browsermobile-sizedThis hack exposessome design flaws, butdoes not offer insightabout touch input.
  • uxrecorder.com: make user the presenter, enable webcam, and record.
  • Pros:Does mobile andtablets great!Cons:Does not work remotely
  • Source: MailChimpHack-ish:Laptop huggingto test mobile usersremotely
  • 1. User joins gotomeeting orother screen sharing softwarevia laptop.2. User shares laptop camera.3. User “reverse hugs” laptop,pointing laptop camera atmobile device
  • To embrace the complexity of the multi-deviceweb, design and test for speed and simplicity.
  • @DougGapinski mstoner.com responsive.lyTHANKS