DesignSubscribe to RSS - Design

JQuery to Tizen UX Conversion Tutorial: Dashboard Tutorial - Part 2

Overview

This article is part 2 of a two-part series that demonstrates the Dashboard pattern. The Dashboard sample application is based on the Tizen WebUI framework template generated by Tizen Web IDE.
The application demonstrates the design of dashboard form for Tizen applications using the Tizen widgets.

Note: This article explains about how to design a dashboard application and does not contain functionality of calculations and updation of real-time data, etc.

Pop-up

Pop-ups can give users vital information when they're completing a task. You can use the following types of pop-ups:

Center Pop-up

As you would expect, the center pop-up appears in the center of your application screen. Keep the following guidelines in mind when designing a center pop-up:

Progress and Process

If a specific task is running continually over a certain period of time, you must offer users a visual cue about its progress or process. Progress means that the duration or volume of the entire task can be predicted. Process means that the duration or volume of the task cannot be predicted, so you can only make users aware that the task is being processed. You should fill the progress bar from left to right as the task is being completed.

Picker

In the Tizen platform, you can include pickers in your application design to help users set the date and/or time, and select colors.

Time Picker

You can use the following types of time pickers:

Slider

Give users sliders so they can adjust values in settings with multiple or consecutive steps. If you want to make a slider's function as clear as possible, you can place text or icons at each end. However, neither the text nor the icons should be interactive.  

Text Field

You can allow users to enter text in an application via a text field. Tapping the text field activates the keypad and reveals a cursor. There are 2 types of text fields:

  • Fixed single-line
  • Multi-line

In a fixed single-line text field, if the amount of text a user is entering exceeds the text field range, the entered text scrolls to the left and disappears so that the user can continue writing. In a multi-line text field, the amount of text the user enters will dictate the number of lines.  

Controls

You can use a variety of UI controls in your application:  

Button: Executes a specific function.
Button

 


On/off button: Enables or disables a function.
On/Off button

 

Body

The body is the area visible between the header and footer. Your application's body can contain various content types, such as different kinds of lists or menus.

List

This is the most basic type of body content. You can use lists to display either single-line or multi-line items in an orderly manner. Each list item can have various elements, such as text, an icon, a thumbnail image, or a button.

Footer

As its name suggests, the footer appears at the bottom of your application screen. You can place function buttons in the footer if the function is essential, or if a prompt feedback is required.

Footer styles
Footer styles

  Keep the following guidelines in mind when designing your footer: