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.

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.

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.)

    

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       

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.

          

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.

 

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.

 

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.

        

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.

        

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.

        

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).