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
Software Engineering Department - SolCT/HUST Trang 1/11
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?
Trang 3Introduction 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 PAYWENT 132-4UL-12 37 0C 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 © ằO O OO O
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
CuuDuongThanCong.com https://fb.com/tailieudientucntt
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 ; = Phím mật khẩu 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: Tác giả 4 r Loại Tên tài liệu Màn hình kết quả > Màn hình đặt trước 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 + tt § Lt Bựttons Common ee FC ta Media 4 FEB 2006 b <It>? =| @ 1X9%é 144 weHGRADE ñnanuàan“ 5
Browser Window Button Button Bar | Tab 6 Calendar Callout Chart far Chart 3 Chart Cc
Software Engineering Department - SolCT/HUST Trang 4/11
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) 2 } i STORE a | | Line Rectangle 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)
Quản lý nhân lchẩu _- H x
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ữ Điều khiển Thuộc tính Ghi chú 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ị
màn hình label Kích thước image
Font chữ Nút menu "Nhân | Khi người dùng click sẽ Image + Button | Hiển thị
khẩu" mở màn hình "Quản lý Kích thước image
nhân khẩu" Font chữ
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
khẩu" Font chữ
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
Trang 7Introduction 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 (6) Login - x LOGIN User Name: Password:
e_ Giao diện trang chính
(| QUÂN LÝ NHÂN KHẨU - x
—_—— "
[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 (|B) QUAN LÝ NHÂN KHẨU - x 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 ee | ĐK tạm trú â 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
Software Engineering Department - SolCT/HUST Trang 7/11
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: Œ) (9 Quốc tịch: Œ) 0 Hộ chiều số:
() Địa chỉ hiện tại: (*)
() Trinh độ chuyên môn: Œ)
() Biét tiêng dân tộc: “) (9 Nơi làm việc: ¢) Léj SốCMT/CCCD: | Mã giấy tạm vắng: (Œ) Nơi tạm trú: ©)
Tir ngay: December 8, 2019 — Tal (*)
Dén ngay: December 8, 2019 Tal (*)
Ly do: (*)
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 : | Chuyén đi
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
Software Engineering Department - SolCT/HUST Trang 8/11
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ộ €) () (*) (") €) Hủy Lưu 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
: Mã khu vực (*)
'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ủ hộ 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
Software Engineering Department - SolCT/HUST Trang 9/11
Trang 10
e_ Giao diện chuyển hộ khẩu cái = x 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ê
Lá QUẦN LÝ KI4ÂN KHẨU ~ x
ht 1 ,
| > 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é
F | |
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
Trang 11Introduction 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ế