SlideShare una empresa de Scribd logo
1 de 131
One Step Closer To UX - Vo Hoang Chu Kiet
Devoted 
Coach 
Account 
Executive 
Interaction 
Designer 
2009 2012 2013 
Bachelor of Psychology 
Võ Hoàng Chu Kiệt 
vohoangchukiet.kit@gmail.com
Agenda 
UX 101 (45’) 
Break (15’) 
SSS’ working process UX (90’) 
Q&A (30’)
User Experience
Source: google
User Experience
Experience = Emotion
Source: google
Source: google
Good UX = User easy to use
vs 
Source: google
3. Information 
Architecture 
5. User Interface (UI) 
1. User 
Research 
4. Interaction 
Design 
6. User Testing 
UX Design 
2. Business 
Understanding 
Good UX = User easy to use
1. User Research 
Good UX = User easy to use
Outcome: Explore 
Personas 
Behaviour 
Insight 
Needs 
Good UX = User easy to use
Good UX = User easy to use 
Source: google
Or 
Or the rest… 
Good UX = User easy to use
Fun fact 1 
GoGodo oUdX U =X U =s eEra seya stoy utos euse 
Source: google
Fun fact 2 
Source: https://www.facebook.com/humansofsaigonn 
Good UX = User easy to use
2. Business 
Understanding 
Good UX = User easy to use
Outcome: Understand give solution for 
business needs. 
Good UX = User easy to use
UX User 
needs 
Business 
needs 
Good UX = User easy to use
Before After 
Good UX = User easy to use
Or 
Good UX = User easy to use
? ? 
Sign up Discover app Sign up 
Good UX = User easy to use
3. Information 
Architecture 
Good UX = User easy to use
Outcome: Priority information and group by 
categories. 
Good UX = User easy to use
How we actually read? 
Good UX = User easy to use
Ngày 1 - Ghi nhận những điều biết ơn 
“Khi biết cách ghi nhận những gì biết ơn, cả cuộc đời tôi thay đổi.” - Willie Nelson. 
Có thể trong đời ta từng nghe nói đến chuyện ghi lại những điều mình biết ơn. Đó là khi ta biết bắt 
đầu nghĩ về những điều mình may mắn có được. 
Khi biết ơn về những điều mình có, dù nhỏ nhặt đến đâu, ta sẽ thấy mình bắt đầu có nhiều thứ 
hơn. Nếu biết trân trọng số tiền đang có, dù rất ít, tiền sẽ bắt đầu tăng lên. Nếu biết trân trọng 
một mối quan hệ, dù không hoàn hảo, mối quan hệ sẽ dần tốt hơn. Nếu biết trân trọng công việc 
đang có, dù không phải công việc mơ ước, mọi thứ cũng sẽ bắt đầu thay đổi để ta thích công việc 
hơn, nhiều cơ hội nghề nghiệp sẽ tự nhiên xuất hiện. 
Nếu không ghi nhận những điều biết ơn, ta dễ dàng mắc phải chuyện suốt ngày dò xét những thứ 
tiêu cực. Ta ghi nhận những thứ tiêu cực khi nói về những gì ta không có. Ta ghi nhận những thứ tiêu 
cực khi chỉ trích hay tìm khuyết điểm của người khác, khi bực mình cằn nhằn về kẹt xe, xếp hàng, 
nhà nước, không đủ tiền sống, nhiều khi còn đổ thừa thời tiết nữa. Khi ta nhắc tới, những thứ tiêu 
cực cũng sẽ tăng lên. Nguy hiểm hơn, khi ta nghĩ đến những thứ tiêu cực là ta đã ngăn chặn không 
cho những điều đáng trân trọng có chỗ xen vào. 
Điều đầu tiên sau mỗi sáng thức dậy bạn cần làm là Ghi Nhận Những Điều Biết Ơn. Bạn có thể 
viết tay ra giấy, xài máy tính hoặc viết vào sổ biết ơn hoặc nhật ký (bất cứ hình thức nào bạn cảm 
thấy thoải mái). Ngay bây giờ, hãy ghi lại 10 điều bạn biết ơn nhất trong cuộc đời mình. 
Khi viết lời cảm ơn, hãy nghĩ về LÝ DO tại sao mình biết ơn. Khi nghĩ về lý do tại sao mình biết ơn 1 
điều gì đó, 1 người nào đó, 1 hoàn cảnh nào đó, ta sẽ thấy biết ơn sâu sắc hơn. Hãy nhớ phép màu 
của sự biết ơn sẽ đến cùng với mức độ bạn cảm nhận được.
start 
Good UX = User easy to use
Ngày 1 - Ghi nhận những điều biết ơn 
“Khi biết cách ghi nhận những gì biết ơn, cả cuộc đời tôi thay đổi.” - Willie Nelson. 
Có thể trong đời ta từng nghe nói đến chuyện ghi lại những điều mình biết ơn. Đó là khi ta biết bắt 
đầu nghĩ về những điều mình may mắn có được. 
Khi biết ơn về những điều mình có, dù nhỏ nhặt đến đâu, ta sẽ thấy mình bắt đầu có nhiều thứ 
hơn. Nếu biết trân trọng số tiền đang có, dù rất ít, tiền sẽ bắt đầu tăng lên. Nếu biết trân trọng 
một mối quan hệ, dù không hoàn hảo, mối quan hệ sẽ dần tốt hơn. Nếu biết trân trọng công việc 
đang có, dù không phải công việc mơ ước, mọi thứ cũng sẽ bắt đầu thay đổi để ta thích công việc 
hơn, nhiều cơ hội nghề nghiệp sẽ tự nhiên xuất hiện. 
Nếu không ghi nhận những điều biết ơn, ta dễ dàng mắc phải chuyện suốt ngày dò xét những thứ 
tiêu cực. Ta ghi nhận những thứ tiêu cực khi nói về những gì ta không có. Ta ghi nhận những thứ tiêu 
cực khi chỉ trích hay tìm khuyết điểm của người khác, khi bực mình cằn nhằn về kẹt xe, xếp hàng, 
nhà nước, không đủ tiền sống, nhiều khi còn đổ thừa thời tiết nữa. Khi ta nhắc tới, những thứ tiêu 
cực cũng sẽ tăng lên. Nguy hiểm hơn, khi ta nghĩ đến những thứ tiêu cực là ta đã ngăn chặn không 
cho những điều đáng trân trọng có chỗ xen vào. 
Điều đầu tiên sau mỗi sáng thức dậy bạn cần làm là Ghi Nhận Những Điều Biết Ơn. Bạn có thể 
viết tay ra giấy, xài máy tính hoặc viết vào sổ biết ơn hoặc nhật ký (bất cứ hình thức nào bạn cảm 
thấy thoải mái). Ngay bây giờ, hãy ghi lại 10 điều bạn biết ơn nhất trong cuộc đời mình. 
Khi viết lời cảm ơn, hãy nghĩ về LÝ DO tại sao mình biết ơn. Khi nghĩ về lý do tại sao mình biết ơn 1 
điều gì đó, 1 người nào đó, 1 hoàn cảnh nào đó, ta sẽ thấy biết ơn sâu sắc hơn. Hãy nhớ phép màu 
của sự biết ơn sẽ đến cùng với mức độ bạn cảm nhận được.
People scan it - not read 
Good UX = User easy to use
Good UX = User easy to use 
Source: google
Before After 
Good UX = User easy to use
4. Interaction Design 
Good UX = User easy to use
Outcome: Have a big picture and dig in detail 
every steps can happen when user using 
product 
Good UX = User easy to use
Good UX = User easy to use 
Source: http://ngochieu.com/
“Solar system” 
Good UX = User easy to use
“Galaxy” 
Good UX = User easy to use
Dig in detail 
Source: http://dribbble.com/shots/1812505-Updated-Reservation-Interaction 
Good UX = User easy to use
Source: https://medium.com/@ekoshairy/google-ux-design-with-heart-c2b56d467913 
Good UX = User easy to use
5. User interface (UI) 
Good UX = User easy to use
Outcome: Suit up for your product. 
Good UX = User easy to use
Welcome to the fancy world 
Good UX = User easy to use
Big Hero 6 
Good UX = User easy to use
Simon Hoang: behance.net/centaurus 
Good UX = User easy to use
fuzel.com 
Good UX = User easy to use
But sometime… 
Good UX = Easy to use
Before After 
Good UX = User easy to use
Expected 
Good UX = User easy to use 
Source: google
Reality 
Good UX = User easy to use
Bad UI / Good UX 
Good UX = User easy to use 
Source: 4chan.com
6. User testing 
Good UX = User easy to use
Your thought = Assumption 
Good UX = User easy to use
Outcome: Confirm user feel about your 
product and your thought about user 
behaviour. 
Good UX = User easy to use
Good UX = User easy to use
3. Information 
Architecture 
5. User Interface (UI) 
1. User 
Research 
4. Interaction 
Design 
6. User Testing 
UX Design 
2. Business 
Understanding 
Good UX = User easy to use
Source: google
Good UX = User easy to use
Book, Article: 
- Don’t make me think (Steve Krug) 
- Design for everyday things (Donald A. Norman) 
- Show me the number (Stephen Few) 
- Steal like an artist (Austin Kleon) 
- medium.com 
- ngochieu.com 
Online Courses: 
- interaction-design.org 
- udemy.com 
- coursera.org (Human-Computer Interaction Design, Interaction 
Design, Gamification…)
Break
SSS’ Working process UX
MVP 
Minimum Viable Product 
Source: google
MVP 
Expected 
product 
Source: google
Agile model 
Good UX = User easy to use 
Source: google
Handy man
Briefing 
User 
Journey Wireframe UI Testing 
1 2 3 4 5 
Good UX = User easy to use
Workplan 
Good UX = User easy to use
Briefing 
Ask much as you can 
Listen by heart 
Confirm technology 
Good UX = User easy to use
Question for 
User research 
1. Personas 
2. Behaviour 
3. Insight 
4. Needs 
Good UX = User easy to use
Question for 
User research 
- Who are they? 
- What does their want? 
- What are their problem? 
- Any app try to solve their problem? 
- How does they currently do this? 
- What is the main user you want to focus on? 
…
Question for 
Business Understanding 
1. Business model 
2. Feature 
3. Design 
Good UX = User easy to use
Question for 
Business Understanding 
- What is your idea? 
- Which problem the app solve in user perspective? 
- Is there any similar app or competitive app exists on the 
market? If yes, provide some name. 
- Why does users will choose you? 
- What is your feature in MVP? 
…
Task 
Describe your customer 
Good UX = User easy to use
Question for 
User research 
- Who are they? 
- What does their want? 
- What are their problem? 
- Any app try to solve their problem? 
- How does they currently do this? 
- What is the main user you want to focus on? 
…
User Journey 
Drawing 
Asking 
Confirm 
Good UX = User easy to use
Outcome: Draw the main user flow and full 
user flow. 
Good UX = User easy to use
Good UX = User easy to use
Tools 
Sketch gliffy 
Balsamiq mockup Adobe Illustrator 
Good UX = User easy to use 
Source: google
Task 
Draw a main user flow. 
As an user, i want to… 
Good UX = User easy to use
Wireframe 
Drawing 
Research 
Fancy 
Good UX = User easy to use
Outcome: Apply the interaction design, 
information architecture to simple sketch. 
Good UX = User easy to use
Keep it simple first. 
Good UX = User easy to use
Home Enroute 
Map 
Lê Văn Tèo 
0126 9696 969 
20 minutes to arrive 
Scroll 
Job: 
Click cancel 
Yes 
Cancel Job’s Detail 
Promo code 
Click Catergory 
Automatch based on bidding logic 
Home Total 
Your Address 
Request 
Map 
Home Total 
Cancel Next 
Your Address 
Catergory 
Timing 
Map 
Description of problem 
Image 
Request Pro 
Click Timing 
Timing 
Now 
Or 
Hour Day Month 
Catergory 
Điện 
Nước 
Điện lạnh 
Good UX = User easy to use
Dig in detail later. 
Good UX = User easy to use
USER 
START HERE 
Job Canceled 
Are you sure? 
Home Enroute 
Map 
Lê Văn Tèo 
0126 9696 969 
20 minutes to arrive 
Scroll 
Home Enroute 
Map 
Pro: 
- Name 
- Phone 
Job: 
- Status: En route 
- Time: now 
- Vấn đề: điện & điện lạnh 
- Chi tiết: Đèn không sáng, Máy 
lạnh cũng không mát, chắc là 
cúp điện 
Job: 
Address: 
69/96 đường 69, phường 6, 
quận 9, TP HCM 
Cancel 
Click cancel 
Scroll back 
Click cancel 
Yes 
Click OK 
Home Repairing 
Map 
Lê Văn Tèo 
0126 9696 969 
PRO 
Your Address 
Request 
START HERE 
Cancel Job’s Detail 
Promo code 
Click Catergory 
Automatch based on bidding logic 
Back Edit 
Enroute 
Map 
Edit 
Pause job 
Cancel job 
Address: 
69/96 đường 69, phường 6, 
quận 9, TP HCM 
Cam Toán Mẹt 
0129 6969 696 
Job: 
Repairing 
Swipe 
Repairing 
Bạn thấy thợ như thế nào? 
Review 
Swipe 
Complete 
Scroll up Scroll down 
Offline 
Go to user’s home Discuss a quotation 
and do job 
State: Upcoming 
Job completed 
and add to Pro’s History 
Home Total 
Map 
Home Total 
Cancel Next 
Your Address 
Catergory 
Timing 
Map 
Description of problem 
Image 
Request Pro 
Home Total 
- Address: 69/96 đường 69, 
phường 6, quận 9, TP HCM 
- Vấn đề: điện & điện lạnh 
40s 
Accept 
Reject 
Home Complete Detail 
Map 
OK 
Lê Văn Tèo 
0126 9696 969 
Complete auto pop up rate and review 
Receive receipt from mail 
Add to User’s History 
Enroute 
Map 
Edit 
Address: 
69/96 đường 69, phường 6, 
quận 9, TP HCM 
Cam Toán Mẹt 
0129 6969 696 
Job: 
- Status: Pending confirmation 
- Time: now 
- Vấn đề: điện & điện lạnh 
- Chi tiết: Đèn không sáng, Máy 
lạnh cũng không mát, chắc là 
cúp điện 
Auto detect location 
and change status become Arrived 
Edit Enroute 
Map 
Address: 
69/96 đường 69, phường 6, 
quận 9, TP HCM 
Cam Toán Mẹt 
0129 6969 696 
Edit Repairing 
Map 
Address: 
69/96 đường 69, phường 6, 
quận 9, TP HCM 
Cam Toán Mẹt 
0129 6969 696 
Complete Job 
Job’s Receipt 
Quotation 
Send receipt 
Cancel 
Có Sound 
và Rung 
Default Job screen, map tự direct đến đích đến 
Nút dạng swipe to unlock 
Click reject 
Home Total 
Lê Văn Tèo 
4.5 
Upcoming job 
State: Upcoming 
Vấn đề: điện & điện lạnh 
Time: 14h 15-11-2014 
69/96 đường 69, phường 6, 
quận 9, TP HCM 
Home Total 
Lê Văn Tèo 
4.5 
Upcoming job 
Vấn đề: điện & điện lạnh 
Time: 14h 15-11-2014 
Pro: Lê Văn Tèo 
Pro’s Phone: 0126 9696 969 
Job: 
Job: 
Job: 
Repairing 
Complete 
Click Timing 
Timing 
Now 
Or 
Hour Day Month 
Catergory 
Điện 
Nước 
Điện lạnh 
Accept? 
Are you sure???? 
OK 
Cancel 
Click edit 
Repairing 
Good UX = User easy to use
Fancy time 
Source: https://dribbble.com/shots/1623679-Open-Close?list=likes&offset=6 
Good UX = User easy to use
Fancy time 
Source: https://dribbble.com/shots/1081380-Close-Animations?list=searches&tag=animation&offset=43 
Good UX = User easy to use
Fancy time 
Source: https://dribbble.com/shots/976474-Animated-sliding-tab-bar?list=searches&tag=animation&offset=21 
Good UX = User easy to use
Tools 
Balsamiq mockup Sketch Adobe Illustrator 
Good UX = User easy to use 
Source: google
UI 
Make a good UI 
Easy to communicate 
Good UX = User easy to use
Make a good UI 
Good UX = User easy to use
Contrast 
Repetition 
Alignment 
Proximity 
Good UX = User easy to use
1.Contrast 
Make elements easy to see 
Good UX = User easy to use
Source: https://dribbble.com/ 
Good UX = User easy to use
Good UX = User easy to use
Good UX = User easy to use
Good UX = User easy to use
Source: https://dribbble.com/ 
GoGodo oUdX U =X U =s eEra seya stoy utos euse
GoGodo oUdX U =X U =s eEra seya stoy utos euse
http://coolors.co/ 
Good UX = Easy to use 
Good UX = User easy to use
GoGodo oUdX U =X U =s eEra seya stoy utos euse
2.Repeat 
Make elements consistent 
Good Good UX UX = User = Easy easy to use 
to use
GoGodo oUdX U =X U =s eEra seya stoy utos euse
Source: https://dribbble.com/ 
GoGodo oUdX U =X U =s eEra seya stoy utos euse
GoGodo oUdX U =X U =s eEra seya stoy utos euse
3.Alignment 
Make elements have a connection 
Good Good UX UX = User = Easy easy to use 
to use
GoGodo oUdX U =X U =s eEra seya stoy utos euse 
Source: 9gag.com
Source: https://dribbble.com/ 
GoGodo oUdX U =X U =s eEra seya stoy utos euse
a 
Good UX = Easy to use 
a 
a 
a b b a b b 
Source: https://dribbble.com/ 
Good UX = User easy to use
4.Proximity 
Make elements have a “family” 
Good Good UX UX = User = Easy easy to use 
to use
Source: https://dribbble.com/ 
GoGodo oUdX U =X U =s eEra seya stoy utos euse
Contrast 
Repetition 
Alignment 
Proximity 
Good Good UX UX = User = Easy easy to use 
to use 
Source: ngochieu.com
Easy to communicate 
It’s all about PSD file 
Good Good UX UX = User = Easy easy to use 
to use
Separate PSD files - Name it 
Good Good UX UX = User = Easy easy to use 
to use
Try this Not this 
Good Good UX UX = User = Easy easy to use 
to use
GoGodo oUdX U =X U =s eEra seya stoy utos euse
Store assets relative to psd files 
Good Good UX UX = User = Easy easy to use 
to use
Try this 
Not this 
Good Good UX UX = User = Easy easy to use 
to use
Make a template for UI elements 
Good Good UX UX = User = Easy easy to use 
to use
GoGodo oUdX U =X U =s eEra seya stoy utos euse
Name layers - Be accurate 
Use folders - Name it too 
Good Good UX UX = User = Easy easy to use 
to use
Not this 
Try this 
Good Good UX UX = User = Easy easy to use 
to use
Save screenshots - Same name with the folder 
Good Good UX UX = User = Easy easy to use 
to use
PSD Finder 
Good Good UX UX = User = Easy easy to use 
to use
1. Separate PSD files - Name it 
2. Store assets relative to psd files 
3. Make a template for UI elements 
4. Name layers - Be accurate 
5. Use folders - Name it too 
6. Save screenshots - Same name with the folder 
Good Good UX UX = User = Easy easy to use 
to use
Development time 
Checking 
Testing 
Communicate 
Good Good UX UX = User = Easy easy to use 
to use
User testing 
Watching 
Listening 
Analytic 
Good Good UX UX = User = Easy easy to use 
to use
Outcome: Confirm user feel about your 
product and your thought about user 
behaviour. 
Good Good UX UX = User = Easy easy to use 
to use
GoGodo oUdX U =X U =s eEra seya stoy utos euse
Briefing 
User 
Journey Wireframe UI Testing 
1 2 3 4 5 
Good UX = User easy to use
Thank you

Más contenido relacionado

Similar a One Step Closer To UX - Vo Hoang Chu Kiet

Đạo đức nghề nghiệp - Phỏng Vấn Lâm Thanh Tùng
Đạo đức nghề nghiệp - Phỏng Vấn Lâm Thanh TùngĐạo đức nghề nghiệp - Phỏng Vấn Lâm Thanh Tùng
Đạo đức nghề nghiệp - Phỏng Vấn Lâm Thanh TùngJenlytine
 
Tu hoc-digital-marketing
Tu hoc-digital-marketingTu hoc-digital-marketing
Tu hoc-digital-marketingShizu Nguyễn
 
10 buoc xay dung cong viec kinh doanh tren internet
10 buoc xay dung cong viec kinh doanh tren internet10 buoc xay dung cong viec kinh doanh tren internet
10 buoc xay dung cong viec kinh doanh tren internetIM Hoang Tram
 
10 buoc xay dung cong viec kinh doanh tren internet
10 buoc xay dung cong viec kinh doanh tren internet10 buoc xay dung cong viec kinh doanh tren internet
10 buoc xay dung cong viec kinh doanh tren internetGia sư Trí Việt
 
15 minute-english-ielts-nguyenhuyen
15 minute-english-ielts-nguyenhuyen15 minute-english-ielts-nguyenhuyen
15 minute-english-ielts-nguyenhuyenHaDang77
 
