استفاده از توجه و تمرکز برای تقویت سلسله مراتب دیداری

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

هر چه بیشتر اطراف یک المان فضای منفی اضافه کنیم، احتمال دیده شدن آن بالاتر میرود.

فاصله بین خطوط به عنوان فضای منفی

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

تحقیقات نشان داده اند که رابطه مثبتی بین درک محتوا متن و فاصله خطوط وجود دارد. به این معنی که با افزایش فاصله خطوط، درک محتوا میتواند تا ۲۰ درصد افزایش یابد.

از کجا بفهمیم چه میزان فضای بین خطوط کافیست؟

بر اساس راهنمای دسترس پذیری وب (wcag 2.0) فضای بین خطوط متن باید حداقل ۱۵۰ درصد بزرگتر از اندازه فونت باشد.

این به این معنی است که تقریبا هیچگاه نباید از فاصله خطوط پیشفرض تعریف شده برای پاراگراف ها و عناوین استفاده کنیم. برای مثال اکثر مرورگر ها به صورت پیشفرض از فاصله خطوط ۱۱۰ درصد و ۱۲۰ درصد، Sketch و Adobe Creative Suite از ۱۲۰ درصد، Bootstrap از ۱۴۲ درصد اندازه فونت تعریف شده و Medium از ۱۵۷ درصد برای متون خود استفاده میکنند.

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

در این دو مثال فضای منفی متفاوتی اعمال شده است:

برای اینکه ببینیم طرح بندی بدون محتوا یا فضای مثبت معنی دار چطور به نظر میرسد. در عکس زیر به وضوح میبینیم که فضای منفی چگونه به درک بهتر دیداری رابط کاربری کمک میکند:

میبینیم که اضافه کردن فضای منفی میتواند در سطوح مختلف اعمال شود. اضافه کردن درون کامپوننت ها:

استفاده از فضای منفی میکرو برای تنظیم فاصله خطوط در پاراگراف ها :

در تصویر سمت چپ پاراگرافی با اندازه فونت ۱۷ پیکسل با فاصله خطوط ۱٫۵۸ (۱۵۰%) را می بینیم و در سمت راست پاراگرافی با همان اندازه فونت و فاصله خطوط ۱٫۲۳ (۱۲۳%) را میبینیم.

اعمال فاصله خطوط سفارشی در اپلیکیشن های native  اندروید و iOS

وقتی درباره اعمال فاصله خطوط سفارشی در اپلیکیشن های native صحبت میکنیم خواصی وجود دارد که باید از آنها مطلع باشیم. اگر میخواهیم از تایپوگرافی سفارشی با فاصله خطوط سفارشی در iOS استفاده کنیم نیاز است تا از نحوه اعمال شدن اندازه فونت پویا اطمینان حاصل کنیم. ویژگی مشخص کردن اندازه فونت پویا به کاربر اجازه میدهد تا با استفاده از نیاز های دسترسی پذیری اندازه فونت را در تمام دستگاه با توجه به سلیقه خود تنظیم کند که این کار اپلیکیشن ها را نیز تحت تاثیر قرار میدهد. علاوه بر این برای فاصله خطوط در استایل های کلی فونت های دستگاه هیچ اپلیکیشنی مستثنی نمیشود مگر اینکه به عنوان فونت سفارشی تعریف شده باشد که به این منظور باید مطمئن شویم که اپلیکیشن به خوبی برای کار با انداز فونت پویا پیاده سازی شده باشد. به همین دلیل زمانی که نمیتوانیم تایپوگرافی خود را با اندازه فونت پویا هماهنگ کنیم پیشنهاد میشود از فونت های سیستم iOS استفاده کنید تا از تامین حداکثر دسترسی پذیری برای کاربر اپلیکیشن خود اطمینان حاصل کرده باشیم.

در اندروید امکان تعریف مستقیم فاصله خطوط در استایل متن کلی به وسیله LineSpacingMultiplier وجود دارد.

نکات مهم
  1. اتکا به دانش روانشناسی و طرز کار ذهن انسان در رابطه با ادراک، حافظه و پردازش اطلاعات دیداری میتواند به ما کمک زیادی در طراحی رابط کاربری کند که این مسئله تاثیر بسزایی در تجربه نهایی کاربر دارد.
  2. استفاده از فضای منفی مناسب توجه کاربر را متمرکز میکند و سلسله مراتب دیداری معنی داری به وجود می آورد.
  3. فضای منفی مناسب در پاراگراف ها و متون توانایی خوانش و درک متن را افزایش میدهد.

 فضای خالی بیشتر، تجربه کاربر برای حرکت در اپلیکیشن را سبک تر، روان تر، آسان تر، راحت تر میسازد.

 بخش اول

منبع :

https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203

مطالب مرتبط


دوره فشرده آموزش طراحی تجربه کاربری : درس ۱۹... ماموریت من در ارائه این 31 درس این است که ، طراحان (یا طراحان مشتاق) بیشتری در طراحی تجربه کاربری شروع به کار کنند. بهترین مکان برای شروع یادگیری هر چ...
تجربه کاربری با پس زمینه علوم شناختی... یک تجربه کاربری عالی ترکیب مناسبی از مفاهیم روانشناسی، اصول طراحی برای یک رابط کاربری زیبا و بازخورد مستمر از کاربران است. اغلب طراحان فاکتور دوم را ه...
۵ نکته از بهینه سازی تجربه کاربری که رنکینگ Search... هر زمان که تمرکز شما برای ترویج (‌پروموشن) یک وب سایت، سرویس یا یک برند، در فضای آنلاین است، در واقع دارید بر بهبود رتبه در نتایج جستجو تمرکز می کنید ...
قدرت فضای خالی در طراحی رابط کاربری(بخش اول)... زمانی که درباره طراحی رابط کاربری صحبت می کنیم، ساده ترین راه درک آن تشخیص کامپوننت های آن طراحی و چگونگی ظاهر آنهاست. بارها پیش آمده است که با اینکه ...
طراحی تجربه کاربری و ایجاد نمونه اولیه، چیزی که ط...   شرکت پیشرو و موفق Adobe سال‌ها است که به طراحان و توسعه‌دهندگان در حوزه‌های مختلف کمک زیادی کرده است. اگر در حوزه طراحی‌های بصری نظیر طراحی رابط کار...
محمد نسیمی

نویسنده محمد نسیمی

محمد نسیمی هستم. از مهندسی عمران وارد طراحی تجربه و رابط کاربری شدم و در حال حاضر در این زمینه فعالیت میکنم.

نوشته های بیشتر از محمد نسیمی

نظرتان را بگویید