تشخیص آیکون‌های توپُر (Solid) سریعتر است یا توخالی (Outline) ؟

هنگام طراحی یک اپلیکیشن موبایل، زمانی می‌رسد که شما باید تصمیم بگیرید که آیا می‌خواهید از آیکون‌های توپُر( Solid Icons) استفاده کنید یا آیکون‌های توخالی(Outline Icons). کدام سبک برای تجربه کاربر بهتر است؟

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

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

یک مطالعه تحقیقاتی،“Filled-in vs. Outline Icons: The Impact of Icon Style on Usability" کشف کرد که سبک آیکون‌ها بر عملکرد کاری تاثیر می‌گذارد. این تحقیق بر روی سرعت و دقت در تشخیص و انتخاب آیکون‌ها انجام گرفته است.

در این تحقیق، آیکون‌های توپر(Solid icons) به طور کلی سریعتر از آیکون‌های توخالی(Outline Icons) تشخیص داده می‌شدند، اما با چند استثناء و هم چنین در سرعت شناخت برخی از آیکون‌ها هیچ تفاوت زمانی دیده نشده است .

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

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

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

چه وقت از آیکون‌های تو خالی (Outline Icons) استفاده کنیم ؟

در بعضی موارد تشخیص آیکون‌های توخالی(outline) سریعتر اتفاق می‌افتد و آن هنگامی است که از آیکون‌هایی استفاده میکنیم که دارای نشانه های مشخصه‌ی ظریفی در لبه‌های بیرونی خود هستند.

برای مثال، سه آیکون حباب، سطل زباله و کلید دارای نشانه‌های مشخصه ظریفی هستند که در لبه‌های بیرونی شکل ظاهر می‌شوند.

در آیکون حباب، تشخیص دٌم حباب در حالت توپر مشکل است، همین طور تشخیص دَر سطل زباله و دندانه‌های کلید در حالت توپر(solid). به همین دلیل سبک توخالی(outline) آیکون باعث می‌شود که این نشانه ها راحت تر تشخیص داده شوند.

هنگام انتخاب آیکون‌ها، بهتر است به یک سبک پایبند باشید. به جای استفاده همزمان از سبک های solid و outline، سعی کنید مجموعه ای از آیکون‌هایی را که دارای مشخصه های برجسته و با زوایای واضح‌تر هستند را انتخاب کنید.

چه وقت از آیکون‌های توپر (Solid Icons) استفاده کنیم ؟

بیشتر آیکون‌ها نمایانگر اشیاء در دنیای واقعی هستند. این اشیاء به شکل توپر بوده و به صورت نیم رخ بنظر می‌آیند. مشاهده آیکون‌ها به صورت توخالی با حالت واقعی که ما آنها را میبینیم مطابقت ندارد، به همین دلیل آیکون‌های توپر سریعتر تشخیص داده می شوند.

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

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

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

بهتر است از آیکون‌های توپر برای اشیاء با فاصله داخلی باریک استفاده کنید.حالت نیم‌رخ، شکل ساده‌تری ارائه می‌دهد و باعث می شود آیکون‌ها بیشتر قابل شناسایی باشند.

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

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

برای دکمه ها از چه سبک آیکون‌هایی استفاده کنیم ؟

استفاده از یک آیکون توپر برای برجسته کردن دکمه فعال (active button) روشی متداول در نوار زبانه (tap bar) است، در حالی که دکمه های دیگر به شکل توخالی باقی می‌مانند. اما این یک طراحی قدیمی است و باید روش دیگری ارایه کرد.

کاربران نیاز دارند گزینه‌هایی که هنوز کشف نکرده اند را تشخیص دهند (inactive button)، نه گزینه ایی که قبلاً آن را انتخاب کرده‌اند (active button). یک آیکون توپر برای دکمه فعال ضروری نیست. برای دکمه‌های غیر‌فعال از اهمیت بیشتری برخوردار است تا کاربر بتواند آنها را سریعتر و واضح‌تر تشخیص دهد.

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

دستورالعمل‌های کلی برای استفاده از سبک های آیکون:
اگر سرعت کار برای کاربران شما مهم است، باید میزان سرعت تشخیص آیکون در نظر گرفته شود. و اگر می‌خواهید سرعت شناخت بیشتری داشته باشید، آیکون‌های سبک solid بهتر هستند. اما یک قاعده مستثنی وجود دارد که باید آن را در نظر داشته باشید. دانستن این استثناء به شما این امکان را میدهد وقتی شرایط متناسب باشد از سبک outline استفاده کنید.
به طور خلاصه، مواردی را که باید هنگام استفاده از سبک های آیکون در نظر داشته باشید این است:
آیکون‌ها شامل علائم مشخصه‌ای هستند که باید قابل شناسایی و برجسته باشند.
آیکون‌های توپر(solid icons) سریعتر تشخیص داده می‌شوند مگر اینکه نشانه های آنها ظریف و به اندازه کافی برجسته نباشد.
آیکون‌های توخالی(outline icons)، زمانی که فاصله داخلی گسترده‌ای دارند، بهتر تشخیص داده می‌شوند.
اگر آیکون‌ها دارای نشانه های مشخص و ظریف در لبه ها هستند، از آیکون‌های توخالی استفاده کنید.
اگر آیکون‌ها دارای فاصله داخلی باریک هستند، از آیکون‌های توپر استفاده کنید.

سخن آخر

بعد از تمامی مطالبى كه ذكر كرديم، سؤال ديگرى برای من بوجود آمد و آن سؤال، اين است: آیا آیکون‌های solid برای افرادی با مشکل بینایی مثل افراد مسن، قابلیت تشخیص‌ بهتری نسبت به آیکون‌های outline دارند؟

من تحقیقی در این مورد پیدا نکردم اما اگر شما تجربه یا تحقیقی در این مورد دارید، خوشحال میشم به اشتراک بگذارید و کامنت کنید.