From Forum Nokia Wiki

This design pattern is part of the Mobile Design Patterns series.

Introduction

Each application user-interface (UI) consists of composite elements like banners, buttons, icons, backgrounds, etc. Despite of existence of many attractive and enhanced user interfaces, it is recommended to choose an optimum UI design for the application taking into consideration both – Performance as well as User experience (UX) delivered by the application.

This article focuses on choosing an optimum application layout for mobile applications by giving an example of a non-conventional template layout.

Layout Design

Choosing a layout for the applications involves deciding the type of components to be used. For example, an application could use tabbed view or it could use a horizontal navigation scrollbar (at the bottom), as shown in the figure. However, using either of them involves the user to navigate to other screen by pressing left-right arrow keys.

Further, layout also involves designing placement of various components and maintaining appropriate spacing between them. Considering the desired performance of the application – the types of components should be selected.

Following are two layouts, one of which is heavier than the other (in terms of size).

The heavy layout uses a banner which is more appealing, colorful and attractive (as a result is larger in size, as well). The performance optimized light weight layout on the other hand uses a nearly half sized simpler banner with fewer graphic, as shown below.

Creating a button requires designing skills; however a developer could just make a usable and attractive button, as illustrated below.

The icon and the button text are centred within the basic shape of the button. It becomes important to distinguish between a selected button and a unselected button. The shadow effect, indicating depth in graphics, could be used to indicate focus on the selected button in this case. Game menus using buttons use heavy graphics to make the button more attractive; also employing sound effects while the user changes focus from one button to another.

A background image could be used if the size of the layout is not a big consideration. An attractive background enhances the UX of the end-users. Also, a transparent background could be used where the background of the current theme is used as background for the application.

If the layout includes text, custom fonts could be used. The optimum custom fonts suiting the layout could be thin, light, bold, italic, heavy, etc. depending on the target audience for the application. Slope of the fonts and size could be exploited to give a unique effect.

Changing images with menu button focus

Animations could include a set of images which keep on shuffling at regular time intervals or as the navigation between the buttons take place. For example, in the above layout the images are changed when a corresponding menu button is selected. Today, animations are used exchangeable with advertisements. Read guidelines about using Mobile advertisements here.

See Also

• A guide for newcomers - Visual Design
• The Gestalt principles of perceptual organization
• See more articles on Mobile Design by Croozeus

---

--Submitted by Croozeus 11:15, 31 May 2009 (EEST)