My OperaNguyên tắc thiết kế Thanh định hướng (Navigation)
Friday, November 23, 2007 1:23:12 PM
Nguyên tắc thiết kế Thanh định hướng (Navigation)
Nguyên tắc này không chỉ áp dụng cho những cá nhân làm thiết kế Web, nó bao hàm giải pháp cho người sử dụng Web site tìm kiếm thông tin dễ dàng hơn, sử dụng đơn giản hơn, đặc biệt với các trang Thương mại điện tử việc áp dụng Nguyên tắc thiết kế này giúp Khách hàng tìm kiếm mặt hàng nhanh chóng và dễ dàng.
1. Cho tôi biết tôi đang ở đâu mọi lúc
Thật khó khăn khi khi người sử dụng vào một web với khối lượng thông tin khổng lồ được chia ra nhiều hạng mục khác nhau mà không có thông báo họ đang đứng ở đâu.
Việc thông báo cũng nên được phân cấp theo cấu trúc nội dung của web site. Ví dụ:
Bạn nên đính kèm liên kết vào từng cấp độ trong mục định hướng. Điều này giúp người đọc chuyển giữa các mục của nội dung đơn giản hơn.
Với các nút Tab bạn nên có sự thay đổi về màu sắc, chữ, hiệu ứng,... đối với Tab đại diện cho một mục nào đó bạn đang truy cập.
Ví dụ: thanh định hướng của Apple, giao diện mới
2. Phân biệt siêu liên kết với nội dung một cách rõ ràng
Tách rời định hướng khỏi nội dung bao gồm các kỹ thuật nhóm, kiểu thiết kế, cách về mặt vật lý.
Khi siêu liên kết nằm trong nội dung bạn nên sử dụng kiểu thiết kế khác biệt. Theo quy ước màu xanh da trời đậm, có gạch chân áp dụng với tính năng di con trỏ qua liên kết,
Đây không phải kết quả nghiên cứu khoa học mà là thói quen sử dụng của các thiết kế viên đã có từ hàng chục năm nay và tới giờ trở thành quy ước. Bạn nên giữ màu liên kết là xanh da trời trên nền xám hoặc trắng, nó có độ tương phản cao và dấu hiệu an toàn, giúp người đọc dễ tìm kiếm hơn.
Ví dụ: www.yahoo.com.vn, siêu liên kết đã được tuỳ biến theo tiêu chuẩn của Yahoo. Trên trình duyệt Firefox 2.0.0.4 siêu liên kết chưa hoạt động là màu xanh dương, in đậm
3. Giúp người xem biết có thể đi tới đâu từ đây
Có nhiều kỹ thuật giúp người đọc có thể tính toán, xác định việc di chuyển đến nội dung họ cần nhanh nhất, tại đây tôi đề xuất 3 kỹ thuật cơ bản:
Cấu trúc cấp bậc như mục 1
Cấu trúc ngang bậc chẳng hạn như hình sau:
Kết hợp cả 2 cấu trúc, ví dụ như trang của Apple (giao diện cũ) hoặc iGURU
4. Giúp người xem biết họ đã đi qua đâu
Với siêu liên kết, HTML đã làm việc rất tốt. Màu sắc của visited link và active link có sự khác biệt rõ rệt về màu sắc. Nếu người thiết kế thay đổi màu sắc của siêu liên kết đã xem và chưa xem thì phải sử dụng 2 màu sắc khác biệt nhau, tuy nhiên phải phù hợp với thiết kế chung của hệ thống.
Với Yahoo, người xem biết họ đã đi qua link nào khi link đó chuyển sang màu xanh dương nhạt
5. Giúp người xem biết họ làm gì để đi tới đâu
Sau khi bạn thiết kế xong ý tưởng thanh định hướng cũng là lúc bạn tính đến việc làm thế nào để người sử dụng biết tới đâu để tìm thanh định hướng.
Mắt người có thói quen nhìn từ trái --> phải, từ trên xuống dưới, ưu tiên quan sát vùng kế cận hơn di chuyển ra xa (Xem bài tính thu hút của các vùng Web, cùng tác giả). Chính vì vậy việc bố trí thanh định hướng ở đâu ảnh hưởng rất nhiều đến thời gian khách tìm kiếm nội dung.
Ví dụ: Định hướng chính (top menu/top navigation/primary nav) thường nằm trên cùng trang Web, định hướng thứ cấp (main menu/ sidebar/ secondary nav) thường nằm bên tay trái trang Web.
Định hướng tìm các trang khác theo số thứ tự, thường nằm chân trang, ngay dưới bài viết cuối cùng.
6. Giúp người xem biết nhấn vào đâu thì được gì
Mục tiêu của một liên kết phải rõ ràng. Ví dụ liên kết phải nói cho khách biết.
* Họ sẽ được gì
* Nơi nào họ sẽ đến
* Điều gì sẽ xảy ra khi họ nhấn vào
Điều này có thể sử dụng cấu trúc nội dung, cách viết siêu liên kết, màu sắc, hiệu ứng,... để thể hiện cho người đọc biết.
******
Trong bài tiếp theo tôi sẽ trình bày về chủ đề: Thanh định hướng nên đặt tại đâu.
Sally
Nguyên tắc này không chỉ áp dụng cho những cá nhân làm thiết kế Web, nó bao hàm giải pháp cho người sử dụng Web site tìm kiếm thông tin dễ dàng hơn, sử dụng đơn giản hơn, đặc biệt với các trang Thương mại điện tử việc áp dụng Nguyên tắc thiết kế này giúp Khách hàng tìm kiếm mặt hàng nhanh chóng và dễ dàng.
1. Cho tôi biết tôi đang ở đâu mọi lúc
Thật khó khăn khi khi người sử dụng vào một web với khối lượng thông tin khổng lồ được chia ra nhiều hạng mục khác nhau mà không có thông báo họ đang đứng ở đâu.
Việc thông báo cũng nên được phân cấp theo cấu trúc nội dung của web site. Ví dụ:
Bạn nên đính kèm liên kết vào từng cấp độ trong mục định hướng. Điều này giúp người đọc chuyển giữa các mục của nội dung đơn giản hơn.
Với các nút Tab bạn nên có sự thay đổi về màu sắc, chữ, hiệu ứng,... đối với Tab đại diện cho một mục nào đó bạn đang truy cập.
Ví dụ: thanh định hướng của Apple, giao diện mới
2. Phân biệt siêu liên kết với nội dung một cách rõ ràng
Tách rời định hướng khỏi nội dung bao gồm các kỹ thuật nhóm, kiểu thiết kế, cách về mặt vật lý.
Khi siêu liên kết nằm trong nội dung bạn nên sử dụng kiểu thiết kế khác biệt. Theo quy ước màu xanh da trời đậm, có gạch chân áp dụng với tính năng di con trỏ qua liên kết,
Đây không phải kết quả nghiên cứu khoa học mà là thói quen sử dụng của các thiết kế viên đã có từ hàng chục năm nay và tới giờ trở thành quy ước. Bạn nên giữ màu liên kết là xanh da trời trên nền xám hoặc trắng, nó có độ tương phản cao và dấu hiệu an toàn, giúp người đọc dễ tìm kiếm hơn.
Ví dụ: www.yahoo.com.vn, siêu liên kết đã được tuỳ biến theo tiêu chuẩn của Yahoo. Trên trình duyệt Firefox 2.0.0.4 siêu liên kết chưa hoạt động là màu xanh dương, in đậm
3. Giúp người xem biết có thể đi tới đâu từ đây
Có nhiều kỹ thuật giúp người đọc có thể tính toán, xác định việc di chuyển đến nội dung họ cần nhanh nhất, tại đây tôi đề xuất 3 kỹ thuật cơ bản:
Cấu trúc cấp bậc như mục 1
Cấu trúc ngang bậc chẳng hạn như hình sau:
Kết hợp cả 2 cấu trúc, ví dụ như trang của Apple (giao diện cũ) hoặc iGURU
4. Giúp người xem biết họ đã đi qua đâu
Với siêu liên kết, HTML đã làm việc rất tốt. Màu sắc của visited link và active link có sự khác biệt rõ rệt về màu sắc. Nếu người thiết kế thay đổi màu sắc của siêu liên kết đã xem và chưa xem thì phải sử dụng 2 màu sắc khác biệt nhau, tuy nhiên phải phù hợp với thiết kế chung của hệ thống.
Với Yahoo, người xem biết họ đã đi qua link nào khi link đó chuyển sang màu xanh dương nhạt
5. Giúp người xem biết họ làm gì để đi tới đâu
Sau khi bạn thiết kế xong ý tưởng thanh định hướng cũng là lúc bạn tính đến việc làm thế nào để người sử dụng biết tới đâu để tìm thanh định hướng.
Mắt người có thói quen nhìn từ trái --> phải, từ trên xuống dưới, ưu tiên quan sát vùng kế cận hơn di chuyển ra xa (Xem bài tính thu hút của các vùng Web, cùng tác giả). Chính vì vậy việc bố trí thanh định hướng ở đâu ảnh hưởng rất nhiều đến thời gian khách tìm kiếm nội dung.
Ví dụ: Định hướng chính (top menu/top navigation/primary nav) thường nằm trên cùng trang Web, định hướng thứ cấp (main menu/ sidebar/ secondary nav) thường nằm bên tay trái trang Web.
Định hướng tìm các trang khác theo số thứ tự, thường nằm chân trang, ngay dưới bài viết cuối cùng.
6. Giúp người xem biết nhấn vào đâu thì được gì
Mục tiêu của một liên kết phải rõ ràng. Ví dụ liên kết phải nói cho khách biết.
* Họ sẽ được gì
* Nơi nào họ sẽ đến
* Điều gì sẽ xảy ra khi họ nhấn vào
Điều này có thể sử dụng cấu trúc nội dung, cách viết siêu liên kết, màu sắc, hiệu ứng,... để thể hiện cho người đọc biết.
******
Trong bài tiếp theo tôi sẽ trình bày về chủ đề: Thanh định hướng nên đặt tại đâu.
Sally
(0%)
