𝗗𝗲𝘀𝗶𝗴𝗻 𝗞𝗲𝘆𝗯𝗼𝗮𝗿𝗱 𝗡𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗙𝗼𝗿 𝗗𝗮𝘁𝗮 𝗚𝗿𝗶𝗱𝘀

Người dùng chuyên nghiệp (power users) muốn làm việc mà không cần dùng đến chuột.

Một data grid được thiết kế tốt cho phép họ điều hướng, chỉnh sửa và thực hiện thao tác chỉ bằng bàn phím. Những người dùng này làm việc nhanh hơn gấp hai đến ba lần so với người dùng chuột.

Nếu lưới dữ liệu của bạn bắt buộc phải click chuột cho mọi thao tác, người dùng chuyên nghiệp sẽ ghét công cụ của bạn.

Cách khắc phục rất đơn giản. Nó chỉ cần khoảng một trăm dòng mã và những lựa chọn thiết kế thông minh.

Hãy tuân theo các quy tắc này để có một grid chuyên nghiệp:

• Tab: Sử dụng phím này để vào hoặc thoát khỏi grid. Khi đã ở bên trong, Tab nên dùng để di chuyển giữa các nút hoặc ô nhập liệu trong cùng một hàng. Đừng dùng Tab để di chuyển giữa các ô (cells).

• Phím mũi tên: Sử dụng để di chuyển giữa các ô. Lên và xuống để di chuyển giữa các hàng. Trái và phải để di chuyển giữa các cột.

• Enter: Sử dụng để kích hoạt hành động chính của một hàng, chẳng hạn như mở chế độ xem chi tiết.

• Space: Sử dụng để chọn hoặc bỏ chọn một hàng.

• Escape: Sử dụng để hủy chỉnh sửa hoặc đóng menu.

• Home và End: Sử dụng để nhảy nhanh đến điểm đầu hoặc điểm cuối của một hàng.

Sai lầm lớn nhất là sử dụng phím Tab để di chuyển giữa các ô. Trong một grid lớn, việc này quá chậm. Nếu một grid có 7 cột và 20 hàng hiển thị, người dùng phải nhấn Tab 140 lần mới hết một màn hình. Các phím mũi tên sẽ giải quyết vấn đề này. Chỉ cần một lần nhấn là bạn có thể chuyển sang hàng tiếp theo.

Đối với việc chỉnh sửa trực tiếp (inline editing), hãy tuân theo mô hình bảng tính (spreadsheet pattern):

  • Nhấn Enter để bắt đầu chỉnh sửa một ô.
  • Nhấn Enter lần nữa để lưu thay đổi.
  • Nhấn Escape để hủy chỉnh sửa.
  • Nhấn Tab để lưu và di chuyển đến ô có thể chỉnh sửa tiếp theo.

Để giúp người dùng tìm thấy các phím tắt này, hãy sử dụng các mô hình sau:

  • Thêm phím tắt "?" để mở menu trợ giúp.
  • Hiển thị phím tắt trong tooltip trên các nút.
  • Sử dụng một mẹo hướng dẫn (onboarding tip) một lần duy nhất.

Điều hướng bàn phím tốt là một nhân tố nhân bội năng suất. Đó là một khoản đầu tư nhỏ để đổi lấy sự gia tăng vượt bậc về tốc độ của người dùng.

Nguồn: https://dev.to/137foundry/how-to-design-keyboard-navigation-for-a-data-grid-so-power-users-stop-reaching-for-the-mouse-mh4