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

الگوهای طراحی رابط کاربری (UI Design Patterns) چیست؟

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

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

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

الگوی طراحی رابط کاربری چیست؟

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

منبع یک قید مهم هم اضافه می‌کند. الگو را می‌شود در موقعیت‌های زیادی به کار برد، اما همیشه باید آن را با بافت استفادهٔ خاص همان محصول جور کرد. الگو قالب آماده نیست، نقطهٔ شروع است.

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

کالبد یک الگو

منبع می‌گوید الگوها مثل نقشهٔ ساختمان‌اند و هر کدام معمولاً از چند بخش ساخته می‌شوند. نمودار بالای صفحه همین بخش‌ها را روی الگوی خرده‌نان نشان می‌دهد:

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

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

الگوهای رایج

منبع فهرستی از رایج‌ترین الگوها می‌آورد. بعضی‌شان در این سایت مقالهٔ جداگانه دارند:

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

نمودار بالا فرق ثبت‌نام تنبل با ثبت‌نام اجباری را نشان می‌دهد. هر دو مسیر یک فرم دارند. اما در مسیر اول، فرم دیوار ورودی است و کاربر هنوز چیزی به دست نیاورده که به خاطرش بماند. در مسیر دوم، فرم در انتها می‌آید و کاربر سبدی دارد که نمی‌خواهد از دستش بدهد.

منبع برای این الگو دو نکتهٔ تکمیلی هم دارد. اگر محتوایی فقط برای کاربران عضو است، فرم ثبت‌نام را تا جای ممکن ساده کنید. فیلدهای اختیاری را هم کم کنید یا حذف کنید، و فیلدهای اجباری را روشن علامت بزنید.

الگوهای کوچک‌تر و دسته‌بندی‌ها

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

منبع الگوها را در چند دسته هم می‌گذارد. الگوهای آشناسازی کاربر تازه را با محصول آشنا می‌کنند. الگوهای اشاره‌ای حرکت‌هایی مثل ضربه زدن و کشیدن را به کار می‌گیرند، که بعضی‌شان را اپ‌هایی مثل Tinder رایج کرده‌اند. الگوهای یکپارچگی هم اپ را با سکوهای دیگر پیوند می‌دهند تا رفت‌وآمد میانشان روان باشد.

مثال دیگر منبع فیلتر محصول در فروشگاه اینترنتی Galaxus است. فیلترها با هر انتخاب صفحه را از نو بار نمی‌کنند و در موبایل از کنار صفحه وارد می‌شوند. همین دو تصمیم کوچک، جستجو را خیلی آرام‌تر می‌کند.

دربارهٔ الگوهای تاریک

منبع در همین فهرست به الگوهای تاریک هم اشاره می‌کند: ترفندهایی که کاربر را به کاری می‌کشانند که شاید نخواهد، مثل خرج بیشتر یا دادن اطلاعات شخصی. مثال‌هایش گذاشتن پیش‌فرضی است که کاربر را عضو خبرنامه می‌کند، یا گذاشتن کالا در سبد بدون اجازهٔ کاربر.

منبع می‌گوید برای استفادهٔ «مسئولانه» از این الگوها باید اخلاقی بود و با کاربر همدلی داشت. هشدار هم می‌دهد که بی‌اعتمادی کاربر می‌تواند یک‌شبه اعتبار برند را نابود کند.

این‌جا با منبع کمی فرق دارم و این نظر شخصی من است. الگوی تاریک را به نظرم نمی‌شود مسئولانه به کار برد، چون تعریفش همین است که به ضرر کاربر کار می‌کند. همدلی با کاربر و فریب دادن او در یک طراحی جمع نمی‌شوند. شرح کامل این ترفندها و راه تشخیصشان در الگوهای فریبنده آمده است.

چه وقت الگو دردسر می‌شود؟

منبع می‌گوید الگوها رایگان در دسترس‌اند و وقت و هزینه را کم می‌کنند، چون لازم نیست برای هر رابط چرخ را از نو اختراع کنید. نمونه‌سازی را هم سریع‌تر می‌کنند و کاربر با آن‌ها احساس آشنایی دارد. اما انتخاب غلط پرهزینه است، مثلاً وقتی:

• - تکیهٔ بیش از حد: مسئله را با الگو شروع می‌کنید، نه با خود مسئله، و جواب غلط می‌گیرید.
• - بی‌توجهی به بافت: الگو را بدون تنظیم برای موقعیت خاص محصول به کار می‌برید.
• - گم شدن هویت: محصولتان در نهایت شبیه Facebook یا هر محصول مشهور دیگری می‌شود.
• - نبود مدیریت: اگر الگوی خودتان را می‌سازید، باید روشن کنید کجا و برای چه مسئله‌ای به کار می‌رود، نسخه‌اش را نگه دارید، و جایی بگذارید که همهٔ تیم ببینند.

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

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

الگو، کیت و سیستم طراحی

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

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

الگوها در بافت فارسی

این بخش هم افزودهٔ من است و از کار روی محصولات ایرانی می‌آید.

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

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

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

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

جمع‌بندی

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

اگر یک جمله بماند، همین باشد: الگو را از ستون مسئله بخوانید، نه از ستون راه‌حل. راه‌حل خوب برای مسئله‌ای که ندارید، فقط شلوغی تازه است.