Hiểu cấu trúc thông tin của một trang web để thiết kế sản phẩm (web/hybrid) tốt hơn — Phần 2
Mời bạn xem lại giới thiệu ở Phần 1
Phần này mình sẽ giới thiệu tổng quan các mô hình cấu trúc thông tin của web. Hãy bắt đầu bằng mô hình đơn giản nhất: Tất cả trong một.
Dạng cấu trúc Tất cả trong một
Như tên gọi, toàn bộ thông tin của bạn sẽ nằm trọn ở trang chủ. Ngày nay thì chúng ta ít gặp các trang web làm dạng này. Thường là các trang web tĩnh sẽ sử dụng cấu trúc này.
Điểm lợi duy nhất của mô hình này đó là không tốn thời gian & công sức để bảo trì trang web, vì toàn bộ thông tin đều nằm toàn bộ ở một trang.
Dạng cấu trúc Tìm kiếm (Search)
Với mô hình này các bạn sẽ dễ dàng hình dung ra viêc thao tác bằng ô Tìm kiếm. Thực tế lý thuyết gọi là cấu trúc thông tin nhưng ở khía cạnh sử dụng, ô Search là một dạng của điều hướng (navigation) nội dung.
Do ô Tìm kiếm luôn được tích hợp vào một trang web hoặc 1 app như là một thứ gì đó hiển-nhiên-phải-có, về mặt Usability thì trải qua năm tháng tác dụng của ô Tìm kiếm này là để điều hướng nhiều hơn đóng vai trò của một mô hình Cấu trúc thông tin chính.
Nói một cách chính xác hơn thì: Ô Tìm kiếm luôn được tích hợp vào một phần của một Cấu trúc thông tin nào đó. Để dễ hiểu hơn bạn có thể liên tưởng đến một tòa nhà, trong tòa nhà có nhiều tầng, để đi lên được các tầng thì chúng ta có thang bộ và thang máy. Thang máy chính là ô Tìm kiếm mà chúng ta đang nói đến.
Bây giờ chúng ta sẽ nói thêm một chút về lợi ích của Search. Thông thường Search sẽ gồm dạng cơ bản và dạng nâng cao (như là auto suggest, live search). Với Search bạn sẽ dễ dàng nhảy đến nội dung mình cần mà không cần phải tốn quá nhiều bước duyệt nội dung của trang web.
Thiết kế tính năng Search thật tốt đòi hỏi phải hiểu biết về trang web và loại nội dung sẽ có trên sản phẩm của mình. Về lý thuyết nếu sản phẩm của chúng ta gồm nhiều loại nội dung phong phú, đa dạng (sinh ra do sự tương tác của nhiều người dùng với nhau) thì giá trị của Search càng được nâng cao.
Chính vì vậy mà tiêu đề của phần này mới đề cập đến nó là một dạng Cấu trúc thông tin.
Dạng cấu trúc phẳng (Flat)
Phẳng nghĩa là ngang hàng với nhau. Từ trang chủ chúng ta có thể truy cập các trang con khác, và các trang con này nằm ngang hàng về cấp độ, tức có thể truy cập lẫn nhau mà không bị chướng ngại nào hết.
Mô hình này rất phổ biến ở nhiều trang web đơn giản, cụ thể ở các trang như Trang chủ, Giới thiệu, Thông tin, Sản Phẩm, Dịch vụ.
Dạng cấu trúc chỉ mục (Index)
Về cơ bản đây giống như một mục lục của một cuốn sách. Mở trang đầu cuốn sách ra bạn sẽ thấy ngay mục lục của nó, kèm theo là số trang cụ thể để có thể nhanh chóng tìm đến nội dung mình muốn đọc.
Ở web thì thời kỳ đầu hay có các kiểu như là một trang index chứa các folder của trang web, hoặc chứa danh sách thành viên & sắp xếp theo thứ tự ABC. Một ví dụ khác điển hình hơn đó là Danh bạ điện thoại hoặc các sách dạng Yellow Pages, Directory.
Đi từ thực tế lên web thì chúng ta sẽ bắt gặp một số trang bán sản phẩm với nội dung vừa phải (từ nhiều đến khá nhiều loại nội dung) và các loại nội dung này phải được sắp xếp về mặt hiển thị thế nào để có thể giúp người dùng dễ dàng lướt và chọn ngay nội dung mình cần.
Vậy thì có một câu hỏi đặt ra ở đây: So với mô hình Search ở trên thì cái nào tối ưu hơn?
Thực tế nếu tính năng Search được thiết kế tốt, nó sẽ nhanh hơn so với việc duyệt nội dung theo Index, nhưng rõ ràng duyệt nội dung theo dạng Index sẽ là một trải nghiệm tốt khi trang web có khá nhiều loại nội dung. Khi bạn có một số lượng nội dung đồ sộ thì việc kết hợp Search & Index là điều bắt buộc. Hai mô hình này được thiết kế để hỗ trợ lẫn nhau.
Dạng trục bánh xe và nan hoa
Nôm na nó giống trục đồ thị x-y trong toán học vậy. Ở tọa độ Zero sẽ là Trang chủ. Từ Trang chủ chúng ta sẽ duyệt nội dung theo chiều dọc & chiều ngang khi cần thiết.
Ví dụ tiêu biểu chính là…Ứng dụng email mà bạn sử dụng hàng ngày. Bạn có thể đến Outbox, Spam, Draft và các mục khác, và cuối cùng quay về Inbox bằng nhiều cách. Những trải nghiệm cần thiết trong quá trình di chuyển theo cấu trúc này bao gồm: đọc email, trả lời email, xóa email, thêm một contact, vân vân…
Mô hình này còn có thể được áp dụng một cách phức tạp hơn ở các trang đặt nặng về Transaction. Hãy tưởng tượng trục X-Y của chúng ta ở trên kia là cái sườn của một cánh hoa 4 cánh thì thế nào?
Dạng cấu trúc theo thứ tự thứ bậc
Theo thứ bậc, cấp bậc nghĩa là: Bạn chỉ có thể đi từ trang cha xuống trang con (hoặc trang chính xuống trang phụ, mình tránh dùng vì dễ hiểu nhầm đến trang chủ).
Áp dụng mô hình này đòi hỏi thông tin bạn có mang tính chất hết sức đặc thù. Ví dụ bạn có nhiều cửa hàng thời trang trên thế giới, mỗi quốc gia bạn lại có vài cửa hàng. Thế thì làm sao thiết kế trang web tối ưu?
Hãy tham khảo trang web của zara, nhìn bề ngoài thì UX hơi quái, nhưng thật ra cấu trúc thông tin rất chuẩn.
Thêm một ví dụ về chat app hoặc các hệ thống Blog, báo tin, một tab Message cần được định nghĩa các mối quan hệ chặt chẽ với Threads (Conversations).
Khi thiết kế và làm sản phẩm theo mô hình này thì có nhiều yếu tố phức tạp hơn việc thiết kế các app thông thường vì nó liên quan đến nhu cầu (trước, trong khi sử dụng trang web và sau khi sử dụng) của người tiêu dùng.
Ví dụ các trang shop online về đồ tiêu dùng của phương Tây thì thường đặt các món tương tự nhau ở cùng 1 khu vực, thay vì chèn vào các category tương ứng.
Dạng cấu trúc đa chiều
Dạng này thì cái tên cũng nói lên ý nghĩa: Có nhiều cách để truy cập vào cùng 1 nội dung. Nói cách khác nó là sự kết hợp của một vài mô hình kể trên: Flat, Thứ bậc, Search
Ví dụ kinh điển: Trang web của Amazon. Mỗi một dạng nội dung của Amazon khi đưa ra cho người dùng đều tùy thuộc vào các hoàn cảnh khác nhau.
Thực tế chúng ta có thể thiết kế một sản phẩm web theo cấu trúc này, vấn đề lớn nhất đó là về mặt giải pháp kỹ thuật nào có thể được triển khai cho hình thái cao nhất này?
