آیا تا به حال با سایتی روبه‌رو شده‌اید که عناصر مختلف طراحی برایتان آزاردهنده باشد؟ در چنین سایت‌هایی عناصر زیاد و شلوغ کاربر را سردرگم می‌کند و کاربران مسیر شروع را از دست می‌دهند. اهمیت به ساختار و طبقه‌بندی اطلاعات در محصول را سلسله مراتب بصری در طراحی رابط کاربری می‌نامند. با مثالی ساده‌تر عنوان کنیم. به صفحه اول یک روزنامه با دقت نگاه کنید.
در صفحه اول روزنامه همه چیز در جای خود قرار دارد و تیتر اصلی به شکلی طراحی شده تا مخاطبان با یک نگاه ساده، توانایی خواندن تیتر را داشته باشند. این موضوع برای محصولات دیجیتال، مانند سایت‌ها یا اپلیکیشن‌های موبایل صدق می‌کند. در این مقاله از بلاگ ویستا سامانه آسا قصد داریم در رابطه با سلسله‌مراتب بصری (Visual Hierarchy) صحبت کنیم و اشاره‌ای به مزایا و ویژگی‌های سلسله مراتب تصویری در طراحی رابط کاربری خواهیم داشت. اگر شما هم علاقهمند به یادگیری سلسله مراتب بصری در UI هستید، مطالعه این مقاله را از دست ندهید.
مفهوم سلسله مراتب بصری؛ چیدمان اجزای یک موضوع
به طور کلی سلسله مراتب به معنای ترتیب و چیدمان اجزای مختلف یک موضوع است. فرقی نمی‌کند این موضوع کار عمرانی یک شرکت، ارتباط بین اشیا یا حتی عناصر مختلف یک سایت باشد. در سلسله مراتب اجزا مختلف به صورت طبقه‌بندی شده با یکدیگر در ارتباط هستند. عناصر سازنده یک محصول مانند سایت یا اپلیکیشن و مجموعه المان‌های بصری مانند رنگ، فونت، سایز، کنتراست، فضای خالی، تقارن جزئی از سلسله مراتب بصری هستند. در اصل هنگامی که کاربر با یک سایت تعامل بسیار خوب و راحتی برقرار می‌کند، یکی از عوامل تاثیرگذار در این تعامل، سلسله مراتب و چیدمان اصولی سایت است.
اهمیت سلسله مراتب تصویری در طراحی رابط کاربری
سلسله مراتب بصری وسیله‌ای است که چشم کاربر را برای مشاهده کلیه اطلاعات داخل سایت هدایت می‌کند و اولویت‌بندی محتوای سایت و محصول را بر همین اساس می‌توان انجام داد. سلسله مراتب بصری با استفاده از عناصر مختلف به صورت واضح و شفاف کاربر را به سمت هدف نهایی خود هدایت می‌کند.
بیشتر بخوانید: وایرفریم چیست؟
گاهی اوقات ممکن است Visual Hierarchy با اندازه و کنتراست کاربر را هدایت کند و در برخی مواقع با ایجاد فضای خالی یا رنگ چنین کاری را انجام می‌دهد؛ بنابراین اهمیت رعایت سلسله مراتب تصویری، برای تمام محصولات مهم است. به عنوان مثال اگر سایت فروشگاهی یا خدماتی دارید، با رعایت درست و مناسب سلسله مراتب تصویری و چیدمان می‌توانید شانس فروش‌تان را بیشتر کنید.
انواع سلسله مراتب در طراحی رابط کاربری
همان‌طور که در قسمت‌های قبل عنوان کردیم، سلسله مراتب انواع مختلفی دارد. در حالت کلی سلسله مراتب به ۳ بخش سلسله مراتب تصویری، سلسله مراتب محتوایی و سلسله مراتب نیاز کاربر تقسیم میشود. در ادامه مقاله هر کدام از این بخش‌ها را به صورت جداگانه بررسی می‌کنیم.
سلسله مراتب تصویری؛ یکی از مهم‌ترین بخش‌های سلسله مراتب برای هدایت چشم کاربر
در سلسله مراتب تصویری باید به محل قرارگیری المان‌های تصویری دقت کرد. در اصل هدف از اجرای سلسله مراتب تصویری، جلب توجه و هدایت چشم کاربر است. در سلسله مراتب تصویری باید به اندازه عناصر دقت کرد. برای توجه کاربران می‌توان از کنتراست‌های رنگی با استفاده از پالت رنگی مناسب استفاده کرد. هنگامی که قصد دارید موضوع یا مطلبی را برجسته‌تر کنید، با استفاده از کنتراست رنگی، این کار را به سادگی می‌توانید انجام دهید. همچنین با کمک از فاصله‌ها و نوع فونت سلسله مراتب را می‌توان با نظم درستی ایجاد کرد.
بیشتر بخوانید: بهترین ابزارهای طراحی رابط کاربری
معمولا طراحان با استفاده از اصول روانشناسی چشم کاربر را به سمت الگوهای شناخته شده به خوبی هدایت می‌کنند. الگوهایی که از پیش در ذهن کاربر ایجاد شده است. به عنوان مثال، کاربران فارسی زبان، از راست به چپ طرح‌ها و عناصر را می‌خوانند. در سلسله مراتب تصویری باید به این موضوع دقت کرد.
سلسله مراتب محتوا؛ راهکاری برای دقت بیشتر مخاطبان به عناصر متنی
عناصر سلسله مراتب بصری با یکدیگر متفاوت هستند و ترکیب این عناصر با هم سلسله مراتب مناسبی را فراهم می‌کند. در این بخش نیاز است که توجه کاربران روی عناصر متنی به خوبی حفظ شود. ترتیب نمایش محتوای متنی باید طبق اولویت و اهمیت محتوا قرار بگیرد. به عنوان مثال اگر متنی اولویت بالاتری دارد باید از فونت‌های بزرگ‌تر استفاده کرد.
بیشتر بخوانید: تفکر طراحی یا Design Thinking چیست؟
همچنین برای جلب توجه کاربر می‌توان از تایپوگرافی‌های مختلف در طراحی رابط کاربری کمک گرفت. فاصله‌گذاری بین متن‌ها هم یکی از عوامل مهم در ایجاد سلسله مراتب است. در رابطه با این موضوع باید دقت داشته باشید که از فونت‌ها و عناصر متنی ناخوانا استفاده نکنید. هر چه ارتباط کاربران با محصول بیشتر باشد، احتمال فروش یا مطالعه مطالب مختلف بیشتر خواهد شد. در حالت کلی قانونی که در سلسله مراتب محتوایی باید رعایت کرد، مهم‌ترین عنصر متنی باید بزرگ‌ترین فونت را به خود اختصاص دهد.
سلسله مراتب نیازهای کاربران؛ با تکیه بر نیازهای هرم مازلو
در سلسله مراتب بصری باید به نیازهای کاربران هم دقت داشته باشیم. نیازهای کاربران بخش مهمی از تعامل خوب و سازنده کاربران با محصول هستند. در این بخش باید نیازهای اولیه کاربران مانند امنیت مالی، ایمنی شخصی، لذت‌بخش بودن، عملکرد بدون نقص و آرامش و رضایت کاربران به خوبی در نظر گرفته شود. در حالت کلی در طراحی رابط کاربری و حتی تجربه کاربری قبل از پرداختن به قسمت‌های پیچیده محصول، باید سطوح ابتدایی را در نظر گرفت و به نیازهای اولیه کاربران توجه کرد.
استفاده از سلسله مراتب بصری برای افزایش تعامل کاربران
در این مقاله از بلاگ آسا در رابطه با سلسله مراتب بصری صحبت کردیم و اشاره‌ای به انواع سلسله مراتب در طراحی رابط کاربری داشتیم. در حالت کلی سلسله مراتب تصویری باعث افزایش تعامل کاربر با محصول میشود و احتمال فروش در سایت‌های فروشگاهی بالاتر می‌رود. همچنین زمانی که سلسله مراتب به خوبی رعایت شود، کاربران رضایت بسیار بالاتری نسبت به محصول دارند. اگر علاقهمند به مطالعه مقالات مرتبط در زمینه UI هستید، پیشنهاد می‌کنیم سایر مقالات منتشر شده در بلاگ آسا را مطالعه کنید. در رابطه با سلسله مراتب بصری اگر سؤال یا پیشنهادی دارید، از طریق انتهای این مطلب با ما در میان بگذارید.
نویسنده: محمد بیک زند
