You are on page 1of 25

Mobile User Interface Guide Shyamala Prayaga

Mobile User Interface


and Usability Guide
Mobile User Interface Guide Shyamala Prayaga

Contents
Introduction ............................................................................................................
Purpose ..................................................................................................
Audience ................................................................................................

Mobile Platform Guidelines .........................................................


Overview of Platforms........................................................................................................
Application Screens .....................................................................................................
Interacation Model..........................................................................................................

User interface Design Principles ...............................................................


Overview ....................................................................................................
Usability Guidelines ....................................................................................
UI Design principles ...................................................................................

Visual Design Guidelines

UI Components ....................................................................................................
Color ....................................................................................................
Font ....................................................................................................
Mobile User Interface Guide Shyamala Prayaga

Introduction

Purpose

This document gives on overview of the Cross Platform Mobile User Interface and describes its essential parts.
The document can be used as an introduction to the Cross Platform Mobile User Interface or as a reference
material. It can be used as a background material to help decision-making in different UI design phases.

This document also covers UI Guidelines, Visual Design Guidelines and Best Practices to design consistent
application across different platforms. The following platforms were taken into consideration while designing this
Best Pratices

iPhone

Android

BlackBerry

Symbian

Windows Mobile

Palm Pre

Audience

This document is for anybody who needs a general overview about Cross Platform Mobile UI and its Best
Pratices. It is specifically targeted for

Application developers

UI interaction designers

UI software engineers

UI graphic designers

Usability experts

Content providers
Mobile User Interface Guide Shyamala Prayaga

Mobile Platform Guidelines

Overview

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

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.
Mobile User Interface Guide Shyamala Prayaga

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 to 480 in width and height.
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
Mobile User Interface Guide Shyamala Prayaga

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


Mobile User Interface Guide Shyamala Prayaga

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

Platform: Apple iPhone/iPod


Device Display Screen Size PPI (Pixel per inch) Interaction Method
iPhone 2G 320 x 480 163 Touch Screen
iPhone 3G 320 x 480 163 Touch Screen
iPhone 3Gs 320 x 480 163 Touch Screen
iPod 2G 320 x 480 163 Touch Screen
iPod 3G 320 x 480 163 Touch Screen

Platform: RIM BlackBerry


Device Display Screen Size PPI (Pixel per inch) Interaction Method
BlackBerry 7100 Series 240 x 260 151 Trackwheel
BlackBerry 8700 Series 320 x 240 154 Trackwheel
BlackBerry 8800 Series 320 x 240 163 Trackball
BlackBerry Bold 9000 480 x 320 217 Trackball
smartphone
BlackBerry Curve 8300
Series
320 x 240 163 Trackball, Trackpad,
BlackBerry Curve 8350i
smartphone

BlackBerry Curve 8500


Series
BlackBerry Curve 8900 480 x 360 245 Trackball
Mobile User Interface Guide Shyamala Prayaga

smartphone
BlackBerry Pearl 8100 240 x 260 161 Trackball
Series
BlackBerry Pearl Flip 240 x 320 166 Trackball
8200 Series
BlackBerry Storm 9500 360 x 480 184 Touch Screen
Series
BlackBerry Tour 9600 480 x 360 245 Trackball
Series

Platform: Google Android


Device Display Screen Size PPI (Pixel per inch) Interaction Method
HTC Dream (T-Mobile 320 x 480 181 Touch Screen and Trackball
G1)
HTC Magic (T-Mobile 320 x 480 181 Touch Screen and Trackball
myTouch)
HTC Hero (T-Mobile G2) 320 x 480 181 Touch Screen and Trackball
Motorola DROID 480 x 854 252 Touch Screen and Trackball
Google Nexus One 480 x 800 252 Touch Screen and Trackball
Motorola Cliq 320 x 480 181 Touch Screen and Trackball
HTC Tattoo 240 x 320 166 Touch Screen and Trackball
HTC Wildfire 240 x 320 166 Touch Screen
HTC Desire 480 X 800 252 Touch Screen

Platform: Windows Mobile


