Mobile UI Best Practices

About

The user wants to discover information about the application quickly.

‘About Us’ page is a vital part of every App as it’s usually one of the first destinations visitors would visit when arriving at an app. It should provide people with Information like who and what app is. It also may contain social networks or testimonials.

Activity feeds

Users want to be up to date with new actions other users do. These activities are relevant and interesting to users:

• Provide an overview of recent activity that is relevant to the user.
  
• Allow users to catch up on recent updates with little time and effort invested.
  
• Activities should provide links to further it.
  

• Ask Permission
  

When users open a new app, viewing multiple popups distract users and resulting in user abandon. One of the most distracting popups those that are asking for access. Such as “App Would Like to Access Your Locations”. To avoid this issue you need to build engagement before asking for permissions. Here are some tips to avoid common pitfalls in your permission request.

• Build a Strategy
  

When it comes to requesting permission, the worst thing an app can do is to bombard users with permission requests without any notice or explanation. For example, Inbox by Gmail asks for permissions even before its onboarding tour, with no additional information or context.

In order to solve this issue, you should build a permission strategy. Permission strategy depends on the clarity and importance of the permission you are requesting. Critical permissions should be requested up-front, whereas secondary permissions may be requested in-context.

• When to ask the user
  

Choose the right time to show permission popup. Don’t ask the user for it until you are in need for it. You need to also ask requests in context. That means you should ask for a request that is relevant to a task the user is doing.

• Request explanation
  

You should clearly explain why a request is needed and if possible what users will get in return for accepting the request.

Explaining permission in context is a well-done example . It helps gauge user interest and improve comprehension of the permission. Try to explain to a user the benefits they’ll receive by giving the app access.

• Priming during the request
  

You can do this by providing a background image that explains the permission request. Foursquare primes users by providing a background image that explains why the app needs that particular permission.

Browser

Viewing content in a browser means that font sizes may not be consistent, images are not clear. Users have to double tap or pinch to zoom to be able to check and interact with content. That would ruin the user’s experience. Responsive design is the solution to this issue.

In responsive web design, a page is specified by meta viewport that matches the device width. The mobile browser doesn’t scale the page and the content is readable as shown in the image on the right.

We recommend using responsive web design because it:

• Makes it easier for users to share and link to your content with a single URL.
  
• Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
  
• Requires less engineering time to maintain multiple pages for the same content.
  
• Reduces the possibility of the common mistakes that affect mobile sites.
  
• Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user-agent-based redirection is error-prone and can degrade your site’s user experience (see "Pitfalls when detecting user agents" section for details).
  
• Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site’s content and keep it appropriately fresh.

Calculators

Calculators are widely being used from all ages. Users use them at school, in their finances and daily calculations.

Easy interface: user’s interface should be easy to use for younger and older people.

Hidden Operator States

One of the biggest problems with calculators is that they don’t show users what their operator state. All operator states look the same.

To solve this issue, a string that describes the user’s current input should be displayed at the top of the screen while a user is entering data.

The user’s operation would populate from left to right and display both operands and operators. If the user turns on an operator, the operator symbol will inverse highlight with white font on a small black box clearly showing what operator state they’re in.

Users can move the cursor to previous operators and operands and correct them.

• Make number buttons bigger in order not to confuse users.
  
• Show users what is happening while they are clicking on numbers.
  

Cards

Users always want to overview content with little attention in less time. Cards are the best way to display content with relevant data. Cards are the best choices for online stores and e-commerce. This allows users to browse content in a manner similar to surveying a store shelf. Cards can display all types of content. They may contain text, images, videos, and graphics. Cards are presented in many ways including individually, in a timeline, gallery, next to each other, or making up a dashboard.

Tips For designing cards

Homogeneous content

For quickly scannable content, make cards homogeneous that is with few lines.

Decrease borders

Excessive borders and heavy shadows distract visual friction.

One idea per card

Presenting multiple ideas in one card distracts users attention.

Visual hierarchy

To increase legibility, provide visual hierarchy. You may use a headline with bold font, a sub-headline with a different color and text with normal size and color as shown in the photo. This will also help users to quickly overview content.

Charts

Charts are an effective way to present complex data by the easier way. Some apps need these charts to facilitate checking data to users. These apps may serve insurance companies, financial institutes or banks. Charts are a great way as they don’t take much space to view important information.

Be clear and concise

Charts should be as clear and seamless as possible to deliver data directly to users.

Checkout

With the growth of mobile usage, users head for accomplishing all tasks on mobile even when it comes to payment. As a result, a checkout page for online stores became a must have page, not an option. Here are some tips to best come up with a payment page:

Provide multiple payment options

There is nothing more frustrating for a user wants to purchase than not finding his payment method available. It leads to user abandon. So provide multiple payment methods in order to facilitate purchasing for users. Customers expect multiple payment options. They also expect a quick and secure checkout.

Should be quick and secure

Users need to accomplish purchasing and payment quickly and at the same time securely. Make users feel safe by informing them that data they enter is secure.

Send confirmation

Users need to know whether the buying process accomplished or not. As a result, send a confirmation mail or window shows that the process has successfully done.

Coach marks

Coach marks or walkthroughs are tutorials that demonstrate to users how to use different features of an app. It’s usually displayed at the first time a user logged into the app.

Some apps, like Secret or YouTube, go the route of overlay instructions, highlighting important parts of the UI with “coach marks” to explain what they do. Alternatively, some apps like Carousel and Duolingo use the first launch to show a slideshow that walks users through the entire experience, effectively explaining what the user can accomplish with the app.

Attach your coach mark in the help center

To strengthen the user’s experience, add the walkthrough in the help center. Some users may need any missed tutorial of the app and will be in need for the walkthrough to view one more time.

Make it in a friendly manner

On the other hand, there are users who will be annoyed with walkthroughs. Making it friendly or funny will help them continue going through it without feeling bored.

Confirmation

Feedback is the glue between user and interface. What you aim to get is positive feedback by their interacting with your app. One of the most significant windows you should design is the confirmation popup.

Users want to know the result after they have made an action.

Match between your confirmation popup and the real world

Speak users’ language rather than unclear system terms.

Be clear and concise

Use clear statements or questions with little explanation.

Don’t use “yes” and “No”

Use actual verbs related to your question.

Content screen

The importance of content lies in it establishes a connection between the app and the user. It helps users to accomplish their goals. All content aspects like typography, its layout and size affect user’s experience of reading or reviewing content. Users take a much longer time to read smaller text and images. This is especially true for mobile, where tiny type on a small, bright screen can be a real headache for users.

Balance typography with space

It is one of the most important factors that affect your design. Text should be bigger to be seamlessly checked and simultaneously, there must be enough white spaces between lines and images.

Appreciate context

Ensure images are dynamic and relevant to the content. Use predictive visuals to substantially improve the user experience.

Provide visual hierarchy

Use headlines, subheadings, and paragraphs. This will help users to seamlessly check content.

Empty States

A list that doesn’t contain any items or a search that doesn’t display any results are examples of empty states. Although these states aren’t typical, they should be designed to prevent user confusion.

Some situations a user can see empty states on your app:

• The first-time usage when there is no data can be shown to a new user (ex.: empty timeline)
  
• Clear state (ex.: empty inbox, a list with no items)
  
• Errors (ex.: no internet connection)
  

For a good designer, each of these situations is an opportunity to avoid users frustration or confusion and help them get what they want.

Provide Images

Use image demonstrates that this state is empty.

Strengthen your brand

Use statement illustrates what happened that has a positive tone and is related to the brand.

Find and Invite Friends

Users usually in need for experiencing apps with their friends. Word of mouth is one of the most important marketing techniques that help improve ROI.

The Invite Friends feature is a mean that helps improve the word of mouth.

The user wants to experience the application with their friends so Make the invitation process simple and easy to complete. Venmo, for example: makes it really easy to invite others through social, mobile contacts, and email integrations.

• Make it simple and easy to invite friends.
  
• Provide many ways of invitation by different platforms.
  

Friend lists

The user wants to keep track of their friends and contacts within the app so Show all the user’s connections or friends in a list. SnapChat and Yelp are part of the growing number of apps that give you friend lists. Users become much familiar with the concept of communicating with their friends on any app they have. So it is a significant list you have to provide in app design.

List view and grid view

What makes mobile phones so convenient and portable is their small size. Compared with desktop and even laptop screens, phone screens display a lot less content. Users can only view a small amount of content at a time before they need to scroll to view more. To display content, you have two options. List view and Grid view.

List view

Lists present multiple line items vertically as a single continuous element. Lists are best suited for similar data types. They made up of a continuous column of rows. Every row consists of heavy text and icons. List view items require less vertical space than an image would, allowing more list items to be displayed on the screen at a time.

List view also provides users with a format that follows user natural reading “F-shaped pattern”.

List view prevents too much scrolling by making pages shorter. The exclusion of images (list view has only thumbs) allows you to fit more options per screen.

Grid view

Grid views are an alternative to standard list views. A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. Grid lists are best used on similar data types.

A grid list is best suited to presenting homogenous data, typically images, and is optimized for visual comprehension and differentiating between similar data types.

A general rule of thumb

What is the most efficient layout for viewing content? Should you use a list or grid view? The right answer is: it depends.

It depends on how much information a user needs in order to choose between items. Content is everything. You should choose the layout that suits the type of content you’re displaying.

Details in lists, pictures in grids

Products that require more information like rating, version and price to show should be designed in a listview. Whereas products with less information are mostly designed in a grid list.

Launch screen

When a user enters an app for the first time, splash or launch screen is the first screen he sees. It is the intro of every app. It has no functional specifications. It basically consists of the app logo and it may contain an image that represents app functionality.

You have to add a killer splash screen if you want to ensure a good launch experience for your users. So, here are some tips for designing splash.

Use the right size

Mobile devices differ from one to others. So screen resolution also varies. Given that your splash screen is the first image users will see, you definitely don't want it to look distorted.

You should create as many splash screens as there are screen resolutions. If you are creating an iPhone app, it's easier since there are few devices. But, if you build an Android app, there are lots of manufacturers, a lot of devices with a lot of screen resolutions.

As a result, you need to create 3 splash screens.  A small, a medium and high res, and pull the one that is the closest to the screen resolution of the phone that opens the app.

Keep it simple

It is a loading page until the app opens, so users will not have time to read or review any content in it. So don’t overwhelm users with no needed content. Keep it simple.

You may use your name and your logo, your motto, or whatever describes you and your app the best. Make a clear composition using those elements, and create one single image, in portrait mode.

Tell your users it's loading

The worst feeling a user may have is waiting with no clue what is going on. All they can do is waiting for the app to finish but this may lead to their abandon and exit. So you have to mention in your splash that this app is loading.

Library

The library is one of the mobile screens that carry a lot of information and therefore it must be properly organized. Here are some tips for doing that:

Split content to categories

Users need to easily access text, images and review them. They also want to find what they are looking for in as less time as possible. Categorizing content into sections is your best way to display huge content. Do your user research, find what sections they may need and give naming to those categories as they used to know them.

Personalization is significant

Users like the feel of being personalized, that this thing is just made for them. As a result, think of categories that are special to users like “my latest books, my favorite books or recently added songs”. A great example is music apple app where categories have well-done personalized as it has a name of “ For You”.

Compelling CTA

Call to action is where you can get feedback from users. Place it in a clear spot with an action verbs.

Loading

Loading is an important page for every app designers may neglect. For many reasons, loading page appears as users hate waiting for an unknown reason.

Keep your Brand obvious and create a good user experience

Maintain your identity through colors, fonts, sizes, and images used

Talk with your user

Leave a fingerprint or impression when using the application through an app definition statement that explains what the app is doing now if the download is for more than one important piece of note that should be known or a welcome phrase.

Place a loading icon

The user must know whether the loading is included or not and must put an icon to help him know it.

Maps

Maps are significant for many applications. It is the easiest way to determine places instead of entering data manually.

Leave a place to search

Even if users are looking for a place you have already set, make it possible for them to search every region they want.

Make the marks on the road clear

A user utilizes the map for those signs. so,make them clear with a different color to be easily noticed.

Add a destination description

Make it easy for users to know more about places they want by providing a description, rating, prices or whatever data they may need.

Message

Show that someone is typing

Some apps may contain the messaging feature. It’s important to be well designed as users used to use it in many apps in the same manner. For showing quick feedback, You want the users to feel that other people have seen their message or typing a new message.

Quick access to share pictures or videos

Users love sharing their stuff on chats. This includes images, viral videos, and even GIFs. Make it easy for users to access share images with their friends whether by uploading it from an album or by taking a photo with a camera.

Provide a simple design

Users need a simple design as they just want the functional features of messaging. Make the design simple and clear as much as possible.

Notification

Notifications provide short, timely and relevant information about your app when it’s not in use. Notifications help users know important events in your app. They have two types. A well-timed users tasks and notifications from other users.

Follow the KISS principle

It means (keep it simple, stupid) so keep the message clear and understandable. No matter what the content of the notification is, make sure it speaks the same language as your users. 

Summarize notifications

Sending multiple notifications for the same type of event will annoy users. This may make users turn off notifications from your app. If multiple notifications of the same type are available, combine them into a single summary notification. A summary shows how many notifications of a particular kind are pending.

Navigate to the right place

Provide an expanded view that enables the user to view more information when expanding it without navigating away from it. When the user touches a notification, enable the user to take immediate action. This may open a detail view, such as a message, or a summary view for multiple notifications

Make notifications optional

Users should always be in control of notifications. Allow users to disable or change notifications in your app’s settings.

Don’t send confidential information through notifications

Don’t send sensitive data through notifications. For example, a bank account number or password should never be sent in a notification.

Photos

Images are one of the most important factors that help strengthen your app. Users usually want to overview content. Images will help them realize it seamlessly. Especially when having a products app.

Use hero image 

A good hero image does all the hard work for you. The main product image should be above the fold. Don’t make users scroll in order to see the hero image for a product.

Provide an image gallery

Images are used to get a feel for the product in a way that a product description never can. Thus, the more product images you have within your product screen layout the better:

• It’s important to show all sides of the product.
  
• Users often rely on the product image to assess features. You should provide images that show detail and features. For example, if you’re selling an audio receiver show the input and output ports at the back to help the user understand it’s’ features.
  
• To optimize usage of the gallery photos, use images associated with the product details highlighted in the product description.
  

Horizontal swipe for product images

Users should be able to quickly swipe through an items images horizontally, and not have to scroll down to view a series of images.

Only high-quality assets

You should provide only high-quality product images, videos, and other assets in order to capture the attention of app users. Make sure your images are appropriately sized for displays and across platforms:

Image can be easily zoomed into

Users should be able to easily zoom into a product image to inspect it in more detail, by double-clicking or selecting a zoom button. This is especially important for clothing stores where consumers are more concerned with detail. The zoomed-in images also need to maintain high quality.

Left: zoomed-in view forces the user to look at a specific part. Right: Put users in control by allowing them to zoom in as they prefer (both depth and area of zoom is controlled by the user).

Popovers

Popovers inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Popovers may contain text, buttons or other UI elements. They remain focused on the screen until a specific action is taken.

Popovers position

To show a popover, it should be relevant to what a user is doing at the moment. The most annoying element that would ruin user’s experience is irrelevant popovers. Place it in a proper position to users and without covering the essence content users may need to see.

A close button is significant

A popover should be closed when clicking outside of its bounds or selects an item in the popover.

Only one popover at a time

Displaying multiple popovers clutters the user interface and causes confusion. Show only one popover at a time in order not to ruin the user’s experience.

Avoid too big popovers

A popover shouldn’t take the whole screen. Make it big enough to suit content but not too much in order to the behind content be properly seen.

Product

The product page is your hero page. It is where you increase your ROI. Everyone knows that successful product pages are important to a successful e-commerce website. It is the page where you provide data about products and raise users’ motivation to buy.

Call-to-action button

CTA is your way to make users purchase. Users should find buttons without looking for them. CTAs must be as compelling as possible. User’s eyes should be drawn to it. A primary CTA should use action verbs like “Book now” or “Add to Cart”. Secondary CTAs (e.g. “Share It”, “Add to Wish List”) should be in close proximity to the primary CTA.

Squint test for a primary CTA

Use the squint test to see how prominent the button is. Simply squint and blur the page. Does the button stand out more than any other element? If the answer is no, then make it stand out by giving it a unique color not used anywhere else on the page or make it larger and the text bolder.

Make the primary CTA sticky

It is better to design a compelling primary CTA and to be visible even when users scroll down. Make your CTA sticky so a user can act to it any time.

CTAs must be BIG enough

Make your CTAs tappable. Mobile devices are now with touchscreen. As a result, buttons must be big enough to be easily clicked.

Android recommends controls have a touch target size of 48dp for on-screen elements such as buttons, icons, tabs with icons, etc.

IOS recommends tappable controls have a hit target of about 44 x 44 points.

Provide visual feedback after a primary action

When users add an item to the cart, lack of feedback can cause them to question whether the action has been processed. Provide feedback to make users sure their action has been successfully performed.

Progress

Progress and activity indicators are visual indications of app loading content.

1. Place a clear icon

Helps the user to see which phase is connected and what is left.

2. Operations number

Place numbers that help the user to see which number is in and what is there.

3. Place the exit button

Help the user to cancel or exit the process and not force it to complete.

Record

1. Motion is important

There are many movements that indicate that there is a sound recorded, including the sound waves that rise above the degree of sound or circle, which comes out of larger circles, all of which help to understand that there is a voice recorder.

2. How much time has passed

If I want to record one minute and there is no time indicating the time that has passed I will begin to bored that I have exceeded the minute and therefore the time that has been important for those who record the voice.

Search

Make searching easy to use

Search is one of the most important function an app may include and users will be in need for. It’s important to place the search box in a place that is easy to be found. Search facilitates many tasks to users so placing it in an invisible position will make them abandon and exit your app.

Use a sensible labeling system in search box design

Imagine a user misses the search box and clicks just outside of it, i.e. in the search button. The text won’t disappear. Instead, they’ll begin searching for something irrelevant and more often than not, it won’t produce any search hits.

Additionally, if you add too much placeholder text, you run the risk of placing a burden on the user’s short-term memory. The placeholder disappears as soon as the user clicks or begins to type within the search box, so they’ll have to delete their entry to view the text again. And often, users won’t even figure out how to get the placeholder back.

On the other hand, sensible use of labels can help the user out. Enter tooltips. Tooltips that hover over, next to or above the search box can be viewed any time and don’t affect entered text. To prototype a tooltip, you’ll need rectangle and text UI widgets and an interaction that will allow you to keep the widgets hidden until the user hovers over them with the mouse.

Predictive queries

Once a user enters a query, the search suggestions turn to auto completion. As a user types, the suggestions are filtered. It helps users search faster by subtly guiding them towards results rather than typing in incorrect text.

Settings

Application settings let users indicate their preferences for how an app should behave. It helps users when having a problem. All of an app’s settings should be founded in the settings section. Users used to this name so don’t use any synonyms like options or preferences.

Grouping

For huge lists, split this large list into multiple shorter lists. Arrange them based on their type and categorization. Grouping helps people find their way to the desired configuration.

Labeling

Choose labels that are brief and meaningful. In order to have a great labeling follow these guidelines based on material design:

• Capitalize the first word of each label.
  
• Put the most important text of your label first.
  
• Rephrase negative words like "Don't" or "Never" into neutral terms such as "Block."
  
• Use impersonal labels like "Notifications" instead of "Notify me." Exception: If referring to the user is necessary for understanding the setting, use the second person ("you") rather than the first person ("I").
  

Signups

Clearly stating the rules

Be clear and Inform users with rules before signing up. It’s better to tell them rules than leaving it when validating. Speak users language and demonstrates the rules for user’s safety.

Show password

Have the option of making the password visible. This helps users logging in and signing up. Don’t ask for confirmation, use the password field toggle to help users make sure they get it right the first time. You can use an icon, a small label or a checkbox for the show/hide functionality.

Differentiate login from registration

On an increasing number of websites, the login input fields (email and password) are very similar, if not exactly the same as the registration input fields (email and password). It’s important therefore to clearly differentiate the two and to minimize the chance of users accidentally attempting to login in via the registration form. Certainly, don’t do what AxShare does by showing the two side by side. Many a time I’ve accidentally attempted to log in to the site via the registration form.

You also have to use different verbs like “signup and login” or “sign in and register” in order not to confuse users.

Allow users to log in with an external account (e.g. Facebook)

Why force users to have to remember another set of login details when it’s now so easy to let them log in via an external account, such as a Facebook, Google or LinkedIn account? Of course, not everyone is likely to be happy doing this, but it’s a great way to let users easily log in to your website or app with an account that they use day in, day out. Very sensibly Ocado lets its users log in using either their Facebook or PayPal accounts.

Use an email address or mobile, rather than username

Since usernames have to be unique, invariably a preferred username has been taken, so users end up registering with a new username that they are never going to remember. If your site or app does use usernames then like Twitter, at least allow users the option to log in with their email address or phone number.

Tell users if caps lock is on

Another simple way to help users enter their password correctly is to warn them if their Caps Lock button is on.

Keep users logged in

We all enter an app mostly more than 1 time a day especially those social apps like Facebook, twitter, and YouTube. It’s frustrating to users when they have to encounter login fields every time. So to keep users logged in is your best way to retain users and avoid annoying them.

Checkbox and toggle in forms

When designing forms, there are many text fields that a user should choose one choice or more than one in order to accomplish entering data. To facilitate this field to users:

• Designers use some UI elements that will help users finishing forms seamlessly without having to write inputs manually.
  
• These elements called option selection. It can be represented by checkboxes, toggles, radio buttons, and drop-downs controls. Each of them can be great when used correctly.
  

Checkboxes

Checkboxes are used when there is a list of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, and checking one box doesn’t uncheck the others.

Toggles

The toggle switch represents a physical switch that allows users to turn things on or off. It also facilitates user interaction and therefore enhances the user’s experience.

Use standard visual representations

A checkbox should be a small square that has a checkmark or an X when selected.

A toggle should look like an on/off switch:

You should provide clear visual feedback for user interaction with control. Subtle animation makes the experience feel crafted — it’s especially important for mobile apps which UI controls should appear tangible, even though they are behind a layer of glass.

Timeline

1. Make the user control

Timeline Is the page that others see about the user and therefore make him the possibility to embrace what will appear to others and what they see to share with a certain person and what he wants to keep for himself without others.

2. Possibility of modification

A user can scan his personal publications or edit them if he makes a mistake.

3. Place for interaction

Make it possible to comment or comment on someone's comment and interact with their responses.

Widgets

Widgets display quick views of an app’s most important data and functionality. Home screen widgets display the most important and interesting content on the mobile home. Users can resize and control it.

Expect planning

Changing the needs of the user to the other, some of them want the clock only and some of them want the weather and some of them want to Monday, expect all the possible features that can be done by the user.

Simple to use

It is easy to use and to control.

Maintain confidentiality

The user can add or change it without opening the lock of the mobile.

As Statista claimed the number of smartphone users across the globe will reach over 5 billion by 2019. As a reason we have to concern more about apps and mobile first websites. And in conclusion when it comes to designing a mobile app or designing for small screens, you have to think more about microinteractions, gestures and the context in which a user may use the app. It helps provide a delightful and as a consequence a successful experience.