Báo cáo cuối kỳ học phần Thực hành chuyên sâu (khoa Đa phương tiện, PTIT)

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA ĐA PHƯƠNG TIỆN

THỰC HÀNH CHUYÊN SÂU
Đề tài:
NGHIÊN CỨU LÝ THUYẾT DESIGN SYSTEM VÀ ÁP DỤNG
VÀO
THIẾT KẾ ỨNG DỤNG THUÊ NHÀ TRỌ OHANA

Giảng viên hướng dẫn:
Tuyết Mai
Sinh viên thực hiện:
Họ và tên:
Mã sinh viên:
Lớp niên chế:
Nhóm mơn học:
Hệ: Đại học chính quy

ThS. Nguyễn Thị


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

Hà Nội, tháng 6 năm 2022

SVTH:

2


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

LỜI CẢM ƠN
Thực hành chuyên sâu là một học phần thú vị, vô cùng bổ ích và có tính thực tế
cao. Học phần này đảm bảo cung cấp một lượng lớn kiến thức cũng như kỹ năng gắn
liền với nhu cầu thực tiễn của mỗi sinh viên theo học chuyên ngành Thiết kế Đa
phương tiện thuộc khoa Đa phương tiện, Học viện Công nghệ Bưu chính Viễn thơng.
Trong suốt q trình nghiên cứu và thực hiện báo cáo này, bên cạnh những nỗ
lực của bản thân, em đã nhận được sự hỗ trợ, hướng dẫn nhiệt tình của q thầy cơ
trong khoa. Em xin gửi lời cảm ơn đến ban lãnh đạo cùng các cán bộ khoa Đa phương
tiện, Học viện Công nghệ Bưu chính Viễn thơng đã tổ chức và quản lý hoạt động dạy
và học một cách hiệu quả, giúp em yên tâm trong suốt quá trình thực hiện đồ án này.
Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến ThS. Nguyễn Thị Tuyết Mai đã trực tiếp
hướng dẫn, truyền đạt những kiến thức quý báu cho em trong suốt thời gian thực hiện
đồ án vừa qua.
Do điều kiện về thời gian cũng như kinh nghiệm thực tế và vốn kiến thức còn
nhiều hạn chế, báo cáo này của em khơng tránh khỏi những thiếu sót. Em rất mong sẽ
được các thầy cơ góp ý, chỉ bảo để từ đó em hồn thiện thêm các kỹ năng và kiến thức
của mình, phục vụ cho học tập và cơng việc sau này.
Em xin chân thành cảm ơn!
Sinh viên thực hiện

SVTH:

i


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

MỤC LỤC
LỜI CẢM ƠN.......................................................................................i

DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT...........................iv
DANH MỤC BẢNG BIỂU VÀ HÌNH ẢNH ...................................v
MỞ ĐẦU..............................................................................1
CHƯƠNG 1: TỔNG QUAN VỀ DESIGN SYSTEM TRONG THIẾT KẾ
GIAO DIỆN.........................................................................................5
1.1 Tổng quan về thiết kế UX/UI.........................................5
1.1.1 Thiết kế UX (User Experience)...............................................5
1.1.2 Thiết kế UI (User Interface)....................................................6
1.2 Tổng quan về ứng dụng di động và thiết kế UX/UI trong
ứng dụng di động................................................................7
1.2.1 Tổng quan về ứng dụng di động............................................7
1.2.2 Thiết kế UX/UI trong ứng dụng di động.................................8
1.3 Tổng quan về Design System trong thiết kế UX/UI.........9
1.3.1 Khái niệm Design System......................................................9
1.3.2 Lợi ích khi sử dụng Design System......................................10
1.3.3 Các thành phần của Design System....................................11
1.4 Phương pháp Atomic Design trong xây dựng Design
System.............................................................................16
1.4.1 Định nghĩa Atomic Design...................................................16
1.4.2 Các thành phần của Atomic Design.....................................16
1.4.3 Ưu điểm của phương pháp Atomic Design..........................17
1.5 Phương pháp xây dựng Design System........................18
1.5.1 Quy trình xây dựng Design System.....................................18
1.5.2 Các hướng tiếp cận đối với một Design System..................22
1.6 Tiểu kết.....................................................................23
CHƯƠNG 2: NGHIÊN CỨU VỀ ỨNG DỤNG THUÊ PHÒNG TRỌ
OHANA.............................................................................25
2.1 Tổng quan thị trường cho thuê phòng trọ tại Hà Nội. . . .25

SVTH:

ii


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

2.2 Nghiên cứu về ứng dụng thuê phòng trọ Ohana...........25
2.2.1 Giới thiệu chung..................................................................25
2.2.2 Nhiệm vụ chính của ứng dụng.............................................26
2.2.3 Các ứng dụng tương tự trên thị trường................................26
2.2.4 Nghiên cứu người dùng........................................................27
2.2.5 Các sản phẩm đầu ra từ kế quả nghiên cứu........................30
CHƯƠNG 3: ÁP DỤNG LÝ THUYẾT DESIGN SYSTEM ĐỀ XUẤT
GIẢI PHÁP THIẾT KẾ ỨNG DỤNG THUÊ PHÒNG TRỌ OHANA. .34
3.1 Đề xuất giải pháp thiết kế ứng dụng thuê nhà Ohana...34
3.2 Thiết kế giao diện ứng dụng Ohana.............................34
3.2.1 Atoms..................................................................................34
3.2.2 Molecules.............................................................................38
3.2.3 Organisms............................................................................39
3.2.4 Templates............................................................................40
3.2.5 Pages...................................................................................41
KẾT LUẬN, KIẾN NGHỊ........................................................43
TÀI LIỆU THAM KHẢO.........................................................44

SVTH:

iii


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

SVTH:

iv


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT

STT
1

Chữ viết tắt
UI

Viết đầy đủ
User Interface

2

UX

User Experience

SVTH:

Nghĩa
Giao diện người
dùng

Trải nghiệm người
dùng

v


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

DANH MỤC BẢNG BIỂU VÀ HÌNH ẢNH
Bảng biểu:
Bảng 2.1 Kết quả khảo sát người dùng
...................................................................................................................
29

Hình ảnh:
Hình 1.1 Biểu đồ thể hiện mối quan hệ giữa các thành phần trong một Design System của
Nate Baldwin............................................................................................................................11
Hình 1.2 Style Guide của Mailchimp
...................................................................................................................
12
Hình 1.3 Component Library của hệ thống Material Design..................................................13
Hình 1.4 Design System Carbon của IBM...............................................................................14
Hình 1.5 Design System Atlassian............................................................................................15
Hình 1.6 Phương pháp Atomic Design của Brad Frost...........................................................16
Hình 1.7 Mơ hình đơn lẻ...........................................................................................................20
Hình 1.8 Mơ hình tập trung......................................................................................................20
Hình 1.9 Mơ hình liên kết.........................................................................................................21
Hình 1.10 Trang tích hợp “Có gì mới” trong Design System Lightning của Salesforce.........22
Hình 1.11 3 hướng tiếp cận để sử dụng Design System...........................................................23
Hình 2.1 Những ghi chú quan trọng sau phỏng vấn #1

...................................................................................................................
30
Hình 2.2 Những ghi chú quan trọng sau phỏng vấn #2
...................................................................................................................
30
Hình 2.3 Empathy Map
...................................................................................................................
31
Hình 2.4 User Persona #1
...................................................................................................................
32
Hình 2.5 User Persona #2
...................................................................................................................
32
Hình 2.6 Kiến trúc thơng tin của ứng dụng
...................................................................................................................
33
SVTH:

vi


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

Hình 3.1 Logo của ứng dụng Ohana
...................................................................................................................
35
Hình 3.2 Font chữ được sử dụng trong ứng dụng
...................................................................................................................
35

Hình 3.3 Bảng màu của ứng dụng Ohana
...................................................................................................................
36
Hình 3.4 Các biểu tượng được sử dụng trong ứng dụng
...................................................................................................................
37
Hình 3.5 Hệ thống nút bấm
...................................................................................................................
38
Hình 3.6 Một tab thơng tin trong ứng dụng
...................................................................................................................
38
Hình 3.7 Hệ thống trường nhập văn bản
...................................................................................................................
39
Hình 3,8 Menu điều hướng của ứng dụng
...................................................................................................................
40
Hình 3,9 Template màn hình đăng nhập
...................................................................................................................
41
Hình 3,10 Màn hình đăng nhập của ứng dụng
...................................................................................................................
42

SVTH:

vii

THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

MỞ ĐẦU
1. Lý do chọn đề tài
Design System (Hệ thống thiết kế) giúp các doanh nghiệp duy trì tính
nhất qn trên nhiều sản phẩm, dịch vụ. Mặc dù thường được kết
hợp với visual guidelines và thư viện components, các Design
System lại hoàn toàn khác nhau. Khi ngày càng có nhiều cơng ty
nhận ra giá trị của tính đồng bộ trong thiết kế, các nhóm Design
System mới được tạo ra đang thiết lập các phương pháp tốt nhất
để đảm bảo sự phù hợp lâu dài cho công việc thiết kế của các công
ty, tổ chức.
Design System có tầm quan trọng to lớn là thế nhưng đứng trước một
thực trạng là hiện nay có rất nhiều sản phẩm kỹ thuật số (ứng
dụng/website) lại chưa thực sự được đầu tư nghiêm túc cho việc
thiết lập mô hình Design System. Thậm chí nhiều cơng ty, tổ chức
cịn chưa nhận ra lợi ích của Design System hay cịn loay hoay
trong việc tạo dựng mơ hình Design System cho chính cơng ty, tổ
chức mình. Từ đó dẫn đến một hệ quả là rất nhiều ứng dụng và
website chưa đảm bảo tối ưu về mặt giao diện, không đem lại được
trải nghiệm tốt cho người dùng hay gây ra các vấn đề về khả năng
sử dụng khiến doanh thu của công ty, tổ chức bị giảm mạnh.
Tại thị trường Việt Nam, các ứng dụng về cho thuê nhà trọ gần đây mới
bắt đầu nổi lên một số sản phẩm. Tuy nhiên, các sản phẩm này
gặp rất nhiều lỗi về thiết kế giao diện và cũng chưa thể tạo ra các
hiệu quả nổi bật trên thị trường ứng dụng. Ngay kể cả ứng dụng
cho thuê nhà trọ có thể nói là nổi tiếng nhất Việt Nam đến thời
điểm hiện tại cũng không tránh khỏi các vấn đề này.
Từ đây, đề tài nghiên cứu lý thuyết Design System và áp dụng vào
thiết kế ứng dụng thuê nhà trọ Ohana hứa hẹn sẽ khai thác được

