Điều hướng bàn phím: tại sao nó quan trọng ngoài khả năng tiếp cận

Phím tắt cho điều hướng ecommerce: những phím tắt nào thực sự được sử dụng

Phím / để tìm kiếm, G-H để về trang chủ—nghiên cứu về những phím tắt nào cải thiện UX ecommerce mà không làm nhầm lẫn người dùng.

Bạn đang tìm mua giày chạy bộ. Bạn vừa vào trang sản phẩm. Bạn muốn tìm kiếm một thương hiệu khác. Vì vậy bạn nhấn / (dấu gạch chéo). Thanh tìm kiếm được kích hoạt ngay lập tức—không chuột, không tab, chỉ gõ và tiếp tục.

Đây là cách những người dùng nâng cao mua sắm. Và khi một cửa hàng không hỗ trợ những phím tắt mà họ mong đợi, họ nhận ra điều đó. Không phải theo kiểu “nộp khiếu nại”, mà theo kiểu “trang web này cảm giác chậm”. Họ chuyển sang nơi khác.

Phím tắt bàn phím cho điều hướng không phải là ý tưởng mới. Gmail đã phổ biến chúng vào năm 2004. GitHub, Reddit, Twitter, YouTube và Amazon đều sử dụng chúng. Nhưng hầu hết các cửa hàng thương mại điện tử không—dù rằng việc triển khai chỉ mất ít hơn 100 dòng JavaScript.

Câu hỏi không phải là liệu bạn có nên thêm phím tắt bàn phím hay không. Đó là những phím tắt nào quan trọng, và cách triển khai chúng mà không làm nhầm lẫn người dùng bình thường.

Đọc nhanh

Dấu gạch chéo (/) để tìm kiếm là phím tắt bàn phím được công nhận rộng rãi nhất, được hỗ trợ bởi GitHub, Reddit, YouTube và Twitter
Người dùng nâng cao hoàn thành các tác vụ thương mại điện tử nhanh gấp 3,7 lần với phím tắt bàn phím, giảm ma sát ở mọi giai đoạn
Chỉ triển khai những phím tắt phù hợp với kỳ vọng của người dùng—tạo ra các phím tắt tùy chỉnh gây nhầm lẫn, không tăng hiệu quả
Phím tắt phải có thể khám phá được (tooltip hoặc bảng điều khiển trợ giúp hiển thị) và không được xung đột với phím tắt của trình duyệt/OS
G+H (về nhà), G+C (đến giỏ hàng) và ? (hiển thị trợ giúp) đang nổi lên như các mẫu tiêu chuẩn trên các nền tảng

Lý do sử dụng phím tắt bàn phím

Hầu hết các chủ cửa hàng cho rằng phím tắt bàn phím là một tính năng hẻo lánh—thứ gì đó chỉ quan trọng đối với các nhà phát triển hoặc người dùng tập trung vào khả năng tiếp cận. Nhưng nghiên cứu cho thấy tác động rộng hơn.

Nghiên cứu của Nielsen Norman Group về hiệu quả bàn phím phát hiện ra rằng người dùng có kinh nghiệm hoàn thành các tác vụ nhanh gấp 3,7 lần khi phím tắt bàn phím có sẵn. Mức tăng tốc độ không chỉ đến từ chính những phím tắt—nó đến từ việc loại bỏ chi phí nhận thức về việc chuyển đổi giữa bàn phím và chuột.

Mỗi khi người dùng di chuyển tay từ bàn phím sang chuột, họ trải nghiệm “dư lượng chú ý”. Họ phải định hướng lại: con trỏ chuột ở đâu? Tôi cần nhấp vào nút nào? Việc chuyển đổi ngữ cảnh này mất 0,8-1,2 giây và tăng tỷ lệ lỗi lên 23%.

Phím tắt bàn phím giữ người dùng trong trạng thái lưu lượng. Gõ → phím tắt → gõ → phím tắt. Không di chuyển tay, không tìm kiếm trực quan các mục có thể nhấp, không gián đoạn.

Ai sử dụng phím tắt bàn phím?

Người dùng chính rơi vào ba nhóm:

Những người mua sắm thế lực: Khách hàng quay lại biết chính xác họ muốn gì. Họ tìm kiếm, lọc, thêm vào giỏ hàng và thanh toán càng nhanh càng tốt. Đây thường là những khách hàng có giá trị cao nhất của bạn—những người mua sỉ, khách hàng đăng ký, những người mua lặp lại trung thành.

Người dùng chuyên nghiệp: Những người mua sắm như một phần của công việc của họ—những người quản lý mua hàng, nhà lên kế hoạch sự kiện, nhà thiết kế tìm nguồn vật liệu. Họ xem thương mại điện tử như một công cụ năng suất, không phải một hoạt động giải trí.

Người dùng ưu tiên bàn phím: Những người có khuyết tật vận động, RSI hoặc các tình trạng khác làm cho việc sử dụng chuột khó khăn hoặc không thể. Đối với họ, phím tắt không phải là tốc độ—chúng là khả năng sử dụng.

Cùng nhau, những nhóm này đại diện cho 8-15% lưu lượng truy cập thương mại điện tử nhưng chiếm 25-40% doanh thu (khách hàng quay lại thiên về giá trị suốt đời cao hơn). Hỗ trợ các mẫu tương tác ưu tiên của họ có ROI có thể đo lường được.

Những phím tắt tiêu chuẩn: Điều gì mà người dùng mong đợi

Chìa khóa để sử dụng phím tắt bàn phím thành công là khả năng dự đoán. Người dùng không muốn học một hệ thống phím tắt mới cho mọi trang web họ truy cập. Họ muốn những phím tắt hoạt động giống nhau ở mọi nơi.

May mắn thay, một bộ tiêu chuẩn đã xuất hiện trên các nền tảng chính. Dưới đây là những phím tắt quan trọng nhất cho thương mại điện tử:

1. Dấu gạch chéo (/) để tìm kiếm

Đây là phím tắt quan trọng duy nhất. Dấu gạch chéo kích hoạt thanh tìm kiếm, di chuyển tiêu điểm trực tiếp đến trường nhập liệu.

Nơi nó được sử dụng:

GitHub: nhấn / ở bất cứ đâu để tìm kiếm mã
Reddit: nhấn / để tìm kiếm bài viết
YouTube: nhấn / để tìm kiếm video
Twitter: nhấn / để tìm kiếm tweet
Slack: nhấn Cmd+K hoặc / để tìm kiếm tin nhắn

Tại sao nó hoạt động: Dấu gạch chéo rất dễ tiếp cận (không cần phím bổ trợ), trực quan biểu thị tìm kiếm (trông giống như một kính lúp nghiêng) và không xung đột với gõ trong các trường văn bản (hầu hết các trường sẽ bắt các sự kiện phím và ngăn các phím tắt kích hoạt).

Triển khai:

document.addEventListener('keydown', function(e) {
  // Chỉ kích hoạt nếu người dùng không ở trong trường nhập liệu
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  
  if (e.key === '/') {
    e.preventDefault(); // Ngăn "/" được nhập vào thanh tìm kiếm
    const searchInput = document.querySelector('#search-input');
    if (searchInput) {
      searchInput.focus();
    }
  }
});

2. G+H cho “Về nhà”

Gmail đã phổ biến mẫu “G key + destination key”. Nhấn G, rồi H để về nhà. Nhấn G, rồi I để vào hộp thư. Mẫu hai phím này tránh xung đột với các phím tắt một phím có thể kích hoạt vô tình.

Đối với thương mại điện tử, những phím tắt G hữu ích nhất là:

G+H: Về trang chủ
G+C: Đến giỏ hàng
G+S: Đến cửa hàng/bộ sưu tập
G+O: Đến đơn hàng/tài khoản

Triển khai:

let gKeyPressed = false;

document.addEventListener('keydown', function(e) {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  
  if (e.key === 'g') {
    gKeyPressed = true;
    setTimeout(() => { gKeyPressed = false; }, 1000); // Reset sau 1 giây
  }
  
  if (gKeyPressed) {
    switch(e.key) {
      case 'h':
        window.location.href = '/';
        break;
      case 'c':
        window.location.href = '/cart';
        break;
      case 's':
        window.location.href = '/collections/all';
        break;
      case 'o':
        window.location.href = '/account';
        break;
    }
  }
});

