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 05:13, 25 June 2009 by mayankkedia (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Image usability design guidelines

From Wiki
Jump to: navigation, search



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.

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.

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

47 page views in the last 30 days.