Device Display Screen Size PPI (Pixel per inch) Interaction Method
HTC HD mini 320 X 480 181 Touch Screen
HTC HD2 480 X 800 252 Touch Screen
HTC Touch Diamond2 480 X 800 252 Touch Screen
HTC P6500 240 X 320 166 Touch Screen
HTC P3470 240 X 320 166 Touch Screen
HTC Touch 240 X 320 166 Touch Screen

Platform: Symbian
Device Display Screen Size PPI (Pixel per inch) Interaction Method
Nokia E72 320 x 240 166 QWERTY keyboard
Nokia 5230 Nuron 640 x 360 245 Touch Screen
Nokia 5230 640 x 360 245 Touch Screen
Mobile User Interface Guide Shyamala Prayaga

Nokia N97 640 x 360 245 Touch Screen

Platform: Palm Pre


Device Display Screen Size PPI (Pixel per inch) Interaction Method
Palm Pre 320x480 181 Touch Screen
Mobile User Interface Guide Shyamala Prayaga

Mobile User Interface Design Principles

Overview
This document provides guidelines for designing a user interface for mobile application.

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

Intutiveness

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


Mobile User Interface Guide Shyamala Prayaga

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

Simplicity

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

Avoid unnecessary functionality and keep the visual design and layout uncluttered

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 should'nt 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
Mobile User Interface Guide Shyamala Prayaga

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

Intutiveness

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 trackwheel, trackball, trackpad, 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
Mobile User Interface Guide Shyamala Prayaga

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 nearert cafe or finding the closest
theatre 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 applications functional concept. They come across familiar objects and
trainingperiod 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 users 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
Mobile User Interface Guide Shyamala Prayaga

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.

Mobile Design Best Practices

Given the challenges of mobile application creation, designers and developers must take full advantage of the
lessons learned and best practices developed.

Design for Usability


Context is king for mobile applications. A thorough understanding of the user's context and objectives is
important.

Do not blindly mimic designs intended to run on desktop devices

Remove all clutter and simplify the application down to the essential data and functionality needed for
the user to take immediate action

Present the minimum number of options possible on any single screen

Minimize screen density but don't split content/interaction across so many screens that users get lost

Use a consistent UI design that helps users maintain a mental image of the application

Design the UI to behave similarly to other applications on the device with which users are familiar. If
designing for multiple devices, follow established design conventions for each device and avoid the
pitfall of trying to make the application behave the same across all platforms.

Make sure forms are easy to use and that navigation between fields is predictable

Provide clear methods for the user to recover from errors, broken links and other problems, particularly if
the device does not have a simple back button

Avoid complex interaction patterns that require close user attention for long periods of time

The less text input, the better

Exploit the unique capabilities of each device (GPS, accelerometer, screen size, input methods) to
create the most engaging user experience possible

Use highly structured workflows or wizards for infrequent tasks

Provide clear feedback on progress and the status of task completion

Use high contrast text color and select typefaces for maximum readability

Carefully and consistently use color throughout the design

Use simple navigation structures that focus on one specific task at a time
Mobile User Interface Guide Shyamala Prayaga

UI Components Usability Guidelines

This section covers the following UI components usability guidelines

Application startup Usability

Application HomeScreen Usability

Breadcrumb Usability

Dialog Usability

Navigation Usability

Editor Usability

Image Usability

Font Usability

Forms Usability

Splash Screen Usability

Screen Layout Usability

Option Menu Usability

View Usability

Tabs Usability

Text Usability

Tooltip Usability

Treeview Usability
Mobile User Interface Guide Shyamala Prayaga

Application startup Usability


Application startup should follow these usability guidelines:

Starting an application should not take much time, ideally 4-5 sec should be OK. If the application
startup is taking more time, a splash screen with a progress bar should be provided.

During startup if any audio/video clip is played, the user should be able to control the sound.

High priority system events like incoming call should be given priority.

Low memory conditions should be handled properly.

Application HomeScreen Usability


Homescreen is the most important screen of any mobile application. The main views impact on the user is much
more than whole application put together. The homescreen is the most important view in any application, and
gets more views and user attention than any other page/view. The user always sees the main view of the
application first and only from there they are able to navigate to any other view or able to use any of the
functionality provided by the application.