3. Dấu hỏi (?) để tìm kiếm trợ giúp

Nhấn ? (Shift+/) để hiển thị bảng điều khiển trợ giúp phím tắt bàn phím liệt kê tất cả các phím tắt có sẵn. Điều này làm cho phím tắt có thể khám phá được—người dùng không cần phải đoán hoặc tìm kiếm tài liệu.

Nơi nó được sử dụng:

GitHub
Gmail
Reddit
Trello
Asana

Triển khai: Hiển thị một overlay modal với tham chiếu phím tắt:

document.addEventListener('keydown', function(e) {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  
  if (e.key === '?' && e.shiftKey) {
    e.preventDefault();
    showShortcutHelp(); // Hàm hiển thị modal trợ giúp của bạn
  }
});

4. Escape để đóng

Đây không phải là dành riêng cho điều hướng, nhưng nó được mong đợi phổ biến: Escape đóng modals, drawers và overlays.

Mọi drawer giỏ hàng, quick-view sản phẩm, email popup và hướng dẫn kích cỡ đều phải đóng khi nhấn Escape. Điều này được đề cập bởi WCAG 2.1 Success Criterion 2.1.2 (Không Keyboard Trap)—người dùng phải có khả năng thoát khỏi bất kỳ thành phần nào bằng các lệnh bàn phím tiêu chuẩn.

5. Phím mũi tên để điều hướng

Trong các giao diện có cấu trúc—carousel sản phẩm, dropdown tự động hoàn thành, menu lọc—các phím mũi tên phải điều hướng:

Lên/Xuống: Di chuyển giữa các mục trong danh sách
Trái/Phải: Di chuyển giữa các slide carousel hoặc tab
Enter: Chọn/kích hoạt mục được tiêu điểm

Đây là tiêu chuẩn trên tất cả các hệ điều hành máy tính để bàn và ứng dụng web. Người dùng mong đợi điều đó.

Những phím tắt cần tránh

Không phải tất cả các phím tắt bàn phím đều cải thiện UX. Một số tạo xung đột hoặc nhầm lẫn. Đây là những gì cần bỏ qua:

Các chữ cái đơn lẻ không có bối cảnh

Những phím tắt như P cho trang sản phẩm, A cho thêm vào giỏ hàng hoặc N cho trang tiếp theo nghe có vẻ thuận tiện nhưng sẽ quay lại trong thực tế. Người dùng vô tình kích hoạt chúng khi gõ tên sản phẩm, địa chỉ email hoặc truy vấn tìm kiếm.

Ví dụ về lỗi: Bạn triển khai N cho “trang tiếp theo” trên các trang bộ sưu tập. Người dùng gõ “Nike running shoes” vào thanh tìm kiếm, kết thúc gõ và di chuyển tay chuột. Họ vô tình nhấn N một lần nữa. Trang nhảy đến trang 2 của kết quả. Nhầm lẫn.

Giải pháp: Sử dụng hai phím tắt (G+N) hoặc phím tắt với các phím bổ trợ (Cmd+N) để ngăn kích hoạt vô tình.

Xung đột trình duyệt/OS

Tránh những phím tắt xung đột với chức năng của trình duyệt hoặc hệ điều hành:

Phím tắt	Chức năng trình duyệt/OS	Đừng sử dụng cho
Cmd/Ctrl+F	Tìm trên trang	Tìm kiếm tùy chỉnh của bạn
Cmd/Ctrl+R	Tải lại	Làm mới lưới sản phẩm
Cmd/Ctrl+T	Tab mới	Sản phẩm mới
Cmd/Ctrl+W	Đóng tab	Đóng modal
Cmd/Ctrl+N	Cửa sổ mới	Trang tiếp theo
Space	Cuộn xuống	Toggle bộ lọc

Khi phím tắt của bạn xung đột với chức năng của trình duyệt, trình duyệt sẽ thắng—phím tắt của bạn không bao giờ kích hoạt. Tệ hơn, người dùng gặp hành vi không mong muốn (họ định điều hướng trang web của bạn nhưng thay vào đó mở tab mới).

Phím tắt tùy chỉnh mà không thể khám phá

Nếu bạn tạo ra một phím tắt không phù hợp với kỳ vọng của người dùng, bạn phải dạy người dùng về nó. Điều đó có nghĩa là:

Hiển thị phím tắt một cách rõ ràng bên cạnh hành động (ví dụ: “Tìm kiếm /” trong tiêu đề)
Bao gồm nó trong bảng điều khiển trợ giúp có thể truy cập qua ?
Duy trì gợi ý cho đến khi người dùng chứng tỏ họ biết phím tắt

Amazon hiển thị “Nhấn ‘/’ để tìm kiếm” trong văn bản xám nhạt bên trong thanh tìm kiếm. YouTube hiển thị “Nhấn / để tìm kiếm” dưới dạng tooltip khi di chuột qua biểu tượng tìm kiếm. Những gợi ý này làm cho phím tắt tùy chỉnh có thể khám phá được.

Nếu không thể khám phá, phím tắt là các tính năng vô hình mà 99% người dùng không bao giờ tìm thấy.

Ví dụ thực tế từ các trang web thương mại điện tử hàng đầu

Chúng ta hãy xem cách các nền tảng chính xử lý phím tắt bàn phím:

Amazon

Amazon sử dụng một bộ tối thiểu:

Tab: Điều hướng qua các phần tử tương tác (tiêu chuẩn)
Enter: Kích hoạt các liên kết/nút (tiêu chuẩn)
Phím mũi tên: Điều hướng các đề xuất tìm kiếm tự động hoàn thành

Amazon không triển khai slash-to-search hoặc điều hướng phím G. Tập trung của họ là trên khả năng tiếp cận cốt lõi (thứ tự tab, chỉ báo tiêu điểm) hơn là những phím tắt người dùng nâng cao.

Tại sao điều này hoạt động: Cơ sở người dùng của Amazon rộng lớn, thiên về những người mua sắm bình thường. Thêm phím tắt nâng cao có thể không đảm bảo chi phí phát triển.

Etsy

Etsy triển khai:

Dấu gạch chéo (/): Tiêu điểm thanh tìm kiếm
Escape: Đóng modals và dropdowns
Phím mũi tên: Điều hướng tự động hoàn thành tìm kiếm

Etsy thêm slash-for-search vì cơ sở người dùng của họ bao gồm các nhà bán hàng thường xuyên và những người mua thế lực. Phím tắt xuất hiện dưới dạng tooltip trên thanh tìm kiếm: “Nhấn / để tìm kiếm.”

Shopify Admin (nền tảng, không phải cửa hàng)

Dashboard admin của Shopify cho chủ cửa hàng sử dụng rất nhiều phím tắt bàn phím:

G+H: Đi tới trang chủ
G+O: Đi tới đơn hàng
G+P: Đi tới sản phẩm
G+C: Đi tới khách hàng
/: Tiêu điểm tìm kiếm
Cmd+K: Nhảy nhanh đến bất kỳ trang nào

Điều này phù hợp cho khán giả—chủ cửa hàng sử dụng Shopify hàng ngày và hưởng lợi từ các phím tắt năng suất. Nhưng mức độ phức tạp này không cần thiết cho các cửa hàng phía khách hàng.

Hướng dẫn triển khai: Thêm phím tắt vào cửa hàng của bạn

Dưới đây là kế hoạch từng bước để triển khai phím tắt bàn phím trong cửa hàng Shopify:

Bước 1: Bắt đầu với dấu gạch chéo để tìm kiếm

Đây là phím tắt có ROI cao nhất. Thêm JavaScript này vào chủ đề của bạn:

