HCI lec7 final

BÀI XÂY DỰNG PROTOTYPE PGS.TS Đặng Văn Đức dvduc@ioit.ac.vn HÀ NỘI – 2007/10 Chủ đề môn học           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 7: Xây dựng prototype 2/31 Nội dung      dvduc-2007/10 Lỗi thiết kế hệ thống tương tác Khái quát prototype Kỹ thuật xây dựng prototype giấy Kỹ thuật xây dựng prototype máy tính Tổng kết Bài 7: Xây dựng prototype 3/31 Lỗi thiết kế?  Phần mềm ghi đĩa CD: Adaptec Easy CD Creator  Phần mềm Eudora Pro for Macintosh Caps Lock may interfere with password! dvduc-2007/10 Bài 7: Xây dựng prototype 4/31 Lỗi thiết kế?  WinCim  Sau chọn thực đơn File/Connect để kết nối Compuserve, hình xuất hộp thoại yêu cầu chọn Kết nối (?)  PowerBuilder  Môi trường lập trình hiển thị (với độ trễ) Tooltip Status Bar dịch trỏ chuột Icon  Nguyên lý: Hiển thị Tooltip với độ trễ 1s-2s, Status Bar cần hiển thị tức thời dvduc-2007/10 Bài 7: Xây dựng prototype 5/31 Lỗi thiết kế?  Windows calculator  Mới quan sát thiết kế có metaphor quen thuộc  Nhiều chi tiết bị biến đổi  Sử dụng sqt thay cho biểu tượng  Dấu * thay cho X để nhân  Các phím MC, MR, MS, M+?  CE có khác C?  CE = "Clear Error" hay = "Clear Everything" hay = "Clear Entry"  dvduc-2007/10 Tại sử dụng nhãn phím màu blue Red? Bài 7: Xây dựng prototype 6/31 Khái quát prototype  Tổng quát xem prototype (bản mẫu) mô hình thu nhỏ Nó thảo hay mô với khả dễ thay đổi  Nhiều loại prototype dvduc-2007/10 Bài 7: Xây dựng prototype 7/31 Tại xây dựng prototype?  Prototype xây dựng nhanh nhiều so với cài đặt thiết kế cuối cùng, ta đánh giá sớm nhận phản hồi sớm điểm tốt xấu thiết kế  Nếu có định thiết kế mà khó giải quyết, xây dựng nhiều prototype chứa giải pháp khác để xem xét, đánh giá  Với prototype  dễ dàng thay đổi thiết kế cần  dễ dàng định vứt bỏ prototype thiết kế có thiếu sót nghiêm trọng (khó khăn với mã trình debug)  Prototype hỗ trợ việc giao tiếp đội ngũ phát triển người sử dụng giao diện phần mềm dvduc-2007/10 Bài 7: Xây dựng prototype 8/31 Các loại prototype  Các loại prototype bao gồm  Dãy phác họa hình  Storyboard (phim hoạt dãy phác họa)  Powerpoint slideshow  Video mô sử dụng hệ thống  Makét bìa cứng  Đoạn chương trình với chức hạn chế viết ngôn ngữ lập trình C#, Java hay ngôn ngữ mô tả Director (Flash)  dvduc-2007/10 Mô hình vật lý Bài 7: Xây dựng prototype 9/31 Độ trung thực prototype  Độ trung thực xem mức độ tương tự prototype so với giao diện người sử dụng cuối   Prototype với độ trung thực thấp thiếu nhiều chi tiết, sử dụng vật liệu rẻ tiền  Prototype với độ trung thực cao có mức độ tương tự cao so với sản phẩm cuối Độ trung thực đa chiều horizontal Front end prototype scenario Vertical prototype Back end different features dvduc-2007/10 Bài 7: Xây dựng prototype 10/31 Các công cụ xây dựng prototype giấy  Bảng áp phích trắng (11” x14”)   Số lượng lớn thẻ mục (4” x 6” , 5” x8”)   Để highlighting Mục đích khác người sử dụng “typing” (viết lên chúng) Máy chụp   Để làm text fields, checkboxes, short messages Giấy bóng kính   Để dán mẩu giấy Băng giấy trắng   Làm menus, window contents, dialog boxes Hồ dán   Làm nền, khung cửa sổ Để tạo nhiều phần tử mẫu Bút, kéo băng giấy dvduc-2007/10 Bài 7: Xây dựng prototype 18/31 Kinh nghiệm xây dựng prototype giấy   Prototype giấy nên lớn kích thước thực tế  Chọn tay  Dễ dàng quan sát từ xa với đông người Không lo lắng việc sử dụng màu prototype Hãy sử dụng màu đơn    Để không làm tập trung vào khía cạnh quan trọng Không cần trình diễn hiệu ứng (ví dụ tooltip, drag & drop, animation, progress bar)  Thay phản hồi trực quan lời nói  Ví dụ " A progress bar pops up: 20%, 50%, 75%, done" Kết hợp phác họa giao diện tay với ảnh hình (screenshort) để tăng hiệu dvduc-2007/10 Bài 7: Xây dựng prototype 19/31 Ích lợi prototype giấy  Mô hình khái niệm:   Chức năng:   Người sử dụng tìm cách sử dụng? Phù hợp với thông tin tiền điều kiện? Thuật ngữ:   Nó có làm cần phải làm không? Thiếu đặc trưng không? Dẫn đường luồng nhiệm vụ:   Người sử dụng có hiểu UI không? Người sử dụng có hiểu nhãn không? Nội dung hình:  dvduc-2007/10 Những cần xuất hình? Bài 7: Xây dựng prototype 20/31 Hạn chế prototype giấy  Prototype giấy có độ trung thực thấp trực giác (look)  Đôi người sử dụng khó nhận widgets mà họ vẽ tay hay nhãn mà họ vừa mô tả cách vội vàng  Có độ trung thực thấp cảm giác (feel)  Hành động di nhả chuột  Các vấn đề liên quan đến luật Fitts phím nhỏ, controls gần hay xa nhận biết prototype giấy  Có độ trung thực thấp phản hồi   Có độ trung thực thấp thời gian đáp ứng   Ví dụ có progress chuyển động Không thể đo thời gian thực nhiệm vụ Có độ trung thực thấp ngữ cảnh sử dụng  dvduc-2007/10 Không thể đem cửa hàng tạp hóa, tàu điện ngầm, … Bài 7: Xây dựng prototype 21/31 Xây dựng prototype máy tính    Prototype máy tính mô phần mềm tương tác Prototype máy tính điển hình loại prototype theo chiều ngang  Có độ trung thực cao hình dáng cảm giác,  Có độ trung thực thấp theo chiều sâu Hai kỹ thuật xây dựng prototype máy tính  Storyboard   Form builder  dvduc-2007/10 Là trình tự hình cố định Là công cụ để vẽ giao diện thực Bài 7: Xây dựng prototype 22/31 Có thể biết từ prototype máy tính?    Có thứ prototype giấy Bố trí hình  Rõ ràng, phức tạp hay làm rối bời hay không?  Người sử dụng tìm thấy phần tử quan trọng? Màu, font, icon phần tử khác   Lựa chọn phù hợp chưa? Phản hồi tương tác  Có khả thông báo với người sử dụng thông điệp, trạng thái, thay đổi hình dáng chạy cách phản hồi khác  Luật Fitts  dvduc-2007/10 Các điều khiển đủ lớn chưa? Có gần không? Danh sách trượt có dài? Bài 7: Xây dựng prototype 23/31 Kỹ thuật xây dựng Storyboard    Storyboard: Là trình tự hình cố định  Mỗi hình có nhiều hotspots (hyperlink)  StoryBoard sử dụng cho kịch bản, chuyển dần đến chi tiết  Là dãy phác thảo/khung hình Lợi storyboard  Có thể vẽ storyboard  Nó cho phép tự sáng tạo mà Form builder có (với widgets cố định) Bất lợi từ chất tĩnh storyboard  Chỉ nhấn phím chuột, không nhập text  Text box, scrollbars, list boxes, buttons tranh, thụ động dvduc-2007/10 Bài 7: Xây dựng prototype 24/31 Công cụ xây dựng storyboard     PowerPoint  Mỗi slide show hình cố định mà vẽ trình vẽ hay vẽ trực tiếp PowerPoint  PowerPoint storyboard có hyperlink để nhảy đến slide trình diễn Macromedia Flash  Là công cụ giúp xây dựng giao diện đa phương tiện  Đặc biệt hữu hiệu cho giao diện prototype với giàu thông tin phản hồi chuyển động HTML  Mỗi hình đồ ảnh (image map)  Macromedia Dreamweaver hỗ trợ tốt cho việc xây dựng đồ ảnh HTML Các công cụ có ngôn ngữ mô tả  dvduc-2007/10 Basic, Ligo Javascript Bài 7: Xây dựng prototype 25/31 Ví dụ storyboard dvduc-2007/10 Bài 7: Xây dựng prototype 26/31 Ví dụ storyboard dvduc-2007/10 Bài 7: Xây dựng prototype 27/31 Kỹ thuật xây dựng Form builder  Form builder: Là công cụ để vẽ giao diện thực   Thực di widgets (buttons, text fields, labels, …) từ palette đặt cửa sổ Công cụ xây dựng Form   dvduc-2007/10 HTML  Là công cụ xây dựng ứng dụng Web  Có thể tổ hợp trang HTML tĩnh để mô đáp ứng động giao diện Web  Có thể gõ phím vào form, sử dụng trượt… GUI Builder  Visual Basic Form Builder kinh điển  NET Windows Forms,  Java Form Builders: Eclipse Visual Editor, Borland JBuilder, Sun NetBeans  Mac Interface Builder Bài 7: Xây dựng prototype 28/31 GUI Design Studio dvduc-2007/10 Bài 7: Xây dựng prototype 29/31 Tổng kết       Tầm quan trọng việc xây dựng prototype Các loại prototype Độ trung thực prototype Kỹ thuật xây dựng prototype giấy Kỹ thuật xây dựng prototype máy tính Các công cụ xây dựng prototype giấy máy tính dvduc-2007/10 Bài 7: Xây dựng prototype 30/31 Các chủ đề nghiên cứu   Giới thiệu công cụ mà anh/chị sử dụng để xây dựng prototype Nếu chưa sử dụng công cụ nào, anh chị sử dụng GUI Design Studio để xây dựng prototype demo Trả lời gửi eMail: hci.dvduc@gmail.com dvduc-2007/10 Bài 7: Xây dựng prototype 31/31 Câu hỏi? [...]... tiếp theo   Giới thiệu công cụ mà anh/chị đã từng sử dụng để xây dựng prototype Nếu chưa sử dụng công cụ nào, anh chị hãy sử dụng GUI Design Studio để xây dựng một prototype demo Trả lời gửi về eMail: hci. dvduc@gmail.com dvduc-2007/10 Bài 7: Xây dựng prototype 31/31 Câu hỏi?