Application Structure

The Tizen platform features a range of UI components. The purpose and functionality of your application determine the components (and layout) you select. In this section, we will use Tizen's available UI components to demonstrate the most basic form of an application structure.

Note: For applications that require a special layout (such as camera, video player, or games), the following guidelines cannot be always applied.

For applications with a structure, we recommend displaying a list of items and showing details when an item is selected. Generally, applications can have more than two layers and can be divided into a normal mode and an edit mode based on the screen status, as shown in the following table.

Table: Application levels and modes

  Normal mode Edit mode
Top level Main view Edit mode of main view
Lower level Detail view Edit mode of detail view

Main View

Use the following guidelines when designing the Main view:

Start with an overview

As the first screen of your application, the Main view plays a vital role in helping users find essential functions and understand its general structure. (If the application structure has different categories, use tabs in the header.)

Main view of Tizen store application
 Main view of Tizen store application   

Enable content creation in the current view

In the Main view, the user needs to be able to use and create content items easily. To support this behavior, you should display multiple items in a list or grid format. Offer the Compose or Create buttons ahead of any other items. Consider having an icon button in the header, or a text button in the footer.

Compose and Create buttons in the header or footer       Compose and Create buttons in the header or footer

Enable easy content management

In addition to using or creating content items, users will often need to manage content items. The basic functions are as follows:

  • Search: Find a desired item. Offer the search field or an additional button at the top of the item list.
  • Share: Share items at any time. Offer an additional Share button on the screen.
  • Delete: Delete items. 
  • Edit: Execute functions that apply to multiple items (e.g., Delete, Copy, or Move) using a single Edit button.
Share button in the main view of the Gallery
       Share button in the main view of Gallery   

Detail View

Use the following guidelines to design the Detail view:

Focus on content

Display content elements, such as images or text, so that users recognize the content right away.

Displaying content in the Detail view
 Displaying content in the Detail view

Execute functions easily

The Detail view displays various functions that users can execute in the current screen. You should normally place these function buttons in the header or footer, but you can also place them in the body of your application screen.

Function buttons in the Detail view
 Function buttons in the Detail view

Enable easy navigation between screens

In the Detail view, the hardware Back key on the device always takes the user back to the previous screen. Place the Cancel button on the screen to quit the current task. Usually, the Cancel button is provided with a confirmation function, such as Save, Done, or Send.

Screen navigation
        Screen navigation

Edit Mode in the Main View

Use the following guidelines to design the edit mode in the Main view:

Allow users to manage multiple items

In edit mode in the Main view, the user can manage multiple items by selecting them with the checkbox component. However, if the user wants to cancel a task, they should do so by selecting a Cancel button instead of a Back key. When a user completes or cancels a task, the mode should automatically revert from edit to normal.

Managing items
     Managing items   

Support the ability to execute multiple functions

In edit mode, you can let users select functions, such as Delete, Rename, Copy, or Move, and execute them on a single screen. When the user completes the task, the mode automatically changes from edit to normal.

Selecting multiple items
     Selecting multiple items   

Edit Mode in the Detail View

Use the following guidelines to design the edit mode in the Detail view:

Allow users to create and edit content

In edit mode, users can create or delete content displayed in the Detail view. Ideally, your application should display an input method editor (for editing the text) and buttons (for completing or cancelling the task).

Provide setting modification options

Use the edit mode to let users set or update settings values via standard UI components (e.g., radio buttons, check boxes, and sliders).    

Editing settings
     Editing settings