Xây dựng bản mẫu Prototype

Xây dựng bản mẫu Prototype

Kỹ thuật xây dựng prototype bằng giấy

Lỗi thiết kế trong hệ thống tương tác

Prototype là gì?

 Prototype (bản mẫu) được sử dụng trong nhiều lĩnh vực

thiết kế khác nhau, và có độ trung thực khác nhau

 Prototype là mô hình thu nhỏ, là bản thảo hay mô phỏng

với khả năng dễ thay đổi của một phần UI

 Tạo ra prototype là làm ra một phiên bản hệ thống kích

thước nhỏ, không đầy đủ để trình diễn và kiểm thử

Định nghĩa và phân loại prototype

 Prototype được xây dựng nhanh hơn nhiều so với cài

đặt cuối cùng, vì vậy có thể đánh giá sớm và nhận được những phản hồi tích cực về những điểm tốt và xấu trong thiết kế

 Nếu có vấn đề thiết kế nào mà khó quyết định, thì có thể

xây dựng nhiều prototype chứa các giải pháp khác nhau

để xem xét, so sánh và đánh giá

Tại sao phải xây dựng Prototype ?

 Nếu phát hiện ra các vấn đề trong khi thiết kế thì có thể:

 Dễ dàng thay đổi prototype thiết kế nếu cần vì nó được xây dựng nhanh

 Prototype hỗ trợ việc giao tiếp giữa đội ngũ phát triển và người sử dụng giao diện phần mềm

Định nghĩa và phân loại prototype

 Dãy các phác họa màn hình

 Storyboard (phim hoạt hình như dãy các bản phác họa)

 Power Point slideshow

Các loại Prototype:

 Dãy các phác họa màn hình

Định nghĩa và phân loại prototype

 Storyboard (phim hoạt hình như dãy các bản phác họa)

Độ trung thực của prototype

 Tính chất cơ bản của prototype là độ trung thực (fidelity) : độ trung thực được xem như mức độ tương tự của prototype so với giao diện người sử dụng cuối cùng

 Prototype với độ trung thực thấp sẽ thiếu nhiều chi tiết, nó sử dụng vật liệu rẻ tiền hơn

 Prototype với độ trung thực cao có mức độ tương tự cao so với sản phẩm cuối cùng

Định nghĩa và phân loại prototype

 Độ trung thực không phải là một chiều mà là đa chiều

Độ trung thực có thể cao hay thấp theo nhiều cách khác nhau Hai tính chất quan trọng của prototype là :

 Độ rộng

 Độ sâu

Độ trung thực của prototype

 Ví dụ: bản mẫu bộ xử lý văn bản có thể thiếu chức năng in

hay kiểm tra lỗi chính tả

 Độ sâu :

 Đề cập đến việc cài đặt các đặc trưng chi tiết đến mức nào

 Bản mẫu với độ trung thực thấp về độ sâu có giới hạn các lựa chọn

 Ví dụ : không thể in 2 mặt Đáp ứng bị hạn chế

Chỉ in văn bản, không thể in những gì ta nhập, hoặc thiếu tin

Định nghĩa và phân loại prototype

Trên cơ sở độ trung thực có thể chia prototype thành:

 Bản mẫu ngang (horizontal prototype): có đầy

đủ tính chất rộng, nhưng ít tính chất sâu Xây dựng prototype hướng chiều ngang để cung cấp nhiều chức năng nhưng ít chi tiết

giao diện sẽ được cài đặt chi tiết sâu Nói cách khác, cần xây dựng prototype hướng chiều dọc

để cung cấp nhiều chi tiết cho một vài chức năng

Định nghĩa và phân loại prototype

 Trong thiết kế giao diện người sử dụng, bản mẫu ngang hay được sử dụng hơn cả, vì nó hướng tới

sự rủi ro của tính sử dụng được của cả hệ thống

 Nếu nhận thấy một vài khía của giao diện có rủi ro cao trong cài đặt (ví dụ : không chắc chắn việc cài đặt có đáp ứng yêu cầu của hệ thống hay không) thì hãy xây dựng bản mẫu dọc để thử nghiệm chúng.

