Trai nghiem nguoi dung ux

LOGO
“ Add your company slogan ”
TRẢI NGHIỆM NGƯỜI
DÙNG
NGƯỜI THỰC HIỆN: ĐẶNG THỊ GIANG

KHÁI NI M UI VÀ UXỆ
 UI - Giao di n ng i dùngệ ườ ( User Interface)
 UX - Tr i nghi m ng i dùngả ệ ườ (User Experience)
• UI chính là nh ng gì b n th y.ữ ạ ấ
• UX là cách mà ng i dùng S d ng và c m nh nườ ử ụ ả ậ v s nề ả
ph nẩ đ n gi n là nh ng v n đ nh tính d s d ng , sơ ả ữ ấ ề ư ễ ử ụ ự
ti n ích , s hi u qu khi h th ng ho t đ ngệ ự ệ ả ệ ố ạ ộ .
 UX chính là đích đ n cho k t qu mà nhà cung c p hế ế ả ấ ệ
th ng mong đ i .ố ợ

TR I NGHI M HÀNG NGÀYẢ Ệ
 Khi chúng ta lái xe.
 D ng đèn đ .ừ ỏ
 X p hàng tính ti n siêu th .ế ề ở ị
 N u ăn b ng lò vi sóng..v vấ ằ
Đ i v i nhi u ng i, tr i nghi m ng i dùng th ng g n li n v i cácố ớ ề ườ ả ệ ườ ườ ắ ề ớ
thi t b "k thu t" nh đi n tho i thông minh, máy tính, ph n m m, vàế ị ỹ ậ ư ệ ạ ầ ề
các trang web.
Nh ng tr iữ ả nghi m ng i dùngệ ườ hàng ngày:

NHỮNG YẾU TỐ VÀ THỐNG KÊ
68% 85% 44% 62%
Ng i dùngườ
r i website,ờ
ph n m m vìầ ề
có tr iả
nghi m t i.ệ ồ
V n đ vấ ề ề
UX có thể
tìm th y quaấ
vi c ki m traệ ể
5 ng iườ
dùng.
Khách hàng
online s nóiẽ
v i b n vớ ạ ề
m t tr iộ ả
nghi mệ
online t i.ồ
Khách hàng
s mua hàngẽ
d a trên sự ự
tr i nghi mả ệ
cũ.

TRẢI NGHIỆM NGƯỜI DÙNG TỐT XẤU VÀ TỒI TỆ
Text
PHÂN LOẠI
Text
UX TỐT
Đáp ng đ c nhứ ượ ư
c uầ
Đ n gi nơ ả
Thân thi nệ
Đ p gây c m h ngẹ ả ứ
Không gây nhi uề
b t ti n hay b cấ ệ ự
t c choứ user khi sử
d ng.ụ
UX TỒI
Làm cho user th tấ
v ng.ọ
Thi u kiên nh n.ế ẫ
T c gi n.ứ ậ
Nh v tr iớ ề ả
nghi m tiêu c cệ ự
đó trong 1 th iờ
gian dài.
Text
Text
VD:b n ph i ch đ i quá lâu t i m t nhà hàng vì h đã làm nh m món mà b nạ ả ờ ợ ạ ộ ọ ầ ạ
g i.ọ

TR I NGHI M NG I DÙNG T T X U VÀ T I TẢ Ệ ƯỜ Ố Ấ Ồ Ệ

B N CH T C A UXẢ Ấ Ủ
4
B NẢ
CH T UXẤ
M quan thi t k .ỹ ế ếKi n trúc thông tin.ế
Ti n íchệ
Giao di n t ng tác.ệ ươ
Tìm ki m s n ph m.ế ả ẩ
3
2
1
5

