THỨ BẠN CẦN LÀM ĐÚNG
Chương 6. Biển chỉ đường và Vụn bánh mì?
Thiết kế hệ thống định vị và điều hướng.
Và bạn có lẽ sẽ thấy mình có / 1 căn nhà xinh đẹp / với 1 cô vợ xinh đẹp Và bạn có lẽ sẽ tự hỏi bản thân / Ủa… / Làm sao mà mình có được những thứ này?"
_ “Once in a lifetime” - nhóm nhạc Talkingheads_
Sự thật nó là như vậy:
Sẽ không ai dùng trang Web của mày nếu họ không biết làm thế nào để đi lại trong cái web đó mà không bị lạc.
Bạn biết điều này từ kinh nghiệm của chính bạn khi là lướt Web. Nếu bạn vào một trang web và không thể tìm thấy những gì bạn đang tìm kiếm hoặc không hiểu được cách trang web đó được tổ chức và sắp xếp, thì khả năng cao là bạn sẽ không mất thời gian ở lại Web đó làm chi, hoặc là không bao giờ vào Web đó nữa luôn.
Vậy làm thế nào để ta tạo ra 1 hệ thống Navigation (điều hướng) rõ ràng, đơn giản và nhất quán?
Quy trình tìm đồ khi đi chợ.
Hình dung này: 1 buổi chiều bạn đi ra siêu thị để mua 1 cái lưỡi cưa.
Khi bạn đi vào, bạn sẽ nghĩ “Hmmm chúng nó để lưỡi cưa ở đâu nhỉ". Khi bạn vào bên trong, bạn sẽ bắt đầu nhìn vào tên các mục hàng, treo cao trên tường (Chúng đủ lớn để bạn có thể đọc được từ xa)
“Hmmm” Bạn băn khoăn. “Công cụ? Hay là đồ làm vườn?” Có thể là 1 trong 2, nhưng bạn sẽ phải bắt đầu từ đâu đó thôi, nên bạn đi vào khu bán Công Cụ.
Khi vào tới khu đó rồi, bạn sẽ tìm kiếm các biển hiệu ở cuối mỗi dãy hàng.
Khi bạn nghĩ bạn tới đúng dãy rồi, bạn bắt đầu tìm kiếm các sản phẩm riêng lẻ trên dãy đó.
Nếu hoá ra bạn đoán sai, bạn sẽ lại thử tìm ở dãi khác, hoặc bạn có thể quay ra ngoài và tìm lại từ đầu, trong 1 khu vực mới (‘Đồ làm vườn’ chẳng hạn). Tới lúc bạn tìm được thứ bạn muốn, quy trình nó sẽ giống như này:
Về cơ bản, bạn sử dụng hệ thống điều hướng của cửa hàng (các biển hiệu và hệ thống phân cấp tổ chức của chúng) và khả năng quan sát (lướt, quét mắt) để tìm thấy những gì bạn đang tìm kiếm.
Tất nhiên, quá trình thực tế sẽ phức tạp hơn một chút. Đơn cử là khi bạn bước vào cửa, bạn sẽ dành một vài tích tắc cho một quyết định quan trọng: Bạn sẽ bắt đầu bằng cách tự mình tìm kiếm cái cưa hay bạn sẽ hỏi thẳng nhân viên bán hàng?
Đó là 1 quyết định được dựa trên 1 số lượng biến số khả năng - Bạn quen thuộc với cửa hàng tới đâu, bạn tin tưởng vào khả năng tổ chức sắp xếp của cửa hàng tới mức nào, bạn có đang vội lắm không, hoặc thậm chí cả việc bạn có hoà đồng hay không.
Khi ta đưa ra quyết định, quy trình sẽ giống như này hơn:
Nhớ là kể cả khi bạn tự đi tìm, nếu thấy loạn quá thì vẫn có khả năng bạn sẽ quay ra hỏi đường ai đó thôi.
Bài học nhập môn về Điều hướng trên Web.
Theo nhiều cách, bạn trải qua cùng 1 quy trình khi vào 1 Website nào đó.
- Thường thì bạn sẽ đang tìm cái gì đó. Trong thế giới “thực" thì đó có thể là phòng cấp cứu, hoặc là 1 chai tương cà cỡ đại. Còn trên Website thì đó có thể là 1 cặp headphones hoặc tên của dàn diễn viên trong phim Casablanca, etc..
- Bạn sẽ quyết định xem nên hỏi trước hay tự tìm trước. Điều khác biệt là, ở trên Web thì không có ông nào đứng đó để chỉ đường cho bạn cả. Thứ ở trên Web mà hữu dụng tương đương với hỏi đường ở ngoài đời thực, chính là hành động tìm kiếm - gõ tên cái thứ bạn đang tìm trên khung search và nhận về 1 mớ link có liên quan tới thứ đó, hoặc dẫn bạn trực tiếp tới thứ đó luôn.
Một vài người (Jakhôngb Nielsen gọi họ là những người dùng “thiên về search") sẽ luôn luôn tìm cái search box đầu tiên mỗi khi vào 1 trang Web nào đó. (Họ có lẽ cũng chính là những người sẽ đi tìm nhân viên bán hàng để hỏi đường ngay khi vào 1 cửa hàng nào đó)
Một vài người khác (Nielsen gọi là những người dùng “thiên về link" ) sẽ luôn luôn tự mò mẫm tìm hiểu trước, và chỉ dùng search box khi mà họ đã thử click hết các đường link khả quan, hoặc khi họ đã thấy quá nản với cái trang Web đó.
Với những người còn lại, quyết định nên dùng search box trước hay tự tìm trước phụ thuộc vào luồng suy nghĩ của bạn lúc đó ra sao, bạn đang vội đến mức nào, và bản thân cái Web đó có hệ thống điều hướng tử tế để mình tự tìm hay không.
- Nếu bạn chọn hướng tự tìm, bạn sẽ điều hướng dựa trên 1 hệ thống phân cấp, sử dụng các biển hiệu để chỉ dẫn cho mình. Điển hình là, bạn sẽ lướt qua cái Homepage để tìm 1 chuỗi các phân mục chính của trang web (chính là các biển hiệu khu vực tại cửa hàng) và click vào cái nào phù hợp.
Sau đó bạn sẽ chọn tiếp trong 1 chuỗi phân mục phụ.
Với 1 chút may mắn, bạn sẽ có 1 list các thứ bạn đang tìm chỉ sau 1 vài click tiếp theo.
Sau đó bạn có thể click vào từng đường link để kiểm tra chi tiết, tương tự như khi bạn lôi sản phẩm thật ra khỏi kệ trưng bày và kiểm tra qua lại, đọc nhãn hiệu, etc..
Quy trình trông sẽ như sau:
Lướt web nhẹ khôn kham.
Tìm kiếm mọi thứ trên một trang web và tìm kiếm chúng trong thế giới thực có rất nhiều điểm tương đồng.
Khi chúng ta ở trên 1 trang Web, theo 1 cách nào đó ta thấy mọi thứ giống y hệt như trên 1 không gian thực.
Nghĩ tới các thuật ngữ chúng ta thường dùng để mô tả trải nghiệm sử dụng Web như “lướt web", “đi sâu", “lần mò" . Và click vào 1 đường link thì ta không dùng từ “tải" hoặc “hiển thị" 1 trang khác, nó sẽ “đưa mình tới" 1 trang khác.
Nhưng trải nghiệm sử dụng trang Web đang thiếu đi rất nhiều dấu hiệu mà con người đã dành cả đời làm quen và sử dụng khi cần phải hình dung về không gian. Hãy xem xét những điều khác lạ của không gian trong 1 trang Web.
Không có hình dung về tỉ lệ. Ngay cả khi chúng ta đã dùng 1 trang web thường xuyên, trừ khi đó là 1 web rất nhỏ, thì thường ta sẽ không biết được cái trang đó to cỡ nào (bao gồm 50 trang? 1000 trang? hay 17000 trang?). (Ngay cả những người quản lý trang Web thi thoảng cũng không biết rõ trang web của họ lớn tới cỡ nào) Có thể có hẳn 1 cụm website to đùng mà ta chưa bao giờ tìm ra. Trải nghiệm này hoàn toàn khác với trải nghiệm đọc 1 cuốn sách, tham quan 1 bảo tàng hay đi vào 1 cửa hàng, nơi mà bạn luôn có thể nắm bắt được, dù chỉ mơ hồ, tỉ lệ không gian đã đi qua / chưa đi qua.
Kết quả thực tế là: sẽ rất khó để bạn biết được liệu mình đã lướt hết cái phần mình thích trên cái web này chưa, dẫn tới việc bạn sẽ không biết khi nào mình có thể dừng lại. (Đây là 1 trong những lý do tại sao chúng ta phải đổi màu cho những đường link đã được click vào. Nó báo hiệu cho chúng ta về những phần thông tin ta đã xem hết, và phần nào chưa được khám phá)
Không có hình dung về phương hướng. Trên 1 trang web, không có trái phải trên dưới gì cả. Chúng ta có thể nói về di chuyển lên trên hoặc xuống dưới, nhưng cái ý thực sự của chúng ta là trên, dưới trong hệ thống phân cấp - tới 1 level chung chung hơn hoặc 1 level chi tiết hơn.
Không có hình dung về vị trí. Trong 1 không gian vật lý thực tế, khi đi loanh quanh, ta sẽ tích luỹ thông tin và kiến thức về không gian đó. Ta phát triển cảm nhận về vị trí của mọi thứ và có thể đi đường tắt. Ở ví dụ trên, lần đầu tiên tới được chỗ mua cái máy cưa thì mình có thể dựa vào biển hiệu, nhưng tới những lần sau thì chúng ta sẽ đi thẳng tới vị trí của chúng luôn “Máy cưa à. Ừ mình nhớ nó ở đâu mà. góc bên phải, gần gian hàng tủ lạnh".
Nhưng trên Web, chân bạn còn chẳng phải chạm đất; thay vào đó, bạn di chuyển đi lại bằng cách click vào các đường link. Click vào mục “Công cụ chạy điện" và tự nhiên bạn được dịch chuyển tức thời tới dãy bán Công cụ chạy điện, mà không phải đi qua quãng đường vật lý nào, không được nhìn thấy mọi thứ dọc đường.
Khi ta muốn quay lại 1 trang nào đó trên Web, thay vì phải dựa vào cảm quan vị trí vật lý như trên không gian thực, ta phải nhớ lại ví trí của trang đó trong hệ thống phân cấp sắp xếp thông tin của cả trang web, và dò lại hành trình của mình.
Đây chính là lý do tại sao các Dấu trang (bookmarks) - các lối đi tắt cá nhân được lưu trữ từ trước - rất quan trọng, và tại sao nút Quay lại (back button) là nút được sử dụng nhiều nhất trong các trình duyệt Web.
Điều này cũng cho bạn biết tại sao cái khái niệm Homepage (Trang chủ) lại quan trọng. Homepage thì thường cố định ở 1 chỗ. Khi bạn ở trong một trang web, Homepage giống như sao Bắc đẩu ấy. Bạn click vào
Homepage là có thể bắt đầu lại từ đầu được rồi.
Cái sự thiếu tính tương tác vật lý này vừa có lợi vừa có hại. Về mặt tích cực, cảm giác di chuyển nhẹ nhàng không tốn sức này có thể rất thích thú, và nó giải thích 1 phần cho việc tại sao khi mình lướt web thời gian lại trôi qua nhanh vậy, tương tự như khi chúng ta “chìm đắm" trong 1 cuốn sách hay ho.
Về mặt tiêu cực, tôi nghĩ điều này giúp giải thích lý do tại sao chúng ta sử dụng thuật ngữ “Web navigation”
(điều hướng Web), mặc dù chúng ta không bao giờ cần phải dùng tới từ điều hướng khi đang ở cửa hàng bách hóa, hay thư viện. Nếu bạn tra từ ‘điều hướng’ trong từ điển, sẽ có 2 nghĩa chính: ‘đi từ nơi này đến nơi khác’ và ‘xác định vị trí hiện tại'.
Chúng ta phải dùng từ ‘Điều hướng Web’ vì “xác định vị trí hiện tại của bạn” trên 1 trang web là vấn đề dễ gặp phải hơn nhiều so với trên không gian vật lý. Ở trên 1 trang web vốn đã rất dễ bị lạc rồi, và ta còn không thể ngó nghiêng xung quanh để xem mình đang ở dãy hàng hay khu vực nào nữa chứ. Điều hướng Web bù đắp cho sự thiếu hụt cảm quan về vị trí bằng cách làm nổi bật hơn hệ thống phân cấp của trang Web, tạo ra cảm giác về không gian cho người dùng.
Điều hướng không chỉ là 1 tính năng của trang Web, bản thân nó chính là trang web, cũng tương tự như cái toà nhà này, các chuỗi kí ốt cửa hàng này, các quầy thu ngân và hệ thống thang cuốn này, đã cấu thành và tạo nên 1 trung tâm thương mại. Nếu không có chúng, không ai biết mình đang đứng ở đâu cả.
Bài học rút ra là gì? Điều hướng web bắt buộc phải được làm thật tốt.
Các chức năng bị quên lãng của Điều hướng.
2 chức năng chính của Điều hướng khá hiển nhiên: Để giúp chúng ta tìm mọi thứ, và để cho chúng ta biết mình đang ở đâu.
Tuy nhiên Điều hướng còn mang lại các chức năng khác cũng quan trọng không kém, nhưng lại dễ bị bỏ qua:
- Nó cho ta biết cái gì đang ở trên 1 trang web: Bằng cách làm hệ thống phân cấp thông tin rõ ràng hơn, Điều hướng thể hiện rõ trang web này bao gồm những gì. Điều hướng có khả năng tiết lộ cấu trúc nội dung đấy! Và tiết lộ cho người dùng về nội dung trang web thậm chí còn có thể quan trọng hơn việc hướng dẫn người dùng về trang web đó.
- Nó cho ta biết cách sử dụng 1 trang web: Nếu Điều hướng làm tốt công việc của mình, nó sẽ ngầm nói cho bạn biết cần bắt đầu ở đâu, và các hướng đi của bạn là gì. Lý tưởng hơn nữa thì Điều hướng đóng vai trò như 1 Bản hướng dẫn (Càng tốt, vì phần lớn người dùng đằng nào cũng sẽ phớt lờ các dạng hướng dẫn khác có trên trang Web thôi)
- Nó cho ta niềm tin vào đội ngũ xây dựng sản phẩm: Mỗi khi vào 1 trang web, chúng ta đều tự thắc mắc 1 điều: “không biết mấy ông xây cái web này có làm việc có tâm không đây?” Đây là 1 trong những yếu tố chính giúp chúng ta quyết định xem nên bỏ sang trang khác hay là vẫn tiếp tục dùng trang hiện tại. Hệ thống Điều hướng rõ ràng, được xây dựng cẩn thận và thấu đáo là 1 trong những cơ hội tốt nhất để chứng tỏ tiêu chuẩn của 1 trang web.
Các tập quán chung của Điều hướng trên web.
Các không gian vật lý như thành phố hay toà nhà (hoặc cả các không gian hiển thị thông tin như sách báo tạp chí) đều có hệ thống điều hướng riêng biệt, với các tập quán đã dc cải tiến theo thời gian như biển chỉ đường, số trang, và tiêu đề chương mục. Các tập quán này định hình rõ ràng nhận diện và vị trí của các yếu tố điều hướng, để người dùng biết là mình đang cần tìm cái gì, và khi cần tìm cái đó thì nhìn vào khu vực nào.
Đặt các yếu tố đó ở đúng chỗ giúp người dùng tìm được chúng nhanh hơn, đỡ mất sức hơn. Thiết kế các yếu tố đó theo 1 đúng kiểu giúp người dùng nhận ra chúng dễ dàng hơn.
Ví dụ, chúng ta quen với việc nhìn thấy biển tên đường ở các ngã tư, chúng ta sẽ thấy biển tên khi nhìn lên (thay vì nhìn xuống), và chúng ta quen với kiểu thiết kế tiêu chuẩn của biển tên đường (đọc theo chiều ngang, chữ trắng trên nền xanh, etc... )
Chúng ta cũng công nhận rằng tên của 1 toà nhà sẽ ở trên hoặc bên cạnh cửa chính toà nhà đó. Trong 1 siêu thị, ta sẽ mặc định rằng biển tên sẽ được bố trí ở đầu mỗi dãy hàng. Trong 1 cuốn tạp chí, ta biết chắc là trang mục lục nằm ở đâu đó trong mấy trang đầu tiên, và số trang sẽ nằm ở đâu đó ở phần lề trên hoặc dưới của mỗi trang - và mục lục sẽ bao gồm các tiêu đề bài viết, và số trang sẽ có số trang và tên bài viết trên mỗi trang.
Ta sẽ cảm thấy bực bội khó hiểu tới mức nào nếu 1 trong số những tập quán chung này bị làm sai (ví dụ như khi tạp chí không đặt số trang trong các trang dành riêng cho quảng cáo)
Mặc dù giao diện có thể khác nhau rất nhiều, nhưng đây là những tập quán điều hướng cơ bản trên 1 trang web.
Đừng có nhìn đểu nó, nhưng tôi thấy mâm nào cũng có mặt thằng này.
Các web designer dùng thuật ngữ “điều hướng đồng bộ" (hoặc điều hướng tổng) để mô tả 1 tập hợp các yếu tố đồ hoạ mang tính điều hướng có ở trên hầu hết các website.
Khi được xây dựng tốt, hệ thống điều hướng đồng bộ sẽ nói, trong 1 tông giọng bình tĩnh, nhẹ nhàng:
“ Hệ thống điều hướng ở đây. Có thể nó sẽ thay đổi 1 chút, phụ thuộc vào vị trí của bạn, nhưng nó sẽ mãi ở đây, và nó sẽ luôn hoạt động theo cách này"
Chỉ cần có hệ thống điều hướng xuất hiện 1 cách đồng bộ ở cùng 1 vị trí trong mọi trang phụ thôi cũng đủ để người dùng xác nhận rằng họ vẫn đang ở trên cái trang web đó - điều này quan trọng hơn bạn tưởng nhiều.
Và giữ cho giao diện của nó đồng bộ xuyên suốt trang web cũng có nghĩa là, nếu may mắn, người dùng sẽ chỉ cần làm quen với hệ thống điều hướng này 1 lần duy nhất.
Hệ thống điều hướng đồng bộ nên bao gồm đầy đủ 4 yếu tố này:
Tí nữa mình sẽ đi vào từng cái một. Nhưng trước tiên…
Nãy tôi có bảo là mọi-trang-web...
Tôi điêu đấy. Có 1 ngoại lệ với cái quy luật “mâm nào cũng có mặt”: Trang điền forms.
Trên các trang cần người dùng điền thông tin, hệ thống điều hướng đồng bộ đôi khi có thể là một sự xao nhãng không cần thiết. Ví dụ, khi người dùng đang thanh toán cho các đơn hàng của mình trên một trang web thương mại điện tử, bạn sẽ không muốn họ làm bất cứ điều gì ngoài việc điền form và thanh toán nhanh cho xong. Tương tự như khi người dùng đăng ký tạo tài khoản, theo dõi (subscribe), điền form feedback, hoặc tick chọn các tuỳ chọn cá nhân.