Chương 5

Nguyên lý thiết kế giao diện

1
 Tóm tắt

o Các công nghệ đa nền tảng mang lại những cải tiến lớn về năng
suất phát triển các ứng dụng di động nhưng cần cân nhắc
nhiều yếu tố khi lựa chọn cách tiếp cận này.
o Mỗi nền tảng có những hướng dẫn thiết kế giao diện riêng phù
hợp cho đặc trưng của nền tảng đó. (Human Interface
Guidelines (HIG) của Apple và Material Design guidelines
(MDG) của Google)
o Để ứng dụng mang lại trải nghiệm người dùng nhất quán =>
cần phân tích sự khác biệt về giao diện người dùng dành riêng
cho từng nền tảng.
o Case study: phân tích nguyên mẫu giao diện (prototype) cho 4
ứng dụng phổ biến là WhatsApp, Instagram, Google Maps, và
Spotify theo hướng dẫn thiết kế giao diện của mỗi nền tảng.
Tom Gulenman. Designing Better Mobile Apps: An Experimental Evaluation of Apple’s and Google’s Design
Guidelines, School of Engineering at Jonkoping University within Informatics. 2
Mục lục
1. Giới thiệu
2. Phương pháp và thực thi
3. Sự khác biệt về khả năng sử dụng giữa iOS
và Android
4. Những hiểu biết chung về thiết kế giao diện
di động đa nền tảng
5. Các hướng dẫn thiết kế nâng cao trải nghiệm
người dùng

3
Mục lục
1. Giới thiệu
2. Phương pháp và thực thi
3. Sự khác biệt về khả năng sử dụng giữa iOS
và Android
4. Những hiểu biết chung về thiết kế giao diện
di động đa nền tảng
5. Các hướng dẫn thiết kế nâng cao trải nghiệm
người dùng

4
1. Giới thiệu

Thiết kế giao diện người dùng của các ứng dụng đa nền tảng
hướng đến:
- Số lượng mã dành riêng cho từng hệ điều hành là ít nhất
- Thu hút đồng thời cả hai nhóm người dùng Android và iOS.

Mục tiêu:
- Hiểu được sự khác biệt về khả năng sử dụng của các thành
phần giao diện người dùng chính (UI element) trong 2 nền
tảng Android và iOS
- Nắm được cách sử dụng các yếu tố giao diện người dùng và
các mẫu thiết kế cần tránh trong ứng dụng đa nền tảng
- Hiểu được các yếu tố chính khác ảnh hưởng tích cực hoặc
tiêu cực đến trải nghiệm người dùng
5
1. Giới thiệu

Hướng dẫn giao diện người dùng (User interface guidelines)

bao gồm các quy tắc và yếu tố để thiết kế một giao diện.

Chúng nhằm giúp các nhà thiết kế tạo ra các giao diện hiệu
quả và phù hợp với công thái học chung của nền tảng.

Mục tiêu của các công ty đề xuất hướng dẫn (Google và Apple)
là khuyến khích các nhà phát triển tạo ra các ứng dụng chất
lượng tốt hơn.

6
1. Giới thiệu

Material Design guidelines (MDG) được phát triển vào năm

2014 bởi Google.

Ví dụ các thành phần giao diện theo hướng

dẫn Material Design

Ví dụ đổi màu một phần của nút bấm khi

người dùng chạm vào để tạo hiệu ứng
phản hồi thao tác của người dùng

7
1. Giới thiệu

Human Interface Guidelines (HIG) được Apple đề xuất nhằm

hướng dẫn xây dựng giao diện người dùng trên hệ sinh thái
của họ bao gồm: MacOS, iOS và iPadOS, watchOS,…

Các nội dung chính của HIG bao gồm những hướng dẫn về:
• Metaphors
• Reflect the User’s Mental Model
• Explicit and Implied Actions
• Direct Manipulation
• User Control
• Feedback and Communication
• Consistency
• WYSIWYG (What You See Is What You Get)
• Forgiveness
• Perceived Stability
• Aesthetic Integrity
• Modelessness 8
1. Giới thiệu

