Designing the layout

When structuring content and presenting information, make sure there is never too much information on the device screen, and group UI elements in a distinctive and intuitive manner. For example, if you place too many interactive elements, such as buttons and links, on a single screen, navigating the UI can become cumbersome. Reduce and group UI elements using existing conventions, such as collapsing and expanding menus or links (accordions), ellipses, cover flow effects, or icons for text functions.

The following figure shows an example UI with good information structure and layout design. The UI is clear and spacious, contains only necessary information, and provides clearly separated buttons that are suitable for both key and touch interaction. Note also how the playback buttons have been intuitively scaled to reflect the importance of their respective functions.

Figure: Example UI with good information structure and layout design

By default, Flash Lite applications running on S60 5th Edition touch devices display the touch keypad in full screen mode and the touch toolbar in normal screen mode. Both take up screen space and include a fixed set of UI elements that provide access to basic playback and navigation functions. You can disable the touch keypad, but not the touch toolbar. Since the present instructions focus on creating an application with a dynamic layout that supports both key and touch input, it is recommended that you disable the touch keypad in your application.

When designing the layout of your application, consider the following issues:

  • Element dimensions—Make sure that the UI elements are large enough to allow good usability and that screen text uses readable font sizes.

  • Dynamic element layouts—Design the UI elements for efficient resizing and repositioning to accommodate different screen resolutions and orientations.

  • Screen resolution and scaling—Define the screen resolutions that your application supports and determine the scaling of UI elements for them.

  • Screen orientation—Design your application to detect orientation changes and to respond to them by changing its layout accordingly.

For a design example, see section Designing the Sudokumaster layout.

For alternative approaches to creating a dynamic layout for a Flash Lite application, see the following online resources:

© Nokia 2009.