View
7.326
Download
0
Category
Preview:
DESCRIPTION
This document gives on overview of the Cross Platform Mobile User Interface and describes its essential parts.
Citation preview
Mobile User Interface Guide Shyamala Prayaga
Mobile User Interface and Usability Guide
Mobile User Interface Guide Shyamala Prayaga
ContentsIntroduction …............................................................................................................
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 Platform Guidelines
Mobile User Interface Guide Shyamala Prayaga
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
Mobile User Interface Guide Shyamala Prayaga
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.
Mobile User Interface Guide Shyamala Prayaga
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
Mobile User Interface Guide Shyamala Prayaga
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 MethodsDisplay 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 smartphone
480 x 320 217 Trackball
BlackBerry Curve 8300 Series
BlackBerry Curve 8350i smartphone
BlackBerry Curve 8500 Series
320 x 240 163 Trackball, Trackpad,
BlackBerry Curve 8900 smartphone
480 x 360 245 Trackball
BlackBerry Pearl 8100 Series
240 x 260 161 Trackball
BlackBerry Pearl Flip 8200 Series
240 x 320 166 Trackball
BlackBerry Storm 9500 Series
360 x 480 184 Touch Screen
Mobile User Interface Guide Shyamala Prayaga
BlackBerry Tour 9600 Series
480 x 360 245 Trackball
Platform: Google Android
Device Display Screen Size PPI (Pixel per inch) Interaction Method
HTC Dream (T-Mobile G1)
320 x 480 181 Touch Screen and Trackball
HTC Magic (T-Mobile myTouch)
320 x 480 181 Touch Screen and Trackball
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
Nokia N97 640 x 360 245 Touch Screen
Mobile User Interface Guide Shyamala Prayaga
Platform: Palm Pre
Device Display Screen Size PPI (Pixel per inch) Interaction Method
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
Mobile User Interface Guide Shyamala Prayaga
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
Mobile User Interface Guide Shyamala Prayaga
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
Mobile User Interface Guide Shyamala Prayaga
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
Mobile User Interface Guide Shyamala Prayaga
download is a pain.
Additionally reading habits may also vary from desktop to mobile device. Content designed for mobile applications also needs to be crisp and to the point, as the users may not be interested in reading any typical junk on their devices which they are not interested in.
Make sure the basic controls are always available: Make sure you always place basic controls to navigate on site or application such as “Back to home”, “Back to search results” and relevant ones. Use contextual menu if required.
In most cases the device has a back button option, but it is advisable to include a back button on every page
Cater for Easy and Intuitive Interaction: Give interactive elements a design as simple as possible and make sure, that the user intuitively detects how to interact with them. Controls, whose operation is apparent should result in a faster learnability and a lower mental workload for the user. If, in addition, the interaction techniques are straightforward, the application should demand less attention from the user.
Exemplary rule: For text fields, make clear which kind of input is expected.
Strive for Consistency: Consistency enables the users to apply existing knowledge and to quickly build a mental model of the application’s functional concept. They come across familiar objects and 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 user’s interaction supports a sense of controllability. On the one hand, users are informed, that their input was recognized. Panic, that may occur due to too long response times when pressure to perform is high, can be avoided.
Do not make the mobile application a technology-limited version of your desktop application: Limit the application to the tasks most frequently attempted by your mobile users. Design the application around the constraints of mobile devices.
Applications should be easy to learn and use: Users will not spend time reading user manuals or help pages in mobile context.
Apply 80/20 rule: Optimize the design around the 20% of the functionality that will meet 80% of the user's needs (80/20 rule). If additional functionality can be added without compromising usability, add it cautiously.
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
Mobile User Interface Guide Shyamala Prayaga
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
Mobile User Interface Guide Shyamala Prayaga
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
Mobile User Interface Guide Shyamala Prayaga
Homescreen is the most important screen of any mobile application. The main view’s 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 user’s location within an application and provides navigation facility.
Mobile User Interface Guide Shyamala Prayaga
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.
Mobile User Interface Guide Shyamala Prayaga
Keep the dialogs simple so that the user’s memory won’t be loaded with too much information: Information overload is never a good idea especially on the display area constrained mobile devices. You possibly don’t 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 user’s shouldn’t 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.
Mobile User Interface Guide Shyamala Prayaga
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 doesn’t 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
Mobile User Interface Guide Shyamala Prayaga
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.
Mobile User Interface Guide Shyamala Prayaga
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
Mobile User Interface Guide Shyamala Prayaga
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 user’s 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
Mobile User Interface Guide Shyamala Prayaga
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
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
Recommended