ETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore

Designing for Touch Not Just for Mobile Anymore

Paul D. Hibbitts Interaction Design | Multi-device Experience | Education

http://www.flickr.com/photos/aecreations/3833459149/ http://instagram.com/p/W2BuMLQLRB/#

http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/

Coming to a Screen Near You?

http://incredibletogether.asus.com/vivobook.html

Notebook/desktop touchscreen poll

Topics for Today   Touch interaction guidelines   Retrofitting an existing design (activity)   Creating a new design (activity)

FYI: Touch friendly is also a practical first step towards…

a multi-device friendly design! and…

anytime, anywhere access for our students!

Please Do Touch the Glass http://www.flickr.com/photos/ebayink/6816581064/

https://www.youtube.com/watch?v=5adFf7-ZFv4

Touch Interaction Guidelines   Touch Target Size   Placement of Controls   Behavior   User Effort   Gestures

Microsoft.com Apple.com

Touch Target Size

Touch Target Size

Fingers, Thumbs and Placement

http://sarahlynndesign.com/blog/article/catering-to-touch-devices#

Placement of Touch Targets

Behavior

Behavior

User Effort

User Effort

Gestures

http://www.lukew.com/ff/entry.asp?1071

Gesture Discoverability

http://mobiledesignpatterngallery.com/

Retrofitting an Existing Design http://www.flickr.com/photos/wsdot/6333431882/

Making an Existing Design Touch Friendly

  Review touch interaction friendliness   Keep overall design, adjust where needed

ACTIVITY

Touch Interaction Friendliness Assessment

Please use the provided

one-page touch interaction design checklist

Creating a New Design http://www.flickr.com/photos/trufflepig/1376217629/

Creating a New Design That is Also Touch Friendly

  Apply a user-centered design process (as usual)   Additional design issues –  Identify multi-device usage scenarios – Envisioning multi-device designs

“User-centered design (UCD) is an approach to design that

grounds the process in information about the people

who will use the product.”

– UX Professionals Association

User-Centered Design

Analysis

Design

Evaluate User Goals & Learning Objectives

Typical Analysis Techniques   Interviews   Observations   Personas   User Stories   Scenarios

http://xkcd.com/773/

What is a User Story?   A brief description of functionality that brings

value to the end-users of a product

Classic User Story Structure “As a <role>, I want to <goal/desire> so that <benefit>”

Brainstorming Multi-device User Stories

  First, assume same content for all devices   Second, consider new possibilities of mobile – Device capabilities – Situational differences

This Multi-device User Story Structure Can Help…

“As a <role> when/while <situation>, I want to <goal/desire> so that <benefit>”

Example User Story “As a student, I want to access assignment details when working with my project group so that I can ensure we’re are on-track to meet the assignment requirements”

Tips for Creating User Stories   Write from the end-user perspective   Keep stories brief and as simple as possible   Start with broad/high-level stories,

and decompose into smaller stories as needed   Use the “five Whys” to help reveal goals/value   Identify expected usage priority

ACTIVITY

Brainstorm Multi-device User Stories

“As a <role> when/while <situation>, I want to <goal/desire> so that <benefit>”

http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand

Responsive Web Design

http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

Responsive Web Design Changes the Design Process Too

Traditional 1.  User Research 2.  Wireframes 3.  Visual Design 4.  Development 5.  Delivery

Responsive Web Design 1.  User Research 2.  Content Prioritization 3.  Development

–  Sketch –  Wireframe –  Visual Design –  Prototype –  Test (and iterate)

4.  Delivery

http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

Responsive Web Design Sketch Sheets, by Jeremy P. Alford

Using a Responsive HTML Framework for Prototyping

Testing Responsive Web Designs   Start with smallest device size on hand   Try it out on as many devices as possible   To supplement your testing using a touchscreen

desktop/notebook, try online tools such as: – Responsivator

(http://dfcb.github.io/Responsivator/) – Responsive Design Boomarklet

(responsive.victorcoulon.fr/)

Responsive Web Design

Testing Tool Demo

It’s a Wrap http://www.flickr.com/photos/katerha/6476170803/

Summary   Make all of your websites touch-friendly… now!   Touch-friendly design is a step towards better

multi-device support   But, don’t let devices become your focus   Let’s always think first about user needs   Bring your designs to life as early as possible

Resources Shared Today   One-Page Touch Interaction Design Checklist – http://bit.ly/etugtouchguidelines

  Multi-device User Story Template – http://sdrv.ms/16LnYoQ

  Responsive Web Design Sketch Sheets – http://bit.ly/etugsketchsheets

Where to Next? www.paulhibbitts.com/resources.html – Multi-device experience design resources – These slides (and previous presentations)

Thank You! Further Questions? Contact Info Web: paulhibbitts.com Email: paul@paulhibbitts.com Twitter: @hibbittsdesign LinkedIn: linkedin.com/in/paulhibbitts

Multi-device Course Companion Demo hibbittsdesign.com/courses/cmpt-363-133-prototype/