- Ma trận các loại người dùng,

các loại giao diện cũng như các
danh mục ứng dụng

- Khi kết hợp hai nguyên tắc

thiết kế giao diện có thể biểu
diễn các ứng dụng di động trên
một phổ liên tục dựa trên việc
chúng tuân theo các nguyên
tắc nào nhiều hơn
9
1. Giới thiệu

Nội dung cụ thể:

- Sự khác biệt về khả năng sử dụng (usability) thông qua việc
xem xét cùng một ứng dụng với 2 phiên bản được xây dựng
theo nguyên tắc thiết kế giao diện khác nhau.
- Các yếu tố chính gây ra sự không quen thuộc và các vấn đề
về khả năng sử dụng
- Những kiến thức có thể áp dụng cho thiết kế giao diện ứng
dụng di động đa nền tảng từ các nguyên tắc thiết kế

10
Mục lục
1. Giới thiệu
2. Phương pháp và thực thi
3. Sự khác biệt về khả năng sử dụng giữa iOS
và Android
4. Những hiểu biết chung về thiết kế giao diện
di động đa nền tảng
5. Các hướng dẫn thiết kế nâng cao trải nghiệm
người dùng

11
2. Phương pháp và thực thi

2.1 Lựa chọn phương pháp thực hiện

- Phương pháp: nghiên cứu thử nghiệm, trước hết lập ra các
giả thuyết (hypotheses) sau đó thiết kế thử nghiệm để xác
nhận củng cố hoặc bác bỏ giả thuyết.
- Thử nghiệm trực tiếp kết hợp với phỏng vấn

2.2 Lựa chọn các ứng dụng để thử nghiệm

12
2. Phương pháp và thực thi

Câu hỏi:
- Tại sao không thử nghiệm trực tiếp trên các
ứng dụng gốc từ các kho ứng dụng của
Google và Apple mà lại cần xây dựng
prototypes tương ứng của ứng dụng để
thử nghiệm?

13
2. Phương pháp và thực thi

Tạo mẫu (prototyping) đóng vai trò quan trọng trong mọi quá
trình thiết kế.

Một nguyên mẫu giao diện người dùng là một giả thuyết - một
giải pháp thiết kế ứng viên đang được xem xét cho một vấn đề
thiết kế cụ thể.

Có nhiều loại nguyên mẫu, ví dụ:

- Nguyên mẫu trang đơn bao gồm một trang duy nhất và đại diện cho
một phần của thiết kế giao diện người dùng. Nguyên mẫu nhiều trang
đại diện cho một mẫu có đủ menu, màn hình và mục tiêu nhấp chuột
để cho phép người dùng hoàn thành một nhiệm vụ.
- Nguyên mẫu thực tế và chi tiết so với nguyên mẫu phác thảo bằng
tay trên giấy.
- Nguyên mẫu tương tác so với nguyên mẫu tĩnh.
14
 2. Phương pháp và thực thi

Low-fidelity prototypes
- Các nguyên mẫu có độ trung thực thấp rất đơn giản, dễ chế tạo và sử
dụng.
- Đây là những bản phác thảo hoặc bản in của một thiết kế nhất định.
- Nguyên mẫu có độ trung thực thấp không cho phép người dùng
tương tác với sản phẩm. Sketches, Storyboards là những ví dụ điển
hình về kỹ thuật nguyên mẫu có độ trung thực thấp.

https://www.justinmind.com/blog/low-fidelity-vs-high-fidelity-prototypes/
15
2. Phương pháp và thực thi

High-fidelity prototypes
- Các nguyên mẫu có độ trung thực cao cho phép đầy đủ chức năng và
tương tác độc lập.
- Công cụ để kiểm tra khả năng sử dụng và tinh chỉnh các chi tiết
nhưng tốn nhiều thời gian để tạo và điều chỉnh.
- Phù hợp hơn cho các bài kiểm tra khả năng sử dụng trong giai đoạn
cuối của quá trình phát triển.

https://www.justinmind.com/blog/low-fidelity-vs-high-fidelity-prototypes/
16
2. Phương pháp và thực thi

