Каруселі зображення у веб-дизайні - переваги та найкращі практики

Не бракує карусель з функцією слайд-шоу в Інтернеті. Насправді, ця тенденція не зробила нічого, крім ростуть протягом останніх 5-10 років з більшою підтримкою браузера, ніж будь-коли раніше. Але чи є каруселі зображень дійсно варті зусиль? Які вигоди вони виробляють, і як вони повинні бути продуктивно використані в макеті?

Я хотів би поділитися деякими загальні тенденції, живі приклади та ідеї для веб-дизайнерів, зацікавлених в каруселях. Ці динамічні повзунки в значній мірі обговорюються, але я вважаю, що вони додають цінності під час створення в правильному контексті.

Каруселі для електронної комерції

Світ електронної комерції наповнений обертовими каруселями на домашніх сторінках і сторінках продуктів. Мета полягає в тому, щоб підтримувати чітку інформаційну щільність з фотографіями та текстом розповідайте унікальну, але цінну історію допомогти продавати продукцію.

Існує два основних місця розташування для повзунка продукту електронної комерції:

1. На домашній сторінці магазину
2. На сторінці продукту

Вони обидва працюють по-різному, але служити тій самій меті - продавати продукцію візуально.

Приклад 1: Полотно Au Lit Fine - головна сторінка

Подивіться на головну сторінку Au Lit Fine Linens, що використовує повноекранний автоматичний обертовий карусель демонструвати різні продукти, такі як пухові ковдри, подушки та покривала.

Зображення зайняти повну ширину домашньої сторінки, і вони з'являються добре над згином. Насправді цей слайдер повинен бути першим, що приверне вашу увагу при першому посадці на сторінку. Кожен слайд призводить до іншої сторінки сайту направляйте клієнтів через досвід покупок.

Цей слайдер може бути трохи страшним при першому посадці на сторінці, але з кнопка посилання і накладання тексту це також може бути дуже заохочуючим для відвідувачів, які просто хочуть зануритися в магазин і купити.

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

Більш конкретний приклад можна знайти на сторінці продукту телефону Eden. Він використовує автоматичний поворот повзунка щоб показати зображення продукту.

Я вважаю, що це мало “забагато” у світі електронної комерції. Дивлячись на продукт, я хочу бути в контролі перемикання між зображеннями.

Кращий вибір - зробити галерею зображень з контролем, наданим відвідувачеві. Наприклад, сторінка "Дизайн людиною" використовується мініатюри для кожної фотографії що є набагато більш обнадійливим, і надає більше контролю користувачеві.

Каруселі веб-портфоліо

Портфоліо веб-сайту є дещо іншим, тому що ці слайди не завжди натискайте на іншу сторінку. Це правда, що деякі з них призведуть до вивчення конкретної справи або напишуть про проект, але багато каруселей на веб-сайтах портфоліо просто призначені демонструвати візуальну роботу.

Приклад 1: Biboun - головна сторінка

Французький художник, що працює під назвою Бібоун, має a повзунок каруселі на домашній сторінці з фрагментами ілюстрації. Окремі слайди ведуть до внутрішніх сторінок портфеля, які охопити весь проект з кількома фотографіями.

Це, ймовірно найкращий спосіб зробити повзунок на веб-сайті портфоліо. Просто демонстрація випадкового списку робіт безглуздо, якщо ці конкретні роботи не мають підстав для демонстрації.

Всі шматки є вишуканий в повзунку Бібоуна, і це не займає багато місця або. Хоча я знаю, що деякі люди ненавидять автоматичне обертання слайд-шоу з поважної причини, на такому мінімалістському макеті мені важко скаржитися на цю функцію дизайну.

Приклад 2: Сайт Аарона Блейза - головна сторінка

Мені дуже подобається приклад, знайдений на сайті Аарона Блейза, тому що він демонструє свою роботу як портфель, але в основному використовує цей веб-сайт продати свої художні відео. Аарон Блез працював у Disney кілька десятиліть, і він має навички, щоб довести це.

Хоча повзунок домашньої сторінки на своєму сайті автоматично обертається, я не вважаю, що це неймовірно дратує або не на місці. Кожен слайд має трохи вмісту, що відповідає зображенню, і це допомагає Аарону зверніть увагу на його останні уроки відео що навчають молодих художників, як опановувати певні навички.

Велика портретна карусель фокусується на візуальних зображеннях, і веде відвідувачів далі на веб-сайті. Якщо ви можете отримати ці дві речі, то я б не був проти такої функції в особистому веб-сайті портфеля.

Загальні тенденції дизайну

Якщо ви подивитеся на деякі з наведених вище прикладів, ви побачите, як правило, два різні типи повзунків: повноекранний і фіксована ширина.

Ці стилістичні вибори часто відносяться до макета і до того, скільки вмісту він може провести. Якщо макет охоплює повну ширину сторінки, то має сенс також розширити слайдер. Але це теж змушує вас знайти якісні зображення які все ще добре виглядають на весь екран на великих моніторах дозволу.

