Nguyên lý thiết kế giao diện
BÀI NGUYÊN LÝ THIẾT KẾ GIAO DIỆN PGS.TS Đặng Văn Đức dvduc@ioit.ac.vn HÀ NỘI – 2007/10 Chủ đề môn học Giới thiệu HCI Tính sử dụng hệ thống Thiết kế hướng người sử dụng Khả người Mơ hình vào – liệu Ngun lý thiết kế giao diện Xây dựng prototype Thiết kế đồ họa tương tác Đánh giá kiểm thử giao diện Các chủ đề nghiên cứu dvduc-2007/10 Bài 6: Nguyên lý thiết kế giao diện 2/29 Nội dung Lỗi thiết kế hệ thống tương tác Hướng dẫn thiết kế hệ thống có tính sử dụng Mười kinh nghiệm Nielsen Mười sáu qui tắc Tognazzini Tám qui tắc vàng Shneiderman Qui trình thiết kế UI Galitz Tổng kết dvduc-2007/10 Bài 6: Nguyên lý thiết kế giao diện 3/29 Lỗi thiết kế? In Microsoft Office theo ba cách: Chọn mục thực đơn File/Print Nhấn phím Print cơng cụ Phím tắt Ctrl-P: Dành cho user có kinh nghiệm (flexibility & efficiency) Vấn đề: Cả cách không làm việc (internal inconsistency) Chọn File/Print hiển thị Print dialog Nhấn Print in trực tiếp Ctrl-P hiển thị Print dialog Tuy nhiên phím cơng cụ hữu ích dvduc-2007/10 Bài 6: Nguyên lý thiết kế giao diện 4/29 Lỗi thiết kế? Điều khiển TV hàng Tivo Tính đơn giản: Khơng có q nhiều phím Các phím quan trọng phải đủ lớn (theo luật Fitts) có hình dạng (nhất qn) Các phím liên quan với phải xếp theo nguyên tắc ánh xạ tự nhiên (ví dụ phím back/forward) Phím chọn kênh âm lượng phải ánh xạ theo chiều đứng Phím Pause phải lớn Thiết kế đồ họa tốt: Sử dụng màu Thiết kế cơng nghiệp tốt: Hình dáng thiết bị điều khiển phải cân đối vừa với bàn tay người sử dụng dvduc-2007/10 Bài 6: Nguyên lý thiết kế giao diện 5/29 Lỗi thiết kế? Sử dụng metaphor “Desktop” metaphor tốt, sử dụng lần đầu Xerox, sau Apple Windows Việc sử dụng VCR làm metaphor cho hộp thoại in không phù hợp phần mềm Mannesmann Tally dvduc-2007/10 Bài 6: Nguyên lý thiết kế giao diện 6/29 Lỗi thiết kế? Sử dụng Tooltip Sử dụng Tooltip để giúp người sử dụng học chức phím đồ họa Khi sử dụng phím đồ họa chuẩn khơng nên có tooltip "People generally don't like to use stupid applications" Hộp thoại user lựa chọn fields để xếp liệu Nếu muốn xếp theo số fields sao? dvduc-2007/10 Bài 6: Nguyên lý thiết kế giao diện 7/29 Thiết kế hệ thống có tính sử dụng Hầu như, nhà nghiên cứu đề xuất tập hướng dẫn thiết kế UI để lựa chọn Các vấn đề Việc tổ chức vào tập luật khác Ví dụ Jacob Nielsen có 10 kinh nghiệm (Usability Heuristics), Tognazzini có 16 nguyên tắc (bao gồm gợi ý luật Fitts), Nguyên lý Norman bao gồm gợi ý, rõ ràng, ràng buộc Hướng dẫn tuân thủ platform quan trọng: Mac, Windows, Gnom có tập hướng dẫn thiết kế riêng Các hướng dẫn platform có xu hướng cụ thể dvduc-2007/10 Ví dụ: Sử dụng menu Exit, khơng sử dụng Quit, Leave hay Go Away Bài 6: Nguyên lý thiết kế giao diện 8/29 Nhắc lại hướng dẫn thiết kế biết Thiết kế hướng người sử dụng Xác định người sử dụng Hiểu rõ nhiệm vụ họ Luật Fitts Kích thước điều khiển liên quan đến tầm quan trọng Cạnh hình q giá Các controls nhỏ khó chọn sử dụng Bộ nhớ Sử dụng chia đoạn (chunking) để đơn giản hóa việc nhớ thơng tin Khơng q tải Working memory dvduc-2007/10 Bài 6: Nguyên lý thiết kế giao diện 9/29 Nhắc lại hướng dẫn thiết kế biết Sử dụng màu Không phụ thuộc mạnh vào việc phân biệt màu Tránh màu đỏ chữ xanh Tránh thể chi tiết màu xanh Nguyên lý Norman thao tác trực tiếp Sự gợi ý Ánh xạ tự nhiên Rõ ràng Phản hồi trực quan dvduc-2007/10 Bài 6: Nguyên lý thiết kế giao diện 10/29 Kinh nghiệm thiết kế Nielsen Quan sát trạng thái hệ thống Kinh nghiệm cịn gọi “Feedback” Ln thơng báo Users trạng thái hệ thống Các dấu hiệu (idioms) Không nên cài đặt “dày đặc” phản hồi Thay đổi hình dạng chạy Highlight Thanh trạng thái báo (progress) Ví dụ hộp thoại khơng phù hợp Khuyến cáo sử dụng dvduc-2007/10 Hành động