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

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 [...]... ứ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 17 2 Định nghĩa và phân loại prototype 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... 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 25 3 Kỹ thuật xây dựng prototype bằng giấy 26 3 Kỹ thuật xây dựng prototype bằng giấy 27 3 Kỹ thuật xây dựng prototype bằng giấy 28 3 Kỹ thuật xây dựng prototype bằng giấy Các công cụ xây dựng market giao diện  Bảng áp phích trắng (11” x 14”) : làm nền, khung cửa sổ  Số lượng lớn các thẻ... prototype 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. .. 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ả 31 3 Kỹ thuật xây dựng prototype bằng giấy 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... lên mỗi trường nhập liệu  Máy sao chụp : để tạo ra nhiều phần tử trong bản mẫu  Bút, kéo, băng giấy,… 29 3 Kỹ thuật xây dựng prototype bằng giấy 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... 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,… 14 2 Định nghĩa và phân loại prototype Độ trung thực của prototype 15 2 Đị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... 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. .. rẻ 22 3 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... 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 23 3 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 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ư...2 Định nghĩa và phân loại prototype Các loại Prototype:  Storyboard (phim hoạt hình như dãy các bản phác họa) 11 2 Định nghĩa và phân loại prototype Độ 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 . 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. 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