Bài Tập Chương 7 Thiết Kế Giao Diện Người Dùng | Môn Kỹ thuật phần mềm - Đại học Bách Khoa Hà Nội

lOMoAR cPSD| 61548596
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
Bài tập chương 7 – P3
Thiết kế giao diện người dùng Thông tin chung:
Họ và tên sinh viên: Nguyễn Ngọc Sơn Mã số sinh viên: 20235822 Bài 1.1
a) Giao diện người dùng là gì?
1. Là phương tiện để người dùng khai thác các tính năng của phần mềm
2. Là công cụ dịch chương trình sang dạng ngôn ngữ máy
3. Là công cụ truyền dữ liệu giữa các vị trí khác nhau trong mạng
4. Tất cả các phương án trên
b) Lựa chọn nào là các kiểu giao diện người dùng?
1. Giao diện người dùng đồ họa 2. Giao diện dòng lệnh
3. Giao diện ngôn ngữ tự nhiên
4. Tất cả các phương án trên
c) Phần mềm có thể cho phép người dùng tương tác qua thiết bị đa dạng như chuột,
bàn phím, thiết bị nhận dạng giọng nói, màn cảm ứng,…? 1. Đúng 2. Sai
d) Để xây dựng một giao diện người dùng hiệu quả, nhà thiết kế phải bắt đầu bằng
sự hiểu biết về người dùng, bao gồm hồ sơ về tuổi, khả năng thể chất, kỹ năng,
trình độ học vấn, sở thích,…? 1. Đúng 2. Sai
e) Nguyên tác cơ bản trong thiết kế giao diện người dùng?
1. Lấy người dùng làm trung tâm
2. Giảm tải bộ nhớ trên máy người dùng
3. Giao diện cần nhất quán (consistent)
4. Tất cả các phương án trên
f) Những hoạt động được chú trọng khi thiết kế giao diện người dùng?
1. Mô hình hóa và phân tích người dùng, nhiệm vụ, môi trường
Software Engineering Department - SoICT/HUST Trang 1 / 6 lOMoAR cPSD| 61548596
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm 2. Thiết kế giao diện 3. Thẩm định giao diện
4. Tất cả các phương án trên
g) Hướng tiếp cận nào để phân tích tác vụ của người dùng trong thiết kế giao diện?
1. Người dùng cho biết những ưa thích qua bản câu hỏi
2. Dựa vào ý kiến của những lập trình viên có kinh nghiệm
3. Nghiên cứu những hệ thống tự động liên quan
4. Quan sát thao tác người dùng Bài 1.2
a) Trình bày các bước trong quy trình thiết kế giao diện người dùng?
b) Nêu tầm quan trọng của thiết kế giao diện người dùng?
c) Hãy gợi ý một số hướng dẫn về các yếu tố màu sắc trong việc thiết kế giao diện? Bài 1.3
So sánh hai màn hình dưới đây, hãy nhận xét đánh giá về việc thiết kế hai màn hình này? Bài 1.4
Một Hệ thống Website chia sẻ ảnh đơn giản như sau: •
Người dùng có thể truy nhập vào trang Web chia sẻ ảnh để xem các bức ảnh
được đăng tải trên trang. Người dùng có thể nhập vào các bình luận về mỗi bức
ảnh trên trang, sau khi đã đăng nhập vào tài khoản thành viên với tên đăng nhập
(tên đăng nhập là email) và mật khẩu (mật khẩu là số điện thoại). Mỗi bình luận
gắn với một ảnh gồm có các thông tin về tên người đăng, ngày đăng và nội dung bình luận. lOMoAR cPSD| 61548596
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
Software Engineering Department - SoICT/HUST Trang 2 / 6 •
Trên trang chủ, ảnh được hiển thị theo thời gian đăng tải, ảnh mới đăng sẽ được
hiển thị trước, số lượng ảnh hiển thị được phân theo các trang (20 ảnh / 1 trang).
Mỗi ảnh khi đăng tải sẽ gồm có tiêu đề, mô tả ảnh, thời điểm đăng tải, địa điểm
gắn với ảnh, người đăng và số lượt view của ảnh. Mỗi ảnh sẽ được gắn với một
địa điểm từ danh sách địa điểm đã được tạo sẵn. Nội dung file ảnh sẽ không
được lưu vào cơ sở dữ liệu mà chỉ lưu đường dẫn đến vị trí file ảnh trên máy chủ. •
Người dùng có thể tạo các album và sắp xếp ảnh vào đó để thuận tiện cho việc
phân loại. Mỗi ảnh chỉ thuộc về một album. Các ảnh sẽ được gắn một hoặc nhiều
thẻ mô tả (tag), giúp dễ dàng khi tìm kiếm ảnh. Người dùng có thể tự thêm các
tag mới gắn vào ảnh hoặc sử dụng các tag có sẵn được tạo bởi các người dùng
khác. Để đăng tải ảnh lên chia sẻ, người dùng phải đăng ký là thành viên của trang Web. •
Khi đăng tải ảnh người đăng có thể lựa chọn chế độ riêng tư khi chia sẻ ảnh (có 2
chế độ là public: mọi người đều có thể xem và private: chỉ có chủ nhân bức ảnh có thể xem). •
Người quản lý có thể quản lý các tài khoản người dùng và thống kê thông tin ảnh được chia sẻ.
Sử dụng các công cụ thiết kế giao diện (figma, wireframe, mocflow, balsamiq, …) Thiết
kế hình ảnh giao diện trang chủ dành cho tác nhân người dùng cho hệ thống trên. 1.1
a) 1. Là phương tiện để người dùng khai thác các tính năng của phần mềm
b) 4. Tất cả các phương án trên c) 1. Đúng d) 1.Đúng
e) 4.Tất cả các phương án trên
f) 4.Tất cả các phương án trên
g) 4.Quan sát thao tác người dùng 1.2
a) Các bước trong quy trình thiết kế giao diện người dùng:
Phân tích yêu cầu và người dùng: Xác định đối tượng người dùng, mục tiêu sử dụng, môi trường sử dụng.
Mô hình hóa tác vụ và luồng tương tác: Phân tích các nhiệm vụ mà người dùng cần
thực hiện và cách họ tương tác với hệ thống.
Software Engineering Department - SoICT/HUST Trang 3 / 6 lOMoAR cPSD| 61548596
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
Thiết kế giao diện tổng thể: Phác thảo cấu trúc giao diện: màn hình chính, các thành
phần điều hướng, sơ đồ bố cục chung.
Thiết kế chi tiết giao diện: Xây dựng mockup, wireframe hoặc prototype với màu sắc,
font chữ, biểu tượng...
Xây dựng nguyên mẫu (Prototype): Tạo phiên bản thử nghiệm tương tác để kiểm tra thực tế.
Đánh giá và kiểm thử giao diện: Thử nghiệm với người dùng thật: kiểm tra mức độ
dễ dùng, hiệu quả và mức độ hài lòng.
Hoàn thiện và cải tiến: Dựa trên phản hồi để chỉnh sửa và tối ưu giao diện trước khi
đưa vào triển khai chính thức.
b) Tầm quan trọng của thiết kế giao diện người dùng:
Tăng trải nghiệm người dùng (UX): Giao diện thân thiện giúp người dùng thao tác dễ
dàng, nhanh chóng đạt được mục tiêu.
Tăng hiệu suất sử dụng: Giao diện rõ ràng, mạch lạc giúp giảm lỗi thao tác và tiết
kiệm thời gian học cách sử dụng phần mềm.
Tạo ấn tượng chuyên nghiệp: Một giao diện đẹp và trực quan gây dựng hình ảnh
thương hiệu tốt cho sản phẩm/dịch vụ.
Giảm chi phí hỗ trợ: Người dùng dễ sử dụng thì nhu cầu hỗ trợ kỹ thuật sẽ ít hơn.
Cạnh tranh thị trường: Giao diện hấp dẫn có thể là lợi thế lớn so với các đối thủ cùng chức năng.
Thúc đẩy sự chấp nhận và hài lòng: Người dùng sẽ trung thành và giới thiệu sản
phẩm nếu họ cảm thấy hài lòng khi sử dụng.
c) Gợi ý về các yếu tố màu sắc trong thiết kế giao diện:
Sử dụng bảng màu hạn chế: Không nên dùng quá nhiều màu, nên chọn 3–5 màu
chính để giao diện đồng nhất.
Đảm bảo độ tương phản tốt: Để văn bản dễ đọc trên nền, màu chữ và màu nền phải có độ tương phản cao.
Dùng màu sắc theo chức năng: Ví dụ: màu đỏ cho lỗi, màu xanh cho thành công, màu vàng cho cảnh báo.
Software Engineering Department - SoICT/HUST Trang 4 / 6 lOMoAR cPSD| 61548596
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
Tuân thủ nguyên tắc thị giác: Màu sắc nên dẫn hướng người dùng, nhấn mạnh
Software Engineering Department - SoICT/HUST Trang 5 / 6 lOMoAR cPSD| 61548596
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
những khu vực hoặc hành động quan trọng.
Tôn trọng văn hóa và tâm lý màu: Ví dụ, màu đỏ ở một số nền văn hóa tượng trưng
cho nguy hiểm nhưng ở châu Á lại tượng trưng cho may mắn.
Hỗ trợ chế độ tối (dark mode): Ngày càng phổ biến, cần lựa chọn màu sao cho phù
hợp cả chế độ sáng và tối. 1.3 Màn hình bên trái: Ưu điểm:
Hiển thị đầy đủ thông tin chi tiết của khách hàng (Customer Information).
Các thông tin cơ bản như tên khách hàng, địa chỉ, hạn mức tín dụng,... được trình
bày theo chiều dọc dễ đọc. Nhược điểm:
Bố cục rời rạc, thiếu tổ chức rõ ràng. Các mục Purchase và Payment liệt kê một cách
lộn xộn, khó nắm bắt nhanh.
Khó so sánh số liệu: Các giao dịch mua và thanh toán không được sắp xếp gọn thành
bảng, khiến việc theo dõi lịch sử giao dịch khó khăn.
Không có tổng kết (Summary) cho người dùng nhanh chóng nắm số dư. Màn hình bên phải: Ưu điểm:
Bố cục hợp lý và có tổ chức: Dùng bảng (table) để phân tách rõ ràng ngày tháng,
mua hàng (purchase), thanh toán (payment) và số dư hiện tại (current balance).
Dễ đọc và dễ đối chiếu: Các dữ liệu được căn chỉnh theo cột nên người dùng có thể
nhanh chóng so sánh và nắm bắt thông tin.
Có tổng hợp số liệu (YTD Summary): Cung cấp thông tin nhanh về tổng mua hàng,
tổng thanh toán và số dư, giúp tiết kiệm thời gian phân tích.
Thông tin phân trang (Page x of y): Gợi ý rằng hệ thống hỗ trợ nhiều trang dữ liệu khi danh sách dài. Nhược điểm:
Giao diện hơi dày đặc (nhiều dữ liệu), có thể cải thiện thêm bằng việc làm nổi bật
những phần quan trọng hơn (ví dụ, dùng màu sắc nhấn hoặc nhóm thông tin theo thẻ). lOMoAR cPSD| 61548596
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
Software Engineering Department - SoICT/HUST Trang 7 / 6 lOMoAR cPSD| 61548596
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm HẾT
Software Engineering Department - SoICT/HUST Trang 6 / 6