انتخاب آیکونهای داشبورد بر اساس کلمات کلیدی را متوقف کنید
بیشتر مشکلات داشبورد ناشی از آیکونهای بد نیستند.
آنها ناشی از آیکونهای خوب هستند که با معنای اشتباهی به کار رفتهاند.
اگر عبارت "users" را جستجو کنید و یک SVG تمیز انتخاب کنید، ممکن است بعداً با مشکل مواجه شوید. شما به آیکونهای متفاوتی برای مشتریان، اعضای تیم، مالکان حساب و مدیران نیاز خواهید داشت. بهزودی، یک آیکون "user" باید معانی بسیار زیادی را منتقل کند. این موضوع باعث میشود داشبورد SaaS شما شلوغ و آشفته به نظر برسد.
انتخاب آیکون بر اساس کلمه کلیدی را متوقف کنید. انتخاب آنها را بر اساس نقش (role) شروع کنید.
یک کلمه کلیدی به شما میگوید که یک آیکون به چه چیزی مربوط است. یک نقش به شما میگوید که یک آیکون چه کاری انجام میدهد.
آیکونهای خود را در این پنج دسته طبقهبندی کنید:
- آیکونهای ناوبری (Navigation icons): اینها نشاندهنده مقاصدی مانند Dashboard، Billing یا Settings هستند. آنها باید ساده و ثابت باشند.
- آیکونهای وضعیت (Status icons): اینها به سوالاتی مانند «آیا این فعال است؟» یا «آیا این با شکست مواجه شده؟» پاسخ میدهند. از نمادهای مستقیم مانند تیک، هشدار یا قفل استفاده کنید.
- آیکونهای عملیاتی (Action icons): اینها نشاندهنده عملیاتی مانند edit، delete یا export هستند. اگر عملیات پیچیده است، از بهکارگیری آنها بدون برچسب (label) خودداری کنید.
- آیکونهای اشیاء (Object icons): اینها موجودیتهایی مانند یک پروژه، یک فاکتور یا یک پوشه را شناسایی میکنند.
- آیکونهای حالت خالی (Empty state icons): اینها زمانی ظاهر میشوند که دادهای وجود ندارد. این آیکونها میتوانند شخصیت و جذابیت بیشتری داشته باشند.
فقط به دنبال زیباترین SVG نباشید. به دنبال یک واژگان بصری باشید.
قبل از نهایی کردن یک آیکون، این سه تست را انجام دهید:
- تست اندازه: آیا آیکون در اندازه 16px داخل یک جدول متراکم همچنان کارایی دارد؟ بسیاری از آیکونها در اندازه 32px عالی به نظر میرسند، اما وقتی کوچک میشوند، کارایی خود را از دست میدهند.
- تست زمینه (Context): آیکون را در کنار برچسب و همسایگانش قرار دهید. آیا ممکن است با آیکون مجاور اشتباه گرفته شود؟
- تست معنا: آیا آیکون از برچسب پشتیبانی میکند، یا برچسب باید آیکون را توضیح دهد؟
اگر نمیتوانید آیکون متمایزی برای یک ویژگی پیدا کنید، ممکن است نام آن ویژگی بیش از حد مبهم باشد. آیکونها معنا را تقویت میکنند، نه اینکه زبان نامشخص را اصلاح کنند.
به جای جستجوی "user icon"، عبارتهایی مانند "internal collaborator icon" یا "customer account icon" را جستجو کنید. دقت در جستجو، منجر به دقت در UI شما میشود.
منبع: https://dev.to/svgicons/stop-picking-dashboard-icons-by-keyword-ij2