BÀI KHẢ NĂNG CON NGƯỜI PGS.TS Đặng Văn Đức dvduc@ioit.ac.vn HÀ NỘI – 2007/10 Chủ đề           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 Nguyên 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 Nội dung        Lỗi thiết kế hệ thống tương tác Tiến trình xử lý thông tin người Mô hình Model Human Processor (MHP) Bộ nhớ Các xử lý Hệ thống thị giác Tổng kết Lỗi thiết kế?  Ví dụ Gimp (~Photoshop)     Không có menu bar, có menu ngữ cảnh Chú ý: File menu menu ngữ cảnh chương trình khác Sử dụng chức (ví dụ Quit) chậm so với Menu bar Xuất sub-menu:    Gimp: Sub-menu xuất tức di chuột đến Menu Windows: Sub-menu xuất sau ½ s để user không phương hướng (tốt hơn) sau theo góc vuông đến item sub-menu mong muốn Macintosh: Khi sub-menu mở ra, di chuột theo vùng tam giác đến Item mà không bị sub-menu (giải pháp tốt nhất) Lỗi thiết kế?  MS Studio 6.0  MS Studio 6.0 đòi hỏi phải có IE 4.01 trở lên để chạy Tại phải sử dụng CheckBox để user muốn hay không muốn cài IE 4.01? Lỗi thiết kế?  MS Word 97:   Hộp thoại Font để user chọn thuộc tính mảng CheckBox Họa sỹ đồ họa hay Người thiết UI thiết kế hộp thoại này?  Unisyn's Automate Pro (phiên trước 3.8g) Chú ý trình tự dẫn đường Controls phím Tab  Có cặp lựa chọn loại trừ nhau: strikethrough/double strikethrough, subscript/superscript, emboss/engrave, all caps/small caps Lỗi thiết kế?  WebEditPro  Trợ giúp ngữ cảnh thiết kế tốt Trợ giúp Tooltip cho contrrol không phù hợp   Parsons Technology Lỗi thiết kế?  Microsoft s Web Publishing Wizard  IBM Eclipse Tiến trình xử lý thông tin người  Nhiệm vụ xây dựng giao diện người-máy hiệu  Đã biết đặc tính hệ thống máy tính:  Tốc độ xử lý, dung lượng nhớ, đĩa cứng, hệ điều hành tương tác thành phần  Đã biết phân tích người sử dụng, thức thu thập thông tin mức cao người sử dụng cuối khác biệt người sử dụng người thiết kế  Phần nghiên cứu chi tiết mức thấp:   Các xử lý; Bộ nhớ Các tính chất máy nhận thức người Các tính chất chung mà hầu hết người có (ví dụ cảm nhận màu) Tiến trình xử lý thông tin người  Mô hình xử lý thông tin người  Lindsay & Norman (1977) đề xuất mô hình sở: thông tin vào/ra não người thông qua dãy công đoạn  Diễn giải mô hình trình tự sở     Thông tin vào từ môi trường mã hóa Thông tin mã hóa so sánh với thông tin nhớ não Quyết định đáp ứng Tổ chức đáp ứng hành động cần thiết Xử lý vận động  Ứng dụng luật Fitts    Những thực thường xuyên gắn phím lớn hơn, cần đặt gần vị trí trung bình chạy chuột Đỉnh, đáy cạnh hình cần sử dụng làm đích Với GUI   Menu Icon đủ lớn Menu, Icon hay sử dụng cần đặt gần điểm bắt đầu người sử dụng (thí dụ, đỉnh menu) Xử lý vận động  Nguyên lý cạnh vô (Infinite Edge)  Cạnh hình dừng chuyển động chạy chuột, xem đích với kích thước vô hạn Theo luật Fitts: Khoàng cách D đến đối tượng đích 1/2S Vậy T=a+b log2(2D/S+1) = a+b -> thời gian vận động tối thiểu   Cạnh hình tài nguyên quí giá Xử lý vận động  Thanh thực đơn Macintosh đặt đỉnh hình, không gắn vào cửa sổ ứng dụng  Phía thực đơn Windows có tiêu đề  Việc sử dụng thực đơn Macintosh nhanh Windows ~5 lần Ví dụ luật Fitts  Ba cách xóa tệp (Icon) Apple Macintosh (MacKenzie, 1991) DRAG-SELECT: Di biểu tượng tệp vào thùng rác MT = 135 + 249 log2(14 / + 1) = 135 + 249 × = 882 ms  POINT-SELECT: Chọn Icon tệp sau chọn Icon thùng rác thiết bị trỏ MT = 230 + 166 log2(14 / + 1) = 230 + 166 × = 728 ms  STROKE-THROUGH: Nhấn phím thiết bị trỏ để gạch ngang Icon tệp MT = 135 + 249 log2(4 / + 1) = 135 + 249 × 1.58 = 528 ms  Power Law of Practice  Đề xuất Newell & Rosenbloom (1981)  Đặc trưng quan trọng hệ thống perceptual-cognitivemotor thời gian cần thiết để thực nhiệm vụ giảm theo kinh nghiệm  Thời gian thực nhiệm vụ giảm theo luật số mũ: Tn - thời gian thực nhiệm vụ vào thời điểm thứ n, n - tổng số phép thử  với α = [0.2, 0.6] Tn = T1n −α  Luật số mũ mô tả đường cong tuyến tính hệ trục tọa độ log-log thời gian thực nhiệm vụ tổng số phép thử Power Law of Practice  Thực tế, luật số mũ cho thấy thời gian thực nhiệm vụ giảm nhanh theo kinh nghiệm có được, sau mức độ hiệu tăng chậm Hệ thống thị giác Màng cứng (sclerotic) Mống mắt (iris) Giác mạc (cornea) Thể dịch nước (aqueous humour) Võng mạc (retina) Thủy tinh thể (Lens) Dịch thủy tinh (Vitreous humour) Cơ mi (ciliary muscle) Dây treo (suspensory ligament) Màng trạch (choroid) Thần kinh thị giác (optic nerve) Tế bào nhận kích thích ánh sáng  Võng mạc mắt chứa tế bào nhậy cảm với ánh sáng, gồm hai loại   Tế bào hình que (rod) Tế bào hình nón (cone)  Tế bào hình que    Hoạt động điều kiện ánh sáng yếu (ví dụ buổi tối) Không cung cấp khả thị giác màu Có đóng góp chút vào thị giác ban ngày  Tế bào hình nón   Chỉ đáp ứng có ánh sáng mạnh Có ba loại: S, M, L tương ứng với cảm biến B (430 nm), G (560 nm), R (610 nm) Phổ sóng điện từ  Ánh sáng mà người nhận biết (hay màu khác nhau) dải tần hẹp quang phổ điện từ Hệ thống thị giác  Tín hiệu nhận từ Photoreceptor   Các tế bào Rod Cone không gửi tín hiệu trực tiếp vào vỏ não Các tín hiệu tổ hợp thành kênh    Kênh độ chói (brightness): Phát sinh từ M+L+Rods; hoạt động vào buổi tối Độ chênh lệch màu Red-Green: L-M Độ chênh lệch màu Blue-Yellow: Tổng trọng số S, M, L  Các kênh chênh lệch màu dẫn tới kết luận   Các màu red green màu tương phản tốt Tương tự, black/white blue/yellow có độ tương phản tốt  Mù màu  Sự mù màu red-green: Các tế bào L, M không hoạt động tốt   8% với nam, 0.4% với nữ Khuyến cáo thiết kế UI:   Không phụ thuộc vào phân biệt màu, đặc biệt red-green Sử dụng dấu hiệu khác độ chói, vị trí, hình dạng Hệ thống thị giác  Vấn đề mù mầu  Tín hiệu đèn giao thông red-green người mù mầu?   Sử dụng dấu hiệu không gian: Đèn đỏ đặt đèn xanh đèn đỏ bên phải đèn xanh Microsoft Office với người mù màu?  Sử dụng gạch chân màu Red lỗi tả, gạch chân màu Green lỗi cú pháp (!)  Màu khác biệt  Các màu có bước sóng khác xa (ví dụ Red Blue phổ màu) có góc khúc xạ khác xa Do vậy, mắt cần có tập trung khác đặc trưng màu Dẫn tới nhìn thấy mờ, khó đọc  Chỉ dẫn thiết kế: Không sử dụng chữ màu Red Blue  Màu Blue  Thủy tinh thể dịch nước bị vàng theo tuổi: Blue có sóng ngắn nên bị lọc -> Không sử dụng màu Blue (text) tối Ví dụ phối màu Tổng kết  Tiến trình xử lý thông tin người  Các mô hình xử lý thông tin người  Phân tích thành phần mô hình tác động đến thiết kế UI có tính sử dụng  Hệ thống thị giác  Sử dụng màu GUI Các chủ đề nghiên cứu  Khả nhận thức, vận động người ảnh hưởng đến thiết kế UI?  Ba luật HCI    Fitt’s Law Power Law of Practice Hick’s Law  Nguyên tắc sử dụng màu GUI Trả lời gửi eMail: hci.dvduc@gmail.com Câu hỏi?