Trên cơ sở độ trung thực có thể chia prototype thành:

 Prototype hướng kịch bản (Scenario): Là phần giao giữa bản mẫu dọc và bản mẫu ngang Với prototype hướng kịch bản, chỉ có các đặc trưng chức năng thuộc kịch bản mới được xây dựng Kịch bản là rất tốt cho việc trình diễn thiết kế, nhưng nó rất khó đánh giá đối với người

sử dụng

Định nghĩa và phân loại prototype

 Hình dáng (look):

 Look là diện mạo của bản mẫu

 Ví dụ: Bản mẫu bằng tay có độ trung thực thấp về hình dáng so với bản mẫu xây dựng bằng công cụ phần mềm

 Cảm giác:

 Feel đề cập đến phương pháp vật lý mà nó được sử dụng để tương tác với bản mẫu

 Ví dụ: bản mẫu với độ trung thực thấp về cảm giác

hỗ trợ người sử dụng tương tác với bản mẫu giấy bằng cách trỏ ngón tay thay cho chuột, viết trên giấy thay cho việc nhập của bàn phím

Định nghĩa Prototype giấy

 Là lựa chọn tuyệt vời cho các vòng lặp đầu tiên của quá trình thiết kế

 Nó là mô hình vật lý của giao diện, chủ yếu được làm từ giấy

 Thường được phác họa bằng tay trên các mẫu giấy.

 Mỗi mẫu giấy khác nhau sẽ biểu diễn các phần tử khác nhau như menu, hộp thoại hay cửa sổ

Kỹ thuật xây dựng prototype bằng giấy

Định nghĩa Prototype giấy

 Sự khác biệt cơ bản giữa phác họa và prototype giấy là

sự tương tác

 Prototype giấy mô phỏng cái mà máy tính cần làm để đáp ứng nhấn chuột, gõ phím của người sử dụng, bằng cách xếp đặt các mẩu giấy, viết các đáp ứng trên mẫu giấy…

 Tương tác của loại prototype này là tự nhiên: trỏ bằng

ngón tay tương ứng với trỏ bằng chuột, viết các mẫu giấy tương ứng với gõ bàn phím

 Vì prototype giấy có khả năng tương tác, cho nên ta có

thể yêu cầu người sử dụng kiểm thử : giao nhiệm vụ cho người sử dụng và quan sát xem họ làm như thế nào

 Prototype giấy rõ ràng có độ trung thực thấp ở

cả 2 khía cạnh là hình dáng(look) và cảm giác(feel), nhưng có độ trung thực cao tùy theo chiều sâu với giá trị rất thấp.

 Prototype giấy có giá rẻ

Kỹ thuật xây dựng prototype bằng giấy

Tại sao phải xây dựng prototype giấy?

 Phác họa bằng tay trên giấy nhanh hơn việc viết mã lệnh hay phác họa bằng máy tính.

 Giấy thì dễ thay đổi:

 Có thể thay đổi khi người sử dụng đang kiểm thử Nếu một phần prototype có vấn đề với người sử dụng thì ta có thể loại bỏ hay thay thế nó trước khi người sử dụng khác đến.

 Xây dựng nhanh:

 Prototype phác họa bằng tay tập trung trí tuệ vào bức tranh tổng thể Người thiết kế không mất thời gian để tập trung vào các chi tiết như font, màu, căn chỉnh, khoảng cách,… Khi thực hiện trên máy tính thì phải quan tâm nhiều đến các chi tiết này, do vậy sẽ thật lãng phí nếu bỏ đi bản mẫu

