Mobile apps user interface specifics

Read more

Perfect the User Experience

by Petr Kudlacek on 15 May 2014

UX One thing that kills it for mobile apps is a poor user experience, even if the premise is out of this world. Here are a few things you want to ask us or your own development team about, and a few things to keep in mind when you try to get your app shiny enough for its debut.

One thing that kills it for mobile apps is a poor user experience, even if the premise is out of this world. Here are a few things you want to ask us or your own development team about, and a few things to keep in mind when you try to get your app shiny enough for its debut.

Brand Recognition

The first thing a user should think about your company is how it related to brand. Through colors, images, themes, and similarities to your other products or software, your app should increase brand recognition.

 brand recognition

Know what makes your brand stand out, from fonts to pictures, and keep these in the design of your app from the concept phase through the final creation.

The UI should always resemble you.

Optimize Your Flows

The less your app does, the better it will perform. Focus on solving your customers’ problems as quickly and efficiently as possible, without loading up on lots of extra or useless content.

Optimize every UI element and screen to move quickly, mobile is a time-sensitive game.

Your app doesn’t need Flash animations and transitions because, even if pretty, they slow things down. Get users to the content they want or the fix they’re trying to achieve as soon as possible.

Load Smart

How your app loads items can be very beneficial to how it runs. For items that won’t get pressed often or are quick to retrieve, consider the lazy loading design. This keeps an object from being initialized until it is specifically called for.

Web services and platforms often use this because it can greatly increase the speed at which a platform or app performs and allows for better loading speed of the general application. Mobile apps can get the same benefits from this approach.

Strengthen Perceived Performance

Some flows are going to take time and cause delays no matter what. Work on your app to identify these ahead of time and add in something to fill that gap. This can be a great place to show a loading or loading animation, provide use tips or tricks, or display app or company news.

 lazy loading design

Know Your Users’ Devices

Killer apps have killer images. Unfortunately, the images have to be flexible to grow and shrink for screen resolutions. Different sizes of devices actual for apps to have different graphics to support those sizes.

The best way to tackle this is to learn about your user based and build for the mobile devices they will have. You can expand later, but you should initial target the top devices of your potential user base.

Screens get tricky because Apple’s iOS devices have four different screen resolutions and requirements, while Android devices come in 16 varieties. Ask us about the best ways to support these requirements and which are the most used for your type of app.

Build for Fingers

 

Button sizes and the size of fingers go, if you’ll excuse the pun, hand-in-hand. Button sizes can easily get too small, and that means users can’t hit them. Don’t go below roughly 1.1cm for a button width, it just makes it harder for a user.

 fingers and buttons

Make your buttons bigger than the finger that will use them the most. So, for index fingers aim for larger than 57 pixels so the user’s finger can find it and hit it easily. For the thumbs, create a 72-pixel touch square, which will allow for a big target that has some edges peeking out, helping to assure the user they hit the right button.

Pick Icons over Words

For your buttons, pick icons or words. Going with both takes up extra space and space is a precious, precious resource. Images for things like menus are standard, so there’s no need to worry about confusion when going with the well-known.

Size Equals Importance

Bigger buttons imply more importance. The size of the button—once you get past those minimums—should be proportional to how much the button is used and how much you want it used.

Small buttons should also be reserved for things of little use or that are mostly static – this may be a “Settings” or “Info” button that you need on the screen but don’t expect to get a lot of use after the initial installation and testing.

There are lots of guidelines and tips for buttons out there, so use them! Check out some guidelines for various buttons on Apple devices here.

Turn with Them

Mobile devices don’t just have one orientation; they come with landscape and portrait layouts which should be activated with just a turn of a phone. Your app needs to support both layouts unless there is some very specific (and very good) reason not to.

Layouts also give you the chance to provide two different, branded experiences that users can choose from. For example, video players should think of landscape as their full-screen experience while portrait gives them enough space to add content like comments, social media buttons, and related content.

Give Extra Space

Treat your app like a good piece of paper or Word document; give it some space! Your text shouldn’t extend all the way to the edges of your screen, and buttons should have some space too. This keeps your app from feeling squished, which can be a frustrating experience.

Make It all Readable

Your UI needs to make sure that your app is readable on any and all screens. Font sizes should be big, clean, and easy to read while reducing the need to scroll sideways. A decent rule of thumb is sticking between 12pt and 18pt font, with bigger fonts going to headlines, subheads, or more important sections.

Free Whitepaper

Mobile apps user interface specifics

Mobile apps user interface specifics