Hãy tưởng tượng, bạn có một cửa hàng bán hàng tiêu dùng. Một cửa hàng nằm hun hút trong con hẻm bé tí tẹo giữa con phố chen chúc cửa hàng, siêu thị. Bạn không giàu có gì để hợp tác thương hiệu hay làm đại lý phân phối cho một thương hiệu nổi tiếng.

Ngày ngày, bạn cặm cụi đi nhặt hàng từ các đại lý lớn và tự hào bày chúng lên những cái kệ còn thơm mùi sơn. Con hẻm tuy nhỏ nhưng thỉnh thoảng vẫn có khách hỏi mua. Một tháng, hai tháng rồi một năm trôi qua, doanh thu vẫn mấp mé ở mức đủ để bạn không nợ tiền hàng, và dần dần bạn bắt đầu ăn cụt cả vốn liếm. Cứ thế này có đảm bảo tương lai của mình hay không?

Ngày qua ngày, bạn suy tư để thoát khỏi bế tắc, sự vất vả trong công việc khiến bạn dễ nổi cáu hơn với mọi người. Một ngày đẹp trời nọ, nhân dịp cúi nhặt một đồng xu rơi trên con phố đó, bạn có thời gian ngắm nhìn vạn vật xung quanh và nhận ra trên các ngã tư tấp nập người qua lại có những cô bé cậu bé tay cầm hàng xấp giấy quảng cáo, mặt niềm nở ấn vào tay từng người qua lại. Một ý tưởng chợt loé lên, bạn bấm bụng in ra vài nghìn tờ quảng cáo và cũng hấp hởi lao ra con phố. Bỗng nhiên két ... két ... két .... hự. Tiếng ô tô phanh gấp. Mồ hôi đầm đìa, bạn tỉnh dậy thấy ... mình thật may mắn khi không lâm vào tình trạng đó.

Nhưng bạn có biết hầu hết các Website định hướng TMĐT hoặc chí ít là Brochureware tại Việt Nam đang lâm vào hoàn cảnh như vậy không? Nhà giàu thì quảng cáo, PR trên Web site có lượng truy nhập lớn, nhắm đúng thị trường mục tiêu hay kết hợp với các phương tiện truyền thông khác; nhà nghèo thì spam qua thư điện tử, trên diễn đàn, mạng xã hội, SEO và hàng trăm thủ thuật không một mảnh nối khác.

Trong bài viết này tôi tập trung khai thác khía cạnh tự marketing của Site mà một thể hiện dễ nhận thấy của nó là Trưng bày nội dung. Nghe to tát vậy thôi nhưng chiếu theo Marketing truyền thống, trong Customer Insight tôi nhận thấy 3 chữ C: Customer's want & need, Communication và Convenience bao phủ vấn đề này.

Vậy chúng ta đã có lý thuyết hỗ trợ để mổ xẻ vấn đề Trưng bày nội dung trên Internet rồi phải không nào! Một cụm từ để mô tả chuẩn xác cho vấn đề chúng ta sẽ bàn đến là Visual Display, tương đương với nó trong Marketing truyền thống có cụm từ Store Display để nói đến Brick 'N Mortar Store. Phần tôi đề cập đến sẽ là giao diện của Website - đầu ra của những công việc cực nhọc của bộ phận Product & User Experience (không liên quan đến lập trình), những công việc tiêu tốn rất nhiều tiền của một dự án Website, công việc đấu tranh dành quyền lợi cho khách hàng, hay nói tóm lại là một thứ gì đó rất mỹ miều phủ ngoài một cỗ máy quái vật bên trong.

Trong bài viết tôi sử dụng Web Amazon và một số hình ảnh phương Tây để minh hoạ các lý thuyết của tôi. Có thể bạn hơi thất vọng, nhưng chúng ta đành tạm sử dụng các minh hoạ này do chúng thể hiện rất tốt những gì tôi muốn nói, trong khi đồ nhà chưa chàng nào đạt được đến vậy.

