Look at your phone: is it large, does it have buttons? If you’re one of the growing population of smartphone owners, the answers are probably yes and no respectively. Here’s what you need to know about designing navigation for phones in 2020.
Phones Have Changed
Phones have changed. Like, a lot. From Mulder and Scully’s bulky handhelds to BlackBerry’s keyboarded cell phones, to the modern Androids and iPhones of a couple years ago with predictable button placements. They got larger and more useful, then smaller and caught on fire, and now they’re getting larger again and cutting out the buttons even more.
With these changes come design challenges. How do users navigate mobile apps when the phones remove previously-available means of navigation? How do users find the navigation elements we put in for them when their phones are getting larger and the apps scroll to infinity? Users are expecting cleaner apps with more space for content, but if we want to keep the apps usable, there’s some new technologies and emerging patterns that we can take advantage of. I’m talking about motion gestures, voice controls and bottom navigation.
Motion Gestures
Smartphones have long been capable of motion control, but for the longest time mobile designers were still coming from a place of desktop app development: users scrolled and clicked using the closest approximation of a mouse. Motion control was the domain of games or specialized applications like maps that could use motion (mainly the gyroscope) to extrapolate your direction. Now, in 2020, motion gestures are catching on.
Mobile app designers should focus on implementing motion controls like the above into their app navigation. Even if there are backup UI elements (accessible, for instance, by tapping or scrolling with fingers), finger-less interaction allows most users to intuitively interact with the app even if their hands are full. It also cleans up the UI by removing unnecessary buttons, and adds a flair of sophistication and coolness to your app.
Some gestures you can implement are:
- Tilting phone vertically to scroll up or down.
- Flicking the phone left to select an item or right to go back.
- Shaking the phone away from the user completes a primary action.
Voice Controls
Everyone knows what Siri is, even if they don’t have a smartphone. Many people are probably familiar with Android’s Google Assistance equivalent, or at least the bevy of IoT smart phone voice controllers like Google Home, Amazon Alexa. Voice control is everywhere, from light switches to TVs to smart phone operating systems. In 2020, we’ll see voice controls in more apps, facilitating navigation beyond buttons.
There are a lot of uses for voice control in your app. Here’s some suggestions:
- Voice search: “Spotify, search for Viva la Vida by Coldplay.”
- Navigation: “Spotify, show me my playlists.”
- Action selection: “Spotify, pause song.”
Bottom Navigation
As I mentioned before, phones are getting larger and the apps are getting longer. That means the once-ubiquitous top app bar is fast becoming a thing of the past. Another factor contributing to its demise is the fact that most users interact with their smartphone using only their thumbs. That makes reaching towards the top of the screen awkward. Fortunately, the bottom navigation is here to fill that gap.
Bottom navigation keeps must-have navigation items at the users’ fingertips, which is useful if they don’t or can’t use voice controls. Apple and Google both have specifications on how to implement bottom navigation on their operating systems, but here are some trends you should expected to see – and steal – in 2020:
- Navigation collapses on scroll down, expands on scroll up.
- Swiping left or right on the navigation switches tabs.
- Swiping up on the navigation reveals more options.
Keeping Up
The biggest takeaway from this is that you need to keep in mind the new ways user interact with phones. The removal of buttons and proliferation of new technologies and patterns sets the stage for a new way to design mobile apps. Be conscious of what smartphones are capable of and how you can take advantage of that to design a better, more effective user experience.
For more resources on design trends, visit my blog and be sure to follow it for the latest tips, tricks and trends.
