UX GuideSubscribe to RSS - UX Guide

 

Edit

Edit is one of the most commonly used functions to help users manage data. Normally, every application needs elements related to the edit function.

However, adhere to the consistency principle of the Tizen platform by giving users the basic functions they expect, in the location where they expect to find them.

Basic edit functions include creating, deleting, and moving data. Based on the characteristics of your application, you can offer the edit function so that it combines multiple functions.

Icons

Tizen 2.3 applications can use a variety of icons.

Main Icon

The main icon represents the application. It is normally used on the Home screen. If you do use it in other applications, make sure that the main icon is noticeable on any background. The icons of the Tizen 2.3 platform have a circular shape.

 

Figure: Main icons

 

Navigation

Navigation in Tizen follows the principle that a device screen must change according to changes in the application depth. The navigation design must be consistent so that the user can clearly understand which depth and screen of the application they are currently using.

Since navigation is the biggest factor affecting an application's overall usability, consider navigation-related issues as early as possible in your application development process.

Notifications

You should often inform your users of events taking place in your application while the user is either active in another application or has the device locked. In this case you can use the notification framework.

A notification is a way for your application to get the user’s attention and politely ask the user to stop the current task and go to your application instead.

Settings

In Settings, users can view and customize various functions. By offering the right setting at the right time, you can enrich your application user experience.

Designing Settings

The user can view application preferences:

  • Using a function within the application
  • From the Settings application

Keep the following guidelines in mind when designing user-definable settings:

Terminology

There are 2 important UX design features that help application users read and better understand application-related controls and events: a recognizable font and standard terminology.

To make the text legible and easy to understand, you must select the shape, size, and color of the text font, as well as the application background color. In addition, the use of appropriate graphic design enhances text legibility.

NOTE: By default, Tizen displays text from left to right. However, certain languages, such as Arabic, are displayed from right to left.

Touch Feedback

You must give users feedback when they touch specific elements (especially buttons) on the screen. This supports communication between a user and the application.

To promote better touch interaction with visual cues, Tizen 2.3 offers several color changes and effects. The buttons have separate states (normal, press, and dim) for each button type, such as list buttons.

 

Figure: Tizen buttons

Typography

To support its overarching design principles and unique visual style, Tizen 2.3 uses a dedicated font family named TizenSans. The TizenSans family consists of regular and medium weight fonts. You can download useful fonts from here and use them in your applications.

Figure: TizenSans fonts

UI Overview

The Tizen platform gives you optimum flexibility when developing your applications. Using Tizen native and Web frameworks, you are able to build applications in the HTML5 environment that deliver a consistent user experience on all devices.

Before you get started, take a moment to familiarize yourself with the fundamental aspects of the Tizen user interface:

New in Tizen 2.3

Tizen 2.3 is optimized for small screen UX. Especially it is fit for WVGA resolutions, so some changes have been made related to viewing content in a small screen device.

Screen Structure

The layout structure primarily consists of the header and content areas. In a small screen, most application functions should be placed in the More menu. For more details, see UI Overview.