Я особисто віддаю перевагу фіксованій ширині, як ви побачите в двох прикладах портфоліо. Вони є набагато легше контролювати, і вони часто не такий високий - полегшуючи відвідувачів просто ігноруйте їх якщо захочуть.

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

Я на борту з таким підходом в тому сенсі, що це менш інтенсивно по пам'яті з меншою кількістю анімацій і рухів у веб-переглядачі, і більшість людей також не люблять каруселі з автоматичним обертанням - і ви повинні завжди задовольнити вашу аудиторію.

Однак я не можу сказати, що не варто додавати повзунок для автоматичного просування, тим більше що у вас є статичні повзунки не отримуйте стільки поглядів, і вам також потрібно зробіть свій перший слайд найважливішим стільки користувачів не перейде до наступного слайда. На жаль, вирішення питання про те, щоб зробити повзунок автоматичним обертанням чи ні область спроб і помилок.

Що варто уникати будь-якою ціною

Ось важлива річ, яку я особисто думаю підпадає під “уникнути будь-якою ціною”. Подивіться на наведений нижче знімок екрана та спробуйте вгадати, що він може бути.

Сайт кафе Yozenn використовує повну версію повзунка. Це не автоматично обертатися, що є великим, але слайди також не служать іншої мети, ніж прикраса.

Зображення не зв'язувати ніде, і вони показують невелику жменю продуктів. Вони могли б просто бути додано до фону домашньої сторінки без повзунка для збереження плутанини і додаткових кілобайт JavaScript.

Я б стверджував, що ця функція ковзання фону не додає великого значення вже тісному сайту. Якщо зображення мають посилання або супровідний текст, вони, принаймні, будуть більш релевантними.

Не соромтеся використовувати зображення в розділі заголовків, які займають повну сторінку, однак, якщо вони не пов’язуйте ніде і не пропонуйте справжню інформацію тоді не перетворюйте їх на карусель.

Інтерактивні функції

Те, як користувачі орієнтуються в каруселі, впливає на сам дизайн. Є a різноманітність стилів навігації, але вони найпопулярніші:

• Навігація на основі точок
• Навігація зі стрілками
• Навігація мініатюрами
• Наведіть список посилань або заголовків

Найбільш поширеним є точка навігації які ви знайдете на сотнях сучасних веб-сайтів.

Приклад 1: Chic at Home - головна сторінка

Шик вдома - чудовий приклад використання три крихітні точки під повзунком для позначення навігації. Кожне зображення обертається автоматично, а відповідна точка в серії заповнюється чорним. Два інших порожніх точок позначити потенційні слайди для перегляду користувачами.

Це популярний шаблон дизайну які багато користувачів вже визнають. Він потрапляє в ту ж категорію, що і гамбургерне ​​меню, яке багато дизайнерів не люблять, але користувачі вже розпізнають його, і інстинктивно знати, як його використовувати.

Приклад 2: Чистий цикл - головна сторінка

Домашня сторінка Pure Cycles використовує a комбінація навігації точками та стрілками. Таким чином користувачі мають навігацію вперед і назад, але також див “загалом” навігація через точкові посилання внизу.

Я дійсно знаходжу точні посилання в цьому прикладі, щоб їх було важко побачити. Складність з візуальними слайдами полягає в тому, що багато елементів не легко розрізнити, тому стрілки і крапки можуть легко зливаються на задній план.

Приклад 3: IGN - домашня сторінка

На головній сторінці IGN ви знайдете іншу автоматичне обертання каруселі що використовує посилання на назву для навігації. Це дуже поширене для видавців, які цього хочуть продавати заголовки а не продукти. Кожне посилання переходить до окремого слайда, що зрештою призводить до сторінки статті.

Ці посилання можна замінити на ескізи, або навіть включати мініатюри з кожної історії - однак візуальний аспект показаний на каруселі, таким чином, пропущення мініатюри фактично заощаджує простір.

Різні веб-сайти використовують різні стилі навігації з різних причин. Розгляньте цілі ваших відвідувачів, та дизайн для кращого користування.

Ключові винесення

Ви повинні прагнути виробляти справжню цінність або додаткову інформацію з каруселлю. Це може бути інформація, яку відвідувач не мав раніше, або це може призвести до сторінок, які відвідувач не знайшов інакше.

Намагайтеся уникати автоматичного обертання каруселей і використовувати їх лише на основних цільових сторінках (наприклад, головна сторінка). Поки карусель має мету, і не виглядає як оголошення, Ваш дизайн повинен добре працювати.

Якщо ви шукаєте більше інформації про веб-каруселі, ознайомтеся з деякими з наступних повідомлень:

• Каруселі Бред Фрост
• 8 Вимоги UX для розробки зручної домашньої каруселі
• Використання каруселі: розробка ефективного інтерфейсу для веб-сайтів із перевантаженням вмісту