UI Archives - Tamoco

Mobile app design

Principles of good mobile app UI

Consistency

A key component of good mobile UI is consistency. Designing an intuitive experience is fundamental to creating an engaging app.

Familiarity

Keep an app consistent requires the right balance of familiar screens and using known experiences to reduce the learning curve required to use your app.

For example, a newsfeed is a screen that can be extremely complex. However, many users are familiar with a newsfeed. They are used to using this kind of screen on desktop and mobile. This means that users are probably primed to use a newsfeed at a reasonably high capacity, even without being exposed to it before.

As an app designer, it’s important to embrace these familiar screens and create a design which is familiar to your users. Leveraging services like instinctools for web application development ensures intuitive user experiences through consistent and familiar design elements.

You can view more examples of this concept in action by heading to the screens section of this article.

Intuitive design

Similar to familiarity is intuitive design. Where familiarity focuses on using established design trends to drive app engagement, intuitively is slightly different.

When a user interacts with your mobile app, they should not have to think about the process.

The user experience should be intuitive – it should allow them to achieve their desired goal without dedicating too much time to the process.

To achieve this, designers must get into the right mindset and understand how users will interact with their app. This involves defining the user’s flow and focusing on minimising the amount of time it will take for users to understand and complete the steps between these.

Getting the intuitive design right is a crucial part of the mobile UI design process. Without it abandonment rates will be higher, engagement stifled, and churn rate will increase.

Minimalism and simplicity

Functional minimalism

Designing a mobile experience means understanding the concept of minimalism and applying it to your app’s experience. Simplicity is critical on mobile devices. There’s a small margin for error, so it’s best not to overwhelm your users.

Decluttering is a great example or minimalism in action. As a rule of thumb, if the information is not needed, then don’t include it. This rule doesn’t just apply to content, but menus and other functional sections of your app.

Overloading the user with too much at once is another no-no. An excellent solution to this is collapsible elements or progressive disclosure. That might sound complicated, but it’s a simple concept which allows the user to control the amount of information on the screen.

Towards a simple navigation

Minimalism should apply to user navigation as well as content and elements. You are helping your users to navigate your app in a simple and time efficient manner.

You will lose users if your app’s navigation is too complicated, takes too long or isn’t consistent with other elements.

To counter this, there are a few tips to follow when thinking about navigation:

Keep the navigation visible at all times.
Using standard components in navigation – this means on Android using the navigation drawer or utilising the tab bar for iOS.
Keep it consistent – don’t mix different patterns and keep a single navigation pattern across your app.
Allow the user to understand where they are. Achieving this means having the current place in the navigation visible at all times.

Minimising user input

Typing on a mobile screen is never going to be as comfortable as using a larger keyboard. Many issues with user input occur when the user is using a form. These are common in mobile apps and often can’t be avoided.

A common mistake is to take a form that was designed to appear on a desktop or laptop and repurpose it for mobile. This quick solution is not good practice – and in the mobile-first world we find ourselves, it’s vital to think mobile-first when designing these.

Some fundamental principles to stick to when user input is required:

Less is more – fields that are not 100% necessary can be removed. They are blockers and should be left out.
Autocomplete is a designers best friend when it comes to user input.
Dynamic validation is critical for mobile. There’s nothing more frustrating than waiting for a page to refresh before being told a field was incorrect. Perhaps a user will not bother going through the process a second time.

Control (put the user in control)

To create a great mobile UX the user must feel in control of their app experience. To achieve this, the app should deliver an element of control to the user, through consistent design and predictability.

Keeping elements consistent and predictive

If a user predicts how to use an app and this turns out to be true, then this gives the feeling that the user is in control. Creating this experience is a fundamental part of mobile UI and UX design service.

On mobile, users are not afforded the luxury of hovering over elements to see the kind of interactivity each element offers. That means it’s our job to create components that are consistent and help the user to understand what they want to do quickly.

The way that an element looks should inform the user what will happen when they use, tap, swipe or interact with it. Don’t cross over designs with interaction. Not doing this will lead to confusion and will quickly annoy your users.

We all make mistakes – addressing errors

It would be futile to suggest that apps should avoid errors. Eliminating all errors is impossible. Errors exist and mitigating these are a crucial part of mobile design.

Sometimes errors occur because of a failure in the app itself. Other times it may be the user. Whatever happened the experience is ruined if these aren’t handled in the right way.

The best thing to do is to explicitly state what went wrong and indicate what the user could do to stop the error from occurring again.

Back to where exactly?

A common mistake as apps grow and the number of screens and flows increase involves the back button. A poorly designed back button can severely hamper the flow of an app.

Poorly designed experience involves taking the user back to a home screen. Try and ensure that this process takes users back incrementally.

This rule ensures that users can navigate backwards to check inputted information or verify other content without having to navigate the entirety of the flow again.

Text, images, video and other technical mobile design tips

Text design

Text is the primary way that you will communicate information to your users. Therefore, it’s crucial that you get it right. The typography in your app should be easy to read and legible.

The following guidelines are a great start when considering a typeface to use in your mobile app:

