Văn phòng iGURU trực tuyến (YIM: wwwiguru1)

A. PHƯƠNG PHÁP TƯ VẤN
Thu Hoài là một đại diện cho mục đích của người dùng. Qua bài viết này iGURU Việt Nam sẽ làm sáng tỏ giải pháp thiết kế GUI cho Site Thương mại điện tử nói chung và Site Sport1.vn nói riêng.

Giao diện Web Sport1.vn là một quy trình đối thoại giữa Site và người dùng. Đây là cuộc đối thoại hai chiều định hướng bán hàng, marketing và truyền thông. Để việc giao tiếp thoả mãn mục đích của Site và người dùng, iGURU Việt Nam phân tách quy trình bán hàng, marketing và truyền thông thành những quy trình nhỏ có tính lặp và có thể đo lường được, sau đó sử dụng ngôn ngữ thiết kế Web để biểu diễn chúng trên giao diện Web Sport1.vn.

Phương pháp tư vấn sẽ bao gồm:
1. Tư vấn giao diện:
- Logo
- Hệ thống định hướng
- Bố cục toàn trang
- Bảng màu sắc
- Nút bấm
- Các kiểu
- Icon
- Typography
- Hình ảnh đồ hoạ
- Nội dung

2. Tư vấn Marketing
- Thông điệp truyền tải
- Mong muốn & nhu cầu của khách hàng
- Đáp ứng khách hàng

3. Tư vấn Bán hàng
- Trưng bày hàng hoá
- Giỏ hàng
- Thanh toán
- Chào khách hàng, đánh giá kết quả

Cuối bài tư vấn, iGURU Việt Nam sẽ thiết kế demo một giao diện mới cho Sport1.vn để phù hợp với Doanh nghiệp.

B. GIAO DIỆN HIỆN TẠI CỦA SPORT1.VN


Hình minh hoạ 1: Giao diện hiện tại của Sport1.vn

C. THIẾT KẾ GIAO DIỆN
I. Hệ thống định hướng
1. Hiện trạng:

• Hệ thống định hướng của Sport bao gồm 4 loại, định hướng chính – trên cùng, định hướng phụ - trái, định hướng crumb trails – trong trang con, định hướng xem các trang sản phẩm – trong các trang sản phẩm.
• Định hướng chính sử dụng logo các nhãn hàng để làm nút bấm. Sự không đồng nhất về khuôn dạng, màu sắc, kích cỡ của các logo làm cản trở tốc độ đọc của người dùng do người dùng phải dừng lại để ngắm nghía.
• Đính hướng phụ sử dụng icon trước các văn bản. Khi nhiều nút định hướng thì Web trở nên khó đọc do người dùng dừng lại để ngắm các icon
• Định hướng crumb trails sử dụng văn bản. Sự khác biệt giữa gốc và các trang con cũng như độ tương phản màu thấp khiến người đọc khó khăn khi đọc.
• Định hướng xem các trang sản phẩm sử dụng menu xổ xuống. Trông đơn độc và không có hỗ trợ thông tin khiến người dùng không hiểu ám chỉ điều gì.

2. Tư vấn của iGURU Việt Nam:

• Nên tăng thêm các phương pháp định hướng mở rộng và định hướng lặp lại. Định hướng mở rộng là các định hướng kết hợp giữa 5 kiểu định hướng thông dụng, và đặt tại những vùng có nhiều dữ liệu phức tạp, có quy mô lớn hoặc những vùng cần hỗ trợ người dùng tìm thông tin liên quan. Định hướng lặp lại là việc nhắc lại 05 định hướng thông dụng tại vị trí chân trang, hoặc các vùng dữ liệu phức tạp, có quy mô lớn.
• Định hướng chính nên sử dụng văn bản. Để hệ thống trở nên tiện dụng, nên chuyển từ dùng logo làm định hướng thành thuần văn bản. Việc này giúp người đọc không cần thiết phải dừng lại để ngắm nghía, phân tích sau đó mới chọn sản phẩm cần. Đồng thời họ cũng sẽ không nhàm chán khi lần thứ 2 truy nhập Web site. Khi đó chiều cao thanh định hướng chính nên thu nhỏ lại để tiết kiệm vùng fold rất có giá trị.
• Định hướng phụ nên sử dụng văn bản. Để hệ thống trở nên tiện dụng, nên chuyển phương pháp thể hiện từ icon + văn bản thành thuần văn bản và có mũi tên chỉ các Danh mục có danh mục con. Đơn giản là hiệu quả.
• Định hướng crumb trails nên dùng 1 kiểu font chữ và thay đổi màu nền. Màu đen và trắng trên nền đỏ làm người đọc khó đọc. Nên thay đổi màu nền của thanh ngang và màu sắc của dòng chữ định hướng. Để nâng cao tính Marketing, nên cho người dùng họ đang ở đâu bằng thêm câu: “Bạn đang ở: Trang chủ >” trước định hướng crumb trails.
• Định hướng xem các trang sản phẩm nên sử dụng kiểu liệt kê hàng ngay. Với phân khúc khách hàng mục tiêu của Sport1.vn, họ sẽ không hiểu menu thả xuống có ý nghĩa gì. Bằng việc mô tả cho họ biết họ có thể đang ở đâu, đi đâu và đi đến đâu, người sử dụng sẽ rất hạnh phúc. Ví dụ: Trang trước < 1 | 2 | 3 | 4 | 5 > Trang sau

