مفهوم سلسله مراتب بصری (Visual Hierarchy) چیست و چه کاربردی در UI/UX دارد؟

Visual hierarchy

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

سلسله مراتب بصری (Visual Hierarchy) چیست؟

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

visual hierarchy

سلسله مراتب بصری را می توان با استفاده از موارد زیر ایجاد کرد:
⦁ رنگ و کنتراست
⦁ مقیاس
⦁ گروه بندی (مناطق مجاور و مشترک)

رنگ و کنتراست

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


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

Visual hierarchy

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

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

مقیاس

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

Visual hierarchy

استفاده از مقیاس در سلسله مراتب بصری

سعی کنید استفاده خود را به ۳ سایز کوچک، بزرگ و متوسط محدود کنید. این سه اندازه، تنوع کافی را برای کار کردن فراهم می کند – به عنوان مثال اندازه نوع سرصفحه، زیر سرفصل و بدنه متن را در نظر بگیرید – اما همچنان روابط سلسله مراتبی را به خوبی مشخص و واضح نگه می دارند.
در طراحی های وب، اندازه ها را می توان از ۱۴ پیکسل تا ۱۶ پیکسل برای متن بدنه، ۱۸ پیکسل تا ۲۲ پیکسل برای عنوان فرعی و حداکثر تا ۳۲ پیکسل برای سرصفحه تغییر داد.
بایستی در طراحی UI/UX مهمترین عنصر را بزرگتر کنید. بر مهمترین جنبه طراحی خود با بزرگتر کردن آن تاکید کنید. به همین ترتیب، عناصر کم اهمیت را کوچکتر کنید. تعداد عناصر بزرگ را به حداکثر ۲ عدد محدود کنید تا برجسته شوند و سلسله مراتب بصری را تقویت کنند.

گروه بندی: مناطق مجاور و مشترک

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

Visual hierarchy

بهترین روش ها برای استفاده از گروه بندی در سلسله مراتب بصری

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

نتیجه‌ گیری

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

اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin