Class 07 Notes

 

Topics

  • Actions & Inputs
  • Interaction Design Patterns
  • Interaction Best Practices
  • Usability and Accessibility

Today’s class objectives are to gain a better understanding of:

  • How is IA (Information Architecture) different for mobile design?
  • What do you need to consider when designing for touch-based interfaces?
  • What are the appropriate sizes and dimensions for touch targets?
  • What are the common touch gestures?
  • What do we do now that we no longer have a hover?
  • What is the best way to optimize user input for the mobile experience?
  • How to use input types, attributes, and masks in your design.
  • What are interaction design patterns?

Team presentations

One Capability example – One Navigation example


Actions

Designing the right affordances and  controls for touch-based user interfaces requires:

  • Ensuring that touch targets are appropriately sized and positioned.
  • Being familiar with common touch gestures and how they  map to people’s objectives.
  • Covering the loss of hover-based interactions.
  • Making sure we don’t forget about indirect manipulation along the way
What are the appropriate sizes and dimensions for touch targets?

Recommended Target Sizes

Apple recommends:

a minimum target size of 44 points wide 44 points tall.

Microsoft goes further and suggests:

  • a recommended touch target size of 9mm/34px;
  • a minimum touch target size of 7mm/26px;
  • a minimum spacing between elements of 2mm/8px.
Where do we touch?

VIDEO: Luke W – Touch Gestures

This video was made in partnership with Intel for their touchscreen laptops. Even though the content is directed towards desktop applications and Window-based platforms, the content in this video is really useful to mobile design.

Cover the hover

On mobile, your options for on-hover menus are: on  screen, on tap/swipe, on a separate screen, or (my favorite)  gone for good.

Useful Tips

• Go big with appropriately sized and positioned touch  targets.
• Learn the language of touch by familiarizing yourself with  common touch gestures and how they are used to navigate  and interact with objects and screens.
• Don’t be afraid to push toward natural user interfaces  (NUIs) that make content (not chrome) the focus of people’s actions.
• Transition your on-hover menus to mobile using the most  appropriate solution for your site.
• Remember to consider non-touch and hybrid devices when  designing your mobile web interactions.

Resource

Touch Gesture Reference Guide


Input

While there are lots of great reasons to avoid requiring precise input when people are just “one eyeball and one thumb,” there are just as many reasons to let people contribute as much as they see fit from their mobile devices.

 

  • Actively encourage input and allow people to contribute and create using their mobile devices.
  • Make sure your questions are clearly presented with mobile-optimized labels.
  • Get rid of the pain associated with accurate mobile inputs by using input types, attributes, and masks in your designs where possible.
  • Consider using custom input controls if they really help people provide accurate answers without a lot of work.
  • Lay input possibilities out appropriately for sequential, non-linear, and in-context contributions.
  • Take advantage of mobile device capabilities to capture input in new ways.
Tip
  • Top-aligned labels work best
  • Labels inside input fields can work even better

When entering a username into the first input field, the label inside disappears. (Note: this is default behavior for the HTML5 input attribute placeholder which, according to the spec, is intended for tips, not labels.)

Standard input types

Input attributes

These include autocapitalize and autocorrect. Turn these off.

Input masks

Input masks can help make complex inputs manageable on mobile by providing clear input cues up front and restricting people’s inputs so they don’t make mistakes.

HTML5 Form Example

http://www.html5rocks.com/en/tutorials/forms/html5forms/

Go to this link on our smartphone to see how the input types work on a touchscreen interface.


Interaction Design Patterns

Interaction design patterns are a way to describe solutions to common usability or accessibility problems in a specific context.[1] They document interaction models that make it easier for users to understand an interface and accomplish their tasks

Basic
http://www.welie.com/patterns/
Mobile patterns
http://www.mobile-patterns.com/
iOS patterns
http://pttrns.com/share
Android patterns
http://www.androidpatterns.com/

This is androidpatterns.com, a set of interaction patterns that can help you design Android apps. An interaction pattern is a short hand summary of a design solution that has proven to work more than once. Please be inspired: use them as a guide, not as a law.

Leave a Comment