Nguyên tắc trưng bày nội dung trong Web Thương mại điện tử (part 3)

Nguyên tắc trưng bày nội dung trong Web TMĐT
(part 3)


Cấu trúc cửa hàng ảo.
Cửa hàng/ siêu thị ảo được tạo nên bởi Đơn vị (Unit)
và lề (Gutter). Các Đơn vị và lề được kết hợp với nhau thành một khung và được thể
hiện bằng đường Grid. Khi sắp xếp các hạng mục và hàng hoá theo Grid, trang Web sẽ
gọn gàng, dễ nhìn, dễ đọc và dễ dùng hơn. Đơn vị và Lề phụ thuộc vào vùng có thể
nhìn được và banner quảng cáo. Vùng có thể nhìn được xác định khá phức tạp và tuỳ
thuộc vào màn hình & trình duyệt của người tiêu dùng còn kích cỡ banner quảng cáo
cần căn theo kích cỡ chuẩn của IAB. Hầu hết các Website Việt Nam đều tự định nghĩa
kích cỡ banner quảng cáo cho riêng mình, điều này khiến họ khi muốn trở thành đại lý
hay bán quảng cáo cho các Website lớn trên thế giới sẽ gặp rào cản về chuẩn banner,
trong trường hợp xấu nhất có thể phải thay đổi bố cục trang Web để phù hợp. Dưới
đây là một số kích cỡ tiêu chuẩn của Banner do IAB đưa ra:
• 300 x 250 IMU - (Hình chữ nhật kích cỡ trung bình)
• 250 x 250 IMU - (Pop-Up vuông)
• 240 x 400 IMU - (Hình chữ nhật thẳng đứng)
• 336 x 280 IMU - (Hình chữ nhật lớn)
• 180 x 150 IMU - (Hình chữ nhật)
• *Chuẩn mới* 300x100 IMU - (3:1 hình chữ nhật)

Đường Grid rất quan trọng trong thiết kế giao diện Web, chúng giúp bạn tạo
một trang Web dễ sử dụng đối với người dùng, đồng thời cũng cho phép bạn quản lý
nội dung tốt hơn. Tuy nhiên do yếu tố lịch sử, rất nhiều Website vào thời kỳ đồ đá –
số, thời kỳ chưa có phát minh Grid, chúng chưa được sử dụng để sắp xếp các thành tố
của trang Web. Amazon cũng là một đại diện. Mặc dầu tôi đã cố gắng tính toán để đưa
ra một hệ thống Grid cho Amazon nhưng tất cả nỗ lực đều không đạt kết quả như
mong muốn. Trong minh hoạ tiếp theo tôi đặt một lớp Grid với 3 tổ hợp Grid dành cho
3 cột nội dung nằm trên giao diện của Amazon.

Phương trình tính Grid như sau:
Vùng có thể thấy được = (X-1)*Y + Z*Y
X: Số lượng các đơn vị
Y: Kích cỡ lề
Z: Kích cỡ đơn vị
Đường Grid đề xuất trong Amazon như sau:
Hình minh hoạ 6
Dựa trên hệ thống Grid này, trong các bài tiếp theo, tôi sẽ hướng dẫn các bạn
cách thiết kế lại Amazon, Yahoo Việt Nam để tăng tính tiện dụng (Usability) của
Website. Về hệ thống Grid, bạn có thể tham khảo thêm các nghiên cứu của anh Mark
Boulton và Khôi Vinh để hiểu hơn.
Kết thúc phần này chắc hẳn sẽ có nhiều bạn chán nản khi thấy thiết kế Web sao
mà phức tạp vậy khác nhiều với những gì các trường đào tạo Việt Nam đào tạo các
bạn, trong khi đó cũng có nhiều bạn thấy thích thú và tìm kiếm các phương pháp luận.
Tuy nhiên đây chỉ là một số nguyên tắc dễ hiểu trong khoa học thiết kế Web, trong
những bài tiếp theo tôi sẽ đưa ra những nghiên cứu mới của tôi cũng như các ví dụ về
cải tạo thế giới Web tại Việt Nam.
Những phần tiếp theo sẽ hướng dẫn các bạn cách trưng bày nội dung trong cửa
hàng ảo. Các bạn nên cài trước vào máy tính phần mềm Adobe Photoshop CS2 và
Microsoft Excel 2000+ và đặt trước mặt máy tính tay để ứng dụng các phương pháp
luận trong các phần sau.