7 اصل سلسله مراتب بصری برای هر بازاریاب

آیا تا به حال بر روی یک وب سایت کلیک کرده اید، یک نگاهی بیندازید و بگویید “هوم، این یک نه” است و به دنبال دکمه خروج بگردید؟ برای من، این معمولاً به سه دلیل است: سایت قدیمی به نظر می رسد، به هم ریخته است، یا پیمایش آن دشوار است.

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

در اینجا یک راهنمای آسان برای درک اصول کلیدی طراحی سلسله مراتب بصری برای جذب مخاطب، نگه داشتن آنها و ایجاد تبدیل ارائه شده است.

محتوا

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

وقتی به سلسله مراتب بصری فکر می کنید، می خواهید چند سوال از خود بپرسید:

• به چه چیزی می خواهیم توجه کنیم؟
• ما از کاربران خود می خواهیم چه اقداماتی انجام دهند؟
• چشم به طور طبیعی به کجا می رود و کجا فرود می آید؟

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

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

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

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

این مثال را در نظر بگیرید:

در سمت چپ چیزهای زیادی در جریان است. دو عنصر اصلی اندازه یکسان هستند و رنگ های متعدد تشخیص اینکه کجا باید نگاه کرد را دشوار می کند.

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

سلسله مراتب بصری ضعیف:

• کاربر را گیج می کند.
• معلوم نیست کجا را نگاه کنیم.
• طراحی خسته کننده ای ایجاد می کند.

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

1. از تراز و ترکیب برای ایجاد نقاط کانونی استفاده کنید.

تراز و ترکیب به شما کمک می کند تا عناصر سایت خود را ساختار دهید و نقاط کانونی برای بینندگان ایجاد کنید. دو قانون متداول برای تهیه پیش نویس قانون یک سوم و قاعده شانس هستند.

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

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

2. الگوهای خواندن را در نظر بگیرید.

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

این تنوع دارای دو سبک خواندن/اسکن متفاوت است: مدل‌های F و Z.

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

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

3. کاربران راحت تر متوجه اقلام بزرگتر می شوند.

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

این مثال را از نتفلیکس بگیرید.

منبع تصویر

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

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

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

4. رنگ و کنتراست چشم را جلب می کند.

مردم به سمت رنگ هایی کشیده می شوند که احساسات را برمی انگیزند و مفاهیم فرهنگی و اجتماعی دارند. فقط به آرم ها بر اساس صنعت نگاه کنید و متوجه خواهید شد که مارک های مواد غذایی به سمت زرد و مؤسسات مالی تمایل به آبی دارند.

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

در تصویر زیر، دو نوار نارنجی در گرافیک از نوارهای خاکستری متمایز هستند که نشان می دهد نارنجی نقطه کانونی و خاکستری ثانویه است.

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

منبع تصویر

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

برای ایجاد بیشترین تاثیر بصری با رنگ، کمتر اغلب بیشتر است.

4. فضای سفید باعث ایجاد تاکید می شود.

فضای سفید به فضای خالی در یک طرح اشاره دارد.

منبع تصویر

فضای سفید در طراحی وب شما کلید جلب توجه و حفظ تعادل است.

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

اپل همچنین به دلیل استفاده از فضای سفید معروف است.

منبع تصویر

این برند یک رابط کاربری ساده برای برجسته کردن عناصر در صفحه ارائه می دهد. استفاده اپل از فضای سفید نیز نشان دهنده هویت برند است.

6. مجاورت و تکرار وحدت ایجاد می کند.

قرار دادن اقلام در کنار هم به کاربران می گوید که اقلام مرتبط هستند.

به عنوان مثال وب سایت آشپزی نیویورک تایمز را در نظر بگیرید. هدر “Master The Basics” آن دارای چهار جعبه دستور العمل نزدیک به گروه است که به بینندگان اجازه می دهد بدانند که احتمالاً در سطح اهمیت مشترک هستند.

منبع تصویر

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

7. سلسله مراتب فونت به شما در سازماندهی متن کمک می کند.

فونت ها یک عنصر بصری مهم به وب سایت شما اضافه می کنند و به شما کمک می کنند تا متن را سازماندهی و طبقه بندی کنید (گاهی اوقات بر اساس سطح اهمیت).

سلسله مراتب فونت سه بخش دارد:

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

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

نمونه هایی از سلسله مراتب بصری خوب

1. Visme.co

Visme به افراد امکان دسترسی به قالب ها و گرافیک های مورد نیاز برای ایجاد محتوا را می دهد.

منبع تصویر

آنچه ما دوست داریم:

CTA شگفت انگیز Visme از اصول سلسله مراتب فونت پیروی می کند تا کاربران را تشویق به ثبت نام در خبرنامه خود کند. بزرگ‌ترین واژه‌ها تأثیرگذارترین کلمات هستند و متن‌های ثانویه و ثالث اطلاعات بیشتری را با حرکت خوانندگان در صفحه ارائه می‌دهند.

2. Studio 8AD

8AD Studio یک آژانس تولیدی با خدمات کامل است که در برندسازی تخصص دارد.

منبع تصویر

آنچه ما دوست داریم:

8AD Studio با بهره گیری از فضای خالی، به طور ماهرانه توجه را به سه عنصر اصلی جلب می کند: لوگوی منحصر به فرد و دو CTA. او سه عنصر اصلی را با بازدیدکنندگان سایت به اشتراک می‌گذارد و به مردم اجازه می‌دهد تا بدانند در کارش خوب است – ایجاد برندی که توجه را جلب می‌کند و باعث شناخت می‌شود.

3. عمدتا سیاه

Predominantly Black یک شرکت تولیدکننده عطرهای خانگی و بدن است.

منبع تصویر

آنچه ما دوست داریم:

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

برای تو

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