بهترین آیکون برای آکاردئون؛ چرا Caret انتخاب مطمئن‌تری است

بهترین آیکون برای آکاردئون؛ چرا Caret انتخاب مطمئن‌تری است

آنچه در این مقاله مطالعه می‌کنید:

۴ آبان ۱۴۰۵

۴ آبان ۱۴۰۵

انتخاب آیکون برای باز و بسته‌کردن آکاردئون، بیش از آنچه به نظر می‌رسد بر درک کاربران از عملکرد رابط اثر دارد. به گزارش Smashing Magazine، بررسی یافته‌های پژوهش NN/g نشان می‌دهد آیکون Caret یا مثلث جهت‌دار، مطمئن‌ترین نشانه برای این تعامل است و منوهای دوکاره می‌توانند کاربران را سردرگم کنند.

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

مشکل منوهای دوکاره و نشانه‌های چندمعنا

یکی از الگوهای مسئله‌ساز، منوی دوکاره یا Split Menu است؛ حالتی که کلیک روی برچسب متنی کاربر را به صفحه‌ای دیگر می‌برد، اما کلیک روی آیکون همان ردیف آکاردئون را باز می‌کند. این تفاوت عملکرد در یک ناحیه واحد، احتمال خطا را بالا می‌برد. راهکار قابل‌اعتمادتر این است که کل ردیفِ دسته‌بندی فقط منو را باز کند و لینک مستقیم صفحه درون گزینه‌های بازشده قرار گیرد.

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

الگوی پیشنهادی برای طراحان رابط

پیشنهاد نهایی، استفاده پیش‌فرض از Caret رو به پایین و تغییر جهت آن پس از بازشدن بخش است؛ Caret رو به بالا یا کنار می‌تواند وضعیت جدید را نشان دهد. اگر جایگزین لازم باشد، ترکیب مثبت و منفی نیز معمولاً قابل استفاده است.

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

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