Bài giảng Thiết kế tương tác đa phương tiện - Bài 6: Đánh giá và thử nghiệm - Trần Thị Kim Chi

Giảng viên: Trần Thị Kim ChiBài 61Đánh Giá và Thử NghiệmNỘI DUNGĐánh giá theo kinh nghiệm(heuristic)3Các lỗi giao diện1Các phương pháp đánh giá2Kiểm thử GUI bởi người sử dụng42Tổng kết6Kiểm thử bằng phương pháp duyệt dịch vụ5Các lỗi giao diện13 Giao diện Alt –Tab trong Microsoft Window Chức năng tương tự có thể được tìm thấy trong các hệ thống khác như KDE, Gnome và Mac OS Không có tính gợi ý (affordance) Giao diện Alt-Tab được thiết kế như phím tắt (shortcut) Đảm bảo tính đơn giản về đồ họa và thao tác Hiệu quả khi chuyển đổi từ cửa sổ này sang cửa sổ khác trên màn hìnhCác lỗi giao diện14Lỗi thiết kế512/3/2020Các lỗi giao diện1Các lỗi giao diện16Các lỗi giao diện17Lỗi thiết kế812/3/2020Sign-In Page:1. Good visibility (centered, obvious sign­ in spot)Các lỗi giao diện1Lỗi thiết kế912/3/2020Opening Page:·Attention - Info related to most common tasks·Bridged the Gulf of Execution·Visibility good- Left pane never changes- even when message is openCác lỗi giao diện1Lỗi thiết kế Menu thích nghi của MS Office Khởi đầu menu đơn chỉ có các items thông dụng Khi click chuột trên mũi tên dưới menu thì mọi item sẽ hiển thị Menu thích nghi chỉ hiển thị các items hay sử dụng nhất và mới được sử dụng Đáp ứng tính đơn giản và hướng nhiệm vụ Thiếu tính dự báo trước khi menu thay đổi1012/3/2020Các lỗi giao diện1Các lỗi giao diện111Đánh giá là quá trình sử dụng các phương thức khác nhau để xác định quá trình thiết kế có đảm bảo yêu cầu của một hệ thống đã đưa ra không.Thiết kế và đánh giá là hai quá trình lặp được tiến hành một cách liên tiếp nhằm giải thích các câu hỏi:Why: để kiểm tra các yêu cầu và sở thích của người dùng.What: kiểm tra các chức năng của hệ thống, của các giao diện có hoạt động tốt không. Where: quá trình này diễn ra ở đâuWhen: trong suốt giai đoạn thiết kế; sản phẩm hoàn thành có được đánh giá để đưa ra các thông tin về sản phẩm mới khôngCác phương pháp đánh giá - Evaluation212Các phương pháp đánh giáĐánh giá giao diện (UI) theo phương pháp HeuristicKiểm tra một cách hệ thống thiết kế giao diện so với tập các nguyên tắc tính sử dụng được đã nhận biết trướcĐội ngũ đánh giá: Các chuyên giaĐánh giá UI bởi người sử dụng (User Testing)Người sử dụng thử nghiệm GUICho phép quan sát trực tiếp người sử dụng khi họ đang sử dụng ứng dụngĐáng giá UI theo phương pháp duyệt nhiệm vụ (Cognitive Walkthrough)Đánh giá theo tập các nhiệm vụ và đánh giá tính dễ hiểu và tính dễ học của chúngCác phương pháp đánh giá213Được phát triển bởi Developed Jacob Nielsen vào năm 1990.Dựa trên cơ sở giải quyết vấn đề bằng cách đánh giá và tìm giải pháp qua thử nghiệm từ phân tích kinh nghiệm sử sụng của 249 vấn đềHeuristics thường dùng để đánh giá cho các thiết bị mobile, wearables, virtual worlds, etc.14Đánh giá theo kinh nghiệm(heuristic)3Nhắc lại 10 heuristics của NielsenĐáp ứng mong đợiPhù hợp thế giới thựcNhất quán và chuẩnTrợ giúp và tài liệuNgười sử dụng làm chủNgười sử dụng điều khiển các ứng dụng và tự doTính trực quan của trạng thái hệ thốngMềm dẻo và hiệu quảLỗiTránh lỗiNhận dạng, không hồi tưởngBáo cáo lỗi, phát hiện và khắc phụcTính đơn giảnThiết kế đẹp và tối thiểu15Đánh giá theo kinh nghiệm(heuristic)3Kỹ thuật đánh giá HeuristicCác bước đánh giáNgười đánh giá khám phá UI, đánh giá nó trên cơ sở heuristicsLập ra danh sách các vấn đề phát hiện liên quan đến tính sử dụng đượcKỹ thuậtCần phải diễn giải tại sao nó vi phạm heuristicsLiệt kê đầy đủ các vấn đề mà đã tìm thấy trong bảngKiểm tra giao diện ít nhất 2 lầnHiệu chỉnh mọi vấn đề trong GUI nhờ các hướng dẫn thiết kế đã nghiên cứu (không giới hạn bởi 10 heiristics của Nielsen16Đánh giá theo kinh nghiệm(heuristic)3Đánh giá HeuristicĐánh giá heutistic theo phương pháp của Nielssen : (10 đánh giá)Theo các nhà nghiên cứu thì pp của Nielssen là pp ít tốn kém nhấtĐánh giá heuristic là pp đánh giá mà các chuyên gia đánh giá về tính sử dụng được – những hiểu biết – đã sử dụng – suy nghĩ nhiều về thiết kế giao diệnCác bước cơ bản đánh giá heuristic khá đơn giản1712/3/2020Đánh giá theo kinh nghiệm(heuristic)3Ví dụ về đánh giá heuristicVí dụ Hãy thử phân tích một số phần tử để tìm ra các vấn đề vi phạm về tính sử dụng được và chúng cần hiệu chỉnh gì1812/3/2020Đánh giá theo kinh nghiệm(heuristic)3Ví dụ về đánh giá heuristic1912/3/2020Đánh giá theo kinh nghiệm(heuristic)32012/3/2020Continue ShoppingĐánh giá theo kinh nghiệm(heuristic)321Đánh giá theo kinh nghiệm(heuristic)3Tiến trình đánh giá HeuristicThông báoTổ chức gặp gỡ giữa đội ngũ thiết kế và những người đánh giáGiới thiệu ứng dụngGiải thích về số đông người sử dụng, nghiệp vụ và các kịch bảnĐánh giáNgười đánh giá làm việc độc lậpViết báo cáo hay người quan sát ghi âm lại các bình luận của người đánh giáTập trung vào phát hiện vấn đề, không xếp hạng tính nguy hại nó tại thời điểm nàyMỗi người đánh giá làm việc ít nhất từ 1-2 giờ22Đánh giá theo kinh nghiệm(heuristic)3Tiến trình đánh giá HeuristicXếp hạng lỗi nghiêm trọng của UINgười đánh giá xếp mức ưu tiên cho mọi vấn đề tìm ra (không chỉ của riêng mình)Giải thích ý nghĩa cách xếp hạng người đánh giáBàn bạc Người đánh giá và đội ngũ thiết kế trao đổi các kết quả và phương pháp giải quyết vấn đề23Đánh giá theo kinh nghiệm(heuristic)3Đánh giá Heuristics cho websites (Budd, 2007) tập trung vào: Tính rõ ràngSự phức tạp Ngữ cảnh người dùngĐộ tin cậy và sự thỏa mãn của người dùng24Đánh giá theo kinh nghiệm(heuristic)3Kinh nghiệm duyệt Web của người dùngĐiều hướng dễ dàng.Cung cấp kịch bản trợ giúp người dùng.Các chức năng phải rõ ràng và cụ thể.Dựa vào 3 câu hỏi sau:Các chức năng có đem đến lới ích cho người dùng không?Có các thông báo hay phản hồi cho người dùng khi duyệt Web không?Người dùng có chọn chức năng đúng với các phản hồi hay yêu cầu của Website không?25Đánh giá theo kinh nghiệm(heuristic)3Kinh nghiệm duyệt web của người quản trịDễ dàng thay đội, cập nhập thông tin của Website khôngDễ dàng thực hiện các chức năng quản lý các thành viên không26Đánh giá theo kinh nghiệm(heuristic)3Phân tíchĐánh giá lưu lượng người truy cập vào WebsiteCác mục nào người sử dụng hay vàoĐánh giá các chức năng tìm kiếmSố lần của 1 người sử dụng viếng thăm theo ngày, tuần, tháng,27Đánh giá theo kinh nghiệm(heuristic)3Social action analysis(Perer & Shneiderman, 2008)Đánh giá theo kinh nghiệm(heuristic)3Response times for keystroke level operators (Card et al., 1983)Đánh giá theo kinh nghiệm(heuristic)3Summing togetherĐánh giá theo kinh nghiệm(heuristic)3Using KLM to calculate time to change gaze (Holleis et al., 2007)Đánh giá theo kinh nghiệm(heuristic)3Fitts’ Law (Fitts, 1954)Luật Fitts dự đoán thời gian để chọn một đối tượng bằng chuột hay phím hay thiết bị khác dựa vào khoảng cách tới các đối tượng và kích thước của các đối tượng đóĐánh giá theo kinh nghiệm(heuristic)3Một số điểm lưu ý khi đánh giá HeuristicKết hợp tốt giữa người phát triển và những người quản lý.Các báo cáo phải bao gồm đầy đủ ưu, nhược điểm của giao diệnVí dụ: “Good: Toolbar icons are simple, with good constrast add few colors(minimalist design)”Văn phong sử dụng phải lịch sựKhông viết “The menu organization is a complete mess” Nên viết “menus are not organized by function”Báo cáo phải cụ thểKhông viết “text is unreadable”Nên viết ”text is too small, and has poor contrast (black text on dark green background”)33Đánh giá theo kinh nghiệm(heuristic)3Người sử dụng kiểm thử3412/3/2020ImplementEvaluateDesignTask analysisDesign heuristicHeuristic evaluationUser testingProtyping Toolkits4Kiểm thử GUI bởi người sử dụng35Kiểm thử GUI bởi người sử dụng4Phòng thí nghiệm kiểm thửMôi trường kiểm thửTổ chức phòng làm việcBên ngoài có biển hiệu “User test in process – DO not disturb”Ngắt điện thoại (Cố định và di động)Đảm bảo ánh sángKhông khí trong lành (không có cồ rượu)36Kiểm thử GUI bởi người sử dụng4Phòng thí nghiệm kiểm thửCác thiết bị kiểm thửMáy quay video số (minDV, DVD)Chân máy quayMicrophone loại tốtTai ngheGương (để thu hút nét mặt của người kiểm thử)Đèn (đèn bàn, đèn quay video)Màn hình màu (để xem ảnh máy quay)Máy ghi DVD, videoDây nguồn điệnBiển hiệuPhần mềm hay mẫu giấy ghi chép37Kiểm thử GUI bởi người sử dụng4Phòng thí nghiệm kiểm thử38Kiểm thử GUI bởi người sử dụng4Phòng thí nghiệm kiểm thử39Kiểm thử GUI bởi người sử dụng440www.id-book.comUsability lab with observers watching a user & assistantKiểm thử GUI bởi người sử dụng4Các bước kiểm thử bởi người sử dụng: Gồm 6 bướcPhát triển kế hoạch kiểm thử Mô tả mục đích kiểm thử Lý lịch người sử dụng Phương pháp Danh sách nhiệm vụ Chọn lựa người tham gia Chọn người sử dụng Phân nhóm Quản lý CSDL người sử dụng4112/3/2020Kiểm thử GUI bởi người sử dụng4 Chuẩn bị vật liệu kiểm thử Kịch bản nhiệm vụ Mẫu thu thập dữ liệu Hướng dẫn thảo luận Các câu hỏi sau kiểm thử Lập danh sách các kiểm thử sẽ thực hiện Thực hiện kiểm thử thí điểm (Pilot Test) Thực hiện kiểm thử thật (Real Test) Phân tích và báo cáo cuối cùng4212/3/2020Kiểm thử GUI bởi người sử dụng4Thực hiện kiểm thử thí điểm (Pilot Test) Các lệnh mơ hồ Ước lượng thời gian Tiêu chí mơ hồ Câu hỏi phỏng vấn không đúng mục tiêu4312/3/2020Kiểm thử GUI bởi người sử dụng4Thực hiện kiểm thử thật (Real Test) Không nhắc người sử dụng khi kiểm thử Chỉ hỗ trợ khi người sử dụng gặp phải vần đề nghiêm trọng Lưu trữ lại màn hình khi gặp vấn đề4412/3/2020Kiểm thử GUI bởi người sử dụng4Phân tích và báo cáo cuối cùng Tổng hợp các dữ liệu : thời gian hoàn thành, số % người sử dụng thực hiện thành công, vẽ biểu đồ tỷ lệ Phân tích dữ liệu : nhận biết lỗi và mức độ khó của chúng, chuẩn đoán nguồn gốc lỗi, gán mức độ nghiêm trọng cho các lỗi Báo cáo tổng kết cần bao gồm : trang tiêu đề, mô tả môi trường test, tóm tắt việc thực hiện, mô tả test, dữ liệu người sử dụng test, danh sách các điểm tốt được tìm ra Các phụ lục4512/3/2020Kiểm thử GUI bởi người sử dụng4Các bước kiểm thử bởi người dùngChuẩn bị vật liệu kiểm thửKịch bản nhiệm vụMẫu thu thập dữ liệuHướng dẫn thảo luậnCác câu hỏi sau kiểm thửLập danh sách các kiểm thử sẽ thực hiệnThực hiện kiểm thử thí điểm (pilot test)Thực hiện kiểm thực thật (Real Test)Phân tích và báo cáo cuối cùng46Kiểm thử GUI bởi người sử dụng4www.id-book.comPortable equipment for use in the fieldKiểm thử GUI bởi người sử dụng4Thiết bị dễ mang đi48www.id-book.comKiểm thử GUI bởi người sử dụng4www.id-book.comMobile head-mounted eye trackerPicture courtesy of SensoMotoric Instruments (SMI), copyright 2010Kiểm thử GUI bởi người sử dụng4www.id-book.comMột vài dữ liệu để testThời gian để hoàn thành công việc theo lý thuyếtThời gian thật để hoàn thành công việc Các lỗi trong mỗi lần testSố các bước để thực hiện một chức năng của hệ thốngSố các lỗi do người sử dụng gây raSố người sử dụng gây ra cùng một lỗiSố người sử dụng vào thành công một chức năngKiểm thử GUI bởi người sử dụng4What does this data tell you?Kiểm thử GUI bởi người sử dụng4Có bao nhiêu người tham gia quá trình kiểm thử GUI bởi người sử dụngSố người phụ thuộc vàoChương trình Test;Số người Test có sẵn;Chi phí cho quá trình tests.Thường từ 5 – 10 người tham gia. Kiểm thử GUI bởi người sử dụng453www.id-book.comName 3 features for each that can be tested by usability testingiPadKiểm thử GUI bởi người sử dụng454www.id-book.comUbiFit Garden: An in the wild studyKiểm thử GUI bởi người sử dụng4Rối, lộn xộnWhy study skiers in the wild ?Jambon et al. (2009) User experience in the wild. In: Proceedings of CHI ’09, ACM Press, New York, p. 4070-4071.Kiểm thử GUI bởi người sử dụng4Crowdsourcing-when might you use it?Kiểm thử GUI bởi người sử dụng4Evaluation methodsMethodControlled settingsNatural settings Without usersObserving x x Asking users x x Asking experts x xTesting x Modeling xKiểm thử GUI bởi người sử dụng4Các tham số đầu vàoMô tả prototype của hệ thốngMô tả nhiệm vụ mà người sử dụng thực hiện trên hệ thống để đánh giáDanh sách viết đầy đủ các hành động (kịch bản) cần thiếtNgười sử dụng duyệt qua trình tự các hành động để đưa ra các nhận xét về tính sử dụng được của hệ thốngKiểm thử bằng phương pháp duyệt nhiệm vụ5 Cần trả lời các câu hỏi Người sử dụng cố gắng có được hành động đúng Người sử dụng nhận ra rằng họ đang hành động đúng Người sử dụng kết hợp các hành động đúng với hiệu ứng đạt được Nếu hành động đúng được thực hiện, người sử dụng thấy được bước tiến trong việc giải quyết nhiệm vụ5912/3/2020Kiểm thử bằng phương pháp duyệt dịch vụ5Ví dụ này mô tả giao diện của một máy tự động bán vé tàu hỏa Kịch bản : Nick đi thăm 1 người bạn ở Edison và muốn mua chiếc vé một chiều. Nick chỉ có $5 trong túi Câu hỏi : Người sử dụng muốn đạt được mục đích ? Mua vé 1 chiều đến Edison6012/3/2020Kiểm thử bằng phương pháp duyệt nhiệm vụ56112/3/2020Kiểm thử bằng phương pháp duyệt nhiệm vụ5 Phương pháp này được thực hiện thông qua trả lời các câu hỏi về nhiệm vụ để tìm ra chỗ khuyết điểm của giao diện. Các câu trả lời theo trình tự như sau Đặt câu hỏi cho từng goal 6212/3/2020Kiểm thử bằng phương pháp duyệt nhiệm vụ5 Hành động hiển nhiên đối với người sử dụng ?Có, NSD nhận rõ 4 goal NSD kết nối được mô tả hành động đúng với ý định của họCó, nhãn bước 1Người sử dụng nhận biết đáp ứng của hệ thống (để biết lựa chọn đúng hay sai) Có, nếu phím Edison được chiếu sáng6312/3/2020Kiểm thử bằng phương pháp duyệt nhiệm vụ5Lỗi xảy ra ở goal thứ 3 6412/3/2020Kiểm thử bằng phương pháp duyệt nhiệm vụ5 Trường hợp thông thường, thực hiện hành động với bước 4 để kết thúc mua vé Tuy nhiên xảy ra 2 trường hợp như sau Nick nhận thấy không đủ tiền mua vé trước khi bỏ tiền vào máy Nick nhận thấy không đủ tiền khi đã bỏ $5 vào máy 6512/3/2020Kiểm thử bằng phương pháp duyệt nhiệm vụ5 Giải quyết trường hợp không đủ tiền, NSD muốn hùy tác vụ và lấy lại tiền Hành động hiển nhiên với NSD ? Không, thiết kế cần bổ sung phần tử giao diện mới để rõ ràng hơn 6612/3/2020Kiểm thử bằng phương pháp duyệt nhiệm vụ5 6712/3/2020Cancel & Return moneyOne way $6.35Received $5Kiểm thử bằng phương pháp duyệt nhiệm vụ5Tổng kết6QUESTION69Câu 1 : Nêu 3 phương pháp đánh giá GUICâu 2 : Phát biểu 10 nguyên tắc đánh giá heuristic của Nelsen Câu 3 : Tại sao phương pháp đánh giá heuristic lại phổ biến hơn nhưng phương pháp khác Câu 4 : Tìm ra lỗi trong giao diện mua vé tự động theo pp duyệt nhiệm vụddddddddddddddddddddddddThanks you !