سلسله مراتب بصری در طراحی وب: یک چارچوب عملی با مثال‌ها

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

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

این قطعه نسخه عملیاتی آن راه حل است. پنج اهرم، شش صفحه فرود واقعی از Linear، Vercel، Stripe، Figma، Arc و Apple به همراه سلسله مراتبی که همین الان در حال انجام آن هستند، سه نقد قبل/بعد که اشکالات رایج و راه حل واقعی را نشان می‌دهند، و یک چک لیست ممیزی Figma که می‌توانید روی هر فایل کاری در بیست دقیقه قبل از ارسال آن به توسعه‌دهنده اجرا کنید.

سلسله مراتب بصری، تعریف کاربردی

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

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

کار به صورت صفحه به صفحه تغییر می‌کند. یک صفحه اصلی نیاز دارد که چشم روی یک پیشنهاد قیمت، سپس یک فراخوان عمل (CTA) قرار گیرد. یک صفحه قیمت‌گذاری نیاز دارد که چشم روی سطح توصیه شده، سپس سطح ارزان‌تر، سپس سوالات متداول قرار گیرد. یک پست وبلاگ نیاز دارد که چشم روی تیتر، سپس فهرست، و سپس پاراگراف اول قرار گیرد. تنظیمات اهرم سلسله مراتب با کار تغییر می‌کند. واقعیت این است که وجود سلسله مراتب این‌طور نیست.

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

پنج اهرمی که سلسله مراتب را می‌سازند

اندازه، وزن، فضا، کنتراست و حرکت تنها ابزارهایی هستند که شما نیاز دارید. هر چیز دیگری ترکیبی از این پنج مورد است.

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

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

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

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

اندازه، اولین خوانش را تعیین می‌کند

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

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

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

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

اندازه نیز نسبی است. یک عنوان ۴۸ پیکسلی در صفحه‌ای که متن بدنه ۱۶ پیکسل است، چشمگیر است. یک عنوان ۴۸ پیکسلی در صفحه‌ای که متن بدنه ۲۸ پیکسل است، چشمگیر نیست. نسبت چیزی است که رتبه را ایجاد می‌کند، نه عدد مطلق. نسبت عنصر اصلی به بدنه را در هر صفحه فرودی حداقل ۲.۵ برابر و در حالت ایده‌آل ۳ برابر یا بالاتر در نظر بگیرید.

وزن، عنصر اصلی را از عنصر فرعی جدا می‌کند

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

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

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

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

وزن فراتر از تایپوگرافی است. دکمه فراخوان عمل (CTA) وزن بصری سنگین‌تری نسبت به عناصر اطراف دارد که از طریق رنگ پرکننده، ضخامت حاشیه یا سایه برجسته حاصل می‌شود. یک ردیف قیمت‌گذاری ویژه وزن بصری سنگین‌تری نسبت به ردیف‌های اطراف دارد که از طریق پس‌زمینه تیره‌تر کارت یا حاشیه ضخیم‌تر حاصل می‌شود. اصل کار یکسان است. جرم سنگین‌تر برابر با رتبه بالاتر است.

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

فضا اهرمی است که کمتر مورد استفاده قرار می‌گیرد

فضای خالی خالی نیست، بلکه شکل منفی است که به هر عنصر دیگر رتبه می‌دهد.

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

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

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

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

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

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

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

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

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

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

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

حرکت، توالی را کامل می‌کند

حرکت آخرین اهرم و اغلب مورد سوءاستفاده قرار می‌گیرد، زیرا اکثر تیم‌ها آن را به عنوان تزئین در نظر می‌گیرند در حالی که در واقع یک نشانه جهت‌دار است.

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

از حرکت به مقدار کم و فقط روی عنصر با بالاترین اولویت استفاده کنید. تیتر اصلی متحرک می‌شود. فراخوان عمل (CTA) حالت شناور دارد. متن پشتیبان ثابت است. چشم ابتدا روی تیتر فرود می‌آید زیرا عنصری است که حرکت کرده است، سپس وقتی مکان‌نما نزدیک می‌شود روی فراخوان عمل می‌کند و مسیر خواندن حفظ می‌شود.