Font family – remember when we talked about familiarity? This concept also applies when choosing your font family. Google uses Roboto and iOS uses San Fransisco. You’d do well to continue this into your app. However, while these fonts are functional, you should also consider incorporating some aesthetically pleasing and stylish fonts that can give your app a modern and unique flair.
Font size – I would recommend 16px. This size may change slightly depending on your typeface.
Contrast – It’s important that the contrast between your app’s typeface and the page contrast enough to make your content readable. Some like the idea of a lighter font on a grey background, but these are hard to read. Also, as many devices are used outdoors, screen glare may make low contrast content difficult or impossible to read.

In individual instances, the following will help you to keep your text legible:

Limit line length – this provides your user with the luxury of not having to pinch zoom while reading.
Capitalisation – is most cases it is better to avoid this.
Line spacing – getting this right creates a better reading experience. Too little and it appears squished, too big, and it feels expansive.

Side note – Be a jargon buster

Jargon busting is more of a design choice, but I guess it’s relevant here. Don’t create smart terms for regular expressions. Your users will get confused. Stick to home, buy or profile instead of new words that your users will have to learn to use your app.

Images

Mobile screens are now some of the most advanced and offer high quality, high-resolution displays.

To do these screens justice images must retain the aspect ratio. Stretched images are a real turn off.

The best solution is to have an adaptive solution. This process will detect the display size and adjust the resolution of the images in your app accordingly.

With new devices taking new shapes and the potential for foldable devices and other weird and wonderful innovations it will be more important to have an adaptive solution.

The iPhone X is probably the best example of this. The device utilises a different resolution to most other devices and part of this is hidden behind a bezel, making it technically dead space.

Video

Video is fast becoming one the of the most important mediums, especially on mobile. It’s pivotal that you get this right in your app.

Research shows that many users like to watch videos in portrait mode. This preference means that you will have to think about how your videos appear both in landscape and portrait mode.

Facebook live and youtube are probably the best examples of this.

Other mobile app design and development tips

Thumb zone

This concept helps designers to think about how devices are used practically. Thinking about this allows us to understand how the device is held and how this affects our design.

Many users hold their device in one hand. Sometimes this is in the left, sometimes the right. This choice means that only some of the screen is easy to reach with the thumb when the device is held in one hand.

This area is called the thumb zone. It changes between devices, based on the screen size.

Based on the image below try and stick to the following guidelines.

The green area is where navigation and other frequently used actions should be.
The reg area is where options that could cause damage to the user experience if incorrectly pressed should be.

Responsiveness and speed

With every advance in technology, we get more impatient. Loading time is therefore significant for user experience.

The longer your app takes to load a page the more likely you are to lose users. Now sometimes this is unavoidable. Luckily some tricks will allow you to create the illusion that your app is loading quickly.

Keep the following tips in mind if you can’ decrease the load time any more:

Clearly demonstrate when something is loading – blank screens will make the user think that the app is broken. The least that you can do is include a spinning animation or something similar. If anything routinely takes longer than 5 seconds to load, then opt for a progress bar instead.
Prioritise the visible area of the device – focus on loading the initial content that appears in the view when entering a page. The rest can load on scroll or in the background. This trick creates the illusion that the entire page has loaded quickly.
Other methods exist to help build the illusion of quick loading – an example is to provide an animation that also acts as a distraction.
Skeleton screens are understood by users to load quicker than a blank screen. Implementing them into your app design will help to improve the user experience.

Personalisation

There are countless ways to personalise your app experience and boost app engagement. It’s a fantastic way to connect with your users.

Push

Aim to keep your communication via push notifications personal. To create a great UX and great UX copy there are a few different methods you can employ to ensure your app push notification strategy stays personal.

Location

Using location wisely is another way to provide a valuable user experience to users. Contextual experiences can be added by understanding the device location. Adding location support to your app can fuel personalisation of everything from push notifications to in-app content. All of this contributes to improving the app experience.

Accessibility

Designing for everybody

Considered design should allow users of all kinds to use your app. Consider how trouble hearing, seeing and other disabilities can affect the usability for your mobile app.

The following are things that you should consider when designing your app:

Colour blindness – around 5% of the world’s population are colour blind to some extent. The most common form is the inability to distinguish between red and green. Unfortunately, these are the most common colours to use for error and success messages. Adding a separate icon that indicates this will avoid the issue.

Screen and app examples

In this section, we will look at specific screens. Drawing on everything we have learned in the above sections we’ll focus on examples where designers have done a great job on these particular screens.

Splash screen

Remember what your mother told you about first impressions? Well, unfortunately, she was right. At least in terms of mobile UX.

Creating a positive impression on the first use of your app is incredibly important. Churn rate is highest in the initial days after downloading, suggesting that first impressions are crucial in boosting retention.

Enter the splash screen – the first screen that a user will see when opening an app. They are minimalistic and usually consist of a name or brand logo. These can help with loading times of the home screen.

Try and keep these screens to less than 5 seconds. A nice idea is to keep everything centred so that it looks great on all screens.

Onboarding

