منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۰ دقیقه

آیکون‌نگاری (Iconography) چیست؟

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

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

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

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

سه نوع آیکون

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

• - ۱. شباهت (Resemblance): آیکون شبیه خودِ چیز است. چاپگری که شکل چاپگر است. چیزی برای یادگیری ندارد، اما فقط برای مفهوم‌هایی کار می‌کند که شکل دارند.
• - ۲. نمونه (Exemplar): آیکون نمونه‌ای از دستهٔ کار را نشان می‌دهد. قیچی برای «برش». قیچی خودِ آن عملیات نیست؛ نمایندهٔ آن جنس کار است.
• - ۳. قراردادی (Arbitrary): معنایش فقط از توافق می‌آید. دایره‌ای با یک خط عمودی یعنی «روشن/خاموش» — هیچ چیزِ «روشن‌شکلی» در آن نیست. نماد بلوتوث هم از همین جنس است.

نکتهٔ عملی این تفکیک این است که شما انتخاب نمی‌کنید آیکون‌تان از کدام دسته باشد؛ مفهوم انتخاب می‌کند. «همگام‌سازی»، «حریم خصوصی» و «بایگانی» شکل ندارند، پس آیکون‌شان ناگزیر قراردادی است — چه بخواهید چه نخواهید. و دقیقاً همان‌جاست که برچسب متنی از «خوب است باشد» تبدیل می‌شود به «بدون آن معنا منتقل نمی‌شود».

در نویسندگی تجربه همین بحث را از زاویهٔ متن دیدیم: آیکون ذره‌بین در یک نقشه یعنی بزرگ‌نمایی و در یک فروشگاه یعنی جست‌وجو. آن نمونه در واقع یک آیکون نمونه‌ای است که در دو بافت دو معنای متفاوت گرفته — و همین نشان می‌دهد که بافت، بخشی از معنای آیکون است نه حاشیه‌اش.

بازشناسی، نه یادآوری — و ماجرای فلاپی‌دیسک

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

و بهترین نمونه برای فهمیدن اینکه بازشناسی از کجا می‌آید، آیکون ذخیره است:

فلاپی‌دیسک در دههٔ ۱۹۸۰ یک آیکون شباهتی بود: تصویرِ همان چیزی که در دستتان بود و روی آن ذخیره می‌کردید. امروز آن شیء از میز آدم‌ها رفته، ولی آیکونش مانده — و کار می‌کند. یعنی از دستهٔ اول به دستهٔ سوم مهاجرت کرده: حالا نمادی است که مرجعش را از دست داده ولی معنایش را نه. بخش بزرگی از کاربران امروز هیچ‌وقت فلاپی ندیده‌اند و باز هم می‌دانند آن دکمه چه می‌کند.

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

ریشهٔ تاریخی‌اش هم به بحث «اسکیومورفیزم» وصل می‌شود: دورانی که رابط‌ها عامدانه شبیه اشیای واقعی طراحی می‌شدند تا آدم‌ها کار با رایانه را یاد بگیرند. طراحی فلت که از حدود ۲۰۰۷ آمد، این تشابه را حذف نکرد؛ کم‌صداتر کرد. آیکون دوربینِ یک اپلیکیشن امروزی هنوز شکل دوربین است، فقط بدون سایه و بافت.

یکدستی: چرا آیکون به شبکه نیاز دارد

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

اصطلاح «اندازهٔ نوری» توضیح لازم دارد، چون همان چیزی است که شبکه واقعاً حلش می‌کند. یک دایره و یک مربع با جعبهٔ یکسان، هم‌اندازه به‌نظر نمی‌رسند؛ دایره کوچک‌تر دیده می‌شود. شبکهٔ آیکون جایی است که این تفاوت یک‌بار و برای همیشه تصحیح می‌شود، به‌جای آنکه برای هر آیکون از نو بحث شود.

جای طبیعی این قواعد، سیستم طراحی است — کنار توکن‌ها، نه در ذهن هر طراح. و رایج‌ترین راهی که یک محصول از یکدست‌بودن می‌افتد هم ساده است: خریدن دو کتابخانهٔ آیکون و استفاده از هر دو.

برچسب کجا می‌نشیند، و چه وقت آیکون تنها کافی است

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

محک عملی من سه شرط است که باید هر سه برقرار باشند:

• - ۱. آیکون در سطح صنعت جاافتاده باشد. نه در محصول شما — در همهٔ محصولاتی که کاربر شما استفاده می‌کند. ذره‌بین، سبد خرید، و علامت بستن در این دسته‌اند؛ آیکون اختصاصی «گزارش هوشمند» شما نیست.
• - ۲. در هر صفحه تکرار شود. آیکونی که کاربر روزی بیست بار می‌بیند، بار دوم یاد گرفته می‌شود. آیکونی که ماهی یک‌بار در یک صفحهٔ فرعی ظاهر می‌شود، هر بار از صفر شروع می‌کند.
• - ۳. نام دسترس‌پذیر داشته باشد. برچسبِ دیده‌نشدنی هم برچسب است. آیکونی که aria-label ندارد، برای صفحه‌خوان اصلاً وجود ندارد.

و یک نکتهٔ ظریف دربارهٔ جای برچسب در فارسی: برچسبِ زیر آیکون همیشه بی‌خطر است، ولی برچسبِ کنار آیکون در رابط راست‌به‌چپ باید سمت چپِ آیکون بنشیند تا ترتیب خواندن حفظ شود. این یکی از آن مواردی است که کتابخانه‌های آمادهٔ آیکون معمولاً برایتان انجام نمی‌دهند و در بازبینی هم دیر پیدا می‌شود.

حالتی هم هست که آیکون و برچسب هر دو باشند و باز مشکل داشته باشیم: وقتی برچسب، اسم آیکون را تکرار می‌کند نه کارکردش را. «آیکون چرخ‌دنده + تنظیمات» خوب است؛ «آیکون چرخ‌دنده + چرخ‌دنده» توضیح نیست.

آیکون و دسترس‌پذیری

آیکون سه جای مشخص می‌تواند دسترس‌پذیری را خراب کند، و همه‌شان قابل‌پیشگیری‌اند:

• - اندازهٔ ناحیهٔ لمس: آیکونِ کوچکِ خوش‌ترکیب اگر ناحیهٔ لمسش کمتر از حدود ۴۴ پیکسل باشد، روی موبایل عملاً یک تلهٔ خطاست. اندازهٔ دیده‌شدن و اندازهٔ زده‌شدن دو چیز جدا هستند و ناحیهٔ لمس می‌تواند بزرگ‌تر از خودِ شکل باشد.
• - کنتراست کافی: آیکونِ خط‌نازکِ خاکستری روشن روی پس‌زمینهٔ سفید، در نور آفتاب ناپدید می‌شود.
• - رنگ به‌عنوان تنها نشانه: اگر تفاوت آیکون «فعال» و «غیرفعال» فقط رنگ باشد، برای بخشی از کاربران هیچ تفاوتی وجود ندارد. همان قاعده‌ای که در دسترس‌پذیری مفصل آمده: رنگ باید نشانهٔ دوم باشد، نه اول.
• - و آیکون بدون متن جایگزین: صفحه‌خوان از یک شکل چیزی نمی‌فهمد. آیکونی که کارکرد دارد باید نامی داشته باشد که خوانده شود — حتی اگر آن نام روی صفحه دیده نشود.

اشتباه‌های رایج

این بخش هم افزودهٔ مترجم است و از دیدن مجموعه‌های آیکونِ محصولات فارسی می‌آید:

• - جزئیات زیاد: آیکونی که در ۶۴ پیکسل زیباست، در ۱۶ پیکسل لکه می‌شود. آیکون را در کوچک‌ترین اندازهٔ واقعی‌اش طراحی کنید، نه در بزرگ‌ترین.
• - منوی همبرگری به‌عنوان جواب همه‌چیز: این آیکون مبهم‌تر از آن است که به‌نظر می‌رسد و در ناوبری هزینه‌اش را دیدیم؛ سه خط موازی به کاربر نمی‌گوید پشتش چه چیزی هست.
• - نماد فرهنگی‌ای که ترجمه نمی‌شود: صندوق پستی آمریکایی، جغد به‌عنوان نشانهٔ دانایی، یا حرکت دست — هیچ‌کدام معنای جهانی ندارند. یک شکل ممکن است در فرهنگی بی‌معنا و در فرهنگی توهین باشد.
• - آیکون به‌جای برچسب در ناوبری اصلی: نوار پایین اپلیکیشن با پنج آیکون بی‌متن، کاربر تازه را وارد آزمون حافظه می‌کند.
• - عوض‌کردن آیکونِ جاافتاده در بازطراحی: بیشترین شکایت کاربران بعد از هر بازطراحی معمولاً دربارهٔ چیزی است که پیدا نمی‌کنند، نه چیزی که زشت است.

آیکون در رابط فارسی و راست‌به‌چپ

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

قاعدهٔ تصمیم یک پرسش است: آیا شکلِ این آیکون یک جهت را معنا می‌کند، یا فقط یک جهت دارد؟ پیکان «بازگشت» معنایش «به عقب، در جهت خواندن» است، پس آینه می‌شود. عقربهٔ ساعت جهت دارد ولی معنایش جهت نیست؛ ساعتِ پادساعتگرد غلط است. ذره‌بین هم همین‌طور — دستهٔ ذره‌بین در آن طرف، فقط عجیب به‌نظر می‌رسد.

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

یک نکتهٔ دیگر هم هست که به تایپوگرافی وصل می‌شود: آیکون‌های حرف‌محور در فارسی جواب نمی‌دهند. آیکون «B» برای بولد یا «I» برای ایتالیک، برای کاربر فارسی‌زبانی که با واژه‌پرداز انگلیسی کار نکرده، از دستهٔ قراردادی است — با هزینهٔ یادگیری کامل. اگر جا دارید، برچسب بگذارید.

چند آیکون، و چه کسی اجازهٔ اضافه‌کردن دارد

این بخش هم افزودهٔ مترجم است و به مسئله‌ای می‌پردازد که در هیچ راهنمای آیکونی نمی‌بینید ولی در هر تیمی پیش می‌آید: مجموعهٔ آیکون چطور از کنترل خارج می‌شود.

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

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

و یک نکتهٔ حکمرانی: مالک مجموعهٔ آیکون باید مشخص باشد، همان‌طور که در سیستم طراحی مالک توکن‌ها مشخص است. مجموعه‌ای که هر طراحی می‌تواند آزادانه به آن اضافه کند، در عمل مجموعه نیست — انباری از فایل است.

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

جمع‌بندی

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

و اگر یک جمله بماند، همین باشد: آیکونی که باید توضیح داده شود، توضیح لازم دارد — نه بازطراحی. اضافه‌کردن یک کلمه تقریباً همیشه ارزان‌تر و مؤثرتر از کشیدن نسخهٔ پنجم آن شکل است.