Nào bạn uống trà hay café. Sẵn có nước sôi mời bạn một tách cafe đen để không ngủ gật khi đọc tiếp bài viết này.

Căn nhà ảo để trưng bày sản phẩm

Hãy quên đi sự ồn ào tấp nập của con phố bên ngoài căn phòng trưng bày nội dung, chúng ta hãy cùng xem căn phòng này có đáp ứng được yêu cầu để làm một siêu thị hay không? Để các lý thuyết xa lạ gần hơn với trải nghiệm marketing truyền thống, tôi sẽ sử dụng các từ ngữ Marketing & bán hàng để mô tả.

Vừa cười vừa nói, anh bạn đồng nghiệp đẩy tay sang ngang. Gần như không cần nhìn, anh ta vẫn lượm được ba túi bột giặt trước khi khoe với tôi đây là một trong những nhãn anh đang quản lý. Sau một thời gian không gặp, trông bạn béo ra. Tôi cũng mừng khi anh khá hài lòng với cương vị hiện tại, nhưng cũng lo trước gần chục nhãn hàng anh đang quản lý. Tuy nhiên ngày hôm nay anh hồ hởi kể cho tôi kết quả nghiên cứu & khảo sát trưng bày hàng hoá trong siêu thị của Doanh nghiệp mình làm tôi cũng bớt lo phần nào.

Lắng nghe anh nói, tôi chợt nhận ra sao siêu thị giống Website TMĐT đến vậy?

Giờ tôi ngồi ngắm trang Amazon và suy ngẫm về những gì anh nói. Trong phần tiếp theo tôi sẽ cho bạn biết những siêu thị ảo như Amazon hay cửa hàng ảo của Việt Nam cần những gì để đáp ứng điều kiện kinh doanh trực tuyến.

Chiều dài cửa hàng ảo. Chiều dài của cửa hàng ảo hay trang Web không giới hạn tuy nhiên chúng bị ràng buộc bởi độ lớn của nội dung và khả năng đọc được của người tiêu dùng trực tuyến.

Biểu đồ dưới thể hiện mối quan hệ của nội dung và khả năng đọc được của người tiêu dùng.

Hình minh hoạ 1

Hình bên trái mô tả: với một số lượng từ trên Web thì người tiêu dùng mất bao lâu để đọc. Số lượng từ trên một trang Web càng nhiều người đọc phải tốn nhiều thời gian để đọc hơn. Cứ 4.4 giây có 100 từ được đọc.
Y = 0.044*X + 25.0 <Excel>

X: Số lượng từ trên Web
Y: Thời gian trung bình của mỗi lần truy nhập Web

Hình bên phải mô tả: với một số lượng từ trên Web thì người tiêu dùng có khả năng đọc bao nhiêu phần trăm. Số lượng từ càng lớn, khả năng đọc của người dùng càng thấp.

Người đọc chỉ có thể đọc tốt nhất nếu số lượng từ trên một trang Web nhỏ hơn hoặc bằng 111 từ.
Y = 2.48* power(X, -0.34) <Excel>

X: Số lượng từ trên Web
Y: Tỉ lệ phần trăm số từ có thể đọc được trên Web

Nguyên tắc trên được áp dụng đối với những trang Web có không nhiều các văn bản có nội dung không liên quan nhau. Với TMĐT, giới hạn số lượng từ giúp người tiêu dùng có khả năng đọc cao còn thấp hơn.

Mặt tiền của cửa hàng. Mặt tiền của một cửa hàng là phần nội dung trang Web hiện ra trên trình duyệt ngay khi lần đầu tiên bạn mở trang Web ra. Mặt tiền là vùng có đường bao màu đỏ trong hình minh hoạ dưới. Mặt tiền phải rộng. Chúng tôi thường dùng từ Above the fold để nói về điều này. Cũng giống như một tờ báo giấy, phần chân của khung màu đỏ thể hiện kết thúc nội dung của phần bạn đang nhìn thấy, muốn xem phần sau phải mở rộng phần cuối bằng cách dùng thanh cuộn thẳng đứng. Đường chân đó gọi là đường gấp và phần trên được gọi là Trên đường gấp hay Above the fold.

