Tizen Mobile UX

Introduction

UX R&D Team, Samsung Electronics

Wonkyu Park

Demo Video

2

Table of Content

02 Our Principles Primary user goals / At a glance / Individual needs

01 UI Overview Lock / Home / Recent / Application / Notification

04 Style Icons / Colors / Typography

03 Design Pattern App structure / Actions

3

UI Overview

Core UI Components

•  Lock Screen

•  Home Screen

•  Application

•  Recent panel

•  Notification panel Home  Screen  

Applica/on   Recent  Panel  

Lock  Screen  

No/fica/on  Panel  

5

Lock screen

•  Simple and sophisticated look

Home  Screen  

Applica/on   Recent  Panel  

Lock  Screen  

No/fica/on  Panel  

6

Home screen

•  Structured and understandable

Home  Screen  

Applica/on   Recent  Panel  

Lock  Screen  

No/fica/on  Panel  

7

Recent Applications

•  Easy to jump between running apps or close the app

Home  Screen  

Applica/on   Recent  Panel  

Lock  Screen  

No/fica/on  Panel  

8

Notification Panel

•  Showing overview and quick setting

Home  Screen  

Applica/on   Recent  Panel  

Lock  Screen  

No/fica/on  Panel  

9

Application

•  New but familiar design based on principles

Home  Screen  

Applica/on   Recent  Panel  

Lock  Screen  

No/fica/on  Panel  

10

Our Principles

Design principles

12

•  Focus on the primary user goals

•  Ensure understanding at a glance

•  Support curiosity & individual needs

Focus on the primary user goals

•  Put focus on the primary goal

13

Focus on the primary user goals

•  The first screen should satisfy 80% of user needs

14

Focus on the primary user goals

•  Provide the most important as defaults

15

Ensure understanding at a glance

•  Create clear distinctions

16

Ensure understanding at a glance

•  Display essential information first

17

Ensure understanding at a glance

•  Show what is possible with consistent visual language

18

Support curiosity & individual needs

•  Let users express their own style

19

Support curiosity & individual needs

•  Put the emphasis on fun

20

Support curiosity & individual needs

•  Learn the users preferences and adapt

21

Design Pattern

App structure

•  Item navigation

23

App structure

•  Tabs

24

App structure

•  Drawer

25

App structure

•  Single view

26

Actions

•  Menu button

27

Actions

•  In-line actions

28

STYLE

Icon

•  Round shape

30

Colors

•  The point color is blue

31

Typography

32

Summary

"• '

, • •

• (, . . ...

. I • I • I ' . - . . ., ... ,.

• • ' "• '

• ' . •

T IZ E DEVELOPER SUMMIT

2 0 14

TM

- . .-

,I ' - . \ . . . .. , . ..... . • I e ' •

.'

. .... ,

. SH A N G HA I fil!:mlmiil.9fil!:mlmiil.9fil!:ml TIZENTF:At l l $ (..t fi)

• ' "

• • •

• I •

• , \

4 • •

' . •

• • ' •"