All Case Studies Design Development Interviews Machine Learning Project Management

How to Design an Interface For Your Mobile App (UPDATED)

Designing an app nowadays is a tricky process. The app marketplace is not only reaching its saturation point, but you will also face fierce competition when launching the app, let alone the increased limitations and rules for app design. That’s why building a user interface is a key element for making your app stand out. In this piece, we’ll discuss how user interfaces have evolved over the last few years, what the frequent mistakes in app design are and how to avoid them, and what alternatives to touch screens you can leverage in your digital product.

Evolution of user interfaces

The user interface (UI) is everything designed into a device or software to  enable humans communicate with technology. Back in the old days, people needed to come up with ways how to communicate with computers in order to use their magnificent power and make the most of it to serve user needs. The way the interfaces worked was dictated by limitations of the computers’ capacity to behave like humans. Therefore, we needed to adjust our behaviour to line up with technology. Gradually, we learned to bend our natural style of communication and type in lines of commands easily recognized by machines but not so easy to memorise for a human being. 

Nowadays, when technology has become more and more advanced, the roles have shifted and it is us, humans, who can define how to communicate best with machines. We are no longer forced to stick to the good old keyboard/mouse - screen display interface. We have come up with faster ways to convey our needs to the devices and begun to diversify the types of interfaces depending on the circumstances, environment, and the characteristics of the target users. We have introduced touch interfaces and thus made technology more accessible and user friendly to many people.

Common mistakes when designing UI

It is easy to get ahead of yourself and make some avoidable blunders which will result in lost users and inconsistency within the app. Here are a few common mistakes and helpful tips so you can prevent them from cropping up in your apps.

Not knowing your app’s end goal

If you don’t know your app’s end goal — if it can’t be concisely defined in a few sentences — in all likelihood it will be confusing for the end user and ultimately abandoned. An app that offers no clear purpose will offer users no clear reason to keep using it.

The app market is teeming with apps that pass by overlooked or are quickly forgotten, so when starting out the design process or – even better – when discussing a possible strategy with a client, it is important to map out how the app will play into their brand and communication model, how they plan to monetize it and what they hope to offer their users via the app. These elements are all important in carving out a niche for your client in the marketplace. Make sure your design highlights exactly the elements they are planning to bank on and that it is consistent with their brand.

Bad first impressions

At this point, we all know that when launching a new app, it will face huge competition in a very crowded app market. As such, it is essential that when a user first installs and runs your app, they will have enough reasons to ‘stay’ — as statistics show, 25% of apps were only used once in 2015, which is a dismally low retention rate. How do you avoid becoming a part of this statistic?

While ‘onboarding’ is considered an important step in teaching new users about an app, you have to be careful not to overdo it. If onboarding turns into an overdrawn process that takes up too much time, users will often abandon the app. You have to keep in mind that apps are regularly used on the go and people won’t have the patience to skim through a carousel of instructions; instead they want to get to the heart of your content as soon as possible. One solution is to make the process as short as possible, trimming it down to the most essential information – in other words, let the app communicate its own value, instead of trying to convince users straight away. Another idea is to skip the tutorial entirely and/or add visual cues to guide new users through the learning process.

Another reason apps are abandoned after first use is because they simply ask for too much information or they force users to sign in. As already mentioned, people want to get to the app’s content or functionality quickly and may even dislike giving out their info without first having any clear motivation to do so, not to mention the fact that typing out addresses and phone numbers on a mobile screen is a lot more difficult than via a computer keyboard. One way around this is to let the user skip this step and use the app immediately, but offer them the option of signing in as an efficient way to save their info for future use (such as for restaurant or hotel reservations) and reduce the number of fillable forms to a maximum of two or three.

Quartz’s newly launched app teaches us a great lesson here. It doesn’t force users to swipe through intro screens or sit through an instructional video; instead it lets them interact with the product right from the word go, teaching them the process while actually using the app. 

quartz

Letting web design bleed into app design

When creating an app, you have to leave your inner web designer behind and usher out the app wizard. Users want quite different things from websites and apps, so when crafting your app, you need to anticipate what a mobile user would want as compared to a web user.  Mobile apps do not benefit from large screens – in fact, as we all know, they are much smaller – so consequently your design has to meet this expectation. Small text that you’d have to squint to be able to read, a tiny menu where you need several tries to press the correct option or an overly crowded design will all dissuade users from opening your app again. Your goal is to make the design legible and easy-to-use, so you should make sure you use appropriate font sizes, make menus and buttons larger (to avoid the ‘fat finger problem’) and use a minimalist approach to cut down on unnecessary design elements.