Khi thiết kế mặt tiền bạn cần cân nhắc giữa số lượng hàng hoá trưng bày hay lượng thông tin của mỗi hàng hoá để đảm bảo tính dễ thấy, dễ đọc, dễ chọn.

Đa số người sử dụng nhất là trẻ tuổi thường chỉ xem nội dung trưng bày trong phần Above the fold. Hình dưới thể hiện vùng Above the fold.

Hình minh hoạ 2

Shop360.vn với tầm nhìn trở thành Trung tâm mua sắm và giải trí trực tuyến hàng đầu Việt Nam. Để đạt được mục tiêu, Site gia tăng số lượng hàng hoá trên gian hàng ảo, phát triển các dịch vụ gia tăng giúp người tiêu dùng mua hàng thuận hiện hơn cũng như thêm dịch vụ in ảnh trực tuyến. Tất cả các nỗ lực đó khiến Site không thể tốt hơn được nữa trong thời điểm TMĐT chưa thực sự thâm nhập vào cuộc sống. Dần dần, Site trở thành nơi tham khảo giá và thông tin của hàng nghìn mặt hàng khác nhau. Trên khía cạnh kinh doanh, Site đang làm rất tốt công việc đào tạo người tiêu dùng nhận thức về Trung tâm mua sắm trực tuyến, tăng độ phủ thị trường. Tuy nhiên sự thiếu quan tâm về mặt tiền của Siêu thị ảo khiến mọi nỗ lực không được đền bù xứng đáng. Người tiêu dùng trực tuyến không thấy sự hấp dẫn của Siêu thị từ vùng Above the fold, nhiều người sẽ nhanh chóng rời bỏ khi không thấy có lợi cho họ trong cái nhìn đầu tiên.

Độ rộng vùng có thể nhìn được tuỳ thuộc vào người dùng mục tiêu. Vùng có thể nhìn được phụ thuộc vào các yếu tố sau:

• Độ phân giải màn hình
• Font chữ mặc định
• Kích cỡ màn hình trình duyệt Web
• Trình duyệt Web
• Các thanh công cụ được cài vào trình duyệt Web

Tuy nhiên việc quyết định Web TMĐT được dùng trên thiết bị hay trình duyệt nào lại phụ thuộc vào người dùng, những người mang lại lợi nhuận cho Web TMĐT chứ không phải người thiết kế Web. Do vậy việc khảo sát để tìm hiểu ai là người dùng mục tiêu và thiết bị, trình duyệt họ sử dụng là việc rất quan trọng. Từ đó mới quyết định số lượng hàng hoá và thông tin chi tiết của chúng trên mặt tiền cũng như trong cửa hàng/ siêu thị ảo. Hình dưới mô tả sự ảnh hưởng của trình duyệt đến độ lớn của vùng có thể nhìn được. Các trình duyệt: Internet Explorer 7, Opera 9.6, Firefox 2.0, Chrome beta.

Hình minh hoạ 3

Với màn hình 17” – 1024 px rộng và 768 px cao sẽ có khoảng 974 px rộng và 650 px cao dành cho vùng màn hình có thể nhìn thấy. Nếu trừ đi lề của trang Web, vùng không gian thực tế được phép sử dụng là 950 px rộng và 650 px cao. Tuy nhiên mỗi trình duyệt lại có sự khác nhau về vùng không gian thực tế. Trên ảnh minh hoạ, chúng ta có thể thấy Chrome có chiều cao có thể nhìn lớn nhất, trong khi IE có chiều rộng có thể dùng nhỏ nhất.

