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

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

سلسله مراتب دیداری
سلسله مراتب دیداری

برقراری ارتباط با کاربر یا Communication

در واقع، هدف هر سایت، برقرار کردن ارتباط با کاربران می باشد. حتی وب سایت های به ظاهر بی معنی،  همیشه حرفی برای گفتن دارند. مانند سایتheeeeeeeey.com ، که بالاخره گفتن Hey!Ho! ، هدف ساخت آن بوده است!

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

پیوند خوردن با احساسات کاربر یا  Connection

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

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

تغییرات و تفاوت بین المان ها یا Conversion

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

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

چگونگی برقراری سلسله مراتب دیداری

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

اشکال

مغز انسان، عملکرد بسیار جالبی دارد، همیشه تلاش می کند تا ما بین المان ها تفاوت ایجاد کند. به اشکال زیر توجه کنید:

سلسله مراتب دیداری
سلسله مراتب دیداری

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

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

رنگ

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

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

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

در جنبه ی عملکردی نیز، رنگ ها اهمیت بالایی دارند. نگاهی به شکل های پایین بیاندازید :

سلسله مراتب دیداری
سلسله مراتب دیداری

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

اندازه

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

اندازه ی المان ها در صفحه ی شما نیز، اهداف مشابهی را دنبال می کنند؛ آنها اهمیت، تاکید و شرایط را در طراحی منتقل می کنند. همانطور که در سایت Awwwards.com به خوبی به این نکته پرداخته شده است :

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

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

به اشکال اولیه خود باز می گردیم. چیز جدیدی توجه شما را جلب کرد؟

سلسله مراتب دیداری
سلسله مراتب دیداری

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

کنتراست و غالبیت رنگ ها

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

المان های کنتراست و غالبیت، چون باعث خلق ارتباط بین دو المان نامربوط می شود، اهمیت فراوانی دارند. بیایید، عکسی که با آن آغاز کرده ایم و عکس که در انتها به آن دست یافته ایم را با هم مقایسه کنیم:

سلسله مراتب دیداری
سلسله مراتب دیداری

رنگ زرد به عنوان شکل غالب رفتار کرده، درحالی که دیگر شکل ها هم برای همدیگر و هم برای دایره، به عنوان کنتراست، عمل می کنند.

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

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

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *