در صفحه انتخاب یک دوره، کاربر باید موضوع، سطح و هزینه را پیدا کند و سپس تصمیم بگیرد جزئیات را بخواند یا ثبت‌نام کند. اگر نشان تخفیف از عنوان بزرگ‌تر باشد و پیش‌نیازها زیر چند بخش تزئینی پنهان شوند، ترتیب توجه با ترتیب تصمیم هماهنگ نیست. Visual Hierarchy رابطه اهمیت محتوا و برجستگی دیداری را تنظیم می‌کند؛ این رابطه باید از کار واقعی صفحه بیاید.
بزرگ‌تر بودن همیشه به معنی مهم‌تر بودن نیست. یک لوگوی بزرگ ممکن است هویت را نشان دهد، اما هنگام اصلاح خطای پرداخت، پیام خطا و عمل بعدی اولویت دارند. سلسله‌مراتب در حالت‌های مختلف صفحه تغییر می‌کند. بنابراین آن را فقط برای screenshot حالت عادی طراحی نکنید؛ loading، نتیجه جست‌وجو، خطا و مرحله تأیید هم به ترتیب توجه مشخص نیاز دارند.
قبل از اندازه فونت، اولویت محتوا را بنویسید
فهرست اطلاعات صفحه را تهیه کنید و برای هر مورد بنویسید به کدام سؤال کاربر پاسخ می‌دهد. در مثال فرضی دوره، عنوان موضوع را معرفی می‌کند، پیش‌نیاز مناسب بودن را روشن می‌کند و هزینه شرط تصمیم مالی را توضیح می‌دهد. این نمونه نتیجه یک پروژه واقعی نیست. هدف این است که اهمیت بخش‌ها از مسیر انتخاب استخراج شود، نه از سلیقه درباره کارت و gradient.
اولویت محصول و اولویت کاربر ممکن است متفاوت باشند. تیم شاید بخواهد ثبت‌نام بیشتر شود، ولی کاربر ابتدا می‌خواهد مطمئن شود سطح دوره مناسب اوست. برجسته کردن دکمه پیش از اطلاعات لازم می‌تواند تصمیم را ناقص کند. در جلسه طراحی، این تفاوت را آشکار کنید. اگر اطلاعاتی برای تصمیم ضروری است، نباید برای کوتاه کردن صفحه به بخش کم‌دیده منتقل شود.
برای هر بخش، یک سؤال اصلی نگه دارید. بخشی که هم معرفی مدرس، هم ضمانت و هم مقایسه طرح‌ها را با وزن یکسان نشان می‌دهد، مسیر مرور مشخصی ندارد. گروه‌ها را با عنوان و ترتیب روشن جدا کنید. این تفکیک لزوماً به معنای افزودن چند کارت تازه نیست؛ گاهی یک عنوان مناسب و فاصله بین گروه‌ها کافی است.
Typography چند نقش محدود و قابل تشخیص بسازد
عنوان صفحه، عنوان بخش، متن اصلی و توضیح کمکی نقش‌های متفاوتی‌اند. برای هر نقش اندازه، وزن و فاصله مناسب تعریف کنید و در بخش‌های مشابه ثابت نگه دارید. استفاده از اندازه‌های متعدد با تفاوت بسیار کم، نظام قابل فهمی نمی‌سازد. کاربر نباید از روی تفاوت ظریف یک pixel تشخیص دهد چه چیزی عنوان و چه چیزی توضیح است.
وزن فونت و طول سطر را همراه اندازه ببینید. متن پررنگ طولانی می‌تواند سطح توجه را اشغال کند و خواندن را کندتر سازد. عنوان بلند فارسی را در چند عرض بررسی کنید تا شکست سطر معنا را مخدوش نکند. فاصله بین عنوان و متن مربوط باید وابستگی آن‌ها را نشان دهد؛ فاصله بیش از حد ممکن است عنوان را متعلق به بخش قبلی جلوه دهد.
ظاهر عنوان با مرتبه HTML آن یکی نیست. عنوانی که از نظر ساختار h2 است می‌تواند برای یک ترکیب خاص اندازه متناسب داشته باشد. برای گرفتن فونت کوچک‌تر، آن را به h4 تبدیل نکنید. مقاله تایپوگرافی وب ادامه‌ای برای انتخاب اندازه و خوانایی است؛ ساختار محتوایی را در کنار تصمیم دیداری نگه دارید.
Contrast را هدفمند به کار ببرید
Contrast زیاد توجه را جلب می‌کند، اما اگر همه کادرها، آیکون‌ها و متن‌ها شدت برابر داشته باشند، رقابت زیاد می‌شود. رنگ برجسته را به عمل یا اطلاعاتی اختصاص دهید که در همان زمینه اولویت دارد. توضیح کمکی می‌تواند کم‌تأکیدتر باشد، ولی کم‌تأکید بودن نباید به ناخوانایی برسد. کاهش opacity بدون محاسبه رنگ نهایی ممکن است متن را از حد لازم پایین‌تر ببرد.
در سطح AA، WCAG Contrast Minimum برای متن معمولی حداقل 4.5:1 و برای متن بزرگ حداقل 3:1 تعیین می‌کند. این حداقل‌ها اندازه اهمیت محتوا را مشخص نمی‌کنند. می‌توانید سلسله‌مراتب را با وزن، فاصله و موقعیت بسازید و متن کمکی همچنان خوانا باشد. رنگ برند نیز باید با رنگ متن روی آن به عنوان یک جفت بررسی شود.
استفاده از قرمز برای هشدار، بدون نام و توضیح کافی نیست. در حالت عادی شاید یک عدد قرمز جلب توجه کند، اما معنای آن می‌تواند افزایش هزینه یا کاهش درآمد باشد. برچسب، واحد و زمینه را اضافه کنید. کاربرانی که رنگ را متفاوت می‌بینند نیز باید وضعیت را بفهمند؛ هدف برجستگی، انتقال اطلاعات درست است.
گروه‌بندی را با فاصله و هم‌ترازی بسازید
فاصله بین عناصر مرتبط را از فاصله بین گروه‌ها کم‌تر بگیرید. وقتی label به فیلد بعدی نزدیک‌تر از فیلد خودش باشد، وابستگی دیداری اشتباه می‌شود. همین موضوع در عنوان کارت و اطلاعات زیر آن وجود دارد. با یک مقیاس فاصله محدود، این رابطه را در componentهای مشابه حفظ کنید؛ فاصله‌های تصادفی باعث می‌شوند کاربر هر بار گروه‌بندی را دوباره تفسیر کند.
هم‌ترازی، مقایسه را آسان‌تر می‌کند. در جدول قیمت، عنوان ویژگی‌ها و مقادیر طرح‌ها باید رابطه روشن داشته باشند. عدد و واحد را از هم دور نکنید. اگر چند بخش مستقل را فقط برای ایجاد تقارن ظاهری هم‌تراز می‌کنید، ممکن است ارتباطی القا شود که در محتوا وجود ندارد. Grid ابزار تنظیم صفحه است و باید به معنای داده خدمت کند.
مرز و سطح رنگی را وقتی اضافه کنید که به تشخیص گروه کمک کنند. قرار دادن هر جمله در کارت جدا، تعداد مرزهای دیداری را زیاد می‌کند. گاهی متن یکپارچه با عنوان‌های روشن برای خواندن مناسب‌تر است. اگر همه چیز در یک سطح قرار می‌گیرد، کاربر تفاوت معرفی، جزئیات و عمل را با دشواری بیش‌تری پیدا می‌کند.
موقعیت ثابت، ترتیب توجه را تضمین نمی‌کند
قاعده «بالا و چپ اول دیده می‌شود» برای همه رابط‌ها و کارها دقیق نیست. جهت نوشتار، layout و نقطه ورود کاربر اثر دارند. در فارسی، آغاز متن معمولاً سمت راست است؛ با این حال محل یک نمودار یا پیام می‌تواند بر اساس کار تعیین شود. ترتیب را با محتوای واقعی بررسی کنید و از انتقال مستقیم الگوی LTR به RTL دور بمانید.
کاربر همیشه از بالای صفحه وارد نمی‌شود. ممکن است لینک مستقیم به یک بخش، نتیجه جست‌وجو یا بازگشت از جزئیات او را در میانه صفحه قرار دهد. هر بخش باید عنوان و زمینه کافی داشته باشد تا مستقل قابل فهم بماند. برای مثال، عدد قیمت بدون نام طرح یا دوره در یک بخش میانی، حتی اگر در بالای صفحه توضیح داده شده باشد، می‌تواند مبهم باشد.
Meaningful Sequence در WCAG حفظ ترتیب برنامه‌ای معنادار را وقتی ترتیب بر معنا اثر دارد توضیح می‌دهد. تغییر موقعیت با CSS نباید دستورالعمل یا مراحل را در ترتیب نامفهوم قرار دهد. سلسله‌مراتب دیداری باید همراه ساختار DOM و ترتیب Keyboard کار کند؛ به‌ویژه وقتی layout در عرض کوچک تغییر می‌کند.
عمل اصلی را از عمل جایگزین جدا کنید
دکمه اصلی باید عمل مشخص همین مرحله را نام ببرد. «ادامه» در مسیر چندمرحله‌ای ممکن است مناسب باشد، اما اگر نتیجه پرداخت یا ارسال نهایی است، باید آن تفاوت دیده شود. عمل جایگزین مثل ذخیره پیش‌نویس وزن کم‌تری می‌گیرد، ولی همچنان قابل یافتن می‌ماند. دو دکمه پررنگ با معنای مبهم، تصمیم را به حدس تبدیل می‌کنند.
عمل مخرب را صرفاً برای جلب توجه به مهم‌ترین رنگ صفحه تبدیل نکنید. محل و توضیح باید احتمال اجرای اشتباه را محدود کنند. اگر حذف بخشی از مسیر معمول نیست، آن را کنار عمل ادامه با شکل یکسان نگذارید. در مرحله تأیید، نام مورد و نتیجه عمل را بیاورید؛ برجستگی دیداری باید با شدت و برگشت‌پذیری تصمیم هماهنگ شود.
دستورهایی مثل «دکمه سبز سمت چپ را بزنید» در تغییر Theme، زبان یا عرض صفحه قابل اتکا نیستند. Sensory Characteristics می‌خواهد دستور فقط به رنگ، شکل یا موقعیت وابسته نباشد. نام دکمه را در متن بیاورید. نشانه دیداری می‌تواند کمک کند، اما نباید تنها روش شناسایی کنترل باشد.
در Responsive همان اولویت را حفظ کنید
وقتی چند ستون به یک ستون تبدیل می‌شوند، ترتیب عمودی باید از اولویت محتوا بیاید. Sidebar ممکن است پس از متن قرار بگیرد، ولی اگر شامل شرط لازم تصمیم است، انتقال آن به انتهای طولانی صفحه مناسب نیست. اطلاعات مرتبط را نزدیک نقطه تصمیم نگه دارید. کوچک کردن فونت برای حفظ همه ستون‌ها معمولاً مسئله خواندن را به کاربر منتقل می‌کند.
برای component قابل استفاده در بخش‌های مختلف، اندازه محل قرارگیری مهم است. یک کارت در Sidebar و بخش اصلی فضای یکسان ندارد. مقاله Container Queries به این تفاوت می‌پردازد. تغییر layout باید ترتیب معنی را حفظ کند و متن اصلی را به خاطر جا دادن یک بخش تزئینی حذف نکند.
Dark Mode هم می‌تواند وزن دیداری را تغییر دهد. سایه‌ای که در حالت روشن مرز گروه را می‌سازد، روی زمینه تیره ممکن است کم‌اثر شود. رنگ accent هم نسبت متفاوتی با پس‌زمینه پیدا می‌کند. برای هر Theme، سلسله‌مراتب حالت‌های اصلی را مرور کنید. مقاله طراحی Dark Mode برای تعریف رنگ‌ها بر اساس نقش ادامه مرتبط است.
با یک وظیفه، ترتیب واقعی توجه را بررسی کنید
در بررسی طرح، از فرد بخواهید سطح مناسب دوره را تشخیص دهد و هزینه نهایی را پیدا کند. اینکه کدام چیز را ابتدا نام می‌برد سرنخ است، اما به تنهایی موفقیت را ثابت نمی‌کند. ببینید آیا اطلاعات لازم را فهمیده و تصمیم درست گرفته است. نسخه‌ای که دکمه‌اش زود دیده می‌شود ولی شرط اصلی را پنهان می‌کند، لزوماً تجربه بهتری ندارد.
در تحویل، نقش‌های Typography، فاصله گروه‌ها و اولویت عمل‌ها را ثبت کنید. این قواعد باید به محتوای بلند، خطا و عرض کوچک هم قابل تعمیم باشند. اگر توسعه‌دهنده مجبور است برای هر متن یک اندازه تازه انتخاب کند، نظام هنوز روشن نیست. مستند باید توضیح دهد کدام عنصر چه نقشی دارد تا تغییر محتوای بعدی ترتیب توجه را تصادفی عوض نکند.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!