سلسله مراتب بصری چیست؟

همه‌ی ما سرریز اطلاعات¹ را تجربه کرده‌ایم. اسلایدهایی که بیش از حد متراکم هستند. صفحات وبی که فراخوان به اقدام (call to action) واضحی ندارند. فرم‌هایی با گزینه‌های بسیار زیاد.

میگل کاردونا، حامی طراحان در فیگما، توضیح می‌دهد: «اگر همه چیز یکسان به نظر برسد، در واقع شما هیچ چیز نمی‌بینید. سلسله مراتب بصری می‌تواند این وضعیت را تغییر دهد.»

سلسله مراتب بصری چیست؟

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

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

۷ اصل ضروری سلسله مراتب بصری

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

طراحان هفت اصل کلیدی سلسله مراتب بصری را برای کمک به ذهن در درک سریع ایده‌ها به کار می‌گیرند.

۱. تراز (Alignment) به جایگاه یک عنصر بصری در مقایسه با سایر عناصر یک گروه اشاره دارد. وقتی اشیاء تراز یا در یک خط قرار می‌گیرند، به عنوان عناصر مرتبط با یکدیگر درک می‌شوند.

۲. رنگ (Color) اغلب با معیارهایی چون فام (hue)، روشنی (lightness) و اشباع (saturation) توصیف می‌شود. با این حال، رنگ می‌تواند چالش‌برانگیز باشد، زیرا افراد آن را بسیار متفاوت درک می‌کنند. برای ایجاد یک سلسله مراتب بصری واضح، کاردونا بر درخشندگی (luminance) و تابندگی (brilliance) در طراحی تأکید می‌کند. توصیه می‌شود از یک پالت رنگ از پیش تعیین‌شده با کنتراست خوب استفاده کنید که می‌توان آن را به راحتی با استفاده از یک ابزار تولید چرخ رنگ (color wheel generator) تنظیم کرد.

۳. تضاد (Contrast) زمانی رخ می‌دهد که عناصر بسیار متفاوت در کنار یکدیگر قرار گیرند. طراحان اغلب عناصر گرم و سرد یا رنگ‌های مکمل را در کنار هم قرار می‌دهند تا جذابیت بصری را افزایش داده و نسبت کنتراست را برای دسترسی‌پذیری (accessibility) بهبود بخشند.

۴. مجاورت (Proximity) به نزدیکی یا دوری آیتم‌ها نسبت به یکدیگر اشاره دارد. گروه‌بندی یا «دسته‌بندی» (chunking) اشیاء نمونه‌ای از کاربرد این اصل است.

۵. اندازه (Size) به ابعاد یک شیء یا عنصر طراحی اشاره دارد. اندازه عناصر رابط کاربری (UI) مانند دکمه‌ها یا محتوا می‌تواند یک ملاحظه مهم برای دسترسی‌پذیری باشد. کاردونا می‌گوید: «اگر به کاربران کم‌بینا این فرصت را ندهید که بر اندازه متن و تصویر کنترل داشته باشند، درک و خواندن محتوای خود را دشوار کرده‌اید.»

۶. بافت (Texture) حسی است که یک سطح دارد یا تصور می‌شود یک عنصر رابط کاربری دارد. کاردونا می‌گوید: «بافت به شما امکان می‌دهد به طراحی معنا ببخشید و ممکن است به ارائه یک نشانه بصری واضح از نحوه استفاده از چیزی کمک کند.» هنگامی که طراحان رابط کاربری از بافت برای تقلید ظاهر مواد لمسی و واقعی استفاده می‌کنند، به آن اسکئومورفیسم (skeuomorphism) گفته می‌شود—و اگر با دقت انجام نشود، ممکن است قدیمی یا بیش از حد تحت‌اللفظی به نظر برسد. کاردونا توضیح می‌دهد: «در طراحی دیجیتال، بسیاری از طراحان از بافت اجتناب می‌کنند—اما این عنصر می‌تواند واقعاً تأثیرگذار باشد. می‌توان از بافت برای ایجاد هایلایت‌ها به جای تکیه بر رنگ استفاده کرد.»

۷. زمان (Time) در صفحه‌های نمایش به شکلی متفاوت از صفحات چاپی و محصولات ثابت جریان دارد. صفحه‌ها می‌توانند تغییر کنند، واکنش نشان دهند و دگرگون شوند و دنیای جدیدی از طراحی زمانی (temporal design) را بگشایند.

نمونه‌های الهام‌بخش از سلسله مراتب بصری

نمونه مورد علاقه کاردونا از سلسله مراتب بصری، آثار ماسیمو و للا وینیلی (Massimo and Lella Vignelli) است.

کاردونا می‌گوید: «نکته قابل توجه در مورد وینیلی‌ها و آثارشان، روشی است که آنها از مقیاس و سلسله مراتب استفاده می‌کنند. آثار آن‌ها واقعاً خارق‌العاده است.»

«وینیلی‌ها کتاب‌ها، پوسترهای چاپی، فضاها و مبلمان را طراحی کردند—همه با این تعامل مقیاس، و با درک این موضوع که بر اساس رابطه شما با آن شیء، چیزی برای شما وجود دارد. به ازای هر درجه‌ای از فاصله که شما از یک طرح دارید، یک نقطه تعامل وجود دارد.»

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

۵ نکته حرفه‌ای برای سلسله مراتب بصری

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

• کاربر نهایی و زمینه (context) او را بشناسید. شما ممکن است یک سلسله مراتب بصری برای یک دستگاه تلفن همراه طراحی کنید—اما آن دستگاه در دست شخصی در یک مکان و زمان خاص قرار دارد. کاردونا می‌پرسد: «آیا کاربرانشان عجله دارند یا می‌توانند با فراغ بال محتوا را مرور کنند؟ آیا در دست چپشان یک کودک و در دست راستشان یک کیسه خرید دارند؟ طراحان ممکن است زمینه فردی را که سعی در درک سلسله مراتب آن‌ها دارد، فراموش کنند. ما فرض می‌کنیم که همه در فاصله یکسانی از تلفن خود قرار دارند، اما وقتی عوامل دیگری در میان باشند چه اتفاقی می‌افتد؟»
• رسانه (medium) اهمیت دارد. کاردونا می‌گوید، وقتی نوبت به ایجاد سلسله مراتب بصری می‌رسد، رسانه تعیین می‌کند که کدام اصول در عمل بیشترین کاربرد را خواهند داشت. به عنوان مثال، در مورد یک بیلبورد یا یک اپلیکیشن موبایل، مقیاس یکی از مهم‌ترین عوامل در طراحی شما خواهد بود.
• پرسشگری کنید، آزمایش کنید، تست کنید و تکرار کنید. از جسور بودن و امتحان کردن چیزهای جدید نترسید—زیرا وقتی همه چیز یکسان به نظر برسد، هیچ چیز برجسته نخواهد بود. کاردونا می‌گوید که طراحی دیجیتال با تکرار خلاقانه و تست بتا رشد می‌کند. هنگامی که کار شما در دسترس عموم قرار گرفت، شروع به دیدن نحوه تعامل مردم با آن خواهید کرد و یک حلقه بازخورد ایجاد می‌شود که الهام‌بخش بهینه‌سازی‌های بیشتر است.
• مقدار کم، تأثیر زیادی دارد. کاردونا مشاهده می‌کند: «اغلب، افراد سعی می‌کنند بیش از حد کار انجام دهند. دیدن آنچه ضروری است ممکن است راه‌حل بهتری را آشکار کند.» او می‌گوید که استفاده مؤثر از فضای سفید یا منفی، تاکتیکی است که اپل و گوگل مدت‌هاست از آن استفاده می‌کنند و ارزش بازنگری را دارد.
• افشاسازی تدریجی (Progressive disclosure) را در نظر بگیرید. افشاسازی تدریجی تکنیکی است که طراحان تجربه کاربری (UX) برای تقسیم اطلاعات یا مراحل به بخش‌های قابل هضم‌تر استفاده می‌کنند. با توالی محتوا در چندین صفحه، این رویکرد احتمال اینکه کسی با دیدن محتوای پیش رویش احساس سردرگمی یا دستپاچگی کند را کاهش می‌دهد. کاردونا می‌گوید: «این چیزی است که همه طراحان باید روی آن کار کنند.»

در دوره آموزشی طرحی UI یک قدم جلو باشید.

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

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

1. این عبارت به وضعیتی اشاره دارد که مغز انسان با حجم زیادی از اطلاعات روبرو می‌شود که پردازش و درک همزمان آن‌ها دشوار یا غیرممکن است. وقتی هیچ راهنمای بصری برای تشخیص اینکه «چه چیزی مهم‌تر است» وجود نداشته باشد، کاربر احساس سردرگمی، خستگی و کلافگی می‌کند.
   در عمل، این حالت را در موقعیت‌های زیر تجربه می‌کنیم:یک وب‌سایت شلوغ.یک اسلاید ارائه پیچیده.یک فرم ثبت‌نام طولانی
   ↩︎

حسین اصلانی