Thiết kế giao diện người sử dụng Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang Mục tiêu ● ● ● ● Đề xuất số nguyên tắc thiết kế chung để thiết kế giao diện người sử dụng Giải thích sắc thái tương tác khác cách sử dụng chúng Giải thích sử dụng cách biểu diễn thông tin đồ hoạ sử dụng cách diễn tả thông tin văn Giải thích hoạt động qui trình thiết kế giao diện người sử dụng Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang Giao diện người sử dụng ● ● ● ● Các giao diện người sử dụng phải thiết kế phù hợp với kỹ năng, kinh nghiệm mong đợi người sử dụng chúng Người sử dụng thường đánh giá hệ thống qua giao diện chức Một giao diện thiết kế cỏi khiến người sử dụng gây sai sót lớn Thiết kế giao diện tồi nguyên nhân nhiều hệ thống phần mềm không sử dụng Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang Những yếu tố người thiết kế giao diện ● Hạn chế khả ghi nhớ nhanh • ● Con người mắc sai lầm • ● Khi người sử dụng bị nhầm lẫn hệ thống chạy sai cảnh báo thông báo lỗi gây thêm căng thẳng lại mắc lỗi nặng Con người khác • ● Con người nhận khoảng mục thông tin Nếu giao diện có nhiều gây cho người ta nhầm lẫn Con người có khả trí tuệ khác Do nhà thiết kế không nên thiết kế cho lực riêng Con người có sở thích đối xử khác • Bùi Th H ng Có người thích tranh ảnh, có người lại thích văn Chw ng 11 Thi t k giao di n ng i s d ng Trang Các nguyên tắc thiết kế UI ● ● ● Thiết kế UI phải tính đến nhu cầu, kinh nghiệm lực người sử dụng hệ thống Những người thiết kế cần phải am hiểu hạn chế vật lý trí tuệ người (e.g limited short-term memory) phải thừa nhận người mắc lỗi Các nguyên tắc thiết kế UI sở cho thiết kế giao diện tất nguyên tắc áp dụng cho tất thiết kế Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang Các nguyên tắc thiết kế UI Principle Description User familiarity The interface should use terms and concepts which are drawn from the experience of the people who will make most use of the system Consistency The interface should be consistent in that, wherever possible, comparable operations should be activated in the same way Minimal surprise Users should never be surprised by the behaviour of a system Recoverability The interface should include mechanisms to allow users to recover from errors User guidance The interface should provide meaningful feedback when errors occur and provide context-sensitive user help facilities User diversity The interface should provide appropriate interaction facilities for different types of system user Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang Nguyên tắc thiết kế ● Quen thuộc với người sử dụng • ● Nhất quán • ● Giao diện phải dựa ngôn ngữ người sử dụng khái niệm máy tính Ví dụ, hệ thống văn phòng nên dùng khái niệm thư, tài liệu, kẹp tài liệu không nên dùng thư mục, tệp, v.v Hệ thống nên hiển thị hình theo cách quán Các lệnh menu nên có khuôn dạng Ít gây ngạc nhiên • Bùi Th H ng Nếu lệnh hoạt động theo cách quen biết người sử dụng đoán hoạt động lệnh tương tự Chw ng 11 Thi t k giao di n ng i s d ng Trang Nguyên tắc thiết kế UI ● Tính khôi phục • ● Hướng dẫn • ● Hệ thống nên cung cấp cho người sử dụng khả khôi phục lại trạng thái trước họ làm động tác sai Chẳng hạn khả undo, khẳng định trước làm động tác mang tính huỷ bỏ, xoá mềm, v.v Một số hướng dẫn cho người sử dụng hệ thống trợ giúp, tài liệu on-line v.v cần phải cung cấp Nhiều kiểu người sử dụng khác • Bùi Th H ng Những khả tương tác kiểu người sử dụng khác nên hỗ trợ Ví dụ, số người sử dụng bị mắt nên dùng cỡ chữ to chẳng hạn Chw ng 11 Thi t k giao di n ng i s d ng Trang Những vấn đề thiết kế UI ● Hai vấn đề phải đặt thiết kế hệ thống tương tác • • ● Thông tin từ người sử dụng phải cung cấp cho hệ thống máy tính nào? Thông tin từ máy tính phải trình bày cho người sử dụng? Tương tác với người sử dụng trình bày thông tin phải tích hợp lại khung chặt chẽ Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang Các phong thái tương tác ● ● ● ● ● Thao tác trực tiếp Chọn menu Điền vào phiếu Ngôn ngữ mệnh lệnh Ngôn ngữ tự nhiên Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang 10 Các phong thái tương tác Interaction style Main advantages Main disadvantages Application examples Direct manipulation Fast and intuitive interaction Easy to learn May be hard to implement Only suitable where there is a visual metaphor for tasks and objects Video games CAD systems Menu selection Avoids user error Little typing required Slow for experienced users Can become complex if many menu options Most generalpurpose systems Form fill-in Simple data entry Easy to learn Checkable Takes up a lot of screen space Causes problems where user options not match the form fields Stock control, Personal loan processing Command language Powerful and flexible Hard to learn Poor error management Operating systems, Command and control systems Natural language Accessible to casual users Easily extended Requires more typing Natural language understanding systems are unreliable Information retrieval systems Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang 11 Trình bày thông tin In form at ion t o be displa yed Presen t at ion soft ware Displa y Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang 12 Các thông báo lỗi ● ● ● Thiết kế thông báo lỗi quan trọng Những thông báo lỗi tồi gây cho người dùng từ chối tiếp tục sử dụng hệ thống Các thông báo cần phải lịch sự, ngắn gọn, phù hợp có tính cách xây dựng Kiến thức kinh nghiệm người sử dụng yếu tố định thiết kế thông báo lỗi Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang 13 Qui trình thiết kế UI ● ● Thiết kế UI qui trình lặp phụ thuộc vào thống người sử dụng người phát triển Ba hoạt động qui trình : • • • Bùi Th H ng Phân tích người sử dụng Hiểu rõ người sử dụng làm với hệ thống; Làm mẫu cho hệ thống Phát triển mẫu để thí nghiệm; Đánh giá giao diện Thwr nghiệm mẫu với người sử dụng Chw ng 11 Thi t k giao di n ng i s d ng Trang 14 Qui trình thiết kế UI An al yse an d u n derstan d u ser act ivi ti es Produ ce paperbased design prot ot ype Design protot ype Evalu ate design wi th en d-u sers Produ ce dyn am i c design protot ype Execu table protot ype Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Evalu at e desi gn with en d-u sers Im plem en t fi n al u ser in t er face Trang 15 [...]... và kinh nghiệm của người sử dụng sẽ là yếu tố quyết định trong thiết kế các thông báo lỗi Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang 13 Qui trình thiết kế UI ● ● Thiết kế UI là một qui trình lặp và phụ thuộc vào sự thống nhất giữa người sử dụng và người phát triển Ba hoạt động chính trong qui trình này là : • • • Bùi Th H ng Phân tích người sử dụng Hiểu rõ người sử dụng sẽ làm gì với... để thí nghiệm; Đánh giá giao diện Thwr nghiệm các bản mẫu với người sử dụng Chw ng 11 Thi t k giao di n ng i s d ng Trang 14 Qui trình thiết kế UI An al yse an d u n derstan d u ser act ivi ti es Produ ce paperbased design prot ot ype Design protot ype Evalu ate design wi th en d-u sers Produ ce dyn am i c design protot ype Execu table protot ype Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Evalu... retrieval systems Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang 11 Trình bày thông tin In form at ion t o be displa yed Presen t at ion soft ware Displa y Bùi Th H ng Chw ng 11 Thi t k giao di n ng i s d ng Trang 12 Các thông báo lỗi ● ● ● Thiết kế các thông báo lỗi rất quan trọng Những thông báo lỗi tồi có thể gây cho người dùng từ chối tiếp tục sử dụng hệ thống Các thông báo cần phải lịch sự,