Tizen mobile design_guidelines

The Tizen Mobile
Design Guidelines
© 2015 Tizen Project, a Linux Foundation Project. All Rights Reserved. Linux is a registered trademark of Linus Torvalds.
Tizen is a registered trademark of The Linux Foundation. * Other names and brands may be claimed as the property of others.
Except as noted, this content is licensed under Creative Commons Attribution 3.0. For details, see the Content License.

2
TheTizen Mobile Design Guidelines
Table of Contents
1. TIZEN MOBILE DESIGN PRINCIPLES 5
FOCUS ONTHE PRIMARY GOALS 5
1.1.1 Focus on the Primary Goals 5
1.1.2 Design the First Screen to Satisfy 80% of User Needs 7
1.1.3 Design One Action to Run a Feature 7
CREATE A SENSE OF FLOW 8
1.2.1 Avoid Unnecessary Steps 8
1.2.2 IncludeVisual Hierarchy and Animations to Guide Users 9
1.2.3 Follow Platform-wide Conventions 10
PROVIDE INFORMATION AT A GLANCE 11
1.3.1 Place Essential Information First 11
1.3.2 Visually Separate the Components by the Uses 12
1.3.3 Visually Express What Users Can Do 13
2. MOBILE SPECIFIC STYLES 14
THEME COLORS 14
COLOR SWATCH 14
FONT STYLES 15
LIST PRINCIPLES 18
3. TIZEN MOBILE UX OVERVIEW 20
HOME STRUCTURE 20
3.1.1 Home Screen 21
3.1.2 All Apps Screen 22
3.1.3 Recent Screen 23
3.1.4 Lock Screen 24
3.1.5 Notification Panel 25
GESTURES 26
HARDWARE KEYS ONTHE DEVICE 28
ACCESSIBILITY 29
3.4.1 Tizen Screen Reader 29
3.4.2 Guidelines for Designing Reader-Compatible Content 31
3.4.3 Adjustable Font Size 34
4. DESIGN PATTERNS 36
APP STRUCTURE 36
4.1.1 MainView 37
4.1.2 DetailView 39

3
4.1.3 MainView Edit Mode 43
4.1.4 DetailView Edit Mode 44
APP HANDLING 45
4.2.1 Starting and Stopping an App 45
4.2.2 Multitask Handling 46
NOTIFICATIONS 47
4.3.1 Accessing the Notifications 47
4.3.2 Instant Notifications 51
4.3.3 Active Notifications 52
4.3.4 FullView Notifications 53
4.3.5 Badges 55
WIDGETS 56
4.4.1 InformationWidgets 56
4.4.2 InteractiveWidgets 57
4.4.3 HybridWidgets 57
4.4.4 Design Guidelines forWidgets 59
SCREEN ORIENTATIONS 63
4.5.1 Portrait Orientation 63
4.5.2 Landscape Orientation 63
4.5.3 Transition between Different Screen Orientations 65
SCREEN LAYOUT 68
4.6.1 Header 69
4.6.2 Content Area 70
4.6.3 Footer 72
NAVIGATION DESIGN 73
4.7.1 Back and Cancel 73
4.7.2 Home Key 74
4.7.3 Navigation within an App 75
4.7.4 Navigation between Apps 76
4.7.5 User Actions Inside an App 77
SETTINGS 86
4.8.1 Designing Settings 86
4.8.2 Preference UI Controls 88
4.8.3 Tips for Designing Settings 93
5. UI COMPONENTS FOR TIZEN APP DESIGN 98
NAVIGATION ELEMENTS 98
5.1.1 Title Bar 98
5.1.2 Tabs 100
5.1.3 Navigation Bar 101
5.1.4 Scroll Components 102
PRESENTATIONVIEWS 105
5.2.1 ListView 105
5.2.2 GridView 106

4
5.2.3 Group Index 107
5.2.4 Progress Components 108
USER INPUT COMPONENTS 110
5.3.1 Button 110
5.3.2 Checkbox Components 112
5.3.3 Radio Button 114
5.3.4 Text Input 114
5.3.5 Dropdown Menu 116
5.3.6 Slider 117
5.3.7 Picker 118
ASSISTVIEW 121

5
1. Tizen Mobile Design Principles
Tizen design principles explained in this section of the document are provided to suggest clear guidelines for
developers, to design simple and easy-to-use apps for everyone.
Focus on the Primary Goals
Ensure that your app allows users to easily use its major features. You can simplify the screen layout of your
app and emphasize important features so that users can easily find them.
1.1.1 Focus on the Primary Goals
Identify the Primary Goals and Provide the Components in a NoticeableWay
Display the most frequently used features on the first screen. Floating action buttons are a convenient option
that allows users to access the main features quickly and easily. On the other hand, less frequently used
features may be placed on the More menu screen. Users can access the More menu by pressing the Menu key.
By focusing on the primary features and presenting them in a consistent way, you can design an app that is
easy to use.

6
Figure: Examples of a floating button, and the Menu and Back keys

7
1.1.2 Design the First Screen to Satisfy 80% of User Needs
Provide Essential Information First and Give Additional Information upon Request
Users are only interested in the information they need. Therefore, provide only essential information on the
screen. You can provide more detailed information when a user requests it or takes action, but avoid trying to
provide everything on one screen.
When you design a screen layout, ensure that you include enough empty space between information. It
increases the readability and allows users to be able to understand given information more easily.
1.1.3 Design One Action to Run a Feature
Provide One SimpleWay for Users to Achieve their Goals
Providing multiple ways to access a single feature may confuse users. Tizen aims to keep its design simple and
practical because it targets a wide range of users, from beginners to advanced users. Hidden gestures or
menus without any visual cues are not recommended when designingTizen apps.
Avoid using hidden gestures or additional quick actions that require tutorials in your design. Find the most
effective and reasonable way to perform an action and allow users to access it via an action button. If you need
to add subordinate actions in the design, provide them in More menu.
Figure 1. The More menu screen

8
Create a Sense of Flow
A good flow in the app design makes it easy for users to make decisions. Users may lose interest in your app if
it is hard to navigate and difficult to understand.
1.2.1 Avoid Unnecessary Steps
Provide Users with an Accessible Structure
Ensure that the access flow of your app does not include any redundant steps. Eliminate unnecessary dialog
boxes and confirmation windows that slow down user progress. Users want quick access to information, to
complete their tasks in fewer steps.
Help users instantly perform simple actions. For example, quick access to the Internet browser is a good
feature to have. By facilitating user access to major websites, you can minimize the effort required.
Figure: Quick access feature for an Internet browser

9
1.2.2 IncludeVisual Hierarchy and Animations to Guide Users
Use Animations andVisual Cues
Stacked layers create a visual hierarchy, and each layer comes with a clear direction of movement. When
layers are assembled well, they create a flow that guides the users. For example, to inform users of new events
that require user’s attention, active notifications always slide down from the top of the screen, over the
current screen users are working on.
Figure: An active notification.
Visual cues are another way to guide users. Also, carefully placed pop-up notifications and toast pop-up
messages will help users complete tasks more easily by providing them with essential information about the
process.

10
1.2.3 Follow Platform-wide Conventions
Provide Consistent Design
A consistent design allows users to learn how to use new features faster. Consider what common actions are
noticed by the average user and design your features to use the same actions. For example, the Back key is
generally used for returning to previous pages or canceling current tasks. So, in your app, design the Back key
to return to the previous page or cancel tasks, and avoid using it for something else.
Figure: Navigating back from a message

11
Provide Information at a Glance
When you design screens for your app, ensure that the purpose of each screen is easily understood at a glance.
Design the primary information to be clearly visible and easily accessible.
1.3.1 Place Essential Information First
Present Information in Order of Importance
Ensure that your app screen displays the most important content first. For example, in the detail view, show
the essential information on the first screen and allow users to scroll down to see the additional information.
Figure: Display important information first

12
1.3.2 Visually Separate the Components by the Uses
Create Clear Distinctions between the Information on the Screen
Use different font sizes, weights, colors, and layouts to separate the information on the screen and allow
important information to stand out. For example, the Contacts menu includes tabs, a search field, a contact
list, and a floating action button on the same page. However, different styles and colors applied to these
elements enable users to clearly separate them.
Figure: Clear distinction between different types of information

13
1.3.3 Visually Express What Users Can Do
Make theTouchable Elements LookTouchable
Apply consistent designs for interactive elements on the screen, and disable or hide the elements that are not
available. For example, you can disable the Done button to let users know that a required field is empty.
Figure: A disabled Done button shows that the requirements are not met.

14
2. Mobile Specific Styles
Theme Colors
The Tizen 2.4 SDK offers a single background gradient called “Midday” as the default Home screen
background. It captures colors and natural gradients of the sky.
Figure A. Midday, the new theme color for the Tizen SDK 2.4 mobile
Color Swatch
For basic action buttons, such as Go and Stop, Tizen 2.4 uses clear and distinct colors for focus and emphasis.
Transparency may be applied to text colors to add subtle nuances.
No. Color/HSB Code Swatch Component
1 White # FFFFFF Primary text /Primary color
2 Gray # 666666 Secondary text
3 Black # 000000 Primary text /Primary color
4 Green # 2AB842 Start
5 Red # E12222 Stop
6 Yellow # FFB400 Snooze, Favorite (star)

15
Font Styles
Different text colors may be used depending on the level of text information and background colors. The
following are examples of the primary and secondary text colors in theTizen Mobile SDK 2.4.
A. White text against a dark background (theme color)
B. Colored text against a white background

16
c. Black primary text against a white background
d.Gray secondary text against a light blue background
The following examples show how different text colors appear on the call log screen. White primary text
displays well over the header area (dark theme color). Primary text in black and secondary text in gray also
look fine over the lightly colored list area.
Once again, the text colors should be decided based on the color of the background. Black or gray text usually
fails to stand out against darker backgrounds, resulting in decreased visibility.

17
Recommended
Text with vivid colors, such as red, yellow, blue, and green is not recommended. Such color choice may cause
the usability of your design to suffer, because they may impose excessive stress to a user’s vision and distract
them.

18
List Principles
Tizen mobile devices use multilayered page structure, with the main theme background (gradient) in the
bottom layer position. By separating the layers based on their roles, sophisticated effects may be applied on
the pages with a minimal set of rules to follow.
The list view is one example that can help you understand how superimposed layers with gradient and text
items appear against the background. Semi-transparent stripes of gradient on top of the main background
create subtle dividers for each list item, above which list item text layer is placed.
Figure B. Multilayered screen structurecreated by layers of different opacities over the background gradient.
Different opacity levels on a list create an interesting gradient. On the item list layer, the opacity level of the
first list item is 100 percent, and it decreases by 4 percent for each item after it until the twentieth item. After
the twentieth item, the opacity level begins to increase by 4 percent until it reaches 100 percent again.

19
Figure C. Scrolling a list

20
3. Tizen Mobile UX Overview
Tizen provides a solid framework that supports stable app designs. It provides several basic screens, such as
the Home screen, Lock screen, Recent screen, and notification panel. Design your apps to share the screen
and UI properties of these basic screens to ensure a consistent user experience.
Home Structure
This section provides information about the following main elements to enhance your understanding on the
Tizen mobile platform.
 Home screen
 All apps screen
 Recent screen
 Lock screen
 Notification panel

21
3.1.1 Home Screen
The Home screen is where widgets are located. Widgets display the main information of an app or provide
users with added functionality to launch certain features in an app. Users can add new pages by adding a
widget or by tapping the Add button on the All apps screen.The Home screen supports horizontal scrolling.
On the Home screen, two fixed buttons are located at the bottom corners. The bottom-left button is the Menu
button that is used to show the Home settings, and the bottom-right button is used to direct users to the All
apps screen.
Figure: Home screen

22
3.1.2 All Apps Screen
The All apps screen shows all the apps that are installed on the device. A user-created folder will also be shown
on the All apps screen.
On the All apps screen, two fixed buttons are located in the bottom corners of the screen. The bottom-left
button is the Menu button that is used to show the All apps settings, and the bottom-right button is used to
direct users to the Home screen.
Figure: All apps screen

23
3.1.3 Recent Screen
The Recent screen is where a list of recently used apps is displayed. On the Recent screen, users can switch
between the apps that they have accessed recently. Users can also remove individual apps, or all the apps in
the list simultaneously from the Recent screen. Refer to App Handling for detailed information.
Users can open the Recent screen by pressing and holding the hardware Home key. They can then tap an app
in the list to re-open it. Tapping the Clear all button at the top of the list clears all the entries listed in the
Recent screen. Users can also remove an individual app in the list by dragging it to the left or right.
Figure: Recent screen

24
3.1.4 Lock Screen
Because the Lock screen is the first screen the users see each time they wake up the device, it has to offer an
aesthetically pleasing design. A Lock screen should have a simple and easy-to-understand design.
Other than presenting time and date information, the Lock screen also provides convenient options for
replying to received messages, emails, or missed calls.
Figure: Lock screen

25
3.1.5 Notification Panel
The notification panel allows users to view unread notifications, provides access to specific device settings
including network connection status, through the Quick settings panel. Users can access the notification panel
by dragging down the status bar at the top of the screen.
The Quick settings panel contains shortcut buttons that allow users to switch between modes and turn specific
features on or off. Refer to Notifications for detailed information.
Figure: Notification panel

26
Gestures
The Tizen platform supports a wide variety of gestures that allow users to directly access content on touch
screen devices. For example, users can tap the screen to select an element, swipe to scroll through content on
the screen, or drag and drop an element to move it.
When you design your apps, make sure you match the gestures in your app with those provided by the Tizen
platform. This ensures consistent user experience, especially when multiple apps are running at the same time.
The following lists guidelines for designing new gestures for your apps.
 DO NOT use the basic touch gestures defined in this guideline for different actions.
 DO NOT assign custom gestures for the basic actions that already have common gestures assigned to
them.
The basic touch gestures provided with the Tizen SDK will work just fine with most of the apps you design.
However, if you are designing unique apps such as games, you may want to invent more creative touch
interactions.
Also, provide appropriate feedback for all interactions to make your app responsive.
The following table lists the basicTizen gestures you can use to offer intuitive touch interactions.
Table: Basic Tizen touch gestures
Name Symbol Description
Tap Selects an item or executes functions if the
area has no other touch interaction applied.
Double tap Zooms in to the predefined view level.
Returns to default view level in zooming (if
already zoomed in).
Touch and hold Executes specific functions.
On the Home screen, enters edit mode.
In apps, selects text.
Swipe/Flick Swipe is used to scroll through a list of items
or to pan the screen.
Flick is a quick swipe. It is used to quickly
scroll through a list of items or to quickly pan
the screen.

27
Name Symbol Description
Drag and drop Touching, holding, and then dragging an
object moves it to the desired location when
the user releases his or her finger.
Zoom in Touching two fingers to the screen and
spreading them apart zooms in on the
screen.
Zoom out Touching two fingers to the screen and
pinching them together zooms out on the
screen.

28
Hardware Keys on the Device
All Tizen apps MUST support the following functions via the device’s hardware (physical) keys or dedicated
software keys.
 Home – used to navigate to the Home screen from an app. This key sends the currently running app to
the background and opens the Home screen.
 Menu – used to show screen or app menus.
 Back – used to return to previous screen in the app or to close the app.
 Volume – used to adjust volumes for calls, notifications, media, and system features.
 Power (Optional) – used to turn the device or display on or off. The power key may not be provided if
the device does not require power on/off features.
Figure: Hardware keys dedicated to system functions

29
Accessibility
Tizen provides users with a universal design, which presents the same level and quality of user experience
regardless of the accessibility level of the individuals.
Accessibility levels of individuals vary. Users may have impaired sight, hearing, or other impairments. All user
needs must be considered to create a universal design. Tizen provides a screen reader and larger font sizes to
effectively convey information to users with different needs.
Developing an accessible app may not be easy. When you design an accessible app, there are many things that
require your attention and consideration. However, your app design does not have to be limited by users with
disabilities. Highly accessible apps are easy to use for everyone, after all.
By adding accessibility features to your app, you can ensure that it conforms to accessibility related laws,
regulations, and standards. We are planning on increasing and fortifying support for accessibility features with
Tizen.This will open an opportunity to help you develop more and more competitive apps.
3.4.1 Tizen Screen Reader
The screen reader feature was developed to assist users with poor sights. By reading text information to the
users, it enables them to use apps without struggling with the small text information on the screen.

30
Using this feature, you can design an app to provide a pleasant user experience to users with poor eyesight. It
utilizes a TTS (text-to-speech) engine to transform the text and graphics on the screen into audible
information. The screen reader recognizes the selected information or user interface, and provides audible
feedback if a subsequent action is required.
Because Tizen 2.4 fully supports the screen reader feature, you do not have to add additional graphical
elements to your app to enable it.
The following are guidelines for designing apps that support the screen reader.

31
3.4.2 Guidelines for Designing Reader-Compatible Content
Provide Meaningful Labels for Graphical Elements
Tizen is capable of automatically transforming all the text information used with the UI components into
audible information. However, to design an app that is fully compatible with the TTS feature, you should label
the graphical elements in your app.
We recommend that you label the user interface components, such as graphical buttons, icons, and tabs, with
intuitive and meaningful names. If a component is used to carry out three or more tasks, list each task by the
sequence of execution.
Informative labels for graphical elements
1. Favorite on/off
2. Queue
3. Volume
4. Shuffle on/off
5. Previous track: double-tap and hold to rewind
6. Play/Pause
7. Next track: double-tap and hold to fast-forward
8. Repeat on/off/once

32
Use System Controls
Additional labeling is not required if you use the controls provided by the system in your app. Tizen provides
labels, trait information, and optional attributes attached to the default user controls. For example, a radio
button comes with a label text and a trait (selected/unselected), and a slider for screen brightness control
comes with a label, a trait (%n of %n), and an optional attribute (flick up and down to adjust the position).
If you need to design your own controls for your app, refer to the examples of the system controls and label it
with meaningful information to help users.
Provide a Predictable Flow
Design screens that allow users to easily predict the navigational flow. Provide a conventional and consistent
layout that uses left-to-right and top-to-bottom swipe actions to ensure that your app to has a predictable
navigational flow for easy focus transition.
The focus transition on the screen takes place in a linear manner. Therefore, it is always best to place the user
controls in a linear manner as well to match the flow.

33
Understanding how the Screen ReaderWorks
Read and understand the basic interactions between an action and the screen reader before labeling the UI
components for your app.
Table: Basic screen reader interactions
ACTION SYMBOL
RESULT WHEN THE SCREEN READER IS
ENABLED
Tap Selects and reads the item under your finger
Double tap
 Activates the selected item
 Activates edit mode (selects editable text)
Double tap and hold
Allows users to drag an icon or view more options
for selected items
Left swipe
Moves to previous / next items
right swipe
2-finger tap Pauses / resumes text-to-speech.
2-finger Left swipe
Changes pages / screens
2-finger Right swipe

34
3.4.3 Adjustable Font Size
Include font size options to increase accessibility. The following example shows how text elements are
affected by changes in font sizes.
Items affected by the font size setting
List
Controls

35
Description

36
4. Design Patterns
App Structure
The Tizen platform provides you with a wide range of UI components to help you design your apps. You can
select and use the UI components depending on the purpose and main features of your app.
This section aims to explain basic app structures designed with some of the most common UI components as
examples.
Note For apps that require special layouts (such as cameras, video players, and games), the following
guidelines may not be applicable.
Apps in general have a structure of more than two layers, and they can contain normal and edit modes while
being used.
Table: Levels and modes of app screens
NORMAL MODE EDIT MODE
TOP LEVEL Main view Main view edit mode
LOWER LEVEL Detail view Detail view edit mode
Design app screens as simple as possible. The simpler the structure, the easier it is for users to navigate.
Multiple views are not necessary in some cases; just one view may be enough. When you design a screen with
multiple items on it, display them as a list and show details when an item is selected.

37
4.1.1 MainView
This section provides guidelines for designing the main view of your app. Read the following guidelines before
designing your app.
Start with an Overview
The Main view is the first screen on your app. It provides key information to help users recognize your app’s
essential features and allows them to understand the app structure. If you need to divide the information into
different categories, use tabs in the header.
Figure: Main view example of a call app

38
Enable Easy Content Management
Besides consuming information from the given content, users often need to manage content items
themselves. Basic actions for content management are as follows:
 Create: Used to create or compose an item.
 Search: Used to find an item or entry.
 Share: Used to share items with others.
 Edit: Used to provide functions to make changes to the selected items or entries. A set of action
buttons, such as Delete, Copy, or Move, may be provided on the More menu screen.
You can place floating action buttons on the top level view of your app for app-specific, primary actions.
Floating action buttons stay at a fixed position on the screen when users scroll through the content, thus allow
for fast and easy user access to primary app features.
For example, you can provide a “Create” floating action button for a calendar app, or a “Compose” floating
action button for a messaging app, and then provide other less important action buttons in the More menu
screen. Refer to Floating Action Button for details.
Figure: The main action is provided as a floating action button on the main view page.

39
4.1.2 DetailView
This section provides guidelines for designing your app’s detail view. Read and understand the following
guidelines before designing your app.
Focus on Content
In the detail view, display content elements, such as images or text, so that users can recognize the
information immediately.
Figure: Displaying content in the detail view

40
Design Easy Actions
A detail view generally includes various actions that users can run on the page. You can place the action
buttons either directly on your app screen or on the More menu screen. Do not display too many action
buttons on the screen because they may distract users. Place only the main actions on the screen and add
others on the More menu screen.

41
Figure: Action buttons in the detail view

42
Provide Easy Navigation between Screens
In the detail view, Back key on the device always takes the user to the previous screen. Place a Cancel button
on the screen to allow users to quit a current task. A Cancel button may be provided with action buttons that
require confirmation, such as Save, Done, or Send.
Figure: Screen navigation

43
4.1.3 MainView Edit Mode
This section provides guidelines for designing the main view edit mode of your app. Read the following
AllowUsers to Manage Multiple Items
You can provide checkboxes in the main view edit mode to allow users to manage multiple selected items.
Also, allow users to tap the Cancel button or the Back key to cancel a task.
The screen automatically switches back from the edit mode to the normal mode when users complete or
cancel the task.
Figure: Managing multiple items with checkboxes

44
4.1.4 DetailView Edit Mode
This section provides guidelines for designing the detail view edit mode of your app. Read the following
AllowUsers to Create and Edit Content
In the edit mode, users can create, delete, or edit the content in the detail view. Provide a means for users to
input and edit text, such as an on-screen keypad, and action buttons for completing or canceling the task.
Provide Setting Options
In the edit mode, provide standard UI components, such as radio buttons, checkboxes, and sliders, to allow
users to adjust setting values. Also, provide action buttons for completing or canceling the task after users
have adjusted the settings.
Figure: Editing settings

45
App Handling
This section provides guidelines on how to design an app to launch and close. In this section, you can also find
guidelines for allowing users to switch between the currently launched apps.
4.2.1 Starting and Stopping an App
How you design your app to open and close is very important, because users begin to evaluate your app the
moment they open it for the first time, and this evaluation process ends only after they have closed the app.
The following lists basic guidelines for designing your app’s opening and closing actions:
MakeYour App to Start Immediately
Avoid providing additional steps or procedures that may annoy users. Once started, your app’s top level view
should show the essential functions and the overview of the app structure. Refer to App Structure for details.
Indicate the Progress if ItTakesTime to Launch
It is always best to design your app to launch immediately after users select it. If your app requires loading
time before starting, provide a progress or activity indicator to inform users. Refer to Progress Components for
details.
Maintain the Orientation
If you design your app to work in both landscape and portrait modes, design it to match the orientation users
are in to avoid unnecessary adjustments. If your app only utilizes one orientation, design it to launch in that
orientation. Users will figure out that they should rotate the device to view the content.
Provide a Short and ClearTutorial if Necessary
It is always the best to design your app to be simple so that users can use it without tutorials. However, if you
think users need specific information to use your app properly, provide an interactive tutorial session. When
you do this, make your tutorial as interesting as possible to draw users’ attention. Also, for those who already
know what to do, design the tutorial with an option to skip it.
Avoid Asking Users to EvaluateYour App beforeTheyUse It
Users need enough time to actually use your app before forming opinions. You may want to know as soon as
possible what users feel and think about your app, but asking them too early does more harm than good. It
may irritate users or their opinions may not be fully formed. Therefore, allow enough time for users to
experience your app before you ask them to rate it.
DesignYour App to Remember User Activities
You can provide users with increased usability by designing your app to remember previous user activities. This
way, users can always go back to the task exactly where they left it.
Provide Information aboutUnexpectedTermination
Needless to say, it is always best to ensure that your app does not terminate unexpectedly in the first place.
However, explain to users what had happened if it does, and provide them with a solution to avoid it and
continue to use your app.

46
4.2.2 Multitask Handling
Tizen supports multitask handling. Users can see the list of recently used apps in the Recent screen and switch
between the apps by simply tapping the icons. Refer to Recent Screen for details.
Figure: Recent screen
To support multitasking, your app should be capable of running in the background in a paused state when
users leave it. When users switch back to your app, the process is resumed instantly.
The following lists the guidelines for designing apps that support multitasking.
 Design your apps to be ready for unexpected switching.
 Users can switch between apps any time. Your app should be capable of saving the current state
appropriately to allow users to continue to use your app from where they left off. If it is a content-
oriented app, such as a game, or a media player, your app should pause automatically to prevent
users from missing content.
 Continue and complete user task, if appropriate.
 Apps, such as music players or call apps, should run in the background when users open another
app in the foreground.
 Design your app to run in the background and complete a user task if the user explicitly intended it,
or if it is a simple task which does not require additional user input.

47
Notifications
You can use the notification API to notify users of the new events in your app, such as new messages or
updates.
Notifications draw users’ attention and provide information about new events or relevant actions. To take
instant actions, users can directly access your app from the notification. They can also stay on the current task
flow and take actions later from the notification panel, where the logs for unchecked messages are kept.
The Tizen notification UI supports multimodal feedbacks, which are combinations of visual, auditory, and
tactile events.
The following lists guidelines for designing notifications.
 Do not overuse notifications. Choose appropriate notification types for each event and offer
notifications in a way that does not annoy users.
 Use badges to show the number of notifications. Badges can be placed on image-based UI components,
such as app icons and image tabs.
 Continue to display information about new events even if the user has dismissed the notifications in the
notification panel.
4.3.1 Accessing the Notifications
On the notification panel, users can check the current event they are notified for, or the events they have
missed, such as recent text messages, missed calls, and emails.
Users can access the notification panel from anywhere in the OS simply by dragging down the status bar,
which normally contains ongoing tasks and event notifications.

48
Figure: Opening and closing the notification panel

49
There are two different types of notifications: Event notification and progress notifications.
Event notifications show information about new events that has not been checked by users. Information
provided with event notifications may include the title of the event, sender, short content, app icon, and a
timestamp.
If an app has more than two event notifications, they will be presented on the Notification panel as a single
notification. However, you can design your app to display multiple notifications on the Notification panel if
you need to provide individual paths to each event or if your app does not allow users to view multiple content
items.
Figure: Example layouts for event notifications
Progress indicators and activity indicators show the progress of current tasks, such as file transfers or
installations, with a progress bar. They should be designed to allow users to cancel the task in progress. You
can provide a pop-up window that contains a Cancel button, or design your notification to open your app on a
screen that contains a Cancel button.

50
Figure: Progress/activity indicators
Users can dismiss event notifications by tapping the Clear all button on the Notification Panel. However, some
non-removable notifications, such as progress notifications, will not be dismissed with the Clear all button.
You can also include mini controllers to help users conveniently control apps, such as incoming calls or music
players. When you design a mini controller, provide a Close button in the upper-right corner of the screen to
allow users to easily close it.
Figure: A mini controller for music control
If the list of notifications and mini controllers is too long to be displayed on a page, users can scroll up or down
to see the rest of the list.

51
4.3.2 Instant Notifications
Instant notifications include an icon and text, and are displayed on the status bar at the top of a screen. When
the information requires more than one line, the entire message can be displayed using the autoscroll feature.
Use instant notifications for simple notifications (such as missed calls, voice mail, or progress states).
Figure: Instant notifications

52
4.3.3 Active Notifications
The active notification includes an icon, text, and action buttons, and is displayed at the top of the device
screen.Text includes a title, a subtitle, and body text, and each of them takes up one line (A double-lined body
text may be used in the absence of subtitle).You can include up to three action buttons (text or image buttons)
in an active notification.
Active notifications are displayed for a few seconds and are automatically dismissed. Users can also manually
dismiss them by dragging them up the screen.
Design the dismissed notifications to remain on the notification panel until users read them or clear them. If
the notification is for a continuing event, such as a call or an alarm, it is displayed until the event ends. You can
turn off the auto-dismiss option to maintain the notifications on continuing events. In this case, you should
manually set the expiration time for the notification.
 Use active notification only for time-sensitive events with higher priority which require instant user
actions.
 Do not use active notifications to notify events of low importance, or to provide contextual or
background information.
Figure: An active notification

