Bài giảng Công nghệ phần mềm: Chương 5 Thiết kế giao diện cung cấp cho người học những kiến thức như: Tổng quan; Nguyên tắc thiết kế giao diện; Quy trình thiết kế giao diện; Tiêu chí đánh giá giao diện. Mời các bạn cùng tham khảo!
Insert or Drag and Drop your Image THIẾT KẾ GIAO DIỆN Jens Martensson NỘI DUNG Tổng quan Nguyên tắc thiết kế giao diện Quy trình thiết kế giao diện Tiêu chí đánh giá giao diện Jens Martensson 5.1 Tổng quan thiết kế giao diện • • Thiết kế giao diện yếu tố yêu cầu phi chức hệ thống, thiết kế giao diện tốt làm tăng hiệu giao tiếp người dùng hệ thống phần mềm Tùy theo mục đích, yêu cầu người dùng, phần tử form phân bố cách hợp lý Jens Martensson 5.1 Tổng quan thiết kế giao diện • Giao diện phải thể tính năng: • Tính sẵn sàng linh hoạt: đáp ứng nhanh với thao tác người dùng • Tính tập trung: phần tử giao diện phải gây ý cua người dùng • Sử dụng phím tắt giúp thao tác nhanh hiệu • Cung cấp cơng cụ trợ giúp • Màu sắc phải hài hòa thành phần giao diện, font chữ size phải thích hợp với nội dung Jens Martensson 5.1.1 Kết quy trình thiết kế giao diện • Kết thiết kế giao diện gồm phần: • Sơ đồ hình: biểu diễn hệ thống giao diện hệ thống mối liên quan hình • Mơ tả chi tiết hình: mơ tả phần tử hình cách bố trí thích hợp với chức • Tên hình: chức thực hình • Nội dung hỉnh: phần tử chức phần tử Jens Martensson 5.1.1 Kết quy trình thiết kế giao diện • Ví dụ: Sơ đồ hình • Ký hiệu Chuyển điều khiển Tên hình Jens Martensson 5.1.1 Kết quy trình thiết kế giao diện • Các phần tử hình chia thành nhóm: • Nhóm liệu: gồm phần tử giúp người dùng nhập liệu thành phần xuất liệu sau xử lý: Ví dụ: textbox, combobox, label • Nhóm xử lý: gồm nút lệnh, thao tác với chuột, phím để thực chức xử lý Jens Martensson 5.1.2 Phân loại hình giao diện • Dựa vào chức phần mềm, giao diện chia thành nhiều loại phù hợp với chức • Màn hình chính: chứa chức tổng qt Ví dụ: chức quản lý sinh viên, quản lý đăng ký học phần • Màn hình nhập liệu: giúp người dùng nhập liệu vào hệ thống để xử lý lưu trữ • Màn hình kết quả: kết xuất liệu sau xử lý • Màn hình thông báo: hiển thị thông, yêu cầu, cảnh báo người dùng trình tương tác với phần mềm • Màn hình tra cứu: hỗ trợ người dùng tìm kiếm thơng tin Jens Martensson 5.2 Ngun tắc thiết kế giao diện • Các lỗi thường gặp thiết kế giao diện • Thiếu tồn vẹn • Phải nhớ q nhiều • Khơng có hướng dẫn, trợ giúp • Khơng nhạy với ngữ cảnh • Đáp ứng nghèo nàn • Khơng thân thi Khơng thân thiện, khó hiểu Jens Martensson 5.2 Nguyên tắc thiết kế giao diện Jens Martensson 10 5.2 Nguyên tắc thiết kế giao diện • Khả phục hồi: hệ thống nên cung cấp số khả phục hồi tới tình trạng trước (undo), xác nhận trước sửa xóa… • Hướng dẫn người sử dụng: hệ thống trợ giúp, hướng dẫn trực tuyến … • Tính đa dạng: hỗ trợ nhiều loại tương tác cho nhiều loại người sử dụng khác Jens Martensson 16 5.2 Nguyên tắc thiết kế giao diện Giao diện không đối xứng Jens Martensson 17 5.2 Nguyên tắc thiết kế giao diện Các phần tử tổ chức thành nhóm Jens Martensson 18 5.2 Nguyên tắc thiết kế giao diện Giao diện sử dụng cửa sổ Jens Martensson 19 5.3 Quy trình thiết kế giao diện • Phân tích giao diện • • Xác định người dùng cuối, người tương tác với hệ thống thông qua giao diện; Các tác vụ mà người dùng cuối phải thực để phục vụ cho cơng việc, • Xác định nội dung trình bày • Mơi trường nhiệm vụ thực Jens Martensson 20 5.3 Quy trình thiết kế giao diện • Phân tích người dùng • Người dùng ai? Trình độ người dùng? • Có khả sử dụng tài liệu hướng dẫn giấy hay cần phải mở lớp huấn luyện? • Độ tuổi người dùng? • Người dùng lợi nào? • Người dùng có sử dụng thường xun cho cơng việc hay khơng? • Nếu người dùng gây lỗi hậu Jens Martensson 21 5.3 Quy trình thiết kế giao diện • Phân tích tác vụ mơ hình • Trong tình đặc trưng người dùng thực cơng việc gì? • Tác vụ tác vụ con? Luồng công việc? • Hệ thống cấp bậc tác vụ? • Các Use case xác định tương tác • Xác định công việc lọc tác vụ tương tác • Hình thành đối tượng nhận diện đối tượng giao tiếp (classes) • Phân tích luồng cơng việc xác định cách thức cơng việc hồn tất Jens Martensson 22 5.3 Quy trình thiết kế giao diện • Phân tích nội dung thể hình ảnh • Việc bố trí hình theo loại liệu • Người dùng tùy biến hình? • Phân chia báo cáo cho dễ hiểu • Sử dụng kỹ thuật thể thông tin tóm tắt việc thu thập liệu • Dữ liệu cần định dạng phù hợp với thiết bị Jens Martensson 23 5.3 Quy trình thiết kế giao diện • Các thành phần thiết kế giao diện • The complete UI complete • Page layout • Forms and input • Tables • Direct data manipulation • Navigation • Searching • Page elements • e-Commerce Jens Martensson 24 5.3 Quy trình thiết kế giao diện • Thiết kế giao diện chính: hệ thống menu chia làm loại • Menu hướng chức năng: nhóm chức tương ứng với loại yêu cầu • Tổ chức: chứa chức liên quan đến tổ chức cùa doanh nghiệp • Lưu trữ: chứa chức liên quan đến lưu trữ quản lý liệu, • Tra cứu: gồm chức liên quan đến tìm kiếm, tra cứu • Menu hướng đối tượng: nhóm chức tương ứng với lớp đối tượng Một nhóm chức tương ứng với đối tượng giới thực • Menu Hướng quy trình: gốm chức liên quan đến quy trình tổ chức Jens Martensson 25 5.3 Quy trình thiết kế giao diện • Thiết kế giao diện tra cứu: • Tiêu chuẩn tra cứu: Gồm biểu thức luận lý, cây, tích hợp • Kết tra cứu: Gồm thơng báo, danh sách • Thao tác người dùng: Giúp người dùng nhập giá trị cho tiêu chuẩn tra cứu, xem chi tiết kết tra cứu Jens Martensson 26 5.3 Quy trình thiết kế giao diện • Thiết kế giao diện tra cứu: • Ví dụ: hình tra cứu Jens Martensson 27 5.3 Quy trình thiết kế giao diện • Thiết kế giao diện tra cứu: • Ví dụ: Kết tra cứu Jens Martensson 28 5.3 Quy trình thiết kế giao diện • Thiết kế hính nhập liệu: chứa thành phần giúp người dùng nhập thơng tin, từ khóa, phục vụ tra cứu thông tin, thành phần giúp nhập thơng tin lưu trữ • Các phần tử hỗ trợ nhập liệu giao diện phải có chức kiểm tra tính hợp lệ liệu • Các phần tử hỗ trợ tính tốn phải theo nghiệp vụ hệ thống Jens Martensson 29 5.4 Tiêu chí đánh giá thiết kế • Thời gian đáp ứng • Những tiện ích trợ giúp • Khả xử lý lỗi • Menu lệnh • Khả truy cập ứng dụng • Quốc tế hóa (Internationalization) Jens Martensson 30 ... hình • Nội dung hỉnh: phần tử chức phần tử Jens Martensson 5. 1.1 Kết quy trình thiết kế giao diện • Ví dụ: Sơ đồ hình • Ký hiệu Chuyển điều khiển Tên hình Jens Martensson 5. 1.1 Kết quy trình thiết... Martensson 16 5. 2 Nguyên tắc thiết kế giao diện Giao diện không đối xứng Jens Martensson 17 5. 2 Nguyên tắc thiết kế giao diện Các phần tử tổ chức thành nhóm Jens Martensson 18 5. 2 Nguyên tắc... 28 5. 3 Quy trình thiết kế giao diện • Thiết kế hính nhập liệu: chứa thành phần giúp người dùng nhập thơng tin, từ khóa, phục vụ tra cứu thông tin, thành phần giúp nhập thông tin lưu trữ • Các phần