سلسله مراتب بصری UI و UX در هدایت چشم کاربر
سلسله‌مراتب بصری (Visual Hierarchy) چیست؟ چرا از مهمترین مفاهیم در پیاده سازی تجارب کاربری و پیاده سازی رابط کاربری میباشد؟
پیاده سازی سلسله‌مراتب بصری چه اصولی داراست؟ در‌این مقاله به‌این سوال ها جواب جواب خواهیم داد
و مفصل درباره ی یکی از مهمترین مفاهیم در پیاده سازی UI/UX توضیح خواهم بخشید.
نمادها در تاریخ و تمدن بشری نقش مهمی داشتند. خواندن و تفسیرکردن اثرهای به‌جامانده از مردمان باستان جزبا تفسیرکردن نشانه‌ها و نمادهای به‌کاررفته در آن اثرها امکان‌پذیر نبوده میباشد.
علاوه‌بر نشانه‌ها، نوع قرارگرفتن اجزای یک تصویر درکنار یکدیگر نیز مضمون خاصی را منتقل می‌نماید.
مثلا، در سنگ‌نگاره‌های تخت جمشید، آنجاکه می‌خواستند عظمت امپراطوری کشور‌ایران را نشان دهند، پادشاه ایران بزرگ‌تر از بقیه‌ی اشخاص روی تخت بزرگی نشسته میباشد و بقیه افراد کوچک‌تر و پایین‌تر از وی در مقابلش به‌صف زانو زدند.
صرفا اشکال نیستند که ممکن میباشد معنای خاصی داشته باشند، رنگ‌ها هم ممکن میباشد علامت و نشانه‌ی چیزی باشند.
از جمله، رنگ قرمز معمولا برای تاکید و جلب‌توجه استعمال میگردد یا این که رنگ سیاه نشانه‌ی اندوه و غم میباشد.
در زندگی روزانه‌ی ما هم اشکال و رنگ‌ها (نمادها) کاربرد بسیار وسیعی دارا‌هستند، به عنوان مثال علائم راهنمایی‌ورانندگی و بنرهای تبلیغاتی.
نمونه بسیار بهتر دیگر برای کاربرد نمادها و نشانه‌ها و مفاهیم ایجادشده با شیوه‌ی قراردادن اشکال کنار یکدیگر پیاده سازی کالا (وب سایت و نرم افزار) میباشد.
بله، این‌طور نیست که طراح وب سایت یا این که طراح UI/UX فارغ از هیچ اصول و قاعده‌ای المان‌های صفحه های وب سایت را کنار یکدیگر بچیند.
طراح رابط کاربری و طراح تجربیات کاربری بایستی درمیان المانها سلسله‌مراتب بصری (Visual Hierarchy) ایجاد نمایند و براساس اصول سلسله‌مراتب بصری المانها را کنار یکدیگر قرار دهند.
در پیاده سازی محصول، ازجمله برای ساختن سلسله‌مراتب بصری، از یافته‌های روانشناسی بسیار کمک گرفته میگردد، زیرا مقصود این میباشد که شایسته ترین تعامل برای کاربر پیاده سازی گردد
در این مقاله قصد داریم سلسله مراتب بصری UI و UX در هدایت چشم کاربر را برای شما شرح دهیم.
قانون هیک در پیاده سازی UI و UX
قانون هیک نتیجه‌ی پژوهش های دو روانشناس بریتانیایی و آمریکایی به‌اسم‌های William Edmund Hick و Ray Hyman در دهه‌ی ۶۰ میلادی میباشد.
این قانون با زبان ریاضی (یک معادله) ذکر می شود. این قانون درواقع رابطه دربین مدت زمان واکنش آدم (Reaction Time or RT) به محرک‌های مو جود در دور و بر را براساس تعداد محرک‌ها ذکر می‌نماید.
به‌زبان ساده، هرچه محرک‌ها بیشتر باشد؛ مدت زمانی که آدم به آنها واکنش نشان میدهد (جواب می دهد) نیز بیشتر میگردد. به‌بیان دیگر:
قانون هیک میگوید که هرچه آدم با انتخاب‌های بیشتری روبه‌رو گردد، زمان بیشتری نیاز داراست تا تصمیم بگیرد.
پس، هرچه انتخاب‌ها (آیتم‌ها، تعاملات، کارهایی که بایستی اعمال دهد) کمتر باشد؛ آدم در مدت زمان کمتری واکنش نشان می دهد، تعیین می‌نماید و یا این که کاری را انجام می دهد.
ضابطه هیک بیشتر از آنچه شما تصور کنید در پیاده سازی محصول مهم میباشد.
شاید باور نکنید که تعداد دکمه‌های روی ماشین لباسشویی یا ظرفشویی یا این که ریموت کنترل‌ها هم با کمک قانون هیک معین می شوند.
مزایای قانون هیک
۱. قانون هیک به طراح کمک می‌نماید تا تعداد مطلوب تعاملاتی را که مخاطب باید با سایت یا نرم افزار داشته باشد به‌دست بیاورد.
پس استفاده کننده را برای انتخاب‌کردن به‌زحمت و دردسر نمی‌اندازد.
۲. طراح ux و ui با به کارگیری از این قانون، انتخاب‌های استفاده کننده را به ضروری‌ترین‌ها و کاربردی‌ترین‌ها محدود مینمایند.
بدین‌ترتیب، مخاطب به اندازه‌ی کافی در وب سایت میماند و میچرخد، ساده و آسان چیزی را که میخواهد پیدا می‌نماید.
بعد از تجربه‌ی تعاملش با وب سایت یا اپلیکیشن (UX) راضی خواهد بود.
۳. طراح بایستی باتوجه به تمامی اصول و قوانین و استاندارهای پیاده سازی رابط کاربری و تجربیات کاربری وبسایت یا نرم‌افزار را پیاده سازی نماید.
قانون هیک یکی‌از آن مقررات میباشد. ولی ممکن میباشد به‌دلایلی کاملا موجه، طراح لازم بداند آن را رعایت نکند.
۴. طراح رابط کاربری و تجارب کاربری بایستی به اصول و قوانین صفحه آرایی، ازجمله عقیده‌های روانشناسی مرتبط، آشنا باشد تا بتواند تصمیم‌های درستی بگیرد.
به‌همین‌دلیل میباشد که در عصر آموزش تخصصی پیاده سازی محصول، خیلی کامل در زمینه‌ی مبانی و اصول دیزاین گفت و گو میگردد
سلسله مراتب بصری UI و UX در هدایت چشم کاربر
شما چطور کتاب‌ها را در کتابخانه اتاقتان دسته‌بندی میکنید؟ بعضی‌ها میباشند که مثل کتابخانه‌ها فعالیت مینمایند.
بعضی‌ها هم کتاب‌هایی را که مهم‌تر میباشند و بایستی در دید باشند تا سریع پیدا شوند، می گذارند جلوتر یا جوری میگذارند که دریکنگاه پیدا شوند.
نمیشود همه‌ی کتاب‌ها به‌یک‌اندازه مهم باشند. این مطلب در زمینه ی داده ها نیز درستی میباشد. همه‌ی داده ها به‌یک‌اندازه مهم نیستند.
برخی محصولات میباشند که برای عرضه‌کردن داده ها پیاده سازی و ساخت‌و‌ساز می گردند، مثل روزنامه‌ها.
تابه‌حال به صفحه‌بندی روزنامه‌ها دقت کردید؟ در صفحه اولیه روزنامه همه‌چیز براساس اهمیتی که داراست درجای خاصی قرار میگیرد.
تیتر مهم بایستی طوری پیاده سازی و نوشته گردد که رهگذرها هم دریکنگاه کوتاه بتوانند آن را بخوانند.
وب سایت‌ها و نرم افزار‌ها هم همینطور میباشند.
وبسایت‌ها برای عرضه‌ی محتوا و داده های خاصی به استفاده کننده پیاده سازی و ساخته می گردند.
در وبسایت یا نرم افزار هم اطلاعاتی (محتوا) وجود داراست که مخاطب می بایست آن‌ها‌را دریکنگاه و خیلی سریع پیدا نماید.
اصولا مخاطب نباید دنبال چیزی در وب سایت بگردد و این وظیفه‌ی طراح محصول میباشد که مطمئن گردد پیاده سازی UI/UX وب سایت و طرح‌بندی هر برگه (Page Layout) از وبسایت به‌گونه‌ای میباشد که مخاطب را به مهمترین و کاربردی‌ترین داده ها هدایت می‌نماید.
برای رسیدن به آن هدف طراحان از مفهومی به‌اسم سلسله‌مراتب بصری بهره می برند.
تعریف معنا Visual Hierarchy
سلسله‌مراتب بصری یعنی چیدن المان‌های بصری در هر برگه از وبسایت یا نرم‌افزار به‌سیرتکامل‌ای که نظمی طبیعی براساس اهمیت محتوا یا المان درمیان آنان برقرار خواهد شد تا مخاطب دریکنگاه، بدون فکرکردن، کلیه‌ی داده ها را به‌ترتیب اهمیت آنان دریابد.
بگذارید مثال بزنیم تا معنای سلسله مراتب بصری و همینطور عناصر تولید کننده‌ی آن خیلی بهتر روشن خواهد شد.
در برخی تصاویر که از رنگ قرمز استفاده می کنند او‌لین چیزی (یعنی مهم ترین چیز برای آن کسب‌وکار که میخواهد شمای مخاطب آن را بدانید) که می دانید چیست؟
گاهی اول‌ازهمه دقت شما به رنگ قرمز جلب می گردد و بعد لوگو و نام کسب‌وکار و درنهایت دسته‌بندی محصولات را می بینید.
چرا طراح از رنگ قرمز استفاده نموده است؟ زیرا رنگ قرمز در کنتراست (تضادومغایرت) با رنگ پس‌زمینه‌ی وب سایت میباشد.
محصولات کسب‌وکار خیلی منظم و دریک‌راستا کنار هم قرار می گیرند.
فضای خالی که لوگوی کسب‌وکار را احاطه می کند، ناخودآگاه لوگو را، که در مرکز و با رنگ مختلف طراحی شد ه باشد، پر رنگ‌تر می‌نماید.
وقتی کاربر وارد اینوب سایت می گردد، او‌لین چیزی که می‌بیند چیست؟ دومی و سومی چطور؟
طراحان این وب سایت می‌خواستند چطور چشم استفاده کننده را هدایت نمایند؟
استفاده کننده اول‌ازهمه آن نوار بالا را می‌بیند که پیاده سازی و رنگ متفاوتی دارد، سپس لوگو را می‌بیند و شعار کسب‌وکار را که بعد‌از فضای خالی با سایز درشت‌تر نوشته شده میباشد.
بعد‌از آن استفاده کننده نوشته‌ی با رنگ دیگر را می‌بیند و می فهمد این سایت چه نوع کسب‌وکاری میباشد.
براین اساس، عناصر تولیدکننده‌ی سلسله‌مراتب بصری مجموعه‌ی المان‌های بصری (رنگ، فونت، فونت سایز، کنتراست، فضای خالی، تقارن یا عدم تقارن و …) می باشند.
در هر وبسایت و در هر برگه از وبسایت براساس نوع و اهمیت محتوا و اطلاعاتی که قرار میباشد به استفاده کننده منتقل گردد، طراح UI/UX از یک یا این که چندتا از آن عامل ها بهره می گیرد تا سلسله‌مراتب بصری در بین داده ها را بسازد.
اهمیت و مزایای سلسله مراتب بصری UI و UX در هدایت چشم کاربر
هرچه دراهمیت سلسله‌مراتب بصری گفته شود، کم میباشد. سلسه‌مراتب بصری وسیله‌ای برای هدایت‌کردن چشم استفاده کننده برای دیدن داده ها به‌ترتیب اولویت آن‌هاست.
سوالی که پیش می آید این میباشد که حق تقدم برای چه کسی، کاربر یا صاحب وبسایت؟
پاسخ این میباشد که هردو! وبسایت فروشگاهی چه میخواهد؟ فروش محصولاتش. کاربر وبسایت فروشگاهی چه میخواهد؟
خرید چیزی که دنبالش میگردد با بهترین موقعیت و در کمترین زمان ممکن.
به این ترتیب، وبسایت فروشگاهی در‌صورتی‌که نخواهد مشتری ازدست دهد، نباید کاربرش را گیج نماید.
سوای سلسله‌مراتب بصری در وبسایت یا نرم افزار مخاطب نمی‌داند کجا را بایستی نگاه نماید!
سلسله‌مراتب بصری میباشد که به مخاطب میگوید اینجا را نگاه کن زیرا چیزی که میخواهی اینجاست.
پس محصول چنانچه بهترین محتوا را داشته و بسیار جالب صفحه آرایی گردیده باشد.
حتی در صورتی‌که برای مجموعه‌بندی محتوای آن به‌شایسته ترین و دقیق‌ترین شکل معماری داده ها (که برای ساختن سلسله مراتب بصری لازم و ضروری میباشد) انجام شده، البته سلسله‌مراتب بصری درمیان داده ها و محتواهای آن به‌درستی ساخته نشده باشد.
محصول موفقی نخواهد بود و استفاده کننده تعامل رضایت‌بخشی با آن نخواهد داشت.
درنتیجه، فرآورده (وب سایت یا نرم افزار) برای استفاده کننده بهره و کاربردی هم نخواهد داشت.
سلسله‌مراتب بصری واضح و شفاف چشم را به‌سمت مهمترین المانها در شیت هدایت می‌نماید.
سلسله مراتب بصری ممکن میباشد به‌وسیله‌ی تغییر و تحول در رنگ و ساخت‌و‌ساز کنتراست، در اندازه و همینطور دسته‌بندی محتواها ایجاد گردد.
اصول پیاده سازی سلسله مراتب بصری
چطور می شود سلسله‌مراتب بصری توانا و شفافی در یک برگه تشکیل داد؟
آیا درصورتی که هرچیز که مهم‌تر میباشد را با سایز بزرگ‌تر بنویسیم یا این که آن‌ها‌را در نوار قرمز رنگی بالای کاغذ یا این که میانه کاغذ قرار دهیم، سلسله مراتب بصری ایجاد کردیم؟
نه! ساختن سلسله‌مراتب بصری اصول و قواعد خودش را داراست و دیزاینرها می بایست براساس اصول پیاده سازی سلسله مراتب بصری آن را در هر کاغذ از وب سایت بسازند.
۱. باکمک‌گرفتن از اصول روانشناسی، چشم استفاده کننده را براساس تمایلات طبیعی ذهن آدم هدایت نمائید
همان‌طور که درابتدا اشاره کردیم، در پیاده سازی محصول چون مقصود پایانی این میباشد که محصولی متقاعدکننده برای استفاده کننده (انسان) پیاده سازی گردد، UI/UX دیزاینرها از یافته‌های روانشناسی بسیار سود میبرند.
علاوه‌بر قانون هیک، دانش روانشناسی به ما می گوید که چشم (ذهن) مخاطب با الگوهای آشنا و قابل‌پیش‌بینی مانوس‌تر میباشد و گرایش دارد از آن الگو‌ها تقلید نماید.
برای مثال، چشم فارسی‌زبان عادت کرده و تمایل دارد از راست به چپ بخواند.
همینطور، ذهن آدم به بازشناسی تمایل داراست.
یعنی ما به‌طورطبیعی نمیخواهیم خیلی تلاش کنیم برای خواندن و فهمیدن چیزی، ترجیح ما این میباشد که مفاهیم را دریکنگاه تشخیص دهیم.
اینکه کجا و چطور می بایست از تمایلات طبیعی ذهن بشر یا بر خلاف آنان در پیاده سازی سلسله‌مراتب بصری وبسایت بهره مند شد، تصمیمی میباشد که گروه صفحه آرایی می بایست با درنظرگرفتن عوامل مختلفی، ازجمله نیازها و حق تقدم‌های استفاده کننده آن محصول، بگیرد.
۲. فقط رنگ‌ها یا این که یک المان بصری سلسله مراتب را نمی‌سازد
عنصرهای تولیدکننده‌ی سلسله‌مراتب بصری گوناگون میباشند و نباید از هیچ‌کدام خیلی زیاد به کار گیری یا صرفا به یک عامل اتکا کرد.
رنگ‌ها و ایجادکردن کنتراست بسیار بسیار اساسی میباشد. جایی و گاهی ممکن میباشد کنتراست به شایسته ترین صورت سلسله مراتب را ایجاد نماید.
البته این یک قاعده‌ی کلی نیست. معمولا دیزاینرها برای پیاد ه سازی تیترها داد ه های اصلی از مخلوط کنتراست و تایپوگرافی سود میبرند.
اما دقت فرمائید که نباید از رنگ‌ها و تضاد و مغایرت رنگ‌ها بیش‌ازحد استفاده نمود.
استدلال بسیار مهم دیگر که در پیاده سازی سلسله مراتب بصری می بایست به آن توجه ویژه کرد، اندازه و مقیاس المان‌هاست.
چشم مخاطب آن چیزی را که بزرگ‌تر از همه نوشته‌شده یا این که کشیده‌گردیده را زودتر‌از سایر می‌بیند و به‌طورطبیعی درمی‌یابد که آن مهم‌تر میباشد.
بدین ترتیب، طراحان از سه سایز (و سه فونت سایز) در پیاده سازی المانها به کار گیری مینمایند: small, medium & large.
درباره ی اندازه‌ی المانها یک قانون کلی وجود دارد: مهمترین المان بایستی بزرگ‌ترین المان برگه باشد.
۳. سلسله مراتب بصری بایستی یک کل واحد و منسجم را بسازد
درست است که می بایست از کنتراست و المان‌های درشت و تغییر و تحول در اندازه‌ی المانها برای ساختن سلسله‌مراتب بصری استفاده نمود؛ البته این ابدا بدین معنا نیست که یکپارچگی و انسجام بصری محصول ازبین برود و هرچیز ساز خودش را بزند.
کلیه‌ی تغییرات در عنصرها و المانها بایستی متناسب بایکدیگر باشد و زمانی استفاده کننده به صفحه‌ی نرم افزار یا وب سایت نگاه می‌کند، یک کل واحد را ببیند که بعضا‌از موادسازنده آن پررنگ‌تر و مهم‌تر به‌نظر می‌رسند.
دیزاینرها از فضاهای خالی و قانون تقارن و همینطور اصول گشتالت برای نظم و تناسب بخشیدن به پیاده سازی کمک می گیرند.
۴. سلسه مراتب بصری پیاد ه سازی شد ه بایستی آزمایش گردد
هیچ‌چیز در پیاده سازی رابط کاربری و تجربیات کاربری بدون آزمایش‌شدن نهایی نمیشود.
برای سنجیدن سلسله‌مراتب بصری معمولا از تستی به‌اسم The Squint Test کمک استفاده میشود.
در‌این آزمایش صفحه‌ی وب سایت یا اپلیکیشن را مقداری تار مینمایند تا ببینند آیا سلسه‌مراتب بصری و دسته‌بندی محتواها همچنان مشخص میباشد یا نه.
در صورتی‌که المانها کلا غیرقابل‌تشخیص شوند، پیاده سازی سلسله‌مراتب به‌درستی اعمال نشده است و می بایست مجدد پیاده سازی گردد.
گوگل کروم پلاگین‌ای به‌اسم Squint برای این آزمایش داراست.
جمع‌بندی و نتیجه‌گیری
۱. در هر صفحه از وبسایت یا برنامه اطلاعات مختلفی بایستی به استفاد ه کنند ه عرضه گردد.
برای تعامل کاربر با محصول آن داد ه ها ضروری میباشند. البته همه‌ی آن ها به‌یک‌اندازه اصلی نیستند.
۲. سلسله مراتب بصری مفهومی بسیار مهم در پیاده سازی UI/UX میباشد.
سلسله مراتب بصری یعنی اولویت‌بندی داده ها هر صفحه از سایت یا نرم‌افزار براساس اهمیت آنان برای مخاطب و صاحب محصول.
۳. در شرایطی که سلسله مراتب بصری محصول به‌درستی پیاده سازی نشده باشد، استفاده کننده نمی‌تواند تعامل رضایت‌بخشی با محصول داشته باشد و درنتیجه دیگر از آن کالا (وب سایت یا اپلیکیشن) به کارگیری نخواهد کرد.
۴. پیاده سازی سلسله مراتب بصری اصول و قواعدی دارد.
سلسله مراتب بصری را بایستی براساس آن اصول و همینطور باتوجه‌به هدف محصول و نیازهای خاص کاربر آن کالا طراحی کرد.
۵. در آموزش پیاده سازی محصول کلیه‌ی مفاهیم و اصول مورد نیاز، ازجمله معنای سلسله مراتب بصری، که سبب ساز می گردد تا طراحی UI/UX به‌درستی صورت پذیرد و استفاده کننده تعاملی کاملا رضایت‌بخش با فرآورده داشته باشد آموزش داده میشود.
امیدواریم مطلب سلسله مراتب بصری UI و UX در هدایت چشم کاربر از گروه سه سوت برای شما مفید باشد.