چطور صفحه‌ای طراحی کنیم که کاربر راحت بفهمه، مسیرش رو پیدا کنه و کارش رو انجام بده؟ اینجا از چیدمان، رنگ و تایپوگرافی تا شناخت کاربر، وایرفریم و بررسی کاربردپذیری می‌خونیم؛ با مثال‌هایی برای طراحی رابط‌های روشن، منظم و خوش‌استفاده.
فرض کن کسی برای ثبت درخواست همکاری وارد سایتت شده. باید خدمات مناسبش رو پیدا کنه، اطلاعات موردنیازش رو بخونه، به فرم برسه و درخواستش رو بفرسته. در هر مرحله ممکنه یک عنوان مبهم، لینک نامشخص یا سؤال اضافه باعث سردرگمی بشه.
برای شروع طراحی، همین مسیر رو بررسی کن: کاربر با چه هدفی وارد می‌شه، چه اطلاعاتی لازم داره و کجا ممکنه متوقف بشه؟ مطالب این دسته کمک می‌کنن این سؤال‌ها رو به تصمیم‌های مشخص در طراحی تبدیل کنی.
رابط کاربری یا UI شامل اجزاییه که کاربر از طریق اون‌ها با محصول تعامل می‌کنه؛ مثل منو، دکمه، فرم، نوشته‌ها و چیدمان صفحه. تجربهٔ کاربری یا UX نگاه گسترده‌تری به استفاده از محصول داره: اینکه فرد چطور مسیرش رو پیدا می‌کنه، چه موانعی می‌بینه و در نهایت چقدر به هدفش می‌رسه.
در مثال فرم همکاری، اندازه و ظاهر دکمه بخشی از طراحی رابط‌اند. اینکه چه اطلاعاتی درخواست کنیم، چرا به اون‌ها نیاز داریم و بعد از ارسال چه اتفاقی بیفته، به تجربهٔ استفاده مربوط می‌شه. این تصمیم‌ها به هم وابسته‌اند و بهتره کنار هم بررسی بشن.
صفحه رو با چند کادر، عنوان و دکمه روی کاغذ بکش. در این مرحله مشخص کن کدوم اطلاعات باید زودتر دیده بشن، چه چیزهایی کنار هم قرار بگیرند و قدم بعدی کاربر کجاست. این طرح ساده، یا وایرفریم، فرصتیه برای بررسی ساختار قبل از پرداختن به جزئیات.
متن‌های واقعی رو هم زود وارد طرح کن. عنوان بلند یک خدمت، توضیح چندخطی یا پیام خطا می‌تونه فضای متفاوتی نسبت به متن نمونه بخواد. با محتوای واقعی راحت‌تر می‌فهمی چیدمانت کجا به اصلاح نیاز داره.
فرم خالی، اطلاعات اشتباه، نتیجهٔ جست‌وجوی ناموجود و ارسال موفق، همگی بخشی از تجربهٔ استفاده‌اند. برای هرکدوم مشخص کن کاربر چه چیزی می‌بینه و چطور می‌تونه ادامه بده.
مثلاً کنار فیلد شماره تماس، برچسب روشنی قرار بده. اگر شماره پذیرفته نشد، توضیح بده چه چیزی باید اصلاح بشه. بعد از ارسال هم نتیجه رو مشخص کن تا کاربر ندونه دوباره باید دکمه رو بزنه یا منتظر بمونه.
در راهنمای فرم‌های دسترس‌پذیر W3C هم بر برچسب‌ها، راهنمای تکمیل، توضیح خطا و اعلام نتیجهٔ ارسال تأکید شده. این جزئیات به استفادهٔ قابل‌فهم‌تر از فرم کمک می‌کنند.
به‌جای اینکه فقط بپرسی «از ظاهرش خوشت میاد؟»، یک کار تعریف کن؛ مثلاً «خدمت مناسب پروژه‌ات رو پیدا کن و درخواست همکاری بفرست». سپس مشاهده کن فرد از کجا شروع می‌کنه، کجا مکث داره و چه سؤالی می‌پرسه.
تا جای ممکن مسیر رو براش توضیح نده؛ هدف اینه که ببینی خود صفحه چقدر راهنماست. مشاهدات رو یادداشت کن و مشکلاتی رو که مانع انجام کار می‌شن، زودتر بررسی کن. چند مشاهدهٔ اولیه سرنخ‌های مفیدی می‌ده، اما جای شناخت گسترده‌تر مخاطب رو نمی‌گیره.
برای اینکه مطالعه به تمرین عملی وصل بشه، این ترتیب رو دنبال کن:
برای تمرین، از یک بخش کوچک مثل فرم تماس یا منوی سایت شروع کن. یک مسئلهٔ روشن انتخاب کن، نسخهٔ اولیه رو بساز و بعد ببین تغییرت چه کمکی به انجام کار می‌کنه.
بین خدمات، مقاله‌ها و آموزش‌های سبک‌تر جست‌وجو کن.
