Giáo trình Nhập môn Công nghệ phần mềm - Chương 4: Thiết kế giao diện người dùng - Lương Trần Hy Hiến

COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 1 HIENLTH Chủ đề 4: Thiết kế Phần mềm (tt) COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 2 HIENLTH USER INTERFACE DESIGN COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 3 HIENLTH COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 4 HIENLTH COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 5 HIENLTH COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 6 HIENLTH COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 7 HIENLTH Nội dung • Khái niệm giao diện • Các thành phần giao diện • Phân loại màn hình • Một số tiêu chí thiết kế màn hình • Sơ đồ màn hình, sitemap • Mô tả chi tiết màn hình COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 8 HIENLTH Thiết kế giao diện COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 9 HIENLTH Khái niệm giao diện • Giao diện là gì? – Phần mềm không hoạt động độc lập mà luôn giao tiếp với: • Người sử dụng • Các hệ thống liên quan  cần thành phần chuyên trách giao tiếp: Giao diện COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 10 HIENLTH Khái niệm giao diện • Đặc điểm: – Nơi diễn ra tương tác – Định nghĩa cách thức giao tiếp – Tiếp nhận thông tin – Phản hồi thông tin • Phân loại: – Giao diện người dung (User interface) – Giao diện lập trình (Programming interface) COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 11 HIENLTH Khái niệm giao diện • Thiết kế giao diện người dùng: – Lập danh sách màn hình • Xác định ngữ cảnh giao tiếp • Dựa vào tình huống sử dụng (Use Case) – Xây dựng sơ đồ màn hình • Chuyển tiếp giữa các ngữ cảnh • Mối quan hệ giữa các màn hình – Bố trí các thành phần màn hình • Sắp xếp các đơn vị giao diện màn hình – Đặc tả màn hình • Mô tả các thành phần màn hình • Mô tả kịch bản sử dụng COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 12 HIENLTH Multimedia Tìm kiếm thông tin Giao dịch điện tử Xử lý thông tin Tài liệu điện tử Giao diện Các thành phần của giao diện Giao diện nhập liệu Giao diện kết xuất Giao diện tương tác COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 13 HIENLTH Các thành phần giao diện • Thành phần tiếp nhận thông tin – Ra lệnh: Button – Nhập liệu: TextBox – Lựa chọn: ComboBox, ListBox, CheckBox, RadioButton COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 14 HIENLTH Các thành phần giao diện • Thành phần phản hồi thông tin – Thông tin đơn: Label, Textbox, MessageBox – Thông tin phức: ListView, GridView, Report COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 15 HIENLTH Phân loại giao diện • Giao diện DOS • Giao diện Windows • Giao diện Web COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 16 HIENLTH Các thành phần giao diện đồ họa - GUI  Dialog  SDI – Single Document Interface  MDI – Multiple Document Interface  Có một cửa sổ làm việc  Thường có kích thước cố định  Thường không có menu bar  Có một cửa sổ làm việc  Cho phép thay đổi kích thước cửa sổ (Resizeable)  Không có cửa sổ con  Có một cửa sổ làm việc chính (Main frame) và nhiều cửa sổ con (Child Frame)  Cho phép thay đổi kích thước cửa sổ (Resizeable)  Cho phép Minimize/Maximize/Close/Arrange/Cascade cửa sổ con Calculator Paint Workflow Editor COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 17 HIENLTH Phân loại màn hình • Màn hình đăng nhập • Màn hình giới thiệu • Màn hình chính • Màn hình tác giả • Màn hình danh mục • Màn hình nhập liệu – Nhập liệu trực tiếp – Nhập liệu gián tiếp (import) • Màn hình tra cứu • Màn hình xử lý tính toán • Màn hình thể hiện báo biểu/thống kê • Màn hình thể hiện đối tượng: sơ đồ, cây, biểu tượng COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 18 HIENLTH Màn hình đăng nhập • Hình thức thể hiện COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 19 HIENLTH Màn hình đăng nhập COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 20 HIENLTH Màn hình chính • Hình thức thể hiện (Windows) COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 21 HIENLTH Màn hình chính (Windows) • Ví dụ minh họa COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 22 HIENLTH Màn hình chính (Windows) • Ví dụ minh họa COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 23 HIENLTH Màn hình tra cứu • Tiêu chuẩn tra cứu (Search/Filter) – Thiết kế cố định • Dễ thiết kế/lập trình • Không có tính mở rộng – Cho phép người dùng thêm/xóa các tiêu chuẩn trong quá trình tìm kiếm • Dễ dụng, mở rộng, tùy biến • Khó thiết kế/lập trình • Tham khảo: Microsoft Outlook 2007, – Đối với danh sách (Grid, Sheet), cho phép người dùng chọn trực tiếp từ thanh filter (tương tự như Excel) COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 24 HIENLTH Màn hình tra cứu • Hình thức thể hiện Tiêu chí cố định COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 25 HIENLTH Màn hình tra cứu • Hình thức thể hiện Tiêu chí cố định COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 26 HIENLTH Quy tắc thiết kế giao diện Nguyên tắc Mô tả Quen thuộc với người dùng Giao diện nên dùng các thuật ngữ và khái niệm rút ra từ kinh nghiệm của những người sẽ dùng hệ thống nhiều nhất. Nhất quán giao diện cần nhất quán sao cho các thao tác gần giống nhau có thể được kích hoạt theo cùng kiểu. ngạc nhiên tối thiểu Người dùng không bao giờ bị bất ngờ về hành vi của hệ thống. khôi phục được Giao diện nên có các cơ chế cho phép người dùng khôi phục lại tình trạng hoạt động bình thường sau khi gặp lỗi. hướng dẫn người dùng Giao diện nên có phản hồi có nghĩa khi xảy ra lỗi và cung cấp các tiện ích trợ giúp theo ngữ cảnh. người dùng đa dạng Giao diện nên cung cấp các tiện ích tương tác thích hợp cho các loại người dùng hệ thống khác nhau. COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 27 HIENLTH Quy tắc thiết kế giao diện • Quy tắc về màu sắc: – Dùng màu nhất quán – Giới hạn số lượng màu – Không dùng màu sặc sỡ – Cẩn trọng các màu tương phản – Tránh lạm dụng màu sắc trong trình bày COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 28 HIENLTH Quy tắc thiết kế giao diện • Tính nhất quán – Màu sắc – Vị trí của các đối tượng – Sử dụng ký hiệu • Tính trực quan – Hình thức thể hiện COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 29 HIENLTH Quy tắc thiết kế giao diện • Tính nhất quán: – Vị trí của đối tượng Không nhất quán COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 30 HIENLTH Quy tắc thiết kế giao diện • Tính nhất quán: Không nhất quán vì: •Màn hình 1: sử dụng màu sắc để biểu diễn các thuộc tính bắt buộc. •Màn hình 2: sử dụng ký hiệu (*) để biểu diễn các thuộc tính bắt buộc. COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 31 HIENLTH Quy tắc thiết kế giao diện • Tính trực quan – Hình thức thể hiện: sử dụng sơ đồ, biểu tượng, hình ảnh, cây để biểu diễn dữ liệu COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 32 HIENLTH Quy tắc thiết kế giao diện • Tính trực quan COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 33 HIENLTH Quy tắc thiết kế giao diện • Tính trực quan COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 34 HIENLTH Quy tắc thiết kế giao diện • Tính trực quan COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 35 HIENLTH Quy tắc thiết kế giao diện • Tính trực quan COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 36 HIENLTH Quy tắc thiết kế giao diện • Quy tắc về thông báo: – Nhất quán – Lịch sự – Cô đọng nhưng dễ hiểu – Nên kèm diễn giải, gợi ý – Không dùng ngôn ngữ: đại chúng, chuyên dụng, kỹ thuật COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 37 HIENLTH Các thông báo lỗi • Thiết kế thông báo lỗi là việc rất quan trọng – Các thông báo lỗi kém có thể dẫn đến việc người dùng không chấp nhận sử dụng một hệ thống. • Các thông báo nên lịch sự, ngắn gọn, nhất quán và mang tính xây dựng. • Nên xét đến background và kinh nghiệm của người dùng như là nhân tố quyết định khi thiết kế các thông báo lỗi. COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 38 HIENLTH COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 39 HIENLTH Quy tắc thiết kế giao diện • Quy tắc về kiểm tra nhập liệu – Kiểm tra tất cả dữ liệu nhập – Dựa trên: • Ràng buộc tự nhiên • Ràng buộc nghiệp vụ – “Phòng bệnh hơn chữa bệnh” COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 40 HIENLTH Quy trình thiết kế UI • Thiết kế UI là một quy trình lặp đi lặp lại với sự liên lạc chặt chẽ giữa người dùng và người thiết kế. • Ba hoạt động chính trong quy trình: – User analysis: Tìm hiểu người dùng sẽ làm gì với hệ thống; – System prototyping: phát triển một loạt các bản mẫu để thử nghiệm; – Interface evaluation: thử nghiệm các bản mẫu cùng với người dùng. COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 41 HIENLTH Quy trình thiết kế Phân tích và tìm hiểu các hoạt động của người dùng Tạo bản mẫu thiết kế trên giấy Cùng người dùng đánh giá thiết kế Tạo bản mẫu thiết kế động Cài đặt giao diện người dùng cuối cùng Cùng người dùng đánh giá thiết kế Bản mẫu chạy được Bản mẫu thiết kế COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 42 HIENLTH Quy trình thực hiện (làm bài) 1. Mục đích màn hình 2. Vẽ giao diện màn hình. Trong đó có ghi chú các control đặc biệt dạng ,,,, và đánh dấu rõ các sự kiện dạng (1), (2), 3. Mô tả các control 4. Mô tả các sự kiện (biến cố) và cách xử lý COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 43 HIENLTH Mô tả các control STT Tên Kiểu Ý nghĩa Ghi chú 1 txtHoTen TextBox Tên học sinh Không được rỗng 2 txtDiemThi TextBox Điểm thi Chỉ cho nhập số nguyên từ 0 đến 10 COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 44 HIENLTH Mô tả sự kiện STT Điều kiện kích hoạt Xử lý 0 Khởi động màn hình ??? 1 Chọn lớp ??? (0) (1) COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 45 HIENLTH Câu hỏi và thảo luận COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 46 HIENLTH THIẾT KẾ MENU COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 47 HIENLTH Hệ thống thực đơn (Menu) • Hệ thống thực đơn chính – Hệ thống thực đơn trong màn hình chính của mỗi phân hệ (module) • Hệ thống thực đơn ngữ cảnh – Thực đơn sử dụng khi click chuột phải lên một hoặc một nhóm đối tượng trên màn hình – Thực đơn sử dụng khi click chuột phải lên một dòng trong lưới (Grid) COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 48 HIENLTH Giới thiệu Menu Menu Bar COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 49 HIENLTH Giới thiệu Menu Popup Menu COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 50 HIENLTH Các thành phần trên Menu bar Popup Menu Popup Menu Menu Bar Menu Item Separator Popup Menu Popup Menu COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 51 HIENLTH Tổ chức hệ thống thực đơn chính • Hệ thống • Danh mục • Nhóm chức năng 1 (nghiệp vụ 1) • Nhóm chức năng 2 (nghiệp vụ 2) • Tra cứu • Báo cáo (Report) • Công cụ/tiện ích (Tools/Utilities) • Trợ giúp (Help) COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 52 HIENLTH Tổ chức hệ thống thực đơn (Menu) • Hệ thống thực đơn Microsoft Word 2003 • Hệ thống thực đơn Microsoft PowerPoint 2003 • Hệ thống thực đơn Total Commander • Hệ thống thực đơn chương trình QL thư viện • Hệ thống thực đơn chương trình QL nhân sự COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 53 HIENLTH Hệ thống thực đơn • Hệ thống – Cấu hình hệ thống – Đăng nhập – Đổi mật khẩu – Thoát • Danh mục – Danh mục nhân viên – Danh mục quận huyện – Danh mục tỉnh thành – Danh mục hàng hóa – . COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 54 HIENLTH Hệ thống thực đơn • Nhóm chức năng 1 – Chức năng 1.1 – Chức năng 1.2 – Chức năng 1.3 – Chức năng 1.4 • Nhóm chức năng 2 – Chức năng 2.1 – Nhóm chức năng 2.2 – Chức năng 2.3 – Chức năng 2.4 – . DEMO COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 55 HIENLTH Biểu diễn hệ thống thực đơn •Ví dụ: hệ thống chức năng ứng dụng quản lý học sinh COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 56 HIENLTH Thiết kế báo cáo (Report) • Phân loại Report – Report theo mẫu qui định – Report không theo mẫu • Công cụ sử dụng – Sử dụng Tools và Controls – Sử dụng excel/word, COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 57 HIENLTH Ví dụ minh họa report COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 58 HIENLTH Thiết kế báo cáo • Công cụ sử dụng – MS Access 2000/XP/2003 – Crystal Report 8.5/9/10/11 – ActiveReport - DataDynamics – C1Report – ComponentOne – MS Excel, Word, – COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 59 HIENLTH Công cụ tạo Report • MS Access 2000/XP/2003/2007 COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 60 HIENLTH Công cụ tạo Report • Crystal Report 8.5/9/10/11 COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 61 HIENLTH Công cụ tạo Report • ActiveReport – DataDynamics COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 62 HIENLTH Công cụ tạo Report • C1Report - ComponentOne COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 63 HIENLTH References Bài giảng này tham khảo từ nguồn: • Slide CNPM, Nguyễn Minh Huy, ĐH KHTN TpHCM. • Slide CNPM, Trần Ngọc Bảo, ĐH Sư phạm TpHCM • Slide Thiết kế PM hướng đối tượng, Trần Minh Triết, ĐH KHTN TpHCM. COMP1026 – Introduction to Software Engneering CH4 – Part 3 - 64 HIENLTH Câu hỏi và thảo luận