Nhập môn công nghệ phần mềm - Bài tập tuần 9: Thiết kế giao diện người dùng

Nội dung text: Nhập môn công nghệ phần mềm - Bài tập tuần 9: Thiết kế giao diện người dùng

1. Introduction 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 Cài đặt 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) 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 Software Engineering Department - SoICT/HUST Trang 1 / 11
2. Introduction to Software Engineering - Nhập môn Công nghệ phần mềm 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 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? Software Engineering Department - SoICT/HUST Trang 2 / 11
3. Introduction to Software Engineering - Nhập môn Công nghệ phần mềm 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 • Các nguyên tắc cơ bản: o Cách bố trí - Layout o Nhận biết nội dung - Content awareness o Thẩm mĩ -Aesthetics o Kinh nghiệm người dùng - User experience o Nhất quán - Consistency o Ít tốn công nhất - Minimal user effort • Đầu vào cho thiết kế giao diện : o Đặc tả chi tiết các kịch bản usecase o Các mô tả dữ liệu vào và dữ liệu ra • 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ó.) • Thiết kế kết xuất (output) : thông tin tóm tắt + thông tin chi tiết (thường thể hiện dưới dạng bảng) + đồ thị (trực quan) Software Engineering Department - SoICT/HUST Trang 3 / 11
4. Introduction to Software Engineering - Nhập môn Công nghệ phần mềm 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 ý: • Display transition diagram: tổng hợp mối liên kết giữa các màn hình • Ví dụ : Bài tập: Thiết kế mock-up cho các màn hình. Gợi ý: • Sử dụng một công cụ hỗ trợ thiết kế mock-up • Ví dụ: phần mềm Balsamiq Software Engineering Department - SoICT/HUST Trang 4 / 11
5. Introduction to Software Engineering - Nhập môn Công nghệ phần mềm • Ví dụ: công cụ trực tuyến : và Ví dụ: Xây dựng mock-up cho màn hình chính của bài toán (casestudy) Software Engineering Department - SoICT/HUST Trang 5 / 11
6. Introduction to Software Engineering - Nhập môn Công nghệ phần mềm Bài tập: Đặc tả thiết kế giao diện cho các màn hình. Gợi ý: • Đố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) • Đặ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 Loại 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 Loại Thuộc tính Ghi chú 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 kê nhân khẩu (số liệu thống kê Font chữ từ database) Software Engineering Department - SoICT/HUST Trang 6 / 11
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 ý: • Sử dụng các 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 : • Giao diện trang đăng nhập • Giao diện trang chính • Giao diện quản lý nhân khẩu Software Engineering Department - SoICT/HUST Trang 7 / 11
8. Introduction to Software Engineering - Nhập môn Công nghệ phần mềm • Giao diện thêm mới nhân khẩu • Giao diện đăng ký tạm vắng • Giao diện quản lý hộ khẩu Software Engineering Department - SoICT/HUST Trang 8 / 11
9. Introduction to Software Engineering - Nhập môn Công nghệ phần mềm • Giao diện thêm mới hộ khẩu • Giao diện tách hộ khẩu Software Engineering Department - SoICT/HUST Trang 9 / 11
10. Introduction to Software Engineering - Nhập môn Công nghệ phần mềm • Giao diện chuyển hộ khẩu • Giao diện thống kê 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 : Software Engineering Department - SoICT/HUST Trang 10 / 11
11. Introduction to Software Engineering - Nhập môn Công nghệ phần mềm 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 Software Engineering Department - SoICT/HUST Trang 11 / 11