Mobile UI and Usability Guide

Mobile User Interface Guide Shyamala Prayaga
Mobile User Interface

and Usability Guide
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 ....................................................................................................
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 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.
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
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
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

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

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

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
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
Nokia N97 640 x 360 245 Touch Screen
Platform: Palm Pre

Palm Pre 320x480 181 Touch Screen
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

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

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

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

Mobile UI and Usability Guide

Uploaded by

Copyright:

Available Formats

Mobile UI and Usability Guide

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mobile UI and Usability Guide

Uploaded by

Copyright:

Available Formats

What are some challenges in designing mobile applications?

What are some challenges in designing mobile applications?

What are some guidelines for designing user interfaces for mobile applications?

What are some guidelines for designing user interfaces for mobile applications?

Mobile User Interface Guide Shyamala Prayaga

Mobile User Interface

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

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

Visual Design Guidelines

Mobile Platform Guidelines

Here are some challenges involved while designing a mobile application

Diversified Platforms and Devices

Diversified Screen Size and Display Resolution

Diversified Operating System

Diversified Usage context

Diversified User needs

Diversified Platforms and Devices

Diversified Screen Size and Display Resolution

Diversified Operating System

Diversified Usage context

Diversified User needs

On the way to office

On the way to home

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

Application Screens & Interaction Methods

Platform: Apple iPhone/iPod

Platform: RIM BlackBerry

BlackBerry Curve 8500

Platform: Google Android

Platform: Windows Mobile

Nokia N97 640 x 360 245 Touch Screen

Platform: Palm Pre

Mobile User Interface Design Principles

User Interface Design Principles

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

Key tasks should be made as efficient as possible

Frequency of use is the key factor in memorability

Understanding the users goals is critical

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

An interface should be as intuitive and straightforward as possible

Provide pre-selected default values where possible

When designing your application, also consider the following guidelines:

help pages in mobile context.

Mobile Design Best Practices

Design for Usability

Do not blindly mimic designs intended to run on desktop devices

Present the minimum number of options possible on any single screen

The less text input, the better

Use highly structured workflows or wizards for infrequent tasks

Provide clear feedback on progress and the status of task completion

Carefully and consistently use color throughout the design

UI Components Usability Guidelines