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

رهنمودهای طراحی (Design Guidelines) چیست؟

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

هر تیمی که بزرگ می‌شود، دیر یا زود یک سند رهنمود می‌نویسد. و بخش بزرگی از آن اسناد، شش ماه بعد به چیزی تبدیل می‌شود که کسی نمی‌داند چه‌کسی نوشته، چرا نوشته، و آیا هنوز درست است یا نه.

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

تعریف

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

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

و منبع رهنمودها را در شش دسته می‌گذارد:

• - سبک: لوگو و رنگ برند · چیدمان: ساختار شبکه‌ای یا فهرستی.
• - مؤلفه‌های رابط: منو، دکمه · متن: فونت، لحن، برچسب و فیلد.
• - دسترس‌پذیری: نشانه‌گذاری ARIA · الگوهای طراحی: مثل فرم‌ها.

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

نسبتش با اصل و قاعده

منبع همان نردبان سه‌سطحی را می‌سازد و مثال روشنی می‌دهد که ارزش نقل‌کردن دارد:

• - اصل: پیام خطا را به زبان ساده بنویس تا مسئله و راه‌حل محتمل را نشان بدهد.
• - رهنمود: متن را درشت و بی‌اصطلاح و با فونت ایمن بنویس؛ جمله‌ها کوتاه، و توجه کاربر را به علت و درمان ببر.
• - قاعده: جورجیای سیاه ۲۰ پوینت روی زمینهٔ اسطوخودوسی، دستورها هم بولد.

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

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

دستگاه‌های رهنمود شرکتی

منبع مایکروسافت و اپل و گوگل را نمونه می‌آورد — و Material Design را مثال دستگاهی که هم برند است و هم تجربه کاربری. و چند قید عملی می‌گذارد:

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

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

رهنمودی که نمی‌توان بازرسی‌اش کرد، سلیقه است

این بخش افزودهٔ مترجم است و از همان «تفسیرپذیری» منبع شروع می‌شود.

ویژگی‌ای که رهنمود را از سلیقه جدا می‌کند بازرسی‌پذیری است: آیا نفر دوم، بی آنکه از نویسنده بپرسد، می‌تواند بگوید این رهنمود رعایت شده یا نه؟ سه سطح دارد:

• - خودکار: ماشین می‌تواند چکش کند. «همهٔ فاصله‌ها از مقیاس توکن‌ها.» «نسبت کنتراست حداقل ۴٫۵.»
• - قابل‌بازبینی: ماشین نه، ولی دو آدم مستقل به یک جواب می‌رسند. «هر فیلد اجباری برچسب دارد.» «هر پیام خطا یک راه‌حل پیشنهاد می‌دهد.»
• - مورد بحث: دو آدم مستقل به دو جواب می‌رسند. «رابط باید مدرن و تمیز باشد.» این رهنمود نیست؛ سلیقه است با لباس رسمی.

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

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

رهنمود فاسد می‌شود

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

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

نتیجه‌اش آیین کارگوست: تیم قاعده‌ای را رعایت می‌کند که دلیلش سال‌ها پیش مرده. و علتش یک نقص قالب است: بیشتر اسناد رهنمود فقط قاعده را ذخیره می‌کنند.

قالب سه‌فیلدی این را حل می‌کند. هر بند باید سه چیز داشته باشد:

• - قاعده: چه کاری بکن. «دکمهٔ اصلی هر صفحه یکی است.»
• - چون: کدام مسئله را حل می‌کند. «چون در آزمون، کاربران با دو دکمهٔ هم‌وزن مکث می‌کردند.»
• - وقتی‌که نه: کجا اعمال نمی‌شود. «در جریان‌های تأییدی که دو اقدام واقعاً هم‌ارزند.»

فیلد دوم رهنمود را قابل بازبینی و ابطال می‌کند؛ فیلد سوم جلوی مهم‌ترین سوءاستفاده را می‌گیرد — استفاده از رهنمود به‌عنوان چماق در جایی که هرگز برایش نوشته نشده بود. و بندی که نمی‌توانید فیلد «چون»ش را پر کنید، احتمالاً از اول رهنمود نبوده.

مالک رهنمود کیست

و بخش سوم مترجم، سؤالی که اسناد رهنمود معمولاً جواب نمی‌دهند: چه‌کسی می‌تواند این بند را عوض کند؟

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

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

پس نتیجه‌اش این است: رهنمودی که در مؤلفه‌ها پیاده نشده، تقریباً وجود ندارد. اگر بندی برایتان مهم است، به‌جای پروپروتر‌کردن سند، آن را به پیش‌فرض یک مؤلفه تبدیل کنید. سند برای چیزهایی است که نمی‌شود در کد بست — قضاوت، لحن، اولویت.

در بافت فارسی: آینه‌کردن ترجمه نیست

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

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

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

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

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

جمع‌بندی

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