II. Bố cục
1. Hiện trạng:

• Sport1.vn sử dụng bố cục 3 vùng, 3 cột, bất cân xứng và không uyển chuyển.
• Kích cỡ các cột nội dung bị giữ cố định và không theo một chuẩn chung.
• Web áp dụng cho màn hình độ rộng 1280 pixels
• Chiều cao của Banner trên cùng và thanh định hướng chính: 220 pixels
• Phương pháp chuyển tiếp giữa vùng Above the Scrolling và vùng Below the Fold bằng các Box (hộp) giới thiệu dịch vụ.

2. Tư vấn của iGURU Việt Nam:

• Nên chia Grid cho toàn bộ các trang Web trong Site. Dựa trên các đường Grid xây dựng các khối nội dung để tạo thể thống nhất, hài hoà, khoa học và uyển chuyển giữa các khối nội dung.
• Nên sử dụng giải pháp 3 cột và đối xứng. Thiết kế Web hiện đại thường sử dụng hai giải pháp bố cục: 3 cột và nằm ngang, trong đó dùng các kiểu bố cục đối xứng, bất đối xứng và phối hợp. Với Sport1 nên sử dụng bố cục 3 cột và đối xứng, lý do là do hành vi và thói quen của Phân khúc khách hàng. (Giải thích trong Mục Marketing)
• Nên cho các cột nội dung tự động co giãn theo độ rộng màn hình. Độ rộng nhỏ nhất là 780 pixel . Chú ý rằng người mua đồ thể thao thời trang không phải ai cũng dùng màn hình máy tính 17” hoặc hơn để xem toàn bộ màn hình với độ rộng 1280 pixels như hiện tại của sport1.vn
• Nên giảm chiều cao banner và thanh định hướng chính. Mục tiêu Sport1 là giới thiệu các nhãn hàng thể thao thời trang cao cấp không phải giới thiệu về Sport1 và vùng 220x1280 quá nhỏ để thể hiện sự sáng tạo trong quảng cáo cho các nhãn hàng.
• Nên sử dụng một Box kéo dài và trong đó có các Box nhỏ thay vì chia ra nhiều Box nhỏ như hiện tại đối với vùng chuyển tiếp giữa vùng Above the Scrolling và vùng Below the Fold .

III. Màu sắc
1. Hiện trạng:

• Quá nhiều màu trên Web. Tông màu chủ đạo của Site là màu đỏ đậm, màu thứ cấp là đen, những màu cấp ba là màu vàng pha trắng, xanh da trời, vàng, xám, đỏ tươi, trắng, xám pha đen, xanh da trời đậm.
  
  Hình minh hoạ 2: Bảng màu sử dụng trong Sport1.vn
• Màu sắc không định hướng người dùng và mục đích của Site. 10 màu sử dụng chính trong một Site làm cho Site trở nên rối rắm, sặc sỡ mà không hướng người đọc vào một nội dung ưu tiên nào cả. Tỉ lệ phân bổ màu sắc không được xác định trước.
• Màu nền các khối nội dung làm giảm tốc độ đọc. Các khối nội dung mang tính chất định hướng, hỗ trợ người dùng sử dụng màu vàng pha trắng, xám làm nền. Màu sắc chữ trên nền này có độ tương phản thấp, điều này làm cản trở nỗ lực đọc của người sử dụng.
• Màu font chữ làm người dùng bối rối. Font chữ sử dụng 8 màu với sắc độ, bão hoà màu, độ sáng khác nhau để thể hiện. Màu sắc font chữ đào tạo người dùng cách di chuyển và đọc. Với số lượng màu khá lớn, người dùng bối rối khi không biết mỗi dòng chữ có chức năng gì. Đồng thời độ tương phản của màu font chữ trên các nền không cao, điều này cũng làm giảm tốc độ đọc của người dùng.
• Màu đường kẻ làm giảm tính thẩm mỹ của Site. Đường kẻ màu sắc không đồng nhất với 4 màu khác nhau. Điều này khiến tính thẩm mỹ của Site giảm đi, chúng cũng góp phần làm giảm đi tính chức năng của các vùng nội dung.
• Màu hình ảnh không cuốn hút. Hình ảnh có màu sắc đơn điệu, không cuốn hút.

2. Tư vấn của iGURU Việt Nam:

• Nên sử dụng tối đa 6 màu. Màu sắc không chỉ dùng để tăng tính thẩm mỹ mà còn được dùng để định hướng, tăng tính tiện dụng cho người đọc.
  Trong 6 màu nên sử dụng màu chính là màu của logo ( màu đỏ - logo hiện tại màu trắng là màu chính ) nhưng được phối màu lại sao cho thể hiện tinh thần thể thao, thời trang, mạnh mẽ, sôi động, tràn đầy sức sống.
  Màu thứ cấp nên là màu bổ sung - màu đối trên vòng tròn màu. Hiện tại thứ cấp của Sport1 là màu đen. Màu đen tạo cảm giác nghiêm trang, huyền bí, khi phối với màu sáng nó tạo ra sự tương phản, ấn tượng sâu sắc, mạnh mẽ. Tuy nhiên sự phối màu không uyển chuyển, linh hoạt làm cho trang web trở nên rườm rà, khó chịu khi xem.
  Màu cấp 3 nên là màu phối giữa màu chính và màu thứ cấp. Nếu dựa trên vòng tròn màu là màu nằm giữa màu chính và màu thứ cấp. Không nhất thiết phải cùng sắc độ, có thể phối hợp với độ bão hoà màu, độ sáng để tạo ra các màu khác. Tuy nhiên màu cấp 3 nên là những màu tạo tính sinh động, sức sống cho trang Web. Thông thường để người sử dụng đọc Web dễ dàng, màu chính và màu thứ cấp thường là màu mát hoặc lạnh, nếu màu nóng hoặc ấm thì thường áp dụng cho vùng ưu tiên của Web, những vùng khác sẽ giảm cường độ nóng và ấm. Chính vì vậy màu cấp 3 là luôn là sự bù đắp cho hai cấp độ màu chính.
  
  Hình minh hoạ 3: Bảng màu
  
  Giải thích :
  Màu sắc
  Red: Màu đỏ
  Green: Màu xanh lá cây
  Blue: Màu xanh da trời
  Purple: Màu tím
  Orange: Màu cam
  Yellow: Màu vàng
  Tính chất
  Primary: Màu chính
  Complementary: Màu bổ sung
• Màu sắc nên áp dụng phù hợp với mục đích của Site và của người dùng. Màu sắc không chỉ đơn thuần làm tăng tính thẩm mỹ của Site mà còn giúp truyền tải thông điệp của Site tới người sử dụng, tăng tính thông tin, đồng thời tăng tính chức năng cho Site.
  Tại Sport1, màu chính bị lạm dụng quá nhiều tạo ra cảm giác khó chịu, khó đọc, không xác định thông tin quan trọng nằm đâu.
  Nên giảm màu chính, do màu chính là màu nóng nên chỉ nên áp dụng màu chính tại những vùng định hướng, vùng ám chỉ hành động.
  Những vùng nội dung quan trọng thay vì sử dụng màu nóng, ấm để thu hút mắt người đọc thì nên di chuyển lên vùng Fold để người dùng luôn đọc được mà không phải tìm kiếm, di chuyển mắt nhiều.
  Các vùng chức năng nên sử dụng màu sắc để thông báo cho người sử dụng biết.
  Màu sắc nên phối hợp với chữ, hình ảnh, hình vẽ để tăng chất lượng thông điệp.
• Màu nền các khối nội dung chỉ nên sử dụng màu cho mục đích định hướng hoặc truyền thông điệp. Những vùng nội dung chỉ đọc nên sử dụng màu trắng hoặc có pha trắng để giúp người sử dụng đọc nhanh, chính xác.
  Nếu sử dụng văn bản trên màu nền không phải màu trắng, màu sắc phải có độ tương phản cao. Tuy nhiên phải đi theo màu chuẩn của cả hệ thống Web.
• Nên sử dụng 3 loại màu cho văn bản trên Sport1.vn. Người đọc sẽ học cách điều khiển, sử dụng nội dung Web tốt nhất khi có 3 màu cho văn bản. Ba màu này được sử dụng để phân chia cấp độ quan trọng của nội dung, các loại liên kết, định hướng .
• Màu đường kẻ nên đồng nhất. Đường kẻ sử dụng để phân chia các vùng nội dung, nếu sử dụng nhiều màu sắc sẽ tạo ra sự sặc sỡ không cần thiết. Trong trường hợp Sport1.vn nó làm gây hiểu nhầm tính quan trọng của các vùng nội dung cho người dùng.
• Nên chọn những tấm ảnh có màu sắc sinh động. Văn bản chỉ có 25% sức cuốn hút trong khi hình ảnh tạo ra 75% và hình vẽ là 80%. Nếu Web sử dụng một vài icon giả lập 3D thì tính sinh động, thông tin sẽ tăng lên.

F. Nguồn tham khảo

• Blog của iGURU Việt Nam
• Wikipedia
• Poynter.org
• Nghệ thuật phối màu – Nhi Xuyên

Tải phiên bản PDF ( chi tiết hơn): http://files.myopera.com/iguru/blog/TuVanTruyenThongBanHangchoWebSport1.vnV1.2008.05.3.pdf
Traceback: http://my.opera.com/iguru/blog/phan-tich-cach-marketing-ban-hang-web-thuong-mai-dien-tu-sport1-vn

Xem tiếp phần II: [Tại đây]