Lap ke hoach mua laptop moi
Lap ke hoach mua laptop moiLap ke hoach mua laptop moi
Lap ke hoach mua laptop moiTiểu Tử Lê
 
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scottNgay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scottanhngoc890
 
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scottNgay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scottanhngoc890
 
Nghĩ về cách nghĩ
Nghĩ về cách nghĩNghĩ về cách nghĩ
Nghĩ về cách nghĩAn Le
 
Hướng dẫn Thực hành Cố vấn Khởi nghiệp
Hướng dẫn Thực hành Cố vấn Khởi nghiệpHướng dẫn Thực hành Cố vấn Khởi nghiệp
Hướng dẫn Thực hành Cố vấn Khởi nghiệpTri Dung, Tran
 
Dinh thithuhien doan1
Dinh thithuhien doan1Dinh thithuhien doan1
Dinh thithuhien doan1Alice_Stone
 
Tao suc hut de thanh cong trong kinh doanh theo mang
Tao suc hut de thanh cong trong kinh doanh theo mangTao suc hut de thanh cong trong kinh doanh theo mang
Tao suc hut de thanh cong trong kinh doanh theo mangXuan Le
 
Co hoi thuan_loi_nhat_trong_lich_su_loai_nguoi
Co hoi thuan_loi_nhat_trong_lich_su_loai_nguoiCo hoi thuan_loi_nhat_trong_lich_su_loai_nguoi
Co hoi thuan_loi_nhat_trong_lich_su_loai_nguoiSự Kiện Hay
 

Similar a One Step Closer To UX - Vo Hoang Chu Kiet (20)

Đạo đức nghề nghiệp - Phỏng Vấn Lâm Thanh Tùng
Đạo đức nghề nghiệp - Phỏng Vấn Lâm Thanh TùngĐạo đức nghề nghiệp - Phỏng Vấn Lâm Thanh Tùng
Đạo đức nghề nghiệp - Phỏng Vấn Lâm Thanh Tùng
 
Tu hoc-digital-marketing
Tu hoc-digital-marketingTu hoc-digital-marketing
Tu hoc-digital-marketing
 
7 chiasevephatriensanphamux uitaitgdd
7 chiasevephatriensanphamux uitaitgdd7 chiasevephatriensanphamux uitaitgdd
7 chiasevephatriensanphamux uitaitgdd
 
10 buoc xay dung cong viec kinh doanh tren internet
10 buoc xay dung cong viec kinh doanh tren internet10 buoc xay dung cong viec kinh doanh tren internet
10 buoc xay dung cong viec kinh doanh tren internet
 
10 buoc xay dung cong viec kinh doanh tren internet
10 buoc xay dung cong viec kinh doanh tren internet10 buoc xay dung cong viec kinh doanh tren internet
10 buoc xay dung cong viec kinh doanh tren internet
 
Phan mem snapchat
Phan mem snapchatPhan mem snapchat
Phan mem snapchat
 
15 minute-english-ielts-nguyenhuyen
15 minute-english-ielts-nguyenhuyen15 minute-english-ielts-nguyenhuyen
15 minute-english-ielts-nguyenhuyen
 
Lap ke hoach mua laptop moi
Lap ke hoach mua laptop moiLap ke hoach mua laptop moi
Lap ke hoach mua laptop moi
 
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scottNgay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
 
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scottNgay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
Ngay+bay+gio+hoac+khong+bao+gio+ +s.j.scott
 
LIN ơi, mình đi đâu?
LIN ơi, mình đi đâu?LIN ơi, mình đi đâu?
LIN ơi, mình đi đâu?
 
Cách trình bày thông tin quảng cáo
Cách trình bày thông tin quảng cáoCách trình bày thông tin quảng cáo
Cách trình bày thông tin quảng cáo
 
Nghĩ về cách nghĩ
Nghĩ về cách nghĩNghĩ về cách nghĩ
Nghĩ về cách nghĩ
 
