Carousel | کاروسل
کاروسل یک کامپوننت رابط است که مجموعه‌ای از آیتم‌های محتوا را درون یک ناحیهٔ نمایش ثابت جابه‌جا می‌کند. کاربر با پیکان، سوایپ، یا نقاط ناوبری بین آیتم‌ها حرکت می‌کند، یا زمان‌سنج به‌صورت خودکار اسلاید را عوض می‌کند. در هر لحظه معمولاً یک آیتم—تصویر، کارت یا اسلاید—ناحیه را پر می‌کند و بقیه پنهان یا نیمه‌پیدا هستند. این مقاله روی آناتومی و تعامل همان یک کامپوننت تمرکز می‌کند؛ الگوی چندنمونه، ضدالگوهای قهرمان شلوغ، و تصمیم‌های سطح صفحه در جای دیگر بررسی می‌شوند.
آناتومی یک اسلات چرخشی
اجزای اصلی عبارتند از محفظهٔ ثابت ارتفاع یا نسبت تصویر، لایهٔ اسلاید فعال، کنترل قبلی/بعدی، نشانگر موقعیت، و در صورت نیاز کنترل توقف پخش خودکار. هر اسلاید باید به‌تنهایی معنا داشته باشد؛ وابستگی فهم اسلاید دوم به دیدن اسلاید اول هم برای کسی که وسط چرخه می‌آید و هم برای دسترس‌پذیری مشکل می‌سازد. محتوای همگن مثل زوایای یک محصول با ناوبری ترتیبی سازگارتر است تا پیام‌های ناهمگون بازاریابی که هرکدام هدف جدا دارند.
جذابیت کاروسل برای ذی‌نفعان این است که چند پیام در یک موقعیت ممتاز جا می‌گیرند. از دید تعامل، هزینهٔ این فشرده‌سازی پنهان کردن محتوا پشت حرکت است. طراحی مسئولانه ابتدا می‌پرسد آیا اسلات چرخشی برای نوع محتوا لازم است، بعد آناتومی را دقیق می‌چیند. بدون این ترتیب، جزئیات پیکان و نقطه فقط یک الگوی ضعیف را براق می‌کنند.
کنترل‌ها، نشانگر و نشانهٔ ادامه
کنترل‌های ناوبری باید دیده شوند، هدف لمسی کافی داشته باشند و منطقی گروه‌بندی شوند. قرار دادن پیکان‌ها نزدیک هم بالا یا پایین محفظه، جابه‌جایی اشاره‌گر را کمتر از گذاشتن آن‌ها در دو لبهٔ مخالف می‌کند. نشانگر پیشرفت اگر به‌جای نقاط بی‌معنا از برچسب یا بندانگشتی استفاده کند، کاربر می‌فهمد چه چیزی در راه است نه فقط چند آیتم بی‌نام باقی مانده. روی موبایل، ردیف افقی با لبهٔ بریده‌شدهٔ آیتم بعدی اغلب بهترین affordance است: بدون پیکان هم می‌گوید ادامه دارد.
اگر ردیف دقیقاً عرض صفحه را پر کند و همسایه پیدا نباشد، بسیاری از کاربران هرگز سوایپ نمی‌کنند. نیمه‌پیدا بودن همسایه سیگنال ارزان و قوی است. در دسکتاپ، هاور و فوکوس باید حالت کنترل‌ها را روشن کند بدون اینکه کل اسلاید را بپوشاند. اندازه و کنتراست کنترل‌ها بخشی از آناتومی است نه تزئین اختیاری.
پخش خودکار، مکث و قرارداد زمانی
اگر پخش خودکار استفاده شود، فاصلهٔ ۵ تا ۷ ثانیه برای هر اسلاید رایج است، باید با هاور یا فوکوس داخل کاروسل متوقف شود، و کنترل واضح مکث/توقف داشته باشد. راهنمای دسترس‌پذیری می‌گوید محتوای متحرک بیش از پنج ثانیه باید توسط کاربر قابل مکث، توقف یا پنهان‌سازی باشد. پخش خودکاری که تمرکز صفحه‌کلید را ناگهانی جابه‌جا کند گمراه‌کننده است؛ اگر فوکوس داخل کاروسل است، پیشروی خودکار نباید فوکوس را بدزدد.
پخش خودکار برای گالری محصول که کاربر خودش در حال بررسی است اغلب مزاحم است؛ برای ویترین تبلیغاتی هم ممکن است قبل از خواندن متن اسلاید را عوض کند. تصمیم روشن دربارهٔ روشن یا خاموش بودن زمان‌سنج باید از نوع محتوا بیاید، نه از عادت پیش‌فرض کتابخانهٔ UI. خاموش بودن پیش‌فرض معمولاً امن‌تر است مگر دلیل قوی وجود داشته باشد.
کیبورد، نام‌گذاری و ARIA
کاروسل از الگوهای چالش‌برانگیز دسترس‌پذیری است. پشتیبانی کامل صفحه‌کلید یعنی رسیدن به ناحیه، حرکت بین اسلایدها با کلیدها، و فعال‌سازی کنترل‌ها با Enter یا Space. برای خوانندهٔ صفحه، هر اسلاید برچسب معنادار می‌خواهد؛ محفظه باید به‌عنوان منطقه با نام توصیفی علامت بخورد؛ و موقعیت فعلی نسبت به کل اعلام شود تا کاربر مجبور به شمارش دستی نباشد. دکمه‌های پیکان باید نام دسترسی مثل «اسلاید بعدی» داشته باشند نه فقط آیکون خاموش.
نشانگرهای نقطه‌ای هم باید تعداد کل و موقعیت را به فناوری کمکی برسانند. اگر بالای کاروسل عنوانی مثل «محصولات ویژه» هست، نام منطقه می‌تواند به همان عنوان ارجاع دهد. بدون این لایه، کامپوننت برای بخشی از کاربران عملاً غیرقابل استفاده یا بسیار پرهزینه می‌شود حتی اگر از نظر بصری «کامل» به‌نظر برسد.
عملکرد، بارگذاری و وزن اولیه
اگر همهٔ اسلایدها در بارگذاری اول پیش‌بارگذاری شوند، وزن صفحه بالا می‌رود و زمان تا محتوای اولیه آسیب می‌بیند؛ روی شبکهٔ موبایل این جریمه محسوس است. بارگذاری تنبل تصاویر اسلایدهای بعدی کاهش استاندارد این هزینه است. پخش خودکار به تایمر، شنونده و مدیریت حالت نیاز دارد و هزینهٔ اجرایی اضافه می‌کند. همین هزینه‌ها یکی از دلایل عملی ترجیح جایگزین ساده‌تر وقتی محتوا واقعاً به چرخش نیاز ندارد هستند؛ اما وقتی کاروسل انتخاب درستی است، آناتومی باید سبک و تنبل‌بار باشد.
اندازه‌گذاری تصویر متناسب با عرض نمایش، پرهیز از ویدئوی سنگین بدون نیاز، و محدود کردن تعداد اسلاید در یک اسلات قهرمان به محدودهٔ کوچک، هم به فهم کمک می‌کند هم به عملکرد. برای گالری محصول که کاربر عمداً زوایا را ورق می‌زند، تعداد بالاتر قابل قبول‌تر است چون قصد اکتشافی است و محتوا همگن.
مرز مسئولیت این کامپوننت
آناتومی سالم کاروسل یعنی اسلایدهای مستقل، کنترل واضح، نشانگر فهمیدنی، پخش خودکار اختیاری و قابل توقف، پشتیبانی صفحه‌کلید و نام‌گذاری درست، و بارگذاری مسئولانه. آناتومی ناسالم یعنی نقاط ریز بدون معنا، پیکان‌های پنهان، چرخش سریع بدون مکث، اسلایدهای وابسته به هم، و تصاویر سنگین همزمان. تفکیک این سطح کامپوننت از بحث‌های چندکاروسل در صفحه کمک می‌کند تیم ابتدا یک واحد درست بسازد، بعد دربارهٔ تعداد و جایگاه در صفحه تصمیم بگیرد.
کاروسل در بهترین حالت ابزار مرور ترتیبی محتوای هم‌خانواده داخل یک قاب است. وقتی آناتومی و تعامل با دقت چیده شوند، کاربر می‌داند کجاست، چطور حرکت کند، و چطور حرکت را متوقف کند؛ و محصول بدون قربانی کردن شمول و عملکرد، از الگوی آشنا بهره می‌برد.
حالت‌ها، انتقال و بازخورد لمسی بصری
آناتومی کامل فقط اسلاید و پیکان نیست؛ حالت‌های غیرفعال، هاور، فوکوس، فشار و غیرفعال بودن کنترل در ابتدا یا انتهای فهرست هم باید تعریف شوند. اگر کاروسل حلقه‌ای نیست، غیرفعال‌کردن پیکان قبلی در اولین آیتم جلوی کلیک بی‌نتیجه را می‌گیرد. اگر حلقه‌ای است، باید برای فناوری کمکی روشن باشد که به ابتدا برگشته‌اند. مدت و نوع انتقال—لغزش، محو، یا هیچ—باید کوتاه و قابل پیش‌بینی باشد تا محتوای در حال خواندن نپرد.
کاهش حرکت برای کاربرانی که تنظیم سیستم را روی حرکت کمتر دارند بخشی از احترام به ترجیح حسی است. در لمس، مقاومت بیش از حد در برابر سوایپ یا تداخل با اسکرول عمودی صفحه از خطاهای رایج پیاده‌سازی است؛ آستانهٔ افقی باید از اسکرول عمودی تمایز داده شود تا صفحه قفل نشود. بازخورد لحظه‌ای موقعیت، مثلاً به‌روزرسانی نشانگر همزمان با درگ، حس کنترل می‌دهد.
در گالری محصول، همگام‌سازی بندانگشتی با اسلاید اصلی بخشی از همان آناتومی است: کلیک بندانگشتی اسلاید را عوض می‌کند و اسلاید فعال در نوار بندانگشتی برجسته می‌شود. بزرگ‌نمایی جداگانه نباید با سوایپ تغییر اسلاید قاطی شود؛ قرارداد اشاره را روشن نگه دارید. در ردیف کارت‌های افقی، ارتفاع ثابت کارت‌ها و تراز متن جلوی پرش چیدمان هنگام حرکت را می‌گیرد و حس یک کامپوننت واحد را حفظ می‌کند.
مستند کامپوننت در دیزاین‌سیستم باید این قراردادها را قفل کند: رفتار صفحه‌کلید، نام‌های دسترسی، قواعد پخش خودکار، حداقل اندازهٔ هدف لمسی، و سیاست بارگذاری تصویر. بدون این قرارداد، هر تیم فرعی کاروسلی با آناتومی متفاوت می‌سازد و هزینهٔ دسترس‌پذیری و نگهداری بالا می‌رود. یک واحد درست‌تعریف‌شده پایهٔ تصمیم‌های بعدی دربارهٔ تعداد نمونه در صفحه است.
سوالات متداول
محفظهٔ نمایش، اسلاید فعال، کنترل قبلی/بعدی، نشانگر موقعیت، و در صورت نیاز کنترل مکث پخش خودکار به‌همراه نام‌گذاری دسترس‌پذیر.
فاصلهٔ کافی بین اسلایدها، توقف هنگام هاور یا فوکوس، کنترل واضح مکث/توقف، و عدم جابه‌جایی ناگهانی فوکوس صفحه‌کلید.
چون کاربر ممکن است وسط چرخه وارد شود یا همهٔ اسلایدها را نبیند؛ وابستگی به اسلاید قبلی فهم و دسترس‌پذیری را خراب می‌کند.
نیمه‌پیدا بودن آیتم بعدی در ردیف افقی؛ اگر عرض کاملاً پر شود بسیاری از کاربران سوایپ را کشف نمی‌کنند.
پیش‌بارگذاری همهٔ اسلایدها وزن اولیه را بالا می‌برد. بارگذاری تنبل اسلایدهای بعدی و اجتناب از رسانهٔ سنگین غیرضروری این هزینه را کم می‌کند.