گاهی در صفحات محتلف وب با سایت هایی مواجه میشویم که با انواع عناصر شلوغ شده است و باعث میشود نتوان روی موضوع مورد نطر تمرکز کافی داشت ،
این امر به دلیل نداشتن سلسله مراتب بصری اصولی است . در این مقاله در رابطه با Visual Hierarchy یا همان سلسله مراتب بصری اشنا میشویم .
تا انتهای مقاله با ما همراه باشید .
از گذشته نماد ها در تاریخ و فرهنگ نقش اساسی داشته اند حتی در تفسیر اثار باستانی از نماد ها و نشانه هایی که وجود دارد استفاده میکنند .
حتی نوع و مدل قرار گیری یک عنصر در تصویر نیر مفاهیم خاصی را بیان میکنند . به عنوان مثال نقش امپراتور و پادشاه ها در تصاویر به جا مانده
از دیگر افراد بزرگ تر است .
البته تنها نماد ها حائز اهمین تیستند در کنار ان رنگ ها نیز تاثیر گذار هستند مثلا رنگ هایی مانند مشکی بای تسلیت و غم .. به کار میرود
و یا قرمز برای جلب توجه کاربران مورد استفاده قرار میگیرند .
در این مقاله میخواهیم در رابطهبا نحوه قرار گیری نماد ها رنگ ها و نشانه ها در سایت ها و اپلییشن ها سخن بگوییم .
Visual Hierarchy در UI/UX
همه ی ما میدانیم که اطلاعاتی که در دسترس داریم به یک اندازه حائز اهمیت نیستند و میتوانیم انها را دسته بندی کنیم به عنوان مثال اگر به روزنامه ها دقت کرده باشد
به نحوه صفحه بندی ان پی میبرید که باید به گونه ای باشد که رهگذر و مخاطب با یک نگاه به درجه بندی اهمیت اطلاعات پی ببرد .
جالب است بدانید این قضیه برای اپلیکیشن ها و سایت ها صدق میکند و بسیار برای جلب رضایت مخاطبان و کاربران اهمیت دارد .
این موضوع را هم میدانیم که سایت ها و اپلیکیشن ها برای ارائه محتوا واطلاعات به کاریران تولید شده اند و همانطور که در مثال بالا در رابطه با
روزنامه گفتیم باید وب سایت ها و اپلیکیشن ها به گونه ای طراحی شوند که کاربران و مخخاطبان بتوانند د ر نگاه اول موضوع مد نظر را پیدا کنند .
به بیان دیگر میتوان گفت طراحی UX /UI باید به گونه ای باشد که مخاطب به سوی اطلاعات مهم و کاربردی سایت و یا اپلیکیشن هدایت شود در نتیجه برای
رسیدم به این موضوع باید از سلسسه مراتب بصری به شکل اصولی استفاده کنید .
Visual Hierarchy به چه معناست ؟
از سلسله مراتب بصری و یا Visual Hierarchy برای رتبه بندی اهمیت اطلاعات و تاثیر گذار بودن انها استفاده میشود البته با استفاده از مقوله ایی مانند کنتراست ،
تعادل و یا مقیاس و دیگر عناصر مهم این امر امکان پذیر است و همچنین کمک میکند هر یک عاصر بنا به اهمیتشان در جای خود قرار بگیرند .
سلسله مراتب بصری بسیار در معماری اطلاعات و برنامه ریزی ان نقشی کلیدی دارد و باعث میشود مخاطبان راحت تر وب سایتتان را پیدا کنند .
همچنین باید بدانید که طراحی UX یکی از راه های کلیدی برای از بین بردن اصطکاک و همچنین بیشتر شدم قابلیت های استفاده از یک محصول می باشد .
در نتیجه سلسله مراتب صفحه نمایشی به حساب می اید که عصنر های مهم در یک صفحه را سازماندهی میکند به شکلی کاربر بتواند روی موضوع اصلی متمرکز شوند
که المان هایی مانند ( فونت ، رنگ ، کنتراست ، سایز و غیره ) که در بالا بیان کردیم در این موضوع تاثیر گذار است .
اصول طراحی سلسه مراتب بصری
اصول روانشناسی :
در طراحی سایت و یا محصولات به دلیل اینکه کاربر با UX / UI بسیار در ارتباط است
از اصول رواشناسی باید استفاده شود . قانون هیک در رابطه با این موضوع اینگونه میگوید که ذهن انسان با تمایلل دارد الگوی های قابل پیش بینی را دنبال کند
و از انها پیروی کند . به عنوان مثال چشم و ذهن برای ریاضی عادت کرده است از چپ به راست شروع به خواندن کند .
رنگ و المان های بصری :
در طراحی هیچگاه نباید از یک المان به طور مکرر استفاده گرد باید به شکل کتعادل از تمامی عناصر بهره برد مثلا بسیار اهمیت دارد که از رنگ و کنتراست
در طراحی استفاده کنید و تاثیرات زیادی در این رابطه داشته باشد اما این یک قانون کلی نیست .مانند زمانی که برای درست کردن تیتر یک موضوع
از تایپوگرافی و کنتراست استفاده میکنیم .
چشم و ذهن مخاطب ان موضوعی را که از همه بزرگتر باشد زودتر میبند و در ذهن ثبت میکند که ان موضوع از اهمیت بیشتری برخوردار است .
ساخت واحدی منسجم :
در بالا بیان کردیم استفاده از کنتراست و اندازه المان ها در سلسه مراتب حائز اهمیت است اما این موضوع به این معنا نیست که اسنجام و یکپارچگی سایت
و محصولات بهم بریزد و از بین برود تمامی تغییراتی که در عنصرها اتفاق می افتد باید متعادل و متناسب باشد .به طوری که زمانی که مخاطب
و کاربران به سایت نگاه میکنند صفحه ای را مشاهد هکنند که عناصری بولد تر و با رنگ متفاوت دارد که از اهمیت بیشتری برخوردار است .
تست Visual Hierarchy :
برای تست سلسه مراتب باید از The Squint Test استفاده کرد در این نوع تست صفحه اپ و یا سایت تار شده تا دسته بندی و ساختار سلسه مراتبی
ان مشخص شود و اگر چیزی مشخص نبود و ساختار و المان ها مشخص نشد به این معناست که ساختار به خوبی رعایت نشده است .
یکی از افزونه های طراحی شده توسط کروم Squint است .
مزایای استفاده از سلسله مراتب بصری
سلسه مراتب ابزاری است برای هدایت چشمان و ذهن کاربران برای دیدن اطلاعات و متوجه شدن ترتیب اولویت ها که مخاطب در زمان ورود به سایت
و یا اپ سردرگم نشود و مسیر موردنظر به راحتی طی شود . همچنین تنها نمیتوان از طریق محتوا و دیزاین جذاب مشتری جذب کرد بلکه باید
با رعایت سلسله مراتب مشتری را برای خود حفظ کرد و رضایت ان را به دنیال داشته باشد .
سخن پایانی کدینو :
در یافتیم که سلسله مراتب یکی از مفاهیم مهم در طراحی UI / UX است سپس از طریق سلسه مراتب درجه اهمیت اطلاعات را میتوان برای کاربر مشخص کرد .
اگر زمانی سلسله مراتب به خوبی صورت نگرفته باشد مخاطب نمیتواند با اپ و سایت تعامل خوبی داشته باشد و باعث نارضایتی او میشود .
همچنین این امر اصولی دارد که باید به شکل دقیق رعایت شود تا سایت منحصر فرد با سلسله مراتبی کابر پسند داشته باشبم .
امیدواریم این مطب هم مورد پسند شما همراهان همیشگی کدینو واقع شده باشد و نهایت استفاده را ببرید ..
کدینو همراه و پشتیبان همیشگی شما….