53
4.3.4 FullView Notifications
Use a full view notification when the event is urgent and time-sensitive (for example, an incoming call or
alarm). Users must take actions to a full view notification before they can continue with their previous tasks.
On full view notifications, provide action buttons or gestures to dismiss events or to perform other related
tasks.
Figure: A full view notification
We recommend that you design your app to display an active notification instead of a full view notification,
when the screen is turned on and the device is unlocked. To allow the device to display a full notification
instead, you should define the active notification for the particular app as a full view notification.

54
Note Tips for choosing the notification types
Refer to the following table to choose the notification type that best suits the message you want to
deliver. A time-critical message with higher priority may require a more intrusive notification type.
Type of notification alert Category of event
Full view notification
(when the screen is locked)
/ Active notification
(when the screen is unlocked)
and Notification panel
Time-critical events with high priority
Ex) Incoming calls*, alarms*, reminders, etc.
Active notification & Notification panel
Events that require user responses
Ex) Messages, Chat events
Instant notification & Notification panel
Events that are not involved in other categories.
Ex) Missed calls, missed events, emails, sign-out
notifications, progress notifications
(Downloading, Uploading, Installing, Import),
completion notifications (Download, upload,
installation, import, screen capture), connection
error notifications (Wi-Fi,Tethering), Data limit
notifications, etc.
Notification panel (optional)
Events with lower priority
Contextual or background information
Ex) Public or undirected social updates, software
update notifications, weather information,
location information, etc.
* Although Tizen’s notification API is well suited for designing notifications for time-sensitive events,
it has only a limited set of features available. We recommend that you design your own notifications
to include unique features and visual effects for notification views.
When you design your own notification views, follow the basic design rules to avoid confusion and
maintain consistency.

55
4.3.5 Badges
Not all events require immediate notifications. You can use badges to notify users of events that do not require
immediate attention. Place a badge on the application icon so that users can check notifications when
launching an app. Badges are suitable for the least important events.
Figure: A badge
The following are guidelines for creating badge notifications:
 Display badges only for new and unread items.
 Display badges as numbers indicating how many new and unread items there are.
 If there are several new or unread items, the number displayed in the badge must decrease as users
view or read each item.The text informing users of the new item must also disappear.
 Place badges at the top-right corner of the icons or tabs (image tabs only).
 Do not use more than 4 digits in a badge.
 Badge notifications do not provide sound alarms.

56
Widgets
Widgets are essential components for Home screen customization. Working together with the host apps,
widgets notify users of important information at a glance. Using widgets, users may gain access to certain app
features without opening the app.
You may include a variety of features in your widgets to increase usability of your app. Depending on the
content and features they provide, widgets may be divided into the following categories.
4.4.1 InformationWidgets
Information widgets are designed to present informative, timely content that users may be interested in.
Figure: Calendar and Gallery widgets

57
4.4.2 Interactive Widgets
Interactive widgets allow users to access the main features of certain apps without launching them. Interactive
widgets may allow users to change an app’s settings, and then the changes will be reflected immediately to
the app and the widget itself.
Figure: Interactive widget – Contacts
4.4.3 Hybrid Widgets
While most widgets can be classified into one of the two types listed above, there are widgets that utilize a
variety of content. Such widgets are called “hybrid widgets.” For example, a music widget may be considered
a hybrid widget if it provides playlist information and playback controls at the same time.

58
Figure: Eample of a hybrid widget – Music widget

59
4.4.4 Design Guidelines for Widgets
Content
When you design widgets, what matters most is the quality of the content provided in your widgets. Concise
information, provided in a timely manner, adds value to your widgets and apps and convinces users to access
your app to obtain more information.
Gestures
Because widgets run on the Home screen, they must be designed with limited gestures to avoid conflict with
other Home screen gestures.The tap and vertical swipe gestures can be used with widgets.
 Tap: Used for controlling widget functions or selecting a specific item in the content
 Vertical swipe: Used for scrolling through the content or switching between the widget’s screens
Figure: Taps are used to control widgets

60
Figure: Vertical swipe

61
Access to Apps
In addition to displaying content, widgets provide direct paths to the host applications. You can include UI
elements in your widgets to provide shortcuts to the apps, or to certain features. Users can tap the shortcuts
on the widget to:
 open the initial app screen
 open the app with a detailed view of the selected content
 open a specific function screen, such as settings, in an app
Widget Size
Widget size is important, because it determines the amount of information that can be presented in the
widget. In general, widgets are designed in 4x2 and 4x4 grids to ensure enough space for displaying essential
information. Tizen 2.4 allows only for fixed-size widgets. Fixed-sized widgets make it easier for users to
arrange the widgets on the Home screen in a more consistent and orderly manner.
Recommanded

62
Configuration
In order to allow users to effectively use a widget, configuration options may be provided. Users may configure
the widget before or after adding the widget to the Home screen.
For example, if you are designing a weather widget, you can make it display a configuration pop-up for GPS
access before it is placed on the Home screen. Alternatively, you can design your widget to notify users on the
initial screen, that a GPS configuration is required.
You may also place an action button for configuration at the upper-right corner of the widget. Users can
change the settings at any time using this button.
Figure: Contacts widget – Initial screen

63
Screen Orientations
4.5.1 Portrait Orientation
The portrait orientation is the default screen orientation for most app designs because it’s the way people
naturally hold their devices.
Figure: Portrait screen layout
4.5.2 Landscape Orientation
If your app serves for special purposes where the landscape orientation is more appropriate, you can design
your apps to use the landscape mode as the default orientation. Games or cameras are good examples where
the landscape mode may be used as the default screen orientation.
However, it is always a good strategy to support both the portrait and landscape orientations with your app.
Note Tizen supports reverse landscape orientation as well. However, we advise you against using this
orientation unless it is necessary.
By designing a screen in landscape orientation, you can take advantage of the wide screen to present specific
content to users. However, before using the landscape mode in your app, make sure it serves users’ actual
needs. For example, just because your app uses a camera or presents pictures or videos is not a good reason to

64
design your app in landscape orientation, especially if those features are rarely used.
Consider using the landscape orientation when:
 The presentation of the primary content in the app depends on the device orientation (for example,
camera apps controlled by the built-in sensors).
 The primary content viewed in the app depends on the device or screen orientation (for example,
images and videos in the Gallery andVideo apps).
 The app is normally used in a docked state, fixed on a stand (for example, Maps, GPS apps).
 If typing is often used in your apps, the landscape orientation can provide a larger on-screen keypad,
resulting in a better usability (for example, messaging apps).
 You can design your app to provide advanced features in the landscape orientation. By including only
the features people frequently use, keep the portrait orientation simple and easy to use, while
providing more specific and complex features in the landscape orientation (for example, the scientific
mode in a Calculator app).
Figure: Landscape screen layout

65
4.5.3 Transition between Different Screen Orientations
Natural transition between portrait and landscape orientations is a standard practice in today's mobile devices.
Relative screen layout allows for identical UI component placement in different view modes. However,
controls on the screen may have to be adjusted to suit the space allowed in the given orientations. When you
design an app that supports both the orientations, ensure that all the features offered in one orientation are
also available in the other.
Figure: Portrait and landscape orientations

66
The following figure explains why landscape orientation is ideal for video playback. While the same video can
be displayed in both the portrait and landscape orientations, landscape orientation is capable of making the
best use of the screen size and displaying larger content.
Figure: Portrait and landscape orientations in a video app

67
The Calculator app in the following example switches between the two views depending on the physical
orientation of the device. Note that it displays more advanced features only in landscape orientation.
Figure: Portrait and landscape orientations in a calculator app

68
Screen Layout
Each view in a Tizen app contains one or more primary goals. Select screen layouts that can be easily
implemented to achieve the desired goals. To provide as much flexibility as possible in the design, each view
used forTizen apps comes with only three fixed layout elements–a header, content area, and footer.
You can also design your own layout if you design an app to serve specific needs. The following are examples
of custom layouts for specific needs.
Figure: A full view layout dedicated for a camera app

69
4.6.1 Header
The header is the top portion of a view.The following lists the role of a header on a view:
 The header carries the title and indicates the current location in an app (refer to Title Bar for details).
 The header in a Create/Edit view can include Cancel and Confirm buttons (refer to Cancel and Done for
details).
 The header can include an on-screen Back button (refer to On-screen Back Button for details).
Figure: Header

70
4.6.2 Content Area
The content area is where the information and interactive interfaces for your app are located. You can design
the main content and place UI elements on it.
The following lists the guidelines for designing the content in a view:
 Display important information at the top so that users can see it without scrolling.
 Keep the design it as simple as possible to avoid distraction.
 Use a consistent layout throughout the app.
 Use clear visual effects to provide feedback for user inputs.
 Use the UI elements (Tizen UI components) consistently throughout the app.
 In case you design your own UI elements (controls), ensure that they are large enough for user
interaction (40 px x 40 px minimum in WVGA screen resolution).

71
Figure: Content area

72
4.6.3 Footer
The footer contains user interfaces for extended user actions. On this part of the screen, you can place app-
specific user interfaces in the form of footer buttons or floating action buttons. Use the footer interfaces to
present only the essential user actions in your apps.
In the following example, the Scan button is placed in the footer to provide Wi-Fi connection functionality.
Figure: Footer

73
Navigation Design
When you design a Tizen app, ensure that the changes in the depth in an app are reflected on the screen. The
navigation design should consistently provide information about the depth of the view users are currently
accessing.
Navigation design is one biggest factor that decides an app’s usability level. Therefore, plan the navigation
structure and consider all related issues as early as possible in your development process.
4.7.1 Back and Cancel
Users navigate from one screen to another by tapping interactive UI elements (for example, lists and pop-ups)
that lead to the information they are looking for. After completing certain tasks, users can return to the
previous screen by tapping the hardware Back key on the device or the on-screen Back/Cancel button.
Back Key
For a device to be compliant with Tizen’s Compliance Specification, it MUST provide a Back key (or a Back
button) through dedicated physical (hardware) or software implementation. In general, the Back key is
provided at the bottom of the device and is used to return to the previous screen or to cancel a task that is in
progress.
Figure: Navigation using the Back key
The Back key can also be used to dismiss the virtual keypad, pop-ups, or notifications.

74
On-Screen Back Button
In Tizen 2.4, a layout design with a title bar requires the on-screen Back button. An on-screen Back button
should be located on the left side of the title bar. The on-screen Back button performs tasks that are nearly
identical to the physical Back key.
You cannot provide the on-screen Back button:
 On the top view.
 If Save, Edit, or Create action buttons are used on the same screen. A Cancel button should be
provided instead of the Back button.
Cancel Button
A Cancel button is used to close a screen for the current task and return to the previous screen. A Cancel
button may be used with other action buttons, such as Send, Done, and Delete.
4.7.2 Home Key
A press on the Home key sends the currently running app to the background and displays the Home screen.
Also, users can touch and hold the Home key to access the Recent screen and tap an app icon to launch it
again. Refer to Recent Screen for details.
Figure: Navigation to the Home screen

75
4.7.3 Navigation within an App
Users navigate in an app by selecting information or performing actions. Users can open a new screen to
obtain the information they need or carry out a task by tapping an interactive UI component.
Note Tabs do not actually change screens, but they change views in the same screen. If users press the
Back key after tapping a tab, it will not bring them to the previous tab, but it will close the current
screen and bring them to the previous step’s screen. Not every change in views is kept in the
historical stack. It does not remember the view changes, but it only remembers the actual change
of the screen.
The following lists cases where the views change within a screen:
 Switching views between tabs
 Sorting or filtering a list
 Zooming in or out a screen
The following figure explains the difference between the changes in screens and views.
Figure: Navigation when view changes

76
4.7.4 Navigation between Apps
Sometimes, an app launches another app while performing a user task. When this happens, the newly
launched app runs in the foreground and the other app runs in the background.
When the task is completed, the newly launched app is automatically closed and the previous app runs in the
foreground again. During the task, users can always return to the previous app by canceling the current task
via the Back key or the Cancel button.
For example, users may launch a gallery app to attach an image while writing an e-mail or a message. The
gallery app is automatically closed after attaching the image. Users can also cancel attaching the image and
close the email or messaging app using the Back key.
Figure: Navigation between apps

77
4.7.5 User Actions Inside an App
You can use the basic elements provided with the Tizen 2.4 SDK to design various features for your app. This
section provides information about designing patterns for data creation and modification.
Creating Entries
Create is the most commonly used action button to help users manage data. Almost every app requires this
action. It is best to adhere to the basic Tizen platform principles by giving users the basic functions they expect,
in the places where they expect to find them.
In many cases, creating an item means users are required to input information in multiple fields. However,
users want to create items quickly and easily. Users may get annoyed if they are required to fill in too many
fields.
To allow the users to create new items quickly and easily, refer to the following guidelines:
 Provide a Create action button in the More menu screen. If the Create action button is an important
feature in your app, you may provide it as a floating action button (refer to Floating Action Button for
details).
 Include only mandatory and common fields at first, rather than presenting all the detailed fields.
 Add related fields when users tap the Add button. These fields can be removed by tapping the Remove
button.
 Provide up to four buttons on the first page. The last button should be the More menu button if you
need to provide more than four action buttons.
 Suggest predefined value to make it easier for users to understand.
 Show the fields users previously used by default. If a field has been just added (without any value input)
or removed, set the value as pre-defined value (if one exists) and do not provide this field as a default
next time.

78
Figure: Create mode
Selecting Multiple Items
Users often need to manage multiple items simultaneously, such as when they want to delete several items at
once.You can support actions like this by offering the multiselect feature in your app.
The multiselect feature works when the user taps Delete, Move, or Copy action buttons on the More menu
screen. It provides a checkbox for each item listed for multiple selections.
You can also offer information about the selected items (for example, the number of items selected) in the
header area. Both the list and grid views support the multiselect feature. See the table below:
Table: State of the selection
Initial state After selection
Single select mode Select _item_ (Move to the next step)
Multiselect mode 0 selected 1 selected
Multiselect mode (limited) 0/%d selected 1/%d selected
※ %d indicates a limited number
In the grid view, the multiselect feature works the same way it works in a list view. A Select All action button
may be provided as an option above the grid.

79
Figure: Multiselect mode in a list view

80
Figure: Multi-selection in a grid view
The Select All action button scrolls with the list. Tapping the Select All button selects all the items in the list,
and tapping it again deselects all the selected items.
Figure: Select All feature