FIFA’s app is a good example in this regard. While it does well in keeping up with FIFA’s colour scheme, it is otherwise pretty independent from a design perspective. It features an aired-out design, with easy to read text and a minimalist approach to highlighting content.

screen322x572_4

Cluttered, overly complex and inconsistent design

You may be tempted to cram tons of design features into a new app or to use a large colour palette and a host of flashy fonts; sometimes you may even want to introduce new standards or rework the existing ones, to make sure your creation stands out from the crowd. However, when aesthetics and creativity go overboard, it is the user experience and interface that suffer. Design elements help users learn a pattern, a set of principles for using the app, which will serve as a guide throughout the app’s menus and features.

When an app has gone over the top with the features, has too many new visual elements and is inconsistent across the board when it comes to colours and typography, this results in a confusing experience for the end user who may well get too frustrated to bother using the app again.  In this case you need to go back to the main goal of the app and focus on making its functionality or content easily accessible and give them air to breathe – white space should never be underestimated. Make sure you aren’t trying to detract from the main purpose of the app with too many non-essential features and that your colour scheme, typography and navigation patterns are consistent, sticking to a clear format. You also need to re-evaluate the merit of a non-standard set of icons, when standard icons may already be familiar to users and tend to be more intuitive. This will make the learning process much easier and result in a greater retention rate.

∞ Infinity Loop is a game app that focuses squarely on its purpose – providing users with a simple, relaxing game. It features absolutely no unnecessary design elements or extra features, engaging users with its dynamics right out of the gate without incorporating any other distractions.

loop

Best practices for UI design

Given the fiercely competitive app market, it is essential to make your apps intuitive and pleasant to use by avoiding these common mistakes. The following best practices should serve you as a map in creating you next user interface:

  • Provide users with a clear purpose to keep using the app,
  • Plan business model for your app to make sure you can monetize it,
  • Map out how the app will fit into you brand and communication model,
    • Make onboarding as short as possible,
    • Communicate unique selling point prominently within the app,
    • Enable users to skip the tutorial and sign-up,
    • Focus on making app functional and content easily accessible,
  • Use white space to let different elements breathe,
  • Make sure you use appropriate font sizes, buttons and colors,
  • Don’t try to fit too many non-essential features.

Choosing the right type of an interface

There are still many situations where a touch interface is not very convenient or even impossible to use. You do not need to look very far - imagine all the moments everyday when your hands are simply occupied - wet, dirty, covered in dough, holding a steering wheel, gloved to protect you from the freezing wind, holding a child, and so on. There are also specific contexts, like gaming and entertainment, where diversifying the ways to interact with the product is simply fun and enhances the experience. Not to mention a number of people with disabilities which exclude them from using touch interface.

Voice interfaces

Over the past few years, voice interfaces have gained a lot of hype. Alexa, Google Assistant or Siri have become familiar to us as they aid us in various tasks throughout the day. And, more importantly, talking to a device requires less effort and is much more natural than interacting via a touchscreen. As human beings, we are wired to constantly communicate by conversing. However, conversations are radically different than the standard way we have been dealing with these devices so far. Designing a good voice assistant is thus not an easy task to execute. Some of the very important aspects to include in a good voice-user interface are:

  • Using natural language - built with everyday language sentences as if it really was a casual conversation between two individuals;
  • Making the conversation personalized - this adds a very natural feel to the interaction;
  • Taking care of precision and feedback - as memory and perception work differently in the spoken world and require frequent summarizing and paraphrasing in order to perform well;
  • Preparing a good strategy for error situations - there is nothing more frustrating than having to repeat yourself several times in a row.

With voice interfaces equipped with speech recognition, we can count on assistants to perform actions based on the understanding of our phrases and doing the chores for us - like finding us information, ordering food or tickets to the theatre, and making sure our calendars are up to date. What they might struggle with though is understanding a wide variety of accents and dealing with noise in our surroundings. They might also not be the perfect fit for the moments when we need our privacy and simply do not want others to be witnesses to our digital interactions.

Gesture based interfaces

Perhaps less widespread, but definitely popular in the gaming world, are remote gesture controllers. The idea with gesture control would be to use a device which enables connecting the interface, e.g. to a band which is worn on the user’s arm, and, thanks to muscle movement detection, enables controlling the interface. The technical implementation can be arbitrary - it can be a detector reading the position of your body performing gestures, not necessarily connected to your body, but using cameras to determine your whereabouts. Gesture control is also aimed at using the natural way we behave, how we move, to influence our surroundings. It mirrors the results we achieve in the real world and transfers them into the virtual world, making it so much easier to seamlessly immerse ourselves in the game and thus make the experience very tangible.

Going further on the scale of alternative, we have the brainwave interface. It might require a device in the form of a headband which catches and recognizes the type of brainwave activity of the user (but it could also extend to brain implants in the future). The brainwave interface enables controlling the connected device (e.g. an iPad) interface by focusing attention on the controls on the screen and blinking to perform actions.

A similar technique can be used when it comes to an eye-tracker controlled interface. Interacting with the elements on the screen is done by focusing the gaze on certain parts or spots on the screen. The eye-tracker needs to be calibrated to the user’s eyes and usually works within a distance up to 1 m. Although it might seem like overkill for everyday situations, these types of interfaces can make a tremendous difference for people with disabilities or serious illnesses resulting in paralysis or inability to speak by giving them a chance to communicate and improve the quality of life.  

Benefits of Gesture based interface

1. Natural form of communication

Using gestures is a natural way to communicate. You don’t have to know a foreign language to be able to communicate with someone from a distant country. When you can’t express yourself with words, you can always show your speaker what you have in mind by using your hands, and you can be sure that you’ll have a good chance of being understood. Why?

Because using gestures is a natural form of behavior for every human being regardless of his or her nationality, age or the tradition in which they grew up. No matter where you come from, you have the same methods of indicating that something is big, that the meal you’ve just eaten was tasty or that something smells awful. So why not use this natural and intuitive behavior in human-computer interactions if technology permits?

2. More ways to engage a user

Throughout the last few years, the trend of adopting gesture-based design in applications (mobile applications) has become more common thanks to growing usage of devices with touchscreen interfaces. In the not-so-distant past, you mainly used mobile devices such as smartphones and tablets. Today, hybrid devices exist and, even more importantly, they are getting more and more popular: laptops mixed with tablets (Microsoft Surface Book), bigger tablets with peripherals, e.g. an additional keyboard (iPad Pro). The usage of devices with touch interfaces is entering a whole new dimension — professional usage. Now you can do more with our mobile gear: create content rather than merely consume it.

This new segment of devices requires, of course, a completely new approach to the problem, because the surface that you will be working with is different. For now, the UX for such devices still has some way to go as much as most of interfaces and interactions are copied from much smaller ones. It’s worth pointing out that you can use these new devices on your lap or on the table, so both hands are free. This wipes out a whole load of restrictions so designers are able to discover and develop new solutions in the area of interfaces and interactions.

3. Simplicity and intuitive approach

The popularity of applications such as Snapchat or Tinder has influenced users' awareness and feel of interfaces based on gestures. This has opened up the option of honing app design down to simplicity by getting rid of some visual elements of navigation. A key trend to notice in this field is the gradual disappearance of differences between popular platforms (iOS, Android) and increasing unification in terms of possible interactions based on gestures.

Simpler design and unified solutions allow the user to concentrate fully on the content and absorb it in a more intuitive way. This type of application is way more fun for the user and elicits a more positive and powerful emotional response. A more intuitive approach to usage that allows us to get into the app’s content more directly and simply makes our apps more attractive and, therefore, more highly rated.

Beginning of an evolution

However, gestures are not only reserved for mobile interface design. We can find it, for example, in Xbox Kinect and in virtual reality. The gesture-based approach is constantly evolving and in the future, when combined with voice recognition, it may well turn out to be a game changer.

It may be more difficult to shift to alternative types of interfaces in a broader context because of the power of habit, the persistent common frame of mind defining what we can and cannot do when interacting with machines, and more down-to-earth reasons, like the inability to afford state-of-the-art devices. It may also be easier for designers to choose a touch interface solution because it has been done a thousand times and does not require a rocket science approach, but it is highly advisable to stop for a while and really think through the context of use, the specifics of the user the product is intended for, and the incomparable benefits that the alternatives may bring. It does require exceptional imagination to gain extraordinary adoption of alternative interfaces, but technology today brings virtually unlimited possibilities in front of us and that is what makes this uncharted territory worth exploring.

No matter what type of user interface you choose for your product, don’t forget about the best practices and avoid common mistakes when designing UI. If you need help from our consultants and designers – drop us a message

product design case study
READ ALSO FROM Mobile
Read also
Need a successful project?
Estimate project or contact us