Карусели в уеб дизайна - ползи и най-добри практики

Няма недостиг на Карусел със слайдшоута в мрежата. Всъщност, тази тенденция не направи нищо друго освен расте през последните 5-10 години с повече браузърска поддръжка сега, отколкото когато и да било. Но наистина ли си струва усилията на каруселите? Какви ползи произвеждат и как да се използват продуктивно в оформлението?

Бих искал да споделя някои общи тенденции, живи примери и идеи за уеб дизайнери, които се интересуват от карусели с изображения. Тези динамични плъзгачи са силно обсъждани, но мисля, че те добавят стойност, когато са изработени в правилния контекст.

Карусели за електронна търговия

Светът на електронната търговия е пълен с въртящи се въртележки на началните страници и страниците с продукти. Целта е да поддържане на ясна информационна плътност със снимки и текст разкажете уникална, но ценна история за да продават продукти.

Има две първични разположения за плъзгача за продукт за електронна търговия:

1. На началната страница на магазина
2. На страница с продукт

И двамата работят по различен начин, но служат на същата цел - да продават продукти по визуален начин.

Пример 1: Au Lit Фини Бельо - начална страница

Обърнете внимание на началната страница на Au Lit Fine Linens, че използва автоматичен въртящ се карусел на цял екран да покаже различни продукти, като завивки, възглавници и покривки за легла.

Изображенията заемат цялата ширина на началната страница и те се появяват добре над гънките. Всъщност, този плъзгач трябва да бъде първото нещо, което да привлече вниманието ви при първото кацане на страницата. Всеки слайд води до различна страница в сайта насочвайте клиентите чрез пазаруването.

Този плъзгач може да бъде малко ужасяващ при първото кацане на страницата, но с бутон за връзка и текст с наслагване също така може да бъде много окуражаващо за посетителите, които просто искат да се гмуркат и да пазаруват.

Пример 2: Калъф за телефон Eden - страница на продукта

Можете да видите по-конкретен пример на страницата на продукта за телефон Eden. Използва се автоматичен въртящ се плъзгач за показване на изображения на продукта.

Намирам за малко “твърде много” в света на електронната търговия. Когато гледате продукт, който искам да бъда в контрола на превключването между изображения.

По-добрият избор е да се направи галерия от изображения с контрол, даден на посетителя. Например, страницата за проектиране от хора използва миниатюри за всяка снимка което е много по-окуражаващо и дава повече контрол на потребителя.

Карусели за уеб портфолио

Онлайн портфолиото на уебсайтовете е малко по-различно, защото тези слайдове не винаги кликнете върху друга страница. Вярно е, че някои ще доведат до казуси или ще напишат за един проект, но много карусели на уебсайтове на портфолиото са предназначени само за това покажете визуална работа.

Пример 1: Biboun - начална страница

Френският художник, работещ под името Бибоун, има плъзгач с въртележка на началната страница с откъси от произведения на изкуството. Отделните слайдове водят до вътрешни страници в портфейла, които покриват целия проект с няколко снимки.

Това е вероятно най-добрият начин да направите слайдер на уебсайт за портфолио. Просто представянето на случаен списък на работата е безсмислено, освен ако тези конкретни произведения нямат основание да бъдат представени.

Всички парчета са изискан в плъзгача на Biboun и това не заема много място един от двамата. Макар да знам, че някои хора мразят автоматичното въртене на слайдшоутата с добра причина, на такова минималистично оформление ми е трудно да се оплаквам от тази дизайнерска функция.

Пример 2: Уебсайт на Аарон Блейз - начална страница

Наистина харесвам примера, намерен на уебсайта на Аарон Блез, защото той представя работата си като портфолио, но предимно използва този сайт продават своите видеоклипове. Аарон Блез е работил в Дисни в продължение на няколко десетилетия и има уменията да го докаже.

Докато плъзгача за началната страница на неговия сайт се върти автоматично, не намирам за невероятно досадно или не на място. Всеки слайд има малко съдържание, съответстващо на изображението, и това помага на Аарон привлече вниманието към последните му видео уроци които учат младите художници как да усвояват специфични умения.

Голям карусел с портфолио фокусира върху визуализации, и води посетителите по-нататък в уебсайта. Ако можете да получите тези две неща, тогава аз няма да съм против подобна функция в личен уебсайт на портфолиото.

Общи тенденции в дизайна

Ако погледнете някои от горните ми примери, ще забележите, че обикновено има два различни типа плъзгачи: цял екран и фиксирана ширина.

Тези стилистични решения често са свързани с оформлението и колко съдържание може да притежава. Ако оформлението обхваща цялата ширина на страницата, тогава има смисъл да се разшири и плъзгача. Но това също ви принуждава намерете висококачествени изображения които все още изглеждат добре на цял екран на големи монитори с резолюция.

