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

Giảng viên: Trần Thị Kim Chi
Bài 6
1
Kỹ thuật xây dựng prototype bằng giấy
3
Lỗi thiết kế trong hệ thống tương tác
1
Định nghĩa và phân loại prototype
2
Kỹ thuật xây dựng prototype bằng máy tính
4
2
Lỗi thiết kế trong hệ thống tương tác
1
3
Lỗi thiết kế trong hệ thống tương tác
1
4
Lỗi thiết kế trong hệ thống tương tác
1
5
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
2
6
Tại sao phải xây dựng 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á.
Định nghĩa và phân loại prototype
2
7
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.

Không cần debugging

Quan trọng là nếu thiết kế có thiếu sót nghiêm trọng, thì
prototype có thể bỏ đi.

Không nên cam kết chắc chắn vào ý tưởng thiết kế ở giai đoạn
đầu thiết kế. Việc viết và gỡ rối nhiều mã trình sẽ tạo cảm giác

tâm lý về “cam kết” rất khó phá bỏ. Ta sẽ không muốn bỏ đi
những gì mà ta đã cật lực làm việc để có nó, nghĩa là ta sẽ cố
tình giữ lại một số đoạn mã trình ngay cả khi chúng đáng bỏ đi.

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
2
8
Các 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

Video mô phỏng sự sử dụng hệ thống

Maket bằng bìa cứng

Đoạn chương trình với chức năng hạn chế được viết
bằng ngôn ngữ lập trình như C#, Java,…hay ngôn ngữ
mô tả của Director(Flash)…

Mô hình vật lý
Định nghĩa và phân loại prototype
2
9
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
2
10
Các loại Prototype:

Storyboard (phim hoạt hình như dãy các bản phác họa)
Định nghĩa và phân loại prototype
2
11
Độ 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
2
12
Độ trung thực của 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
Định nghĩa và phân loại prototype
2
13
Độ trung thực của prototype

Độ rộng :

Đề cập đến số phần trăm các đặc trưng của UI mà prototype
có.

Prototype với độ trung thực thấp về độ rộng sẽ thiếu nhiều đặc
trưng, nó chỉ có đủ cho một vài nhiệm vụ cụ thể.

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
cậy, quản lý lỗi,…

Định nghĩa và phân loại prototype
2
14
Độ trung thực của prototype
Định nghĩa và phân loại prototype
2
15
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.

Bản mẫu dọc (vertical prototype): một vùng
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
2
16

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.
Định nghĩa và phân loại prototype
2
17
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
2
18
Hai tính chất khác của độ trung thực của 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 và phân loại prototype
2
19
Đị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
3
20
Đị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
Kỹ thuật xây dựng prototype bằng giấy
3
21

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
3
22
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.

Khách hàng đưa ra các gợi ý sáng tạo, không xoi mói
Kỹ thuật xây dựng prototype bằng giấy
3
23
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
tranh luận về nhu cầu mà nó ảnh hưởng đến sự thay
đổi đáng kể trong thiết kế.
Kỹ thuật xây dựng prototype bằng giấy

3
24
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
3
25