The Mobile Opportunity
Arguing for Mobile
- With the growth in mobile, it's difficult to argue that we shouldn't address mobile
- The Mobile Moment: the point when mobile sales surpassed non-mobile sales
- We have seen significant growth in mobile holiday shopping, mobile email opens, and mobile PayPal payments
Our Design Bias
- We spend most of our time looking at our computer, and have been working with computers for a long time
- We use the mouse and keyboard to build things and we are building things that use the mouse and keyboard
- We have lots to learn and lots to unlearn
- There is a difference between being thinking mobile-centric and thinking desktop-centric plus porting to mobile
- We are mostly being desktop-centric plus porting
Design Considerations
Product Vision
- The central idea or concept.
- "What are we making, for whom, and why?"
Design Principles
- Characteristics used to evaluate decisions
- Whenever someone has an idea, it needs to be validated against the concrete and stated design principles
Design Considerations
- How/what to think about while designing
- Shake off desktop tendencies
- Think and create in a mobile "native" way
- Make informed decisions
- Mobile devices have a lot of data about the current context
Layout & Navigation
- How do we organize and present mobile screens
- Think outside the display box
- Going from desktop to mobile, the tendency is to stack the content
- Offscreen elements makes use of all directions. We are not limited to stacking.
- Desktop: "This is my canvas, let me arrange things on it" vs Mobile: "Where can I stash stuff until it's needed?"
- Don't fit everything on a small screen, make a fake big screen and move it around.
Obvious Always Wins
- Don't just copy "patterns"
- Think through what is the primary content and actions vs what's secondary content and navigation
- Visible triumphs hidden, which forces prioritization, which is good
Content First, Navigation Second
- Dashboards can work: use content as the navigation
- Web sites are struggling to accommodate browsing. Finding somethings specific is fine, but how to facilitate browsing?
- Look for things in the page that are uniquely suited for mobile behaviors, bubble those forward
- Look for ways to integrate content into navigation
- Start small and enhance upward
Inputs & Actions
- How do we allow people to get things done?
Minimize Typing Mistakes
- In general, do not put things inside boxes that you want users to fill in
- Offer designed real time input validation
- Keeping a form thin and light vs providing context and extra information is always a balance
- Use input types
- Input masks enforce a particular format on an input. Make sure to maintain format and that it doesn't look like an answer
- Allow users to see and verify sensitive inputs
Jump Right Into Input
- As soon as possible and practical, move into input mode
- provide input prompts
- account for the smaller screen space during input mode
Condense Input Controls
- Remove optional fields
- Remain in input mode
- Hide irrelevant controls
- Avoid splitting single input entities
- Find the balance between combining/separating inputs
- Be mindful of existing conventions
Drop-downs are the UI of Last Resort
- Fundamental issue: they're a lot of work
- Consider steppers, action sheets, segmented control/radio button groups, switchers, and sliders as alternatives
- There are a lot of options, use what's appropriate given the content and context
- Be aware of the limitations in alternate controls
- Reduce input effort
Make Primary Actions Obvious
- Button shapes help
- Keep a clear visual hierarchy
- Consider echoing core interactions, but be aware that OS conventions don't consider context
Gestures are Sloppy
- Allow any number of fingers
- Don't try to be too clever
- Big screens invite big gestures
- Be careful with multiple scroll directions
- Design for thumb flow
Feedback & Communication
- How do we let people know what's happening?
Teach in the Moment
- Don't hold the user hostage with tutorials
- Teach in the moment, in the context
- Teaching doesn't need to be explicit, consider animation cues
- Onboarding and tutorials are different, use each when appropriate
- Surface tips/help in context
- Find the appropriate user actions to trigger help
- Communicate what's possible
This was a great day of information. The mobile space is exciting and moving fast. There is so much to learn here.