User first - preview
User first - previewUser first - preview
User first - preview
 
Hướng dẫn Thực hành Cố vấn Khởi nghiệp
Hướng dẫn Thực hành Cố vấn Khởi nghiệpHướng dẫn Thực hành Cố vấn Khởi nghiệp
Hướng dẫn Thực hành Cố vấn Khởi nghiệp
 
Dinh thithuhien doan1
Dinh thithuhien doan1Dinh thithuhien doan1
Dinh thithuhien doan1
 
thesimple
thesimplethesimple
thesimple
 
Tao suc hut de thanh cong trong kinh doanh theo mang
Tao suc hut de thanh cong trong kinh doanh theo mangTao suc hut de thanh cong trong kinh doanh theo mang
Tao suc hut de thanh cong trong kinh doanh theo mang
 
Co hoi thuan_loi_nhat_trong_lich_su_loai_nguoi
Co hoi thuan_loi_nhat_trong_lich_su_loai_nguoiCo hoi thuan_loi_nhat_trong_lich_su_loai_nguoi
Co hoi thuan_loi_nhat_trong_lich_su_loai_nguoi
 
Ftu chon loc
Ftu chon locFtu chon loc
Ftu chon loc
 

Más de Silicon Straits

[THE PIRATES’ 3-year anniversary] Jonas' story
[THE PIRATES’ 3-year anniversary] Jonas' story[THE PIRATES’ 3-year anniversary] Jonas' story
[THE PIRATES’ 3-year anniversary] Jonas' storySilicon Straits
 
“One man” development process model
“One man” development process model“One man” development process model
“One man” development process modelSilicon Straits
 
What we use to build Android apps at Silicon Straits
What we use to build Android apps at Silicon StraitsWhat we use to build Android apps at Silicon Straits
What we use to build Android apps at Silicon StraitsSilicon Straits
 
Silicon Straits Internship Program Review - Season 1
Silicon Straits Internship Program Review - Season 1Silicon Straits Internship Program Review - Season 1
Silicon Straits Internship Program Review - Season 1Silicon Straits
 
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
[SIP 2015] Hardware Proposal: Ads view counter for AdsBoxSilicon Straits
 
[SIP 2015] Design Proposal: Design and animated prototype
[SIP 2015] Design Proposal: Design and animated prototype[SIP 2015] Design Proposal: Design and animated prototype
[SIP 2015] Design Proposal: Design and animated prototypeSilicon Straits
 
[SIP 2015] iOS Proposal: VIPER
[SIP 2015] iOS Proposal: VIPER[SIP 2015] iOS Proposal: VIPER
[SIP 2015] iOS Proposal: VIPERSilicon Straits
 
[SIP 2015] QA Intern: Test Automation
[SIP 2015] QA Intern: Test Automation[SIP 2015] QA Intern: Test Automation
[SIP 2015] QA Intern: Test AutomationSilicon Straits
 
[SIP 2015] Back-end Proposal: Chat System using Socket.io
[SIP 2015] Back-end Proposal: Chat System using Socket.io[SIP 2015] Back-end Proposal: Chat System using Socket.io
[SIP 2015] Back-end Proposal: Chat System using Socket.ioSilicon Straits
 
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
[SIP 2015] Marketing Proposal: Making edit flow more informative and simplerSilicon Straits
 
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú BùiSilicon Straits
 
[Sharing T1] How to take good photos - Anh Minh
[Sharing T1] How to take good photos - Anh Minh[Sharing T1] How to take good photos - Anh Minh
[Sharing T1] How to take good photos - Anh MinhSilicon Straits
 
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh HòaSilicon Straits
 
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân QuangSilicon Straits
 
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?Silicon Straits
 
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
[Sharing T11] Hussar - The winged cavalry - Cường ĐoànSilicon Straits
 
[Sharing T10] How I improved english commumication in literally 2 months
[Sharing T10] How I improved english commumication in literally 2 months[Sharing T10] How I improved english commumication in literally 2 months
[Sharing T10] How I improved english commumication in literally 2 monthsSilicon Straits
 

Más de Silicon Straits (20)

[THE PIRATES’ 3-year anniversary] Jonas' story
[THE PIRATES’ 3-year anniversary] Jonas' story[THE PIRATES’ 3-year anniversary] Jonas' story
[THE PIRATES’ 3-year anniversary] Jonas' story
 
Focus - Quang Trung
Focus - Quang TrungFocus - Quang Trung
Focus - Quang Trung
 
“One man” development process model
“One man” development process model“One man” development process model
“One man” development process model
 
Silicon Straits Origin
Silicon Straits OriginSilicon Straits Origin
Silicon Straits Origin
 
Kotlin Overview
Kotlin OverviewKotlin Overview
Kotlin Overview
 
What we use to build Android apps at Silicon Straits
What we use to build Android apps at Silicon StraitsWhat we use to build Android apps at Silicon Straits
What we use to build Android apps at Silicon Straits
 
Silicon Straits Internship Program Review - Season 1
Silicon Straits Internship Program Review - Season 1Silicon Straits Internship Program Review - Season 1
Silicon Straits Internship Program Review - Season 1
 
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
[SIP 2015] Hardware Proposal: Ads view counter for AdsBox
 
[SIP 2015] Design Proposal: Design and animated prototype
[SIP 2015] Design Proposal: Design and animated prototype[SIP 2015] Design Proposal: Design and animated prototype
[SIP 2015] Design Proposal: Design and animated prototype
 
[SIP 2015] iOS Proposal: VIPER
[SIP 2015] iOS Proposal: VIPER[SIP 2015] iOS Proposal: VIPER
[SIP 2015] iOS Proposal: VIPER
 
[SIP 2015] QA Intern: Test Automation
[SIP 2015] QA Intern: Test Automation[SIP 2015] QA Intern: Test Automation
[SIP 2015] QA Intern: Test Automation
 
[SIP 2015] Back-end Proposal: Chat System using Socket.io
[SIP 2015] Back-end Proposal: Chat System using Socket.io[SIP 2015] Back-end Proposal: Chat System using Socket.io
[SIP 2015] Back-end Proposal: Chat System using Socket.io
 
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
[SIP 2015] Marketing Proposal: Making edit flow more informative and simpler
 
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
[Sharing T3] Tình hình chiến sự Siêu anh hùng - Tú Bùi
 
[Sharing T1] How to take good photos - Anh Minh
[Sharing T1] How to take good photos - Anh Minh[Sharing T1] How to take good photos - Anh Minh
[Sharing T1] How to take good photos - Anh Minh
 
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
[Sharing T12] Tín dụng - Bí quyết tay trắng làm nên nợ nần - Minh Hòa
 
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
[Sharing T12] Một số câu chuyện về Âm lịch và Dương lịch - Xuân Quang
 
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
[2014 SSS Infographic] 2014, SSS có gì đặc biệt?
 
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
[Sharing T11] Hussar - The winged cavalry - Cường Đoàn
 
[Sharing T10] How I improved english commumication in literally 2 months
[Sharing T10] How I improved english commumication in literally 2 months[Sharing T10] How I improved english commumication in literally 2 months
[Sharing T10] How I improved english commumication in literally 2 months
 

One Step Closer To UX - Vo Hoang Chu Kiet

  • 2. Devoted Coach Account Executive Interaction Designer 2009 2012 2013 Bachelor of Psychology Võ Hoàng Chu Kiệt vohoangchukiet.kit@gmail.com
  • 3. Agenda UX 101 (45’) Break (15’) SSS’ working process UX (90’) Q&A (30’)
  • 10. Good UX = User easy to use
  • 12. 3. Information Architecture 5. User Interface (UI) 1. User Research 4. Interaction Design 6. User Testing UX Design 2. Business Understanding Good UX = User easy to use
  • 13. 1. User Research Good UX = User easy to use
  • 14. Outcome: Explore Personas Behaviour Insight Needs Good UX = User easy to use
  • 15. Good UX = User easy to use Source: google
  • 16. Or Or the rest… Good UX = User easy to use
  • 17. Fun fact 1 GoGodo oUdX U =X U =s eEra seya stoy utos euse Source: google
  • 18. Fun fact 2 Source: https://www.facebook.com/humansofsaigonn Good UX = User easy to use
  • 19. 2. Business Understanding Good UX = User easy to use
  • 20. Outcome: Understand give solution for business needs. Good UX = User easy to use
  • 21. UX User needs Business needs Good UX = User easy to use
  • 22. Before After Good UX = User easy to use
  • 23. Or Good UX = User easy to use
  • 24. ? ? Sign up Discover app Sign up Good UX = User easy to use
  • 25. 3. Information Architecture Good UX = User easy to use
  • 26. Outcome: Priority information and group by categories. Good UX = User easy to use
  • 27. How we actually read? Good UX = User easy to use
  • 28. Ngày 1 - Ghi nhận những điều biết ơn “Khi biết cách ghi nhận những gì biết ơn, cả cuộc đời tôi thay đổi.” - Willie Nelson. Có thể trong đời ta từng nghe nói đến chuyện ghi lại những điều mình biết ơn. Đó là khi ta biết bắt đầu nghĩ về những điều mình may mắn có được. Khi biết ơn về những điều mình có, dù nhỏ nhặt đến đâu, ta sẽ thấy mình bắt đầu có nhiều thứ hơn. Nếu biết trân trọng số tiền đang có, dù rất ít, tiền sẽ bắt đầu tăng lên. Nếu biết trân trọng một mối quan hệ, dù không hoàn hảo, mối quan hệ sẽ dần tốt hơn. Nếu biết trân trọng công việc đang có, dù không phải công việc mơ ước, mọi thứ cũng sẽ bắt đầu thay đổi để ta thích công việc hơn, nhiều cơ hội nghề nghiệp sẽ tự nhiên xuất hiện. Nếu không ghi nhận những điều biết ơn, ta dễ dàng mắc phải chuyện suốt ngày dò xét những thứ tiêu cực. Ta ghi nhận những thứ tiêu cực khi nói về những gì ta không có. Ta ghi nhận những thứ tiêu cực khi chỉ trích hay tìm khuyết điểm của người khác, khi bực mình cằn nhằn về kẹt xe, xếp hàng, nhà nước, không đủ tiền sống, nhiều khi còn đổ thừa thời tiết nữa. Khi ta nhắc tới, những thứ tiêu cực cũng sẽ tăng lên. Nguy hiểm hơn, khi ta nghĩ đến những thứ tiêu cực là ta đã ngăn chặn không cho những điều đáng trân trọng có chỗ xen vào. Điều đầu tiên sau mỗi sáng thức dậy bạn cần làm là Ghi Nhận Những Điều Biết Ơn. Bạn có thể viết tay ra giấy, xài máy tính hoặc viết vào sổ biết ơn hoặc nhật ký (bất cứ hình thức nào bạn cảm thấy thoải mái). Ngay bây giờ, hãy ghi lại 10 điều bạn biết ơn nhất trong cuộc đời mình. Khi viết lời cảm ơn, hãy nghĩ về LÝ DO tại sao mình biết ơn. Khi nghĩ về lý do tại sao mình biết ơn 1 điều gì đó, 1 người nào đó, 1 hoàn cảnh nào đó, ta sẽ thấy biết ơn sâu sắc hơn. Hãy nhớ phép màu của sự biết ơn sẽ đến cùng với mức độ bạn cảm nhận được.
  • 29. start Good UX = User easy to use
  • 30. Ngày 1 - Ghi nhận những điều biết ơn “Khi biết cách ghi nhận những gì biết ơn, cả cuộc đời tôi thay đổi.” - Willie Nelson. Có thể trong đời ta từng nghe nói đến chuyện ghi lại những điều mình biết ơn. Đó là khi ta biết bắt đầu nghĩ về những điều mình may mắn có được. Khi biết ơn về những điều mình có, dù nhỏ nhặt đến đâu, ta sẽ thấy mình bắt đầu có nhiều thứ hơn. Nếu biết trân trọng số tiền đang có, dù rất ít, tiền sẽ bắt đầu tăng lên. Nếu biết trân trọng một mối quan hệ, dù không hoàn hảo, mối quan hệ sẽ dần tốt hơn. Nếu biết trân trọng công việc đang có, dù không phải công việc mơ ước, mọi thứ cũng sẽ bắt đầu thay đổi để ta thích công việc hơn, nhiều cơ hội nghề nghiệp sẽ tự nhiên xuất hiện. Nếu không ghi nhận những điều biết ơn, ta dễ dàng mắc phải chuyện suốt ngày dò xét những thứ tiêu cực. Ta ghi nhận những thứ tiêu cực khi nói về những gì ta không có. Ta ghi nhận những thứ tiêu cực khi chỉ trích hay tìm khuyết điểm của người khác, khi bực mình cằn nhằn về kẹt xe, xếp hàng, nhà nước, không đủ tiền sống, nhiều khi còn đổ thừa thời tiết nữa. Khi ta nhắc tới, những thứ tiêu cực cũng sẽ tăng lên. Nguy hiểm hơn, khi ta nghĩ đến những thứ tiêu cực là ta đã ngăn chặn không cho những điều đáng trân trọng có chỗ xen vào. Điều đầu tiên sau mỗi sáng thức dậy bạn cần làm là Ghi Nhận Những Điều Biết Ơn. Bạn có thể viết tay ra giấy, xài máy tính hoặc viết vào sổ biết ơn hoặc nhật ký (bất cứ hình thức nào bạn cảm thấy thoải mái). Ngay bây giờ, hãy ghi lại 10 điều bạn biết ơn nhất trong cuộc đời mình. Khi viết lời cảm ơn, hãy nghĩ về LÝ DO tại sao mình biết ơn. Khi nghĩ về lý do tại sao mình biết ơn 1 điều gì đó, 1 người nào đó, 1 hoàn cảnh nào đó, ta sẽ thấy biết ơn sâu sắc hơn. Hãy nhớ phép màu của sự biết ơn sẽ đến cùng với mức độ bạn cảm nhận được.
  • 31. People scan it - not read Good UX = User easy to use
  • 32. Good UX = User easy to use Source: google
  • 33. Before After Good UX = User easy to use
  • 34. 4. Interaction Design Good UX = User easy to use
  • 35. Outcome: Have a big picture and dig in detail every steps can happen when user using product Good UX = User easy to use
  • 36. Good UX = User easy to use Source: http://ngochieu.com/
  • 37. “Solar system” Good UX = User easy to use
  • 38. “Galaxy” Good UX = User easy to use
  • 39. Dig in detail Source: http://dribbble.com/shots/1812505-Updated-Reservation-Interaction Good UX = User easy to use
  • 41. 5. User interface (UI) Good UX = User easy to use
  • 42. Outcome: Suit up for your product. Good UX = User easy to use
  • 43. Welcome to the fancy world Good UX = User easy to use
  • 44. Big Hero 6 Good UX = User easy to use
  • 45. Simon Hoang: behance.net/centaurus Good UX = User easy to use
  • 46. fuzel.com Good UX = User easy to use
  • 47. But sometime… Good UX = Easy to use
  • 48. Before After Good UX = User easy to use
  • 49. Expected Good UX = User easy to use Source: google
  • 50. Reality Good UX = User easy to use
  • 51. Bad UI / Good UX Good UX = User easy to use Source: 4chan.com
  • 52. 6. User testing Good UX = User easy to use
  • 53. Your thought = Assumption Good UX = User easy to use
  • 54. Outcome: Confirm user feel about your product and your thought about user behaviour. Good UX = User easy to use
  • 55. Good UX = User easy to use
  • 56. 3. Information Architecture 5. User Interface (UI) 1. User Research 4. Interaction Design 6. User Testing UX Design 2. Business Understanding Good UX = User easy to use
  • 58. Good UX = User easy to use
  • 59. Book, Article: - Don’t make me think (Steve Krug) - Design for everyday things (Donald A. Norman) - Show me the number (Stephen Few) - Steal like an artist (Austin Kleon) - medium.com - ngochieu.com Online Courses: - interaction-design.org - udemy.com - coursera.org (Human-Computer Interaction Design, Interaction Design, Gamification…)
  • 60. Break
  • 62. MVP Minimum Viable Product Source: google
  • 63. MVP Expected product Source: google
  • 64. Agile model Good UX = User easy to use Source: google
  • 66. Briefing User Journey Wireframe UI Testing 1 2 3 4 5 Good UX = User easy to use
  • 67. Workplan Good UX = User easy to use
  • 68. Briefing Ask much as you can Listen by heart Confirm technology Good UX = User easy to use
  • 69. Question for User research 1. Personas 2. Behaviour 3. Insight 4. Needs Good UX = User easy to use
  • 70. Question for User research - Who are they? - What does their want? - What are their problem? - Any app try to solve their problem? - How does they currently do this? - What is the main user you want to focus on? …
  • 71. Question for Business Understanding 1. Business model 2. Feature 3. Design Good UX = User easy to use
  • 72. Question for Business Understanding - What is your idea? - Which problem the app solve in user perspective? - Is there any similar app or competitive app exists on the market? If yes, provide some name. - Why does users will choose you? - What is your feature in MVP? …
  • 73. Task Describe your customer Good UX = User easy to use
  • 74. Question for User research - Who are they? - What does their want? - What are their problem? - Any app try to solve their problem? - How does they currently do this? - What is the main user you want to focus on? …
  • 75. User Journey Drawing Asking Confirm Good UX = User easy to use
  • 76. Outcome: Draw the main user flow and full user flow. Good UX = User easy to use
  • 77. Good UX = User easy to use
  • 78. Tools Sketch gliffy Balsamiq mockup Adobe Illustrator Good UX = User easy to use Source: google
  • 79. Task Draw a main user flow. As an user, i want to… Good UX = User easy to use
  • 80. Wireframe Drawing Research Fancy Good UX = User easy to use
  • 81. Outcome: Apply the interaction design, information architecture to simple sketch. Good UX = User easy to use
  • 82. Keep it simple first. Good UX = User easy to use
  • 83. Home Enroute Map Lê Văn Tèo 0126 9696 969 20 minutes to arrive Scroll Job: Click cancel Yes Cancel Job’s Detail Promo code Click Catergory Automatch based on bidding logic Home Total Your Address Request Map Home Total Cancel Next Your Address Catergory Timing Map Description of problem Image Request Pro Click Timing Timing Now Or Hour Day Month Catergory Điện Nước Điện lạnh Good UX = User easy to use
  • 84. Dig in detail later. Good UX = User easy to use
  • 85. USER START HERE Job Canceled Are you sure? Home Enroute Map Lê Văn Tèo 0126 9696 969 20 minutes to arrive Scroll Home Enroute Map Pro: - Name - Phone Job: - Status: En route - Time: now - Vấn đề: điện & điện lạnh - Chi tiết: Đèn không sáng, Máy lạnh cũng không mát, chắc là cúp điện Job: Address: 69/96 đường 69, phường 6, quận 9, TP HCM Cancel Click cancel Scroll back Click cancel Yes Click OK Home Repairing Map Lê Văn Tèo 0126 9696 969 PRO Your Address Request START HERE Cancel Job’s Detail Promo code Click Catergory Automatch based on bidding logic Back Edit Enroute Map Edit Pause job Cancel job Address: 69/96 đường 69, phường 6, quận 9, TP HCM Cam Toán Mẹt 0129 6969 696 Job: Repairing Swipe Repairing Bạn thấy thợ như thế nào? Review Swipe Complete Scroll up Scroll down Offline Go to user’s home Discuss a quotation and do job State: Upcoming Job completed and add to Pro’s History Home Total Map Home Total Cancel Next Your Address Catergory Timing Map Description of problem Image Request Pro Home Total - Address: 69/96 đường 69, phường 6, quận 9, TP HCM - Vấn đề: điện & điện lạnh 40s Accept Reject Home Complete Detail Map OK Lê Văn Tèo 0126 9696 969 Complete auto pop up rate and review Receive receipt from mail Add to User’s History Enroute Map Edit Address: 69/96 đường 69, phường 6, quận 9, TP HCM Cam Toán Mẹt 0129 6969 696 Job: - Status: Pending confirmation - Time: now - Vấn đề: điện & điện lạnh - Chi tiết: Đèn không sáng, Máy lạnh cũng không mát, chắc là cúp điện Auto detect location and change status become Arrived Edit Enroute Map Address: 69/96 đường 69, phường 6, quận 9, TP HCM Cam Toán Mẹt 0129 6969 696 Edit Repairing Map Address: 69/96 đường 69, phường 6, quận 9, TP HCM Cam Toán Mẹt 0129 6969 696 Complete Job Job’s Receipt Quotation Send receipt Cancel Có Sound và Rung Default Job screen, map tự direct đến đích đến Nút dạng swipe to unlock Click reject Home Total Lê Văn Tèo 4.5 Upcoming job State: Upcoming Vấn đề: điện & điện lạnh Time: 14h 15-11-2014 69/96 đường 69, phường 6, quận 9, TP HCM Home Total Lê Văn Tèo 4.5 Upcoming job Vấn đề: điện & điện lạnh Time: 14h 15-11-2014 Pro: Lê Văn Tèo Pro’s Phone: 0126 9696 969 Job: Job: Job: Repairing Complete Click Timing Timing Now Or Hour Day Month Catergory Điện Nước Điện lạnh Accept? Are you sure???? OK Cancel Click edit Repairing Good UX = User easy to use
  • 86. Fancy time Source: https://dribbble.com/shots/1623679-Open-Close?list=likes&offset=6 Good UX = User easy to use
  • 87. Fancy time Source: https://dribbble.com/shots/1081380-Close-Animations?list=searches&tag=animation&offset=43 Good UX = User easy to use
  • 88. Fancy time Source: https://dribbble.com/shots/976474-Animated-sliding-tab-bar?list=searches&tag=animation&offset=21 Good UX = User easy to use
  • 89. Tools Balsamiq mockup Sketch Adobe Illustrator Good UX = User easy to use Source: google
  • 90. UI Make a good UI Easy to communicate Good UX = User easy to use
  • 91. Make a good UI Good UX = User easy to use
  • 92. Contrast Repetition Alignment Proximity Good UX = User easy to use
  • 93. 1.Contrast Make elements easy to see Good UX = User easy to use
  • 94. Source: https://dribbble.com/ Good UX = User easy to use
  • 95. Good UX = User easy to use
  • 96. Good UX = User easy to use
  • 97. Good UX = User easy to use
  • 98. Source: https://dribbble.com/ GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 99. GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 100. http://coolors.co/ Good UX = Easy to use Good UX = User easy to use
  • 101. GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 102. 2.Repeat Make elements consistent Good Good UX UX = User = Easy easy to use to use
  • 103. GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 104. Source: https://dribbble.com/ GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 105. GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 106. 3.Alignment Make elements have a connection Good Good UX UX = User = Easy easy to use to use
  • 107. GoGodo oUdX U =X U =s eEra seya stoy utos euse Source: 9gag.com
  • 108. Source: https://dribbble.com/ GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 109. a Good UX = Easy to use a a a b b a b b Source: https://dribbble.com/ Good UX = User easy to use
  • 110. 4.Proximity Make elements have a “family” Good Good UX UX = User = Easy easy to use to use
  • 111. Source: https://dribbble.com/ GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 112. Contrast Repetition Alignment Proximity Good Good UX UX = User = Easy easy to use to use Source: ngochieu.com
  • 113. Easy to communicate It’s all about PSD file Good Good UX UX = User = Easy easy to use to use
  • 114. Separate PSD files - Name it Good Good UX UX = User = Easy easy to use to use
  • 115. Try this Not this Good Good UX UX = User = Easy easy to use to use
  • 116. GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 117. Store assets relative to psd files Good Good UX UX = User = Easy easy to use to use
  • 118. Try this Not this Good Good UX UX = User = Easy easy to use to use
  • 119. Make a template for UI elements Good Good UX UX = User = Easy easy to use to use
  • 120. GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 121. Name layers - Be accurate Use folders - Name it too Good Good UX UX = User = Easy easy to use to use
  • 122. Not this Try this Good Good UX UX = User = Easy easy to use to use
  • 123. Save screenshots - Same name with the folder Good Good UX UX = User = Easy easy to use to use
  • 124. PSD Finder Good Good UX UX = User = Easy easy to use to use
  • 125. 1. Separate PSD files - Name it 2. Store assets relative to psd files 3. Make a template for UI elements 4. Name layers - Be accurate 5. Use folders - Name it too 6. Save screenshots - Same name with the folder Good Good UX UX = User = Easy easy to use to use
  • 126. Development time Checking Testing Communicate Good Good UX UX = User = Easy easy to use to use
  • 127. User testing Watching Listening Analytic Good Good UX UX = User = Easy easy to use to use
  • 128. Outcome: Confirm user feel about your product and your thought about user behaviour. Good Good UX UX = User = Easy easy to use to use
  • 129. GoGodo oUdX U =X U =s eEra seya stoy utos euse
  • 130. Briefing User Journey Wireframe UI Testing 1 2 3 4 5 Good UX = User easy to use