CTT 534 Thiết kế giao diện LN05 prototyping vi

CTT534 – Thiết Kế Giao Diện HK II 2015 – 2016 Prototyping Bài giảng có tham khảo nguồn tài liệu sau - MIT CS Course 6.813/6.831 Nội dung n Prototype q q n n Protype xác thấp - xác cao Các phương diện tính xác Prototype giấy Prototype máy tính q q q 5/24/16 Storyboard Form builder Wizard of Oz Qui trình cho đồ án môn học Đề xuất đề tài Phân tích người dùng nghiệp vụ Hôm Phác thảo ban đầu Đánh giá prototype Prototype ban đầu Chi tiết prototype Đánh giá prototype Cài đặt Thực kiểm thử từ phía người dùng 5/24/16 Các lựa chọn thiết kế n Tại cần thể ý tưởng thiết kế sớm tốt? q q n Ko thể đánh giá chưa tạo Sau có phần mềm (thành phẩm), việc thay đổi thiết kế khó khăn Chúng ta muốn q q q q 5/24/16 Thiết kế nhanh tốt Cho phép linh động việc giải pháp thay khác Chi phí thấp Khuyến khích phản hồi có giá trị Prototype gì? n n Prototype, mẫu loại, dạng, ví dụ đầu tiên, vật, có vai trò ví dụ điển hình, tảng, chuẩn cho vật khác loại Ví dụ q q q 5/24/16 Screen shots Bản vẽ giấy, vẽ máy tính Phần mềm chạy được, chưa hoàn chỉnh Các demo số chức Tại cần có prototype? n n n n n Thử nghiệm giải pháp thiết kế khác Cung cấp thể ban đầu, cụ thể ý tưởng thiết kế Cung cấp trải nghiệm thực tế (hands-on experience) cho tất bên liên quan (đội ngũ thiết kế, người dùng…) Dễ dàng thay đổi vứt Giúp cho việc thiết kế hướng đến người dùng q n n Phải quan sát kiểm tra ý tưởng với người dùng Tạo điều kiện cho trình thiết kế đánh giá lặp Giảm rủi ro làm khách hàng bất ngờ q 5/24/16 Khách hàng: “Ko thấy, ko tin” Tính xác prototype n Prototype có độ xác thấp (low-fidelity) q q n Tập phác thảo (sketch), kịch (storyboard) cung cấp giả lập, tĩnh, ko phải máy tính, ko chạy sản phẩm dự định phát triển Bỏ qua chi tiết Prototype có độ xác cao (high-fidelity) q q 5/24/16 Tập hình, cung cấp mô hình động, chạy máy tính sản phẩm dự định phát triển Là phần mềm chạy Tính xác prototype (tt) 5/24/16 Các mặt/chiều tính xác n Ngang (horizontal) q n Dọc (vertical) q n Prototype phủ nhiều chức năng, chi tiết Prototype phủ chức năng, chi tiết Chéo (diagonal) q 5/24/16 Prototype dọc, phủ đến mức độ định Các mặt/chiều tính xác (tt) n Quan sát (look) q q n Là thể bên thiết kế đồ họa giao diện Có thể phác thảo vẽ tay Cảm nhận (feel) q q 5/24/16 Liên quan đến cách thức nhập liệu để tương tác với giao diện Trỏ viết phác thảo giấy khác hoàn toàn sử dụng chuột bàn phím để nhập liệu 10 Tip để có prototype tốt giấy n n n Làm prototype lớn Đơn màu (monochrome - single color) Ghi chú, mô tả cần thiết q n Sắp xếp giấy q q n Diễn tả drag & drop, animation, progress bar Sử dụng túi bì thư Ghi số thứ tự Tạo nhiều thay q 5/24/16 Để nhận phản hồi 17 Prototype giấy giúp ích cho … n Hiểu rõ q Mô hình ý niệm người dùng (conceptual model) n q Tính hệ thống n q Người thiết kế hiểu rõ thuật ngữ cấp độ ko? Nội dung layout hình n 5/24/16 Người dùng có hiểu cách điều hướng UI? Các thuật ngữ n q Chức thiếu giao diện Điều hướng (navigation) luồng nghiệp vụ (task flow) n q Người dùng có hiểu giao diện hay ko Những thứ thể giao diện 18 Prototype giấy ko giúp ích cho… n n Ko giúp ích cho “look”: màu sắc, font chữ, khoảng trống, khoảng cách thành phần Ko giúp ích cho “feel”: tính hiệu q n n Tương tác có độ xác thấp ko thật Ko thể đo thời gian phản hồi (response time) Ko thể minh họa animation tương tác mức cao q 5/24/16 drag & drop, vẽ 19 Prototype máy (computer prototype) n n n n Dùng công cụ máy HTML Editors, Axure, Mockflow, Pencil Project, v.v… Mô phần mềm tương tác Look & feel có độ xác cao Chiều sâu có độ xác thấp q q 5/24/16 Có thể ko có backend, phủ ngang Ko có người mô backend prototype giấy 20 Prototype máy giúp ích cho… n n Mọi thứ prototype giấy, Độ xác look cao q q q n n Screen layout Colors, fonts, icons Lựa chọn control Phản hồi tương tác Các vấn đề tính hiệu q q q 5/24/16 Control đủ to chưa? Khoảng trống? Khoảng cách control? 21 Thuận lợi prototype máy n n n n Nhanh code Ko cần debug (ko code cần debug) Dễ thay đổi vứt Tách biệt ý tưởng thiết kế giao diện mà toolkit UI hỗ trợ (chẳng hạn Visual Studios, C++ Builder) q n Suy nghĩ bạn ko bị giới hạn vào control có sẵn Người ko biết lập trình làm prototype máy 5/24/16 22 Các kĩ thuật tạo prototype máy n Kịch (storyboard) q n Form builder q n Chuỗi hình (screenshot), có đường liên kết với Tạo cửa sổ giao diện thật với control button, window, label Wizard of Oz q 5/24/16 Computer frontend, human backend: hình hiển thị giao diện, người đứng đằng sau xử lý đưa thông tin 23 Các kĩ thuật tạo prototype máy (tt) n Các công cụ storyboard q q q q q q q q 5/24/16 Pencil Project Photoshop Balsamiq Mockup Mockingbird Mockflow Excel Visio 24 Các kĩ thuật tạo prototype máy (tt) n Các công cụ storyboard q Ưu điểm n n q Bạn vẽ thứ bạn muốn Thực nhanh Nhược điểm n Ko có tương tác q q 5/24/16 Ko có text entry Các widget ko active 25 Các kĩ thuật tạo prototype máy (tt) n Form builder q q q q q q 5/24/16 FlexBuilder Silverlight Visual Basic C++ Builder Visual C# Qt Designer 26 Các kĩ thuật tạo prototype máy (tt) n Form builder q Ưu điểm n n q Nhược điểm n n 5/24/16 Sử dụng control thật phần look, cho độ xác cao Có thể tái sử dụng cài đặt đỡ tốn công làm lại Giới hạn suy nghĩ vào widget chuẩn, có sẵn Nội dung widget ko trực quan 27 Các kĩ thuật tạo prototype máy (tt) n Wizard of Oz q “Wizard of Oz” = “man behind the curtain” q q Mô phần mềm với trợ giúp người n Con người giả lập thực thao tác tính toán q q n q Người dùng nhập liệu để giả lập phản hồi hệ thống Điều khiển máy tính để mô output phù hợp Wizard ko phải lúc ẩn Ví dụ n 5/24/16 Có người đứng phía sau Mô nhận diện giọng nói cách có người nghe nhập giá trị vào 28 Các kĩ thuật tạo prototype máy (tt) n Wizard of Oz q Làm giả tương tác q Vấn đề n n 5/24/16 Wizard người, phải giả máy Phải quan tâm đến giao diện cho người dùng cho wizard 29 Tổng kết n Prototype q q n n Protype xác thấp - xác cao Các phương diện tính xác Prototype giấy Prototype máy tính q q q 5/24/16 Storyboard Form builder Wizard of Oz 30 Wireframe vs prototype n http://sixrevisions.com/user-experienceux/wireframes-vs-prototypes-difference/ 5/24/16 31 ... cách thức nhập liệu để tương tác với giao diện Trỏ vi t phác thảo giấy khác hoàn toàn sử dụng chuột bàn phím để nhập liệu 10 Prototypye giấy - Video n “Example Usability Test with a Paper Prototype”... Look-and-feel có độ xác thấp Độ xác cao có người mô thao tác 14 Prototypye giấy (tt) n Thuận lợi q q q q Dễ xây dựng Đổi dễ Chi phí thấp Tập trung vào toàn cảnh n n q q Ko phải lập trình vi n... xác thấp - xác cao Các phương diện tính xác Prototype giấy Prototype máy tính q q q 5/24/16 Storyboard Form builder Wizard of Oz 30 Wireframe vs prototype n http://sixrevisions.com/user-experienceux/wireframes-vs-prototypes-difference/