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

n Prototype, bản mẫu là loại, dạng, ví dụ đầu tiên, của sự vật, có vai trò như là một ví dụ điển hình, là nền tảng, là chuẩn cho các sự vật khác cùng loại n Ví dụ q Screen shots q Bản v

CTT534 – Thiết Kế Giao Diện

HK II 2015 – 2016

Prototyping

Bài giảng có tham khảo các nguồn tài liệu sau

- MIT CS Course 6.813/6.831

Nội dung

n Prototype

q Protype chính xác thấp - chính xác cao

q Các phương diện của tính chính xác

n Prototype trên giấy

n Prototype trên máy tính

q Storyboard

q Form builder

q Wizard of Oz

3 5/24/16

Qui trình cho đồ án môn học

1 Phân tích người dùng và nghiệp vụ

2 Phác thảo ban đầu

3 Prototype ban đầu

Các lựa chọn thiết kế

n Tại sao cần thể hiện các ý tưởng thiết kế càng sớm càng tốt?

q Ko thể đánh giá cái chưa được tạo ra

q Sau khi có phần mềm (thành phẩm), việc thay đổi thiết kế rất khó khăn

5 5/24/16

Prototype là gì?

n Prototype, bản mẫu là loại, dạng, ví dụ đầu tiên, của

sự vật, có vai trò như là một ví dụ điển hình, là nền tảng, là chuẩn cho các sự vật khác cùng loại

n Ví dụ

q Screen shots

q Bản vẽ giấy, bản vẽ trên máy tính

q Phần mềm có thể chạy được, có thể chưa hoàn chỉnh Các bản demo một số chức năng

Tại sao cần có prototype?

n Thử nghiệm các giải pháp thiết kế khác nhau

n Cung cấp thể hiện ban đầu, cụ thể của ý tưởng thiết kế

n Cung cấp trải nghiệm thực tế (hands-on experience) cho tất cả các bên liên quan (đội ngũ thiết kế, người dùng…)

n Dễ dàng thay đổi hoặc vứt đi

n Giúp cho việc thiết kế hướng đến người dùng

q Phải quan sát và kiểm tra các ý tưởng cùng với người dùng

n Tạo điều kiện cho quá trình thiết kế và đánh giá lặp

n Giảm rủi ro làm khách hàng bất ngờ

q Khách hàng: “Ko thấy, ko tin”

7 5/24/16

Tính chính xác của prototype

n Prototype có độ chính xác thấp (low-fidelity)

q Tập các bản phác thảo (sketch), kịch bản (storyboard)

cung cấp bản giả lập, tĩnh, ko phải trên máy tính, ko chạy được của sản phẩm dự định phát triển

q Bỏ qua các chi tiết

n Prototype có độ chính xác cao (high-fidelity)

q Tập các màn hình, cung cấp mô hình động, chạy được trên máy tính về sản phẩm dự định phát triển

q Là phần mềm chạy được

Tính chính xác của prototype (tt)

9 5/24/16

Các mặt/chiều của tính chính xác (tt)

n Quan sát (look)

q Là thể hiện bên ngoài và thiết kế đồ họa của giao diện

q Có thể là bản phác thảo hoặc bản vẽ tay

11 5/24/16

Prototypye giấy - Video

n “Example Usability Test with a Paper Prototype”

n “Hanmail Paper Prototype”

n “Paper prototype usability test”

n Tìm kiếm trên Youtube à có rất nhiều

Prototypye giấy

n Sử dụng bản giả lập trên giấy để thể hiện giao diện

q Bản phác thảo các thể hiện màn hình

q Thể hiện các window, menu,

dialog box, toolbar

q Nhặt cái mẫu giấy lên, để các mẫu giấy xuống

q Viết phản hồi trên hình mockup

q Mô tả/giải thích các hiệu ứng khó thể hiện trên giấy

13 5/24/16

Prototypye giấy (tt)

15 5/24/16

q Tập trung vào toàn cảnh

n Người thiết kế ko phí thời gian vào chi tiết

n Thu hút ý tưởng từ khách hàng

q Ko phải lập trình viên cũng có thể tham gia

q Tiện lợi

n Vẽ ở đâu, khi nào cũng được, chỉ cần bút và giấy

n Tận dụng thời gian hiệu quả

