Bài tập tuần 09: Thiết kế giao diện người dùng. Mục tiêu của bài tập này gồm: Thực hiện các bài tập (câu hỏi) về các khái niệm cơ bản trong Thiết kế giao diện người dùng, thực hiện thiết kế các màn hình giao diện người dùng cho các chức năng của bài toán (casestudy).
Trang 1Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
Bài tập tuân 09 Thiết kế giao diện người dùng
Mục tiêu
- _ Thực hiện các bài tập (câu hỏi) về các khái niệm cơ bản trong Thiết kế giao diện
người dùng
- _ Thực hiện thiết kế các màn hình giao diện người dùng cho các chức năng của bài
toán (casestudy):
o Cai dat công cụ thiết kế mock-up, ví dụ: Balsamiq, moqups.com,
mockflow.com, screenpeek.io, screely.com, animockup.com
o_ Thiết kế các màn hình giao diện người dùng cho các chức năng
o_ Hiện thực hoá thiết kế thành các màn hình thực trên NetBeans IDE
Đánh giá
- - Hoàn thành các bài tập về các khái niệm cơ bản trong Thiết kế giao diện người
dùng
- _ Hoàn thành thiết kế mock-up cho các màn hình giao diện
- _ Cài đặt thành công các màn hình thực cho ứng dụng trên NetBeans IDE, viết code
xử lý các sự kiện cho các điều khiển trên giao diện
Phần I:
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) Phan 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
Trang 2
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
2
Đúng
Sai
e) Nguyên tác cơ bản trong thiết kế giao diện người dùng?
1
2
3
4
Lấy người dùng làm trung tâm
Giảm tải bộ nhớ trên máy người dùng
Giao diện cần nhất quán (consistent)
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
2
3
4
Mô hình hóa và phân tích người dùng, nhiệm vụ, môi trường
Thiết kế giao diện
Thẩm định giao diện
Tất cả các phương án trên
ø) 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
2
3
4
Bài 1.2
Người dùng cho biết những ưa thích qua bản câu hỏi
Dựa vào ý kiến của những lập trình viên có kinh nghiệm
Nghiên cứu những hệ thống tự động liên quan
Quan sát thao tác người dùng
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 tam quan trong cua 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?
Trang 3
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
CUSTOMER INFORMATION
CUSTOMER NO 1273
NAME CONTEMPORARY OF SIGNS
AQORESS 123 OAK ST
City STATS AUSTIN, TX 28304
¥YTO PURCHASE 47 285.00
CREDIT LIMIT 10,060 00
YTOPAYMENTS 42,684 65
OISCOUNT % so
PURCHASE: ?1JAM -12 22,000.00
PAYWENT †!-/JAA-12 13.000 CO
PUACHA%E O2-MAR-12 16.000.00
PAYMENT 02-MAR.12 16.800 00
PAYMENT 13-4AY-+2 $000 00
PURCHASE 12-JUL -12 9 24 00
PAYMENT 21-SEP-12 6571.45
status ACTIVE
Pine Vé ley Furniture Detad € ustomer Accourt infoematon
Customer Number
Name
Umit PUPAL Jar
Jor jee
Ate vu
Me
23 May 9
t
1
tĩ
YTD SUMMARY 4? 2% @
* =
tì 45⁄4 &'
os AD
CURRENT UALAMLL
Phần II: Thiết kế các giao diện người dùng cho các chức năng của
bài toán (casestudy)
1 Thiết kế mock-up cho giao diện
e©_ Các nguyên tắc cơ bản:
o_ Cách bố trí - Layout
Thẩm mĩ -Aesthetics
Nhất quán - Consistency
e au vao cho thiét kế giao diện :
Nhận biết nội dung - Content awareness
Ít tốn công nhất - Minimal user effort
o_ Đặc tả chỉ tiết các kich ban usecase o_ Các mô tả dữ liệu vào và dữ liệu ra Kinh nghiệm người dùng - User experience
e Thiết kế nhập liệu (input) : Giảm thiểu gõ phím (giá trị mặc định) + Xác thực dữ liệu hợp lệ (dữ liệu được nhập vào trong hệ thống cần xác nhận tính hợp lệ
để đảm bảo độ chính xác của nó.)
e©_ Thiết kế kết xuất (output) : thông tin tóm tắt + thông tin chỉ tiết (thường thể
hiện dưới dạng bảng) + đồ thị (trực quan)
Software Engineering Department - SolCT/HUST
Trang 3/11
Trang 4
Bài tập: Xây dựng biểu đồ chuyển giữa các giao diện người dùng
(Display transition diagram)
Gợi ý:
e Display transition diagram: téng hop mdi lién két gitra cac man hình
e Vidu:
Trường tên người dùng
Màn hình login độc giả
Phím tìm kiếm
Phím đệ trình
oe
Y
Phím gợi ý _——————— | Màn hình chính độc giả
Phím xóa
Phím thoát
⁄ \
Màn hình tìm kiếm dữ liệu Màn hình gợi ý
Chứa trường:
Loại
Số tạp chí
Chứa phim:
Đệ trình
xóa Màn hình danh sách sách Phím đặt trước Cửa sổ đặt trước Phím đệ trình
Bài tập: Thiết kế mock-up cho các màn hình
Gợi ý:
e©_ Sử dụng một công cụ hỗ trợ thiết kế mock-up
e_ Ví dụ: phần mềm Balsamiq
Lt Bựttons Common ee FC ta Media
4 FEB 2006 b
<It>? =| @ 1X9%é 144
weHGRADE
Browser Window Button Button Bar | Tab 6 Calendar Callout Chart far Chart 3 Chart Cc
Trang 5
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
e_ Ví dụ: công cụ trực tuyến : https://mockflow.com/ và
https://wireframepro.mockflow.com/
x Project Edit Review >
Ø
ELEMEMTS
Ctrl+K to Search a
Mui Weve VII UNV BI vip
© hoi
O fadio2 aeneaiedrertmaeainaee
O Fado?
Radio group File upload
eR)
} i
OO
POWER-UP
Ví dụ: Xây dựng mock-up cho màn hình chính của bài toán (casestudy)
Nhãn khẩu có trên địa bàn:
20
Hộ khẩu có trên địa bàn:
6
Nhãn khẩu tạm trú: Nhãn khẩu tam vang:
Trang 6
Bài tập: Đặc tả thiết kế giao diện cho các màn hình
Gợi ý:
e Đối với các trường nhập dữ liệu vào (input) cần mô tả (ghi chú) : khi người dùng
nhập sai yêu cầu, cần có chỉ dẫn nhắc nhở (đưa ra nhắc nhở cụ thể) + cảnh báo
và thông báo lỗi (thông báo cụ thể, dễ hiểu)
e Đặc tả thiết kế giao diện theo mẫu như sau:
Tên màn hình
Thông tin dữ
liệu
Ví dụ: Đặc tả thiết kế màn hình chính của bài toán (casestudy)
Màn hình chính của ứng dụng (main screen): màn hình làm việc sau khi người dùng đăng nhập thành công Màn hình chứa menu bên trái với các nút liên kết để mở các chức năng
chính Khung bên phải chứa các thông tin thống kê chung về các số liệu (nhân khẩu, hộ khẩu, tạm vắng, tạm trú) trong hệ thống
Điều khiển Thông tin dữ liệu
Thuộc tính
Tiêu đề màn hình | Chứa ảnh đại diện và tên | Image + text Hiển thị
Font chữ Nút menu "Nhân | Khi người dùng click sẽ Image + Button | Hiển thị
Sự kiện click Nút menu "Hộ Khi người dùng click sẽ Image + Button | Hiển thị
khẩu" mở màn hình "Quản lý hộ Kích thước image
Sự kiện click Nút menu "Thống | Khi người dùng click sẽ Image + Button | Hiển thị
kê" mở màn hình "Thống kê" Kích thước image
Font chữ
Sự kiện click Khung hiển thị Hiển thị số nhân khẩu có | Image + text Hiển thị
thông tin thống trên địa bàn label + text label | Kích thước image
từ database)
Trang 7
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
Bài tập: Xây dựng các màn hình thực trên NetBeans IDE
Gợi ý:
e Su dung cdc thành phần điều khiển giao diện và công cụ trợ giúp kéo thả trên NetBeans IDE xây dựng các màn hình giao diện thực :
e_ Giao diện trang đãng nhập
LOGIN
User Name:
Password:
e_ Giao diện trang chính
—_—— "
[ay Trang chu Nhân khâu có trên địa bàn:
Hộ khẩu có trên địa bàn:
(0 ae 4
Al Théng Ké
Nhân khảu tạm trú: Nhân khảu tạm vắng:
Wy
e Giao dién quan ly nhân khẩu
am
|| Trang chu
Họ tên Ngày sinh Giới tính Địa chỉ hiện nay mm
F33 Nhân Khâu
A DK tạm vắng Trinh Văn An 1990-12-07 Nam SỐ 1 Tạ Quang Bưu
â soe Trần Thanh Duyên |1997-12-23 Nữ $6 2 Ta Quang Bửu -
| Khai Tir Nguyễn Minh Quân |1995-05-31 Nam Số 2 Tạ Quang Bửu
zái Thống Kê
Nguyễn Tiến Dũng |1964-06-03 Nam Số 4 Ta Quang Bửu
Vũ Mỹ Linh 1965-12-06 Nữ $6 3 Tạ Quang Bửu
Nguyễn Tiến Đạt 1990-09-09 Nam Số 3 Ta Quang Bửu
Nguyễn Trà My 1997-12-12 Nữ $6 3 Ta Quang Biru
Tran Van Nam 1980-07-09 'Nam (Số 4 Tạ Quang Bửu | x
Trang 8
e_ Giao diện thêm mới nhân khẩu
cá| Thêm mới nhân khẩu
Ho va ten:
Ngày tháng năm sinh:
Nguyên quán:
Dân tộc:
Số CMT/CCCD
Nơi thường trú:
Trình độ học vắn:
Trình độ ngoại ngữ:
Nghề nghiệp:
e_ Giao diện đăng ký tạm vắng
December 8, 2019
Khác
() Biệt danh:
si () Giới tính: Nam « () — Tôn giáo: Œ)
0 Hộ chiều số:
() Biét tiêng dân tộc: “)
(9 Nơi làm việc: ¢)
Léj
SốCMT/CCCD: |
Tir ngay: December 8, 2019 — Tal (*)
Dén ngay: December 8, 2019 Tal (*)
Hủy Xác nhận
oA ? z a n
e Giao dién quan ly hd khau
[6| QUẢN LÝ NHÂN KHẨU - x
zm
| Ds Trang chu
|
Mã hộ khâu Họ tên chủ hộ Địa chỉ nies et rsh Nhân Khẩu
TQB002 Nguyén Minh Quan Số 2 Tạ Quang Bửu, quần Hai B Tach HiK
a TQB001 Trinh Van An $6 1 Ta Quang Biru, quan Hai B uyén
TQB003 Nguyễn Tiến Dũng Số 3 Tạ Quang Bửu, quận Hai B
PAI Thống Kê
TQB004 Trần Văn Nam Số 4 Ta Quang Bửu, quận Hai B
Trang 9
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
e_ Giao diện thêm mới hộ khẩu
[#)
Mã hộ khẩu:
Mã khu vực:
Địa chỉ:
>
Chu ho:
Ngày sinh chủ hộ:
Số CMT chủ hộ:
Thành viên của hộ
Sửa
Họ tên
Ngày sinh Quan hệ với chủ hộ
€) () (*) (")
€)
oA z A n
e Giao dién tach hé khâu
{S| Tach ho khẩu Nhập mã hộ khẫu Chọn hộ cần tách
Mã hộ khâu Họ tên chủ Địa chỉ Chủ hộ hiện tại Trần Văn Nam €)
TQB002 Nguyễn Minh |Số 2 Tạ Qua
'TQB001 Trinh VănAn Số 1 Tạ Qua
TQB003 Nguyễn Tiến lSố 3 Tạ Qua | Đla chí @
Trần Văn Nam Số 4 Tạ Qua Mã hộ khẫu mới (*)
Chọn người sang hộ mới Những người ở hộ mới
Họ tên Ngày sinh Quan hệ v
Trần Văn Nam |1980-07-09 |Chủ hộ <<
Nguyễn Minh 1985-09-02 Tran Trung K |2008-12-25 |Con trai Trần Thúy Ng 2013-01-45 |Con gái
Hủy
Trang 10
e_ Giao diện chuyển hộ khẩu
Nhập mã hệ khẩu Chọn hệ khẩu
Mã hộ khẩu Họ tên chủ hộ Địa chỉ Mã hộ khẩu TQ8004 ()
TQ8092 Nguyén Minn Quan SỐ 2 Tạ Quang Bửu TQ8001 Trin Van An SỐ 1 Tạ Quang Bửu Tên chủ hệ — en Xk TQ8093 Nguyễn Tiên Dũng Sô 3 Tạ Quang Bửu Mã khu vực 03 Œ)
Địa chỉ hiền tại ạ Quang Bửu quận Hai Bà Trưng Hà Nội (*) Địa chỉ chuyên đến (
Lý đo chưyến đới ()
Hy Xác nhận e_ Giao diện thống kê
| > A Be Giớitính: Toản bộ ~ Tinh trạng: Toàn bộ s
Độtuốt Từ: => Tub Nă% Tớ: den x6 Me
Ps L4 ID Họ tên Ngày sinh Giới tính Địa chỉ hiện nay
26 Trinh Văn An 1990.12.07 Nam SỐ 1 Tạ Quang Bưu, Hai ˆ
er Delt
27 Trần Thanh Duyén 1997-42-23 Nờ Số 2 Tạ Quang Biv, qué
PA hồng Ké call 5 29 Nguyễn Mưh Quận 1999-09-31 Nam $4 2 Ta Quang Bou, qué
29 Nguyễn Tiền Oũng 1994-06-03 Nam SỐ 4 Tạ Quang Đờu, quả
30 VO MF Unh 1965-12-06 N? SỐ 3 Tạ Quang Bu, qua
31 Nguyễn Tiền Đạt 1990-09-09 ham SỐ 3 Tạ Quang Bửu, quả
32 Nguyễn Trả My 1997-12-12 nN? SỐ 3 Tạ Quang Bửu, quả
Bài tập: Viết code xử lý các sự kiện cho các điều khiển trên màn hình
Ví dụ: màn hình chính của ứng dụng :
Trang 11
Introduction to Software Engineering - Nhập môn Công nghệ phần mềm
mm
public MainFramej) í
initComponents(j;
setTitle("QUAN LÝ NHÂN KHẨU") ;
List<DanhMucBean> listDanhMuc = new rrayLi3t<> [|]?
listDanhNuc.add(new DanhMucBean("TrangChu", Home, jblTrangChu));
listDanhMuc.addinew DanhMucBean/{"Nhankhau", NhankKhauBtn, jJlbNhankKhau)j); listDanhNuc.add(new DanhMucBean/{"Hokhau", HokhauBbtn, jJlbHoKhau));
listDanhMuc.addinew DanhMucBean/["ThongkKe", ThongKeBtn, ]1llhThangqEe] ]?
MainController controller = new MainController[{jpnbBean, this);
controller.setView(Home, jblTrangChu, "TrangChu");
controller.setEvent (listDanhMuc) ;
setDefaultCloseOperation(JFrame.DO NOTHING ON CLOSE);
this.addWindowListener (new Windowddapter({) {
@Override
public void windowClosing(WindowEvent e) {
if (JOptionPane.showConfirmDiagloginull, "Are you sure to close??",
"Confirm", JOptionPane YES NO OPTION) == 0) {
dispose ();
t1]?
Nội dung bài tập tự làm
Hoàn thành Thiết kế giao diện màn hình cho bài toán (casestudy) với các nội dung: sơ đồ chuyển màn hình, thiết kế mock-up các màn hình, đặc tả thiết kế giao diện cho các màn hình, triển khai xây
dựng giao diện thực trên NetBeans IDE
Phần nội dung này các nhóm làm vào trong file docx (báo cáo)
Các nhóm chuẩn bị thêm một slide powerpoint về nội dung Thiết kế
giao diện ở trên, buổi học tiếp theo sẽ trình bày
HẾT