a. Định nghĩa
Scrollbar thực hiện hai nhiệm vụ là sơ đồ nội dung và chỉ thị "bạn đang ở đây" [12].
b. Các tính huống áp dụng
Khi xây dựng một ứng dụng tài liệu hoặc bất kì ứng dụng nào có không gian ảo lớn như tài liệu, danh sách, hình ảnh. Người sử dụng sẽ nhìn lướt qua ứng dụng này để tìm các dữ liệu hoặc ghi chú như số trang hoặc mốc giới hạn. Họ có thể gặp khó khăn trong việc đoán ra họ đang ở đâu hoặc phải đến đâu. Do đó cần sử dụng mẫu Annotated Scrollbar.
c. Tại sao
Mặc dù người sử dụng ở trong giới hạn không gian của UI khi họ lướt qua các nội dung, các bảng chỉ dẫn. Nhưng khi lướt nhanh, họ thấy các tài liệu rất khó đọc, thậm chí nếu dừng lại một chút thì họ thấy phần tài liệu mà họ đọc có thể chẳng liên quan gì cả. Bởi vậy những chỉ định về vị trí là rất cần thiết.
Ta cần một scrollbar vì đó là nơi mà người sử dụng tập trung vào. Khi đặt bảng chỉ dẫn, người sử dụng sẽ nhìn thấy và sử dụng chúng khi họ lướt thay vì nhìn vào cả hai bên màn hình cùng lúc. Bạn có thể đặt bảng chỉ dẫn gắn với scrollbar mà vẫn đạt được hiệu quả, đặt càng gần càng tốt.
Scrollbar thể hiện các chỉ thị ở đường đi của nó, ta thấy giống như một chiều tổng thể và chi tiết. Đường đi là tổng thể, cửa sổ scrollbar là chi tiết.
d. Bằng cách nào
Đặt một chỉ thị vị trí lên trên hoặc gần scrollbar, cả chỉ thị tĩnh hoặc động. Chỉ thị tĩnh là cái không thay đổi, giống như các khối màu trong đường scrollbar.
Chỉ thị động thay đổi khi người sử dụng lướt, chúng thường được sử dụng như tooltips. Khi vị trí cuốn thay đổi, tooltip từ chỗ gần bên thanh cuốn chuyển sang thể hiện thông tin về nội dung ở đó. Điều này sẽ thay đổi tuỳ vào bản chất của ứng dụng. Hình 2-10, Word đặt số trang và tiêu đề trong các tooltips.
Trong mỗi tình huống bạn cần biết người sử dụng đang tìm kiếm gì và từ đó tìm ra những chú thích cần thiết. Cấu trúc nội dung là một điểm bắt đầu tốt. Nếu nội dung bằng code thì cần nêu tên của chức năng hoặc phương pháp hiện tại. Nếu là trang số thì cần chỉ số hạng,…Nếu người sử dụng tìm kiếm mối liên hệ thì chú thích cần phải thể hiện về điều đó.
2.2.1.9 Color-Coded Sections