Câu hỏi:
- Trong thử nghiệm này nên xây dựng
prototypes dạng nào, low-fidelity
prototypes hay high-fidelity prototypes?

17
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
WhatsApp

Screens of the
WhatsApp iOS (left)
and Android (right)
prototypes 18
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
iOS WhatsApp prototype screens

19
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
iOS WhatsApp prototype screens

20
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
iOS WhatsApp prototype screens

21
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
Android WhatsApp prototype screens

22
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
Android WhatsApp prototype screens

23
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
Android WhatsApp prototype screens

24
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
Google Maps

Screenshots of the
Apple Maps (left) and
Google Maps (right)
apps 25
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
Spotify

Screenshots of the
Apple Music (left)
and YouTube Music
(right) apps 26
2. Phương pháp và thực thi

Thiết kế high-fidelity prototypes cho 4 ứng dụng trên công cụ

Figma
Instagram

Screens of the
Instagram prototypes
with iOS on the left
and Android on the
right 27
2. Phương pháp và thực thi

2.3 Thu thập dữ liệu

- 34 người tham gia, 16 nữ và 18 nam, từ 19 đến 28 tuổi.
Một nửa số người tham gia là người dùng iOS, nửa còn lại
là người dùng Android, tất cả đều có kinh nghiệm quen
thuộc với nền tảng trong ít nhất 3 năm qua.
- Tất cả những người tham gia đều là sinh viên và quen
thuộc với các khái niệm về các ứng dụng được khảo sát.
- Những người tham gia được giao một loạt nhiệm vụ và đo
lường các chỉ số về khả năng sử dụng, bao gồm thời gian và
các tương tác cần thiết để hoàn thành nhiệm vụ.
- Màn hình, cũng như âm thanh, được ghi lại trong toàn bộ
phiên kiểm tra.

28
2. Phương pháp và thực thi

2.4 Phân tích dữ liệu

- Lựa chọn các chỉ số dựa trên các thuộc tính khả năng sử
dụng theo mô hình “Mobile Application Usability
Evaluation Metrics”.
- Các thuộc tính chính để thu thập thông tin là: efficiency,
effectiveness, and simplicity.

29
2. Phương pháp và thực thi

2.5 Định nghĩa các metrics

- Task time: Thời gian hoàn thành nhiệm vụ tính bằng giây.
- Number of touches: Số lần chạm vào màn hình mà người
tham gia thực hiện khi cố gắng hoàn thành nhiệm vụ.
- Number of navigational steps: Số lượng giao diện được
truy cập. Điều này bao gồm chuyển đổi giữa các trang và
các điều hướng chính trong một trang.
- Number of errors: Số lượng tương tác dẫn người thử
nghiệm ra xa mục tiêu hiện tại.

30
Mục lục
1. Giới thiệu
2. Phương pháp và thực thi
3. Sự khác biệt về khả năng sử dụng giữa
iOS và Android
4. Những hiểu biết chung về thiết kế giao diện
di động đa nền tảng
5. Các hướng dẫn thiết kế nâng cao trải nghiệm
người dùng

31
3.1 Kết quả thử nghiệm định lượng

Task Time
- Kết quả của chỉ số thời gian tác vụ tính bằng giây trên các
nguyên mẫu riêng lẻ dành cho người thử nghiệm iOS và
Android.

32
3.1 Kết quả thử nghiệm định lượng

Touches
- Kết quả của chỉ số lần chạm tính bằng giây so với các
nguyên mẫu riêng lẻ dành cho người thử nghiệm iOS và
Android.

33
3.1 Kết quả thử nghiệm định lượng

Navigational Steps
- Kết quả của chỉ số các bước điều hướng tính bằng giây trên
các nguyên mẫu riêng lẻ dành cho người thử nghiệm iOS và
Android.

34
3.1 Kết quả thử nghiệm định lượng

Errors
- Kết quả của số liệu lỗi tính bằng giây trên các nguyên mẫu
riêng lẻ dành cho người thử nghiệm iOS và Android.

