Day 21: Designing for Mobile
Designing for mobile viewing is more than just making sure the content fits on a small screen. It requires a detailed understanding of how and where our user will use the application.
What it is.
We need to understand where, when and under what conditions people will be using the application in order to ensure we’ve designed something that isn’t annoying and impossible to use under those conditions.
How it’s used.
How do we figure that out? With usability testing, and design ethnographies, and other research of course.
But also with some basic best practices that we’ve learned in the last decade of mobile application design.
Discussion.
Mobile users can be doing just about anything while trying to access our applications and reach their goals.
- They could be sitting on the couch thumbing through a menu thinking about ordering dinner while watching TV.
- Or stopped at a light trying to find the address for the restaurant they’re meeting friends at that night.
- Or on the train heading home after work and trying to order dinner for pick up once they get to their destination.
When we’re designing a mobile-friendly website for a restaurant, we want to understand all these use cases and ensure that we’ve designed for each.
Full attention.
Mobile users are the most like laptop/desktop users. The biggest constraint isn’t their divide attention, but the size of the screen.
Think about the core functionality of the application or website, and how you can design an elegant mobile experience with minimal real estate.
Split attention.
Mobile users are looking back and forth between the mobile site and whatever else they’re doing — watching TV, talking to friends, waiting for their train stop. These folks need clear visuals and a very simple UI that they can understand with just a glance.
Text should be large enough to read quickly, and headers not too wordy.
What’s the thing they want to do the most? Put that front and center. Don’t make them hunt for it.
On the go.
On the go users are the hardest to design for. They’re barely paying attention to our application at all. They’re in a rush, taking quick glances at the UI, and probably not reading.
Knowing that, copy (if any) needs to be very simple, a couple words at most. Buttons should be obvious. User flow straightforward.
If you can give them a shortcut, like voice command, or a slide up menu that’s always available they’re less likely to get lost, frustrated, or lose interest and quit.
Device specific capabilities.
The benefit of designing for mobile is that you have a lot of features on a phone that you don’t have access to on a laptop. Take advantage of device specific capabilities like…
- GPS for location tracking and identifying
- Compass to give directions
- Gyroscope tracking movement, acceleration, gestures with the phone
- Inputs like audio, video, image, thumbprint
- Bluetooth, RFID, etc.: connectivity and “Near Field Communication”
- Light sensors, environmental awareness
And more with APIs!
Your Assignment
Design a mobile app that uses one of the device specific capabilities.
Brainstorm a mobile application design that uses one of these device specific capabilities. Explain who your users are, how they’d use your app, and how one of these features would improve the user experience.
- GPS for location tracking and identifying
- Compass to give directions
- Gyroscope tracking movement, acceleration, gestures with the phone
- Inputs like audio, video, image, thumbprint
- Bluetooth, RFID, etc.: connectivity and “Near Field Communication”
Create a pdf and share your designs in the comments and/or on Dribbble and Twitter #100daysdesign.
Originally published at 100days.design on August 4, 2017.
