سلسله مراتب بصری برای طراحی یک وبسایت خوب حیاتی و لازم است. این مورد یکی از کلید‌های اصلی برای دست یافتن و رسیدن به اهداف وبسایت‌تان است.
در پشت این موضوع تئوری های بسیار وجود دارد. برای این موضوع مطالعات و بررسی های بسیار انجام داده شده تا چگونگی و چرایی کار کردن این موضوع را بدست آورد. فهمیدن تئوری اصلی این موضوع برای کار کردن با آن مهم و کاربردی است.
طراحی شکلی از ارتباطات است
براساس مفهوم اصلی، طراحی خود شکلی از ارتباطات است. در حقیقت این موضوع برقرار کردن ارتباط میان ایده‌های مختلف از طریق یکسری المان بصری است. این موضوع با تمام اشکال طراحی درست است. این موضوع بخصوص در طراحی وب اهمیت بالایی دارد.
بلاک های اطلاعاتی سنگین در حقیقت برای درک و فهمیدن توسط کاربر گزینه مناسبی نیستند، به این دلیل که مردم به صورت بصری فکر می کنند. ما به سادگی توانایی پردازش داده‌های مختلف را نداریم. مردم نیز به سادگی به هرچیزی نگاه نمی کنند. جدای از این‌ها، انسان موضوعاتی را که یاد می‌گیرد به صورت یک ارتباط بصری آن‌ها را سازمان دهی می کند.
ظهور سلسله مراتب بصری
چرایی اینکه ما براساس ارتباطات، مشاهده می‌کنیم در حقیقت موضوعی است که به مطالعه خود آن مربوط می شود. انسان شناسان می گویند که این موضوع در حقیقت به نیاکان و اجداد نخستین ما مربوط می شود. در واقع این موضوع بدان معناست که ما اجزا و المان‌هایی که به همدیگر مربوط می شوند و یا شبیه هم هستند را در کنار هم و براساس یک الگو قرار می‌دهیم. در این صورت است که ما به سادگی می توانیم از آن‌ها استفاده کنیم.
جدای از آنکه شما چگونه در رابطه با شیوه کار کردن مغز انسان راجع به سلسله مراتب بصری فکر می‌کنید، این روش چگونگی سازمان بندی اطلاعات و به کاربردن آن‌ها در یک راه ساده است.
ابزارهای سلسله مراتب بصری
خب، حال که شما می‌دانید سلسله مراتب بصری برای انتقال اطلاعات ابزاری مفید است، چگونه به عنوان یک طراح وب می توانید آن را پیاده سازی کنید؟
ابزارهایی که در این زمینه موجود است، بسیار ساده و آسان برای یادگیری هستند. تنها چیزی که شما نیاز دارید این است که بدانید چگونه باید از آن‌ها استفاده کنید.
اندازه
اساسا اشیاء بزرگ‌تر بیشتر نمایان هستند. آن‌ها باعث می شوند تا مردم توجه بیشتری به آن‌ها بکند. براساس موضوع سلسله مراتب بصری، چشمان هر انسانی به اجسام بزرگ‌تر خیره می شود.
این ابزار یکی از قدرتمندترین ابزارها برای سازمان دهی بصری است. استفاده کردن از اندازه‌های مرتبط باهمدیگر موضوع مهمی است. المان‌های بزرگی که در صفحه دارید مطمئنا باید اهمیت بیشتری برای آن‌ها قائل شوید، این در حالی است که معمولا المان‌های کوچک‌تر دارای اهمیت کمتری هستند.
رنگ
رنگ ابزاری هم برای سازمان‌دهی کردن برگه و هم برای شخصیت دادن به وبسایت‌تان است. رنگ‌هایی که جذاب و کنتراست بالایی دارند، توجه کاربر را جلب می‌کنند و کمک می‌کنند تا آن‌ها روی مسئله‌ای تمرکز نمایند.
این موضوع برای استفاده در دکمه‌ها و لینک‌های داخل صفحه واقعا مهم است. به عنوان ابزاری برای شخصیت دادن به صفحات وب، می‌توان از رنگ‌ها در راه‌های پیچیده‌تری نیز استفاده کرد.
رنگ‌های جالب و روشن می‌توانند به یک صفحه زندگی و هیجان ببخشید در حالی که رنگ‌های آرام می توانند به صفحه‌تان آرامش بدهند. رنگ‌ها مسئله بسیار مهمی هستند. این رنگ‌ها می توانند برای برقراری ارتباط استفاده شوند و یا می‌توانند به عنوان نماد‌هایی استفاده شوند. حتی می توانید از رنگ‌ها برای دسته بندی کردن اطلاعات در یک سلسله مراتب بصری استفاده کنید.
فونت‌ها
زمانی که می‌خواهید سلسله مراتب طراحی را ایجاد کنید انتخاب کردن فونت مناسب برای این کار واقعا مهم است. در این حالت تنها خود فونت اهمیت ندارد بلکه شیوه استفاده از آن نیز مهم است. سنگینی و استایل فونت براساس مکانی که می‌خواهید از فونت استفاده کنید در هر دو حالت اهمیت خاص خود را دارد.
برای سازمان‌دهی کردن مواردی که مهم است می توانید از انواع مختلف اندازه و سنگینی فونت استفاده کنید. ایتالیک کردن -کج کردن- متن در برخی مواقع برای مهم نشان دادن متن ضروری است.
می‌توانید برای وبسایت خود از یک سلسله مراتب تایپ‌فیس استفاده کنید که در آن مقادیر مختلف اندازه، سنگینی و فاصله قرار داده شده است. این موضوع به آنکه از یک فونت در وبسایت‌تان استفاده می کنید اهمیتی ندارد.
با استفاده کردن از اندازه‌ها و سنگینی‌های متنوع شما تنها باعث نشده‌اید که کاربران روی قسمت مهمی تمرکز کنند بلکه شما یک آرایش و سازمان دهی کلی از محتوای‌تان را انجام داده‌اید که کاربران می‌توانند با آن محتوای شما را راحت‌تر بخوانند.
فضای سفید - فضای خالی
در کنار تمان این دقت‌ها و توجه‌هات به سلسله مراتب بصری باید بخاطر بسپارید که حتما فضای سفیدی را نیز در طراحی‌تان قرار دهید.
شما نیاز دارید که به محتواهای‌تان جاهایی برای نفس کشیدن بدهید.
استفاده کردن از فضای سفید درست به همان اندازه استفاده کردن از فضاها در یک طراحی بصری مهم و قابل توجه است.
فضای سفید معمولا چنین تعریف می‌شود: (اندازه خالی بین المان‌های صفحه). البته باید گفت که همیشه این فضای اضافی به عنوان فضای سفید در نظر گرفته نمی شود -پر کردن با رنگ سفید- بسیاری معتقدند که این فضای خالی است نه فضای سفید!
فضای سفید شما را قادر می سازد تا المان‌های مورد نظرتان را از دیگر المان ها جدا سازید و آن ها را در کناری دیگر قرار دهید. با تشکر از این نوع لایه بندی ایجاد شده، کاربران معمولا در چنین حالت‌هایی دوست دارند بیشتر در وبسایت باقی بمانند.
فضای سفید اغلب باعث می شوند تا چشمان کاربر استراحتی بکند و المان‌های مهم بیشتر به چشم بیایند. ازدحام و شلوغی زیاد المان‌ها باعث می شود که بازدیدکنندگان وبسایت را ترک کنند به این دلیل که در چنین حالتی دانستن و فهمیدن از اطلاعات وبسایت مشکل است.
چشمان انسان و پویش الگوها
چشمان انسان در یک راه پیشبینی شده‌ای کار می‌کند. آن‌ها معمولا به صورت خودکار به قسمت مهیج و جذابی خیره می شوند. البته برخی از این حالت‌ها نیز به انسان‌ها بستگی پیدا می کند. اما اکثریت مردم براساس یک راه ساده و پیشبینی شده‌ای به موارد نگاه می‌کنند مخصوصا وبسایت‌ها!
الگوی-F
این مورد یکی از الگوهای پویش است که اکثر مردم برای استفاده از وبسایت‌هایی با متن زیاد -وبلاگ‌ها، ویکی‌ها و...- از آن پیروی می‌کنند.
خوانندگان در این حالت متون وبسایت را از سمت چپ به صورت عمودی پویش می‌کنند -مشاهده می‌کنند- و دنبال کلمه کلیدی یا یک جلمه منحصر به فرد که دنبال آن بودند می‌گردند.
بعد از آنکه خواننده کلمه کلیدی مورد نظرش را پیدا کرد، به صورت عادی شروع به خواندن کل متن به صورت افقی و در حالت طبیعی خود می کند. اینگونه الگو شبیه به پویش به صورت حرف F یا E است.
الگوی-Z
این الگو معمولا برای وبسایت هایی استفاده می شود که به صورت منحصرا در رابطه با متن نیستند و میزان متن در آن‌ها زیاد نیست. خوانندگان ابتدا خط ابتدایی برگه را به صورت افقی پویش می کنند. این مورد اغلب به دلیل نوار منو است اما می‌توان به عنوان یک عادت برای خواندن متن از سمت چپ به راست نیز آن را در نظر گرفت.
وقتی که پویش خط اول به صورت افقی تمام شد، خواننده به ابتدای خط دوم برمی‌گردد و دوباره شروع به پویش متن می‌کند. همانطور که گفته شد این یک عادت است. به دلیل حالت پویش توسط کاربر این حالت الگوی Z نامیده شده، چرا که به حرف Z شباهت بالایی دارد.
این الگو یکی از موارد پر کاربرد و مفید است که می‌توانید از آن در سلسله مراتب بصری‌تان استفاده کنید. این حالت باعث می شود به المان‌های مهم وبسایت آدرس دهی نیز شود: دکمه‌های Call To Action، سلسله مراتب بصری و برندینگ.
زمانی که سادگی در یک طراحی رویکرد مهمی در نظر گرفته می شود، چنین الگویی بسیار کاربردی است. در حقیقت چنین حالتی نظم و ترتیب خاصی را به وبسایت می آورد. در هر حال، محتوای پیچیده و طولانی ممکن است در چنین حالتی خوب به نظر نرسند، در چنین شرایطی بهتر است به الگوی F مراجعه کنیم.
در اینجا می‌توانید برخی از بهترین رویکرد‌های موجود را مشاهده کنید :
- جداسازی پس‌زمینه‌تان؛ چنین کاری کمک می کند تا بازدیدکنندگان بتوانند بهتر در چهارچوب الگوی بصری شما باشند.
- بهتر است لوگوهای‌تان را در قسمت راست و یا چپ وبسایت قرار دهید، در چنین شرایطی به سرعت آن‌ها نمایان می‌شوند.
- استفاده از یک دکمه Call To Action ثانویه با طراحی جذاب در الگوی Z می‌تواند به کاربران کمک بهتری کند.
- استفاده از اسلایدر تصاویر شاخص در وسط صفحه کمک می‌کند تا مسیر الگوی Z از قسمت‌های بالا و پایین وبسایت جداسازی شود.
- می‌توانید از یک دکمه در سمت راست یا چپ وبسایت برای کمک کردن کاربر در جهت استفاده از دکمه‌های Call To Action استفاده کنید.
- الگوی طراحی شما باید در دکمه Call To Action اصلی‌تان خاتمه پیدا کند.
درک الگوهای طراحی و کنش‌های طبیعی انسان ها به شما کمک می کند تا بتوانید بیشترین مزیت از آن‌ها را در طراحی وبسایت‌تان ببرید. وقتی که شما بدانید کاربران دنبال چه مواردی هستند پس به راحتی می توانید اطلاعات را در اختیار آن‌ها قرار دهید و براساس این موضوع به آن‌ها کمک کنید تا به اطلاعات مورد نظرشان دست پیدا کنند.
در پایان
سلسله مراتب بصری قسمت بسیار مهمی از طراحی وبسایت است. درک اینکه این موضوع چگونه کار می کند به شما کمک می کند تا به بهترین شیوه ممکن کارهای‌تان را انجام دهید.
این موضوع به شما می‌کند تا بتوانید محتوای‌تان را به بهترین شکل سازمان دهی کنید. برای بیشتر درک این موضوع می توانید وبسایت های مختلف را مشاهده کنید و ببینید که چگونه آن‌ها می‌توانند در انتقال بهتر اطلاعات از طریق این سلسله مراتب کار کنند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید