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

Drop-downs are the UI of last resort

• 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