‏چند قانون ساده برای رابط کاربری آروم‌تر

Max Schmitt تو این مقاله نشون می‌ده چطوری با چند قانون ساده یه UI معمولی حس آروم‌تری پیدا می‌کنه. مثال اصلیش یه لیست با دیالوگ «افزودن آیتم» هست. نسخهٔ «قبل» بعد از ثبت، چند حالت لودینگ جدا و یه toast (یعنی پیام کوچیک شناوری که گوشهٔ صفحه ظاهر می‌شه و خودش محو می‌شه) نشون می‌ده. نسخهٔ «بعد» خیلی آروم‌تره.

دو قانون اصلی نویسنده اینان:

• لودینگ‌های پشت‌سرهم نشون نده. لودینگ رو روی دکمهٔ ذخیره نگه دار تا لیست پس‌زمینه دوباره fetch بشه.
• از toast استفاده نکن. به‌جاش بذار نتیجهٔ کار خودش دیده بشه، مثلاً آیتم جدید تو لیست ظاهر بشه. تأیید اضافه لازم نیست.

همین اصل برای حذف آیتم هم صدق می‌کنه. نویسنده می‌گه برای خطاها هم سراغ toast نرو. toast معمولاً دور از جایی که کاربر کلیک کرده ظاهر می‌شه، مخصوصاً روی صفحه‌های بزرگ. بعد از چند ثانیه هم غیب می‌شه و اگه کاربر حواسش نبوده، گیج می‌مونه. پیشنهاد بعدیش اینه که مودال‌هایی که ارتفاعشون عوض می‌شه رو بالای صفحه پین کنی. وقتی مودال وسط صفحه‌ست، با ظاهر یا پنهان شدن پیام خطا، دکمهٔ ارسال جابه‌جا می‌شه و این اذیت‌کننده‌ست.

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

نویسنده قبول داره که حتی نسخه‌های «بعد» رو هم می‌شه با انیمیشن، optimistic update (یعنی نشون دادن نتیجه قبل از جواب سرور) و ویرایش درجا خیلی بهتر کرد. ولی حرفش اینه که خیلی وقتا فرصت وسواس روی جزئیات نیست و این قوانین پایه، بدون وقت اضافه، UIهای ساده رو خیلی بهتر می‌کنن.

نکات کلیدی:

• لودینگ رو روی دکمهٔ ذخیره نگه دار تا refetch لیست تموم بشه، نه چند لودینگ جدا.
• به‌جای toast، اثر کار رو مستقیم تو UI نشون بده؛ برای خطاها هم همین‌طور.
• مودال‌هایی که ارتفاعشون تغییر می‌کنه رو بالای صفحه پین کن تا دکمه جابه‌جا نشه.
• تو React با به‌جای onClick روی دکمه، ارسال با Enter خودکار کار می‌کنه.
• با باز شدن دیالوگ، اولین input رو فوکوس کن.