CHƢƠNG 3 BIÊN TẬP GIAO DIỆN
3.2. Quy tắc thiết kế giao diện
Hầu hết các trang web cung cấp thông tin văn bản đang hội tụ trên một bố cục tƣơng đối phù hợp của phần đầu, thân và phần cuối, chuyển hƣớng nội bộ và các yếu tố nội dung hƣớng tới mục tiêu hữu ích cho ngƣời dùng, thƣờng ngƣời dùng tìm thấy sự quen thuộc dễdàng hơn để sử dụng và ghi nhớ, và nếu trang web đƣợc thiết kế với những mơ hình quen thuộc, sẽ nhanh chóng thích nghi và bắt đầu tập trung vào nội dung, tính năng, hoặc các sản phẩm hiển thị trên trag web.
Hình vẽ 3.8.Sơ đồ bố trí trang chuẩn của website
Không phải mọi trang bao gồm tất cả các yếu tố thể hiện trên hình vẽ. Khi thiết kế giao diện cho trang web, hãy nhớ rằng giao diện web lý tƣởng không bao giờ cạnh tranh với các nội dung trang cho sự chú ý của ngƣời dùng. Giao diện là khung, không phải là bức tranh.
57
(a) Tiêu đề trang
Ti u đề trang web truyền tải bản sắc trang web, cung cấp các liên kết điều hƣớng và thƣờng cung cấp hiển thị hộp tìm kiếm. Các ti u đề là nơi mà mọi ngƣời mong đợi để xem các chỉẫn và tuyên bố bản sắc riêng của trang web, đồ họa ti u đềvà văn bản là yếu tố quan trọng nhất trong việc đƣa ra một tập hợp các trang web cảm thấy giống nhƣ một "trang web" cá nhân chứ không phải là một tập hợp ngẫu nhiên của các tập tin.
Nghiên cứu sử dụng cho thấy đa sốngƣời dùng mong đợi rằng các khu vực trên bên trái của ti u đề trang sẽ có cả một chỉ thị giác của đich danh web (bạn là ai), cộng với một liên kết đến trang chủ của trang web. Ngƣời dùng cũng mong đợi các ti u đề có thể đóng một vai trị quan trọng trong việc định vị toàn cầu trên trang web. liên kết chuyển hƣớng quan trọng thƣờng đƣợc dàn trận theo chiều ngang trong phần đầu trang.
"Thƣ mục tab" là lý tƣởng khi trang web của bạn có tƣơng đối ít (thƣờng là 5-7 danh mục) loại chuyển hƣớng chính. Nếu có nhiều hơn bảy danh mục, hãy xem xét thả các ẩn dụ tab trong một tổ chức các liên kết văn bản. Khi thiết kế cẩn thận, các tab ti u đềcũng có thể xử lý chuyển hƣớng phức tạp.
Hình vẽ 3.9. Thiết kếti u đềhƣớng khác nhau và đánh dấu "bạn đang ởđây" Ngữnghĩa, danh sách ti u đề chuyển hƣớng phải luôn luôn đƣợc đánh dấu nhƣ danh sách HTML, thậm chí nếu những gì xuất hiện trên trang trông giống nhƣ một bộsƣu tập các đồ họa tab thƣ mục. xử lý ngữnghĩa này danh sách ti u đề có lợi thế mạnh mẽ cho khảnăng tiếp cận phổ cập và giúp làm rõ tổ chức trang web khi sử dụng công cụ tìm kiếm cho web. Thiết kế có thể sử dụng CSS (Cascading Style Sheets) vào danh sách kiểu liên kết điều hƣớng để sử dụng tƣơng tự các tab. Ví dụti u đề trang của Opera là tab tối giản nhƣng truyền đạt mọi chức năng ti u đề trang trọng trong một thiết kế nhỏ gọn
(b)Liên kết chuyển hƣớng cột trái hoặc phải
Theo hầu hết các nghiên cứu giao diện ngƣời dùng thì ngƣời dùng nhanh chóng thích ứng với chuyển hƣớng nội dung trong hai cột bên trái hoặc cột bên phải của trang web vì thế trang web chỉ phù hợp trong cách bố trí menu của bạn trên tất cả các trang. cột hƣớng trái là phổ biến hơn nhiều và do đó có một cột bên trái hoặc phải nên sử dụng vì hầu nhƣ ngƣời dùng quen thuộc với nó.
58
Hình vẽ 3.10. Chuyển hƣớng nộ bộ với các danh sách phân cấp
Cột điều hƣớng bên phải đƣợc thƣờng xuy n hơn chi phối bởi "liên kết liên quan đến" bên ngoài hoặc ở giữa dấu ngoặc hơn hoặc bằng quảng cáo. Ngƣời dùng mong đợi chi phối cột phải chứa quảng cáo, bất kỳđiều hƣớng bên phải cột liên kết ngƣời dùng nên thiết kế khác với quảng cáo.
(c) Con đƣờng điều hƣớng
Trong thập kỷ qua lý thuyết “con đƣờng mòn và mẫu bánh mì” đã nổi l n nhƣ là một công cụ chuyển hƣớng mạnh mẽ và dễ hiểu của các trang web. Tên có nguồn gốc từẩn dụ để lại vụn bánh mì tr n con đƣờng của bạn để tìm đƣờng trở lại nơi mà bạn đến từđâu. Trong thực tế một đƣờng mòn là một danh sách có thứ bậc đơn giản các liên kết web hiển thị cấu trúc của một trang web, thƣờng bắt đầu với trang chủ và kết thúc với chính trang chuyển hƣớng gần nhất so với vị trí hiện tại.
Hình vẽ 3.11. Ví dụ về những con đƣờng mịn trong hoặc ngay dƣới ti u đề trang
Mỗi bƣớc trong đƣờng điều hƣớng là một trang web liên kết có thể click, vì vậy có thể nhận biết dấu vết ngƣời dùng từ hình ảnh của vị trí hiện tại của họ trong trang web. Ngoài ƣu điểm giao diện ngƣời dùng, đƣờng điều hƣớng có khả
59
năng th m các từkhóa li n quan đến mỗi trang web, tăng khảnăng hiển thị tìm kiếm và cung cấp các từ khóa liên quan của một trang.