طراحی رابط کاربری چیست و یک رابط خوب چطور ساخته میشود؟.
مدتی پیش صفحهای را بررسی میکردم که در نگاه اول هیچ ایراد واضحی نداشت. رنگها هماهنگ، فونتها مدرن و کارتها مرتب بودند. اما وقتی خواستم یک فرم ساده را کامل کنم، مجبور شدم چند بار حدس بزنم کدام فیلد ضروری است، خطا دقیقاً به چه چیزی اشاره میکند و آیا دکمهٔ پایین صفحه فعال شده یا نه. صفحه زیبا بود، ولی با من همکاری نمیکرد.
این تجربه تعریف خوبی از مرز طراحی رابط کاربری است. طراحی رابط کاربری یا UI فقط ساختن ظاهر محصول نیست؛ طراحی نشانهها، اجزا و رفتارهایی است که به کاربر کمک میکنند محصول را بفهمد و با آن کار کند. رنگ و تایپوگرافی مهماند، اما وضوح، بازخورد، سازگاری و دسترسپذیری هم به همان اندازه بخشی از UI هستند.
رابط کاربری دقیقاً شامل چه چیزهایی است؟
هر نقطهای که کاربر از طریق آن با یک محصول دیجیتال ارتباط میگیرد، بخشی از رابط است. در یک سایت یا اپلیکیشن این موارد را زیاد میبینیم:
- دکمهها، لینکها و منوها؛
- فرمها، ورودیها و پیامهای خطا؛
- تایپوگرافی، رنگ و آیکن؛
- کارتها، جدولها و نمودارها؛
- وضعیت بارگذاری، خالی، موفقیت و شکست؛
- حرکتها، تغییر حالتها و بازخوردهای کوچک؛
- رفتار صفحه در موبایل، تبلت و دسکتاپ.
طراحی UI یعنی این اجزا طوری کنار هم قرار بگیرند که کاربر مجبور نباشد منطق داخلی محصول را حدس بزند. ظاهر باید به او بگوید چه چیزی مهم است، کدام عنصر قابل تعامل است، الان چه اتفاقی افتاده و قدم بعدی چیست.
رابط خوب از صفحهٔ زیبا شروع نمیشود
قبل از باز کردن فیگما، باید بدانیم این صفحه برای چه کسی و برای انجام چه کاری ساخته میشود. اگر هدف نامعلوم باشد، خیلی زود وارد بازی رنگ و چیدمان میشویم و ممکن است مسئلهٔ اشتباهی را با کیفیت بالا طراحی کنیم.
من قبل از ساخت رابط این چهار مورد را روشن میکنم:
- اقدام اصلی کاربر چیست؟
- برای انجام آن چه اطلاعاتی لازم دارد؟
- کدام تصمیم ممکن است برایش پرریسک یا مبهم باشد؟
- بعد از هر اقدام چه بازخوردی باید ببیند؟
مثلاً در صفحهٔ پرداخت، اقدام اصلی فقط زدن دکمه نیست. کاربر باید مبلغ نهایی، روش پرداخت، وضعیت تخفیف و امکان برگشت را بفهمد. رابط خوب این اطلاعات را در لحظهٔ مناسب و با سلسلهمراتب درست نشان میدهد.
اصل اول: سلسلهمراتب باید چشم را هدایت کند
کاربر صفحه را مثل یک سند رسمی از بالا تا پایین نمیخواند. معمولاً سریع اسکن میکند و دنبال نشانهای میگردد که به هدفش مربوط باشد. اندازه، وزن، رنگ، فاصله و موقعیت عناصر باید اهمیت آنها را نشان دهند.
اگر همهچیز بزرگ و پررنگ باشد، هیچچیز مهم نیست. اگر دکمهٔ اصلی با لینک فرعی یک وزن بصری داشته باشد، کاربر باید بیشتر فکر کند. اگر عنوان، توضیح و داده بدون فاصلهٔ منطقی کنار هم باشند، ساختار محتوا گم میشود.
یک تمرین ساده این است که از صفحه اسکرینشات بگیرید، کمی تارش کنید و نگاه کنید هنوز مهمترین بخش دیده میشود یا نه. این آزمون کامل نیست، اما کمک میکند بفهمید وزن بصری صفحه کجا جمع شده است.
اصل دوم: سازگاری بار ذهنی را کم میکند
وقتی یک دکمهٔ نارنجی در تمام محصول به معنی اقدام اصلی است، کاربر الگو را یاد میگیرد. اگر همان ظاهر در صفحهای دیگر به یک لینک کماهمیت تبدیل شود، یادگیری قبلی بیفایده میشود.
سازگاری یعنی اجزای مشابه ظاهر و رفتار مشابه داشته باشند. نامگذاریها، فاصلهها، آیکنها و پیامها هم باید الگوی قابل پیشبینی بسازند. سیستم طراحی در اینجا کمک بزرگی است، چون تصمیمهای تکراری را مستند میکند و جلوی ساخته شدن ده مدل دکمه و فیلد را میگیرد.
اما سازگاری نباید کورکورانه باشد. اگر یک الگو در زمینهٔ جدید کار نمیکند، باید آن را آگاهانه تغییر دهیم و دلیلش را بدانیم. هدف سیستم طراحی حفظ یکنواختی ظاهری نیست؛ حفظ کیفیت و سرعت تصمیمگیری است.
اصل سوم: رابط باید همیشه پاسخ بدهد
کاربر روی دکمه کلیک میکند و هیچ اتفاقی نمیبیند. دوباره کلیک میکند. چند ثانیه بعد دو درخواست ثبت شده است. این مشکل کوچک ظاهری میتواند به خطای جدی محصول تبدیل شود.
رابط باید وضعیت را نشان دهد: دکمه فشرده شد، درخواست در حال پردازش است، عملیات موفق بود یا خطایی رخ داد. بازخورد لازم نیست پرزرقوبرق باشد؛ باید سریع، واضح و متناسب با اهمیت اتفاق باشد.
برای هر جزء تعاملی حالتها را از قبل مینویسم: عادی، hover، focus، فشرده، غیرفعال، بارگذاری، موفقیت و خطا. این کار کمک میکند صفحه فقط برای مسیر خوشبینانه طراحی نشود.
اصل چهارم: متن بخشی از طراحی است
گاهی یک رابط با تغییر چند کلمه بهتر میشود، نه با جابهجایی چند پیکسل. «ادامه» ممکن است مبهم باشد؛ «ثبت و رفتن به پرداخت» نتیجهٔ کلیک را روشن میکند. «خطایی رخ داد» اطلاعاتی نمیدهد؛ «کد تأیید منقضی شده؛ کد تازه بگیرید» راه بعدی را هم نشان میدهد.
متن رابط باید کوتاه باشد، اما کوتاهی به قیمت ابهام تمام نشود. لحن هم به موقعیت بستگی دارد. در یک پیام مالی، دقت از شوخی مهمتر است. در onboarding یک ابزار خلاق، صمیمیت میتواند اضطراب شروع را کم کند.
من متن موقت Lorem Ipsum را تا مرحلهٔ آخر نگه نمیدارم. محتوای واقعی روی چیدمان، اندازهٔ اجزا و حتی ترتیب اطلاعات اثر میگذارد.
اصل پنجم: دسترسپذیری ویژگی اضافه نیست
کنتراست مناسب، اندازهٔ خوانا، ترتیب درست فوکوس، برچسب فیلدها و امکان استفاده با کیبورد فقط برای گروه کوچکی از کاربران نیست. صفحهٔ کمکنتراست زیر نور آفتاب برای خیلیها سخت میشود. هدف کوچک لمسی هنگام حرکت یا با یک دست مشکل ایجاد میکند. پیام خطایی که فقط با رنگ قرمز مشخص شده ممکن است برای کاربر قابل تشخیص نباشد.
دسترسپذیری از همان تصمیمهای اولیه شروع میشود. اگر در پایان پروژه سراغش برویم، اصلاح ساختار هزینهٔ بیشتری دارد. استاندارد WCAG نقطهٔ شروع خوبی است، اما مشاهدهٔ کاربر واقعی و آزمون با ابزارهای کمکی هم مهم است.
فرایند من برای طراحی یک رابط
فرایند همیشه خطی نیست، ولی معمولاً این مسیر را طی میکنم:
۱. مسئله و محتوا
هدف صفحه، نیاز کاربر، محدودیت فنی و محتوای واقعی را مشخص میکنم. اگر داده یا متن هنوز قطعی نیست، حالتهای محتمل را مینویسم.
۲. جریان و وایرفریم
بدون جزئیات بصری، ترتیب اطلاعات و اقدامها را میسنجم. چند نسخهٔ ساده خیلی ارزانتر از اصلاح یک صفحهٔ کاملاند.
۳. زبان بصری و اجزا
تایپوگرافی، رنگ، شبکه و اجزای سیستم طراحی را وارد میکنم. در این مرحله زیبایی باید به فهم و هویت کمک کند.
۴. حالتها و لبهها
متن طولانی، دادهٔ خالی، خطا، دسترسی محدود، اینترنت کند و صفحهٔ کوچک را بررسی میکنم. محصول واقعی بیشتر از یک اسکرینشات تمیز حالت دارد.
۵. نمونه و آزمون
نمونه را به کسی میدهم که توضیحات جلسه را نشنیده است. اگر برای استفاده از طرح به توضیح من نیاز باشد، رابط هنوز بهاندازهٔ کافی واضح نیست.
اشتباههای رایج در طراحی UI
یکی از اشتباهها شروع از الهام بصری بدون شناخت مسئله است. نمونههای Dribbble و Behance برای دیدن سبکها مفیدند، اما معمولاً همهٔ محدودیتها، خطاها و دادههای واقعی را نشان نمیدهند.
اشتباه دوم طراحی فقط یک اندازهٔ صفحه است. رابط باید از ابتدا با محتوای متغیر و اندازههای مختلف فکر شود، نه اینکه نسخهٔ موبایل در پایان با کوچک کردن عناصر ساخته شود.
اشتباه سوم استفادهٔ زیاد از رنگ تأکیدی است. اگر سه دکمهٔ اصلی، چند badge و تیترها همه با رنگ برند فریاد بزنند، کاربر مسیر اصلی را پیدا نمیکند.
و اشتباه آخر، تحویل فایل بدون توضیح رفتار است. توسعهدهنده باید بداند اجزا در حالتهای مختلف چه میکنند. نمونهٔ تعاملی، مستند کوتاه و گفتوگوی مستقیم فاصلهٔ طراحی تا اجرا را کم میکند.
چکلیست کوتاه رابط کاربری
پیش از تحویل یک صفحه از خودم میپرسم:
- اقدام اصلی در چند ثانیه قابل تشخیص است؟
- عنوانها و فاصلهها ساختار محتوا را نشان میدهند؟
- عنصر قابل کلیک از متن عادی قابل تشخیص است؟
- حالت بارگذاری، خطا، خالی و موفقیت طراحی شده؟
- متنها نتیجهٔ اقدام را روشن میکنند؟
- کنتراست و فوکوس کیبورد قابل قبول است؟
- صفحه با متن بلند و موبایل کوچک نمیشکند؟
- تصمیمهای طراحی با سیستم موجود هماهنگاند؟
این فهرست جای تست کاربر را نمیگیرد، اما بسیاری از خطاهای قابل پیشگیری را قبل از انتشار پیدا میکند.
پرسشهای متداول
برای طراحی رابط کاربری چه ابزاری لازم است؟
فیگما رایجترین ابزار امروز برای طراحی، نمونهسازی و همکاری تیمی است. ابزارهای دیگر هم وجود دارند، ولی کیفیت کار بیشتر به فهم مسئله و اصول طراحی بستگی دارد تا نام نرمافزار.
آیا طراح UI باید گرافیک بلد باشد؟
شناخت تایپوگرافی، رنگ، ترکیببندی و سلسلهمراتب ضروری است. لازم نیست الزاماً تصویرساز یا طراح پوستر باشید، اما باید بتوانید زبان بصری منسجم و خوانا بسازید.
تفاوت طراحی رابط کاربری و طراحی تجربه کاربری چیست؟
UI روی لایهٔ قابل مشاهده و تعامل تمرکز دارد؛ UX کل مسیر رسیدن کاربر به هدف را میسنجد. مقالهٔ «UI و UX چیست» این تفاوت را با مثال کامل توضیح میدهد.
جمعبندی من
من، محمد عبدی، رابط کاربری خوب را صفحهای نمیدانم که فقط در ارائه زیبا دیده شود. رابط خوب در استفادهٔ واقعی آرام است؛ اطلاعات را سر وقت نشان میدهد، به اقدام کاربر پاسخ میدهد، خطا را قابل اصلاح میکند و خودش مانع رسیدن کاربر به هدف نمیشود.
زیبایی مهم است، چون اعتماد و حس محصول را میسازد. اما بهترین زیبایی در UI از نظم، وضوح و تناسب میآید. اگر هر تصمیم بصری را بتوانیم به نیاز کاربر و هدف محصول وصل کنیم، طراحی از سلیقه فاصله میگیرد و به یک ابزار واقعی حل مسئله تبدیل میشود.
نوشتهٔ محمد عبدی، طراح محصول و تجربهٔ کاربری.