• Shyamala Prayaga

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:

  1. Diversified Platforms and Devices

  2. Diversified Screen Size and Display Resolution

  3. Diversified Operating System

  4. Limited Memory

  5. Diversified Interaction

  6. Diversified Usage context

  7. 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


  1. iPhone

  2. Android

  3. BlackBerry

  4. Symbian

  5. Windows Mobile

  6. 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

  1. While at home

  2. On the way to office

  3. On the way to home

  4. Coffee bar

  5. While using restrooms

  6. Waiting in the bus stop

  7. In the bus or subways etc

  8. Using the device while moving

  9. Performing another task at the same time

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

  11. In an extremely dark or bright environment

  12. Running out of battery

  13. 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

  1. Learnability

  2. Efficiency

  3. Memorability

  4. Error Recovery

  5. Simplicity

  6. Mapping

  7. Visibility

  8. Feedback

  9. Consistency

  10. Intuitiveness

  11. User input

  12. Customization

  13. Satisfaction

Learnability

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

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

Efficiency

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

  2. Key tasks should be made as efficient as possible

Memorability

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

  2. Frequency of use is the key factor in memorability

Error Recovery

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

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

  3. 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

Simplicity

  1. Usual task should be easy and less common task should be possible

  2. Avoid unnecessary functionality and keep the visual design and layout uncluttered

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

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

  5. 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

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

Mapping

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

Visibility

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

  2. Understanding the users goals is critical

Feedback

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

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

Consistency

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

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

Intuitiveness

  1. An interface should be as intuitive and straightforward as possible

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

User input

  1. 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

  1. 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

  1. 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.

  2. 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

  3. 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

  4. 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.

  5. 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.

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

  7. 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,

  8. 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.

  9. 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.

  10. 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.

0 views

Recent Posts

See All

Android OS Research

The market is full of smart phones and tablet devices, and with the huge demand in the market for smart phones and tablet devices, Android is no where behind to launch its own smart phones and tablets

PRAYAGA
SHYAMALA
  • LinkedIn Social Icon
  • Twitter Social Icon

My name is Shyamala pronounced as shaa-ma-la. I am a UX evangelist turned product owner defining experiences and vision for autonomous digital assistants. 

I am a civil engineer by education, and before moving into user experience and product, 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 speciality. 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.