Since the main view is the soul of the application, focus should be put more on this view to get the navigation
patterns/layout/look & feel/option menu etc right so that the user gets a good feeling when they interact with the
application for the first time through this view.

Design Considerations
View Hierarchy/Layout
Designers should consider what sort of a view layout and hierarchy (shallow/deep), would best suit the
requirements of the application. Depending upon the functionalities, and how they can be logically clubbed
together they should prepare the wire frame which would give them an idea of the intended application/UI flow.
The wire frame would give them a better idea if the application should have multiple views or can the
functionalities be achieved using a single main view only.
Another thing to dwell on is to minimize the amount of information/controls available on the main view of the
application. The main view should be as uncluttered as possible to give it a more organized/neat look.
Mobile User Interface Guide Shyamala Prayaga

Navigation
The navigation should be easy to understand and follow for the user. The user should always get an idea of
where they are in the application and how to get to the other views of the application.

Breadcrumb Usability
Breadcrumb is a mechanism for keeping track of the users location within an application and provides
navigation facility.

Breadcrumb takes up very little space and hence helps in space availability for the display of content.

Gives user the knowledge of their current location relative to higher-level concepts.

One-click navigation to navigate back to higher levels in the hierarchy.

Traditional Navigation Breadcrumb Navigation


Mobile User Interface Guide Shyamala Prayaga

When to use ?

When the application is heavily content driven and also has a lot of navigation, breadcrumb can help is
saving space for content as well as giving proper navigation facility.

The user cannot easily navigate through the hierarchy via other local navigation methods.

In case of a web application, if a user might arrive to a page from an external source (e.g., through a
search engine) and the user will need a sense of context.

Dialog Usability
Dialog boxes simply put are a way of communicating between the system and the end user, i.e. to establish a
dialog between the two parties as it were. Dialog boxes could be many but primarily the intent of the dialog
boxes are two, notifying an end result of any given task or to accept input before performing a task from the user.

Keep the dialogs simple so that the users memory wont be loaded with too much information:
Information overload is never a good idea especially on the display area constrained mobile devices.
You possibly dont want the user to scroll up/down endlessly in trying to make sense of the long/boring
information/error/content being displayed. The choice of words and content is very important as more
often then not the dialogs would be altering the usual flow of events from an end user perspective.

Use the right dialogs at the right place: Always ensure that you are using the right dialog at the right
place, for instance if you are reporting an error to the user, use the error note with exclamation marks or
meaningful images, in the case of an information use the dialog with a positive meaning image like a tick
mark etc.

Navigation Usability
Navigation plays a crucial role in mobile applications. Usable navigation is something every application needs. It
determines where users are led and how they interact with the different views. Without usable navigation,
content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain
Mobile User Interface Guide Shyamala Prayaga

the elements necessary to guide the user through the application with some creativity and good design
thrown in.
A huge factor in being user-friendly is providing simple and intuitive navigation. Major areas of navigation should
be located consistently on all pages. Apply the navigation usability tips to your application that encourage user to
visit your application again and again.

A general rule of thumb is that any view in your application should be reachable with 2 clicks from your
main view

Another important factor with navigation is that users shouldnt have to guess where they will end up if
they click on a item. Regardless of whether the item is part of a navigation menu, or if it is simply in the
body of the text, visitors should understand where the item will lead them

Every view should have option to go back to main view directly

The main features should be available from the main view of the app

Must have a back option on all view

Be consistent, should use common navigation throughout the application

Exit function must always be available. User should be able to close the application without returning to
the main page of the application

Make proper use of indicators

The labels and instructions should be short and simple

Navigation labels should be short and easy to understand. The words used for the labels (menu item)
should also be sufficiently descriptive to provide a clear indication of the view they link to

Provide About/Help options. An application without help/about options places a serious usability
limitation

Editor Usability
Application that involves displaying and processing data in text form require editor control. Application may either
require modification in existing data or produce new data. To handle these needs application designer must use
them in uniform and efficient way.
Since smart phones have limited input capabilities, there are many aspects to be considered when compared to
the usual editor components in modern desktop environments. The editor controls of the S60 platform have been
designed to be applied and customized to meet the specific text display and input needs of the application.