Tại sao phải xây dựng prototype giấy?

 Phác họa bằng tay làm tăng phản hồi nhận được từ người sử dụng

 Họ đề xuất các ý tưởng sáng tạo và ít quan tâm đến chi tiết liên quan

 Không phàn nàn về lược đồ màu nếu thiếu nó

 Bản mẫu phác họa bằng tay được xem như ít hoàn thiện, do đó có tính mở cao hơn để có thể gợi ý và làm tốt hơn Vd: khi các kiến trúc sư đưa ra bản vẽ CAD hoàn thiện cho khách hàng để trao đổi ở giai đoạn thiết kế ban đầu thì khách của họ ít có khả năng

Kỹ thuật xây dựng prototype bằng giấy

Tại sao phải xây dựng prototype giấy?

 Không đòi hỏi kỹ năng đặc biệt nào:

 Các nhà thiết kế đồ họa, các chuyên gia về tính

sử dụng được thậm chí cả người sử dụng cũng có thể giúp đỡ để tạo ra prototype và thao tác trên chúng.

Kỹ thuật xây dựng prototype bằng giấy

Kỹ thuật xây dựng prototype bằng giấy

 Máy sao chụp : để tạo ra nhiều phần tử trong bản mẫu

Kinh nghiệm xây dựng prototype giấy

 Prototype giấy nên lớn hơn kích thước trong thực tế Do ngón tay lớn hơn con trỏ chuột và chữ viết thường lớn hơn 12 points Do vậy, để dễ dử dụng bản mẫu giấy thì

nó phải có kích thước lớn hơn thực tế một ít

 Đối với prortotype giấy lớn hơn thực tế, ta có thể dễ dàng quan sát từ xa Việc này là quan trọng vì prototype nằm trên bàn Hơn nữa khi người sử dụng thử nghiệm thì nhiều người sẽ quan sát xem họ thực hiện như thế nào

 Không quá bận tâm về màu trong prototype : hãy sử dụng màu đơn giản, nhưng không làm giảm sự chú ý đến các nhiệm vụ quan trọng

Kỹ thuật xây dựng prototype bằng giấy

 Không cần trình diễn mọi hiệu ứng quan sát trên giấy (ví

dụ tooltip, drag&drop, animation, progress bar) Một số thành phần thay vì trình diễn ta chỉ cần nói to lên

 Vd: Thanh progress trỏ : 20%,50%,70%,…Nếu thiết kế có hỗ trợ tooltip thì ta chỉ cần trỏ vào đối tượng và nói lớn thông điệp của tooltip,…

 Tổ chức tốt các mẫu giấy nhỏ trong prototype Sử dụng kẹp giấy cho những mẫu giấy lớn và phong bì cho menu

 Khi xây dựng bản mẫu giấy, có thể phác họa giao diện bằng tay kết hợp với các ảnh màn hình để làm tăng hiệu quả

Có thể biết gì và không biết gì từ prototype giấy

 Các prototype giấy có thể biểu lộ rất nhiều vấn đề tính sử dụng được

 Vấn đề quan trọng cần phải tìm ra trong giai đoạn đầu của thiết kế

 Nếu người sử dụng không hiểu ẩn dụ hay mô hình khái niệm của giao diện thì toàn bộ giao diện cần phải bị loại bỏ

Kỹ thuật xây dựng prototype bằng giấy

 Mô hình khái niệm:

• Người sử dụng có hiểu UI không?

 Chức năng:

• Có làm cái cần phải làm không? Có thiếu đặc trưng gì không?

 Dẫn đường và luồng nhiệm vụ:

Hạn chế của prototype giấy

 Prototype giấy không biểu lộ mọi vấn đề về tính sử dụng được vì nó có mức độ trung thực thấp về trực giác (look).

 Đôi khi người sử dụng rất khó nhận ra các widgets mà họ

vẽ bằng tay hay các nhãn mà họ vừa mô tả một cách vội vàng

 Prototype giấy không cho biết việc bố trí các đối tượng đồ họa có phù hợp không vì font chữ viết tay và các bảng không phải là sự mô phỏng thực Không thể dễ dàng mô phỏng các tính chất về trực giác của giao diện

 Vd: việc chọn thanh highlight không đủ tương phản Ta phải quyết định thiết kế đồ họa vào một thời điểm nào đó