35
3.2 Kết quả thử nghiệm định tính

Cách thực hiện

- Thu thập câu trả lời của những người tham gia qua các bài
phỏng vấn
- Ví dụ: câu hỏi tình huống là “một người dùng muốn tạo một tin
nhắn mới trên WhatsApp”, câu trả lời có thể thu được là
“Người thử nghiệm không nghĩ rằng nút tác vụ nổi (Floating
Action Button (FAB)) là nút phù hợp để tạo tin nhắn mới”
- → Kết quả ghi nhận sẽ là: “Floating Action Button (FAB): Had
trouble associating the “new message” function with it”
- Để kết quả thử nghiệm và phân tích có tính trực quan và dễ
đọc hơn → chia 5 mức theo số lượng người thử nghiệm
tham gia.

36
3.2 Kết quả thử nghiệm định tính

Ví dụ: kết quả thử nghiệm định tính với WhatsApp Android
Prototypes

37
3.2 Kết quả thử nghiệm định tính

Ví dụ: kết quả thử nghiệm định tính với WhatsApp iOS
Prototypes

38
3.3 Phân tích tổng quát

Sự khác biệt về khả năng sử dụng ứng dụng giữa iOS và

Android
- Các tác vụ được thực hiện trên nguyên mẫu iOS nhanh hơn
đáng kể so với nguyên mẫu Android.
- Các chỉ số (metric) có mức độ phụ thuộc lẫn nhau nhất
định.
- Các thử nghiệm định tính cho thấy các quan điểm khác
nhau về trải nghiệm trên cả 2 nền tảng như: bố cục tổng
thể, dễ điều hướng, dễ sử dụng, dễ hiểu, mang lại cảm giác
mượt mà hay các chủ đề màu sắc,…
- Kết quả:
- Chỉ số bị ảnh hưởng nhiều nhất là thời gian tác vụ
- Giao diện người dùng tuân theo các nguyên tắc của Apple trực
quan hơn, dễ sử dụng và điều hướng hơn 39
3.3 Phân tích tổng quát

Các yếu tố chính gây ra các vấn đề về khả năng sử dụng trên
Android
- Floating action buttons (FAB)
- Scrollviews: phải cuộn xuống danh sách các tùy chọn có sẵn
để lựa chọn
- Searchbars
- Draggable views
- Thứ tự của các button, kích thước và phần lề (margin) của
card
- Kiểu dáng của listview
- Các loại điều hướng khác nhau
40
3.3 Phân tích tổng quát

Các yếu tố chính gây ra các vấn đề về khả năng sử dụng trên
iOS
- Searchbars
- Các nút bấm không rõ ràng (buttons with changing icons,
buttons with misleading icons)
- Bottom navigation bar
- Thiếu các bộ lọc hiệu quả

41
3.4 Các so sánh cụ thể

iOS vs. Android Navigation: Top-of-screen navigation

42
3.4 Các so sánh cụ thể

iOS vs. Android Navigation: Primary Navigation Destinations

43
3.4 Các so sánh cụ thể

Floating Action Button: nút tròn nổi trên giao diện người dung,
đặc trưng của Android

• Ưu điểm
⮚ Nút được ưu tiên gắn cho hành động
quan trọng nhất
⮚ Có thể sử dụng nó hiệu quả hơn so
với nút tác vụ truyền thống

• Hạn chế
⮚ Có thể khiến người dùng mất tập
trung khỏi nội dung
⮚ Có thể che mất nội dung phía dưới

44
3.4 Các so sánh cụ thể

iOS vs. Android Navigation: Secondary Navigation

Destinations

45
3.4 Các so sánh cụ thể

iOS vs. Android Navigation:

“Back” Pattern

46
3.4 Các so sánh cụ thể

iOS vs. Android Control Design: Primary call-to-action buttons

47
3.4 Các so sánh cụ thể

Search on iOS vs. Android

48
3.4 Các so sánh cụ thể

iOS & Android Action Menus

49
3.4 Các so sánh cụ thể

iOS & Android Action Menus

50
3.4 Các so sánh cụ thể

iOS & Android

Selection controls

51
3.4 Các so sánh cụ thể

iOS & Android

Date pickers

52
3.4 Các so sánh cụ thể

iOS & Android Tabs

53
3.4 Các so sánh cụ thể

iOS & Android Typography: Default Font

54
3.4 Các so sánh cụ thể

iOS & Android Typography: Text styles

55
3.4 Các so sánh cụ thể

iOS & Android App Icon Size & Shape

56
Mục lục
1. Giới thiệu
2. Phương pháp và thực thi
3. Sự khác biệt về khả năng sử dụng giữa iOS
và Android
4. Những hiểu biết chung về thiết kế giao
diện di động đa nền tảng
5. Các hướng dẫn thiết kế nâng cao trải nghiệm
người dùng

57
4. Những hiểu biết chung về thiết kế giao diện di
động đa nền tảng

Hợp nhất các chức năng

- Một luồng sử dụng có thể chứa nhiều chức năng tương tự,
điều quan trọng là phải làm nổi bật khi một chức năng này
được kết hợp với một chức năng khác.
Thiết kế dạng tab được đánh giá cao
- Thay thế các thanh điều hướng truyền thống phía dưới
màn hình để thêm một mức lọc hoặc điều hướng khác giữa
các nội dung giúp người dùng dễ dàng hiểu được chức
năng của ứng dụng.
Bars and Space
- Nhà thiết kế ứng dụng cần giữ cho menu và các yếu tố điều
hướng ở mức tối thiểu để người dung không bị phân tâm
khỏi thông tin chính mà màn hình cung cấp.
58
4. Những hiểu biết chung về thiết kế giao diện di
động đa nền tảng

FAB và cách sử dụng phổ biến

- Các nút hành động nổi được sử dụng rộng rãi trong các ứng
dụng Android, tuy nhiên nó có thể sẽ che phủ các nội dung
chính khác trên màn hình.
- Không quen thuộc với người dùng iOS

59
4. Những hiểu biết chung về thiết kế giao diện di
động đa nền tảng

Màu sắc và Sở thích Cá nhân

- Mong muốn cá nhân hóa nhiều hơn về chủ đề màu sắc
trong ứng dụng.
Quá tải thông tin
- Người dùng của các hệ điều hành khác nhau dường như có
các ngưỡng khác nhau về yếu tố làm cho giao diện trở nên
lộn xộn.
Tôn trọng các mẫu hiện có
- Mức độ quen thuộc của người dung với các ứng dụng đã sử
dụng và gợi ý rằng các nhà thiết kế nên đánh giá cách hoạt
động của các ứng dụng phổ biến.

60
4. Những hiểu biết chung về thiết kế giao diện di
động đa nền tảng

Sorting
- Làm rõ hơn về cách dữ liệu được sắp xếp và cách thay đổi
thứ tự để cung cấp cho người dùng phương tiện xử lý
thông tin hiệu quả.
Bottom Navigation
- Người dùng thích nhiều tab hơn trong thanh điều hướng
dưới cùng - 5 so với 3 - cung cấp cho họ các phương tiện
hiệu quả hơn để truy cập thông tin.
Pictures and Grouping Content
- Phân nhóm thông tin trên các thẻ card → xử lý thông tin sẽ
dễ dàng hơn.

61
Mục lục
1. Giới thiệu
2. Phương pháp và thực thi
3. Sự khác biệt về khả năng sử dụng giữa iOS
và Android
4. Những hiểu biết chung về thiết kế giao diện
di động đa nền tảng
5. Các hướng dẫn thiết kế nâng cao trải
nghiệm người dùng

62
5. Các hướng dẫn thiết kế nâng cao trải
nghiệm người dùng

Các hướng dẫn thiết kế tương tác trong ứng dụng di động
giúp nâng cao trải nghiệm người dùng:
• Phân tích hành vi người dùng (User behavior)
• Phân tích bối cảnh (Context-aware)
• Cử chỉ của người dùng (Gestures)
• Thao tác nhập dữ liệu (Data Entry)
• Điều hướng giữa các màn hình của ứng dụng (Navigation)

