Mobile User Interface and Usability Guide

Mobile Platform Guidelines

Before designing an application for mobile, one should keep in mind that, a mobile device is not a desktop or a laptop and mobile application is not similar to a desktop or a web application. There are lot of limitations and restrictions while designing for a mobile device.

Here are some challenges involved while designing a mobile application:

Diversified Platforms and Devices

Diversified Screen Size and Display Resolution

Diversified Operating System

Limited Memory

Diversified Interaction

Diversified Usage context

Diversified User needs

Diversified Platforms and Devices

With the growing competition in the market the number of mobile platform and devices are also increasing. Here are some of the most common mobile platforms

iPhone

Android

BlackBerry

Symbian

Windows Mobile

Palm Pre

Even within a platform, there are several different devices with different capabilities, such as display sizes and processing capabilities. Applications should be usually designed for the entire platform – not just to a single target device – and should consider issues such as scalability to different display resolutions.

Diversified Screen Size and Display Resolution

All Mobile platforms and devices have a diversified screen size and display resolution and the biggest challenge is designing for the small screen. Screen size may vary from 240 by 480 in width and height to 480 by 360.

Small screen size means that less of a page or form can be displayed, making it more difficult to maintain the user’s sense of location within the application and navigation scheme

With a small screen, the amount of simultaneously visible content and controls is limited. In many cases, the user is forced to scroll or pan the view to see more.

Diversified Operating System

Different platforms have different operating system and this also plays important role while designing a mobile application

Limited Memory

Unlike desktop or laptop computers, mobile devices have a very limited memory and one have to keep this in mind while designing a mobile application

Diversified Interaction

Different mobile devices require different tools to interact with their interfaces like mice, joysticks, scroll-wheels, keypads, fingers . While each of these input tools accomplishes the essential task of selecting an object, each also presents us with limitations.

Diversified Usage context

Different users may have different context of the mobile application usage as follows and it is very important to keep this in mind while designing the mobile application

Diversified User needs

Users have different age, gender, educational background, income, jobs, value & lifestyle, personality and their need and way of using a mobile application may also be diversified.

Unlike desktop or web app, mobile user may want to use the mobile apps anywhere anytime

While at home

On the way to office

On the way to home

Coffee bar

While using restrooms

Waiting in the bus stop

In the bus or subways etc

Using the device while moving

Performing another task at the same time

With or without a network signal, or with a slow data transfer connection

In an extremely dark or bright environment

Running out of battery

In an extremely noisy or distracting environment

While the design cannot be prepared for every possible situation, the key to mobile design is to keep it simple.
Simplicity is achieved by focusing on the most important features and keeping the design clear and accessible. Key tasks should be able to perform with low effort and important information should be easily available.

Application Screens & Interaction Methods

Display specifications for different platforms and associated devices

Mobile User Interface Design Principles

One should keep in mind the following principles while designing the interface

Learnability

Efficiency

Memorability

Error Recovery

Simplicity

Mapping

Visibility

Feedback

Consistency

Intuitiveness

User input

Customization

Satisfaction

Learnability

Interface should be easy to use from the first time the user interacts with it

Amount of functionaility presented to the user should be limited to exactly what the user requires to get their goal

Efficiency

Number of steps its takes a user to complete a task is very important

Key tasks should be made as efficient as possible

Memorability

Interface should be easier to use each time the user interacts with it

Frequency of use is the key factor in memorability

Error Recovery

The interface should be designed in such a manner that, user should not be given chance to make mistakes

Even if mistake happens, interface should give chance to rectify the error

When encountering error conditions, the user should be informed of the error without being inconvenienced. Attempts should be made to make the failure “graceful” such that no information is lost

Display information in a way that makes effective use of the small screen

The user should be able to find all needed functions easily and do tasks effectively, without getting tangled in secondary issues

Graphics and display layouts should be uncluttered, crisp, and plain. Displays should show the most important information clearly, rather than squeezing in as much data as possible. Text fonts should be clear and comfortable to read. There shouldn’t be any excessive decoration

The interaction, display texts, graphics, and sound design should be consistent and harmonious

Mapping

What the user expects to happen when they interact with the interface is exactly what should happen

Visibility

Important information should be the most visible and less important should be less visible

Understanding the users goals is critical

Feedback

User should always be in control of the interface and not the other way round

The interface should be responsive by giving instant feedback to the user

Consistency

Like items should always be displayed and act the same way across the entire application

Use of color, widgets should also be consistent across the entire application

Intuitiveness

An interface should be as intuitive and straightforward as possible

It should be based on elements the users know already so that there is no need to learn any complicated procedures

User input

Provide pre-selected default values where possible

Customization
Because user preferences differ, users should have the ability to customize the interface of the application. This includes deciding what information to display in the message list and the order in which to display information. By customizing the interface, the user can create an application that best suits their typical, day to day usage pattern. However, the application should provide defaults that are helpful for the majority of users

Satisfaction

This is very important principle, the user should be able to enjoy using the application

When designing your application, also consider the following guidelines:

Stay focused on user’s immediate task. Display only the information that users need at any one moment
Minimize the number of times that users need to click the track wheel, trackball, track pad, or touch screen to complete a task
Make all actions available from the menu. Verify that the actions available in the menu are relevant to user’s current context
Follow the standard navigation model as closely as possible so that a particular user action produces a consistent result across applications
Design your UI to allow users to change their mind and undo commands. Users sometimes click the wrong menu item or button accidentally. For example, use an alert dialog box to notify users of a critical action such as deleting data etc

Usability Guidelines

Address user requirement as quickly as possible: Generally user’s may be accessing an application on mobile for their immediate needs like locating an ATM, locating nearest cafe or finding the closest theater or for a short-spanned entertainment.
In such cases “quickness” makes a lot of difference, time being a crucial factor.

Make user inputs simpler: Entering text on mobile phone can be more painful than on a conventional desktop-based input mechanisms. Make sure the design allows the user to input the text in an easier way.
Allow them to choose by selecting an item instead of manually entering the text. Show prepopulated data in forms wherever possible

Indicate clearly what is selected: Mobile phones generally have lesser cursor control, as the pointer device is either joystick, touchscreens, trackball or the directive buttons on the mobile phone.User should be easily able to identify what has been selected to make the experience better. Show the selected link by highlighting it with different color or something similar or viable

Inessential stuff should be kept out: Provide only essential and relevant information on every page. User generally pay for the content they see on their device and so for them any inessential data download is a pain.
Additionally reading habits may also vary from desktop to mobile device. Content designed for mobile applications also needs to be crisp and to the point, as the users may not be interested in reading any typical junk on their devices which they are not interested in.

Make sure the basic controls are always available: Make sure you always place basic controls to navigate on site or application such as “Back to home”, “Back to search results” and relevant ones. Use contextual menu if required.
In most cases the device has a back button option, but it is advisable to include a back button on every page
Cater for Easy and Intuitive Interaction: Give interactive elements a design as simple as possible and make sure, that the user intuitively detects how to interact with them. Controls, whose operation is apparent should result in a faster learnability and a lower mental workload for the user. If, in addition, the interaction techniques are straightforward, the application should demand less attention from the user.

Exemplary rule: For text fields, make clear which kind of input is expected.

Strive for Consistency: Consistency enables the users to apply existing knowledge and to quickly build a mental model of the application’s functional concept. They come across familiar objects and training period can be reduced. Thereby, the user interface should furthermore be operated intuitively and without surplus mental load and additional concentration effort.
Offer Instantaneous,

Informative Feedback: Provide a feedback for every interaction, that reflects appropriately the significance and frequency of occurrence of the particular action and that considers the context of use.
Prompt reaction to the user’s interaction supports a sense of controllability. On the one hand, users are informed, that their input was recognized. Panic, that may occur due to too long response times when pressure to perform is high, can be avoided.

Do not make the mobile application a technology-limited version of your desktop application: Limit the application to the tasks most frequently attempted by your mobile users. Design the application around the constraints of mobile devices.
Applications should be easy to learn and use: Users will not spend time reading user manuals or help pages in mobile context.

Apply 80/20 rule: Optimize the design around the 20% of the functionality that will meet 80% of the user’s needs (80/20 rule). If additional functionality can be added without compromising usability, add it cautiously.

Here is the webinar recorded video of the Mobile UI and Usability Guide given at techgig on 17th Feb 2012. This video also includes answers to some really interesting questions asked by attendees.

PRAYAGA

SHYAMALA

A little something about me!

My name is Shyamala pronounced as shaa-ma-la and I am a UX evangelist with 19 years of experience as a UX designer with hybrid skills of UI and UX. I have experience in UX and UI designing on both mobile and desktop applications and have been part of designing some award-winning mobile applications.

​

I am a civil engineer by education and before moving into user experience I worked as an architect with a construction firm for 2 years. My passion for design and building great things for users pushed me into the UX domain. I am a self-made UX designer with no formal educational background into UX, but my passion helped me enter and succeed in user experience.