Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX...
Transcript of Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX...
![Page 1: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/1.jpg)
Tizen Mobile UX
Introduction
UX R&D Team, Samsung Electronics
Wonkyu Park
![Page 2: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/2.jpg)
Demo Video
2
![Page 3: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/3.jpg)
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
![Page 4: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/4.jpg)
UI Overview
![Page 5: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/5.jpg)
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
![Page 6: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/6.jpg)
Lock screen
• Simple and sophisticated look
Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
6
![Page 7: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/7.jpg)
Home screen
• Structured and understandable
Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
7
![Page 8: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/8.jpg)
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
![Page 9: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/9.jpg)
Notification Panel
• Showing overview and quick setting
Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
9
![Page 10: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/10.jpg)
Application
• New but familiar design based on principles
Home Screen
Applica/on Recent Panel
Lock Screen
No/fica/on Panel
10
![Page 11: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/11.jpg)
Our Principles
![Page 12: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/12.jpg)
Design principles
12
• Focus on the primary user goals
• Ensure understanding at a glance
• Support curiosity & individual needs
![Page 13: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/13.jpg)
Focus on the primary user goals
• Put focus on the primary goal
13
![Page 14: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/14.jpg)
Focus on the primary user goals
• The first screen should satisfy 80% of user needs
14
![Page 15: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/15.jpg)
Focus on the primary user goals
• Provide the most important as defaults
15
![Page 16: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/16.jpg)
Ensure understanding at a glance
• Create clear distinctions
16
![Page 17: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/17.jpg)
Ensure understanding at a glance
• Display essential information first
17
![Page 18: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/18.jpg)
Ensure understanding at a glance
• Show what is possible with consistent visual language
18
![Page 19: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/19.jpg)
Support curiosity & individual needs
• Let users express their own style
19
![Page 20: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/20.jpg)
Support curiosity & individual needs
• Put the emphasis on fun
20
![Page 21: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/21.jpg)
Support curiosity & individual needs
• Learn the users preferences and adapt
21
![Page 22: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/22.jpg)
Design Pattern
![Page 23: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/23.jpg)
App structure
• Item navigation
23
![Page 24: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/24.jpg)
App structure
• Tabs
24
![Page 25: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/25.jpg)
App structure
• Drawer
25
![Page 26: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/26.jpg)
App structure
• Single view
26
![Page 27: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/27.jpg)
Actions
• Menu button
27
![Page 28: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/28.jpg)
Actions
• In-line actions
28
![Page 29: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/29.jpg)
STYLE
![Page 30: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/30.jpg)
Icon
• Round shape
30
![Page 31: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/31.jpg)
Colors
• The point color is blue
31
![Page 32: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/32.jpg)
Typography
32
![Page 33: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/33.jpg)
Summary
![Page 34: Tizen Mobile UX Introductiondownload.tizen.org/misc/media/tds2014/slides/Tizen Mobile...Mobile UX Introduction UX R&D Team, Samsung Electronics Wonkyu Park Demo Video 2 Table of Content](https://reader033.fdocuments.net/reader033/viewer/2022050310/5f7251703298e661b300ef83/html5/thumbnails/34.jpg)
"• '
, • •
• (, . . ...
. 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 • •
' . •
• • ' •"