طراحی ناوبری صفحه‌کلید برای دیتا گریدها

کاربران حرفه‌ای می‌خواهند بدون ماوس کار کنند.

یک دیتا گرید با طراحی خوب به آن‌ها اجازه می‌دهد تنها با استفاده از صفحه‌کلید، پیمایش، ویرایش و اقدام کنند. سرعت این کاربران دو تا سه برابر بیشتر از کاربران ماوس است.

اگر گرید شما برای هر عملیات کاربر را مجبور به کلیک کند، کاربران حرفه‌ای از ابزار شما متنفر خواهند شد.

راه حل ساده است. این کار حدود صد خط کد و انتخاب‌های طراحی هوشمندانه می‌طلبد.

برای داشتن یک گرید حرفه‌ای، این قوانین را دنبال کنید:

Tab: از این کلید برای ورود یا خروج از گرید استفاده کنید. پس از ورود، Tab باید بین دکمه‌ها یا ورودی‌های (inputs) موجود در یک ردیف جابه‌جا شود. از Tab برای جابه‌جایی بین سلول‌ها استفاده نکنید.

Arrow Keys: از این کلیدها برای جابه‌جایی بین سلول‌ها استفاده کنید. بالا و پایین برای جابه‌جایی بین ردیف‌ها و چپ و راست برای جابه‌جایی بین ستون‌ها.

Enter: از این کلید برای اجرای عملیات اصلی یک ردیف، مانند باز کردن نمای جزئیات (detail view)، استفاده کنید.

Space: از این کلید برای انتخاب یا لغو انتخاب یک ردیف استفاده کنید.

Escape: از این کلید برای لغو ویرایش یا بستن یک منو استفاده کنید.

Home و End: از این کلیدها برای پرش به ابتدا یا انتهای یک ردیف استفاده کنید.

بزرگترین اشتباه، استفاده از Tab برای جابه‌جایی بین سلول‌ها است. در یک گرید بزرگ، این کار بسیار کند است. اگر یک گرید دارای ۷ ستون و ۲۰ ردیف قابل مشاهده باشد، کاربر باید ۱۴۰ بار کلید Tab را فشار دهد تا یک صفحه را تمام کند. کلیدهای جهت‌نما این مشکل را حل می‌کنند؛ با یک بار فشار دادن، به ردیف بعدی می‌روید.

برای ویرایش درون‌خطی (inline editing)، از الگوی صفحات گسترده (spreadsheet) پیروی کنید:

  • فشردن Enter برای شروع ویرایش یک سلول.
  • فشردن دوباره Enter برای ذخیره تغییرات.
  • فشردن Escape برای لغو ویرایش.
  • فشردن Tab برای ذخیره و رفتن به سلول قابل ویرایش بعدی.

برای کمک به کاربران جهت یافتن این میانبرها، از این الگوها استفاده کنید:

  • افزودن میانبر "?" برای باز کردن منوی راهنما.
  • نمایش میانبرها در تولتیپ‌های (tooltips) روی دکمه‌ها.
  • استفاده از یک راهنمای آموزشی (onboarding tip) یک‌باره.

ناوبری خوب با صفحه‌کلید، ضریب افزایش بهره‌وری است. این یک سرمایه‌گذاری کوچک برای افزایش چشمگیر سرعت کاربر است.

منبع: https://dev.to/137foundry/how-to-design-keyboard-navigation-for-a-data-grid-so-power-users-stop-reaching-for-the-mouse-mh4