THIẾT KẾ CHI TIẾT HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ
5.4. SỬ DỤNG NGUYÊN MẪU GIAO DIỆN TRONG THIẾT KẾ
"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 ngun mẫu là một mơ hình có ý định chưa hồn thiện. Ngun 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ạị 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 diệ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 chi 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ẫụ 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ể.
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 bướ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 biến thể mà) 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ử dụng cho tham chiếu tương laị
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ẫụ
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ấỵ 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. 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 trang 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 chỉ
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 chỉ. 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 trang 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 hồn tồn) chứa đựng cả ơ nhập một mô tả sản phẩm và một kiểm số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.
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
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 số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 hơn là sử dụ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 riêng)
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 để hồ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 số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 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ị trên đoạn văn bản kiểu chữ đậm (để chỉ 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 ở đó)
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 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 trang 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 số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
1. Trình bày các nguyên tắc thiết kế cho các giao diện người dùng đa phương tiện của ISO 14915-1?
2. Trình bày một số nguyên tắc cho thiết kế của phân đoạn trình diễn? 3. Trình bày các loại thiết kế hộp thoại và cho ví dụ minh họả
CHƯƠNG 6