۱۰ عنصری که هر رابط کاربری رو میسازن
فرانتاندخلاصهٔ کاملتر
نویسنده اسم این مجموعه رو الفبای تعامل میذاره: همونطور که ۲۶ حرف برای نوشتن هر کلمهای کافیه، حدود ۱۰ عنصر برای ساختن تقریباً هر رابطی کافیه. به گفتهٔ اون این ۱۰ تا خانوادهبندی هم میشن: دکمه کار انجام میده، فرم و چکباکس و جستوجو ورودی میگیرن، منو و لینک و تب مسیر میسازن، دیالوگ و هشدار جواب سیستمان و آیکونها همون نمادهاییان که بقیهٔ عناصر میپوشن.
سر دکمهها حرف اصلی اینه که دکمه تنها عنصریه که دنیا رو عوض میکنه نه فقط نما رو، برای همین سختگیرانهترین قانونهای برچسبگذاری مال اونه: به جای یه «OK» خالی باید نتیجه رو با فعل بنویسی، مثل «ذخیرهٔ فاکتور». موج طراحی تخت هم از حدود ۲۰۱۳ حاشیه و سایه رو برداشت و کاربر موند که کدوم کلمه دستوره. قانون فیتس هم میگه هدف بزرگتر و نزدیکتر سریعتر زده میشه؛ کف اندازهٔ هدف لمسی ۱×۱ سانتیمتره.
تو بخش فرمها نویسنده میگه فرم همونجاییه که پول جابهجا میشه، پس هر فیلد اضافه مستقیم از نرخ تکمیل کم میکنه — حتی فیلد اختیاری، چون کاربر باید ببینتش، بفهمتش و تصمیم بگیره ردش کنه. مثال معروفش مربوط به Expedia ست که با حذف یه فیلد اختیاری به اسم Company سالی ۱۲ میلیون دلار بیشتر گیرش اومد. برچسب هر فیلد هم باید بیرون فیلد و ماندگار باشه، چون placeholder دقیقاً همون لحظهای محو میشه که کاربر بهش نیاز داره.
برای منوها میگه ساختار منو همون معماری اطلاعاته که دیده میشه و اسم دستهها تعیین میکنه کاربر یه قابلیت رو پیدا کنه یا فکر کنه اصلاً وجود نداره؛ محدودیت ۷±۲ هم اینجا صدق نمیکنه، چون گزینهای که دیده میشه حافظهٔ کاری رو درگیر نمیکنه. لینک هم دو تا قول میده: اینکه کلیکپذیره و اینکه مقصدش چیه؛ «کلیک کنید» بوی اطلاعاتی صفر داره، چون کاربر موقع اسکن تقریباً فقط ۱۱ کاراکتر اول لینک رو میخونه.
دیالوگ مودال هم باید هزینهٔ قطعکردن کار رو توجیه کنه، وگرنه بهتره کار داخل صفحه یا تو یه پنل مودلس جلو بره؛ تأیید گرفتن برای کارهای برگشتپذیر فقط کاربر رو عادت میده رفلکسی رد کنه، پس undo از پرسیدن بهتره. تو هشدارها پیام خطا باید ساده بگه چی شد، کجا شد و راه برگشت چیه و هیچوقت کاربر رو مقصر نکنه. آیکون بدون برچسب متنی هم یه امتحانه نه یه درس؛ به گفتهٔ نویسنده برچسب ارزونترین بیمهٔ کاربردپذیریه.
نکات کلیدی:
- حدود ۱۰ عنصر پایه تقریباً کل رابطهای امروزی رو میسازن و مقاله ۸۶ راهنما براشون میده
- دکمه برای عمل، لینک برای جابهجایی؛ قاطی کردن این دو تا زبان بصری روی هر کلیک هزینه میذاره
- برچسب دکمه و دکمهٔ دیالوگ باید نتیجه رو بگه، نه «OK» و «Cancel»
- هر فیلد اضافهٔ فرم، حتی اختیاری، نرخ تکمیل رو پایین میآره
- منوی خوب یعنی اسمگذاری درست دستهها؛ همبرگر مال موبایله نه دسکتاپ
- آیکون بدون برچسب یه حدسه، و رنگ بهتنهایی برای هشدار کافی نیست
