GETTING TO KNOW

Credit: HaDTV- Aug. 2019

1
Agenda
1. UX Overview

2. UX Glossary

3. User Usability

4. UX trending 2019

5. UI trending 2019

6. To be continue…

2
3
1. Useful – Tính hữu dụng

2. Usable – Tính khả dụng

3. Desirable – Kì vọng

4. Findable – Tính nhận biết

5. Accessible - Tính thực thi

6. Credible – Tính tin tưởng

4
 What UXD do? …provide a positive experience for the user 

UXD UID IAD IXD

o User & Product research o Understand the design o Create structure of o Transform GUI into
o Design, write UX copy guideline, user workflow content for website/app intuitive designs
(prototype/wireframe) o Follow the pattern design o Deliver sitemap, o Make a concept or
o Test & validate (style guidlines) hierarchies, simulation of user
o Present the design solution o Focus on the user’s visual categorization, interaction on screen
to the business experience navigation & metadata o Deliver the mockup with
o To be the voice of the user, o Deliver the GUI, UI animation/motion of
balancing the users needs elements screens, frames
with the business goals

what, where and how how they act and react

 how user feels about it how it is organized
elements work on it to each other.

5 UX Overview
 UX Design process

6 UX Overview
 How UXD work?

7 UX Overview
UX Glossary
BASIC RESEARCH STRATEGY DESIGN

Lean UX Card Sorting Customer jouney map (CJM) Adaptive web design
Usability Competitor analysis Experience map Collaborative design
User experience (UX) Concept modeling Information architechture (IA) Diary study
User interface (UI) Content audit Interaction model Hi-fidelity prototype
Questionnaire Personas Human-centered design
Stakeholder interviews Sitemap Interaction design
TESTING
Tree testing Storyboard Iterative design
5-second test User interview User Journey Low-fidelity prototype
Usability test User research Mood board
User feedback loop User survey Paper prototype
Prototype
DEVELOPMENT Responsive design
Beta launch User flows
Agile software development methodology
Usability engineering Visual design
Waterfall model of software development
Wireframe 8
 Stakeholder interview / Phỏng vấn các bên liên quan
Mục đích: Tìm hiểu & xác định các vấn đề/ tiêu chí
For an interview to succeed you need… an interviewee.
• Mục tiêu business là gì? (cân đối với nhu cầu
In most cases the choice is simple — it’s normally from 1
của user to 2 founders that create the product.
• Khách hàng mục tiêu là ai?
• Đối thủ là ai?
• Đã từng có nghiên cứu hay bản thiết kế chưa?
• Các giới hạn về mặt công nghệ?
• Sự tương tác các bên liên quan ntn?
• Thông tin liên quan tới dự án (dữ liệu, nhân sự,
deadline…)

9 UX Glossary
 Competitor Analysis / Phân tích đối thủ cạnh tranh

Mục đích
• Hiểu rõ vị trí của sản phẩm trên thị trường
• Phân tích điểm mạnh để tìm giải pháp cho
vấn đề tính khả dụng người dùng (user
usability)
• Xác định mục tiêu phát triển sản phẩm cho
kế hoạch sắp tới
• Tìm bằng chứng tin cậy khi thực hiện thay
đổi sản phẩm

10 UX Glossary
 Card sorting / Phân loại thẻ (low-tech)

Mục đích
• Xác định mục tiêu/vấn đề cần thảo luận
• Định hình nhu cầu của user
• Phân nhóm & lên kế hoạch giải quyết vấn đề
• Hệ thống hóa các khái niệm, thuật ngữ

11 UX Glossary
 User research / Nghiên cứu người dùng
• Tìm hiểu nhu cầu, hành vi tương tác của user trên
sản phẩm
• Phân tích & tiếp nhận phản hồi của user
• Tìm giải pháp cho các vấn đề trải nghiệm của user

Phương thức: Tùy thuôc vào loại hệ thống (website,

ứng dụng…), thời gian & môi trường để chọn cách
nghiên cứu khác nhau

Tham khảo các Phương thức

12 UX Glossary
 Methods Know Your User Content Design Test & Refine

Card Sorting  Allows users to group your site’s information. This helps ensure that the site structure matches the way YES YES NO YES
users think
Enable you to observe users in their natural environment, giving you a better understanding of the way
Contextual Interviews users work YES NO NO NO

A testing method focused on navigation, which can be performed on a functioning website, a prototype,
First Click Testing or a wireframe
NO YES YES YES

Focus Groups Moderated discussion with a group of users, allow you to learn about user attitudes, ideas, and desires YES YES YES NO

Heuristic Evaluation A group of usability experts evaluating your website against a list of established guidelines YES NO NO YES
/Expert Review
One-on-one discussions with users show you how a particular user works. They enable you to get
Individual Interviews detailed information about a user's attitudes, desires, and experiences YES YES YES YES

Parallel Design A design methodology that involves several designers pursuing the same effort simultaneously, but NO NO YES NO
independently, with the intention to combine the best aspects of each for the ultimate solution

The creation of a representative user based on available data and user interviews.  Though the personal
Personas details of the persona may be fiction, the information used to create the user type is not.
YES NO NO NO

Allows the design team to explore ideas before implementing them by creating a mock-up of the site. A
Prototyping  NO NO YES YES
prototype can range from a paper mock-up to interactive html pages
A series of questions asked to multiple users of your website, help you learn about the people who visit
Surveys  YES YES YES YES
your site
System Usability Scale SUS is a technology independent ten item scale for subjective evaluation of the usability NO NO NO YES
(SUS)
 
Task Analysis Involves learning about user goals, including what users want to do on your website, and helps you YES NO NO NO
understand the tasks that users will perform on your site

Usability Testing Identifies user frustrations and problems with your site through one-on-one sessions where a "real-life" YES YES YES YES
user performs tasks on your site
Provide a description of how users use a particular feature of your website. They provide a detailed look
Use Cases  at how users interact with the site, including the steps users take to accomplish each task
NO YES YES NO

13 UX Glossary
 Personas /Chân dung người dùng

Nhân vật hư cấu (thông tin) có nét tính cách đặc trưng,
đại diện cho 1 kiểu hình người dùng

Mục đích:
• Xác định đối tượng khách hàng cần đáp ứng
• Hiểu rõ hơn nhu cầu, hành vi tương tác của người
dùng trên sản phẩm
• Đưa ra nhận định & đánh giá khách quan

14 UX Glossary
 User flows / Lưu đồ người dùng

• Sơ đồ dẫn dắt user trải nghiệm sản phẩm

• Thể hiện các bước/nhiệm vụ mà user phải trải
qua/hoàn thành để đạt các mục tiêu khác nhau

Mục đích:
• Tìm những hành vi của user có thể diễn ra trong
quá trình tương tác
• Xác định những vấn đề mà user có thể gặp phải
> tìm giải pháp tối ưu hóa trải nghiêm của user

15 UX Glossary
 Chỉ là Sitemap nha!!!

16 UX Glossary
 Này là task flow

17 UX Glossary
 Đây mới là user flow nè!!!

18 UX Glossary
 user flow - phiên bản “làm màu”

19 UX Glossary
 User Journey / Kịch bản của người dùng

Giả định cách thức user tương tác để đạt mục tiêu
Tình huống thường diễn ra từ 4 – 12 bước

Mục đích:
• Tìm hiểu nhu cầu của user (expectation)
• Tìm các điểm hạn chế làm user thất vọng (pain
point)

20 UX Glossary
 Storyboard / Bảng phân cảnh (low-tech)

Ngữ cảnh hiện thực gắn liền với câu

chuyện của user

Mục đích: Mô tả bối cảnh trải nghiệm của

user với sản phẩm

21 UX Glossary
 Customer Journey Map
Bản đồ hành trình
Mục đích:
• Thể hiện cách di chuyển & trải nghiệm của user
qua từng giai đoạn tương tác
• Xác định điểm gắn kết (touchpoints) giữa khách
hàng vs doanh nghiệp
• Tổng hợp dữ liệu về personas & hành vi của
user

22 UX Glossary
23 UX Glossary
 Wireframe / Bản phác thảo

Bản thiết kế cơ bản về cấu trúc và các thành phần

của giao diện người dùng

Mục đích:
• Nhanh chóng thể hiện cấu trúc tổng quan, mô
tả chức năng giao diện người dùng
• Dễ dàng chỉnh sửa trong quá trình nghiên cứu
& phát triển
• Xác định nội dung quan trọng trên từng màn
hình (CTA, button...)

24 UX Glossary
 Prototype/ Bản mẫu mô phỏng
Wireframe > Prototype > Mockup
Mục đích:
• Bản mẫu cho phép người dùng tương tác với
giao diện
• Đánh giá tính khả dụng của giao diện trước khi
hiện thực hóa

Công cụ hỗ trợ:
• Online: Invision, UXPin, Webflow
• Offline: Axure, Proto,Framer, Adobe XD,…

25 UX Glossary
 Wireframe <> Prototype

26 UX Glossary
 Adaptive web design/ Thiết kế web tương thích
Mục đích:
• Tạo ra trải nghiệm tốt nhất cho web user trên
thiết bị di động (mobile version)
• Cải thiện trải nghiệm của user trên giao diện
reponsive
Phương thức:
• Dựa trên dữ liệu phân tích người dùng để lựa
chọn thiết bị thông dụng nhất
• Bắt đầu thiết kế trên màn hình có độ phân giải
320 - Mobile 760 - Tablet 1200 - PC
+ kích thước tối thiểu 480 - Mobile 960 - Tablet 1600 – PC with widescreen

27 UX Glossary
 Moodboard / Bảng cảm xúc

Tập hợp những hình ảnh ngẫu nhiên tạo nên cảm
xúc, truyền cảm hứng cho thiết kế

Mục đích:
• Khơi gợi ý tưởng sáng tạo cho các nhà thiết kế
• Tạo ra những pattern design cho UI: Color
palette, typo, shape, layout…

28 UX Glossary
 Visual design / Thiết kế trực quan

• Là cách sử dụng hình ảnh, hình khối, màu sắc, kiểu

chữ & hình thức thiết kế để thu hút thị giác của
người dùng
• Giải quyết các vấn đề giao diện, nâng cao tính khả
dụng, cải thiện trải nghiệm của user
• Nắm bắt xu hướng, thị hiếu thẩm mỹ của khách hàng

29 UX Glossary
 Interaction Design / Thiết kế tương tác

Mục đích:
• Giả lập hành vi của người dùng trên màn hình
thật trực quan, sinh động
• Thể hiện sự tương tác, cách phản hồi của giao
diện lên từng hành vi người dùng
• Thử nghiệm & đánh giá các giải pháp giao diện
• Lên ý tưởng & kế hoạch nghiên cứu/phát triển
sản phẩm trong giai đoạn kế tiếp

30 UX Glossary
 Usabilty / Tính khả dụng

• Thân thiện: User dễ dàng làm quen & trải nghiệm

với sản phẩm ngay lần đầu tiếp xúc
• Hiệu quả: Trải nghiệm giúp user dễ dàng đạt
được mục tiêu của mình
• Dễ nhớ: Trải nghiệm giúp user dễ sử dụng & dễ
ghi nhớ cho các lần truy cập tiếp theo

31 UX Glossary
32
33 User Usability
34 User Usability