Kỹ thuật xây dựng prototype bằng giấy

 Prototype giấy có độ trung thực thấp về cảm giác(feel)

 Ngón tay và bút không ứng xử như chuột và bàn phím Vd: hành động di và nhả chuột (drag-and-drop)

 Các vấn đề liên quan đến luật Fitts như phím quá nhỏ, controls quá gần hay quá xa nhau đều không thể nhận biết được trên prototype giấy.

 Prototype giấy có độ trung thực thấp về phản hồi động (dynamic feedback)

 Không thể có hình ảnh động (annimation)

 Vd: không thấy được các chuyển động như quả địa cầu xoay, thanh progress chuyển động, các nút, icon chuyển trạng thái từ nổi sang chìm, hoặc đổi màu,khi di chuyển chuột,…

Hạn chế của prototype giấy

 Prototype có độ trung thực thấp về thời gian đáp ứng

 Lý do là máy tính con người chậm hơn nhiều so mới máy tính điện tử Do vậy không thể đo được thời gian mà người sử dụng thực hiện nhiệm vụ với prototype.

 Prototype giấy có độ trung thực thấp về ngữ cảnh sử dụng

 Prototype giấy chỉ được sử dụng trong văn phòng, trên bàn

 Người sử dụng không thể đem nó ra cửa hàng tạp hóa, tàu điện ngầm, trên máy bay hay bất kỳ nơi nào mà giao diện người sử dụng cuối cùng sẽ được ứng dụng trên thực tế.

Kỹ thuật xây dựng prototype bằng giấy

• Thiết kế prototype bằng giấy màn hình thống kê cho thư viện

• Thiết kế prototype bằng giấy giao diện chính cho quản lý thư viện

• Thiết kế prototype bằng giấy màn hình cho trang chủ và phiếu đặt hàng mua sách trực tuyến của Website Sach

• Thiết kế prototype bằng giấy màn hình thống kê cho quản lý bệnh viện

• Thiết kế prototype bằng giấy giao diện chính cho quản lý bệnh viện

• Thiết kế protype bằng giấy giao diện trang chủ và form đăng ký khám bệnh trực tuyến cho Website của một bệnh viện

Kỹ thuật xây dựng prototype bằng máy tính

 Prototype máy tính là mô phỏng phần mềm tương tác

 Prototype máy tính điển hình là loại prototype theo chiều

ngang

Nó có độ trung thực cao về hình dáng và cảm giác,

Nhưng có độ trung thực thấp theo chiều sâu

Có thể biết được gì từ Prototype máy tính?

 Prototype máy tính giúp ta quản lý được thiết kế đồ họa

và phản hồi động của giao diện

 Prototype máy tính có khả năng biết những thứ như đã

có trong prototype giấy và hơn nữa, bao gồm các tính chất sau:

 Bố trí màn hình:

 Rõ ràng hay phức tạp? Cách sắp xếp các icon,…

 Người sử dụng có thể tìm thấy các phần tử quan trọng không?

Kỹ thuật xây dựng prototype bằng máy tính

Có thể biết được gì từ Prototype máy tính?

Tại sao phải sử dụng công cụ phần mềm làm

prototype?

 Xây dựng prototype máy tính là lập trình trực tiếp giao diện bằng ngôn ngữ cài đặt như Java, C++, hay sử dụng toolkit giao diện như Swing, MFC,…

 Dễ dàng xây dựng giao diện bằng công cụ GUI Design Studio : nhanh, không phải gỡ rối, dễ

thay đổi,…

Kỹ thuật xây dựng prototype bằng máy tính

Hai kỹ thuật xây dựng Prototype bằng máy tính

Các kỹ thuật xây dựng prototype máy tính

 Storyboard: là trình tự của các màn hình cố định Mỗi màn hình có một hoặc nhiều điểm nóng (hotspots) hoặc hyperlink để ta có thể nhấn chuột để nhảy đến màn hình khác

 Storyboard được sử dụng cho các kịch bản, chuyển dần đến chi tiết hơn Nó là dãy các phác thảo/khung hình cơ bản.