nhiều khía cạnh thú vị, hi vọng sẽ đưa ra được một số giải pháp
mới trong việc ứng dụng Design System trong thiết kế giao diện
web/app.
2. Tính khoa học và khả thi của đề tài
- Tính khả thi:
Sau 4 năm học tập và rèn luyện tại trường, em đã có những tích luỹ
về kiến thức và kỹ năng như sau:
 Về kiến thức
o Nắm được các kiến thức cơ bản về tư duy thiết kế

SVTH:

viii


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

o Sau khi được học các mơn như Cơ sở tạo hình, Mỹ thuật
nâng cao, Nghệ thuật đồ hoạ chữ,... em dần hình thành mắt
thẩm mỹ, biết phân tích các sản phẩm thiết kế khác để có
thể đúc kết kinh nghiệm cho bản thân.
o Được cung cấp các kiến thức cơ bản về lập trình và xây
dựng phần mềm sau khi được học qua các học phần Ngơn
ngữ lập trình Java, C++, Nhập môn công nghệ phần mềm,…
o Được trang bị những kiến thức nền tảng về lĩnh vực UX/UI
sau khi được học qua các học phần Thiết kế web cơ bản,
Thiết kế tương tác đa phương tiện và thiết kế tương tác đa
phương tiện nâng cao.
o Có khả năng đọc hiểu tiếng Anh phục vụ cho việc tham khảo
các tài liệu quốc tế.

 Về kỹ năng
o Có khả năng sử dụng các công cụ như Adobe Photoshop,
Adobe Illustrator, Adobe XD, Figma.
o Được rèn luyện và học tập các kỹ năng về tư duy và các kỹ
năng mềm. Hình thành kỹ năng tìm tịi, phân tích và nghiên
cứu tài liệu tham khảo từ nhiều nguồn khác nhau cũng như
đã được thực hiện một số báo cáo nghiên cứu sau khi học
qua học phần Phương pháp luận nghiên cứu khoa học.
o Có thể thiết kế được các sản phẩm về bộ nhận diện thương
hiệu, bộ ấn phẩm truyền thông, thiết kế web, UX/UI trong
khuôn khổ các mơn học trong trường.
o Dần hình thành khả năng đánh giá tính cơng năng và tính
thẩm mỹ của các sản phẩm đa phương tiện.
- Tính khoa học:
 Để triển khai đề tài, tác giả sẽ tham khảo các mơ hình Design
System đã có sẵn và được đơng đảo các nhà thiết kế đánh giá
cao như Material Design của Google; Carbon của IBM; Fluent
của Microsoft; Polaris của Shopify; Spectrum của Adobe; Ant
Design…. Ngồi ra cịn tham khảo các bài báo được đăng tải
trên các trang web, diễn đàn, tổ chức uy tín trong lĩnh vực
UI/UX như Nielsen Norman Group, Smashing Magazine,
designbetter.co,…
 Tình hình nghiên cứu về Design System tại Việt Nam hiện tại
có thể cho là chưa đưa ra được tài liệu nào uy tín. Trong khi
đó, các tài liệu quốc tế cũng chưa có nhiều. Qua tìm hiểu, tác
giả đã lựa chọn ra một cuốn sách có sự đầu tư và độ uy tín cao

SVTH:

ix

THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

trong lĩnh vực nghiên cứu về Design System đó là cuốn
“Design Systems Handbook” viết bởi Marco Suarez, Jina Anne,
Katie Sylor-Miller, Diana Mounter và Roy Stanfield, được phát
hành bởi Invision. Cuốn sổ tay này hướng dẫn người đọc về
các phương pháp tốt nhất để lập kế hoạch, phát triển, xây
dựng và triển khai Design System, truyền tải những hiểu biết
sâu sắc và kinh nghiệm thực tế từ các chuyên gia đã từng làm
việc tại Invision.
 Trong cuốn “Design Systems: A Practical Guide to Creating
