Upload
paul-hibbitts
View
108
Download
4
Tags:
Embed Size (px)
DESCRIPTION
While student use of tablets and mobile phones continues to experience tremendous growth, touchscreens are destined for even broader use with the release of such products as Windows 8 and the Google Chomebook Pixel. In this session user experience consultant Paul Hibbitts shares some of his core design techniques and principles to create touch-friendly websites. Techniques such as user stories and responsive design sketching will be explored, along with touchscreen interaction design principles. In addition to discussion, participants will undertake several workshop activities. While not required, participants are encouraged to bring a touch-enabled device along with a notebook to the session.
Citation preview
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: [email protected] Twitter: @hibbittsdesign LinkedIn: linkedin.com/in/paulhibbitts
Multi-device Course Companion Demo hibbittsdesign.com/courses/cmpt-363-133-prototype/