How Do We Design for Phones in 2020?

Smartphones are changing. They're getting bigger, with more screen real estate, less intrusive bezels and no buttons. How do you design navigation for these phones? Here's some tips for doing just that.

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

Close-up of cell phone executive's hand clutching a large buttonless smart phone.

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.

Smartphone scrolling in an app and adding an item to the shopping cart by waggling the phone.

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.

Smart phone language translation app listens to spoken Spanish and translates it into English text on the screen.

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.

Mobile app bottom navigation complement, with animation showing the transition between selected tabs.

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.

More to Explore

Unity State Machine Boilerplate Code

The following boilerplate code is for a basic finite state machine implementation in Unity, written for my own reuse with comments provided on usage. It

Building a Dynamic Form in React (Part 2)

A devlog of my first experience using React to create a dynamic data-driven web form, and learning the ropes of components, forms, Fetch and everything in between.

Building a Dynamic Form in React (Part 1)

A devlog of my first experience using React to create a dynamic data-driven web form, and learning the ropes of components, forms, Fetch and everything in between.