81
Deleting Items
You can provide a Delete action button on the list view or grid view screen layout. For a detail view, you can
provide a Delete action button in the More menu screen.
Deleting Items in the ListView
In the list view, users can select and delete multiple items using the multiselect mode.
Once the user has deleted the data, provide a visual cue to let users know that the action was successfully
completed. You can also display the current status via text, such as “No images,” if necessary. Do not provide a
confirmation pop-up to ask for the final confirmation, since users’ intentions have already been fully reflected
during the item selection. If it takes a long time to complete the delete action, provide an activity indicator to
show the progress (refer to Progress Components for details).
Figure: Deleting items in a list view
Deleting Items in the Detail View
Provide a confirmation pop-up message to prevent unintended deletions. Do not use a pop-up message if the
delete (or remove) action is not actually destructive. This is usually the case when users delete shortcuts to
actual objects rather than the objects themselves. You can provide simple feedback, such as visual effects or
toast pop-up, to explicitly show the deletion progress.

82
figure: Deleting an item in a detail view

83
Confirming aTask
Your app can provide many actions and some of them may be irreversible. If actions are irreversible, you
should ask users to verify if they truly want to proceed with the action.
Cancel and Done
In Create or Edit mode, the title bar (refer to Title Bar for details) provides Cancel and Done buttons
(depending on the situation, a Send or Delete button can be provided instead of a Done button). Users can
tap the Done button to finish their task. If users tap the Cancel button, provide a pop-up confirmation window
to verify that they want to discard their work. If there is no change in the content, you don’t need to confirm
anything.
Animation: Explicit save

84
In the simple edit mode, like when changing a value in the Settings menu, you don’t have to provide a pop-up
message asking users about discarding their work. In these cases, it is recommended that your app save the
most recent state when users return to the previous screen. For that reason, there is no Cancel or Done button.
Animation: Implicit save

85
Pop-up Confirmation
If the action is destructive, you can use a pop-up confirmation. Use simple and clear text to inform users of the
situation.
Animation: Do and Don’t – feedback

86
Settings
In Settings, users can view and customize various functions. By offering the right settings at the right time, you
can enrich your app’s user experience.
4.8.1 Designing Settings
The Settings menu is provided in the More menu. Since users don’t change their settings that often,
emphasizing this menu is not necessary. Put Settings below all other items, except About or Help. If your app
provides Settings, About, and Help menus, the order should be Settings>About>Help.
Figure: Settings in More menu
Settings can be easily complicated if you do not organize the preferences by purpose. Complicated settings
cause users difficulty in finding the Settings menu.
To keep things simple, keep the following guidelines in mind when designing settings:
 Include a Settings menu only when it’s a user preference.
 Include a Settings menu when the user may not want to change the function frequently.
 If you expect most users to set the same value and to not change the setting again, you can use fixed
behavior without providing a Settings menu.

87
Try to reduce the number of Settings options on the first level of your app. It allows users to view the Settings
menus easily.You can reduce Settings menu options by combining similar options into one menu. (Ex. Lock
screen and Security, Privacy and Safety)
Design the preferences as shown in the following figure. Classify your app settings by function and group them
with different names.
Figure: General settings

88
4.8.2 Preference UI Controls
The UI control types for settings are as follows:
SecondaryText
Secondary text is used to show statuses or help text.
Status text: Informs users of the present state of an item in the list.
Help text: Provides useful information about the item in the list.
Figure: Secondary texts

89
Toggles
These controls help the user enable or disable specific functions.
Refer to Toggle for more information.
Figure: Toggles

90
Sliders
These controls are useful when adjusting Settings values in multiple or consecutive steps. An optional image
that explains the function of the bar can also be included.
Refer to Slider for more information.
Figure: Slider

91
Checkboxes
This control is useful when showing items selected for a specific function.
Refer to Checkbox for more information.
Figure: Checkbox
Note A toggle is used to enable or disable a specific function. However, a checkbox is used to show what
items belong to a specific function. A checkbox is only used for a few functions, such as
remembering a password.

92
Radio Buttons
This control is used when setting an option when only one choice can be made.
Refer to Radio Button for more information.
Figure: Radio button

93
4.8.3 Tips for Designing Settings
Here are some tips for designing settings.
Dependency
If a setting option is dependent on another setting, dim the option when the primary or related setting is off.
When dimmed, the setting’s status can be maintained or not, depending on the situation. For example, to use
the GPS and Wireless networks options in the Location service setting, users must agree with a legal
information pop-up confirmation. So when Location service is turned off, the GPS and Wireless networks
options are dimmed and the values are turned off. However, if Mobile data is turned off in the Mobile network
setting, Data roaming is dimmed and its value is maintained. So when roaming, users can just turn on/off
Mobile data to use mobile networks after enabling Data roaming value just one time.
Figure: Dependency

94
There are many examples of dependent settings in the UI. In the General settings, when Flight mode is
enabled, Wi-Fi is disabled. When the incoming call sound value is reduced to “0,” the device switches to vibrate
mode.You need to consider all dependent functions when designing settings.

95
Multiple Choice
When changing settings where only one option can be selected, you can use a pop-up window with radio
buttons. If there are too many options for a pop-up window, you can use full view scrolling window to display
all the items in the list.
Figure: Multiple choice

96
Group Indexing
Use the group index view to easily classify and associate features. It makes settings look neat and well
organized.
Figure: Group index view

97
DefaultValues
When choosing the default values of your settings, you should consider carefully. Most users don’t change
settings values too often. Some users may not even know that there is a settings option they can use. If users
feel that the default operation of your app is complicated, they will think your app is just difficult.
Keep the following guidelines in mind when choosing default values:
 Choose a value that will be suitable for the majority of users.
 Choose a value that is known to be safe and generally adequate.
 Choose a value that provides better security.
 Choose a neutral value.
 Choose a value that uses fewer data and battery resources.

98
5. UI components forTizen App design
This chapter provides information about the basic UI components in the Tizen SDK. You can include these
components in your app designs to implement specific features.
Tizen UI components may be divided into four categories:.
 Navigation elements are used to browse content and switch between screens.
 Presentation views are used to display the main content of an app in different forms.
 User input elements are used to collect user input for specific tasks.
 Assist views are used to provide additional information.
Navigation Elements
Navigation elements are used to browse content and switch between screens. The following elements in the
list belong to the navigation elements.
 Title bar
 Tabs
 Navigation bar
 Scroll components
 Scroll bar
 Index scroll
 Page indicator
5.1.1 Title Bar
The title bar appears at the top of a screen to inform users of the current location in an app. It consists of the
title text and action buttons. The title text on the title bar should be center-aligned. A maximum of two lines
are allowed for the title. On the title bar, you can provide action buttons, such as a Back button (an arrow), and
Cancel, Done, Send, and Delete text buttons for the edit mode, depending on the level of information and
features provided in the app.
There are certain conditions and restrictions for action buttons in the title bar. The following lists guidelines for
including action buttons in the title bar.
 If the app has multiple levels of information, a Back button may be placed on the ttitle bar to allow
users to return to the previous level.
 We recommend that you place only a Back button (an arrow) and the edit mode text buttons (Cancel,
Done, Send, and Delete) in the title bar.

99
Figure: Title bar
Figure: Title bar with a Back button / Figure: Title bar with other action buttons

100
5.1.2 Tabs
Tabs are used to categorize different types of contents. Users can switch between different views by tapping
the tabs. Tabs may be located at the top of the screen, or below the title bar. Each tab consists of a tab bar and
a content view.
The following guidelines are for including tabs in the header:
 Include tabs on the first page to show the different categories.
 Use icons with text labels for the tabs. Text descriptions may be used if the screen layout does not allow
