Slide tương tác người máy chương 4 quy trình thiết kế hệ tương tác phần 1

8/23/2012 Bài tập lớn • Khi gửi mơ tả tập lớn: – – – – Mục tiêu Nội dung công việc Các kết mong đợi Kế hoạch làm việc nhóm • Sinh viên gửi trước 30/09 đề xuất nhóm • Giáo viên đánh giá đề tài cho phép nhóm thực hay khơng PHẦN II: QUY TRÌNH THIẾT KẾ HỆ TƯƠNG TÁC I Giới thiệu chung II Đặc tả yêu cầu phân tích nhiệm vụ III Thiết kế tương tác người dùng máy tính IV Kiểm thử tính tiện dụng đánh giá hệ thống V Quản lý hệ thống tương tác CuuDuongThanCong.com https://fb.com/tailieudientucntt 8/23/2012 CHƯƠNG I: GIỚI THIỆU CHUNG Thiết kế ? Thế thiết kế tốt thiết kế tồi ? Các nguyên tắc cho tính dùng (usability principles) Quy trình thiết kế phần mềm Thiết kế tương tác ? Quy trình thiết kế hệ tương tác Các mô thức thiết kế (paradigms) Thiết kế • “Design is achieving goals with constraints” • Goals: – Mục đích thiết kế để tạo sản phẩm – Sản phẩm đối tượng – Tại họ lại muốn sử dụng • Contraints – – – – – Phải sử dụng thiết bị ? Các chuẩn mà ta phải tuân theo ? Giá thành Thời gian phát triển Ảnh hưởng đến sức khỏe, an toàn • Trade-off – Lựa chọn mục đích ràng buộc để làm tốt nhiệm vụ đặt CuuDuongThanCong.com https://fb.com/tailieudientucntt 8/23/2012 Thiết kế tồi có mặt khắp nơi • Nghĩ thiết kế tồi xuất giao tiếp với máy tính khơng Hãy nghĩ lại ! • Hầu hết vấn đề tính hữu dụng bật bạn du lịch đến nước lạ • Hãy tưởng tượng bạn du lịch đến đất nước bạn gặp phải điều sau: Trong phịng nghỉ Hà Lan • Thiết kế tồi đâu ? • Đề xuất cải thiện ? CuuDuongThanCong.com https://fb.com/tailieudientucntt 8/23/2012 Giảm âm TV bạn • Thiết kế tồi đâu ? • • Đề xuất cải thiện ? Robinet ? Vặn theo chiều ? • Thiết kế tồi đâu ? • Đề xuất cải thiện ? CuuDuongThanCong.com https://fb.com/tailieudientucntt 8/23/2012 Ví dụ 1: Thư thoại (voice mail) • Bạn có chuyến cơng tác phải nghỉ khách sạn Tuy nhiên bạn vừa phát để quên điện thoại di động nhà phải dùng điện thoại khách sạn để thực trao đổi cơng việc Khách sạn có hệ thống thư thoại phịng • Để xem bạn có tin nhắn, bạn nhấn vào phím nghe tiếng chng Nếu có tiếng “Beep, Beep, Beep” nghĩa có tin nhắn Ví dụ 1: Thư thoại (voice mail) • Để nghe tin nhắn, bạn phải tuân theo dẫn sau: – “1 Nhấn nút 491" Bạn làm hệ thống trả lời: “Chào mừng bạn đến với trung tâm tin nhắn khách sạn Sunrise Vui lòng nhấn số phòng mà bạn muốn để lại tin nhắn." Bạn nhấn số phòng chờ nghe làm để thu lại tin nhắn khơng có thêm dẫn Bạn nhìn vào hướng dẫn thấy: – "2 Bấm số phòng bạn, bấm dấu #" Bạn làm hệ thống trả lời: “Bạn vào hòm thoại phòng 106 Để nhắn tin, vui lòng gõ vào password“ 10 CuuDuongThanCong.com https://fb.com/tailieudientucntt 8/23/2012 Ví dụ 1: Thư thoại (voice mail) – Bạn khơng biết password gì, bạn nghĩ số phịng bạn, bạn bấm khơng có tín hiệu gì!!! Bạn muốn từ bỏ việc kiểm tra tin nhắn gọi lễ tân – Lễ tân giải thích cách thức thu nghe tin nhắn: “Quý khách phải nhập vào thời điểm số phòng số mở rộng điện thoại Tiếp theo đó, quý khách phải làm thao tác để truy nhập vào hộp thoại thao tác để nhắn thoại” – Quá bực, bạn mua điện thoại 11 Đâu vấn đề hệ thống thư thoại? • Làm cho người sử dụng muốn tức điên lên nhiều thao tác • Người sử dụng cảm thấy mơ hồ, nghi ngờ thao tác mà thực • Khơng hiệu phải thực nhiều thao tác thời gian • Khơng thể thực cách hiển nhiên: hệ thống cung cấp thông tin rời rạc khơng đầy đủ • KHĨ SỬ DỤNG 12 CuuDuongThanCong.com https://fb.com/tailieudientucntt 8/23/2012 Hãy kể số ví dụ thiết kế tồi 13 Ví dụ 2: Marble answering machine • Do Durrell Bipshop – cựu sinh viên cao học trường Royal College of Art in London – thiết kế • Là ví dụ thiết kế tương tác có kết nối hai giới vật lý giới SỐ 14 CuuDuongThanCong.com https://fb.com/tailieudientucntt 8/23/2012 Ví dụ 2: Marble answering machine • Các tin nhắn lưu trữ 15 Ví dụ 2: Marble answering machine • Người dùng tùy ý lựa chọn tin nhắn để nghe theo thứ tự 16 CuuDuongThanCong.com https://fb.com/tailieudientucntt 8/23/2012 Ví dụ 2: Marble answering machine • Người dùng phân loại tin nhắn gửi tới họ 17 Ví dụ 2: Marble answering machine • Người dùng gọi lại người để lại lời nhắn 18 CuuDuongThanCong.com https://fb.com/tailieudientucntt 8/23/2012 Marble answering machine có tốt ? • Sử dụng vật thể quen thuộc (hịn bi) có tin nhắn đến (số viên bi) • Người dùng cảm thấy thích thú sử dụng (cảm giác trò chơi) • Chỉ cần thao tác để thực nhiệm vụ • Thiết kế đơn giản “lịch lãm” • Ít chức thực để nghe tin nhắn • Tuy nhiên: khơng thể sử dụng khách sạn ? Vì viên bi bị lấy / giữ làm kỷ niệm • Chú ý thiết kế: cho ai, để làm gì, sử dụng đâu 19 Tính dùng Một thiết kế tốt cần đảm bảo tính dùng 20 CuuDuongThanCong.com https://fb.com/tailieudientucntt 10 8/23/2012 Tại cần nghiên cứu mơ thức ? • Liên quan đến việc thiết kế hệ thống tương tác – Các hệ thống phải thiết kế để đảm bảo tính dùng – Tính dùng được đánh ? Có đo hay khơng ? • Các hệ tương tác thiết kế thành công cho phép cung cấp mô thức cho việc phát triển hệ tương tác tương lai • Xây dựng hệ tương tác “tiện dụng hơn” hệ tương tác tồn • Thảo luận vấn đề liên quan nhằm cải tiến thiết kế hệ tương tác 35 Về nhà • Sinh viên tự đọc sách “Tương tác người máy ” – Nhà xuất KHKT thầy Lương Mạnh Bá • Trong mơ thức đánh giá – Ưu điểm – Nhược điểm – Sự tiến mô thức sau so với mô thức trước 36 CuuDuongThanCong.com https://fb.com/tailieudientucntt 18 8/23/2012 4.1 Xử lý theo lô • Giai đoạn: 1950s – 1960s • Xử lý theo lơ: tập lệnh lưu bìa hay băng giấy sau để nạp vào máy tính • Nhược điểm: – Tại thời điểm, chạy chương trình người sử dụng – Khó sử dụng, vướng, cồng kềnh, không dự báo 37 4.2 Phân chia thời gian (time sharing) • Xuất vào năm 1960s – IBM 360, SDS 940, PDP-10 • Cho phép chia sẻ tài ngun tính tốn cho nhiều người sử dụng (Multi-users) – Cơ chế lập lịch cho phép nhiệm vụ thi hành – Lưu chuyển đổi trạng thái người sử dụng trạng thái chương trình họ – Gán time slots cho công việc: Job1: 0-5; Job 2: 510; Job 3: 10-15 • Ưu điểm: so với xử lý theo lô (batch processing) – Gia tăng lượng thông tin người dùng máy tính – Cho phép người dùng tích cực có tương tác kịp thời 38 CuuDuongThanCong.com https://fb.com/tailieudientucntt 19 8/23/2012 4.3 Thiết bị hiển thị quan sát (VDU) • Giai đoạn: năm 1950s• Được ứng dụng qn • Chương trình Sketchpad (Ivan Sutherland, 1962) – Lần cho phép biểu diễn thông tin dạng ảnh lên thiết bị – Cho phép người dùng sử dụng máy tính để tạo cách nhanh chóng mơ hình trực quan, tinh vi hình hiển thị • Ý nghĩa: – Máy tính sử dụng để mở rộng khả người thông qua việc hiển thị điều khiển biểu diễn khác thông tin – Ý tưởng sáng tạo lịch sử phát triển máy tính 39 The first sketchpad [Ivan Sutherland,1962] 40 CuuDuongThanCong.com https://fb.com/tailieudientucntt 20 8/23/2012 http://mugtug.com/sketchpad/ 41 4.4 Các cơng cụ lập trình • Douglas Engelbart’s Augmenting Human Intellect, 1962 – “The secret to producing computing equipment that aids human problem-solving ability is providing the right toolkit “ • Engelbart đồng đề xuất cần phát triển công cụ lập trình làm sở cho việc phát triển hệ thống phức tạp • Ưu điểm: – Các thành phần nhỏ thiết kế tốt hiểu cách thấu đáo cho phép tạo công cụ lớn – Một công cụ lớn hiểu rõ, cho phép tạo công cụ lớn tiếp tục 42 CuuDuongThanCong.com https://fb.com/tailieudientucntt 21 8/23/2012 4.5 Mơ thức điều khiển trực tiếp • Ngun lý: – Tính nhìn thấy đối tượng quan tâm: – Gia tăng hoạt động với phản hồi nhanh chóng hành động – Khuyến khích người dùng khám phá mà hậu nặng nề – Mọi hành động có cú pháp xác – Thay ngơn ngữ dịng lệnh việc điều khiển trực tiếp đối tượng nhìn thấy 43 Ví dụ • • Giao diện: kéo thả file vào thùng rác thay sử dụng lệnh rm ? (Vì lại tốt hơn) Một số lĩnh vực ứng dụng điều khiển trực tiếp – Trị chơi – Hiển thị, Mơ – Hiện thực ảo (Cử chỉ, găng tay) – v.v 44 CuuDuongThanCong.com https://fb.com/tailieudientucntt 22 8/23/2012 4.6 Giao tiếp dựa vào tác tử • Ví dụ – Tác tử thư tín làm nhiệm vụ lọc thư – Tác tử web dị tìm trang web – Excel: tác tử tính tổng số • Ưu điểm – Có thể thay hoạt động người dùng để thực số nhiệm vụ 45 Quy trình thiết kế phần mềm • Các mơ hình vịng đời phần mềm – Mơ hình thác nước – Mơ hình vịng đời phần mềm Bohem – Mơ hình vịng đời hình 46 CuuDuongThanCong.com https://fb.com/tailieudientucntt 23 8/23/2012 5.1 Mơ hình thác nước Requirement Specification Architectural Design Detailed Design Coding and Testing Integration and Testing Operation and 47 Maintenance 5.2 Mơ hình Boherm Requirement Specification System Design Coding Testing Operation and Maintenance 48 CuuDuongThanCong.com https://fb.com/tailieudientucntt 24 8/23/2012 5.3 Mơ hình hình 49 Thiết kế tương tác • Định nghĩa: Designing interactive products to support people in their everyday and working lives 50 CuuDuongThanCong.com https://fb.com/tailieudientucntt 25 8/23/2012 Thiết kế tương tác để làm việc 51 Quy trình thiết kế hệ tương tác What’s wanted Interview Ethnography Scenario Task Analysis Analysis what is there vs what is wanted Design Dialogs Notations Prototype Evaluation Heuristics CuuDuongThanCong.com Guideline s Principles Precise Specificatio n Implement and deploy Architectures Documentations 52 Helps https://fb.com/tailieudientucntt 26 8/23/2012 7.1 Người dùng muốn What’s wanted ? Interview Ethnography Scenario Task Analysis Analysis what is there vs what is wanted Guideline s Principles Design Dialogs Notations Precise Specificatio n Implement and deploy Prototype Evaluation Heuristics Architectures Documentations 53 Helps 7.1 Người dùng muốn • Requirements – What’s wanted ? • Các phương pháp thực – – – – Phỏng vấn Videotaping Tìm kiếm tra cứu tài liệu vấn đề liên quan Quan sát trực tiếp 54 CuuDuongThanCong.com https://fb.com/tailieudientucntt 27 8/23/2012 7.2 Phân tích What’s wanted ? Interview Ethnography Scenario Task Analysis Analysis what is there vs what is wanted Guideline s Principles Design Dialogs Notations Prototype Evaluation Heuristics Precise Specificatio n Implement and deploy Architectures Documentations 55 Helps 7.2 Phân tích • Phân tích: Các kết thu nhận từ pha xác định nhu cầu xếp theo cách thức để đưa vấn đề trao đổi với khâu sau trình thiết kế • Các phương pháp: – Xây dựng kịch – Phân tích tác nhiệm 56 CuuDuongThanCong.com https://fb.com/tailieudientucntt 28 8/23/2012 7.3 Thiết kế What’s wanted ? Interview Ethnography Scenario Task Analysis Analysis what is there vs what is wanted Guideline s Principles Design Dialogs Notations Precise Specificatio n Implement and deploy Prototype Evaluation Heuristics Architectures Documentations 57 Helps 7.3 Thiết kế • Thiết kế: – Mặc dù tất quy trình thiết kế – Tuy nhiên: khâu trọng yếu q trình • Các phương pháp thiết kế dựa trên: – Luật tương tác – Nguyên lý thiết kế – Guidelines 58 CuuDuongThanCong.com https://fb.com/tailieudientucntt 29 8/23/2012 7.4 Tạo mẫu thử What’s wanted Interview Ethnography Scenario Task Analysis Analysis what is there vs what is wanted Guideline s Principles Design Dialogs Notations Precise Specificatio n Implement and deploy Prototype Evaluation Heuristics Architectures Documentations 59 Helps 7.4 Tạo mẫu thử • Vịng lặp thiết kế mẫu thử: – Con người phức tạp – Chúng ta không chờ đợi có thiết kế hồn hảo lần – Vì cần phải đánh giá để xem sản phẩm mẫu đạt chỗ cải thiện • Các phương pháp dựa trên: – Kỹ thuật đánh giá – Thu nhận thông tin phản hồi từ người dùng thử 60 CuuDuongThanCong.com https://fb.com/tailieudientucntt 30 8/23/2012 7.5 Cài đặt triển khai What’s wanted Interview Ethnography Scenario Task Analysis Analysis what is there vs what is wanted Guideline s Principles Design Dialogs Notations Precise Specificatio n Implement and deploy Prototype Evaluation Heuristics Architectures Documentations 61 Helps 7.5 Cài đặt triển khai • Cài đặt khai thác: – Sau hài lòng với việc thiết kế vào cài đặt triển khai sản phẩm • Các công việc cần thực – Writing Codes – Making harwares – Writing documents, manuals 62 CuuDuongThanCong.com https://fb.com/tailieudientucntt 31 8/23/2012 Tổng kết • SV nắm bắt – – – – – – Thiết kế Thiết kế tốt/tồi Các ngun lý tính dùng Các mơ thức tương tác Quy trình phát triển phần mềm Thiết kế tương tác 63 CuuDuongThanCong.com https://fb.com/tailieudientucntt 32 ...8/23/2 012 CHƯƠNG I: GIỚI THIỆU CHUNG Thiết kế ? Thế thiết kế tốt thiết kế tồi ? Các nguyên tắc cho tính dùng (usability principles) Quy trình thiết kế phần mềm Thiết kế tương tác ? Quy trình thiết kế. .. https://fb.com/tailieudientucntt 31 8/23/2 012 Tổng kết • SV nắm bắt – – – – – – Thiết kế Thiết kế tốt/tồi Các nguyên lý tính dùng Các mơ thức tương tác Quy trình phát triển phần mềm Thiết kế tương tác 63 CuuDuongThanCong.com... Documentations 57 Helps 7.3 Thiết kế • Thiết kế: – Mặc dù tất quy trình thiết kế – Tuy nhiên: khâu trọng yếu q trình • Các phương pháp thiết kế dựa trên: – Luật tương tác – Nguyên lý thiết kế – Guidelines