Saturday, May 05, 2007

Vấn đề trong cách trình bày thông tin

Khó thật. Chẳng là tớ đang có một "hợp đồng" nho nhỏ với một người bạn: thiết kế cho anh ta một trang web. Yêu cầu là trang web nhìn phải nhã nhặn, sang trọng mà đồng thời phải làm thế nào để trình bày thông tin một cách hiệu quả nhất cho người đọc (về điểm này thì anh này giống tớ cũng có nhận xét là các trang web Việt Nam trình bày thông tin khá khó tìm). Một trong những yêu cầu khó nhất trong project này là: trang web sẽ có nhiều phân mục và bài viết của các phân mục sẽ tất nhiên sẽ được trình bày trên trang chủ. Yêu cầu là làm thế nào để vừa có thể trình bày các phân mục trên trang chủ mà không tạo cảm giác "thiên vị". Một số phát thảo ban đầu…

Phương án 1: Cổ điển

Suy nghĩ đầu tiên xuất hiện trong đầu là bố cục trình bày phổ biến nhất của các website: một thanh biểu ngữ, một cột chứa thông tin để truy cập vào các phần của website, và phần chính là nội dung bài viết (xem hình). Đây cũng chính là bố cục hiện tại của nguoitapviet. Kiểu bố cục này phổ biến nhất cũng có lý do của nó: rất rõ ràng và rất "hiển nhiên" đối với người xem.

design1.jpg

Tuy nhiên, cách trình bày nội dung của phương án này chỉ thích hợp đối với cách trình bày nội dung theo thứ tự thời gian mà không cần biết bài viết trong phân mục nào - bài nào xuất hiện sau nhất sẽ lên đầu. Giả sử như bạn có nhiều phân mục, và có một phân mục nào đó bạn có nhiều thứ để viết hơn thì sẽ dẫn đến trường hợp là một lúc nào đó, trên trang chủ không xuất hiện bài nào của phân mục bạn ít viết hơn. Trang web của người bạn tớ là một trang web về học thuật. Tài liệu và bài viết không quan trọng lắm về thời gian đưa lên mà chủ yếu là làm sao để thể hiện được nội dung của các phần. Phương án này vì vậy xem như không thích hợp.

Phương án 2: Hộp

Từ những yêu cầu như trên, bố cục tiếp theo mà tớ nghĩ đến là kiểu mà tớ tạm gọi là "hộp". Cũng có thanh tiêu đề và cột thông tin như trong phương án 1, nhưng phần nội dung được chia ra làm nhiều hộp, mỗi hộp sẽ hiển thị nội dung của một phân mục (ví dụ như tiêu đề 5 bài mới nhất của phân mục đó).

design2.jpg

Tuy nhiên,  phương án này xem ra lại có nhiều khuyết điểm. Trước hết là phương án này đã "phá hoại" hoàn toàn cái ý tưởng ban đầu là "không phân biệt đối xử" giữa các phân mục. Theo cách thiết kế này, thứ tự nội dung đập vào mắt người dùng sẽ như phần minh họa ở trên. Ô thứ 2 sẽ đập vào mắt người đọc trước hết và sẽ được "ngầm hiểu" là quan trọng nhất. Tiếp đó theo "quán tính" của mắt người đọc sẽ là ô 3. Sau đó người đọc sẽ cuộn xuống dưới và sẽ đọc ô 4 trước, và đến ô 5.

Bố cục này còn có nhiều điểm yếu "chết người" khác. thử tưởng tượng nếu bạn có 5 phân mục (hoặc một số lẻ nào đó) thì cách trình bày này sẽ không cân đối. Tệ hơn, nếu bạn có 8 phân mục thì phân mục 5,6,7,8 sẽ hoàn toàn "biến mất" khi trang web mới hiện lên (ở dưới cùng, phải cuộn màn hình xuống mới thấy). Phương án 2 như vậy cũng đành phải bỏ.

Phương án 3: Hộp và Cột

Phương án 1 cho thấy bắt buộc phài dùng kiểu hộp để đáp ứng yêu cầu là trình bày thông tin theo phân mục. Phương án 2 lại cho thấy không thể trình bày các hộp này thành nhiều dòng. Từ đó tớ đi đến phương án 3, trình bày các hộp chỉ theo các cột như dưới đây:

design3.jpg

Việc trình bày phần nội dung thành nhiều cột dẫn đến việc phải làm thế nào để tách biệt phần thông tin website (vốn là một cột bên cạnh phần nội dung trong các kiểu bố cục trước). Tớ quyết định đưa nó vào một thanh nằm ngang, ngay bên dưới thanh tiêu đề. Các phân mục sau đó được trình bày làm nhiều cột ở dưới.

Cách bố trí này khá thuận tiện theo "cảm giác" của người đọc: đầu tiên họ xem thanh tiêu đề. Đọc xuống tiếp sẽ gặp ngay những thông tin tóm tắt về trang web. Xuống nữa là phần nội dung. Lần này khác với trường hợp ở phương án 2, việc bỏ đi cột thông tin khiến cho các cột khác xuất hiện đồng đều hơn. Người đọc sẽ không có xu hương đọc từ trái sang phải mà sẽ "rãi" mắt đều trên tất cả các cột. Tất nhiên, có thể các cột ở giữa sẽ thu hút hơn một chút, nhưng nhìn chung người đọc hoàn toàn không có cảm giác cột nào "quan trọng" hơn cột nào.

Nói vậy nhưng có lẽ bạn sẽ nhanh chóng nhận ra khuyết điểm của cách bố trí này. Cách bố trí này sẽ chỉ hiển thị tốt nếu bạn chỉ có tối đa 4 phân mục (4 cột). Nếu bạn có nhiều hơn 4 phân mục, lập tức bề rộng của các cột sẽ trở nên rất nhỏ và hoàn toàn không có khả năng truyền tải thông tin.

Tổng hợp từ 3 phương án

Trừ phương án 1 cho phép bạn hiển thị hình ảnh nay trong phần giới thiệu, cả 2 phương án còn lại không thích hợp cho điều này. Phương án 2 thậm chỉ chỉ nên hiển thị tiêu đề bài viết mà không có phần tóm tắt, vì nếu có phần tóm tắt vào sẽ dẫn đến trường hợp là ô này dài hơn ô kia - phá vỡ bố cục cân xứng. Trong phương án 3 thì các cột quá hẹp để có thể đưa bất kỳ hình ảnh nào vào. Có thể đưa tóm tắt sau tiêu đề trong phương án 3, nhưng tóm tắt phải ngắn (nếu dài quá cũng sẽ mất hiệu quả thẩm mỹ).

Tóm lại, cả 3 cách bố cục trên đều không thích hợp cho những yêu cầu của anh bạn này (ra đề khó quá :))

Giải pháp?

Tớ đã đi đến một bố cục mà tạm thời theo tớ là "dung hòa" được những khuyết điểm của cả 3 cách bố cục trên. Tất nhiên, như các bạn có thể đã đoán ra, giải pháp của tớ là một "tổng hợp" từ 3 bố cục trên - sử dụng điểm mạnh của cả 3 bố cục. Phải thừa nhận tớ cũng sẽ phải "thỏa hiệp" với anh bạn để bỏ bớt một số yêu cầu - nhưng nói chung chủ yếu là vì những yêu cầu đó trở nên không cần thiết trong thiết kế.

Đáng tiếc đây là một "hợp đồng" nhỏ, có "trả tiền" đàng hoàn, nên tớ hiện giờ chưa thể tiết lộ thiết kế cuối cùng của tớ. Hơn nữa cũng sẽ còn phải thảo luận nhiều trước khi đi đến quyết định cuối cùng. Tớ sẽ viết bài thảo luận tiếp sau khi hoàn tất dự án :)

Source: http://www.nguoitapviet.info/2005/05/18/144/

No comments: