Màn hình thông báo : hiển thị các thông, yêu cầu, cảnh báo đối với người dùng trong quá 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.[r]
(1)(2)1 Tổng quan
2 Nguyên tắc thiết kế giao diện 3 Quy trình thiết kế giao diện 4 Tiêu chí đánh giá giao diện
(3)Thiết kế giao diện yếu tố yêu cầu phi chức của
hệ thống, thiết kế giao diện tốt làm tăng hiệu giao tiếp của người dùng hệ thống phần mềm
Tùy theo mục đích, yêu cầu của người dùng, phần tử form phân bố cách hợp lý
(4)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 quả. 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
(5)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 và cách bố trí thích hợp với chức năng.
– Tên hình: chức thực hình
– Nội dung hỉnh: phần tử chức phần tử
(6)Ví dụ: Sơ đồ hình
Ký hiệu
5.1.1 Kết quy trình thiết kế giao diện
(7)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ý
(8)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 năng Màn hình chính: chứa chức tổng quát
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
(9)Các lỗi thường gặp thiết kế giao diện
Thiếu toà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
(10)Người dùng dễ điều khiển Người dùng phải nhớ
Giao diện toàn vẹn
(11)Người dùng dễ điều khiển
Không buộc người dùng phải thực hoạt động không cần thiết hay không hay khơng ưa thích
Tương tác mềm dẽo, người dùng ngắt undo Tương tác theo luồng cho phép tùy biến tương tác
Che dấu kỹ thuật bên
Tương tác trực tiếp với đối tượng hình
(12)Người dùng phải nhớ
Giảm yêu cầu cần người dùng phải nhớ nhiều. Tạo trường hợp mặc định có ý nghĩa
Shortcut trực quan
Thể hình ảnh biểu tượng giới thực Trình bày thông tin theo diễn tiến động
(13)Giao diện toàn vẹn
Cho phép người dùng sử dụng tác vụ theo ngữ cảnh Các giao diện ứng dụng phải tồn vẹn
Mơ hình tương tác trước người dùng ưa chuộng khơng nên thay khơng nên thay đổi trừ có lý thuy lý thuyết phục
(14)Một số đặc điểm người sử dụng
Khả nhớ tức thời người bị hạn chế:
– Họ nhớ khoảng thông tin Nếu ta biểu diễn nhiều khiến người sử dụng khơng nhớ hết gây lỗi
– Khi xãy lỗi, thơng báo khơng thích hợp làm tăng áp lực lên người sử dụng và gây lỗi khác
– Người sử dụng có khả sở thích hồn tồn khác – Giao diện đa phương tiện dễ thu hút người dùng
(15)Thói quen người sử dụng:
Giao diện phải xây dựng dựa thuật ngữ gần gũi với người
dùng hơn những khái niệm liên quan đến máy tính Ví dụ:
• Nên sử dụng khái niệm thư, tài liệu, cặp giấy…
• Không nên sử dụng khái niệm thư mục, danh danh mục …
Thống nhất: thành phần nhóm chức nên định dạng.
Nếu yêu cầu xử lý theo cách thông thường người sử dụng có
(16)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 nhau.
(17)5.2 Nguyên tắc thiết kế giao diện
(18)5.2 Nguyên tắc thiết kế giao diện
(19)5.2 Nguyên tắc thiết kế giao diện
Giao diện sử
(20)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
(21)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 nào
(22)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
(23)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ị
(24)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
(25)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
(26)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
(27)Thiết kế giao diện tra cứu: Ví dụ: hình tra cứu
(28)Thiết kế giao diện tra cứu: Ví dụ: Kết tra cứu
(29)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, các 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 trên 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 đúng theo nghiệp vụ hệ thống
(30)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)