آکاردئون Accordion

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

آکاردئون ها روشی موثر برای ارائه حجم زیادی از محتوا به صورت فشرده و سازماندهی شده، بدون استفاده از کاربران زیاد هستند. آکاردئون ها اغلب برای سؤالات متداول، مشخصات محصول یا محتوایی استفاده می شوند که در ابتدا بهتر است به صورت پنهان (بسته) باشند اما در صورت نیاز می توان به راحتی به آنها دسترسی داشت.

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

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

آکاردئون و تَب (Tab) هر دو الگوهای طراحی رابط کاربری هستند که محتوا و اطلاعات را سازماندهی می کنند. با این حال، تفاوت هایی بین این دو وجود دارد.

آکاردئون‌ها معمولاً به‌صورت عمودی روی هم چیده می‌شوند و بهترین استفاده را برای سازمان‌دهی مقادیر زیادی از محتوای مرتبط در بخش‌های کوچک‌تر، مانند سؤالات متداول، دارند. با این حال، آکاردئون ها می توانند پیمایش بیش از حد در صفحه ایجاد کنند و هنگامی که کاربران بین بخش ها کلیک می کنند، چیدمان تغییر می کند.
تب‌ها معمولاً به صورت افقی تراز می شوند و بهترین استفاده را برای ارائه تعداد کمی از بخش های محتوا (حداکثر 5) به روشی واضح و سازمان یافته دارند. آنها برای پیمایش بین بخش‌های نامرتبط مانند ویژگی‌های محصول یا دسته‌ها مفید هستند. در موبایل‌ها، استفاده از تب مناسب تر از اکاردئون است.