Nghiên cứu phương pháp Thiết kế lấy người dùng làm trung tâm và áp dụng vào thiết kế cải thiện giao diện ứng dụng HanoiBus cho người dùng cuối

La một cuốn sách kinh điển trong lĩnh vực tương tác giữa người và máy tính HCI, mang nhữngnội dung chính như: Khám pha bản chất của thiết kế hệ thống lay người ding làmtrung tâm, nhấn mạ

Trang 1

NIIH NYA WVHd

éLqd@31LóId

BO THONG TIN VÀ TRUYEN THONG

HỌC VIEN CONG NGHỆ BƯU CHÍNH VIÊN THONG

ĐỎ ÁN TÓT NGHIỆP ĐẠI HỌC

Dé tài: “Nghiên cứu phương pháp Thiết kế lay người dùng làm trung tâm và áp dụng vào thiết kế cải thiện

giao diện ứng dụng HanoiBus cho người dùng cuôi.”

Giảng viên : Th.S Nguyễn Lê Mai

Họ và tên : Pham Văn Hiến

Lớp : DI9TKĐPT2

Mã sinh viên : BI9DCPT079

Hệ : DHCQ

HÀ NOI, 2023

Trang 2

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

Đề tài: “Nghiên cứu phương pháp Thiết kế lay người dùng làm trung tâm và áp dụng vào thiết kế cải thiện giao diện ứng dụng

HanoiBus cho người dùng cuối.”

Giảng viên : Th.S Nguyễn Lê Mai

Họ và tên : Pham Văn Hién

Lớp : DI9TKDPT2

Mã sinh viên : BI9DCPT079

Hệ : DHCQ

Hà Nội, 2023

Trang 3

Đồ án tốt nghiệp Đại học

LỜI CAM ĐOAN

Em xin cam đoan rằng đồ án tốt nghiệp “Nghiên cứu phương pháp Thiết kếlấy người dùng làm trung tâm và áp dụng vào thiết kế cải thiện giao diện ứng dụngHanoiBus cho người dùng cuối ” là công trình nghiên cứu của bản thân mình Những

phần có sử dụng tai liệu tham khảo có trong đồ án đã được liệt kê và nêu rõ ra tại phần

tài liệu tham khảo Đồng thơi những số liệu hay kết quả trình bày trong đồ án đềumang tính chất trung thực, không sao chép, đạo nhái

Nêu như sai em xin chịu hoàn toàn trách nhiệm va chịu tat cả các kỷ luật của bộ môn cũng như Học viện đê ra.

Sinh viên

Pham Văn Hiển

Pham Văn Hiển - BI9DCPT079 1

Trang 4

LỜI CẢM ƠN

Lời đầu tiên, em xin gửi lời cảm ơn sâu sắc đến Học viện Công nghệ Bưu chính

Viễn thông khi đã hỗ trợ chúng em có một điều kiện để hoàn thành Đồ án tốt nghiệpthật tốt Những kiến thức cũng như bộ môn trong ngành đa phương tiện đều là mộtmôn học thú vị và vô cùng bồ ích Tuy nhiên, đề tài không phải mới lạ, nhưng vẫn cónhững khó khăn nhất định, những kiến thức và kỹ năng về môn học này của em vẫn

còn nhiều hạn chế Do đó, đồ án của em khó tránh khỏi những sai sót Kính mong thầy

cô xem xét va góp ý giúp bài tiêu luận của em được hoàn thiện hon.

Bài nghiên cứu này không chỉ là kiến thức về mặt lý thuyết các số liệu, rà soát

thực tế mà còn là trao dồi cho em kỹ năng tìm hiểu và giải quyết van dé dé đạt hiệuquả cao nhất Cũng như bắt tay vào sáng tạo những sản phâm mẫu do cô hướng dẫn

Việc thực hiện dé tài này giúp em hiểu biết thêm nhiều mặt đa dang trong thiết kế daphương tiện phô biến rộng rãi ngày nay

Em cũng xin gửi lời cám ơn chân thành đến Ban giám hiệu Học viện Công nghệBưu chính Viễn thông, quý thầy cô khoa Đa phương tiện đã tận tâm giảng dạy và

truyền đạt những kiến thức, kinh nghiệm quý báu cho em Đặc biệt, em xin cám ơn côNguyễn Lê Mai, người đã tận tình hướng dẫn em hoàn thành tốt đồ án của mình Vì

thời gian và kiến thức còn han hẹp nên d6 án của em không thé tránh khỏi những thiếusót, rất mong sự góp ý của Các thầy cô trong hội đồng Giám khảo để em rút kinh

nghiệm và hoàn thành tốt hơn trong các công việc liên quan sau này

Hà Nội ngày 25 tháng 10 năm 2023

Sinh viên

Pham Văn Hién

Pham Văn Hiển - BI9DCPT079 il

Trang 5

MỤC LỤC

LOT CAM ĐOAN G5252 2 122122122121121121121121121121121121111121012121112111 tre i

LỜI CẢM 0) en ii

MỤC LLỤC 2-52-5252 2E 21E21212717127111211211211211211212111101111211011211121 1 c1 re iii

DANH MỤC CÁC HÌNH VẼ - 5 SE E12 121121121121111111111 111111 11 tru vii PHAN MO ĐẦU - 2-52 222221221221121127122112112111111121121111121121111212 21121211 1

1 LY DO CHỌN DE TÀI - 52-521 E1 E12E1211212111111111211211211111 1 xe 1

2 TINH HÌNH NGHIÊN CỨU - 2 22+2E2EE+2EE2EEE27E22E1221711271.21 21 Lee 2

a Tình hình nghiên cứu trên thế giới - 2 2 S2E222E+£x££xzEzErzxzrrzxees 2

b Tình hình nghiên cứu trong nước c6 222132211 *2 1£ EEsvrseeerseses 4

3.1 Đối tượng nghiên cứu - 2-2: 2 +2x2E+2EE£EEEEE2EEEEEEZEEESESkrrkerrrei 4

3.2 Phạm vỉ nghiên cứu - c2 2 1321111511121 111 111111811111 811118811 ky 4

4 MỤC DICH VÀ NHIỆM VỤ NGHIÊN CỨU 2 scxc+E+Ezrxerrres 5

5 PHƯƠNG PHÁP NGHIÊN CỨU - 2-2 ©22+2E2EE2EE+2EE+EEEEEEEEerkerkerree 5

6 Ý NGHĨA DE TÀI - 2: s2S22SE£2Et2E12E127121121121171121121111211 211111121 xe 6

7 CÁU TRÚC DE TÀI - - 2 S21 2EE2EEEEEEEE121122122112112112711211211211211 111121 xe 6

CHUONG I: CƠ SỞ LÝ THUYET CUA DE TÀI -22 252+SzE+£zEczEezszreez 9

1.1 Tổng quan về giao diện ứng dụng di động - - 25 sex 9

1.1.1 Giao diện đồ hoạ người dùng 5© 5S se EEeEErkrkererrreeo 9

1.1.2 Khai niệm về Thiết kế giao diện người dùng (UI Design) 11

1.2 Thiết kế trai nghiệm người dùng (User Experience Design) 13

1.2.1 Thiết kế Trải nghiệm người dùng (User Experience Design) 13

1.2.2 Cac đặc điểm của thiết kế User Experienee - 2-5555: 15 1.2.3 Anh hưởng của thiết kế UX đối với thiết kế ứng dụng 18

1.3 Thiết kế lay người dùng làm trung tâm (User - Centered Design) 20

1.3.1 Tổng quan về Thiết kế lay người dùng làm trung tam 20

1.3.2 Vai trò Thiết kế lấy người dùng làm trung tâm (UCD) 21

1.3.3 Quy trình Thiết kế lấy người người dùng làm trung tâm (UCD) 27

008.9519.009) icnn ố 34

Pham Văn Hiển - BI9DCPT079 iil

Trang 6

CHUONG II: PHƯƠNG PHAP THIẾT KE LAY NGƯỜI DUNG LAM TRUNG

TÂM TRONG VIỆC PHAN TÍCH UNG DUNG HANOIBUS - 35

2.1 Ve ứng dụng HanoiBus - 2-52 SE SE EEEEEEEEEEEEEErrrrrke 35

2.1.1 Tổng quan về thông tin đội ngũ phát triễn -5- 2-5: 35

2.1.2 Hiện trang của ứng dụng HanoiBus - 5-5 5S ssS+ccxsses2 39

2.1.3 Đối tượng người dùng dùng ứng dụng HanoiBus 432.1.4 Các chức nang của ứng dụng HanoiBus 555cc S+<<<<+ 432.2 Phân tích thị trường đối thủ cạnh tranh ¿-2 2 x+z+zsz+xe2 46

2.2.1 Xác định đối tượng cạnh tranh - 2© 2+ z+x+£EzEzxrrxzrrrxee 46

2.2.2 _ Hiện trạng ứng dụng HanoiBus với các đối thủ cạnh tranh 53

2.3 Nghiên cứu người dùng - 5 + Sky, 53

2.3.1 Xác định người dùng Gv 54

2.3.2 Câu hỏi và kết quả sau khi nghiên cứu người dùng 55

2.3.3 Xây dung Personas cho Ung dụng - cư 65

2.4 Phương án cai thiện ứng dung HanoiBus - - 5 55c <++<<>+<x>+ 66

2.4.1 Đề xuất Kiến trúc thông tin mới -:-+++c++zx+srxvsrrve 67

TIỂU KET CHUONG lII -5 ©52-25222S22EEE22EE221122312221211211221211 2212 ve 73Chương III Áp dụng phương pháp UCD vào thiết kế cải thiện giao diện ứngdụng HanoiBus cho người dùng cuối 2-5-2 9ềSE‡E£EEEEEEEEEEEEEEEEEEEerrrkree 74

3.1 Xây dựng phác thao Wireframe của ứng dụng HanoiBus 743.2 Xây dựng hệ thống thiết kế ứng dụng HanoiBus - 2555522 93

3.2.1 Hệ thống màu SAC ecceecseeecssseessseecsseeessesessneessnecesneesteeesensesnteeneeeeeeees 93

3.2.3 Hệ thống biểu thượng (Icongraphy) 2-5555: 2cczxczxsrxerrrrred 953.2.4 Hệ thống 0800/0106) 01 963.2.5 Minh hoa (Illustration) - - G1 2 1112 1112 1 1xx ng 111 ng 1x re 983.2.6 Các thành phần UI (UI Componenf) c5 13+ sseireesee 99

3.3 Thiết kế giao diện hình ảnh của ứng dụng HanoiBus cho đối tượng người

dùng cuối - 2-52 ST TT 1E21211211211211211211211211111110111111211 1111211 ce yeu 102

TIEU KET CHUONG [0D 0 117

KẾT LUẬN - 5 - SE S1 E1 1EE12121121121 21121111 0111111211111 1112111112 1e 118DANH MỤC TÀI LIEU THAM KHẢO À - 5: 22 SeSE£EE£EE£EE£EEzEzEzEzreei 120

Pham Văn Hiển - BI9DCPT079 HH

Trang 7

DANH MỤC CÁC KI HIỆU VA CHỮ VIET TAT

UX User Experience Trai nghiệm người dùng

UI User Interface Giao diện người dùng HCI Human Computer Interaction Tương tác người - may

International Organization for ay ee 2 gg

ISO Ms Tô chức Tiêu chuân hoá Quôc tê

Standardization

Phương pháp Thiết kế lay người

UCD User-centered Design spSP y ng

dùng làm trung tâm

Pham Văn Hiển - BI9DCPT079

Trang 8

DANH MỤC CÁC BANG

Bang 1.1 Phân biệt Tải nghiệm người dùng (UX) và Giao diện người dùng (UI) 14Bảng 2.1 Hệ thống chức năng cơ bản của ứng dụng HanoiBus 2-5-5 5¿ 46

Bang 2.3 So sánh chức năng các ứng dụng đối thủ - 52 s2 cE2EzErxzxeree 48

Bảng 2.4 Bộ câu hỏi phỏng van chuyên sâu 2- 222252 2E22EE£EE2EzErrxzrrzei 57Bang 2.5 Người dùng tham gia phỏng vấn chuyên sâu - 522 cz+Ez£szxccez 57

Pham Văn Hiển - BI9DCPT079 vi

Trang 9

DANH MỤC CÁC HÌNH VE

Hình 1.1 Giao diện của Microft WOrC - - - 110222201111 112 2111 ng 111111 xxx xu 10Hình 1.2 Biểu tượng của Microft WOrd - ¿- 5s x 2E 8111111211111 1111111 rte 10

Hình 1.3 Các danh sách tạo Tài liệu 22c 2221111112231 1111182311111 1EEerrreg 11

Hinh 1.4 Thanh cong Cun cee eeccsseeccsseseeeeseceeessecesessecesecseesseseeesaeseeeeaeseeesneesneeeesaeees 11

Hình 1.5 Trang Web Behance dễ dang cho phép người dùng truy cập tim kiếm tài liệu

với bô cục Minh hoạ sắp xêp hợp lý - - - 2c 2S 2112132 111 119211111111 1 191k ren 13

Hình 1.6 Kiến trúc thông tin — Nguồn: mangoads.vn ¿2 + sz+sz+z++z+zs+z 15Hình 1.7 Tương tác đánh giá — Nguồn: swinburne-vn -2- 2 scx+cz+xzxezxzxerxe2 16Hình 1.8 Khả năng sử dụng — Nguồn: businessconfig - - 252 +czzx+zszxzzersez 17

Hình 1.10 Mô hình HoneyComb của Peter Moville — Nguồn: Geek Up 18Hình 1.11 Mô hình HoneyComb của Peter Moville - Nguồn: Geek Up 21

Hình 1.12 Ung dung Photoshop — Nguồn: GCFGlobal c.csccssesssssssessessessesesseseseees 23

Hình 1.13 Con người hình thành những mô tinh than thông qua việc quan sát và tương

tác với thế giới bên ngoài — Nguồn: medium.com 2 ¿2c x+S££E2E+E+E+EezxzEerxez 24

Hình 1.14 Tinh năng tìm kiếm trên Google — Nguồn: google.com - +: 25

Hình 1.15 Những cảm xúc của người dùng khi tương tác với sản phẩm được thể hiện

qua “Bánh xe cảm xúc” của Plutchik — Nguồn: phanphuongdat :- 55 55¿ 26Hình 1.16 Quy trình 5 bước UCD - Nguồn: Sách “(Fundamentals of User-Centered

IS i02Warleiv.10.200)9v69 ĐT 4 27

Hình 1.17 Quy trình lọc chức năng — Nguồn: Fundamentals of User-Centered Design:

A Practical Approach - - + +2 12 1112111211111 101111011 01110 11111 11H H1 HH kg 30

Hình 1.18 Bản mẫu thử trên giây — Nguồn: winning_calvin 2 255+¿ 31

Hình 1.20 Wireframe độ trung thực vừa — Nguồn: Uximaffers - ¿55 5zssc+ 33Hình 2.1 Logo của ứng dụng HanoiBus — Nguồn: Transerco - 2sss+szcs¿ 35

Pham Văn Hiển - BI9DCPT079 vii

Trang 10

Hình 2.4 Logo của ứng dụng HanoIBus - - 5c 22c 3322132311331 Eerrtr 38 Hình 2.5 Chức năng tra cứu của HanoIBus 6+ kg nh nưệt 40

Hình 2.6 Chức năng theo dõi của HanoIBUus ¿c1 2c 3121111111311 40

Hình 2.7 Chức năng theo dõi của Hano1Bus - 6 + 1x rưkt 41 Hình 2.8 Chức năng theo dõi của HanoIBUus - - - 2c 332111121 errses 41

Hình 2.9 Chức năng cảnh bao của HanoIBus - - - 5c 33233213 EEssiresrerreres 42

Hình 2.10 Chức năng theo dõi của HanoIBus - c3 1323 Ex+vreserrrees 42Hình 2.11 Sơ đồ kiến trúc thông tin HanoiBus - 2-22 2 22s 2x+£++E+z+zzzzxczxez 46

Hình 2.12 Giao diện ứng dụng Go! Bus - - G22 2211121112111 181115 E11 ket 49 Hình 2.13 Giao diện ứng dụng vUs 0 0 2201121112 11111111 1111111011811 gkrrrư 50 Hình 2.14 Giao diện ứng dụng vUs 2c c0 201121112 11101118 1118111821181 8x crry 52

Hình 2.15 Kết qua khảo sát độ tu6ie cececccescsscesessessessessessessessessesessssestsssssessessesesees 59

Hình 2.16 Kết quả khảo sát theo phương pháp định lượng -5- 5 2+ss+zzzs+ 60Hình 2.17 Kết quả khảo sát theo phương pháp định lượng ¿2-5 2+s+sezszs+ 61Hình 2.18 Kết quả khảo sát theo phương pháp định lượng -2- ¿5552552 61Hình 2.19 Kết quả khảo sát theo phương pháp định lượng 2- 5 2+s+s>zzs+ 62Hình 2.20 Kết quả khảo sát theo phương pháp định lượng - 25-5 2+s+sscszs4 63Hình 2.21 Kết quả khảo sát theo phương pháp định lượng - 2-2-5 + csz+5+2 64Hình 2.22 Chân dùng người dùng thứ nhất 2-52 2 S2S2EEEEEEEEEEEEEEEErkrrerkes 65Hình 2.23 Chân dùng người dùng thứ hai 5 5 1311 * ng nếp 66Hình 2.24 Kiến trúc thông tin mới -¿- ¿St eEE+EE+E£EE2EEEEEEEEEEEEEEEEEEEEEEEEErkerrree 67Hình 2.25 Chú thích USerfÏOW - -. - 2S 1121122111111 1211111111111 111 111k TH key 67Hình 2.26 Hình ảnh luồng lần đầu vào ứng dụng - 2: ¿s52 e£E+E+EeExzEerxerrree 68Hình 2.27 Hình ảnh luồng Tìm kiếm tuyến xe 2 2 2 +E+*EeEE£EE£EE2EEzEEzEereea 68Hình 2.28 Hình anh luồng Tuyến Xe cceccescescesssssssessessessessessessessessessessseseesseesesesees 69Hình 2.29 Hình ảnh luồng Điểm dừng - 2-2: ©2252+2E+EE2E£2EE£EEtEEE2EEeEErrrzrervee 69

Hình 2.30 Hình ảnh luồng Điểm bán vé - 2: 2 s+S2EE2EE2EE2EE2E2E2E212121 2E cEee2 70

Hình 2.31 Hình ảnh luồng Yêu thích 2-2 2 2 £+E+E£EE£EE£EEEEEEEEEEEEEEeEkrkrrrrres 70

Pham Văn Hiển - BI9DCPT079 Vill

Trang 11

Hình 2.32 Hình ảnh luồng Đăng ky vé Xe -2- 2-52 S22SE2E2E2EEEEEEEEEEEEEEEEkrkrreea 70Hình 2.33 Hình ảnh luồng Liên kết thẻ vật lý - 2-2222 +2 22+22+2£x+zzxvzxezezxez 71Hình 2.34 Hình anh luồng Gia hạn ¿2-52 SE EEE2EEEE2EEEEEE2121EE1121211 1e ceE 71Hình 2.35 Hình ảnh luồng Chỉnh sửa thông tin vé và Lich sử 2-25: 71Hình 2.36 Hình ảnh luồng Thông tin cá nhân - 2 ¿+ 2 E+EE+E£E£EE£E2E+E£EeEerxrxeg 71Hình 2.37 Hình anh luồng Ngôn ngữ và Ban đồ ngoại tuyến 2-5555: 72Hình 2.38 Hình ảnh luồng Trợ giúp 2- 2-52 5SS22EE2EE2EE2EE2EEEEEEEEEEEEEkErkrkerrrres 72Hình 2.39 Hình ảnh luồng Thông tin ứng dụng - 2 2 + 2+2+E££+E+Ee£xzEerzxrrs 72

Hình 2.40 Hình ảnh luồng Bao cáo - 5c SE ềEEEEEEEEEEE2E12112112112171E11 111 cEx 2 72

Hình 3.1 Hình anh Wireframe màn hình chờ và giới thiệu 5+ ++++<<s+++ 74

Hình 3.2 Hình ảnh Wireframe Xin chào và Đăng nhập - ¿ 555cc ‡+++ssss+++ 75 Hình 3.3 Hình ảnh Wireframe Trang chủ - - 122.1312211 1111111 1151111111111 kg 76

Hình 3.4 Hình ảnh Wireframe Trang chủ - - sàng ng ưkt 77 Hình 3.5 Hình anh Wireframe Thông tin lộ trình 5-5 + S< + ++xssvssersserrees 79Hình 3.6 Hình ảnh Wireframe Điểm bán vé ¿22 22s 2E2E‡EE2EEEEEEEEEE2EEEEErreeg 80Hình 3.7 Hình anh Wireframe Điểm bán Ve cccccccscessessessessessesesessesesesseseessseseeseeens 81Hình 3.8 Hình anh Wireframe Tuyến %e 2-5 S2 SE SE E2 1221211211211 xe, 82

Hình 3.9 Hình ảnh Wireframe Yêu thích - 5c 2c S21 22119 11 11911115811 kh Hkp 83

Hình 3.10 Hình ảnh Wireframe Vé xe tháng c2 312 11111111111 1111 1118111 re 84 Hình 3.13 Hình anh Wireframe Dang ky vé xe tháng - càng 87

Hình 3.14 Hình anh Wireframe Chỉnh sửa thông tin người sử dung vé 88

Hình 3.15 Hình ảnh Wireframe Tai khoản - - S213 231133 E3 Srrrkrererreree 89Hình 3.16 Hình anh Wireframe Ngôn ngữ va Ban đồ ngoại tuyến -5- 90Hình 3.17 Hình ảnh Wireframe Trợ giúp và Thông tin ứng dụng 91 Hình 3.18 Hình anh Wireframe Thông báo - c3 3221321133113 91 Hình 3.19 Hình anh Wireframe Tin tỨC - - c2 3213321112511 1111111511111 1 1 key 93

Hình 3.21 Hình ảnh hệ thống Typographyy - ¿+ + eEEeEE£EE£EESEE2EE2EEzErrrrrrsee 95

Pham Văn Hiển - BI9DCPT079 IX

Trang 12

Hình ảnh Input Form Component ¿ s3 S+ * +2 ‡+*vx+eeeeeseeerxsesss 101

Hình ảnh Màn hình chờ và màn Giới thiệu - 5 52+2+++++++>s+ 103Hình anh Phương thức đăng nhập va Đăng nhập băng số điện thoại 103

Hình ảnh Nhập mã OTP và hoàn tat thông tin 5: 5¿©5225+5522 104Hình ảnh Tìm kiếm điển đến -5¿¿- 222cc 105Hình ảnh Lộ trình tuyến Xe 2-5: ©5¿©22+2E+EE2E£2EEEE2EEEEEE2EExerxzrrred 106Hình ảnh Điểm bán vé 52:55 v22 222 22 tre 107

Hình ảnh Tuyến Xe 2-2 Ss 9S SE E2E12E1211211211217171 71111111 xe 109

Hinh anh 410i (101 ố 110 Hình ảnh Vé va Lich SỬ 2c E2 22211111 1255311111255 1 11121111, 110

Hình anh Gia han vé thang eccecscccssceesecesecesseessecesseeeseesseeeessteseesaes 112

Hình anh Đăng ký vé tháng - - - 6 2G 1x vn ng ngư 113 Hình ảnh Chỉnh sửa thông tin Vé Xe S1 nghe 114 Hình ảnh Tài khoản và Thông tin tài khoản 55c s+++<>+++sss2 115Hình ảnh Ngôn ngữ và Bản đồ ngoại tuyến -2- 2+5 52+cz2xczzcse2 115Hình ảnh Giao diện Trợ giúp và Thông tin ứng dụng - 116

Pham Văn Hiển - BI9DCPT079 Xx

Trang 13

đề to lớn cho những người sử dụng phương tiện công cộng Tuy đã có những ứng dụng

trên các điện thoại thông minh hỗ trợ van dé này nhưng hiện tại các ứng dụng van chỉtập trung vào mảng tìm kiếm là chính, các mảng khác vẫn chưa thể hiện rõ ràng côngnăng của chúng.

Hiện tại, quy mô dân số của Hà Nội hiện đã lên tới hơn 8,3 triệu dân Theothong kê, Thủ đô đang có khoảng 7,78 triệu phương tiện, trong đó có hơn 1 triệu 6 tô

và hon 6,5 triệu xe máy, gần 200 nghìn xe máy điện Để khắc phục tinh trạng ùn tắc

giao thông của Hà Nội, hệ thống giao thông công cộng đã được chú trọng phát triểnnhằm đáp ứng ngày càng tốt hơn nhu cau đi lại của người dân Dé phục vụ tốt hơn nhu

cầu tham gia giao thông công cộng của người dân, Hà Nội không chỉ mở thêm cáctuyến xe buýt chạy về những khu vực xa trung tâm mà còn tăng cường kết nối giữa cácđiểm giao thông công cộng, tạo thuận lợi cho hành khách

Thực tế là, việc sử dụng phương tiện công cộng không chỉ giúp giảm thiêu vấn

dé tắc đường mà còn giảm thiêu các tai nạn giao thông, các van đề liên quan tới sứckhoẻ (tránh năng, mưa ) Do đó cần phải có những ứng dụng thông minh để giúpngười dùng tối ưu hoá trải nghiệm, dé dang sử dụng, làm quen, giải quyết được nhu

cầu của người dùng Ngoài ra, việc sử dụng các phương tiện công cộng còn có thể

giảm thiểu chi phí người dung phải bỏ ra cho các phương tiện cá nhân

Bởi các lý do trên, em đã lựa chọn đề tài “Nghiên cứu phương pháp Thiết kế lấy

người dùng làm trung tâm và áp dụng vào thiết kế cải thiện giao diện ứng dụngHanoiBus cho người dùng cuối” Thiết kế lấy người dùng làm trung tâm là mộtphương pháp thiết kế tập trung vào người dùng dé đảm bao rằng ứng dụng hoặc trang

web được tạo ra sẽ đáp ứng được nhu cầu của người dùng và dé sử dụng hơn Phuong

pháp này đã trở thành một phần quan trọng của việc phát triển các ứng dụng và trangweb hiện đại Nó tập trung vào việc hiệu người dùng, nghiên cứu nhu câu của họ và

Trang 14

tạo ra một trải nghiệm sử dung tot nhat có thê cho họ Dựa trên cơ sở lý thuyêt về

Trang 15

phương pháp này, bao gồm 5 bước quy trình: Nghiên cứu, Đánh giá tình hình, Cân

băng nhu cầu, Xây dựng giải pháp thiết kế, Kiểm thử ứng dụng Các bước trên sẽ sẽ

tạo ra một giao diện ứng dụng mang tới trải nghiệm đi xe buýt dễ dàng và thoải mái

hơn.

2 TÌNH HÌNH NGHIÊN CỨU

a Tình hình nghiên cứu trên thế giới

Hiện nay, phương pháp User-centered Design là một trong những phương pháp

thống kê, thu thập và phân tích được sử dụng phô biến trên toàn thế giới Phương phápnay được ra doi từ rat đâu trước đây Ttién thân của nó là một phương pháp cốt lõi, từphương pháp ấy con người đã sáng tạo ra những thuật ngữ thiết kế mang tính quan

trọng và có ảnh hưởng cực lớn đến ngành thiết kế hiện tại như: Human-Centered

Design (HCD), User-centered Design (UCD), User Experience,

Phuong pháp cốt lõi ấy, được biết đến từ cuốn sách " User Centred SystemDesign-New Perspectives on Human/Computer Interaction" (Thiết kế Hệ thông lay

Người dùng làm Trung tâm: Những Góc nhìn Mới về Tương tac Giữa Người va MayTính) của tác giả Donal A Norman và S.W Draper, xuất ban năm 1986 La một cuốn

sách kinh điển trong lĩnh vực tương tác giữa người và máy tính (HCI), mang nhữngnội dung chính như: Khám pha bản chất của thiết kế hệ thống lay người ding làmtrung tâm, nhấn mạnh tầm quan trọng của việc hiểu nhu cầu và hành vi của người

dùng trong quá trình thiết kế, giới thiệu các mô hình và phương pháp luận để phân

tích, đánh giá và cải thiện khả năng sử dụng của các hệ thống máy tính và thảo luận vềvai trò của tâm lý học nhận thức, xã hội học và nhân học trong việc hiểu hành vi củangười dùng Cuối cùng là, cung cấp các hướng dẫn thực tế cho các nhà thiết kế về cách

tạo ra các hệ thông dễ sử dụng, hiệu quả và thỏa mãn người dùng.

Ngoài ra, phương pháp UCD làm tăng trải nghiệm của người sử dụng ứng dụng

còn liên quan đến thuật ngữ User Experience được biết đến từ cuốn sách "TheElementss of User Experience " của tác giả Jesse James Garrett (2002) Cuốn sách

cung cấp một cái nhìn tong quan về lĩnh vực thiết kế trai nghiệm người dùng Cuốnsách hướng dan rất rõ ràng về các yêu tố cơ bản của thiết kế UX bao gồm 5 yếu tổ

chính: Hiểu người dùng (nghiên cứu và hiểu nhu cầu, mong muốn và hành vi củangười dùng), Xác định yêu cầu (Xác định các yêu cầu của sản phẩm hoặc dịch vụ dựa

trên nhu cầu của người dùng), Thiét kế (Tao ra các bản phác thảo, mô hình và nguyênmẫu dé thử nghiệm các ý tưởng thiết kế), Xây dựng (Phát triển sản phẩm hoặc dịch vu

dựa trên thiết kế đã hoàn thiện), và Thử nghiệm (Thu thập phản hồi từ người dùng dé

Trang 16

cải thiện sản phẩm hoặc dịch vụ) 5 yếu tố trên vẫn hiện hữu cho tới ngày nay va la

kim chỉ nan cho bat kỳ khuôn khổ dự án nào

Nghiên cứu " Environments Conference paper Building a Quality Mobile Application: A User-Centered Study Focusing on Design Thinking, User Experience

and Usability " là một bai bao của Danielly F O de Paula va Bianca H X M Menezes được đăng trên Internation Conerence Of Desgin, UX va Usability vào năm

2014 Bai viết này mô ta việc tao một ứng dụng di động thông qua Tu duy thiết kế

(DT), Trải nghiệm người dùng (UX) và cách tiếp cận hướng dẫn về khả năng sử dụngtrong môi trường đại học Mục đích của bài viết này là trình bày toàn bộ quá trình sáng

tạo liên quan đến việc thiết kế một ứng dụng di động, theo hệ tư tưởng của Design

Thinking, mang lại trải nghiệm toàn diện, đáng tin cậy và trên hết là đơn giản Ứng

dụng này được xây dựng bởi một nhóm sinh viên đại học thiếu kinh nghiệm về Khoahọc Máy tính, Kỹ thuật Máy tính và Thiết kế tại Đại học Liên bang Pernambuco trong

quá trình kéo dài một tháng Kết quả là ứng dụng này đã đạt được tỷ lệ thành công cao,

là ứng dụng được tải xuống nhiều thứ ba trong tất cả các thê loại trong tuần đầu tiên cómặt trên BlackBerry Store và cũng được các trang web công nghệ hàng đầu ở Brazil

đánh giá cực cao Theo bai báo để làm rõ được các nhu cầu sử dụng, khả năng sử

dụng, cần phải nghiên cứu đánh giá chỉ tiết kỹ càng về các Persona, bao gồm các bước

Sau:

- Nghiên cứu và hiệu r6 nhu câu và mong muôn của nhóm vê nhu câu sử dụng ứng dụng

- Thiết kế sản phẩm và dịch vụ dựa trên những nhu cầu và mong muốn đó

- Kiêm tra và đánh giá sản phâm và dịch vụ với nhóm người làm nghiên cứu

đảm bảo tính hữu ích và hiệu quả của chúng.

Bài báo cũng đưa ra một sô lời khuyên cho các nhà thiệt kê sản phâm và các

nhà thiết kế trải nghiệm sản phẩm, bao gồm:

- Tìm hiêu rõ các yêu tô vê vê vật lý lần tinh thân của nhóm người làm nghiên

cứu đề có thê thiết kế phù hợp

- Sử dụng các công nghệ mới dé tạo ra các sản phâm và dịch vụ thân thiện, hiện dai dé tiêp cận.

- Tạo ra các sản phẩm và dich vụ có tinh hấp dan và da dạng dé thu hút sự quan

tâm của nhóm người dùng.

Trang 17

xã hội do Vụ Thanh toán, Vụ Truyền thông (Ngân hàng Nhà nước) phối hợp với báo

Tuổi Trẻ và các đơn vị liên quan phối hợp tổ chức diễn ra chiều ngày 16-6 tại

TP.HCM Mục đích của hội thảo nhằm giải quyết các vẫn đề về thanh toán bằngphương pháp thông minh như: quét mã, thẻ từ, vào trong hệ thống giao thông công

cộng tại Việt Nam Mục tiêu nhằm Ứng dụng công nghệ thanh toán mới vào giao

thông công cộng bên lề cần phải đảm bảo tính rủi ro, sự an toàn về an ninh mạng Và

thúc day chuyền đổi số lấy hành trình của khách hàng là trọng tâm

Kết quả thu được: Đề xuất lấy hành trình của khách hàng làm trung tâm được

Techcombank thực hiện suốt 10 năm Do đó, đến nay hơn 90% các giao dịch củaTechcombank thực hiện qua kênh số Bên cạnh đó, nghiên cứu cũng đưa ra những giải

pháp thiết kế sản pham thé thao phù hợp với đối tượng này như: tính an toàn, dé sửdụng, thiết kế đơn giản nhắm đến tối đa người sử dụng

3 ĐÓI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU

3.1 Đối tượng nghiên cứu

Tập trung nghiên cứu cơ sở lý thuyết về phương pháp thiết kế lấy người dùnglàm trung tâm (UCD) Nghiên cứu quá trình khảo sát và đánh giá kết quả thu thập

được trong thực tế mục đích cải thiện ứng dụng Đặc biệt, áp dụng được phương pháp

thiết kế lay người dùng làm trung tâm vào nghiên cứu đối tượng người dùng cuối củaứng dụng HanoiBus.

3.2 Pham vi nghiên cứu

Về thời gian: Các số liệu, đữ liệu thu thập được trong năm 2023

vẻ không gian: Nghiên cứu được thực hiện trên địa bàn thành phố Hà Nội,

Việt Nam, những người đã và dang sử dung ứng dụng HanoiBus.

Trang 18

Về lĩnh vực nghiên cứu: Đề tài tập trung vào nghiên cứu phương pháp thiết kếlấy người dùng làm trung tâm, toàn bộ nghiên cứu sẽ được áp dụng vào cải thiện

ứng dụng HanoiBus.

Về sản phẩm của dé tài: Sản pham đầu ra của đề tài sẽ là giao diện được cải

thiện của ứng dugn HanoiBus theo phương pháp UCD trên các thiết bị di động

4 MỤC ĐÍCH VÀ NHIỆM VỤ NGHIÊN CỨU

Đề tài được đưa ra với mục tiêu: Áp dụng phương pháp thiết kế lẫy người dùnglàm trung tâm để xây dựng giao diện ứng dung HanoiBus, nhằm tạo ra sản pham cóchất lượng cao, dễ sử dụng và đáp ứng nhu cầu người dùng, đem lại trải nghiệm tập

luyện hiệu quả nhất.

Nhiệm vụ của nghiên cứu sẽ bao gồm:

- Nghiên cứu tong quan về phương pháp thiết kế lay người dung làm trung tâm

- Nghiên cứu tổng quan về ứng dụng di động

- Xây dựng quy trình thiết kế giao diện ứng dụng Hanoi Bus dựa trên phương

pháp thiết kế lay người dung làm trung tâm

- Phân tích các ứng dụng hỗ trợ hiện có phổ biến trên thị trường, khảo sát cácnhóm đối tượng người dung cụ thé

- Tổng hợp các kết quả dé đưa ra các tính năng đáp ứng nhu cầu người dung và

đề xuất các giải pháp thiết kế giao diện

- Thực hiện các bước thử nghiệm và đánh giá hiệu quả của sản pham được thiết

kế và đề xuất các giải pháp cải thiện giao diện ứng dụng và tối ưu hóa trải nghiệmngười dùng.

5 PHƯƠNG PHÁP NGHIÊN CỨU

Đề tài sử dụng kết hợp các nhóm phương pháp nghiên cứu lý thuyết, phân tích,

tong hợp và kết hợp với phương pháp nghiên cứu phi thực nghiệm nhằm phân tích vàlàm rõ các lý thuyết về phương pháp thiết kế lay người dung là mtrung tâm (UCD)

Thu thập và phân tích các dữ liệu thu thập được từ người dùng/ những người

tham gia khảo về sử dụng ứng dụng/ dịch vụ HanoiBus nhằm đánh giá tính khả dụng

va trải nghiệm của người dùng với ứng dụng hiện tại và giải pháp cho tương lai.

Trang 19

6 Ý NGHĨA DE TÀI

Về mặt khoa học, dé tài có ý nghĩa ở chỗ nó góp phan phát triển các lý thuyết

và phương pháp trong lĩnh vực thiết kế giao diện người dùng (UI) và trải nghiệm

người dùng (UX) Cu thé, đề tài này có thé giúp chúng ta hiểu rõ hơn về các yếu tố ảnh

hưởng đến trải nghiệm người dùng khi sử dụng ứng dụng xe buýt, từ đó đưa ra các giảipháp thiết kế hiệu quả hơn thông qua việc:

Nghiên cứu về nhu cầu và hành vi của người ding ứng dụng xe buýt: Dé thiết

kế một ứng dụng xe buýt thân thiện với người dùng, cần hiểu rõ nhu cầu và hành vicủa người dùng Nghiên cứu này có thể được thực hiện bằng các phương pháp như

khảo sát, phỏng van và phân tích dit liệu

Nghiên cứu về các yếu tô ảnh hưởng đến trải nghiệm người dùng khi sử dung

ứng dụng xe buýt: Sau khi hiểu rõ nhu cầu và hành vi của người dùng, cần xác địnhcác yếu tố ảnh hưởng đến trải nghiệm người dùng khi sử dụng ứng dụng xe buýt Các

yếu tô này bao gồm các yếu tố về thiết kế giao diện, chức năng, tính năng, nội dung và

hiệu suât.

Nghiên cứu về các phương pháp thiết kế ứng dụng xe buýt thân thiện với

người dùng: rên cơ sở hiểu rõ nhu cầu, hành vi và các yếu tố ảnh hưởng đến trảinghiệm người dùng, có thé đề xuất các phương pháp thiết kế ứng dung xe buýt thân

thiện với người dùng Các phương pháp này có thé bao gồm các phương pháp về thiết

kế giao diện, thiết kế chức năng, thiết kế nội dung và thiết kế trải nghiệm người dùng

Về mặt thực tiễn, đề tài sẽ giúp nâng cao chất lượng dịch vụ xe buýt, góp phầnthúc đây phát triển giao thông công cộng Cụ thể, các ứng dụng xe buýt được cải thiện

sẽ giúp người dùng thuận tiện hơn trong việc sử dụng dịch vụ xe buýt, từ đó khuyến

khích người dân sử dụng phương tiện giao thông công cộng nhiều hơn

7 CÁU TRÚC ĐÈ TÀI

Nội dung của đề tài sẽ được chia theo cấu trúc 3 chương chính Cụ thể là:

CHUONG I: CƠ SỞ LÝ THUYET CUA DE TÀI

1.1 Téng quan về giao diện ứng dụng di động

1.1.1 Giao diện đồ hoạ người dùng

1.1.2 Khái niệm về Thiết kế giao diện người dùng (UI Design)1.2 Thiết kế trải nghiệm người dùng (User Experience Design)

Trang 20

1.3.1 Tổng quan về Thiết kế lấy người dùng làm trung tâm.

1.3.2 Vai trò Thiết kế lay người dùng làm trung tâm (UCD)1.3.3 Quy trình Thiết kế lấy người người dùng làm trung tâm

(UCD) TIEU KET CHƯƠNG 1

CHƯƠNG II: PHƯƠNG PHAP THIET KE LAY NGƯỜI DUNG LAM TRUNG

TAM TRONG VIỆC PHAN TÍCH UNG DUNG HANOIBUS

2.1 Về ứng dung HanoiBus

2.1.1 Tổng quan về thông tin đội ngũ phat triển

2.1.2 Hiện trạng của ứng dụng HanoiBus2.1.3 Đối tượng người dùng dùng ứng dụng HanoiBus2.1.4 Các chức năng của ứng dụng HanoiBus

2.2 _ Phân tích thị trường đối thủ cạnh tranh

2.2.1 Xác định đối tượng cạnh tranh

2.2.2 Hiện trạng ứng dụng HanoiBus với các đối thủ cạnh tranh

2.3 Nghiên cứu người dùng

2.3.1 Đối tượng nghiên cứu2.3.2 Câu hỏi và kết quả thu được sau khi nghiên cứu đánh giá người dùng

2.3.3 Xây dựng Personas cho ứng dụng

2.4 Phương án cải thiện ứng dụng HanoiBus

2.4.1 Đề xuất Kiến trúc thông tin mới2.4.2 Đề xuất Userflow mới

TIEU KET CHUONG II

Chương III Áp dụng phương pháp UCD vào thiết kế cải thiện giao diện ứng dụng

HanoiBus cho người dùng cuôi

Trang 21

3.1 Xây dựng phác thảo Wireframe của ứng dụng HanoiBus

3.2 Xây dựng hệ thống thiết kế ứng dụng HanọNus

3.2.1 Hệ thống màu sắc3.2.2 Hệ thống chữ (Typography)3.2.3 Hệ thống biểu thượng (Icongraphy)3.2.4 Hệ thống lưới (Layout Grid)

3.2.5 Minh hoa (Illustration)

3.2.6 Các thành phần UI (UI Component)3.3 Thiết kế giao diện hình ảnh của ứng dụng Hanoibus cho đối tượng người dùng

CUƠI

TIỂU KET CHƯƠNG III

Trang 22

CHƯƠNG I: CƠ SỞ LÝ THUYÉT CỦA ĐÈ TÀI

1.1 Tổng quan về giao diện ứng dụng di động

1.1.1 Giao diện đồ hoạ người dùng

Giao diện đồ hoạ người dùng, gọi tắt là GUI (Graphical User Interface), hiện có

nhiều khái niệm và giải thích được đưa ra như sau:

Computer Hope [1]: Giao điện đồ họa người dùng là một hệ thống gồm các

thành phần trực quan tương tác cho phản mềm máy tính GUI hiển thị các đối tượngtruyền tải thông tin và biểu thị các hành động mà người dùng có thé thực hiện Các đốitượng thay đổi màu sắc hién thị khi người dùng tương tác với chúng

The Essential Guide to User Interface Design [2]: Trong một giao điện đồ họa

người dùng (GUI), người dùng tương tác với thiết bị điện tử thông qua các đói tượng

hiền thị Những đối tượng đó được tương tác sửa đối bằng cách nhìn, nghe, chạm,

nói Các hoạt động bao gồm truy cập đôi tượng bằng cách trỏ, chọn và thao tác

Combinatorial Optimization of Graphical User Inrerface Designs [3]: Giao

diện người dùng đồ hoa (GUD), là phương tiện chính dé tương tác với các hệ thốngmáy tính, Nó tận dụng khả năng nhận thức và vận động của con người cho các nhiệm

vụ cơ bán như thăm đò và gọi lệnh, tìm kiểm thông tín và các nhiệm vụ khác Thiết kếGUI phải được thực hiện sao cho kết quả đạt được sự cân bang giữa yếu tổ con người

và mục tiêu kỹ thuật.

Handbook of Human-Computer Interaction [4]: Giao điện đồ họa người dùng(GUD sử dụng cửa số, biêu tượng, menu và thiết bị tró dé con người giao tiếp và tương

tác với máy tính Thiết kê GUI phải liên quan chính xác và hiệu quả đền các nhiệm vụ,

quy trình làm việc, mục tiêu, trình độ học vân, tính cách và văn hóa cửa người dùng.

Qua một số khái niệm và giải thích như trên, ta có thé hiểu một cách đơn giản:GUI là một nơi được thiết kế để tương tác với người dùng thông qua các phần tử đồhọa như biểu đồ, hình anh, nút bấm, thanh trượt va các thành phần khác Mục tiêu

chính của GUI là làm cho việc tương tác với máy tính trở nên dễ dàng, trực quan và

thuận tiện cho người dùng Có thể nói GUI là một thê loại của giao diện người dùng

UI (User Interface).

Trước khi bat dau GUI, máy tinh đã có Giao diện dòng lệnh CLI line Interface) Vào thời điểm đó, không phải ai cũng có máy tính và không phải aicũng có kiến thức để sử dụng nó GUI lần đầu tiên được phát triển tại Xerox PARC

(Command-(Mỹ) bởi Alan Kay, Douglas Engelbart và một nhóm các nhà nghiên cứu khác vào

Trang 23

năm 1981 [5] GUI được coi là thân thiện với người dùng hơn bởi vì chúng không phải

là những dòng lệnh khó hiểu, cần phải ghi nhớ Ngoài ra, với GUI, người dùng khôngcần biết bất kỳ ngôn ngữ lập trình nào Do tính dễ sử dụng và vẻ ngoài hiện đại hơn, hệđiều hành có giao điện GUI đã chiếm lĩnh thị trường ngày nay

Vi dụ về giao điện GUI: Apple macOS, Microsoft Windows Bat kỳ chương

trình nào của Microsoft (bao gồm Word, Excel và Outlook ), các trình đuyệt Internet(Internet Explorer, Chrome và Firefox ) người dùng có thé tương tác với GUI bang

File Home Insert Draw Design Layout References Mailings Review View Help | Acomments | | 7 Editing ~ |

Page1of1 0words Vietnamese ‘Di Focus f -———#——+ 11% i

Hinh 1.1 Giao dién cua Microft Word.

Trong giao diện của Microsoft Word, chúng ta có thé thay được một GUI hoàn chỉnh

có thể bao gồm các thành phần sau:

Các biểu tượng: Biểu tợng là hình ảnh đại diện cho một ứng dung, chức năng

hoặc mục dir liệu

Hình 1.2 Biểu tượng của Microft Word

Trang 24

Blank document Chao mừng bạn đến với Word Giãn cách đơn (trống) Sơ yếu lý lịch màu xanh xám

Hình 1.3 Các danh sách tao Tài liệu.

Các thanh công cụ: Thanh công cụ chứa các nút bam dé thực hiện các lệnh

hoặc chức năng phô biên.

File Home Insert Draw Design Layout References Mailings Review View Help

Hình 1.4 Thanh công cu.

Các hộp thoại: Hộp thoại cung cấp một cách để người dùng nhập thông tin

hoặc thực hiện các thao tác.

1.1.2 Khái niệm về Thiết kế giao diện người dùng (UI Design)

Interaction Design Foundation đưa ra khái niệm: Thiết kế giao điện ngườidùng gọi tắt là UI (User Interface design) là quy trình mà nhà thiết kế sử dụng dé xâydựng giao diện trong phần mềm hoặc thiết bị máy tính, tập trung vào hình thức hoặcphong cách [6]

Thiết kế giao diện người dùng (UI design) là một tập hợp con của một lĩnh vực

nghiên cứu được gọi là tương tác giữa người và máy tính (HCI- Human computer

interaction) Giao điện người dùng — UI, nơi mà người dùng có thé tương tác với sản

phẩm, về cơ bản có hai thành phan: đầu vào và đầu ra Đẩu vào là cách một ngườitruyền đạt nhu cầu hoặc mong muốn của mình tới máy tính Một số thành phần đầuvào phổ biến là bàn phím, chuột, bi xoay, ngón tay của một người (đối với màn hình

cảm ứng) và giọng nói của một người (đối với hướng dẫn bằng giọng nói) Đầu ra là

cách máy tính truyền tải kết quả tính toán và yêu cầu của nó tới người dùng

Vì vậy, Thiết kế giao diện là sự kết hợp của các cơ chế đầu vào và đầu ra đápứng nhu cầu, khả năng và giới hạn của người dùng theo cách hiệu quả nhất có thê

Giao diện người dùng có ba dạng chính:

+ Giao diện đồ hoạ người dùng (Graphical user interfaces): Người dùng tương

tac với máy qua các hình ảnh đô họa trên các bảng điêu khiên điện tử.

Trang 25

“Giao diện được thiết kế tốt là giao diện khiến người dùng tập trung vào thông

tin và nhiệm vụ đang thực hiện, chứ không phải tập trung vào cơ chế được sử dụng détrình bay thông tin và thực hiện nhiệm vu.” Đồng thời, một thiết kê tốt phải dat được

sự cân bằng giữa nhiều mục tiêu, chăng hạn như tính hữu ích của chức năng, khả năng

nhận dạng và dễ sử dụng của chức năng, cũng như độ phức tạp và khả năng dễ học

hỏi Bên cạnh đó, giao điện người dùng cần truyền đạt các giá trị thương hiệu và củng

có lòng tin của người dùng Giao diện được thiết kế tốt, người dùng sẽ có trải nghiệm

liên mạch, có cảm xúc thú vi, thỏa mãn nhu câu sử dung, gan bó với sản phâm.

Ngoài ra, thiết kế giao diện người dùng (UI Design) là quá trình thiết kế giaodiện kỹ thậut sỐ trông và hoạt động như thế nào Nó bao gồm tất cả các thuộc tính trực

quan và tương tác của trang web, phần mềm và ứng dụng; từ màu sắc, kiểu chữ đếncác nút, chức năng cuộn, hoạt ảnh, v.v Quá trình thiết kế giao điện người dùng cũng

tập trung cao độ vào người dùng và mục tiêu luôn là tạo ra các giao diện dễ sử dụng và

cho phép người dùng di chuyền liền mạch

Ví dụ về giao diện trang web Behance cho thấy đây là một sản phẩm có thiết kế

đồ họa GUI tốt, phong cách đơn giản, tập trung vào giải quyết vấn đề giải quyết nhu

cầu tìm kiếm, sử dụng các sản phẩm, các dự án mộtác trực quan nhất Người dùng dễ

dàng thao tác tìm kiến, các hạng mục tìm kiếm một cách đơn giản khi có sẵn các tựa

đề, phân loại hạng mục Ngoài ra ở ngay màn hình chính khi truy cập, chương trình sẽgợi ý những kết quả tiêu biểu trên trang web, dé người dùng đã có cảm quan đúng khi

truy cập Tóm gọn lại, thiết kế giao diện người dùng là quá trình mà người thiết kế xâydựng giao diện của ứng dụng/ phần mềm/ website bằng công cụ là ứng dụng trên thiết

Trang 26

bị máy tính, tập trung vào góc độ hình ảnh và phong cách Giao diện mà người thiết kếtạo ra phải dé sử dụng và mang lại cảm giác dễ chịu cho người dùng Thiết kế giaodiện người dùng (User interface design/ UI design) nằm trong lĩnh vực thiết kế đồ

hoa.

Showcase Your Work & Get Paid

Join Behance, the world's largest creative network

Hình 1.5 Trang Web Behance dé dàng cho phép người dùng truy cập tim kiếm tài liệu

với bố cục Minh hoạ sắp xếp hợp lý

1.2 Thiết kế trải nghiệm người dùng (User Experience Design)

1.2.1 Thiết kế Trải nghiệm người dùng (User Experience Design)

Trải nghiệm người dùng - User Experience (viết tắt là UX) bao hàm tất cảnhững khía cạnh tương tác của người dùng với công ty cũng như dịch vụ và sản phẩm

của công ty đó [7] Theo văn bản ISO 9241-210 [8] định nghĩa là Phản ứng và nhận

thức của một người đến từ việc sử dụng một sản phẩm, hệ thong hay một dich vu,

những việc trên bị ảnh hưởng chính bởi một thứ là hệ thong Tất cả những trai nghiệm

trước đó (Kỹ năng, tính cách, và ngữ cảnh sử dụng) Trải nghiệm người udfng bao

gồm cả những khía cảnh tương tác của người dùng với công ty cũng như dịch vụ và

sản phâm của công ty đó Cụ thể, trải nghiệm đó bao gồm tất cả những cảm xúc, niềmtin, mong muốn, nhận thức, những phản ứng, về mặt tâm lý và vật lý, hành vi và

những gi người dùng đạt được trước, trong va sau khi sử dụng.

Ngoài ra, thiết kế trải nghiệm người dùng được coi là quá trình tao ra sản phâm

có ý nghĩa và hữu ích cho người dùng dựa trên việc nghiên cứu tâm lý hành vi của

người dùng Quá trình này yêu cầu sự kết hợp từ nhiều yếu tố: sản phâm, thương hiệu,thiết kế, tính tiện dụng, chức năng Thiết kế trải nghiệm người dùng tập trung vào trải

nghiệm tổng thê giữa người dùng và sản phâm Nó không chỉ quan tâm đến các yếu tố

Trang 27

Hơn hết, điều quan trọng là phải phân biệt trải nghiêm người dùng (User

Experience) với Giao diện người dùng (User Interface) Hai lĩnh vực này luôn liên

quan tác động đến nhau

Trải nghiệm người dùng (UX) Giao diện người dùng (UD

Diem giông quan trên ứng dụng.

tốt giúp tạo nên một tong thé UX tốt

- Đều là quá trình tập trung vào người dùng UX tập trung vào trải

nghiệm tông thé của người dùng đối với sản pham UI tập trung vàophương diện tương tác của người dùng thông qua những yếu tố trực

- UX là một phạm trù rộng hơn UI, bao hàm một phần của UI Một UI

UX liên quan nhiều tới việc xây

dựng hình ảnh thương hiệu Một UX

tốt sẽ có thể giúp thương hiệu vượt

Điểm khác | lên trên các đối thủ và chiếm lĩnh thị

trường UX quan tâm nhiêu tới cảm

xúc của người dùng khi sử dụng sản

Bảng 1.1 Phân biệt Tải nghiệm người dung (UX) và Giao diện người dùng (DI).

Thiết kế trải nghiệm người dùng (User Experience Design)

Thiết kế trải nghiệm người dùng (UX Design) là quy trình mà đội ngũ thiết kế

sử dụng để tạo ra các sản phâm mang lại trải nghiệm có ý nghĩa và phù hợp cho ngườidùng Điều này liên quan đến việc thiết kế toàn bộ quá trình tích hợp các khía cạnh của

thương hiệu, tihết kế, khả năng sử dụng và chức năng vào sản phẩm Thiết kế UX giảiquyết các vấn đề của người dùng và tạo ra những trải nghiệm phù hợp, dễ dàng, thú vị

và dễ thiết cận.

Trang 28

1.2.2 Các đặc điểm của thiết kế User Experience

Thiết kế trải nghiệm người dùng (UX Design) là quá trình tạo ra các sản phâmdựa trên mang lại trải nghiệm cho người dùng, điều ấy được tạo lên qua 5 nguyên tắc

cơ bản:

Kiến trúc thông tin (Information Architecture)

Kiến trúc thông tin (Information Architecture): IA là cách thức tổ chức và trình

bày thông tin trong một sản phẩm hoặc dịch vụ qua các sơ đồ Kiến trúc thông tin xoay

quanh việc kết nối mọi người với nội dung theo cách dễ hiểu nhất với họ Nó tạo ramột sự phân cấp nội dung trên một trang và sử dụng các phần tử khác nhau như điều

hướng dé thêm cấu trúc Kiến trúc thông tin lay các kiểu thông tin khác nhau vào trongngữ cảnh Nó cho thấy các đối tượng trong sản phâm và cách người dùng có thé tìm

đến một thông tin một cách dé dàng nhất

Pham Văn Hiền - BI9DCPT079 15

Trang 29

Thiết kế tương tac (Interaction Design)

Thiết kết ương tác: Là thiết kế cách thức người dùng tương tác với một sảnphẩm hoặc dich vụ, nếu thiết kế tương tác tốt sẽ giúp người dùng dé dang sử dụng hơn

Mục đích nhằm đáp ứng các mục tiêu của người dùng nhằm truyền đạt thông tin thông

qua đồ hoạ hình ảnh, phông chữ, màu sắc, biểu tượng

Thiết kế tương tác cũng sử dụng nguyễn mẫu dé xác định hành vi và chức năng

cụ thể cho các thành phần khác nhau Người thiết kế cần tạo ra những các thức tương

tác phù hợp và hấp dẫn người dùng và người cũng cần phải có những kiến thức tươngtác may Do đó hãy thiết kế làm sao dé họ có thể làm quen, không gây khó thích ứng

+k+**

Hình 1.7 Tương tác đánh giá — Nguồn: swinburne-vn

Khả năng sử dụng (Usability)

Khả năng sử dụng là mức độ dễ dàng và hiệu quả mà người dùng có thể sử

dụng một sản phẩm hoặc dịch vụ để đạt được mục tiêu của họ Khả năng sử dụng tốt

sẽ giúp người dùng dé dàng học và sử dụng sản phẩm hoặc dịch vụ Ngoài ra, khả

năng sử dụng còn nằm trong sự trung gian giữa UX và UI

Người thiết kế có thê thu thập thông tin về thiết kế của bản thân bằng nhiềucách khác nhau từ các nhóm tập trung sang khảo sát thực tế, từ các nghiên cứu về khảnăng sử dụng trong phòng thí nghiệm cho đến phỏng vấn một đối một và những người

truy cập trang web, theo dõi mat (eye tracking), phân loại thẻ (card sorting), kiểm traA/B, viễn trắc (telemetry) Kiểm tra tính kha dụng giúp hiểu rõ không gian của sản

phẩm trong lúc xácđịnh các hành vi và nhu cầu của người dùng Ở mức độ cao, nó làcách làm tốt để xác minh các giả thuyết với những người dùng thật và đo lường, kiểm

tra một sản phâm thay đôi đê xác nhận nó đáp ứng nhu câu của moi người.

Trang 30

digital

product

user experience interaction

Hình 1.8 Kha năng sử dung — Nguồn: businessconfig

Kha nang truy cap (Accessibility)

Kha năng truy là mức độ ma một phân mém có thé được sử dung bởi người dùng đê đạt được mục tiêu nhât định với hiệu quả cao, năng suât cao, mang lại sự hải

lòng trong bôi cảnh sử dụng của họ.

Khả năng truy cập là những tính năng để làm cho người dùng, ở mọi cấp độ về

kỹ năng, đều có thé hiểu được những tính năng của trang web và sử dụng dé dàng Đối

với những người khuyết tật như khiếm thị, khiếm thính trải nghiệm của họ có thể sẽgặp nhiều khó khăn Vì thế trang web, ứng dụng điện thoại cần tuân thủ những tiêuchuẩn dé hỗ trợ họ có được trải nghiệm day đủ Ví dụ: thiết kế trang web và ứng dụng

có chức năng điêu chỉnh màu sac đê những người mù màu dé sử dụng hon.

Thiết kế trực quan (Visual Design)

Thiết kế trực quan xoay quanh việc sử dụng khía cạnh trực quan của một sản

phẩm dé hoàn thiện trải nghiệm người dùng, đây là một khâu quan trọng trong việcphát triển sản phẩm Nó truyền đạt rất nhiều về thương hiệu của một công ty và có thểảnh hưởng đến cách thức mà một sản phẩm hấp dẫn, thu hút người dùng Thiết kế trựcquan nhằm mục đích định hình và cải thiện trải nghiệm người dùng thông qua việc

Trang 31

xem xét các hiệu ứng của hình minh họa, nhiép ảnh, kiêu chữ, không gian và bô cục,

màu sắc trên khả năng sử dụng của sản phẩm và sự hấp dẫn thâm mĩ của chúng.

Tuy nhiên, nhiều người thường nhằm lẫn UI với UX Thưc tế, những gì ngườidùng nhìn thấy trên thiết bị chính là (UI) chúng các thành phần: chữ, màu sắc, hình

ảnh, đều nam trong thiết kế UX bởi vì thiết kế UX là thiết kế trải nghiệ người dùng,

tức là những gì người dùng làm với ứng dụng đều là trải nghiệm Nói cách khác, UIchỉ là một phần của UX

1.2.3 Anh hưởng của thiết kế UX đối với thiết kế ứng dụng

Ảnh hưởng của thiết kế UX là vô cùng lớn Chính vì thế thiết kế UX là mộtkhâu quan trọng trong suốt bat ky quá trình thiết kế nào Dé đảm bảo tính ổn định, khảnăng chính xác cao, một số nguyên tắc về thiết kế UX ra đời Điểm hình là nguyên tắcthiết kế UX Honeycomb

Honeycomb là một khuôn khổ thiết kế được phát triển bởi Peter Morville vàonăm 2004 Khuôn khổ này sử dụng bảy mặt của trải nghiệm người dùng (UX) dé

hướng dẫn các nhóm thiết kế trong việc mang đến trải nghiệm tốt cho người sử dụng

UX Honeycomb cũng là một công cụ giáo dục tốt để định hướng triển khai phương

pháp “Thiết kế lay người dùng làm trung tâm (UCD)”

(Bang tin cay)

Hình 1.10 Mô hình HoneyComb của Peter Moville — Nguồn: Geek Up

Tinh hữu ich (Useful) — khi thiết kế tinh năng này hãy đặt ra câu hỏi: “Sản pham

hoặc tính năng này có giá trị đối với người dùng không?”,”Sản phẩm của bạn có giảiquyết vấn đề cho người dùng không?” Nếu một sản phẩm hoặc tính năng không hữu

Trang 32

ích, không có mục đích và không có lý do gì để xây dựng nó Việc xác định một sản

phẩm có hữu ích hay không đến từ việc nghiên cứu và thấu hiểu insight người dùng kỹ

lưỡng.

Tinh dễ dùng (Usable) - khi thiết kế phải cải thiện giao điện UI và kiến trúc

thông tin(Information Architecture) dễ sử dụng, làm cho việc hoàn thành nhiệm vụ

hoặc sử dụng tính năng trở nên dé dàng Prototyping va Testing là quan trong dé xácđịnh các điểm “chạm” và cải thiện trải nghiệm người dùng Đội ngũ cũng phải tiến

hành kiểm tra UX để đảm bảo rằng các bản phát hành mới đáp ứng yêu cầu của dự án

và đông thời đáp ứng nhu câu của người dùng.

Tính hấp dẫn (Desirable) — thâm mỹ và tính hấp dẫn làm cho các sản phẩm số

trở nên thú vị khi sử dụng thé hiện rằng sản phẩm thu hút người dùng và tạo cho họnhững cảm giác tích cực khi sử dụng sản phẩm Và hải can thận xem xét cảm xúc va

tâm trạng của người dùng dé xác định tính hấp dẫn của sản phẩm Mục tiêu là làm hàilòng người dùng với các sản phâm và tính năng giải quyết vân dé một cach dé dang.

Dé tìm thấy (Findable) — thé hiện ở việc sản phẩm đảm bao rang người dùng có

thé dé dàng điều hướng tới những nội dung mà họ muốn Người dùng biết được mìnhđang ở đâu, có thê đi đâu và làm gì trong ứng dụng Đối với sản phẩm kỹ thuật số như

ứng dụng di động, việc luôn giữ phần điều hướng ở cuối trang xuyên suốt các mànhình, hay việc sử dụng các icon quen thuộc, có tính trực quan cao góp phần không nhỏ

cải thiện khả năng tìm kiếm

Dễ truy cập (Accessible) — tiết kế các sản phẩm có tính truy cập dé dàng là điều

vô cùng cần thiết, phải đảm bảo rằng mọi người có thê điều hướng trang web một cách

hiệu quả và tiếp nhận nội dung của nó Dé đảm bảo sản phẩm dễ tiếp cận đối với đông

đảo người dùng nhất, cần phải tạo racác trải nghiệm phù hợp với cả những người dùngkhuyết tật Ví dụ, giao diện người dùng bằng giọng nói (VUI) giúp người mù sử dụngứng dụng, nhưng cũng quan trọng đối với người đang lái xe

Đáng tin cậy (Credible) — Sự tin tưởng và dang tin cậy là rat quan trọng để thu

hút và giữ chân người sử dụng sản phẩm Ví dụ, việc “giảm cấp” hoặc “hủy” dịch vụtrả phí có đễ dàng đối với người hay không? Hãy làm cho các nhiệm vụ này trở nên dễ

dàng thực hiện với người dùng, nó sẽ giúp tạo sự tin tưởng, tăng khả năng người dùng

sẽ quay lại Một trải nghiệm khó khăn sẽ “làm phiền người dùng” và làm tốn hại đến

uy tin của sản phẩm và thương hiệu Khi đó đảm bảo rằng các lời “kêu gọi hành động”

(Call-to-Actions) phải dẫn dat người dùng đi theo đúng kết quả được đề cập

Trang 33

Có giá trị (Valuable) — Có giá trị (Valuabcủa sản phẩm đối với người dùngđược tạo nên từ tất cả những yếu tố kể trên Một sản phẩm có giá trị giải quyết được

van đề mà người dùng gặp phải một cách nhanh chóng, đơn giản và đáng tin cậy

1.3 Thiết kế lấy người dùng làm trung tâm (User - Centered Design)

1.3.1 Tổng quan về Thiết kế lẫy người dùng làm trung tâm.

Theo Interaction Design Foudation: Thiết kế lẫy người dùng làm trung tâm viếttắt là UCD (User Centered Design) /à một quy trinh thiết kế lặp đi lặp lại trong đó cácnhà thiết kế tập trung vào người dùng và nhu cầu của họ trong từng giai đoạn của quytrình thiết kế từ đó tạo ra các sản phẩm có khả năng sử dụng cao, dễ tiếp cận

Thiết kế lấy người dùng làm trung tâm được tạo ra bởi Donal A Norman’s

Khái niệm này sau đó đã được nhiều người biết tới với cuốn sách "User-CenteredSystem Design: New Perspectives on Human- Computer Interaction”[9], xuất bản năm

1986 Mục tiêu của UCD là tạo ra những hữu ích cho người dùng và tất cả các quyết

định trong toàn bộ quá trình thiết kế đều được thực hiện có cân nhắc đến người dùng,

là phương pháp được các nhà phát triển và nhà thiết kế sử dụng để đảm bảo họ đang

tạo ra các sản phẩm đáp ứng nhu cầu người dùng UCD không dựa trên các ý kiến chủquan mà thưởng dựa vào dit liệu dé hỗ trợ các quyết định thiết kế

Tóm gọn lại, thiết kế giao diện người dùng là quá trình mà người thiết kế xây

dựng giao diện của ứng dụng/ phần mềm/ website bằng công cụ là ứng dụng trên thiết

bị máy tính, tập trung vào góc độ hình ảnh và phong cách Giao diện mà người thiết kếtạo ra phải dé sử dụng và mang lại cảm giác dễ chịu cho người dùng Thiết kế giaodiện người dùng (User interface design/ UI design) nằm trong lĩnh vực thiết kế đồ hoa

Một quá trình thiết kế sản phẩm ứng dụng phương pháp UCD sẽ đặt người dùng

hoặc những dữ liệu thu thập được từ họ làm tiêu chí dé đánh giá thiết kế, sản phẩm haylàm căn cứ dé phát triển các ý tưởng về thiết kế Tuy nhiên, trong quá trình này, yếu tố

người dùng không phải là tất cả Dé có những thiết kế đảm bảo tính khả thi, thì ta còncần xem xét, cân nhắc đến khả năng và những hạn chế về mặt công nghệ, các tínhnăng mà doanh nghiệp có thể cung cấp UCD giúp chúng ta tập trung vào việc giải

quyết đúng vấn đề cho đúng đối tượng với các giải pháp công nghệ phù hợp Đề bắtđầu thiết kế sử dụng phương pháp thiết kế UCD cần phải hiểu được phải ding mô hình

nao Trong thiết kế UCD Có một mô hình đạt theo tiêu chuẩn quốc tế, đó chính là

13407 — mô hình tang đáy Tiêu chuẩn 13407 là cơ sở cho nhiều phương pháp luận của

Trang 34

Hình 1.11 Mô hình HoneyComb của Peter Moville— Nguồn: Geek Up.

- Hiểu bối cảnh sử dụng: Xác định ai là người dùng sản phẩm, tại sao họ sẽ

sử dụng sản phẩm, yêu cầu của họ là gì và họ dùng sản phẩm đó trong môi

trường nào.

- Xác đỉnh yêu cầu: Khi bỗi cảnh được làm rõ, đây là thời điểm dé xác địnhcác yêu cầu chi tiết về người dùng và chức năng của sản pham

- Xây dựng giải pháp thiết kế: Phan này của quy trình có thé được thực hiện

theo từng giai đoạn, xây dựng các nguyên mẫu từ phác thảo thô đến thiết kế

hoan chỉnh.

- Đánh giá sản phẩm: Chia sẻ và kiên tra nguyên mẫu với người dùng cuối dé

đánh giá, sau đó triển khai phản hồi và lặp lại quy trình

Vai trò Thiết kế lẫy người dùng làm trung tâm (UCD)

Thiết kế lay người dùng làm trung tâm (User-Centered Design) có thê giúp cảithiện trải nghiệm người dùng của trong sản phâm theo nhiêu cách khác nhau, bao gôm:

Tăng hiệu quả sử dụng của người dùng và hiệu suât vận hành của tô chức

hay công ty phát triển sản phẩm:

Vì xuyên suôt quá trình phát triên sản phâm, nhu câu và mong muôn của người dùng đêu được tìm hiêu và xem xét, do đó sản phâm khi hoản thiện sẽ có thê giải

quyết van đề của người dùng một cách nhanh chóng va dé dàng Ngoài ra, khi áp dụng

Trang 35

một hướng tiếp cận cụ thể với một quy trình cụ thể thì việc vận hành của công ty sẽdiễn ra dé dàng và hiệu suất hơn, nhất là đối với đội ngũ phát triển sản pham

Giúp giảm những chỉ phí liên quan tới đào tạo và hỗ trợ:

Một sản phẩm áp dụng phương pháp UCD sẽ dam bảo được tính dé hiểu và dé

sử dụng, tử đó hạn chế được những rủi ro hay lỗi khi được đưa vào quá trình sử dụng

thực tế Chính vì vậy, chi phí doanh nghiệp hay nhà phát triển cần trả cho việc dao tao,hướng dẫn khách hang sử dụng sản phẩm hay chi phí dành cho các dịch vụ chăm sóc

khách hàng cũng sẽ giảm.

Tăng lợi thế cạnh tranh:

Trong thời đại phát triên mạnh mẽ của công nghệ, hàng nghìn san phâm mớiđược ra đời mỗi năm, thi trải nghiệm người dùng tốt (việc người dùng thấy sản phẩm

có ich, dé dùng, tương tác sử dung dé dàng, giải quyết đúng van đề) là yếu tố quan

trọng giúp một sản phẩm trở nên nổi bật và khác biệt UCD là phương pháp giúp cảithiện và xây dựng một trải nghiệm đó trở nên tốt nhất có thê

Góp phần tạo nên các giá trị bền vững:

Khi áp dụng phương pháp UCD vào quá trình phát triển sản pham, đội ngũ thiết

kế sẽ có gắng không bỏ sót một tập người dùng nào trong nhóm người dùng mục tiêu

và tập trung tìm hiểu về những thông tin liên quan tới họ bao gồm thông tin về nhânkhẩu học, thói quen, văn hóa Những doanh nghiệp phát triển sản pham vì đó tập

trung hơn vao các giá tri của con người, thay vì hoàn toàn chạy theo xu hướng và thị

trường Đây là một trong những yếu tố quan trọng giúp doanh nghiệp đó phát triểntheo hướng bền vững Dé đạt được những hiệu quả trên, người thiết kế cần nắm rõ một

số nguyên tắc khi ứng dụng phương pháp Thiết kế lấy người dùng làm trung tâm

(UCD) như sau [10]:

Tập trung sớm và thường xuyên vào người dùng:

Khi áp dụng phương pháp UCD, đội ngũ thiết kế sẽ cần tập trung tìm hiểu nhu

cầu, mong muốn, những “điểm đau” hay khó khăn của người dùng cũng như cách thức

và ngữ cảnh khi họ tương tác với sản phẩm càng sớm càng tốt dé có thé phát hiện vàxác định được van đề trước khi quá muộn dé có thé sửa lại hay cải thiện “Quá muộn”

ở đây chỉ thời điểm khi chúng ta đã đầu tư nhiều thời gian và công sức vào sản phâm

(có thé là thời điểm đã hoàn thiện thiết kế, khi đã tung sản phẩm ra thị trưởng ) Mộtsản phâm sẽ không bao giờ có thể giải quyết được những vấn đề của người dùng mộtcách tối ưu trong phiên bản đầu tiên của nó Do đó, các nhà phát triển sản pham không

chỉ cân tập trung vào tìm hiéu người dùng càng sớm cảng tot, mà cũng cân cân nhac đê

Trang 36

họ tham gia xuyên suốt vào quá trình triển khai và ngay cả sau khi sản phẩm đã đượcđưa vào sử dụng, thông qua những buôi phỏng van, quan sát hay kiểm thử sản phẩm

dé luôn cải thiện và xây dựng phiên bản tốt nhất có thé của sản phẩm Đó cũng là lý do

mà Facebook tiến hành kiểm thử A/B (A/B Testing) rất nhiều trên các sản phẩm hiện

hành của mình [11] Kiểm thử A/B một hình thức mà trong đó đội ngũ thiết kế sẽ đưavào thực tế sử dụng 1 thiết kế mới B và so sánh hiệu quả của nó đem lại với thiết kế A

hiện tại dé tử đó tạo ra những thay đổi hiệu quả hơn [12]

Giữ cho sản phẩm đơn giản nhất có thể [13]:

Sự phức tạp là một trong những yếu tố ảnh hưởng nhiều nhất tới khả năng sửdụng của người dùng Ta có thể thấy được điều này qua ví dụ so sánh giữa trải nghiệm

chỉnh sửa ảnh trên Photoshop và trên Instagram Khi sử dụng Photoshop, ta được tiếp

cận với một loạt những tinh năng, lựa chọn va tiện ích Có thể thấy, ví dụ về

Photoshop dưới đây cung cấp những công cụ tuyệt vời để chỉnh sửa ảnh và thiết kế

chuyên nghiệp tuy vậy lại không hề đơn giản va dé sử dụng, nhất là đối với những

người dùng mới và không chuyên Trên thực tế, hầu hết những người dùng Photoshopkhông sử dụng tất cả các chức năng được cung cấp mà chỉ sử dụng một số tính năng

phổ biến Còn đối với Instagram, trải nghiệm chỉnh sửa ảnh lại dién ra vô cùng nhanh

chóng và dễ dàng chỉ trong một vài thao tác.

Hình 1.12 Ung dụng Photoshop — Nguồn: GCFGlobal

Ta thấy, su phức tap ở đây tùy thuộc vào nhóm người dùng mục tiêu của sảnphẩm Photoshop là phần mềm được thiết kế dành cho nhóm người dùng chính là

những chuyên gia trong lĩnh vực thiết kế, chỉnh sửa ảnh Còn Instagram có nhómngười dùng mục tiêu phô thông hơn với mong muốn đơn giản chỉ là chỉnh sửa nhanh

Trang 37

chóng hình anh dé chia sé với bạn bè Càng ít chức năng thì người dùng lại cảng dễ sử

dụng.

Lam cho sản phẩm dé học (ease of learning) và dé dùng (ease of use):

Tinh dé hoc va dé dung cua san pham, đặc biệt là ứng dụng di động đến từ việcxây dựng, thiết kế các chức năng hay giao diện tương đồng hoặc gần với mô hình tinh

thần của người dùng Mô hinh tinh thần hay “mental models” được hình thành từnhững kinh nghiệm trong quá khứ, là cách chúng ta nhìn nhận thế giới xung quanh,

cách ta nghĩ những sự vật hay đối tượng quanh ta hoạt động như thế nào Mô hình nàyđặc biệt quan trọng trong quá trình làm sản phẩm Một sản phẩm hay một chức năng

trong ứng dụng nhìn và hoạt động theo những mong đợi, kinh nghiệm từ trước hay môhình tinh thần của người dùng sẽ giúp ho dé dàng học và sử dụng [14] Hình minh họadưới đây mô tả cách con người tiếp nhận thông tin từ thế giới thực, thông qua nhữngkinh nghiệm, kiến thức tử quả khử hình thành nên Mô hình tinh thần - mental

models, mô hình này sẽ giúp người dùng dé dàng sử dụng và học hỏi khi giao tiếp với sản phẩm.

models the prodwet

angerionce

requirernant a

interact

Hình 1.13 Con người hình thành những mô tinh than thông qua việc quan sát va

tương tác với thê giới bên ngoài — Nguồn: medium.com.

Cụ thé, trong thiết kế của một ứng dụng, luồng đi của các chức năng (user flow)cần dễ đoán, sát với thực tế Ngôn ngữ sử dụng ở trên ứng dụng cần đơn giản, tự

nhiên, dé hiểu Ngôn ngữ ở đây có thé là tên các nút bam, nhãn (label) cho các trườngthông tin, câu từ thể hiện các trạng thai như khi người dùng thực hiện thành công một

tác vụ hay khi ứng dụng báo lỗi.

Mang lại cho người dùng cảm giác mọi thứ đang trong tầm kiểm soát củamình khi tương tác với sản phẩm:

Thiết kế có thé tạo cho người dùng cảm giác có được quyền kiểm soát khi tươngtác với sản phâm bang cách cung cấp những giải pháp giúp quá trình nhận thức và đưa

Trang 38

choáng ngợp bởi lượng kết quả vô cùng lớn mà còn khiến họ cảm thấy kiểm soát được

cách minh điêu hướng tới các nội dung cân tìm.

Hình 1.14 Tính năng tìm kiếm trên Google — Nguon: google.com

Thiết kế cin hấp dẫn người dùng:

Yếu tố “hấp dẫn” ở đây chỉ về mặt cảm xúc của người dùng khi trải nghiệm sanphẩm Trung bình, chúng ta đưa ra quyết định chỉ trong vòng bốn mili giây dựa vàocảm xúc nhiều hơn là tính lô-gic [16] Một nghiên cứu về khả năng sử dụng trên phầnmềm đã chi ra răng người dùng nghĩ một website sẽ dé dùng dựa vào phần nhìn haygiao diện của website đó [17] Đó là li do mà khi thiết kế sản phẩm, chúng ta khôngchỉ cần phải đáp ứng về mặt khả năng sử dụng mà còn phải đảm bảo rằng sản phẩm đó

hấp dẫn về mặt cảm xúc Theo Don Norman, một sản phẩm sẽ tác động tới mặt nhậnthức của người dùng theo ba cấp độ về mặt cảm giác đó là: nhận thức (visceral), hành

vi (behavioral) và phan ánh (reflective) [18].

- Cấp độ nhận thức:

Ở cấp độ này, người dùng tiếp nhận phần nhìn (appearance) của sản phâm vàphản ứng với nó Người dùng sẽ trả lời được các câu hỏi như “Khi mới đầu nhìnthì theo bản năng, mình cảm thấy như thế nào?” “Nó có hấp dẫn không”,

“Thiét kê của nó có khiên mình cảm thay muôn sử dụng nó không?.

Trang 39

- Cấp độ hành vi:

O cap độ này, người dùng xác định được cảm xúc của họ khi sử dụng sản

phâm Người dùng sẽ trả lời được các câu hỏi như “Minh có thích sản phâm này

33c

không”, “Minh có cảm thấy thoải mái khi sử dụng nó không?”

- Cấp độ phản ánh:

Ở cấp độ này, người dùng xác định được hình ảnh của họ khi sử dụng sản

phẩm Người dùng sẽ trả lời được các câu hỏi như “Minh có thích hình anh,những cảm xúc của bản thân khi mình sử dụng sản pham không?”

Các nhà tâm lý học hành vi đã phân loại cảm xúc theo nhiều lý thuyết khác

nhau Phần lớn các lý thuyết này đồng ý rằng cảm xúc biểu hiện ở nhiều cường độkhác nhau và thậm chí có thể kết hợp với những người khác để xây dựng trạng thái

cảm xúc mới Một trong những lý thuyết như vậy là bánh xe cảm xúc của Robert

Plutchik với hình minh họa phía dưới đây Khi nói đến trải nghiệm người dùng, sự gắnkết về mặt cảm xúc sẽ tự hình thành khi người dùng tương tác không chỉ với nền tảng

ứng dụng mà còn với tất cả các khía cạnh của thương hiệu trực tuyến, báo chí đưa tin

và mạng xã hội.

Hình 1.15 Những cảm xúc của người dùng khi tương tác với sản phẩm được thể hiện

qua “Banh xe cảm xúc ” của Plutchik — Nguồn: phanphuongdat

Một sản phẩm thiết kế tốt áp dụng phương pháp UCD sẽ đáp ứng nhu cầu và

mong muốn của người dùng, giúp họ làm việc tốt và hiệu quả hơn Hơn thế, nó còn làsản phẩm người dùng thích, cảm thấy thoải mái, không có ác cảm khi sử dung

Trang 40

Thiết kế và kiếm thử lặp đi lặp lại (Iterative Design and Testing):

Bởi mong muốn và nhu cầu của người dùng không bat biến mà luôn thay đổitheo thời gian Khi ứng dụng phương pháp UCD, sản phẩm sẽ được thiết kế, kiêm thử

và chỉnh sửa xuyên suốt trong cả vòng đời của nó để đáp ứng được những thay đổinày, từ đó nâng cao được lợi thế cạnh tranh của mình

1.3.3 Quy trình Thiết kế lay người người dùng làm trung tâm (UCD)

Thông thường, phương pháp UCD được ứng dụng vào quy trình thiết kế trải

nghiệm người dùng bằng mô hình tầng nổi — đây lay là mô hình triển khai mà đa phan

được áp dụng vào việc phát triển và xây dựng tinh năng Cấu trúc tầng nổi trong UCDtheo chiều bắt đầu từ thấp đến cao Nhìn vào cấu trúc này, các bạn có thé thay trọng

tâm phát triển của sản phẩm tat cả đều bắt nguồn từ người sử dụng Tầng nổi trongUCD là một quá trình làm việc không chỉ kết hợp các giải pháp phân tích mà còn làmột quy trình làm việc liên kết toàn bộ quy trình Vì vậy nếu xuất phát điểm ngườidùng không rõ ràng, sai mục đích phân tích thì sẽ làm ảnh hưởng đến toàn bộ dây

chuyên phát triển Sau đây là quy trình 5 bước của quá trình UCD:

Hình 1.16 Quy trình 5 bước UCD — Nguôn: Sách “(Fundamentals of User-Centered

Design: A Practical Approach”.

Bước 1: Nghiên cứu người dùng (Research User)

Một quy trình thiết kế áp dụng UCD sẽ bắt đầu với việc hiểu được mình thiết kế

cho ai; hiêu được nhu câu, mong muôn, động lực, cũng như trải nghiệm cua ho trong

Tiêu đề	Nghiên cứu phương pháp Thiết kế lấy người dùng làm trung tâm và áp dụng vào thiết kế cải thiện giao diện ứng dụng HanoiBus cho người dùng cuối
Tác giả	Pham Văn Hiến
Người hướng dẫn	Th.S. Nguyễn Lê Mai
Trường học	Học viện Công nghệ Bưu chính Viễn thông
Chuyên ngành	Đa phương tiện
Thể loại	Đồ án tốt nghiệp Đại học
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	134
Dung lượng	30,97 MB