• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ETUG Spring 2013 - Designing for Touch: Not Just for Mobile Anymore
 

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

on

  • 1,455 views

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

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.

Statistics

Views

Total Views
1,455
Views on SlideShare
1,452
Embed Views
3

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Designing for TouchNot Just for Mobile AnymorePaul D. HibbittsInteraction 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 NearYou?http://incredibletogether.asus.com/vivobook.html
    • Notebook/desktoptouchscreen poll
    • Topics for Today  Touch interaction guidelines  Retrofitting an existing design (activity)  Creating a new design (activity)
    • FYI:Touch friendly is alsoa practical first step towards…a multi-device friendly design!and…anytime, anywhere accessfor our students!
    • Please Do Touch the Glasshttp://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.comApple.com
    • Touch Target Size
    • Touch Target Size
    • Fingers,Thumbs and Placementhttp://sarahlynndesign.com/blog/article/catering-to-touch-devices#
    • Placement of Touch Targets
    • Behavior
    • Behavior
    • User Effort
    • User Effort
    • Gestureshttp://www.lukew.com/ff/entry.asp?1071
    • Gesture Discoverabilityhttp://mobiledesignpatterngallery.com/
    • Retrofitting an Existing Designhttp://www.flickr.com/photos/wsdot/6333431882/
    • Making an Existing DesignTouch Friendly  Review touch interaction friendliness  Keep overall design, adjust where needed
    • ACTIVITYTouch InteractionFriendliness AssessmentPlease use the providedone-page touch interaction design checklist
    • Creating a New Designhttp://www.flickr.com/photos/trufflepig/1376217629/
    • Creating a New DesignThat 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) isan approach to design thatgrounds the process ininformation about the peoplewho will use the product.”– UX Professionals Association
    • User-Centered DesignAnalysisDesignEvaluateUser Goals& LearningObjectives
    • Typical Analysis Techniques  Interviews  Observations  Personas  User Stories  Scenarios
    • http://xkcd.com/773/
    • What is a User Story?  A brief description of functionality that bringsvalue to the end-users of a product
    • Classic User Story Structure“As a <role>,I want to <goal/desire>so that <benefit>”
    • Brainstorming Multi-deviceUser Stories  First, assume same content for all devices  Second, consider new possibilities of mobile– Device capabilities– Situational differences
    • This Multi-device User StoryStructure 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 assignmentdetails when working with my project groupso that I can ensure we’re are on-track to meetthe 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
    • ACTIVITYBrainstorm Multi-deviceUser 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-brandResponsive 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 Changesthe Design Process TooTraditional1.  User Research2.  Wireframes3.  Visual Design4.  Development5.  DeliveryResponsive Web Design1.  User Research2.  Content Prioritization3.  Development–  Sketch–  Wireframe–  Visual Design–  Prototype–  Test (and iterate)4.  Delivery
    • http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetsResponsive Web Design SketchSheets, by Jeremy P. Alford
    • Using a Responsive HTMLFramework 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 touchscreendesktop/notebook, try online tools such as:– Responsivator(http://dfcb.github.io/Responsivator/)– Responsive Design Boomarklet(responsive.victorcoulon.fr/)
    • ResponsiveWeb DesignTestingTool Demo
    • It’s a Wraphttp://www.flickr.com/photos/katerha/6476170803/
    • Summary  Make all of your websites touch-friendly… now!  Touch-friendly design is a step towards bettermulti-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)
    • ThankYou! Further Questions?Contact InfoWeb: paulhibbitts.comEmail: paul@paulhibbitts.comTwitter: @hibbittsdesignLinkedIn: linkedin.com/in/paulhibbittsMulti-device Course Companion Demohibbittsdesign.com/courses/cmpt-363-133-prototype/