منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۴ دقیقه

طراحی رابط کاربری (UI Design) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

منبع طراحی رابط کاربری را «تمرکز بر ظاهر و سبک» تعریف می‌کند، و بعد یک فهرست راهنمای پانزده‌قلمی می‌دهد که تقریباً هیچ‌کدامش دربارهٔ ظاهر نیست: پیش‌بینی‌پذیری، کشف‌پذیری، نزدیکی کنترل به شیء، بازخورد، آشکارسازی تدریجی.

و همین ناسازگاری، به‌نظرم مهم‌ترین چیزی است که دربارهٔ این حوزه باید فهمید.

تعریف

طراحی رابط کاربری فرایندی است که طراح با آن رابط‌های نرم‌افزار یا دستگاه‌های محاسباتی را می‌سازد، با تمرکز بر ظاهر و سبک. هدف، رابطی است که کاربر آن را آسان و لذت‌بخش بیابد. و «رابط» فقط رابط گرافیکی نیست:

• - رابط گرافیکی (GUI) — تعامل با بازنمایی‌های بینایی روی صفحه؛ میزکار رایانه یک نمونه است.
• - رابط صوتی (VUI) — تعامل با صدا؛ سیری و الکسا.
• - رابط ژست‌محور — تعامل با حرکت بدن در فضای سه‌بعدی؛ بازی‌های واقعیت مجازی.

چند نکتهٔ پایه دربارهٔ کاربر

• - کاربر سریع داوری می‌کند، و به کاربردپذیری و دوست‌داشتنی‌بودن اهمیت می‌دهد.
• - به طراحی شما اهمیت نمی‌دهد؛ به انجام‌شدن کارش با کمترین زحمت اهمیت می‌دهد.
• - پس طراحی باید «نامرئی» باشد: کاربر روی آن تمرکز نکند، روی کارش تمرکز کند.
• - رابط باید لذت‌بخش — یا دست‌کم رضایت‌بخش و بی‌سرخوردگی — باشد، و ارزش‌های برند را منتقل کند و اعتماد بسازد.

و تفکیکش از تجربهٔ کاربری: منبع می‌گوید طراحی رابط بیشتر به سطح و حس کلی مربوط است و تجربهٔ کاربری کل گسترهٔ تجربه را دربر می‌گیرد — با این تشبیه که تجربهٔ کاربری خودرو است و رابط، کنسول راننده. و نقل‌قول دان نورمن: «رابط‌ها سر راه‌اند. من نمی‌خواهم انرژی‌ام را روی رابط بگذارم؛ می‌خواهم روی کار بگذارم.»

فهرست راهنمای منبع

• - دکمه‌ها و عناصر رایج پیش‌بینی‌پذیر رفتار کنند تا کاربر ناخودآگاه همه‌جا از آن‌ها استفاده کند؛ فرم از کارکرد پیروی کند.
• - کشف‌پذیری بالا: آیکن‌ها برچسب روشن داشته باشند و قابلیت‌ها خوب نشان داده شوند (مثل سایهٔ دکمه).
• - رابط را ساده نگه دارید — فقط عناصری که به هدف کاربر خدمت می‌کنند.
• - به چشم و توجه کاربر در چیدمان احترام بگذارید: سلسله‌مراتب بینایی و خوانایی. ترازبندی درست — معمولاً تراز لبه، نه تراز مرکز.
• - توجه را با رنگ، روشنایی و تباین و با اندازه و وزن و شکل قلم هدایت کنید؛ کاربر باید با یک نگاه سریع معنا بگیرد.
• - تعداد کنش‌ها را کم کنید اما روی یک کارکرد اصلی در هر صفحه تمرکز کنید؛ کارهای پیچیده را با آشکارسازی تدریجی ساده کنید.
• - کنترل را نزدیک شیئی بگذارید که کنترل می‌کند؛ دکمهٔ ثبت فرم نزدیک فرم باشد.
• - کاربر را با بازخورد از پاسخ سامانه آگاه نگه دارید.
• - از الگوهای رابط مناسب استفاده کنید و از الگوهای فریبنده بپرهیزید.
• - ثبات برند را حفظ کنید، و همیشه گام بعدی را طوری بگذارید که کاربر خودش استنباط کند.
• - طراحی را به سکو و دستگاه بسپارید؛ رابط موبایل با دسکتاپ یکی نیست.
• - روندها را بررسی کنید — نئومورفیسم، اسکیومورفیسم، گلس‌مورفیسم — و ببینید در طراحی شما جواب می‌دهند یا نه.

و جمع‌بندی خودش: «بهترین رابط، بی‌رابط است» — پس مستقیم‌ترین و دسترس‌پذیرترین کنترل را بدهید و مدام بپرسید «می‌توانم ساده‌ترش کنم؟»

این حوزه «سطح» نیست

این بخش افزودهٔ مترجم است. تعریف «تمرکز بر ظاهر و سبک» با آن فهرست راهنما نمی‌خواند: پیش‌بینی‌پذیری، کشف‌پذیری، نزدیکی کنترل، بازخورد و یک‌کارکرد‌در‌هر‌صفحه هیچ‌کدام ظاهر نیستند. آن‌ها تصمیم‌های ساختاریاند که اتفاقاً دیده می‌شوند.

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

صورت‌بندی‌ای که به‌نظرم دقیق‌تر است:

• - تجربهٔ کاربری تعیین می‌کند سامانه چه کار می‌کند و به چه ترتیب.
• - و طراحی رابط تعیین می‌کند وضعیت سامانه چگونه دیده و دست‌کاری می‌شود.

این دومی سبک نیست؛ بخش مرئی مدل ذهنی است. و آزمونش ساده است: بیشتر شکست‌های کاربردپذیری‌ای که در آزمون می‌بینید، شکست زیبایی‌شناسی نیستند — کاربر نمی‌فهمد چه چیزی قابل کلیک است، در چه وضعیتی است، یا آخرین کنشش چه اثری داشت. هر سه، مسئلهٔ رابط‌اند به همین معنا.

و تشبیه «خودرو و کنسول راننده» هم همین‌جا می‌لنگد: کنسول راننده تزئین خودرو نیست؛ تنها راه فهمیدن این است که خودرو در چه وضعیتی است و تنها راه فرمان‌دادن به آن.

فهرست تخت، ترتیب تقدم لازم دارد

این بخش هم افزودهٔ مترجم است. آن فهرست پانزده‌قلمی همه‌چیز را در یک ردیف می‌گذارد — و دو قلمش با هم در تضادند: «کشف‌پذیری بالا با قابلیت‌های خوب‌نشان‌داده‌شده» و «روندهایی مثل نئومورفیسم را بررسی کنید». نئومورفیسم دقیقاً همان تباینی را از بین می‌برد که قلم دوم می‌خواهد.

وقتی راهنماها تخت باشند، در جلسهٔ تصمیم هیچ کمکی نمی‌کنند — چون هر طرف می‌تواند یک قلم را نشان بدهد. پس ترتیب تقدم لازم است، و پیشنهاد من این پنج پله است:

• - ۱. آیا کاربر می‌فهمد چه چیزی تعامل‌پذیر است؟ پیش از هر چیز دیگری. رابطی که نمی‌شود گفت کجایش دکمه است، شکست خورده — هرچقدر هم زیبا باشد.
• - ۲. آیا می‌فهمد سامانه در چه وضعیتی است؟ چه چیزی انتخاب شده، چه چیزی روشن است، چه چیزی در حال انجام است.
• - ۳. آیا می‌فهمد کنش آخرش چه کرد؟ همان بازخورد، و همان چیزی که در عاملیت نوشتم: کنترلی که ادراک نشود، وجود ندارد.
• - ۴. آیا سازگار است؟ با خودش، با سکو، و با انتظارهای جاافتاده.
• - ۵. و آیا خوشایند است؟ که مهم است — اما پنجم است.