Design Languages for Digital Products”, tác giả Alla
Kholmatova, trước đây là nhà thiết kế chính tại FutureLearn,
đã chia sẻ cách tiếp cận và các khía cạnh chính của một
Design System hiệu quả. Những chia sẻ này dựa trên kinh
nghiệm của Alla thơng qua các nghiên cứu điển hình tại
AirBnB, Atlassian, Eurostar, TED và Sipgate, cộng với 18 tháng
nghiên cứu và phỏng vấn – trong nỗ lực tìm ra những gì nên
và khơng nên có trong các sản phẩm thực tế.
 Tác giả cũng sẽ khám phá mối quan hệ của Design System với
phương pháp thiết kế Atomic Design dựa trên các lý thuyết mà
Brad Frost đưa ra trong cuốn sách “Atomic Design”. Cuốn sách
này trình bày một mơ hình tư duy liên hệ giao diện người dùng
với hệ thống phân cấp thơng minh. Bắt đầu với những khía
cạnh cơ bản nhất của thiết kế, Frost cung cấp cho người đọc
một khuôn khổ để mô tả cấu trúc nguyên tử của một thành
phần thiết kế. Sau đó, ơng trình bày chi tiết các tiêu chí quan
trọng của việc xây dựng các thư viện mẫu hiệu quả và đưa ra

các lời khuyên về bảo trì cho các Design System.
3. Mục đích và nhiệm vụ nghiên cứu
- Mục đích: Nghiên cứu nhằm mục đích bóc tách các khía cạnh cơ
bản nhất về Design System để từ đó áp dụng vào xây dựng mơ
hình Design System cho ứng dụng Ohana một cách hiệu quả
nhất.
- Nhiệm vụ: Nghiên cứu về Design System, lợi ích, tầm quan
trọng, các thành phần của nó và ứng dụng trong thiết kế giao
diện người dùng. Ngồi ra cịn phân tích và đưa ra hướng thiết
kế Design System phù hợp nhất cho ứng dụng thuê nhà Ohana.
4. Đối tượng và phạm vi nghiên cứu
- Đối tượng nghiên cứu: Ứng dụng thuê nhà trọ Ohana, mơ hình
Design System và phương pháp Atomic Design
SVTH:

x


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

- Phạm vi nghiên cứu: Lĩnh vực UI/UX, mơ hình Design System và
giao diện các ứng dụng cho thuê nhà hiện có trên thị trường
5. Phương pháp nghiên cứu
- Sử dụng phương pháp nghiên cứu thứ cấp (Secondary
Research), phương pháp phân tích, tổng hợp để thu thập, tổng
hợp và phân tích từ các tài liệu đã được phát hành từ đó rút ra
những kết luận cụ thể áp dụng cho đề tài.
- Sử dụng phương pháp hệ thống để phân loại và hệ thống hóa lý
thuyết, sắp xếp các tài liệu khoa học theo từng mặt, từng đơn vị,
từng vấn đề có cùng dấu hiệu bản chất, cùng một hướng phát

triển cũng như chuẩn bị tri thức thành một hệ thống trên cơ sở
một mơ hình lý thuyết làm sự hiểu biết về đối tượng (mà ở đây là
mơ hình Design System) một cách tổng thể hơn.
- Sử dụng phương pháp tổng kết thực tiễn đề làm sáng tỏ, phong
phú thêm những vấn đề về lý luận

MỜI BẠN TẢI VỀ ĐỂ XEM TIẾP

SVTH:

xi


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

6. Ý nghĩa lý luận và giá trị thực tiễn của đề tài
- Đề tài nghiên cứu mang lại một số ý nghĩa thực tiễn cho các nhà thiết kế, các
công ty, doanh nghiệp đang có nhu cầu thiết kế, phát triển ứng dụng nói chung và
cho Ohana nói riêng. Kết quả nghiên cứu này cũng giúp cho các nhà thiết kế, các
công ty, doanh nghiệp có thể xem xét, điêu chỉnh Design System cho sản phẩm
của mình để tối ưu hóa sản phẩm.
- Nghiên cứu này cho thấy tầm quan trọng, đưa ra quy trình triển khai Design
System và các ứng dụng của nó trong q trình thiết kế ứng dụng nói chung.
7. Kết cấu đề tài
Đề tài được kết cấu thành 3 chương như sau:
-

Chương 1: Tổng quan về Design System trong thiết kế giao diện
Chương 2: Nghiên cứu về ứng dụng thuê phòng trọ Ohana
Chương 3: Áp dụng lý thuyết Design System đề xuất giải pháp thiết kế ứng dụng

thuê phòng trọ Ohana

SVTH:

xii


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

CHƯƠNG 1: TỔNG QUAN VỀ DESIGN SYSTEM TRONG
THIẾT KẾ GIAO DIỆN
1.1 Tổng quan về thiết kế UX/UI
1.1.1 Thiết kế UX
Thuật ngữ “Trải nghiệm người dùng” được đưa ra lần đầu tiên bởi tiến sĩ Donald
Norman. Ông là nhà nghiên cứu khoa học nhận thức, cũng là người đầu tiên
nói về tầm quan trọng của phương pháp thiết kế lấy người dùng làm trung
tâm. Trong bài đăng có tên “The Definition of User Experience (UX)” đăng
trên trang web Nielsen Norman Group, tác giả Don Norman và Jakob
Nielsen đã tóm tắt khái niệm UX như sau: "Trải nghiệm người dùng bao
gồm tất cả các khía cạnh tương tác của người dùng cuối với công ty, dịch
vụ và sản phẩm của công ty.” Trang bách khoa tồn thư mở Wikipedia cũng
trích dẫn về khái niệm này: “Trải nghiệm người dùng là trải nghiệm tổng
thể của người dùng với một sản phẩm, trang web, ứng dụng trên thiết bị di
động hoặc dịch vụ cụ thể. UX không chỉ bao gồm việc sử dụng các tính
năng mà cịn bao gồm cả những khía cạnh khác như kinh nghiệm, cảm xúc,
giá trị nhận được khi tương tác với sản phẩm, trang web, ứng dụng, dịch vụ
đó.”
Thiết kế UX liên quan đến nhu cầu của người dùng, nó nâng cao trải nghiệm của
người sử dụng về một hệ thống, lấy người dùng làm trung tâm để phát triển.
Những nhà thiết kế website/app cần phải để tâm tới các tính năng, khả năng

sử dụng và truy cập web một cách nhanh chóng cho người dùng trước khi
thiết kế giao diện và nghiên cứu thói quen của họ.
Khi xây dựng một website hay ứng dụng cho bất kỳ dự án nào, nhà thiết kế phải
đặt mình vào vị trí của người sử dụng, của khách hàng để đảm bảo rằng, thứ
họ xây dựng nên là cái mà người dùng muốn sử dụng. Khi nhà thiết kế đặt
mình ở vị trí đó sẽ giúp họ nhận thức rằng người dùng có cảm nhận như thế
nào về sản phẩm của mình. Từ đó tối ưu hóa thiết kế, và các tính năng của
sản phẩm nhằm đảm bảo tính thẩm mĩ và khả năng tương tác tốt nhất.
Chúng ta đang sống ở thời đại công nghệ số, khi mà công nghệ ngày càng phát
triển và phổ biến. Các trang web và ứng dụng ngày càng nhiều tính năng
phức tạp, cơng nghệ hiện đại hơn, khả năng tương tác cao hơn, vì thế, địi
hỏi sự đơn giản và thân thiện trong sử dụng - phải có thiết kế trải nghiệm
người dùng.
Ngồi ra, các loại trình duyệt, thiết bị truy cập internet cũng đa dạng hơn, từ máy
tính đến các thiết bị di động, thậm chí cả tivi và nhiều thiết bị khác, nhất là
trong thời đại mà người ta gọi là “ Internet everything” như hiện nay. Nhà
thiết kế cần nhận thức được khả năng tiếp cận giữa người dùng tới các trang
SVTH:

xiii


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

web, ứng dụng, phần mềm là rất đa dạng. Việc nghiên cứu và ứng dụng UX
chính là cách để giúp người dùng cảm thấy dễ dàng tiếp cận và tương tác
với trang web, ứng dụng.

1.1.2 Thiết kế UI
Trong bài viết “User Interface (UI)” đăng trên trang web TechTarget, tác giả

Fred Churchville, đưa ra định nghĩa UI như sau: “Giao diện người dùng
(UI) là điểm giao tiếp và tương tác giữa con người với máy tính trong một
thiết bị. Nó có thể bao gồm màn hình hiển thị, bàn phím, chuột và thậm chí
cả ngoại hình của chiếc máy tính. Thơng qua UI, người dùng tương tác với
một ứng dụng hoặc một trang web.”
Trang web Interaction Design Foundation đưa ra khái niệm cho thiết kế giao diện
người dùng “là quy trình mà nhà thiết kế sử dụng để xây dựng giao diện
trong phần mềm hoặc thiết bị máy tính, tập trung vào ngoại hình hoặc
phong cách. Các nhà thiết kế hướng tới việc tạo ra các giao diện mà người
dùng cảm thấy dễ sử dụng và hài lòng. Thiết kế giao diện người dùng đề
cập đến giao diện người dùng đồ họa và các dạng khác — ví dụ: giao diện
điều khiển bằng giọng nói.”
Giao diện người dùng rất quan trọng trong việc đáp ứng các kỳ vọng của người
dùng và hỗ trợ việc sử dụng hiệu quả của người dùng với một trang web
hay ứng dụng. Giao diện người dùng được thiết kế tốt sẽ tạo ra các tương
tác hiệu quả giữa người dùng và sản phẩm thơng qua việc sử dụng hình ảnh
phù hợp, thiết kế rõ ràng và khả năng phản hồi.
Khi thiết kế giao diện người dùng cho trang web hay ứng dụng, điều quan trọng
là phải xem xét nhu cầu của người dùng về khả năng truy cập, tính thẩm mỹ
trực quan và tính dễ sử dụng. Sự kết hợp tối ưu giữa đồ họa đẹp mắt và khả
năng phản hồi hiệu quả sẽ cải thiện hiệu suất sử dụng sản phẩm.
Thiết kế UI nên được tuân thủ theo các quy tắc, quy chuẩn như:
- Nguyên tắc cấu trúc: Tổ chức giao diện người sử dụng một cách có chủ
đích, dựa trên các mơ hình rõ ràng, nhất qn, rõ ràng và dễ nhận biết đối
với người sử dụng. Ví dụ như việc đặt những thứ liên quan lại với nhau
và tách biệt những thứ không liên quan
- Nguyên tắc đơn giản: Làm cho các tác vụ phổ biến, thường xuyên sử
dụng trở nên dễ dàng, đơn giản. Đồng thời cung cấp các phím tắt hữu ích
để rút ngắn các các quy trình dài hơn
- Nguyên tắc hiển thị: Làm cho tất cả các tùy chọn và yếu tố cần thiết cho