Vùng có thể nhìn được bị hạn chế nên các cửa hàng ảo cần phải tiết kiệm các không gian trình bày, giảm thiểu các yếu tố đồ hoạ không cần thiết. Trần Anh là một trong những công ty kinh doanh thiết bị vi tính hàng đầu tại Việt Nam. Mỗi khi có nhu cầu mua thiết bị vi tính, Website trananh.vn là điểm đến đầu tiên của nhiều người. Website không thực hiện chức năng bán hàng trực tuyến, nhưng nó góp phần quan trọng vào việc tạo và gìn giữ cầu nối giữa khách hàng và công ty Trần Anh. Qua Website, Trần Anh cũng đánh giá được xu hướng tiêu dùng của khách hàng thông qua thị phần click chuột vào các hạng mục thiết bị vi tính từ đó công ty hoạch định kế hoạch kinh doanh.Tuy nhiên công ty chưa sử dụng không gian trong vùng Above the fold hiệu quả. Các banner siêu lớn với những hình ảnh ít giá trị choáng phần lớn vùng mặt tiền. Có nhiều cách để định hướng người dùng, tuy nhiên cách này tỏ ra không thu được thiện cảm từ người dùng. Tuy nhiên vị trí trang trọng của thương hiệu Trần Anh trong tim người tiêu dùng, khiến họ vẫn tiếp tục phải tiêu tốn những thao tác thừa để tìm ra thứ họ cần mua.

Khả năng mở rộng độ rộng của cửa hàng ảo. Web TMĐT dựa trên nền tảng công nghệ Web, đây là ưu điểm vượt trội của cửa hàng trực tuyến đối với cửa hàng truyền thống. Chiều rộng của Web TMĐT nên co giãn tuỳ theo màn hình người tiêu dùng tuy nhiên nên có một độ rộng mặc định bằng với độ rộng của màn hình nhỏ nhất mà nhóm người tiêu dùng mục tiêu thường sử dụng. Chẳng hạn kích cỡ mặc định là 766 px. Với Amazon, khách hàng mục tiêu sử dụng màn hình 17 inch, nên kích cỡ mặc định là 990 px.

Giao diện Web tại Việt Nam phần lớn vẫn dựa trên trải nghiệm của người quản trị dự án hoặc năng khiếu của đồ hoạ viên. Qua nhiều năm, dường như rất ít Web TMĐT may mắn có được một người được đào tạo về tính tự Marketing của Web tham gia vào phát triển giao diện. Do vậy mặc dù được đầu tư rất bài bản nhưng giao diện Web TMĐT Việt Nam vẫn là vùng đất hứa cho các cao bồi hoang dại đặt ra các quy luật giao diện của riêng mình, mặc dầu xét cho cùng khách hàng mới là người đem tiền lại cho họ. Khả năng mở rộng được thay thế bằng khung Web bé xíu - cố định với hai bên treo lủng lẳng các banner trượt hoặc cố nhồi hàng tá siêu banner bên trong không theo tiêu chuẩn IAB. Chẳng hạn shop360.vn, 25h.vn, megabuy.vn, …

Bố cục cửa hàng ảo. Tuỳ theo phân khúc thị trường, khách hàng mục tiêu và định vị mà có bố cục trang Web khác nhau. Cửa hàng có thể là một khối, bố cục đối xứng hay bất đối xứng, ba mảng hay một mảng hay phối hợp nhiều loại bố cục.

Hình dưới đây so sánh 3 loại bố cục theo thứ tự: một mảng ( Discovery), ba mảng ( Amazon) và phối hợp (Wired).

Hình minh hoạ 4

Tuy nhiên trong một cửa hàng bán nhiều nhãn hàng, chủng loại hàng hoá, loại ba mảng được sử dụng nhiều hơn cả.

Kích cỡ các mảng trong bố cục thế nào là hợp lý? Chúng phụ thuộc vào nội dung của bạn trong những bài tiếp theo tôi sẽ cung cấp các kích thước chung cho thiết kế giao diện.

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.

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

Hình minh hoạ 5

Một đối thủ cùng ngành của Trần Anh là Bền. Trong năm 2008, http://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:

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.