HCI lec3 final

BÀI THIẾT KẾ HƯỚNG NGƯỜI SỬ DỤNG 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 dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 2/47 Nội dung        dvduc-2007/10 Lỗi thiết kế hệ thống tương tác Các mô hình phát triển phần mềm Thiết kế hướng người sử dụng Phân tích người sử dụng Phân tích nhiệm vụ Kiến trúc phần mềm giao diện Tổng kết Bài 3: Thiết kế hướng người sử dụng 3/47 Lỗi thiết kế?  Ví dụ UI xây dựng Form PowerBuilder  User vẽ controls (phím, list box, ) để xây dựng form  Controls chọn từ thực đơn kéo xuống toolbar  Thực đơn có hình dáng palette, hoạt động thực đơn đẩy xuống   Nhận xét  Tiết kiệm không gian hình  Toolbar thay đổi liên tục -> người sử dụng lúng túng Ví dụ UI MS Paint  dvduc-2007/10 Giao diện đơn giản, hiệu Bài 3: Thiết kế hướng người sử dụng 4/47 Lỗi thiết kế?  Hoạt động Tab Control Windows  Khi có nhiều bảng (Tabs) hiển thị hộp thoại, Tabs thiết kế thành nhiều hàng  Khi chọn Tab hàng sau (ví dụ OpenGL) toàn hàng Tabs chuyển phía trước  Nhận xét:  dvduc-2007/10 Cách thức hoạt động làm cho người sử dụng lúng túng Bài 3: Thiết kế hướng người sử dụng 5/47 Lỗi thiết kế?  Internet Explorer   Overexcited (!!) Không đủ thông tin để người sử dụng đưa định    Cookie gì? Cái xảy loại bỏ nó? Không nên đưa câu hỏi mà người sử dụng cách trả lời  Không nên hỏi nhiều lần Có thể hàng trăm Cookies trình duyệt dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 6/47 Lỗi thiết kế?  MS Publisher  Bên trái tên tệp  Bên phải Preview (có ý nghĩa cao) dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 7/47 Các mô hình phát triển phần mềm  Tiến trình truyền thống: Mô hình thác nước (Waterfall) Requirement Design Requirement Code Design Integration Code Acceptance Integration Release Acceptance Release dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 8/47 Các mô hình phát triển phần mềm  Mô hình thác nước (tt)  Mô hình thác nước gợi ý mô hình hóa tiến trình thiết kế trình tự giai đoạn Được sử dụng sớm  Ý tưởng chủ đạo: "Suy nghĩ trước, lập trình sau" Các công việc thu thập phân tích yêu cầu, thiết kế thực trước viết dòng lệnh  Thực tế khó phân biệt giới hạn pha Đặc biệt với tiến trình phát triển UI, tuyến tính mà phải lặp hoạt động phát triển  Mô hình thác nước không phù hợp với thiết kế UI  Thiết kế UI công việc mạo hiểm, dự đoán thiết kế lần có UI thắng lợi  Trong mô hình thác nước, người sử dụng tham gia vào phân tích yêu cầu kiểm thử Thực tế, nhiều vấn đề nảy sinh từ người sử dụng suốt trình phát triển  Phản hồi mô hình thác nước dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 9/47 Các mô hình phát triển phần mềm  Mô hình lặp tăng dần RUP dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 10/47 Phân tích nhiệm vụ: mô hình GOMS  GOMS (Goals, Operators, Methods, Selection rules) mô hình hóa hành vi người sở ba phân hệ tương tác    Cảm giác (nhìn nghe),  Vận động (cánh tay-bàn tay-ngón tay chuyển động đầu-mắt)  Nhận thức (lập định xâm nhập nhớ người) Bốn thành phần mô hình GOMS  Mục tiêu (goals),  Thao tác (operators),  Phương thức (methods),  Luật lựa chọn (selection rules) Goals phân rã thành sub-goals để thực mục tiêu cụ thể dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 34/47 Phân tích nhiệm vụ: mô hình GOMS  Ví dụ mô tả theo mô hình GOMS Goal 1: Identify job candidates Method for Goal 1: { Goal 1.1: Specify required set of skills Method for Goal 1.1: { Operator 1.1.1: Recall required set of skill Goal 1.1.2: Enter required set of skills Method for Goal 1.1.2: { Operator 1.1.2.1: Type in required set of skills Goal 1.1.2.2: Verify entered data Method for Goal 1.1.2.2: { Operator 1.1.2.2.1: Read entered data from display Operator 1.1.2.2.2: Compare with memorized skill set } } dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 35/47 Phân tích nhiệm vụ: mô hình GOMS   GOMS hình thành tảng lý thuyết vững Tuy nhiên nhiều hạn chế Với ứng dụng lớn, để mô tả đầy đủ mô hình nhiệm vụ theo GOMS đòi hỏi tệp lưu trữ khổng lồ  Nhiều thông tin chi tiết mô hình không phù hợp với thực tế trình phân tích nhiệm vụ    Đòi hỏi chuyên gia thực đầy đủ kỹ thuật phân tích GOMS không sử dụng rộng rãi thực tế Geoff Lee đề xuất mô hình GOMS đơn giản (1993)  Giới hạn phân rã Goal, Sub-goals mức tổng quát hơn, không chứa định thiết kế  Đề xuất ký pháp đơn giản nhằm giảm thiểu kích thước tệp dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 36/47 Chuyển đổi nhiệm vụ sang thiết kế GUI Task Model Object Model System-Level User Interface Design Metaphor Design [Geoff Lee, 1993] Object-Oriented and Contextual GUI Design dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 37/47 Chuyển đổi nhiệm vụ sang thiết kế GUI   Task Model  Giúp người thiết kế hình dung hệ thống tương tác từ góc độ người sử dụng  Mô hình hóa nhiệm vụ người sử dụng để thực phiên ứng dụng Object Model  Từ kết mô hình nhiệm vụ, xây dựng mô hình đối tượng mức giao diện,  Mô hình đối tượng phải từ góc nhìn người sử dụng (bổ sung phần tử khung nhìn, Facet thuộc tính)  System-Level User Interface Design  Phân hoạch hệ thống theo nhóm người sử dụng trội  Nhóm logic phần tử mô hình đối tượng  Thiết kế hành vi tương tác người sử dụng hệ thống dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 38/47 Chuyển đổi nhiệm vụ sang thiết kế GUI  Metaphor Design  Khái niệm “ẩn dụ - metaphore” “tương tự- analogy” Trong thiết kế UI, thực thể quen thuộc giới thực thường áp dụng để người sử dụng có dấu hiệu ứng xử quen thuộc đối tượng hệ thống   Nhận biết ẩn dụ tiềm Lựa chọn, ánh xạ ẩn dụ ứng viên vào ứng dụng Object-Oriented and Contextual GUI Design  Ánh xạ mô hình đối tượng mức UI ánh xạ thiết kế ẩn dụ sang thiết kế hệ thống cụ thể  Lựa chọn thành phần tương tác mức UI để biểu diễn phần tử khác mô hình đối tượng lớp, quan hệ, khung nhìn, thuộc tính, thao tác facet dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 39/47 Phân tích thiết kế hệ thống thông tin Thu thập yêu cầu Xác định phạm vi mục đích Phân tích chức phân tích hướng đối Phân tích thiết kế UI tượng Xây dựng mẫu động Phân tích nhiệm vụ (storyboard) Xây dựng mẫu chức kỹ thuật khác Đánh giá Xây dựng mẫu UI Xây dựng mô hình khái niệm (prototype) Đặc tả UI Thiết kế kiến trúc Đặc tả API Thiết kế chi tiết Các lớp (layers) khác dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng Lớp UI 40/47 Kiến trúc phần mềm giao diện  Nhiều mẫu thiết kế (Design Pattern) đề xuất hỗ trợ thiết kế kiến trúc GUI  Mẫu thiết kế (cặp vấn đề - giải pháp vấn đề) giải pháp tái sử dụng cho vấn đề tương tự kỹ nghệ phần mềm  Thiết kế phần mềm OO khó, thiết kế phần mềm OO tái sử dụng khó hơn, kinh nghiệm thiết kế OO tạo nên thiết kế tốt  Ba mẫu thiết kế GUI quan trọng nhất:   MVC (Model-View-Controller)  Được đề xuất áp dụng thiết kế vào năm 80 kỷ trước (xuất lần đầu SmallTalk-80)  ASP.NET (2009) sử dụng kiến trúc Phân cấp khung nhìn (View Hierarchy)   Người quan sát (Observer)  dvduc-2007/10 Đặc trưng kiến trúc Toolkit GUI quen thuộc Tách mô hình từ View Control Bài 3: Thiết kế hướng người sử dụng 41/47 Kiến trúc phần mềm giao diện: MVC  MVC  MVC mẫu thiết kế sử dụng để tách logic nghiệp vụ khỏi giao diện, tách phần liệu khỏi phần trình diễn, tách đầu vào khỏi đầu   Controller quản lý đầu vào View quản lý đầu  UI có nhiều khung nhìn tập liệu ứng dụng  Có thể tái sử dụng View Controller cho nhiều Models khác nhau, ứng dụng khác Ví dụ MVC: text box widget  Model: Xâu ký tự thay đổi  View: Đối tượng hiển thị hình (thường edit box)  Controller: Đối tượng nhận ký tự từ gõ phím chèn vào xâu dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 42/47 Kiến trúc phần mềm giao diện: MVC dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 43/47 Kiến trúc phần mềm giao diện: MVC  Biểu diễn hoạt động MVC  Event gây nên việc Controller làm thay đổi Model, View  Khi Controller thay đổi liệu Model, View tự cập nhật  Khi Controller thay đổi View, View lấy liệu từ Model tự hiển thị dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 44/47 Kiến trúc phần mềm giao diện: MVC  Vi dụ mẫu thiết kế MVC: Spinner  Một Control (quản lý kiện từ nhấn chuột)  Hai Controlers (gõ phím nhấn chuột) dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 45/47 Tổng kết     Mô hình phát triển phần mềm: Mô hình lặp xoáy ốc phù hợp với phát triển GUI Phân tích người sử dụng nhằm thu thập yêu cầu người sử dụng phân lớp người sử dụng Phân tích nhiệm vụ tập trung nghiên cứu phương pháp phân tích dựa mô hình HTA GOMS Kiến trúc phần mềm UI tập trung nghiên cứu mẫu thiết kế MVC dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 46/47 Các chủ đề nghiên cứu        Các kỹ thuật hiệu phân tích người sử dụng Mô hình GOMS rút gọn Geoff Lee Mô hình Keystroke-Level Model (KLM) Card, Moran, & Newell Các kiến trúc phần mềm giao diện Mẫu thiết kế Observer Mẫu thiết kế View Hierarchy Mô hình hóa thiết kế UI UML 2.1 Trả lời gửi eMail: hci.dvduc@gmail.com dvduc-2007/10 Bài 3: Thiết kế hướng người sử dụng 47/47 Câu hỏi?