Trang chủ News Thương mại Điện tử Xây dựng Website thương mại điện tử - Phần 4

Xây dựng Website thương mại điện tử - Phần 4

Xây dựng Website thương mại điện tử - Phần 1

Màu nền của trang Web phải hỗ trợ khả năng nhìn, đọc cũng như phối màu của nội dung. Theo nguyên lý phối màu tương phản, chúng ta có thứ tự sau

Xây dựng Website thương mại điện tử - Phần 4

Màu sơn nền của cửa hàng ảo

Màu nền của trang Web phải hỗ trợ khả năng nhìn, đọc cũng như phối màu của nội dung. Theo nguyên lý phối màu tương phản, chúng ta có thứ tự sau:

  • 1. Chữ đen trên nền vàng.
  • 2. Chữ xanh lá cây trên nền trắng.
  • 3. Chữ xanh dương trên nền trắng.
  • 4. Chữ trắng trên nền xanh dương.
  • 5. Chữ đen trên nền trắng.
  • 6. Chữ vàng trên nền đen.
  • 7. Chữ trắng trên nền đỏ.
  • 8. Chữ trắng trên nền xanh lá cây.
  • 9. Chữ trắng trên nền đen.
  • 10. Chữ đỏ trên nền vàng.
  • 11. Chữ xanh lá cây trên nền đỏ.
  • 12. Chữ đỏ trên nền xanh lá cây.

Bạn nên chọn Chữ đen trên nền trắng để giúp người tiêu dùng cũng như Web đạt được mục đích của mình.

Nên chọn màu nền trăng chữ đen cho website TMĐT
Nên chọn màu nền trăng chữ đen cho website TMĐT

Độ tương phản bao nhiêu là vừa? Nếu không có công cụ đo độ tương phản, cách đơn giản nhất là bạn đồng bộ hoá toàn bộ màu sắc về màu đơn sắc Grayscale. Và bạn sử dụng công thức sau:

  • Độ tương phản = X – Y <Excel>
  • X: chỉ số Brightness của màu foreground
  • Y: chỉ số Brightness của màu background

Nếu kết quả lớn hơn 45% thì độ tương phản là chấp nhận được.

Một ví dụ khác về Website TMĐT

Một đối thủ cùng ngành của Trần Anh là Bền. Trong năm 2008, ben.com.vn được vinh danh là một trong những Web B2C tiêu biểu tại Việt Nam.

Sự ghi nhận này thể hiện những nỗ lực của Bền trong lĩnh vực TMĐT đã đền đáp xứng đáng. Tuy nhiên cũng vẫn vết xe đổ của tư duy định hướng đối thủ cạnh tranh nên Website phải đè bẹp Website của một đối thủ nào đó mà bỏ qua nhu cầu và mong muốn của khách hàng.

Định hướng sai này khiến Website của Bền như một ma trận với các dòng chữ có độ tương phản thấp với màu nền. Điều này khiến người tiêu dùng nhanh bị mỏi mắt và khó tìm ra thứ mình cần trên danh mục trong vùng Above the fold.

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:

Đường Grid đề xuất trong Amazon
Đường Grid đề xuất trong Amazon

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.

Hết phần 4, mời bạn xem phần tiếp theo

Theo Nguyễn Ngọc Phương

 

Đăng nhập

Thống kê Website

Các thành viên : 15898
Content : 83
Liên kết web : 2
Số lần xem bài viết : 353828

Đang trực tuyến

Hiện có 161 khách Trực tuyến

Hỗ trợ Trực tuyến

NV Kinh doanh
Mr. Chiến
Yahoo Messenger Status

NV Kinh doanh
Ms. Hoa
Yahoo Messenger Status

NV Kỹ thuật
Mr. Chiến
Yahoo Messenger Status

Thương mại Điện tử

Quảng cáo Online

SEO Máy tìm kiếm

Tài nguyên Internet

Điểm tin Blog

Tin mới nhất - Vừa cập nhật

Tin đọc nhiều nhất - Hot nhất!