một tác vụ nhất định hiển thị cùng lúc mà không làm cho người sử dụng
mất tập trung với thông tin không liên quan hoặc dư thừa. Một thiết kế
tốt là thiết kế không áp đảo, bắt buộc người sử dụng với các lựa chọn
thay thế hoặc nhầm lẫn với thông tin không cần thiết.
SVTH:

xiv


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

- Nguyên tắc phản hồi: Thiết kế phải thông báo cho người sử dụng về các
hành động hoặc giải thích về các thay đổi trạng thái, điều kiện và các lỗi
hoặc các trường hợp ngoại lệ có liên quan và được người sử dụng quan
tâm. Q trình này phải thơng qua ngơn ngữ rõ ràng, ngắn gọn và quen
thuộc với họ
- Nguyên tắc linh hoạt: Thiết kế nên linh hoạt, giảm chi phí sai sót. Đồng
thời ngăn ngừa lỗi bất cứ khi nào có thể bằng cách tiếp nhận các thơng
tin và trình tự khác nhau. Từ đó tiến hành diễn giải một cách hợp lý.
- Nguyên tắc tái sử dụng: Thiết kế nên sử dụng lại các thành phần và
hành vi bên trong và bên ngồi, duy trì tính nhất qn với mục đích thay
vì chỉ thiết kế tùy ý, do đó giảm khả năng người sử dụng phải suy nghĩ
và ghi nhớ.

1.2 Tổng quan về ứng dụng di động và thiết kế UX/UI
trong ứng dụng di động
1.2.1 Tổng quan về ứng dụng di động
Trang Bách khoa tồn thư Wikipedia trích dẫn: “Một phần mềm
ứng dụng trên thiết bị di động, còn được gọi tắt là ứng dụng
di động, hoặc chỉ ứng dụng, (tiếng Anh: mobile application

hoặc mobile app hoặc app) là phần mềm ứng dụng được
thiết kế để chạy trên điện thoại thơng minh, máy tính bảng
và các thiết bị di động khác…. Ứng dụng di động ban đầu
được cung cấp với mục đích thơng tin tổng qt và các dịch
vụ thơng dụng trên mạng tồn cầu, bao gồm email, lịch,
danh bạ, thị trường chứng khốn và thơng tin thời tiết. Tuy
nhiên, nhu cầu chung của những người sử dụng thiết bị di
động và khả năng phát triển của các nhà lập trình đã mở
rộng thành các loại khác, chẳng hạn như trị chơi di động, tự
động hóa nhà máy, GPS và các dịch vụ dựa trên địa điểm,
định vị và ngân hàng, để theo dõi, mua vé và các ứng dụng
y tế di động. Sự bùng nổ về số lượng và sự đa dạng của các
ứng dụng đã tạo ra một tiềm năng và thị trường lớn.”
Từ năm 2005, các nhà phát triển đã nhận thức được việc thiết kế
giao diện website theo kích thước nhỏ hơn, giao diện thân
thiện hơn với màn hình của các thiết bị di động. Vài năm
sau, các Native Apps (Ứng dụng gốc) được phát triển, người
dùng có thể điều hướng bằng những điểm chạm trên màn
hình cảm ứng. Khoảng năm 2013, sự phổ biến của Mobile
Web-app tăng lên, công nghệ cũng được cập nhật để tăng
SVTH:

xv


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

trải nghiệm người dùng. Kể từ năm 2019, Mobile App phát
triển mạnh mẽ. Chúng mang đến các giải pháp cho cuộc
sống người dùng, tăng tính trải nghiệm cá nhân với sự trợ

giúp từ trí tuệ nhân tạo.
Tại Việt Nam, việc sử dụng điện thoại thông minh cũng đang
bùng nổ, ứng dụng di động đã bắt đầu đóng một vai trị
quan trọng trong phong cách sống của người Việt. Nó cũng
tạo nên một xu hướng mới trong việc trở thành nguồn thông
tin cho người tiêu dùng. Khi điện thoại thơng minh được
“phổ cập” thì sự phát triển của ứng dụng di động cũng là
một điều tất yếu. Ngày càng có nhiều ứng dụng di động ra
đời. Có thể kể đến các ứng dụng như mạng xã hội, mua
sắm, ví điện tử cho đến các ứng dụng về sức khỏe, đặt
hàng… Doanh số dự kiến của thị trường ứng dụng di động
được dự đoán lên tới 693 tỷ USD vào cuối năm 2021

1.2.2 Thiết kế UX/UI trong ứng dụng di động
Với một thị trường ứng dụng di động đang phát triển như vũ bão, sự cạnh tranh
giữa các ứng dụng cũng trở nên sôi động hơn bao giờ hết. Ngày nay, khi
người dùng đã có nhiều sự lựa chọn thì một ứng dụng chỉ đơn thuần là cung
cấp một giải pháp nào đó sẽ khơng thể có sức cạnh tranh mạnh. Bàn cân lúc
này sẽ nghiêng về những ứng dụng được đầu tư nghiêm túc về cả giao diện
lẫn trải nghiệm người dùng. Như vậy, UX/UI là một thứ đòi hỏi các nhà
thiết kế và phát triển ứng dụng phải đặc biệt chú ý. Và để ứng dụng đảm
bảo tốt nhất về mặt UX/UI thì cần phải tuân theo 6 nguyên tắc sau:
- Nguyên tắc cấu trúc (The Structure Principle): Thiết kế giao diện ứng
dụng nên tổ chức giao diện người dùng một cách có mục đích, có ý nghĩa
và hữu ích dựa trên các mơ hình rõ ràng, nhất qn, dễ thấy và dễ nhận
biết đối với người dùng.
- Nguyên tắc đơn giản (The Simplicity Principle): Thiết kế giao diện
app mobile phải đơn giản, làm cho các thao tác thông thường được thực
hiện dễ dàng, giao tiếp rõ ràng và sử dụng ngôn ngữ dễ hiểu cho người
dùng. Đồng thời cung cấp các phím tắt hữu ích cho q trình sử dụng

ứng dụng của người dùng.
- Nguyên tắc hiển thị (The Visibility Principle): Thiết kế giao diện ứng
dụng phải hiển thị tất cả các tùy chọn và thành phần, thông tin cần thiết
cho một tác vụ nhất định mà không làm người dùng phân tâm với thông
tin không liên quan hoặc dư thừa.
- Nguyên tắc nhất quán (The Consistency Principle): Thiết kế giao diện
app mobile nên sử dụng lại các thành phần (elements) và các cấu trúc
SVTH:

xvi


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

giống nhau cho tất cả các trang nội dung của ứng dụng. Điều này làm
giảm nhu cầu người dùng phải suy nghĩ và ghi nhớ.
- Nguyên tắc phản hồi (The Feedback Principle): Thiết kế giao diện app
mobile phải thông báo cho người dùng về các hành động hoặc có các giải
thích, diễn giải cho hành động, các thay đổi của trạng thái ứng dụng và
các lỗi có liên quan và được người dùng quan tâm.
- Nguyên tắc dung sai (The Tolerance Principle): Thiết kế giao diện
phải linh hoạt và dễ sử dụng, giảm thiểu các sai sót và lạm dụng bằng
cách cho phép hoàn tác và làm lại (undo và redo). Điều này có nghĩa là
khi người sử dụng thực hiện sai một thao tác nào, thì họ có tùy chọn
quay trở lại để thực hiện lại thao tác.

1.3 Tổng quan về Design System trong thiết kế UX/UI
Những năm gần đây chứng kiến sự phát triển mạnh mẽ trong lĩnh vực thiết kế
giao diện người dùng. Khơng chỉ có hàng triệu ứng dụng và hàng tỷ trang
web (và vẫn không ngừng tăng lên mỗi năm), mà mỗi ứng dụng và trang

web đó có thể có hàng trăm hoặc hàng nghìn trang con. Sự phát triển nở rộ
này địi hỏi các cơng ty, tổ chức phải có cách tiếp cận hợp lý cơng việc thiết
kế của mình. Vì vậy, nhiều nhóm thiết kế tận dụng các Design System
mạnh mẽ để quản lý các thiết kế trên quy mô lớn.
Design System (Thiết kế hệ thống) là một giải pháp cần thiết cho các doanh
nghiệp để hệ thống hóa thiết kế của mình và xây dựng các thiết kế có tính
nhất qn, có khả năng sử dụng. Điều này khơng chỉ có lợi cho các nhà
thiết kế và lập trình viên tại một cơng ty mà cịn cho phép các bộ phận liên
quan trong cơng ty nhìn nhận và hiểu rõ hơn về cách thức và lý do tại sao
các quyết định thiết kế được đưa ra thơng qua việc mọi thứ đã được trình
bày trực quan và có tổ chức.

