“Một bức tranh thường có giá trị hơn cả ngàn từ”. Việc mô tả bằng lời làm thế nào người dùng và hệ thống tương tác với nhau là rất khó để hình dung. Một phương pháp khác của giao tiếp với thiết kế tương tác là phát triển nguyên mẫu của giao diện.
Một nguyên mẫu là một mô hình có ý định chưa hoàn thiện. Nguyên mẫu có thể là các công cụ hữu ích để trợ giúp nhà thiết kế và người dùng giao tiếp và đánh giá các thiết kế có thể. Nguyên mẫu giao diện người dùng có thể được phát triển để biểu thị cho sự kết hợp của nội dung và thiết kế thoại. Chúng có thể biểu thị những cái mà người dùng sẽ nhìn thấy (trong hệ thống thật) nếu có một hoặc nhiều kịch bản được theo sau nó.
Một nguyên mẫu cùa giao diện có thể biểu thị làm thế nào giao điện sẽ được nhìn thấy và diễn ra đối với người dùng mà không yêu cầu các chí phí (về thời gian, tiền bạc,..) để phát triển một hệ thống hoàn chỉnh. Điều này cho phép người dùng xác định bản thiết kế có thích hợp hay không và để đạt được nhu cầu thay đổi trước một khoản đầu tư lớn dùng để phát triển hệ thống hoàn thiện.
Đơn giản nhưng nguyên mẫu hiệu quả có thể được cấu trúc dựa vào tập hợp các trang web được liên kết lẫn nhau theo nhiều cách:
- Mỗi trang đại diện những cái người dùng sẽ nhìn thấy ở một số điểm trong một kịch bản;
- Chỉ dành cho những thao tác có thể trình diễn được ở mọi trang web cho phép liên kết với một trang khác;
- Một liên kết đại diện một hành động mà người dùng có thể thực hiện tại thời điểm đó trong một kịch bản.
Bảng 5.2 chỉ ra các biến thể giữa các trang mà có thể xảy ra trong một nguyên mẫu. Những biến thể này được dựa trên liệu rằng hoạt động của người dùng sẽ được theo sau bởi hoạt động của người dùng khác hay không và đưa ra ví dụ cho từng biến thể.
147 Bảng 5.2. Các biến thể nguyên mẫu dựa vào chuỗi hoạt động
Loại hoạt động Ví dụ các kịch bản
(cái gì)
Ví dụ của biến thể thiết kế tạo ra (như thế nào)
Hoạt động của người dùng sẽ theo sau hoạt động của người dùng khác (mà sẽ tạo ra biến thể cho chính nó)
Một thao tác người dùng sẽ được theo bởi một hoặc nhiều hoạt động hệ thống (mà tạo ra cùng với nhiều biến thể).
Người dùng nhập tên khách hàng (điều này sẽ được theo cả bởi nhiều đầu vào dữ liệu hoặc bởi người dùng kích hoạt một kiểm soát và cả hoạt động riêng).
Người dùng muốn đưa ra để xem xét một đơn đặt hảng.
Người dùng nhấp vào ô tên trống trong trang hồ sơ khách hàng liên kết tới (một biến thể) một trang tương tự với một tên khách hàng mẫu trong ô tên, (sau nhiều chuyển tiếp trước nơi mà các ô trong đơn đặt hàng được điền), người dùng nhấp vào một kiểm soát "place this order" liên kết tói một trang tương tự bao gồm thông tin mà đơn đặt hàng được đặt và bao gồm một số đơn duy nhất cho người dùng để sử đụng cho tham chiếu tương lai.
Bảng 5.3 là ví dụ của một kịch bản liên quan tới một trong số nhiều cách có thể đặt một đơn đặt hàng minh họa cho sự phát triển của tập lệnh hướng dẫn đưa cho người dùng nguyên mẫu và thiết kế của các trang (và liên kết) cho nguyên mẫu.
Bảng 5.3. Thiết kế một nguyên mẫu phù hợp với kịch bản
Hướng dẫn người sử dụng nguyên mẫu Hoạt động được kì vọng của người dùng trong kịch bản
Trang nguyên mẫu và
thiết kế liên kết 1. Sử dụng mẫu đơn đặt hàng, cần nhập thông tin và kích hoạt Người dùng sẽ xem xét trang và sau đó di chuyển tới hướng dẫn tiếp theo
1. Kịch bản bắt đầu với trang mẫu đặt hàng ban đầu mà người dùng sẽ nhìn thấy.
2. Nhập "Trần" là tên
Người dùng nhập "Trần" vào vùng tên
2. Một liên kết tới một trang khác xuất hiện đúng tới trang 1, trừ khi nó đã được điền là "Trần" ở vùng tên.
148 3. Nhập "Minh" là họ Người dùng nhập "Minh" vào ô họ 3. Một liên kết tới một hàng khác xuất hiện đúng tới trang 2 trừ khi nó đã được điền "Minh" vào ô họ 4. Nhập địa chỉ
"T10"
Người dùng nhập "T10" vào vùng địa chi
4. Một liên kết tới một trang mà xuất hiện đúng tới trang 3 trừ khi nó đã có "T10" được điền vào vùng địa chi. 5. Nhập "1234" là số điện thoại Người dùng nhập "1234" vào vùng điện thoại 5. Một liên kết tới một hàng mà xuất hiện đúng tới trang 4 trừ khi nó đã có "1234" được điền vào vùng điện thoại
6. Tìm sản phẩm để đặt hàng từ catalog
Người dùng yêu cầu danh mục sản phẩm nhấp vào kiểm soát "tham khảo danh mục"
6. Một liên kết được theo tới trang chính của catalog (một trang khác hoàn toàn) chứa đựng cả ô nhập một mô tả sản phẩm và một kiểm soát để tìm kiếm sản phẩm. Nó cũng có thể chứa đựng một danh sách các danh mục sản phẩm khác. 7. Tìm kiếm "phần mềm vẽ hình" Người dùng tìm kiếm "phần mềm vẽ hình" nhấp vào ô dấu vào dữ liệu được kết hợp với kiểm soát "tìm kiếm sản phẩm" (nếu người dùng chọn một danh mục sản phẩm hon là sử đụng chức năng tìm kiếm, điều này sẽ dẫn đến một kịch bản khác sẽ đề cập
7. Một liên kết được theo tới một trang xuất hiện đúng đến trang 6 mà có "phần mềm vẽ hình" được điền trong vùng tìm kiếm.
8. Mặc dù đây là quá trình hai bước, người dùng nên xác định làm thế nào để hoàn thành nó với các chỉ dẫn khác
Người dùng sau đó phải nhấp vào kiểm soát "tìm kiếm sản phẩm"
8. Một liên kết được theo tới một trang khác mà được thiết kế để giới thiệu nhiều "phần mềm" đóng gói trong danh mục với giá cả và các thông tin khác
149 9. Lựa chọn "Funny photo maker 2.4.1 " để đặt hàng Người dùng đặt "Funny photo maker 2.4.1" nhấp vào đó
9. Một liên kết được theo tới một trang khác xuất hiện đúng đến trang 8 trừ khi nó đã có "Funny photo maker 2.4.1" được hiển thị ừên đoạn văn bản kiểu chữ đậm (để chi ra nó đã được chọn) và có một câu hỏi mới "có bao nhiêu cái bạn muốn đặt?" thêm vào ô nhập số lượng (mà có thể được mặc định là số 1 ở đó) 10. Đặt một bản sao chép Người dùng đặt một bản nhấp vào vùng điền số lượng
10. Một liên kết được theo tới một trang mà xuất hiện đúng đến hàng 5 trừ khi nó đã có "Funny photo maker 2.4.1" số lượng 1 bản và giá được điền vào vùng thích hợp. 11. Đó là tất cả bạn
muốn đặt
Người dùng nhấp vào kiểm soát "xử lý đơn đặt hàng "
11. Một liên kết được theo tới một trang mà xuất hiện đúng đến trang 10 trừ khi nó đã có "đơn đặt hàng đã được xử lý" và một con số xác định trên nó. Trang này giống như mọi trang khác của loại mẫu đặt hàng nên cũng có một kiểm soát "bắt đầu một mẫu đơn đặt hàng mới" để đưa người dùng về trang nhất.
CÂU HỎI ÔN TẬP CHƯƠNG 5
1. Giới thiệu khái quát về thiết kế chi tiết hệ thống TMĐT và các hướng dẫn thiết kế chi tiết?
2. Các nguyên tắc chung cần áp dụng khi thiết kế phân đoạn trình diễn của hệ thống TMĐT?
3. Hãy giới thiệu quy trình thiết kế phân đoạn trình diễn của hệ thống TMĐT. 4. Các nguyên tắc chung của thiết kế tương tác người – máy?
150 6. Giới thiệu ví dụ cụ thể các kịch bản và thiết kế hộp thoại của một hệ thống TMĐT.
7. Trình bày về phương pháp sử dụng nguyên mẫu giao diện trong thiết kế hệ thống TMĐT.
TÀI LIỆU THAM KHẢO CHƯƠNG 5
1. Thạc Bình Cường, Phân tích và thiết kế hệ thống thông tin, NXB Khoa học và kỹ thuật, 2002.
2. Nguyễn Văn Hồng và Nguyễn Văn Thoan (chủ biên) – Trường ĐH Ngoại thương, Giáo trình Thương mại điện tử căn bản, NXB Bách khoa, Hà Nội, 2013.
3. Nguyễn Văn Minh (chủ biên), Giáo trình phát triển hệ thống thương mại điện tử, NXB Thống kê, 2014.
4. Trần Đình Quế, Giáo trình phân tích thiết kế Hệ thống thông tin, Học viện Công nghệ BCVT.
5. Jim Carter, Developing e-commerce systems, Prentice Hall, 2002.
6. Wasim Rajput, E-commerce Systems Archetecture and Applications, Artech House Boston, London, 2000.