Monday, January 27, 2020

Take Your Mobile Design to the Next Level

As technology continues to advance, consumers are spending more and more time on mobile devices rather than computers. This trend has dramatically increased over the past few years, making it crucial for brands to start designing with a mobile-first mindset. This means  your website is designed with mobile in mind first to ensure your users have the best experience possible on their mobile device. Here are some of the biggest considerations that go into creating a user-friendly mobile design.

Reachability

Reachability is about how far a user’s hand has to reach across the screen to navigate the app. We all know how annoying it is to reach all the way to the upper left-hand corner of our phone – stop making users do that! When designing a mobile app or website, you have to design with the thumb’s reach in mind. Think about your experience using your own apps. Where is it easiest for you to reach? Where is it more difficult? If there is a certain area of your phone you can’t reach, you probably don’t want to put anything important in your app there.

Buttons

In terms of buttons, you have to think much bigger and brighter when designing mobile. On a desktop it is easier to make a precise click, but on a mobile device that accuracy is not always there (just think of how many typos you make while texting). Here are some tips to make buttons clear and easy to use:

  • Use color to create contrast
  • Basic shapes make the button obvious – don’t get too fancy!
  • Make the buttons big enough to accommodate everyone (at least 44px)
  • Add a shadow to create depth
  • Make the button’s function clear

Keeping these tips in mind will improve the functionality of your app, and create an enjoyable user experience for the users.

Readability

Users on a mobile device are working with a much smaller screen than on a desktop. So, it is important to make sure the mobile website, email, app, etc.  is still readable on a mobile device and the page doesn’t look overcrowded. You don’t want the user to have to zoom in just to read what is on the screen. Here are some guidelines to ensure your design is readable:

  • Only use two fonts
  • Appropriate spacing between the lines – don’t cram too much in!
  • Avoid all-caps
  • Size matters – headings should be the largest text and the rest should get smaller
  • Use high contrast to make it easier on the eyes

The main thing to remember here is that you don’t want to strain the user’s eyes or give them a headache while looking at your app.

Gestures

It is important to keep in mind what gestures and actions are common on the device you are designing for. For example, we know it is common to swipe right to go back a page and pinch the screen to zoom in and out, therefore, these are actions you don’t want to change or you risk confusing and frustrating your users. There are some gestures to avoid using all together. An important one to note is the swiping up action. This is how both Android and iPhone users exit apps, so if you include this you are basically prompting the user to leave your app or website.

Mobile Leaders

There are multiple brands that have quickly hopped on this mobile trend and are already going above and beyond to design a user friendly app or mobile site. Some examples are:

Lyft – Lyft does a great job with navigation on their app. The app has multiple actions layered on top of each other to make sure the user can always see the map and track their car. They also focus all of the actions at the bottom of the screen which hits on the reachability component we talked about earlier.

IKEA – On IKEA’s app they take user interaction to the next level by allowing the user to access their camera in the app and use it as a base to place furniture on. The app utilizes augmented reality to let users see their living space while placing IKEA’s furniture on top to see what they like and don’t like.

Twitter – Twitter has recently focused on the visual elements of the app buy adding in a “dark mode” feature. This allows for the background of the app to be black instead of white which is easier for the eyes to look at. There is also a “dim mode” that provides a nice in between option.

Implementing these mobile design concepts will change the way consumers view your app. It will make it easier for them to explore your brand on their mobile device, and overall give them a positive user experience.

Interested in learning more mobile design best practices? Download the Mobile Design Swipe File to spark some major mobile inspiration!