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