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.
26. Creating a New Design
http://www.flickr.com/photos/trufflepig/1376217629/
27. 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
28. “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
32. What is a User Story?
A brief description of functionality that brings
value to the end-users of a product
33. Classic User Story Structure
“As a <role>,
I want to <goal/desire>
so that <benefit>”
34. Brainstorming Multi-device
User Stories
First, assume same content for all devices
Second, consider new possibilities of mobile
– Device capabilities
– Situational differences
35. This Multi-device User Story
Structure Can Help…
“As a <role> when/while <situation>,
I want to <goal/desire>
so that <benefit>”
36. 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”
37. 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
47. 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
50. 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/)
53. 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
54. 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