B N CH T C A UXẢ Ấ Ủ
M quan thi t kỹ ế ế
Dùng các y u t m quan đ truy n đ t thông đi p và thông tin .ế ố ỹ ể ề ạ ệ
M quan thi t kỹ ế ế
Dùng các y u t m quan đ truy n đ t thông đi p và thông tin .ế ố ỹ ể ề ạ ệ
Ki n trúc thông tinế
T o các nhóm thông tin, phân b theo n i dung liên quan.T i u kh năng tìmạ ố ộ ố ư ả
ki m thông tin qua thanh đi u h ng thích h p và qua các chi ti t mô t .ế ề ướ ợ ế ả
Tìm ki m s n ph mế ả ẩ
Tìm ra nh ng gì user thích và không thích, th c hi n đi u tra đ n gi n v v n đữ ự ệ ề ơ ả ề ấ ề
làm th nào đ ph n m m c a b n có th đáp ng đ c các nhu c u c a user.ế ể ầ ề ủ ạ ể ứ ượ ầ ủ
Giao di n t ng tácệ ươ
Đ o b o ch c ch n ,tính th ng nh t gi a các trang và n i dung.ả ả ắ ắ ố ấ ữ ộ
Giao di n t ng tácệ ươ
Đ o b o ch c ch n ,tính th ng nh t gi a các trang và n i dung.ả ả ắ ắ ố ấ ữ ộ
Ti n l iệ ợ
Đ m b o tính tính ti n l i cao nh t cho user . T i u kh năng truy c p thông tinả ả ệ ợ ấ ố ư ả ậ
cho user.
Ti n l iệ ợ
Đ m b o tính tính ti n l i cao nh t cho user . T i u kh năng truy c p thông tinả ả ệ ợ ấ ố ư ả ậ
cho user.

T I U HÓA TR I NGHI M NG I DÙNGỐ Ư Ả Ệ ƯỜ
Giúp tránh xa nh ng thông tin khôngữ
h u ích.ữ
Giúp tránh xa nh ng l i trên ph n m m.ữ ỗ ầ ề
50% Th i gian c a developer đ cờ ủ ượ
dùng đ s a l i n y sinh.ể ử ỗ ả
T i u hóa tr iố ư ả
nghi m ng iệ ườ
dùng

Nh ng con s th ng kê trong doanh nghi pữ ố ố ệ
Gia tăng bán hàng Tăng kh năng s nả ả
xu t.ấ
Tăng s hài lòng tự ừ
khách hàng và
s tín nhi m.ự ệ
Gi m chi phíả
tranning và hỗ
tr .ợ
Gi m th i gian s nả ờ ả
xu t và chi phíấ .
Gi m chi phí duy trì.ả
NH NG CON S TH NG KÊỮ Ố Ố
 Cân nh c vi c tăng/gi m chi phí cho UXắ ệ ả

Nhà thi t k UX h là ai? (UX Design)ế ế ọ
THI T K UXẾ Ế
 UX là cách mà ng i dùng c m nh n v 1 s n ph mườ ả ậ ề ả ẩ
c th , ng i làm v UX goi là UX Designer .ụ ể ườ ề
 H là nh ng ng i nghiên c u và đánh giá v thóiọ ữ ườ ứ ề
quen và cách mà 1 ng i khách hàng s d ng vàườ ử ụ
c m nh n v 1 h th ng (S d ng h th ng thôngả ậ ề ệ ố ử ụ ệ ố
qua UI) .
 Hi u xem ng i dùng chính là ai, h mu n gì, ph iể ườ ọ ố ả