the use of icons or if an appropriate icon is hard to find.
 Include up to 4 tabs that equal the width of the screen.
 Each tab should have its own page view.
 Balance the content to allow each tab to contain an equally important amount of information.
 Do not include action buttons in the header if tabs are placed at the top of the screen.
Figure: Tabs

101
Figure: Tabs with Title
5.1.3 Navigation Bar
A navigation bar may be placed under the title bar to display paths in an app. It helps users navigate the
structure and find the information they want by providing them with an app’s structural information.
Figure: Navigation bar

102
5.1.4 Scroll Components
Scroll components are used to indicate the user’s current position. Scroll components allow users to jump
directly to the information they are looking for.
The following lists the scroll components.
 Scroll bar
 Index scroll
 Page indicator
Scroll Bar
The scroll bar appears when users scroll on a view that is too long to be displayed on one screen. There are two
types of scroll bars available for use in your apps: ones with handles and others without. Using a scroll bar with
a handle, users can move directly to the part they want by vertically dragging the handle.
Figure: Scroll bar

103
Index Scroll
The index scroll allows users to rapidly scroll up and down on a list that includes an index. The index is
generally displayed in alphabetical order, but different types of indexing are available as well, for example, by
language, numbers, and symbols.
Figure: Index scroll

104
Page Indicator
The page indicator is used to show how many pages are available in an app and which page is currently
displayed.
Figure: Page indicator

105
PresentationViews
Presentation views are used to display the main content of an app in different forms.
The following lists different types of Presentation views:.
 List view
 Grid view
 Group index
 Progress components
a) Progress indicator
b) Activity indicator
5.2.1 ListView
The list view is used to display multiple items on one screen. It is the most basic view. You can include various
UI elements, such as text, icons, images, or buttons as the list items.
Figure: List view

106
5.2.2 GridView
The grid view is used to display multiple images.
Figure: Grid view

107
5.2.3 Group Index
The group index is used to present sorted and grouped items.
The following lists examples of the criteria that can you can use to create a group index.
 Alphabetical order
 Category
 Time or date
Figure: Group index

108
5.2.4 Progress Components
Progress components provide users with information about ongoing tasks. They are indicators displayed as
bars or circles.
There are two different types of progress components available:.
 Progress indicator
 Activity indicator
Progress Indicator
The progress indicator provides the current status of an ongoing task with a scale. You can use a progress
indicator to inform users of the current status of tasks and include information, such as the estimated time of
completion.
Figure: Progress indicator

109
Activity Indicator
The activity indicator is used to inform users that a certain task is in progress. Use an activity indicator when
the time until completion is unknown.
Figure: Activity indicator

110
User Input Components
User input components are used to collect user input for specific tasks.
 Button
 Circle button
 Box button
 Bottom button
 Checkbox components
 Toggle
 Checkbox
 Favorite
 Radio button
 Text input
 Dropdown menu
 Slider
 Picker
(A) Number picker
(B) Date and time picker
-Time picker
-Date picker
(C) Color Picker
5.3.1 Button
A button is used to allow user interactions to trigger events. On a button, you can include text, an image, or
both.
The following lists different types of buttons available:
 Circle button
 Box button
 Bottom button
Circle Button
A circle button is a simple icon that users can easily understand. You can provide text labels under the icons to
further enhance users’ understanding.

111
Figure: Circle buttons
Box Button
A box button is displayed as a rounded box shape.You can include text, icons, or both in box buttons.
Figure: Box button
Bottom Button
A bottom button is used for main actions. It is fixed at the bottom section of a screen and does not scroll with
the content on the screen.

112
Figure: Bottom button
5.3.2 Checkbox Components
Checkbox components are action icons that allow users to turn certain features on or off, or to choose various
options.These icons are frequently used in the screen designs of galleries, lists, timers, and calendars.
 Toggle
 Checkbox
 Favorite
Use simple and flat pictographic icons when you design checkbox components. Tizen assigns system colors for
checkbox and radio buttons. For other icons, colors may be selected according to the significance of the icons.
Toggle
A toggle is used to allow users to turn a feature on or off.
Figure: Toggle

113
Checkbox
A checkbox is used to allow users to select or unselect items, or to confirm tasks.
Figure: Checkbox
Favorite
Favorites are used to allow users to tag items for future reference.
Figure: Favorite
In the Toggle and Checkbox Icon Pack, you can find the action icon examples created for various screen sizes.
This package includes icons designed in Adobe® Photoshop® format, so that you can customize and use them
for your own designs.

114
5.3.3 Radio Button
A radio button is used to allow users to select an item from a list of multiple choices.
Figure: Radio
5.3.4 Text Input
The text input component provides an input field for users to enter text information.
Figure: Typical text input component in an app
The following lists the types of text input components available.

115
 Single-line text input
 Multiple-line text input
 Text enveloper
The text enveloper provides an extended functionality to text input. It recognizes the delimiters between text
input and binds the entries, such as email addresses or keywords, in meaningful or functional chunks, so that
users can individually control or modify them. Enter key input (↵), comma (,), and semi colon(;) are generally
used for text delimiters, but you can define your own delimiters to suit the type and purpose of your app.
Figure: Text input and text enveloper

116
5.3.5 Dropdown Menu
A dropdown menu allows users to select an item from a list of multiple choices. A list of items is displayed
when users tap the dropdown menu.
Figure: Dropdown menu

117
5.3.6 Slider
A slider is used to adjust a value within a certain range. You can include in a description or an icon that explains
the slider’s value range. Users can tap or drag the slider bar to increase or decrease the value. You can also
provide numbers on the slider to indicate the value.
Figure: Slider

118
5.3.7 Picker
A pickers allows users to select a specific value or multiple interconnected values from multiple options.
 Number picker
 Date and time picker
(A) Time picker
(B) Date picker
 Color picker
Number Picker
A number picker allows users to select numbers.
Figure: Number picker

119
Date andTime Picker
Date and time picker allows users to set the date and time for different user apps.
 Time picker
 Date Picker
Figure: Time picker
Figure: Date picker

120
Color Picker
A color picker allows users to select a color from a set of colors.
Figure: Color picker

121
AssistView
Assist views are used to provide users with additional information to complement the main content.
The following lists different types of assist views available:
 Pop-up
 Toast pop-up
 Context pop-up
 More menu
 LightView
 Floating action
Pop-up
Pop-ups are temporarily displayed on the screen to provide information or to ask for user confirmation. Pop-
ups allow users to take instant action for events.
Figure: Pop-up

122
Toast Pop-up
Toast pop-ups are used to deliver simple notifications.
Figure: Toast
Context Pop-up
Context pop-ups are used to provide options for the currently selected objects.
Figure: Context Pop-up

123
More Menu
The More menu is used to provide users with access to actions not available on the main screen.
Figure: More menu

124
LightView
The light view provides a partial window on the screen to perform subordinate tasks directly related to the
content on the main screen.
Figure: Light view

125
Floating Action Button
The floating action button allows users to take action at any point on a screen. They do not scroll with the
content because they are vertically fixed on the screen. However, users can horizontally drag or flick the
floating action buttons to adjust their horizontal positions.
Figure: Floating action buttons

Tizen mobile design_guidelines

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Similar to Tizen mobile design_guidelines

Similar to Tizen mobile design_guidelines (20)

More from Saima Ashiq

More from Saima Ashiq (6)

Recently uploaded

Recently uploaded (20)

Tizen mobile design_guidelines