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

سلسله مراتب بصری تفاوت بین سایتی است که بصورت استراتژیک تصمیم کاربر را تحت تاثیر قرار می دهد و سایتی که فقط ظاهری زیبا دارد.

سلسله مراتب بصری متکی بر همان دسته اصول زیبا شناسی است که توسط استادان رنسانس استفاده می شده ولی در کنار آن اهداف ثانویه ی ترویج محتو , تشویق کاربر به ثبت نام , Call to action  و لذت بخش نمودن تجربه استفاده کاربر نیز وجود دارد .

ظاهران کار استادان رنسانس آنقدرها هم مشکل نبوده .

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

در اینجا به توصیف ۵ تا از اساسی ترین عناصر برای حمایت از سلسه مراتب بصری می پردازیم.

۱٫سایز

سایز یک قایق است که شیوه حرکتش در اقیانوس را مشخص میکند.

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

یکی از اصول قانون Fitts این است که اشیاء بزرگتر که در محدوده قابل کلیلک کردن باشند بیشتر کاربر را جذب می کنند چرا کاربر زحمت کمتری برای کلیک کردن بر روی آن می کشد. همین قضیه در مورد  call to action  نیز صدق می کند زمانی که دوست ندارید سئوالی در مورد مقصد کاربر باقی بماند.

البته به این معنا نیست که دکمه Download now را ۱۰ برابر بزرگتر کنید , ظرافت و هماهنگی بین عناصر همچنان از اهمیت زیادی برخوردارهستند.

به عنوان مثال فکر می کنید طراحان وب سایتTeye  دوست دارند شما با چه چیزی ارتباط برقرار کنید ؟

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

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

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

همنطور که از تیتر این مقاله مشخص است , سایز روی نوشته و تایپوگرافی هم تاثیر می گذارد . طبق مطالعه مجله Smashing از ۵۰ وب سایت میانگین سایزها به گونه زیر است :

عنوان : ۱۸  تا ۲۹  پیکسل

متن : ۱۲ تا ۱۴ پیکسل

تمام اصول سایزی در عکس بالا از Huge Inc مشخص است . اولین چیزی که قابل مشاهده است  H  بزرگی است که نمایشگر لوگوی شرکت می باشد . چیز بعدی “Nike Making  ”  می باشد که با تایپوگرافی بزرگش وزن زیادی را ایجاد می کند. سپس یک خط نوشته که دقیقا زیر آن آمده و با فونت کوچکی که دارد توجه را زیاد جلب نمی کند. اگر همچنان چشم شما به دنبال چیزهایی در صفحه بگردد هم متوجه لوگوی همبرگر کوچک روی منو و  جهت یاب سمت راست می شوید.

این سلسله مراتب برای اینجا مناسب هستند. ابتدا H  بزرگ توجه شما را جلب کرده ,بلافاصله بدلیل اینکه ذهن شما به دنبال موضوع می گردد چشم شما به سوی عنوان هایپرلینک شده Nike making در جمله ثانویه می رود . سلسه مراتب بصری مسیر کاربر را مشخص و قانون Fitts تعامل را با ساخت تکه های قابل کلیک و در مجاورت آسان می کند.

بدون فکر کردن شما دقیقا به سمت مسیری که باید بروید هدایت می شوید .

۲٫ رنگ

انتخاب رنگ شما حتی اگر بین سیاه و سفید هم باشد تاثثر بسزایی بر دیدگاه کاربر از وب سایت  دارد.

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

با این وجود با استفاده از تضاد می توان تاثیر این رنگها را بیشتر و کمتر کرد . رنگهای متضاد در کنار هم توجه را به هر دو جمع می کنند . در سلسله مراتب بصری این تاثیر بسیار زیادی را ایجاد می کند مثلا قرار دادن یک call to action  زرد روی یک پس زمینه آبی نتیجه بهتری نسبت به call to action  با رنگ قرمز خواهد داشت

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

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

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

۳٫ چیدمان

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

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

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

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

همانطور که مشاهده می کنید وب سایت Huncwot  با قرار دادن  گزینه های مختلف در یک خط افقی به وب سایت نظم می بخشد.

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

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

۴- فاصله

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

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

در تئوری Gestalt که ارتباط بصری-روانشناختی را میشکافد به این نتیجه رسیده شده است که کاربران المان هایی که در نزدیکی یکدیگر قرار دارند را مشابه هم دانسته و فرض را بر این می گذارند که دارای کاربرد مشابهی هستند.

اثر گشتالت و گروه بندی عناصر ها را می توان در سایت In Pieaces مشاهده کرد.

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

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

در واقع در تحقیقی که توسط دیمیتری فادیو (Dmitry Fadeyev) انجام شده نشان می دهد که استفاده از فضای خالی بین پاراگراف ها و همچنین ایجاد فاصله از گوشه ها میتواند سادگی درک کاربران از موضوع نمایش داده شده را تا ۲۰ درصد بهبود دهد.

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

برای آشنایی بیشتر با نحوه استفاده از فضای منفی و قدرتی که از لحاظ بصری ایجاد میکند خواندن مقاله A List Apart که توسط طراح معروف مارک بولتن (Mark Boulton) پیشنهاد می شود. در این مقاله او تمام و کمال به جزئیات نحوه استفاده از فضای سفید می پردازد و اثرات فعال و غیر فعال آنرا میشمارد. همچنین او فضای منفی را به دو دسته میکرو و ماکرو تقسیم بندی می کند.

۵- سبک (استایل)

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

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

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

همانطور که در سایت  Le Mystère de Grimouville مشاهده می شود، بافت استفاده شده در تیتر اصلی درون صفحه نه تنها توجه را به خود جلب میکند، بلکه به سایت یک اتمسفر خاص می دهد. بافت و جایگاه تیتر، آنرا از بقیه المانها نه چندان با ارزش جدا کرده است.

با توجه به اینکه موضوع کلی سایت تعریف داستانی مرموز از اتفاقاتی است که ۱۴۰ ساکن شهر نورماندی را ترسانده است، اثر ترسناک و سئوال برانگیز این سایت بی نقص به نظر می رسد.

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

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

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

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

نتیجه

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

هر المان درون صفحه برای خودنمایی میجنگد.

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

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

 مراتب بصری در طراحی وب