و کاربرد این ترتیب: هر روندی که پله‌های ۱ تا ۳ را برای پلهٔ ۵ معامله کند، معاملهٔ بدی است — مستقل از اینکه در نمونه‌کار چقدر خوب به‌نظر می‌رسد. این تنها آزمونی است که برای «آیا این روند در طراحی من جواب می‌دهد؟» می‌شناسم.

«نامرئی» ویژگی یک لحظه است، نه یک محصول

این بخش هم افزودهٔ مترجم است. منبع سه شعار را پشت‌سرهم می‌گذارد که هم‌جهت به‌نظر می‌رسند: «فرم از کارکرد پیروی کند» · «طراحی نامرئی باشد» · «بهترین رابط بی‌رابط است». اما در عمل، شعار دوم و سوم اگر بی‌قید به‌کار روند خطرناک‌اند.

چون نامرئی‌بودن یعنی کاربر متوجه رابط نشود — و جاهایی هست که باید متوجه شود:

• - هرجا کاربر باید انتخاب کند. انتخاب نامرئی، انتخاب نیست.
• - هرجا خطر یا هزینه‌ای در کار است. پرداخت، حذف، اشتراک‌گذاری، تأیید مبلغ. تجربهٔ «بی‌اصطکاک» در این نقطه‌ها یک ایراد است، نه یک ویژگی — و همان چیزی است که به الگوی فریبنده تبدیل می‌شود.
• - و هرجا کاربر باید چیزی یاد بگیرد. ابزار تازه، مفهوم تازه، قاعدهٔ تازه.

پس قاعدهٔ من: رابط باید آنجا نامرئی باشد که قصد کاربر از قبل شکل گرفته، و آنجا دیده شود که قصد باید شکل بگیرد. و «قصد از قبل شکل‌گرفته» بیشتر جاهای محصول است — که همان دلیلی است که آن شعار این‌قدر جذاب به‌نظر می‌رسد. اما استثناها همان جاهایی هستند که بیشترین ضرر در آن‌ها اتفاق می‌افتد.

تراز لبه، در فارسی کدام لبه؟

این بخش هم افزودهٔ مترجم است. «معمولاً تراز لبه را به تراز مرکز ترجیح دهید» یکی از دقیق‌ترین و مفیدترین قلم‌های آن فهرست است و در یک نیم‌جمله رها شده. دلیلش هم روشن است: چشم برای خواندن یک ستون، به لبهٔ ثابت نیاز دارد؛ تراز مرکز، نقطهٔ شروع هر خط را جابه‌جا می‌کند و خواندن را کند می‌کند.

اما «لبه» در فارسی همان لبه نیست: لبهٔ آغاز، سمت راست است. و بیشتر خطاهایی که می‌بینم از یک جای مشخص می‌آیند — طرحی که از یک نمونهٔ چپ‌به‌راست ترجمه شده و ترازها با آن جابه‌جا نشده‌اند:

• - برچسب فرم‌ها که به چپ چسبیده‌اند در حالی که متنشان فارسی است.
• - و اعداد. عدد در متن فارسی چپ‌به‌راست می‌ماند — پس مبلغ، شمارهٔ تماس، شبا و کد پیگیری هرکدام به ظرف جهت‌دار خودشان نیاز دارند، وگرنه در ترکیب با متن فارسی جابه‌جا می‌شوند. و در جدول قیمت، ترازِ درست تراز رقم‌ها است نه تراز مرکز؛ ستونی که مرکزتراز است، مقایسهٔ دو عدد را عملاً ناممکن می‌کند.

در بافت فارسی: چیزهایی که آینه نمی‌شوند

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

• - آنچه جهت را رمزگذاری می‌کند، آینه می‌شود. فلش بازگشت، فلش ارسال، فلش‌های ناوبری، نوار پیشرفت، اسلایدر، و لغو/بازانجام.
• - آنچه شیء را رمزگذاری می‌کند، آینه نمی‌شود. ساعت، تیک تأیید، ذره‌بین، آیکن دوربین، و هر نشان یا لوگو.
• - و کنترل‌های رسانه آینه نمی‌شوند — پخش، قبلی و بعدی. این را اغلب اشتباه می‌کنند: جهتِ حرکت نوار زمان یک قرارداد جهانی است، نه یک جهت خواندن. آینه‌کردن دکمهٔ پخش، همان تباین آشنایی را از بین می‌برد که پلهٔ چهارم بالا می‌خواهد.

و سه نکتهٔ دیگر که در سامانه‌های طراحی ما مدام تکرار می‌شود:

• - قلم فارسی در همان اندازهٔ اسمی، فضای عمودی بیشتری می‌خواهد. اگر ارتفاع خط و اندازهٔ قلم را از یک سامانهٔ لاتین برداشته باشید، متن فارسی فشرده و کم‌خوان می‌شود. این تنظیم بصری است، نه ترجمه.
• - فارسی کوتاه‌نویسی ندارد. در انگلیسی می‌شود Config. نوشت؛ در فارسی نمی‌شود. پس برچسب‌ها باید از ابتدا کوتاه انتخاب شوند، نه با سه‌نقطه کوتاه شوند — چون سه‌نقطه در فارسی معنا را کامل از بین می‌برد.
• - و فعل فارسی بلندتر از فعل انگلیسی است. یک فراخوان دوکلمه‌ای انگلیسی معمولاً چهارکلمه‌ای می‌شود. اگر عرض دکمه‌ها را از نمونهٔ انگلیسی برداشته باشید، شکستن خط تضمینی است — و راه‌حلش نه کوچک‌کردن قلم است و نه سه‌نقطه؛ بازنویسی متن است.

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

جمع‌بندی

• - طراحی رابط کاربری ساختن رابط‌های نرم‌افزار است — گرافیکی، صوتی و ژست‌محور — با هدف آسانی و لذت.
• - کاربر سریع داوری می‌کند، به طراحی اهمیت نمی‌دهد و به انجام‌شدن کارش اهمیت می‌دهد؛ و فهرست راهنمای منبع پیش‌بینی‌پذیری، کشف‌پذیری، سادگی، سلسله‌مراتب، تراز لبه، بازخورد، نزدیکی کنترل و آشکارسازی تدریجی را می‌شمارد.
• - اما تعریف «سطح و ظاهر» با آن فهرست نمی‌خواند: تجربهٔ کاربری تعیین می‌کند سامانه چه می‌کند، و رابط تعیین می‌کند وضعیت سامانه چگونه دیده و دست‌کاری می‌شود — که بخش مرئی مدل ذهنی است، نه سبک.
• - فهرست تخت در جلسهٔ تصمیم بی‌فایده است؛ ترتیب تقدم لازم دارد: تعامل‌پذیری، وضعیت، بازخورد، سازگاری، و بعد خوشایندی — و هر روندی که سه پلهٔ اول را برای پلهٔ آخر معامله کند، معاملهٔ بدی است.
• - «نامرئی» ویژگی یک لحظه است نه یک محصول: رابط آنجا نامرئی باشد که قصد از قبل شکل گرفته، و آنجا دیده شود که کاربر باید انتخاب کند یا خطری در کار است یا چیزی باید یاد بگیرد.
• - تراز لبه در فارسی یعنی تراز راست، و اعداد چپ‌به‌راست می‌مانند — پس مبلغ و شماره و شبا ظرف جهت‌دار می‌خواهند و ستون قیمت باید رقم‌تراز باشد.
• - در راست‌به‌چپ، آنچه جهت را رمزگذاری می‌کند آینه می‌شود و آنچه شیء را رمزگذاری می‌کند نه — و کنترل‌های رسانه آینه نمی‌شوند.
• - و سامانهٔ طراحی را با متن و عدد واقعی فارسی بسازید: ارتفاع خط بیشتر، برچسب‌های کوتاه از ابتدا، و عرض دکمه‌ها بر پایهٔ فعل فارسی نه انگلیسی.