63
5.1 Phân tích hành vi người dùng (User behavior)

Thiết kế dựa trên hành vi là tập hợp các kỹ thuật được sử dụng
để thuyết phục.
Ý tưởng là sử dụng các mẫu hành vi để mang lại lợi ích cho một
thiết kế nhất định, để nó cho phép người dùng tự do lựa chọn
và quyền tự chủ trong hoạt động. Nó tận dụng các hành vi đã
học, để hướng người dùng theo cách đúng đắn.
Làm cho người dùng cảm thấy bình tĩnh và có quyền kiểm soát,
tin cậy.
Với thiết kế đáng tin cậy cho phép người dùng xây dựng thói
quen trong khuôn khổ thiết kế sẽ thúc đẩy mức độ tương tác
và giữ chân người dung.

64
5.2 Phân tích bối cảnh (Context-aware)

Môi trường luôn thay đổi vì thực tế là người dùng di động sử

dụng thiết bị di động của họ bất kỳ thời điểm nào và ở bất cứ
đâu.
Bối cảnh xã hội khác nhau khiến người dùng phân chia sự chú ý
của họ giữa thế giới di động và thế giới thực tế.
Các công nghệ tiên tiến như gia tốc kế, cảm biến hoặc nhận
thức định vị được nhúng vào các thiết bị làm tăng khả năng
thiết kế tương tác sáng tạo.
Giải pháp khi thiết kế cho thiết bị di động là giữ cho nó đơn
giản và cố gắng tập trung vào các chức năng quan trọng nhất.

65
5.3 Cử chỉ của người dùng (Gestures)

Màn hình cảm ứng bao phủ gần như toàn bộ mặt trước của
thiết bị di động, không còn không gian cho các nút vật lý.
Các thiết bị màn hình cảm ứng chủ yếu dựa vào điều khiển cử
chỉ, sử dụng bàn tay con người để tương tác với nội dung trên
màn hình.
Các cử chỉ tiêu chuẩn
trên màn hình cảm ứng:

66
5.3 Cử chỉ của người dùng (Gestures)

Sự khác biệt giữa các cử chỉ tiêu chuẩn của Andoid và iOS

67
5.3 Cử chỉ của người dùng (Gestures)

Cử chỉ cảm ứng: Apple: the 44 pixel target

- Tương tác với màn hình cảm ứng qua các ngón tay: các mục
tiêu cảm ứng nhỏ hơn → khó sử dụng và có nhiều khả năng
xảy ra lỗi → cần thiết kế giao diện để tối ưu cho cảm ứng

25px = có thể chạm vào

40px = tối ưu
Kiểm tra đầu vào cảm ứng trên thiết bị
thực

68
5.3 Cử chỉ của người dùng (Gestures)

Cử chỉ cảm ứng:

- Xem xét 'vùng ngón tay cái’: thiết kế giao diện để thuận tiện
cho các cử chỉ cảm ứng khi sử dụng điện thoại bằng 1 tay

69
5.3 Cử chỉ của người dùng (Gestures)

Cử chỉ động học (Kinesthetic gestures):

- Kinesthetic là khả năng phát hiện chuyển động của cơ thể
- Liên quan đến việc thiết bị di động sử dụng cảm biến để phát
hiện và phản ứng với sự tiếp xúc, hành động và định hướng
cho phép màn hình phản ứng với tốc độ, chuyển động và
hướng của thiết bị di động.

- Ví dụ: lắc thiết bị để thực hiện undo /

redo hoặc chuyển bài hát trong
chương trình nghe nhạc.

70
5.3 Cử chỉ của người dùng (Gestures)

Các hướng dẫn về cử chỉ trong thiết kế giao diện di động:

- Tránh sử dụng các cử chỉ quá phức tạp, hãy dựa vào các cử
chỉ tiêu chuẩn
- Tránh sử dụng cử chỉ tiêu chuẩn cho các hành động không
chuẩn
- Cung cấp các phím tắt có thể thay thế cho các cử chỉ
- Làm cho cử chỉ có thể đảo ngược (undo)

