Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 04:13, 13 February 2012 by hamishwillee (Talk | contribs)

Image usability design guidelines

From Wiki
Jump to: navigation, search
Article Metadata
Created: mayankkedia (25 Jun 2009)
Last edited: hamishwillee (13 Feb 2012)



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. For instance if you were designing a chat client, for a particular buddy’s current status, instead of saying something like Mayank – Status Online, if you just depicted it with some icons/images, like a green background window and different colored text or maybe just an icon denoting availability.

Key usability tips for using images/icons

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

In case you are using standard images which are available in the public domain, make sure you use them in the right place, as certain images are almost etched into user memory and they denote a specific meaning only. So if you use them out of the context, you would end up confusing the user all the more. For instance the skull-bone image is a common image to denote danger/a definite no-go do not use it in the positive intending places like successful download of content notification etc.

Another thing to ensure is that if you have used a specific image for a specific intent makes sure you follow that throughout the application. Do not use the same image on two different meaning places. For instance if you decided to use a green balloon to denote a contact being online, do not use it when the contact goes to a do note disturb status etc. In case the usage is not consistent the entire purpose of using the image i.e. helping the user decipher the message/information quickly, is lost because now they are not sure what the image really denotes.

Msn example.JPG

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. The logic should ensure that there is no flickering when the image loads/reloads/re-draws itself on different situations like the options menu coming up/navigating back and forth between views etc. In case you are going to use some images which have an application life scope you should consider loading them into the buffers only once so that the UI doesn’t slow down each time there is an image load.

A common technique to avoid flickering is double buffering, details can be found CS001049 - Avoid flickering with double buffering and CS001268 - Using double buffering in Java ME

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. Make sure to test the application look and feel against different themes, as they have different colored backgrounds etc. At least the testing should be done on the default themes which come pre-loaded on the device, it should not happen that the image gets lost in the background color/images of the themes.

Another thing to consider is that the images stand out in most of the light conditions i.e. bright sunlight or inside the room where it might be slightly dark etc.

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.

Use image for application icon

One should always consider using a well designed image to be the application icon. If you do not specify any icon for the application it doesn't look nice and is also not easily distinguishable from other applications which also use the default icon. A good looking image which possibly explains your application well should be used as the application icon, for instance if you are developing a dialer, you could look at using some telephone related icons, or in case of game application like car racing maybe use some snazzy car image as your application icon etc.

Default icon for the application

Default icon.JPG

Custom icon for the application

Custom icon.JPG

More details on defining application can be found here :-

How to define application icon

Image for splash screen/about dialog

From a usability standpoint an application which does some background processing before being able to start the main view, it is imperative to use splash screens. The splash screen would notify the user that the application is loading. Using an animated image like a .gif is also a nice idea for the splash screen.

Splash screen.JPG

More details on the splash screen can be found from below resources :-

How to display splash screen in a non GUI thread

Simple Splash screen implementation

Splash screen usability design guidelines

The company’s logo should also be displayed in the about dialog as much as possible, it makes good sense from a marketing and usability stand point. You certainly want the users to be aware of the company and seeing the company icon user’s can associate your company with that image if they see it again/some place else.

Consider image applicability

Image should not be used as substitute for essential text. So it is important to first evalute whether a particular image will be clear and easy to comprehend from a user perspective. In some cases using a combination of both image and text could be the best way to go about it, for instance in the case of Tooltip.

Related links

--- Added by Mayank on 25/06/2009 ---

76 page views in the last 30 days.