Công cụ vẽ prototype giấy

17 5/24/16

Tip để có prototype tốt trên giấy

n Làm prototype lớn

n Đơn màu (monochrome - single color)

n Ghi chú, mô tả khi cần thiết

q Diễn tả drag & drop, animation, progress bar

Prototype giấy giúp ích cho …

n Hiểu rõ về

q Mô hình ý niệm của người dùng (conceptual model)

n Người dùng có hiểu giao diện hay ko

q Tính năng hệ thống

n Chức năng nào còn thiếu trên giao diện

q Điều hướng (navigation) và luồng nghiệp vụ (task flow)

n Người dùng có hiểu cách điều hướng trên UI?

q Các thuật ngữ

n Người thiết kế hiểu rõ các thuật ngữ và các cấp độ của nó ko?

q Nội dung và layout trên màn hình

n Những gì thứ thể hiện trên giao diện

19 5/24/16

Prototype giấy ko giúp ích cho…

n Ko giúp ích cho “look”: màu sắc, font chữ, khoảng

trống, khoảng cách giữa các thành phần

n Ko giúp ích cho “feel”: tính hiệu quả

q Tương tác có độ chính xác thấp à ko thật

n Ko thể đo thời gian phản hồi (response time)

n Ko thể minh họa các animation và các tương tác

mức cao

q drag & drop, vẽ

Prototype trên máy (computer prototype)

n Dùng các công cụ trên máy như HTML Editors,

Axure, Mockflow, Pencil Project, v.v…

21 5/24/16

Prototype trên máy giúp ích cho…

n Mọi thứ của prototype giấy, và

n Độ chính xác của look cũng cao hơn

Thuận lợi của prototype trên máy

n Nhanh hơn là code

n Ko cần debug (ko code thì cần gì debug)

n Dễ thay đổi hoặc vứt đi

n Tách biệt giữa ý tưởng thiết kế giao diện và những

gì mà các toolkit UI hỗ trợ (chẳng hạn Visual

Studios, C++ Builder)

q Suy nghĩ của bạn ko bị giới hạn vào các control có sẵn

n Người ko biết lập trình vẫn có thể làm prototype trên máy được

23 5/24/16

Các kĩ thuật tạo prototype trên máy

n Kịch bản (storyboard)

q Chuỗi các màn hình (screenshot), có đường liên kết với

nhau

n Form builder

q Tạo ra các cửa sổ giao diện thật sự với các control như

button, window, label

n Wizard of Oz

q Computer frontend, human backend: màn hình hiển thị

giao diện, nhưng con người đứng đằng sau xử lý và đưa ra thông tin

Các kĩ thuật tạo prototype trên máy (tt)

25 5/24/16

Các kĩ thuật tạo prototype trên máy (tt)

Các kĩ thuật tạo prototype trên máy (tt)

27 5/24/16

Các kĩ thuật tạo prototype trên máy (tt)

n Giới hạn suy nghĩ vào các widget chuẩn, có sẵn

n Nội dung trong các widget ko trực quan

Các kĩ thuật tạo prototype trên máy (tt)

n Wizard of Oz

q “Wizard of Oz” = “man behind the curtain”

q Có người đứng phía sau màn

q Mô phỏng phần mềm với sự trợ giúp của con người

n Con người giả lập thực hiện các thao tác tính toán

q Người dùng nhập dữ liệu để giả lập phản hồi của hệ thống

q Điều khiển máy tính để mô phỏng các output phù hợp

n Wizard ko phải lúc nào cũng ẩn

q Ví dụ

n Mô phỏng nhận diện giọng nói bằng cách có người nghe và nhập giá trị vào

29 5/24/16

Các kĩ thuật tạo prototype trên máy (tt)

n Wizard of Oz

q Làm giả tương tác

q Vấn đề

n Wizard là người, như phải giả là máy

n Phải quan tâm đến giao diện cho người dùng và cho wizard

Tổng kết

n Prototype

q Protype chính xác thấp - chính xác cao

q Các phương diện của tính chính xác

n Prototype trên giấy

n Prototype trên máy tính

q Storyboard

q Form builder

q Wizard of Oz

31 5/24/16

Wireframe vs prototype

n

http://sixrevisions.com/user-experience-ux/wireframes-vs-prototypes-difference/