Here are my notes from Luke Wroblewski’s talk on current mobile design.
- Mobile moment – began in 2011. Youtube and CNN hit this point in 2014.
- Email hit 50% mobile in 2013, Paypal $27B of mobile revenue in 2013
- 40% of Yelp’s revenue from mobile
- 75 % of Twitter’s revenue from mobile
- Should be specific not nebulous
- Validate agains the principles
- Sample principles
- content emphasis over the UI
- Reduce the number of choices
- Give features a permanent home
- increase efficiency
- Straightforward is better than clever
Pattern Library – a group of elements that are used in the same way for the same tasks or objectives
Design considerations – what we think through while coming up with a design
- Think outside the display box
- People will scroll as long as they have a reason to do so
- Clicking is a decision, scrolling is a continuation
- Provide core information first and supplemental information in other ways
- Off canvas is especially useful for complex and deep content structure
- Obvious always trumps clever
- Hamburger – People don’t know what it is for. Just because someone Ilife Facebook) uses something shouldn’t be our reason for using it. The word menu with affordance over icon had 20% more use
- Make primary actions visible
- Make contextually relevant actions visible
- Visible beats hidden
- For ND 1% of people click and 84% click on first position.
- To make them useful Amazon put descriptions and photos to show all carousel options instead of little dots or arrows.
Inputs and Actions
- Minimize typing mistakes.
- Remove inline input hints as people think it’s already filled out. If you do have to have hints, be sure to make strong contrast between hint text and what users may enter.
- look seriously at optional fields and cut what you don’t really need.
- Provide inline realtime validation and feedback to form fields (i.e. When a user types gnail.com alert them “Did you email@example.com?”)
- Remove repeat email entry
- customize keyboard for input type to provide needed characters when needed
- turn autocorrect/autocapitalize off where helpful
- Use input masks where appropriate
- Avoid gradual reveal
- show people what they type (i.e. passwords)
- Autofocus on primary input controls
- Look for barriers to getting input and eliminate.
- Augment inputs when appropriate but know you loose screen space
- Consider tag inputs
- Manage the keyboard and remove or show when needed
- Condense input values where possible (i.e. use multiple picker menu or payment info)
- Keep people in input mode
- hide irrelevant fields until needed like phone extensions
- Avoid splitting single entry input fields like phone numbers
- use large number keyboard where appropriate
- Square payment implementation works very well
- Dropdown should be the selectors of last resort
- Stepper, Slider, Switch, Date picker, Segmented controls Dialogs
- Reduce input effort.
- Aim for mobile-optimized controls
- Fall-back to drop-downs or text inputs
Make primary actions obvious
- Change color
- Make wording specific (i.e. Register/Join instead of Next)
- Position in an appropriate/logical location
- Create common visual language for actions to reinforce primary actions
Feedback and Communication
Teach in the Moment
- Interfaces should coach in context. Just-in-time education
- Surface tips and help in context
- Find appropriate user actions to trigger help
- Communicate what’s possible
Context is Critical
- Ensure you get the permissions you need
- Ask when it’s appropriate
- Explain yourself before asking permissions