صفحه اصلی Vercel از حرکت به عنوان یک اهرم سلسله مراتبی اصلی استفاده می‌کند. قهرمان با یک توالی عمدی متحرک‌سازی می‌شود، ابتدا تیتر، سپس متن پشتیبان، و در نهایت فراخوان عمل (CTA) و بقیه صفحه تا زمانی که کاربر اسکرول کند، عمدتاً ثابت است. حرکت، توالی است. زمانی که بازدیدکننده انیمیشن قهرمان را تمام می‌کند، صفحه را به ترتیبی که Vercel می‌خواسته بخواند، خوانده است.

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

شش صفحه فرود واقعی، حاشیه‌نویسی شده

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

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

Linear، سلسله مراتب به عنوان فشرده‌سازی

Linear یکی از تمیزترین سلسله مراتب‌ها را در وب ارائه می‌دهد زیرا هر اهرم دقیقاً یک کار را انجام می‌دهد.

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

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

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

Vercel، ​​سلسله مراتب به عنوان حرکت

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

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

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

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

Stripe، سلسله مراتب به عنوان محدودیت

سلسله مراتب Stripe عمدتاً نامرئی است، که بالاترین شکل این هنر است.

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

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

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

Figma، سلسله مراتب به عنوان تراکم

Figma تقریباً از هر رقیب دیگری در یک قهرمان، محتوای بیشتری را جای می‌دهد و همچنان مسیر خواندن را واضح نگه می‌دارد.

اندازه: تیتر بزرگ در مقابل یک صفحه کوچک‌تر، با عناصر رابط کاربری محصول که باز هم کوچک‌تر مقیاس‌بندی شده‌اند. وزن: تیتر سنگین، صفحه معمولی، همپوشانی‌های رابط کاربری سبک. فضا: کمتر از Linear یا Stripe، بیشتر از اکثر رقیبان SaaS. کنتراست: در تیتر در مقابل پس‌زمینه تیره، بالا، در عناصر اطراف، پایین‌تر. حرکت: در پیش‌نمایش محصول، ظریف، بدون هیچ چیز در خود تیتر.

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

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

Arc، سلسله مراتب به عنوان شورش

Arc عمداً قراردادهای اندازه و وزن را می‌شکند، و سلسله مراتب همچنان به این دلیل که کنتراست و حرکت بار را حمل می‌کنند، کار می‌کند.

اندازه: چشمگیر نیست. وزن: سنگین نیست. فضا: متغیر، گاهی اوقات تنگ. کنتراست: در سراسر صفحه، با رنگ‌های اشباع متعدد. حرکت: سنگین، با اختلاف منظر، نمایش‌های اسکرولی و تصاویر متحرک.

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

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

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

Apple، سلسله مراتب به عنوان تئاتر

صفحات محصول Apple کلاس اصلی در سلسله مراتب مبتنی بر اسکرول هستند، جایی که فضا و حرکت نمایش را اجرا می‌کنند.

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

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

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

سایتی می‌خواهید که هر صفحه یک مسیر خواندن آگاهانه داشته باشد و نه یک حدس؟ استخدام ⟦برند ۰⟧. UXBrainy ممیزی‌های سلسله مراتبی و کار کامل سیستم طراحی را ارائه می‌دهد، AppBrainy رابط کاربری محصول را برای تیم‌هایی که می‌خواهند همان نظم در یک برنامه کاربردی اعمال شود، ارائه می‌دهد.

سه نقد قبل و بعد

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

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

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

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

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

چک لیست ممیزی بیست دقیقه‌ای Figma

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

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

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

۳. نسبت مقیاس-نوع. تیتر اصلی را در مقایسه با متن اصلی اندازه بگیرید. اگر این نسبت کمتر از ۲.۵ برابر باشد، اهرم اندازه کم است.

۴. موجودی وزن. عناصر پررنگ شده در صفحه را بشمارید. اگر بیش از سه مورد در هر صفحه نمایش وجود داشته باشد، وزن تزئین کننده است، نه رتبه بندی.

۵. تعداد اشباع. رنگ‌های تأکیدی اشباع شده در صفحه را بشمارید. اگر بیش از دو مورد وجود داشته باشد، کنتراست خسته کننده است، نه رتبه بندی.

۶. نسبت فضای خالی. فضای خالی در صفحه نمایش اصلی را تخمین بزنید. اگر کمتر از شصت درصد باشد، اهرم فضا کم است.

۷. موجودی حرکت. عناصری را که در اولین بارگذاری متحرک هستند بشمارید. اگر بیش از دو مورد وجود داشته باشد، حرکت رتبه بندی را متوقف کرده است.

۸. کنتراست فراخوان عمل (CTA). رنگ فراخوان عمل اصلی را در مقایسه با پس زمینه آن بررسی کنید. اگر نسبت کنتراست کمتر از ۴.۵:۱ باشد، قبل از ارسال آن را اصلاح کنید.

۹. کنتراست متن اصلی. متن بدنه را در مقابل پس‌زمینه بررسی کنید. اگر نسبت زیر ۷:۱ باشد، صفحه خوانایی خوبی ندارد.

۱۰. ارتفاع خط. ارتفاع خط متن بدنه را بررسی کنید. اگر اندازه فونت کمتر از ۱.۵ برابر باشد، صفحه مانند دیوار خوانده می‌شود.

۱۱. فاصله‌گذاری بخش‌ها. فاصله بین بخش‌های اصلی را بررسی کنید. اگر بخش‌ها با هم محو می‌شوند، اهرم فاصله واحدها را از هم جدا نمی‌کند.

۱۲. تست کوچک‌سازی موبایل. فایل را در عرض موبایل باز کنید. آیا سلسله مراتب حفظ می‌شود یا عنوان به اندازه متن بدنه کوچک می‌شود؟ اگر مورد دوم باشد، مقیاس نوع نیاز به تنظیم موبایل دارد.

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

سوالات متداول

سلسله مراتب بصری در طراحی وب چیست؟

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

چگونه سلسله مراتب بصری را در یک وب‌سایت ایجاد می‌کنید؟

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

مهمترین اصول سلسله مراتب بصری چیست؟

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

چرا سلسله مراتب بصری در صفحات فرود اهمیت دارد؟

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

تفاوت بین سلسله مراتب بصری و معماری اطلاعات چیست؟

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

الگویی که اکثر صفحات از دست می‌دهند

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

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

برندهایی که سلسله مراتب قوی ارائه می‌دهند (Linear، Stripe، Apple) همگی این موضوع را درونی کرده‌اند. برندهایی که سلسله مراتب ضعیف‌تری ارائه می‌دهند، معمولاً در دام افزایشی افتاده‌اند، جایی که هر بررسی فصلی یک عنصر جدید به قهرمان، یک عبارت پررنگ جدید به بدنه، یک رنگ تأکیدی جدید به CTA اضافه می‌کند و اثر تجمعی، مسیر خواندن اصلی را از بین می‌برد. راه حل به ندرت طراحی مجدد است. راه حل، ممیزی، حذف و بازگشت به نظم و انضباط استفاده از هر اهرم برای یک هدف در هر زمان است.

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

اگر سایتی می‌خواهید که هر صفحه آن یک مسیر خواندن آگاهانه و سلسله مراتبی داشته باشد که کار خود را در هر صفحه نمایش انجام دهد، استخدام ⟦برند ۰⟧. UXBrainy ممیزی‌های سلسله مراتبی، سیستم‌های طراحی و پروژه‌های کامل طراحی وب را با سلسله مراتبی که در مشخصات گنجانده شده است، ارائه می‌دهد. AppBrainy رابط کاربری محصول را با همان نظم و انضباطی که برای سطوح محصول وارد شده اعمال می‌شود، ارائه می‌دهد. چارچوب موجود در این صفحه همان چیزی است که ما قبل از ارسال هر چیزی، در هر پروژه، در هر صفحه اجرا می‌کنیم.