چگونه از سلسله مراتب بصری در طراحی وب‌سایت استفاده کنیم؟

سلسله مراتب بصری به ترتیب چیدمان و  یا نحوه ارائه عناصر بر اساس اهمیت اشاره دارد. سلسله مراتب بصری یکی از حیاتی‌ترین عناصر در طراحی وب‌ سایت است. این موضوع همچنین از اصلی‌ترین اصول بهینه‌سازی وب‌سایت و تأثیر هرچه بیشتر بر روی مخاطب نیز محسوب می شود

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

طراحی نوعی از ارتباط است

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

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

ظهور و پیدایش ترتیب بصری

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

صرف‌نظر از روند بهره بری انسان از سلسله‌مراتب بصری، استفاده از  تصویر همواره روشی بهتر برای برقراری ارتباط مؤثر است.

ابزارهای ترتیب بصری

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

اندازه

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

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

رنگ

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

مقاله مرتبط: ١٢ وب سایت کاربردی برای انتخاب رنگ بندی مناسب

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

فونت‌ها

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

مقاله مرتبط: نمونه هایی از استفاده تایپوگرافی در طراحی سایت

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

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

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

فضای سفید

با توجه به تمام نکات ذکرشده در رابطه با ترتیب بصری، فضای سفید و استفاده درست از آن‌هم یکی از نکات مهم در طراحی وب‌ سایت است.

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

مقاله مرتبط: فضای سفید در طراحی رابط کاربری

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

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

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

چشم انسان و بررسی الگوها

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

الگوی F

این روش بررسی الگوها معمولاً در وب‌سایت‌هایی با متن‌های سنگین و یا دانشنامه‌ها کاربرد دارد.

خواننده ابتدا خط سمت چپ سایت را به‌صورت عمودی بررسی می‌کند و به دنبال کلیدواژه‌ها و نکات مهم در پاراگراف‌ها می‌گردد.

زمانی که خواننده نکته مهمی پیدا می‌کند، کل متن را می‌خواند، الگوی کلی این سایت‌ها به حرف F و حرف E شباهت دارد.

الگوی Z

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

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

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

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

در این قسمت به تمرین‌هایی برای رسیدن به الگوی Z اشاره می‌کنیم:

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

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

نتیجه‌گیری

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

ترتیب رنگی راهنمایی برای دسته‌بندی محتوا است. کافی است که به چند وب‌سایت خوب در این زمینه نگاهی بیندازید تا به‌خوبی مفهوم تأثیر ترتیب بصری در وب‌سایت را درک کنید.