AEA Boston 2014 Day 3 notes

Yes, I skipped posting my notes from Day 2. I can’t be bothered right now !

managing form inputs on mobile

Inline validation

  • DO IT!
  • drastically increases accuracy
  • attempt to pre-validate common inputs like email domains (e.g. detect gnail.com, suggest “…@gmail.com”)

Use Input Masks

increases formatting & accuracy

avoid accidental entries

if you put a hint in a form field, make sure it doesn’t just regurgitate the label

  • also ensure it doesn’t look like the question is already answered to the user - otherwise users will have a tendency to enter the label/hint as their answer

Help the user input data effectively

  • autocapitalize=”off|words|characters|sentences”
  • autocorrect=”off”
  • input type=”number|tel|email|url|date|range”
  • input masking

Avoid gradual reveal

  • don’t reveal the goal progressively as the user enters information
    Set Correct expectations
  • don’t look like an answer

Password fields

  • don’t bother hiding the password - users can type in their password easily
  • increases engagement
  • doesn’t decrease security in any way
  • provide toggle to “hide password” if someone is feeling paranoid
  • windows 8 style password hiding is also silly
  • on websites use password field by default with explicit “show password” action to account for back-button

Jump right into input

When the user initiates an action that shows an input of ANY type, make sure to put them into the correct type of input mode

  • focus a the first text field
  • show photo library selection if relevant
  • snuggle controls at the bottom of the screen right above the keyboard - allows you to provide contextual controls that feel like part of the keyboard
  • can assist with filling in the form/navigating the form

Accomodating the virtual keyboard

Virtual keyboard takes up around 50% of the vertical space of any device in any orientation

try using horizontal space

  • tag inputs - show a series of tag links
  • when the user taps on the tag, put it into the input
  • exists as an alternative to more traditional UIs, like dropdowns
  • manage the keyboard - hide the keyboard if the user isn’t going to be immediately entering text e.g. user scrolls through a list, unfocus text field
  • users actually want to find ways to explicitly - can provide a “Just In Time” action that may replace some part of the UI that un-focuses the text field

Just In Time Actions

Provides an interaction cue only when it is relevant to the user

Collapsing form inputs

  • smart defaults - if possible mine your data to figure out the most common inputs
  • make it easy to change the defaults - e.g. use a picker menu (“thing”)
  • multiple picker menu - lets you pick several different columns simultaneously
  • generally avoid recreating controls if possible - iOS7 has a input type=”month” which yields a month/year multipicker
  • date|time|datetime all yield native implementations at least in iOS (various versions)
  • hide irrelevant controls - forms completed more often/less errors/higher satisfaction/etc.
  • e.g. hide phone number extension, additional phone numbers
  • avoid splitting single-entry form entities - people generally have a hard time moving between input fields
  • people end up entering full names in “first name” fields anyway - allow users to set an alias if you want to use their name in the UI
  • helps make “required” inputs easier to figure out
  • remove input fields you can infer - input zip code, infer city/state – then present in UI - if there is more than 1 inferred value, let user pick via picker/stepper/dropdown
  • credit/debit card capture - get/validate CC#, slide number back off left, show MM/DD CVV#
  • visual cues in left side of field to show card type/or CVV location
  • people love getting the appropriate input keyboard
  • people love not having to leave the input
  • people wondered how to go back - square made the backspace button go back to the previous field
  • STILL do not show the dots to hide CC# or other sensitive information
  • Progressive enhancements - select menus
  • javascript -> input mask
  • supports type=”month”, switch to < input type=”month” />

summary:

- Keep people in input mode
- Avoid splitting single inputs
- Be mindful of existing conventions
  • minimum of 3 taps in a mobile UX
  • pages full of dropdowns are the bane of a mobile user’s existence
  • detractors - hard to navigate
  • selection only
  • poor support for hierarchy
  • limited styling options
  • stepper - move through a list of items
  • steppers surrounding a field are superior - editable
  • separates the touch targets
  • action sheets/dialog/popup - display a set of choices related to task
  • provides alternatives
  • Segmented control - mutually exclusive choices
  • radio button group
  • closely related items
  • switches, sliders, segmented controls can all be used to replace dropdowns

summary

  • reduce input effort
  • aim for mobile-optimized controls
  • fall-back to drop-downs or text

Make primary actions obvious

make sure the hierarchy doesn’t hide your actions

  • if it blends into the top of the screen, users WILL miss it

primary actions should be very obvious

  • make it a button
  • make sure it doesn’t blend with a heading or footer
  • don’t put it in the title bar at the top a la iOS
  • or put it in the header but give it nice contrast and make it look like a button

Visual hierarchy

  • where the user differentiates between different modes of interaction
  • help the users figure out “what is this” and “how do I use it”

Core interaction

  • reusable interactions & cues which can be used through your application

Feedback & Communication

Teach in the moment

Tutorials suck.

  • user cannot interact with the app until the tutorial releases the gates

Just in time education

  • when the user performs an action that could use some explanation, provide explanation AT THAT time.

Check out Mobile Design Pattern Gallery by Theresa Nielson

  • Intuit UX testing - User dropped into interface – customer felt lost
  • Multiple-step intro tour – nobody read it & immediately skipped it - about 90% of people just want it gone
  • In context tour – comments: “I just want to make this get out of my way”
  • Just in time – customers had a good sense of what was available to them and a clear first step

Just in time tips: help out users, but doesn’t get in the way

Summary

  • surface tips/help in context
  • find appropriate user actions to trigger help
  • communicate what’s possible

Context is critical

Tutorials vs Onboarding

  • Tutorial introduction/overview to the application
  • Onboarding required, one-time setup - if you need to ask permissions, make sure to introduce the user to the features that will utilize those permissions - …sometimes
  • 2 dialog system - display an in-app dialog that asks the user if they’ll give permission before requesting at the OS level
  • prevents many people from denying the system-level permission, which is a PITA to re-enable
  • prompt the user with the consequences - “this will really suck if you don’t get permission”
  • ask when appropriate - user chooses to search your contacts, ask for permission
  • user wants to post a photo? ask for permission

RESS

combining responsive design + server-side optimized

  • only send what the client needs: media, images, etc.
  • one codebase
  • other stuff

Get better at learning!

figure out ways to learn, which will help us unlearn and learn simultaneously