Biển chỉ đường (signposts): đặc điểm trên giao diện giúp người dùng xác định vùng phụ cận. Ví dụ: tabs, breadcrumbs, page and window titles. Tìm đường (wayfinding): Sử dụng các nhãn chính xác và hợp lý. Bố trí nội dung và chức năng ở các vị trí hợp lý. Bản đồ. | Chương 3: Định Hướng Lê Quý Lộc Khoa Công Nghệ Thông Tin Đại học Bách Khoa - ĐHĐN Luôn Được Định Hướng Biển chỉ đường (signposts): đặc điểm trên giao diện giúp người dùng xác định vùng phụ cận Ví dụ: tabs, breadcrumbs, page and window titles Tìm đường (wayfinding) Sử dụng các nhãn chính xác và hợp lý Bố trí nội dung và chức năng ở các vị trí hợp lý Bản đồ Chi Phí Định Hướng Bảo đảm chi phí định hướng tối thiểu Ví dụ chi phí định hướng quá lớn Chi Phí Định Hướng Chi Phí Định Hướng Chi Phí Định Hướng Các Mẫu Thiết Kế Các cấu trúc định hướng cơ bản Clear Entry Points Global Navigation Hub and Spoke Pyramid Modal Panel Biển chỉ đường (signposts) Sequence Map Breadcrumbs Annotated Scrollbar Color-Coded Sections Escape Hatch Clear Entry Points Mô tả: Chỉ đặt một vài tác vụ chính trên giao diện Sử dụng: Đa số người dùng là người dùng không thường xuyên, ứng dụng định hướng vào chỉ một số ít tác vụ Global Navigation Mô tả: Sử dụng một phần nhỏ của page (hoặc window), để đặt các links hay . | Chương 3: Định Hướng Lê Quý Lộc Khoa Công Nghệ Thông Tin Đại học Bách Khoa - ĐHĐN Luôn Được Định Hướng Biển chỉ đường (signposts): đặc điểm trên giao diện giúp người dùng xác định vùng phụ cận Ví dụ: tabs, breadcrumbs, page and window titles Tìm đường (wayfinding) Sử dụng các nhãn chính xác và hợp lý Bố trí nội dung và chức năng ở các vị trí hợp lý Bản đồ Chi Phí Định Hướng Bảo đảm chi phí định hướng tối thiểu Ví dụ chi phí định hướng quá lớn Chi Phí Định Hướng Chi Phí Định Hướng Chi Phí Định Hướng Các Mẫu Thiết Kế Các cấu trúc định hướng cơ bản Clear Entry Points Global Navigation Hub and Spoke Pyramid Modal Panel Biển chỉ đường (signposts) Sequence Map Breadcrumbs Annotated Scrollbar Color-Coded Sections Escape Hatch Clear Entry Points Mô tả: Chỉ đặt một vài tác vụ chính trên giao diện Sử dụng: Đa số người dùng là người dùng không thường xuyên, ứng dụng định hướng vào chỉ một số ít tác vụ Global Navigation Mô tả: Sử dụng một phần nhỏ của page (hoặc window), để đặt các links hay buttons đến các thành phần quan trọng của website hay ứng dụng Sử dụng: Xây dựng các ứng dụng/website có nhiều chức năng/nội dung Hub and Spoke Mô tả: Đặt các button/link đến các chức năng khác trên giao diện, mỗi chức năng chỉ có một đầu vào và một đầu ra Sử dụng: Khi ứng dụng có nhiều chức năng tách biệt Pyramid Mô tả: Liên kết một chuỗi các page/window bằng các link/button back/next Sử dụng: website/ứng dụng có các page/window mà người sử dụng muốn xem các page/window theo thứ tự: slideshow, ebook, wizard Modal Panel Mô tả: hiển thị chỉ một page/window duy nhất (không có các tùy chọn định hướng khác) Sử dụng: khi ứng dụng đến một trạng thái mà không thể tiếp tục được, nếu không có sự giúp đỡ của người dùng Sequence Map Mô tả: trên mỗi page/window hiển thị trình tự của của các page trong chuỗi tiến trình, và đánh dấu page/window hiện tại Sử dụng: website/ứng dụng có các page/window mà người sử dụng muốn xem các page/window theo thứ tự: slideshow, ebook, wizard Breadcrumbs Mô tả: hiển thị bản đồ của tất cả các page/window cha, đến page/window hiện tại Sử dụng: ứng dụng có phân cấp kiểu cây, và ít có sự liên quan giữa các page/window Annotated Scrollbar Mô tả: sử dụng ghi chú trên scrollbar để chỉ ra vị trí hiện tại của user trong page/window Sử dụng: xây dựng ứng dụng có không gian cần phải scroll lớn Annotated Scrollbar Color-Coded Sections Mô tả: sử dụng các màu sắc khác nhau để xác định các vùng chức năng khác nhau của giao diện Sử dụng: giao diện của website/ứng dụng lớn có nhiều vùng và thành phần chức năng khác nhau Escape Hatch Mô tả: trên page/window giới hạn các tùy chọn định hướng, đặt một page/window trên page/window giúp user thoát ra khỏi Sử dụng: modal panel, wizard