hi u v hành vi, v thói quen c a hể ề ề ủ ọ.(ph ng v n,ỏ ấ
làm kh o sát, quan sát (tr c ti p), theo dõi hành viả ự ế
và phân tích (gián ti p).ế

QUY TRÌNH THI T K UXẾ Ế
Nghiên c u ng i dùng.ứ ườ1
T ng h p t k t qu nghiên c u và quan sátổ ợ ừ ế ả ứ2
Lên ý t ng và thi t k .ưở ế ế3
4
11
22
33
44 Hoàn thi n tr i nghi m và giao di n s n ph mệ ả ệ ệ ả ẩ
Quy trình thi t k UX g m 4 b c c b n:ế ế ồ ướ ơ ả

Company Logo
11
Ti p nh n d án, tìm hi u v d án đóế ậ ự ể ề ự .
22
Tìm hi u v đ i t ng ng i dùng chính c aể ề ố ượ ườ ủ
d ánự .
33
Đi thu th p yêu c u c a ng i dùng, xem xemậ ầ ủ ườ
h mu n gìọ ố .
1 Nghiên c u ng i dùng:ứ ườ
 M c đích c a vi c nghiên c u c b n là giúp b n hi u đ c mô hìnhụ ủ ệ ứ ơ ả ạ ể ượ
tâm lý và hành vi c a ng i dùng trong vi c s d ng s n ph m.ủ ườ ệ ử ụ ả ẩ

 2. T ng h pổ ợ t k t qu nghiên c u và quan sátừ ế ả ứ
Sau khi có đ c thông tin v hành vi c a ng i dùng, B n s ph i x lý cácượ ề ủ ườ ạ ẽ ả ử
thông tin này, chuy n nó thành các tài li u đ ph c v cho vi c thi t k .ể ệ ể ụ ụ ệ ế ế
 3. Lên ý t ng và Thi t kưở ế ế
11
Phân tích yêu c u ng i dùng, mô ph ng quy trình thao tácầ ườ ỏ
b ng cách lo i s đ và đ a ra gi i phápằ ạ ơ ồ ư ả .
22
Xây d ng các tình hu ng s d ng (scenario), các r i ro cóự ố ử ụ ủ
th g p ph i…ể ặ ả
33 Xây d ng các b n mockup (t m d ch là b n v s khai c aự ả ạ ị ả ẽ ơ ủ
s n ph m) và ki m nghi m chúngả ẩ ể ệ .
44 N u mockup cho th y k t qu n, chuyên gia UX ti p t c hoànế ấ ế ả ổ ế ụ
thi n nó và cho ra đ iệ ờ nguyên m u (prototype)ẫ .

 4. Hoàn thi n tr i nghi m và giao di n s n ph mệ ả ệ ệ ả ẩ
www.themegallery.com
11
Khi đã có nguyên m u, l i ti p t c ki m tra và cho ra s nẫ ạ ế ụ ể ả
ph m cu i cùngẩ ố .
22
Hoàn thi n s n ph m, ki m tra v i ng i dùng (userệ ả ẩ ể ớ ườ
acceptance testing – UAT).
33 Đ a qua cho b ph n l p trình đ a ra thành s n ph mư ộ ậ ậ ư ả ẩ
th c tự ế.

Các y u t nh h ng t i tr i nghi m ng i dùngế ố ả ưở ớ ả ệ ườ
 Các y u t nh h ng t i tr i nghi m ng i dùngế ố ả ưở ớ ả ệ ườ
Có 5 y u t nh h ng t i tr i nghi m ng i dùngế ố ả ưở ớ ả ệ ườ
 H u íchữ
 D tìm th yễ ấ
 Đáng tin c yậ
 D ti p c nễ ế ậ
 Có giá trị

 H u ích:ữ
S n ph m ph i có m c đích rõ ràng, h u ích trong m t ng i muaả ẩ ả ụ ữ ắ ườ mang l iạ
l i ích phi th c t nh vui ch i hay tính th m m .ợ ự ế ư ơ ẩ ỹ

 D tìm th yễ ấ
 Đáng tin c yậ
 Có nghĩa là các s n ph m ph i d tìả ẩ ả ễ m trên th tr ngị ườ . N u b n không th tìmế ạ ể
th y m t s n ph m, b n s không mua nó và đi u đó là t ng t cho t t cấ ộ ả ẩ ạ ẽ ề ươ ự ấ ả
các ng i dùng ti m năng c a s n ph m đó.ườ ề ủ ả ẩ
 Là vi c ng i dùng tin t ng vào các s n ph m mà b n cung c pệ ườ ưở ả ẩ ạ ấ , nó kéo dài
trong m t kho ng th i gian và nó cho ta bi t r ng nh ng thông tin đ c cungộ ả ờ ế ằ ữ ượ
c p là chính xác và phù h p v i m c đích.ấ ợ ớ ụ Khi khách hàng nghĩ r ng s n ph mằ ả ẩ
không t t nh ng gì b n nóiố ữ ạ – H s ki m m t s n ph m thay th khác.ọ ẽ ế ộ ả ẩ ế

 D ti p c nễ ế ậ
Có giá trị
 Đem l i cho ng i dùng c m giácạ ườ ả
vui v ,ẻ thú v ,ị chi n th ng đ t đ cế ắ ạ ượ
m t đi u gì đó đáng k , đó s là l iộ ề ể ẽ ờ
đ ng viên tích c c đ hộ ự ể ọ s d ngử ụ
s n ph mả ẩ .
 Là vi c cung c p m t tr i nghi m mà m i đ i t ng ng i dùng có th truyệ ấ ộ ả ệ ọ ố ượ ườ ể
c pậ và d s d ng s n ph m đó,ễ ử ụ ả ẩ bao g m nh ng ng i tàn t t m t m t sồ ữ ườ ậ ấ ộ ố
kh năng nh thính giác, th giác, khó khăn trong vi c c đ ng ho c h c t pả ư ị ệ ử ộ ặ ọ ậ
gi m sút.ả

Thành phần thiết kế quan trọng ảnh hưởng đến UX
Form là thành ph n r t quan tr ng đ i v i web, app, ng i dùng th ng t ng tácầ ấ ọ ố ớ ườ ườ ươ
v i website, app thông qua các thành ph n trong đó có form, v y thi t k form nhớ ầ ậ ế ế ư
th nào cho chu n, làm th th nào đ t i u thi t k form cácế ẩ ế ế ể ố ư ế ế b n cùng theo dõiạ
nhé.
Form ch nên có 1 dòng duy nh tỉ ấ
Quá nhi u c t s phá v “đà” nh p li u c a ng i dùng.ề ộ ẽ ỡ ậ ệ ủ ườ

 Nhãn trên
Ng i dùng hoàn thành form nhãn trên v i m t t c đ nhanh h n r t nhi u so v i nhãn trái.ườ ớ ộ ố ộ ơ ấ ề ớ
Nhãn trên còn có th làm vi c hi u qu h n trên di đ ng. Tuy nhiên, khi nh p li u data-setể ệ ệ ả ơ ộ ậ ệ
v i tùy ch nh bi n đ i, b n nên cân nh c s d ng nhãn trái vì các nhãn ki u này d scan h n,ớ ỉ ế ổ ạ ắ ử ụ ể ễ ơ
có đ cao gi m, và g i s cân nh c nhi u h n so v i nhãn trên.ộ ả ợ ự ắ ề ơ ớ

 Nhóm nhãn v i input c a chúngớ ủ
Hi n th nhãn và input g n v i nhau, và đ m b o đ đ cao gi a các tr ngể ị ầ ớ ả ả ủ ộ ữ ườ
nh p li u đ không gây r i m t ng i dùng.ậ ệ ể ố ắ ườ

 Tránh vi t hoa hoàn toànế
All caps r t khó đ c và scanấ ọ

 Tránh dùng placeholder text làm nhãn
Tránh dùng placeholder text làm nhãn s gây ra nhi u s c trong quá trình sẽ ề ự ố ử
d ng.ụ

 CTA (Call to action) rõ ràng

 Hi n th errors n i dòngể ị ộ

 Ch dùng xác nh n n i dòng sau khi ng i dùng nh p li u xongỉ ậ ộ ườ ậ ệ
Đ ng xác nh n khi ng i dùng v n đang gõ phím n u nó không quá h u íchừ ậ ườ ẫ ế ữ
(nh trng tr ng h p t o username, message v i b đ m ký t )ư ườ ợ ạ ớ ộ ế ự

 Đ ng n đo n text tr giúp c b nừ ẩ ạ ợ ơ ả
Hi n rõ text tr giúp c b n b t c khi nào có th . V i nh ng đo n ph cệ ợ ơ ả ấ ứ ể ớ ữ ạ ứ
t p, hãy đ t k bên input.ạ ặ ế

C i thi n tr i nghi m ng i dùng cho app/game mobileả ệ ả ệ ườ
Đ thu hút khách hàng, các nhà phát tri nể ể app/ game nên t p trung vàoậ
ph n tr i nghi m ng i dùng l n đ uầ ả ệ ườ ầ ầ . Ph n h ng d n giúp đ nh h ng choầ ướ ẫ ị ướ
ng i dùng, làm h tin r ngườ ọ ằ app c a b n mang đ n nh ng giá tr gi i trí th củ ạ ế ữ ị ả ự
sự.
Sau đây là m t s l i khuyên giúp b n đánh giá và c i thi n ph n tr iộ ố ờ ạ ả ệ ầ ả
nghi m ng i dùng l n đ u tiệ ườ ầ ầ ên trong app/ game mobile

Mở đầu đơn giản, dễ dàng
Khi ng i dùng t i v m tườ ả ề ộ app
h mu n đ c ch i ngay l p t c.ọ ố ượ ơ ậ ứ
Đ ng phí công b t h tr i quaừ ắ ọ ả
nh ng khâu r m rà v i hy v ngữ ườ ớ ọ
l y đ c ti n t h ngày lúc đ u.ấ ượ ề ừ ọ ầ
các nhà phát tri n c n ph i t oể ầ ả ạ
d ng m i quan h t t v i ng iự ố ệ ố ớ ườ
dùng ngay t đ u đã.ừ ầ

www.themegallery.com Company Logo
Diagram
Content 03Content 02Content 01
• Description of the contents
ThemeGallery is a
Design Digital
Content & Contents
mall developed by
Guild Design Inc.
• Description of the
contents
contents
contents
contents
● ThemeGallery is a Design Digital Content & Contents mall
developed by Guild Design Inc.

thie
Văn bản
của bạn.
Văn bản
của bạn.
Văn bản
của bạn.
Văn bản
của bạn.
Văn bản
của bạn.
Văn bản
của bạn.
Nội dung 01
Nội dung 03
Nội dung 05
Nội dung 02
Nội dung 04
Nội dung 06

Diagram
Reality
Identity
Creativity
Describe a vision of company or
strategic contents.
strategic contents.
strategic contents.
Reality
Identity Creativity
ThemeGallery is a Design Digital Content &
Contents mall developed by Guild Design Inc.
A title about content

Diagram
Description
of the
contents
• Title in here
ThemeGallery is a Design Digital Content & Contents mall
• Title in here
• Title in here
• Title in here

Diagram
Description ofDescription of
the contentsthe contents
ThemeGallery is a Design
Digital Content & Contents
mall developed by Guild
Design Inc.
Design Inc.
Design Inc.
Title in
here
Title in
here
Title in
here

Diagram
Text in
here
Text in
here
Text in
here
ThemeGallery is a Design Digital Content & Contents mall developed by
Guild Design Inc.
ThemeGallery is a Design Digital Content
& Contents mall developed by Guild
Design Inc.
Click to
add Text

Diagram
Text in hereTitle in here Text in here Text in here
2003 2004 2005 2006
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
ThemeGallery is a Design Digital Content & Contents mall developed by
Guild Design Inc.

Diagram
ThemeGallery
is a Design Digital
Content & Contents
mall developed
by Guild Design Inc.
Your text in
here
Your text
in here
Your text
in here
Add your text in here
• Your text in here

Diagram
20032003
20042004
20052005
20072007
2003.10 Add Your Text

Company Logo
MOBILE UX DESIGN
Click to add Title1
Click to add Title2
Click to add Title3
Click to add Title4
Mobile UX Design:

Mô t ng n g nả ắ ọ
Nội dung
TIÊU ĐỀ

Diagram
ThemeGallery
is a Design Digital
Content & Contents
mall developed by
Guild Design Inc.
Title
Add your text
ThemeGallery
is a Design Digital
Content & Contents
mall developed by
Guild Design Inc.

Cycle Diagram
Text
Text
Text
Text
Text
Cycle name
Add Your Text

http://blogcongdong.com
Company Logo
Diagram
Add Your Text Add Your Text
Add Your Text

Company Logo
3-D Pie Chart
TitleTitle
Add Your Text
Add Your Text
Add Your Text

Diagram
Concept
Add Your Text
Text
Text
Text
Text
Text
Text

Diagram
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text
Add Your Text

Diagram
1
ThemeGallery is a
Design Digital
Content & Contents
mall developed by
Guild Design Inc.
2
ThemeGallery is a
Design Digital
Content & Contents
mall developed by
Guild Design Inc.
3
ThemeGallery is a
Design Digital
Content & Contents
mall developed by
Guild Design Inc.

Diagram
Add Your TitleAdd Your Title
Text
Text
Text
Text

Diagram
YourTextYourText
YourTextYourText
YourTextYourText
YourTextYourText
2001 2002 2003 2004

Progress Diagram
Phase 1Phase 1 Phase 2Phase 2 Phase 3Phase 3

Table
TEXT TEXT TEXT TEXT TEXT
Title A
Title B
Title C
Title D
Title E
Title F

Nội dungNội dung Nội dungNội dung Nội dungNội dung
TIÊU ĐỀ
 Thay thế bằng văn
bản của bạn.
bản của bạn.
bản của bạn.
bản của bạn.
bản của bạn.
bản của bạn.
bản của bạn.
bản của bạn.
bản của bạn.

TIÊU ĐỀ
0201 03 04
Chú thích Chú thích Chú thích Chú thích
BlogCongDong.Com chia sẻ
với các bạn những mẫu thiết
kế PowerPoint chuyên
nghiệp.
nghiệp.
nghiệp.
nghiệp.

Text1
Text2
Text3
Text4
Text5
3-D Pie Chart

OR USE DIAGRAMS TO EXPLAIN
COMPLEX IDEAS
Sample text
Insertyourdesired
texthere.
Insertyourdesired
texthere.
Insertyourdesired
texthere.
Insertyourdesired
texthere.
Diagram featured by http://slidemodel.com
This is a sample text.
Insert your desired text here.
Sample text
Sample text
Sample text
Sample text

Marketing Diagram
Add Your TextAdd Your TextAdd Your TextAdd Your Text
Add Your Title here
Text1Text1Text1
- Khi
chúng ta
lái xe

Tiêu đề 1
Mô tả nội dung
Mô tả nội dung
Tiêu đề 2
Mô tả nội dung
Mô tả nội dung
Tiêu đề 3
Mô tả nội dung
Mô tả nội dung

85%85% 65%65% 25%25%45%45%
TIÊU ĐỀ
Thêm chữ
• Mô tả ND
• Mô tả ND
• Mô tả ND
• Mô tả ND
Thêm chữ
• Mô tả ND
• Mô tả ND
• Mô tả ND
• Mô tả ND
Thêm chữ
• Mô tả ND
• Mô tả ND
• Mô tả ND
• Mô tả ND
Thêm chữ
• Mô tả ND
• Mô tả ND
• Mô tả ND
• Mô tả ND

Company Logo
Diagram
2000
2001
2002
2003Company HistoryCompany History

LOGO
“ Add your company slogan ”

Trai nghiem nguoi dung ux

Recommended

Recommended

More Related Content

Similar to Trai nghiem nguoi dung ux

Similar to Trai nghiem nguoi dung ux (20)

Trai nghiem nguoi dung ux

Editor's Notes