Depending on your input text requirement, design an application in such a way that editor can take correct input

Provide cursor & scrollbar: For displaying normal text use simple plain text editor. Provide a cursor on
the editor so that user can navigate and modify the text. In case the content of the editor is large then
provide scrollbar to allow user to scroll to the desired location and also to be aware that there is more
content that can be viewed

Use number editor for taking integer input

Confidential information should be hidden: Secret editors can be used for getting confidential input like
login name and password, so the same doesnt get displayed on the screen.
Mobile User Interface Guide Shyamala Prayaga

Use Multi-Field Numeric Editors: In case you want to take input of several numeric fields like time editor,
date editor, range editor use multi field editors so that the user can enter information in the different
fields

While entering text, the user should be given example format with the help of tool tip or by providing the
default values

For input fields specify the right field length.

Image Usability
The average user using the mobile applications have less time and are sometimes too lazy to go through the text
that you have put in the notification dialogs/controls etc to let them know of some information. The text displayed
could be to let the user know of a range/intent of a control/setting or sometimes about the result of an action that
the user had requested earlier. It has been observed that a picture says a thousand words, and is generally
easier to understand and definitely less time consuming as compared to reading the text and then deciphering
the meaning of the same.
Usability team should consider the usage of images in the application where they could be used to
replace/complement the existing text content. It would not only make more aesthetic sense but also reduce user
fatigue if they were forced to read the entire text.
Some of the key points to consider while using images within the application for either notification of events or
otherwise are as under:-

Follow the conventions & be consistent

Scale the image according to screen size/mode: While using images it is important to test the
appearance of the image on different sized target devices, especially on the ones which support more
then one display mode, like portrait, landscape etc. The image should scale up/down nicely as per the
current mode of display. You certainly do not want a chopped/clipped image on different modes; it does
not look good from a usability perspective.

Avoid flickering or sluggishness due to image loading: Since the image takes some time to load into the
runtime buffers while drawing/scaling etc, it is very important to optimize the drawing/rendering logic in
your code.

Right backgrounds/contrasts etc are used: The idea of using an image is to make the UI look attractive
and also to convey a particular message to the user. Hence it is imperative that the images being used
stand out from the rest of the content/background of the application views.

Resize/fit & position the images correctly: While using images as icons within a built-in/custom control
make sure that the image is not too big or too small. Both the conditions are going to affect the overall
usability of the control for the user. The right sizes for the images would ensure that they are in sync with
the rest of the content both in the control they are being used and with the overall view being displayed.
The images should not be cropped/clipped while they are being displayed in the controls as it would not
look nice then. The positioning of the images on the UI is also critical as images placed out of position
would lose their appeal and efficacy.

Maintain the right balance: Although images are appealing from a usability perspective and as the UI
designer one might be tempted to make extensive use of images, it is important to strike the right
balance between subtle and going overboard. During the ui design stage one should carefully consider
the scenarios where the use of image makes sense. In this context taking the services of an expert
designer is always recommended, as they would give you a wire frame which would not only look nice
but would be user friendly.
Mobile User Interface Guide Shyamala Prayaga

Font Usability
While doing the usability design it is important to ensure that due consideration is placed on the right usage of
the fonts, in terms of their style, size, color, highlighting/underline patterns etc. A rightly used font to display
text/information to the user can go a long way in providing higher usability index for the application.

Unless required, try to use the fonts which are already defined by the system

If you are using custom fonts that not defined in system then make sure that it will render properly on all
devices

While defining the font size, the screen resolution must be kept in mind.

Keep the font size which is in sync with the display screen space available to the application

Font should make text easily readable. Font properties like color/size/style should make the text look
nice on the UI

While using background images, use a proper combination of font type and colour so that the text is
readable

Keep the backgrounds behind your text solid and plain, it is more readable

Because blue-receptors in the eye are least numerous, avoid blue for small font

One can make use of bold font styles or use underlines etc so that the text looks highlighted and easily
noticable

The best combination for readability is black font on a white background and vice versa