Onboarding is a significant screen (or set of screens) for your users. When a first-time user opens an app, they will usually be presented with an on-boarding journey. This screen will educate the user on how to use the app and get the most from the features.

The aim here is to demonstrate that the app is useful for the user. It’s crucial that your onboarding process is simple, effective and not too long or short. Here are some tips:

Custom illustrations are a good idea. They help to explain specific features and help users to remember them.
Many apps use a mascot to guide the user through the on-boarding process. Remember the duo-lingo owl before it begins sending you annoying notifications?
The copy is everything. Clear, concise copy is the most important thing to get right in an onboarding process. It should be helpful, short and easily readable.

Log in and profile

To create highly personalised apps requires that users make an account. Most user’s response to seeing a sign-up screen isn’t positive, so it’s important to get it right.

Keep the number of fields short
Offer simple, one-click logins (such as Google and Facebook login)
Remember that on log-in pages to include an option to sign up

At the heart of the highly personalised app is the profile screen. This screen allows the user to interact with your app in a customised way. The profile must be clear. It must profile personalised information related to the app. However, it’s important not to include too much information.

Working on the navigation system here is important. Make sure that the profile page is part of any tabbed menus. Researching your users and most common functions can help you to understand the best information to prioritise in a profile view.

Home screens (menus)

The home screen is potentially one of the most important screens in your app. It’s the go-to screen for your users to navigate. It’s where they will go to instantly perform critical tasks and interact with the essential parts of the application.

Because of this, the home screen will look entirely different between apps. Some key elements remain the same, however.

Many home screens contain a search bar or a search function to immediately let users get the right content or the right page. This search function should be placed clearly and centrally.
The home screen must contain clear navigational elements which allow the user to get the most important pages within your app quickly. These should be simple and easy to understand. Users don’t want to spend time figuring out what each term means.
Many home screens surface these selections in the content itself. Sometimes this is in the form of cards. If doing this, it’s important only to include the most important options. Too many can confuse the user.

Permissions

Permissions are important for many apps. However, designers must strike the right balance between asking for permissions and negatively affecting the user experience.

We’ve all opened a new app and have been bombarded with permission requests. This a quick way to increase user churn and hamper UX.

There are some toolkits to help with this that allow multiple preferences to be collected. They also will enable the developer to pre-determine situations where it is acceptable to ask for user permissions.

Ecommerce

An e-commerce app’s primary function is to entice users to buy and a product and close the purchase. There are a few screens that are unique to this kind of app, and there are some critical UI tips to consider when designing them.

Catalogue screen

The catalogue is the home of the e-commerce app. It can look slightly different from app to app.

Generally, in these screens products are arranged in columns (sometimes single columns), and the user will scroll through them. It’s the designer’s task to create a view that prioritises certain items and provide a quick and simple way for users to navigate multiple products.

More advanced catalogue pages display items horizontally with the user input being a swipe gesture left or right. This design works best when there are fewer items as the user can only navigate through one at a time. Adding separate navigation can help in this instance.

Some critical rules for this kind of screen are:

Photos and illustrations should be high quality
CTA (call to actions) should be present and easy to identify
The catalogue screen should have the CTA as well as inside the product page. This way users can add items to basket directly from the catalogue screen.

Product screen

This screen will educate users in more detail on the product. A product screen is important because it allows users to dig into the product, answer any questions they may have, and provide more information on the product to close the sale.

Key elements include:

High-quality feature image
The detailed description that’s easy to read
Product specifications
Reviews

Checkout screen

Mobile is quickly becoming the primary way that users make purchases. Mobile UX should make the process as simple and pain-free as possible. The checkout is the final stage in this process and should feel comfortable for the user.

Include visual elements that indicate that important personal information is secure.
Supporting quick checkout options can be an excellent way of keeping the experience pain-free

Newsfeed

The newsfeed is a crucial element to many social apps. However, many other categories of apps now use a newsfeed to convey changing content to users. You can prioritise a specific kind of content (such as new posts) to the top.

Some guidelines for these:

try to keep 1-2 items on the screen to avoid over-cluttering
A new trend in newsfeeds is to have two columns, but this can be very easy to get wrong.
Swiping horizontally to reveal different local feeds is a better way to include extra information. Think of how Instagram hashtags and previously Snapchat’s UI worked (before they changed it).

Testing and feedback

Designing great mobile UI and understanding UX involves testing and routinely updating your design based on user feedback and user behaviour.

Everything that we have discussed will help you to design a better mobile app experience. They won’t replace the need for robust testing and user feedback.

Testing your UX with real users in real-world situations is a must if you want to create a UI that keeps users engaged.

Feedback loops

User feedback is incredibly important for UX design. To get it in reliable quantities you must design the feedback product into your app.

There are countless ways to do this; the most important thing is that it works. It can be anything from a form to background analytics that records how users are interacting with your app.

Tools

A poor craftsman always blames their tools. However, with app design and development, it’s important to have the right set of tools to develop, implement and test your app’s UX. Although, you might think of hiring a UX agency that will give you all-around UX design services.