71
5.4 Thao tác nhập dữ liệu (Data Entry)

Nhập dữ liệu là một hình thức tương tác thiết yếu.

Tính hợp lệ của dữ liệu đã nhập có thể được đảm bảo bằng
cách giảm bớt các đầu vào không chính xác.
Trên các thiết bị có màn hình cảm ứng, nhập dữ liệu qua bàn
phím ảo, kích thước phụ thuộc vào màn hình.
Các phương thức nhập yêu cầu bàn phím ảo nên được giữ ở
mức tối thiểu, có thể dùng các phương thức nhập thay thế (ví
dụ: bộ chọn ngày, trường thả xuống, nhóm nút radio, giá trị
mặc định…)

72
5.5 Điều hướng (Navigation)

Người dùng phải điều hướng qua các màn hình khác nhau
Thông tin quan trọng và chức năng chính nên được đặt cao
hơn trong phân cấp điều hướng, cho phép người dùng tiếp cận
nó nhanh hơn.
Khả năng quay lại màn hình trước đó (cử chỉ vuốt / nút quay lại
trong ứng dụng)

73
5.5 Điều hướng (Navigation)

Có hai loại cấu trúc điều hướng

chính được sử dụng trong các ứng
dụng di động
- Cấu trúc điều hướng phẳng: Nội
dung được nhóm hợp lý thành các
danh mục, trong đó mỗi danh
mục có các view cấp cao nhất của
riêng nó.
- Cấu trúc điều hướng sâu: Một
lựa chọn trên mỗi màn hình phải
được thực hiện để điều hướng
đến cấp phân cấp sâu hơn tiếp
theo, cho đến khi đạt đến một
điểm cuối nhất định (các lá trong
cây).

74
5.5 Điều hướng (Navigation)

Các hướng dẫn điều hướng hiệu quả:

- Triển khai điều hướng theo cách hỗ trợ người dùng dễ dàng
tiếp cận nội dung hoặc chức năng mong muốn
- Tránh để cấu trúc điều hướng trở nên quá sâu
- Luôn cho biết vị trí hiện tại của người dùng bên trong ứng
dụng
- Luôn trang bị nút “Quay lại” / “Lên” để cho khả năng quay lại
màn hình trước đó

75
Kết luận

Các yếu tố thiết kế riêng cho từng nền tảng và các nguyên lý /
hướng dẫn thiết kế giao diện HIG hay MDG dẫn đến những
thay đổi về khả năng sử dụng.

Xem xét hoạt động của các thành phần gốc của hai hệ thống
hiểu cách chúng hoạt động và tìm ra sự thỏa hiệp trong việc
hợp nhất các phương pháp tiếp cận khác nhau phù hợp cho
thiết kế của các ứng dụng đa nền tảng.

Người dùng thường muốn kiểm soát tốt hơn ứng dụng của họ
ở mức độ nhất định.

76
HẾT CHƯƠNG 5

77
Thank you
for your
attentions!

78
Phụ lục

Thời gian tác vụ trung bình trên Android và iOS theo nguyên
mẫu. Đây là thời gian trung bình người dùng cần để hoàn
thành tất cả các tác vụ của nguyên mẫu.

79
Phụ lục

Số lần chạm trung bình trên Android và iOS theo nguyên mẫu.
Đây là số lần chạm trung bình mà người dùng cần để hoàn
thành tất cả các tác vụ của nguyên mẫu.

80
Phụ lục

Số bước điều hướng trung bình trên nguyên mẫu Android và

iOS theo nguyên mẫu. Đây là số bước điều hướng trung bình
mà người dùng cần để hoàn thành tất cả các tác vụ của nguyên
mẫu.

81
Phụ lục

Số lỗi trung bình trên Android và iOS nguyên mẫu theo nguyên
mẫu. Đây là số lỗi trung bình mà người kiểm tra mắc phải trong
khi hoàn thành tất cả các nhiệm vụ của nguyên mẫu.

82