Forms Usability
Forms can be used to display a numbers of controls which user can scroll up and down. Forms provide a way to
allow the user to quickly and easily enter or edit many items of data in one process. You can edit item in a form
which has focus. Forms have either a view mode and an edit mode, or just an edit mode. Use of a view mode
implies that there is some existing information to display in the form, which the user can then edit.
Form can have following item types:
1. Text field (alphanumeric or numeric content)
2. Pop-up field
3. Slider
Any combination of these types is possible within one form.

Always set view mode as default mode in forms so that any accidental editing can be avioded

Each item in a form must have a label and a control for editing the value of the item. The label can
contain text, an icon, or both

Using AutoFill mode - This mode can be used for the textbox control. In such a functionality, when a user
types in some content in the text box, automatically the system can retrieve the matching data from the
database and faclitate user to choose form the same
Mobile User Interface Guide Shyamala Prayaga

Form Length - Keep in mind the availability of the screen, and the length of the form. Too much lengthy
forms can be inconvenient for users

Minimum time requirement - Design the form in a way that the required information is got from user as
well as the time required to fill the form by user is minimum

Alignments of the labels and the field should be correct

Group the related data together

Try to get most inputs from a specified set of data, like using the drop down box which is per-populated
with the expected data

Use validations wherever required and possible

Give enough information/explanation for the fields if the name of field itself is not self explanatory. This
can be done using help sections, tooltips,etc. But keep in mind over use of this can be inconvenient for
users

Clearly indicate which are the required fields. Use appropriate color or font indication for the same

Wherever possible restrict the field lengths to avoid junk data

Actions - Save,Submit,Back are some of the common actions that should be given on the form. Usually
the positioning of the actions should be at bottom of the form

Indicate the errors or successful completion of form very clearly to the users

Splash Screen Usability


Basically launching applications need to load resorces and connect to the internet, there often is a delay while
launch application. Splash screens are typically used by applications to notify the user that the program is in the
process of loading its resources or connecting to internet. Occasionally, a progress bar within the splash screen
indicates the loading progress. A splash screen disappears when the application complete resource loading.
Keeps these guide line in your mind during implementing splash screen to your application.

Display the product name and version on splash screen

Splash screen can display the vendor's corporate image and branding

Splash screen contains important copyright and third party components information

Show a a progress bar within the splash screen indicating the loading progress

Allow user to exit application if it takes long time to load resources

Make sure the splash screen supports both landscape and portrait mode view

An audio/video clip can also be added for a better user experience

Splash screen should not be displayed when application has been auto-started as the intention is to give
it keep it running in the background and not display to the user

Screen Layout Usability


The application should function and render its display as specified, regardless of the device screen resolution
and format. Thus design application in such a way that it match the display resolution.
Mobile User Interface Guide Shyamala Prayaga

Make sure that the application's content is easy to view and interact with when displayed in either
resolution

Display a proper message if user switch to the mode which is not supported by your application

Design each control of application in such a way that it will resize itself when user change resolution

While switching from portrait to landscape mode and vice versa, the number of lines or items may
change. So a generic UI design should not assume a certain fixed number of items

In the landscape mode, the placement of status pane components should be consistent with other
applications

Options Menu Usability


A menu is a window that presents a list of commands to the user. A menu is arranged into lines, known as menu
items, each of which contains a text label. Menu provides a convenient way to navigate between different forms
and views in an application. When a user selects a menu item, the command handler is invoked which handles
the command pressed. Option menu is an efficient way to allow user to perform some actions, especially in the
case of soft key based non touch devices.
The Options menu is a menu list displayed in a pop-up window.

Group the menu items logically: logical grouping of the menu items should be used so that the users can
recongnize them easily

The main tasks should be available quickly: Users should be able to locate the main task easily

No deep menu: the menu structure should not be too deep or too shallow

Menu should not cover whole screen: Ideally it should not cover more than 70% screen of the
application. The maximum size is approximately the size of the standard main pane

Dim background content: The content on the screen outside the menu pop-up should be dimmed, as
otherwise they would hamper the usability of the menu, as the users attention might be diverted

Use short and meaningful/understandable text: Where possible use the conventionally known/used
words to denote a menu option command text. Do not use texts which are either too technical or too
tough to understand for the end user. Also make sure that the command does what the user expects it to
do, do not surprise the user

Provide scrollbar: The first choice should be to place only as many options on the menu as can be
displayed at one time, without having to have a scrollbar for navigating up/down. In case it is not
possible to avoid having more options than it is possible to display in one shot, a scrollbar should be
provided to the user, that ways they would know there is some more menu option which is not visible
right now

View Usability
A view is the basic building block of any application, and is the first thing that the user sees/possibly interacts
with. It is important to carefully design the views of the application, both from a functionality and ease of use
stand-point. The user should be able to use the application pretty much on his own without having to read the
help manual or other instructions. At least the key functionalities of the application should be easily
understandable and usable. Hence it is imperative to design the views of the application in such a way that the
important featues/functionaltiies are available from the main view, while the lesser used
features/information/setting etc can be done from the secondary views.
Mobile User Interface Guide Shyamala Prayaga

Depending upon the usage pattern and functionality one should decide the overall look and feel, styling of the
view.
Some common views are

Fly in-out view

Grid Style View

List View

Tabbed View

Detailed View

Tabs Usability
Tabs provides navigation between different views/controls. Each tabs show name of open controls in rectangular
box with its top borders rounded. User can navigate between different tabs using arrow keys. Usually active tabs
highlighted to distinguish it from other inactive tabs.

The first tab should contain most essential functionality of the application. Underlying tabs can be used
to hide advanced functionality

Highlight currently selected/active tab and its title. Set title of others tabs dimmed/faded. Also make sure
that the title of unselected tabs are clearly visible and readable

Allow users to switch tabs using left and right arrow keys

Connect the active tab to content area

If tab is an icon (rather than text) then use tooltips to give description of tab

One row of tabs preferable than multiple rows

The row of tabs preferable on top of the panel

Change the font color of title on the active tab

Tab Labels should be short usually one or two words

Try to limit the number of tabs if possible, so that the users need not scroll

Text Usability
Text usability is applying usability principles to content to improve the impact the text has on the reader. It
includes making your text easier to read. When text is easier to read, the user is able to absorb the information
you provide to them. This is important for any application. Easier to read text also builds the relationship between
you and your user. If you convey information to them in a way they understand, they'll be more likely to trust you
and any products or services you might offer
Text usability is about building trust through your text. It's about making your users more comfortable with your
application and forging a closer relationship to them. Your content has a monumental impact on your user, and
every word should be used to your advantage. By applying usability to your text, your content will be easier to
understand and users will talk about your application.

Organize the text into paragraphs


Mobile User Interface Guide Shyamala Prayaga

Try to use bulleted information instead of a table

Set the default text alignment is left. For right-to-left UI languages, the default text alignment is on the
right

The best combination for readability of text is black text on a white background. so black text is
preferable

Highlight keywords or title of text

Truncate text if it is not fit in line and not supposed to display in two line. Add three dots(...) if truncation
is required

Use word wrapping whenever for displaying long texts in paragraph

Use the same text as the control condition in a layout that facilitated scanning text easily

Avoid abbreviation of text if they are not familiar to all target users

Do not use ALL CAPS text

Employ the user's native language. Always test localized versions of the application with native users

Tooltip Usability
Tooltip can be described as a small label or text that appears next to a tool/control when the user pauses over it.
The tooltip is typically a one-or-two-word text which describe what the control/view is. Tooltips are handy when a
you have multiple tabs in application and user scroll through these tabs using left and right arrow keys.

The tooltip text should be kept small limiting to one or two words only\

Should not use symbols and punctuation in the tooltip text

Tooltip should be visible for 3-5 secs when the user hovers over a button/tool and should be turned off
after that

Should be really useful for novice users

Treeview Usability
Navigation is one of the most important part of any application which allows users to find what they want easily &
quickly. A tree view is a graphical user interface that presents a hierarchical view of information. Each item (often
called a branch or a node) can have a number of sub items. Tree View Represents a control that displays
hierarchical data in a tree structure that has items that can expand and collapse.

In case of your application requires to display item listing by product categories, you can use tree view

A tree view can be used If an application require to disply the directory structure of a file system

To list the songs available in mobile device, by categories like artiest, album name, tree view is useful

You might also like