Аз лично предпочитам стила с фиксирана ширина, какъвто ще видите в двата примера на портфолиото. Това са много по-лесно за контрол, и те често са не толкова висок - улеснявайки посетителите просто ги игнорирайте ако желаят.

Също така помислете за стойността на автоматичните прозорци и колко трудно може да бъде потребителите да хващат това съдържание. Има голям пример от Nielsen Norman Group, който показва, че е по-добре да няма автоматични плъзгачи.

Аз съм на борда с този подход в смисъл, че е по-малко интензивно по памет с по-малко анимации и движения в браузъра, а повечето хора не харесват и автоматичните въртящи се въртележки - и вие трябва винаги се погрижи за аудиторията си.

Въпреки това не мога да кажа, че никога не си струва да добавяте автоматичен плъзгач, особено след като със статични плъзгачи не получавайте толкова мнения, и вие също трябва да направете първия си слайд най-важен тъй като много потребители няма да продължат към следващия слайд. За съжаление е решено дали да направите автоматично завъртане на плъзгача или не зона на пробна и грешка.

Какво да избегнем на всяка цена

Ето едно важно нещо, което аз лично мисля попада под “избягвайте на всяка цена”. Разгледайте или кликнете върху екрана по-долу и се опитайте да познаете какво може да е то.

Уебсайтът на кафене Yozenn използва плъзгача на пълен екран. Той не се върти автоматично, което е страхотно, но и слайдовете служи само за украса.

Изображенията не свързвайте никъде, и те показват малка шепа продукти. Всички можеха просто да бъдат добавен към фона на началната страница без плъзгача да спести объркване и допълнителни килобайти на JavaScript.

Бих твърдят, че тази функция на фона на плъзгането не добавя голяма стойност към вече затегнатия уебсайт. Ако изображенията имат връзки или придружаващ текст, те биха били по-подходящи.

Чувствайте се свободни да използвате изображения в заглавния си раздел, които заемат цялата страница, обаче, ако те не свързвайте никъде и не предлагайте истинска информация тогава не ги превръщайте в въртележка.

Интерактивни функции

Начинът, по който потребителите се ориентират в въртележката, засяга самия дизайн. Има a различни навигационни стилове, но те са най-популярни:

• Навигация, базирана на точки
• Навигация със стрелки
• Навигация с миниатюри
• Избройте връзки или елементи от заглавията

Най-често срещаната е точка навигация които ще намерите на стотици модерни уебсайтове.

Пример 1: Chic at Home - начална страница

Chic at Home е чудесен пример за използване три малки точки под плъзгача за навигация. Всяко изображение се завърта автоматично и съответната точка от серията се пълни с черно. Другите две празни точки означава потенциални слайдове за потребителите да разглеждат.

Това е популярен модел на дизайн които много потребители вече разпознават. Тя попада в същата категория като менюто за хамбургер, което много дизайнери не харесват, но потребителите вече го разпознават, и инстинктивно знаят как да го използват.

Пример 2: Чисти цикли - начална страница

Началната страница на Pure Cycles използва a комбинация от навигация с точка и стрелка. По този начин потребителите имат навигация напред и назад, но вижте също “цялостен” навигация чрез точките в дъното.

Всъщност намирам връзките с точки в този пример трудно да се видят. Трудността при визуалните слайдове е, че много елементи не са лесно различими, така че стрелките и точките могат лесно се слива с фона.

Пример 3: IGN - начална страница

На началната страница на IGN ще намерите друго автоматично въртящ се карусел който използва заглавия връзки за навигация. Това е много често за издателите, които искат продават заглавия вместо продукти. Всяка връзка отива към индивидуалния слайд, който в крайна сметка води до страницата със статии.

Тези връзки може да се замени с миниатюри, или дори включват миниатюри от всяка история - независимо от това визуален аспект е показан в въртележката, така пропускането на миниатюрата всъщност спестява място.

Различните уебсайтове използват различни навигационни стилове по различни причини. Помислете за целите на посетителите си, и дизайн за най-добро потребителско изживяване.

Ключови храни за вкъщи

Трябва да се стремите произвеждат истинска стойност или допълнителна информация с въртележка. Това може да е информация, която посетителят не е имал преди, или може да доведе до страници, които посетителят може да не е намерил по друг начин.

Опитайте се да избягвате автоматичното въртене на въртележките и ги използвайте само на главните целеви страници (началната страница е един пример). Докато върви на въртележката има цел, и не изглежда като реклама, Вашият дизайн трябва да се справя добре.

Ако търсите повече информация за уеб каруселите, разгледайте някои от следните публикации:

• Въртележки от Брад Фрост
• 8 UX Изисквания за проектиране на удобен за потребителя уебсайт карусел
• Използваемост на въртележката: Проектиране на ефективен интерфейс за уебсайтове с претоварване на съдържанието