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. . 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. 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