Kỹ thuật xây dựng prototype bằng máy tính

Các kỹ thuật xây dựng prototype máy tính

 Form builder: là công cụ để vẽ các giao diện thực,

sử dụng bằng cách di chuyển các widgets từ thanh công cụ(pallete) và đặt lên các cửa sổ.

 Widget là thành phần giao diện người sử dụng với tính chất sử dụng lại được Nó thuộc toolkit(hộp công cụ) và được rất nhiều ứng dụng GUI sử dụng lại Ưu điểm của widget là giảm yếu tố lập trình, tăng tính nhất quán ngoài Nhược điểm là mang theo suy nghĩ của người thiết kế

Kỹ thuật xây dựng prototype bằng máy tính

Công cụ xây dựng storyboard

 Trình diễn PowerPoint:

 Mỗi Slide show là một màn hình cố định mà nó được

vẽ bởi trình vẽ hay vẽ trực tiếp bằng PowerPoint

 PowerPoint storyboard không phải là slideshow tuyến tính Có thể tạo ra các hyperlink để nhảy đến các slide bất kỳ

 Macromedia Flash:

 Là công cụ giúp xây dựng giao diện đa phương tiện

 Nó đặc biệt hữu hiệu cho các giao diện prototype với

Công cụ xây dựng storyboard

 HTML:

 Hữu ích cho việc xây dựng prototype

 Mỗi màn hình là một bản đồ ảnh của HTML (image map).

 Macromedia Dreamweaver hỗ trợ tốt cho việc xây dựng bản đồ ảnh của HTML

 Tất cả các công cụ đều có ngôn ngữ mô tả Vd: PowerPoint có Basic, Flash/Director có Ligo, HTML

có Javascript,… để có thể viết mã trình khi cần thiết.

Kỹ thuật xây dựng prototype bằng máy tính

Kỹ thuật xây dựng prototype bằng máy tính

Ưu điểm và nhược điểm của storyboard

 Lợi thế lớn nhất của storyboard là tương tự prototype giấy: có thể vẽ bất kỳ cái gì trên storyboard, cho phép tự do sáng tạo mà form builder không thể có (với widgets cố định)

 Bất lợi :do bản chất tĩnh của storyboard Chỉ có thể nhấn phím chuột, không nhập text Textbox, scrollbar, listbox và button là những công cụ thụ động,…

Kỹ thuật xây dựng Form Builder

 Form Builder là công cụ để vẽ các giao diện thực Thực hiện bằng di các widgets (buttons, text fields, tables, ) từ palette và đặt nó trên cửa sổ

 Công cụ xây dựng Form:

 HTML là công cụ xây dựng ứng dụng Web

Có thể tổ hợp các trang HTML tĩnh để mô phỏng các đáp ứng động của giao diện Web

Prototype loại này tốt hơn storyboard bởi vì các màn hình ở đây tích cực hơn nhiều so với screenshots: có thể gõ phím vào form, sử dụng thanh trượt,…

 GUI Builder:

Kỹ thuật xây dựng prototype bằng máy tính

Bài tập

• Thiết kế prototype bằng máy màn hình thống kê cho thư viện

• Thiết kế prototype bằng máy giao diện chính cho quản lý thư viện

• Thiết kế prototype bằng máy màn hình cho trang chủ và phiếu đặt hàng mua sách trực tuyến của Website Sach

• Thiết kế prototype bằng máy màn hình thống kê cho quản lý bệnh viện

• Thiết kế prototype bằng máy giao diện chính cho quản lý bệnh viện

• Thiết kế protype bằng máy giao diện trang chủ và form đăng ký khám bệnh trực tuyến cho Website của một bệnh viện

• Thiết kế các prototype bằng máy cho các giao diện của đề tài mỗi nhóm