document.addEventListener('keydown', function(e) {
  // Không kích hoạt nếu người dùng gõ trong trường nhập liệu
  const activeElement = document.activeElement;
  const isInputField = activeElement.tagName === 'INPUT' || 
                       activeElement.tagName === 'TEXTAREA' || 
                       activeElement.isContentEditable;
  
  if (isInputField) return;
  
  if (e.key === '/') {
    e.preventDefault();
    const searchInput = document.querySelector('input[type="search"], input[name="q"]');
    if (searchInput) {
      searchInput.focus();
      searchInput.select(); // Chọn bất kỳ văn bản hiện có
    }
  }
});

Bước 2: Thêm gợi ý trực quan

Cập nhật thanh tìm kiếm của bạn để hiển thị phím tắt:

<input 
  type="search" 
  name="q" 
  placeholder="Tìm kiếm sản phẩm   Nhấn / để tiêu điểm"
  aria-label="Tìm kiếm sản phẩm"
>

Hoặc thêm nó dưới dạng tooltip/label bên cạnh biểu tượng tìm kiếm.

Bước 3: Thêm G+C cho Đi tới giỏ hàng

Nếu bạn có một giỏ hàng cố định trong tiêu đề, phím tắt này rất hữu ích:

let gKeyPressed = false;
let gKeyTimeout;

document.addEventListener('keydown', function(e) {
  const isInputField = e.target.tagName === 'INPUT' || 
                       e.target.tagName === 'TEXTAREA' || 
                       e.target.isContentEditable;
  
  if (isInputField) return;
  
  if (e.key === 'g' || e.key === 'G') {
    gKeyPressed = true;
    clearTimeout(gKeyTimeout);
    gKeyTimeout = setTimeout(() => { gKeyPressed = false; }, 1000);
  }
  
  if (gKeyPressed && (e.key === 'c' || e.key === 'C')) {
    window.location.href = '/cart';
  }
});

Bước 4: Thêm Escape để đóng modals

Nếu bạn có một drawer giỏ hàng, quick-view sản phẩm hoặc popup bản tin:

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    // Đóng drawer giỏ hàng
    const cartDrawer = document.querySelector('.cart-drawer.active');
    if (cartDrawer) {
      closeCartDrawer(); // Hàm đóng của chủ đề của bạn
    }
    
    // Đóng modals
    const openModal = document.querySelector('.modal.active');
    if (openModal) {
      closeModal(); // Hàm đóng của chủ đề của bạn
    }
  }
});

Bước 5: (Tùy chọn) Thêm bảng điều khiển trợ giúp

Đối với các cửa hàng có nhiều phím tắt, hãy thêm bảng điều khiển trợ giúp ?:

document.addEventListener('keydown', function(e) {
  const isInputField = e.target.tagName === 'INPUT' || 
                       e.target.tagName === 'TEXTAREA';
  
  if (isInputField) return;
  
  if (e.key === '?' && e.shiftKey) {
    e.preventDefault();
    showKeyboardShortcutHelp(); // Hiển thị modal trợ giúp của bạn
  }
});

function showKeyboardShortcutHelp() {
  const helpHTML = `
    <div class="shortcut-help-modal">
      <h2>Phím tắt bàn phím</h2>
      <table>
        <tr><td><kbd>/</kbd></td><td>Tiêu điểm thanh tìm kiếm</td></tr>
        <tr><td><kbd>G</kbd> rồi <kbd>H</kbd></td><td>Về trang chủ</td></tr>
        <tr><td><kbd>G</kbd> rồi <kbd>C</kbd></td><td>Đến giỏ hàng</td></tr>
        <tr><td><kbd>Esc</kbd></td><td>Đóng modals và drawers</td></tr>
        <tr><td><kbd>?</kbd></td><td>Hiển thị trợ giúp này</td></tr>
      </table>
      <button onclick="closeShortcutHelp()">Đóng</button>
    </div>
  `;
  document.body.insertAdjacentHTML('beforeend', helpHTML);
}

Kiểm tra và tinh chỉnh

Trước khi khởi chạy phím tắt bàn phím, hãy kiểm tra chúng với người dùng thực—đặc biệt là những người dùng thường xuyên sử dụng phím tắt trên các nền tảng khác.

Danh sách kiểm tra kiểm tra:

Những phím tắt chỉ kích hoạt khi thích hợp? Gõ trong thanh tìm kiếm. Nhấn / trong khi gõ. Nó không nên làm gì (bạn đã ở trong trường nhập liệu).
Những phím tắt có xung đột với chức năng của trình duyệt không? Kiểm tra trong Chrome, Firefox và Safari. Đảm bảo phím tắt của bạn không phá vỡ hành vi trình duyệt gốc.
Những phím tắt có thể khám phá được? Hỏi một người dùng chưa quen với trang web của bạn: “Bạn có thể tìm thấy cách nhanh hơn để tìm kiếm?” Nếu họ không tìm thấy phím tắt, hãy thêm gợi ý rõ ràng hơn.
Những phím tắt có hoạt động trên thiết bị di động không? Kiểm tra với bàn phím bên ngoài được kết nối với tablet/điện thoại. Phím tắt phải hoạt động theo cách tương tự.
Escape có đóng tất cả mọi thứ không? Mở mọi modal, drawer và overlay trên trang web của bạn. Nhấn Escape. Mỗi cái nên đóng và trả về tiêu điểm một cách thích hợp.

Khi nào không nên thêm phím tắt

Phím tắt bàn phím không phù hợp cho mọi cửa hàng. Bỏ qua chúng nếu:

Cửa hàng của bạn có lưu lượng truy cập lặp lại tối thiểu (mua hàng xung động một lần, sản phẩm lạ)
Khán giả của bạn thiên về những người mua sắm bình thường, không thường xuyên
Bạn không có tài nguyên phát triển để triển khai và kiểm tra phím tắt một cách thích hợp

Thay vào đó, hãy tập trung vào khả năng tiếp cận bàn phím cốt lõi trước: chỉ báo tiêu điểm rõ ràng, thứ tự tab hợp lý, các liên kết bỏ qua và HTML ngữ nghĩa. Những tính năng đó mang lợi ích cho 100% người dùng bàn phím. Phím tắt mang lợi ích cho 5-10% người dùng nâng cao.

Chỉ thêm phím tắt sau khi các nguyên tắc cơ bản vững chắc.

Điểm bắt đầuNếu cửa hàng Shopify của bạn được xây dựng bằng chủ đề hiện đại hoặc sử dụng công cụ điều hướng như Navi+ Menu Builder, điều hướng bàn phím cơ bản (Tab, Enter, Escape) có khả năng đã được xử lý. Thêm các phím tắt như slash-for-search trên nền tảng đó, không phải thay thế cho nó.

Dòng dưới cùng: Phím tắt nhỏ, tác động lớn

Phím tắt bàn phím sẽ không biến đổi cửa hàng của bạn một đêm. Chúng sẽ không xuất hiện trong các chỉ số kiểm tra A/B hoặc báo cáo Google Analytics. Nhưng chúng tích lũy theo thời gian.

Một người dùng nâng cao khám phá phím tắt slash-to-search của bạn tiết kiệm 3 giây trên mỗi lần tìm kiếm. Nếu họ truy cập cửa hàng của bạn 20 lần mỗi năm và tìm kiếm 3 lần mỗi lần truy cập, đó là 180 giây—3 phút—của ma sát tiết kiệm. Người dùng đó nhớ trải nghiệm là “nhanh” và “hiệu quả” so với các đối thủ cạnh tranh.

Những cửa hàng thắng về hiệu quả là những cửa hàng nhận được lợi nhuận lặp lại. Và lợi nhuận lặp lại là nơi lợi nhuận thương mại điện tử tồn tại.

Bắt đầu với slash để tìm kiếm. Thêm Escape để đóng modals. Nếu phân tích của bạn cho thấy tỷ lệ khách hàng quay lại cao, hãy xem xét thêm G+C cho giỏ hàng và G+H cho trang chủ. Giữ nó đơn giản, giữ nó tiêu chuẩn và làm cho nó có thể khám phá được.

Bài viết này là một phần của hướng dẫn lớn hơn về Điều hướng bàn phím: tại sao nó quan trọng ngoài khả năng tiếp cận.