1.3.1 Khái niệm Design System
Nielsen Norman Group – một tổ chức uy tín, gồm các chuyên gia đầu ngành
nghiên cứu về trải nghiệm người dùng có đưa ra khái niệm về Design
System như sau: “Design System là một tập hợp các tiêu chuẩn để quản lý
thiết kế trên quy mô lớn thông qua việc tạo ra “ngôn ngữ” chung và đảm
bảo nhất quán về mặt trực quan trên các trang và kênh khác nhau.”
Hay nói cách khác, Design System là một tập hợp đầy đủ các tiêu chuẩn nhằm
quản lý thiết kế ở quy mô lớn bằng cách sử dụng các component (thành
phần) và pattern (mẫu) có thể tái sử dụng.
Nathan Curtis – nhà đồng sáng lập của EightShapes có một câu nói rất hay:
“Design System là hệ thống của hệ thống”. Một Design System thường
chứa nhiều hệ thống con để tạo nên một giao diện tốt, bao gồm: UI
SVTH:

xvii


THỰC HÀNH CHUYÊN SÂUGVHD: NGUYỄN THỊ TUYẾT MAI

components và các biến thể của nó trong thiết kế và code, Design tokens
(Mã hiệu thiết kế), Typography system (Hệ thống kiểu chữ), Color system
(Hệ thống màu), Layout/Grid system (Hệ thống bố cục / lưới), Icon system
(Hệ thống biểu tượng). Tất cả các hệ thống con này đều kết hợp với nhau để
giúp xây dựng nên một giao diện người dùng có chất lượng cao từ một tập
hợp các component có thể tái sử dụng được.

1.3.2 Lợi ích khi sử dụng Design System
Design System khi được xây dựng tốt có thể mang lại rất nhiều lợi ích cho nhóm
thiết kế:
- Tạo ra thiết kế nhanh chóng trên quy mơ lớn: Trong q trình xây
dựng sản phẩm sẽ cần đưa ra nhiều phương án thiết kế khác nhau, phát
triển tiếp từ những phương án thiết kế đã có. Design System giúp nhà
thiết kế tạo ra và nhân rộng các bản thiết kế nhanh chóng bằng cách tái
sử dụng các thành phần thiết kế đã được tạo sẵn. Giảm thiểu nhu cầu tạo
lại những cái đã có, nhờ đó giảm bớt sự khơng thống nhất trong thiết kế
có thể gây ra nhiều rủi ro ngồi ý muốn.
- Tập trung vào các vấn đề lớn và phức tạp hơn: Khi các thành phần cơ
bản đã được tạo sẵn và có thể tái sử dụng, nhà thiết kế sẽ giảm bớt được
áp lực cơng việc vì khơng cịn phải bận tâm nhiều về kiểu dáng, hình
thức của các thành phần này nữa. Nhờ vậy họ có thể tập trung giải quyết
các vấn đề lớn và phức tạp hơn. Ví dụ như phân cấp thơng tin, tối ưu
luồng hoạt động của người dùng.
- Tạo nên cách diễn đạt thống nhất: Design System tạo nên cách diễn
đạt thống nhất giúp tránh lãng phí thời gian và cơng sức do những hiểu
nhầm trong giao tiếp gây ra. Đặc biệt là khi có sự thay đổi về nhân sự
trong nhóm thiết kế hoặc khi các nhóm phải làm việc từ xa, khơng ở
cùng một chỗ với nhau. Ví dụ, mọi người sẽ không cần phải tốn thời gian
tranh cãi về chức năng hay hình thức của một component cụ thể nữa, vì

nó đã được thống nhất về định nghĩa trong Design System. Hoặc giả sử,
bỗng một ngày, các thành viên chủ chốt trong nhóm thiết kế vì lý do nào
đó khơng thể tiếp tục công việc hiện tại được nữa, nhưng dự án của công
ty vẫn phải tiếp tục hoạt động. Lúc này, nhờ mọi thứ đã được định nghĩa
thống nhất trong Design System, các thành viên cịn lại có thể dựa theo
đó để tiếp tục cơng việc đang dang dở.
- Tạo nên tính nhất quán giữa các sản phẩm: Khi các nhóm thiết kế làm
việc trong các dự án riêng biệt, sản phẩm của nhóm này thường được
phát triển độc lập với sản phẩm của nhóm khác. Nếu như khơng có một
Design System chung cho các nhóm có thể sẽ khiến cho người dùng cảm
thấy giao diện và trải nghiệm của các sản phẩm khơng nhất qn, có sự
SVTH:

xviii