Image Carousels в веб-дизайне - преимущества и лучшие практики

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

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

Карусели товаров для электронной коммерции

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

Есть два основных размещения для слайдера продукта электронной коммерции:

1. На домашней странице магазина
2. На странице товара

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

Пример 1: постельное белье Au Lit Fine - домашняя страница

Взгляните на домашнюю страницу Au Lit Fine Linens, которая использует полноэкранную карусель с автоматическим вращением чтобы показать разные продукты, такие как одеяла, подушки и покрывала.

Изображения занять всю ширину домашней страницы, и они появляются значительно выше сгиба. На самом деле, этот слайдер должен быть первым, что привлечет ваше внимание при первой посадке на странице. Каждый слайд ведет на другую страницу на сайте, чтобы направлять клиентов через опыт покупок.

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

Пример 2: чехол для телефона Eden - страница продукта

Более конкретный пример вы можете увидеть на странице продукта Eden для телефона. Он использует автоматически вращающийся слайдер хвастаться изображениями продукта.

Я считаю, что это немного “перебор” в мире электронной коммерции. Глядя на продукт, я хочу быть в контроле переключения между изображениями.

Лучше сделать галерею изображений с контролем, предоставленным посетителю. Например, страница Design by Humans использует миниатюры для каждой фотографии что гораздо более обнадеживает и предоставляет больше контроля пользователю.

Веб-портфолио карусели

Онлайн-портфолио немного отличается, потому что эти слайды не всегда переходите на другую страницу. Это правда, что некоторые приведут к конкретному исследованию или напишут о проекте, но многие карусели на сайтах портфолио просто предназначены для похвастаться визуальной работой.

Пример 1: Biboun - домашняя страница

Французский художник, работающий под именем Biboun, имеет карусельный слайдер на главной странице показывая фрагменты произведений искусства. Отдельные слайды ведут на внутренние страницы в портфолио, которые охватить весь проект с несколькими фотографиями.

Это наверное лучший способ сделать слайдер на сайте портфолио. Просто показывать случайный список работ бессмысленно, если только у этих конкретных работ нет причин для демонстрации..

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

Пример 2: сайт Аарона Блейза - домашняя страница

Мне очень нравится пример, найденный на сайте Аарона Блейза, потому что он демонстрирует свою работу в качестве портфолио, но в основном использует этот сайт для продать свои художественные видео. Аарон Блейз работал в Disney в течение нескольких десятилетий, и у него есть навыки, чтобы доказать это.

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

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

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

Если вы посмотрите на некоторые из моих приведенных выше примеров, вы заметите, что обычно есть два разных типа слайдеров: полноэкранный а также фиксированная ширина.

Эти стилистические решения часто относятся к макету и сколько контента он может держать. Если макет охватывает всю ширину страницы, то имеет смысл также расширить слайдер. Но это также заставляет вас найти качественные изображения это все еще хорошо смотрится на полном экране на мониторах с большим разрешением.

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

Также обратите внимание на значение автоматически продвигающихся слайдов и как трудно это может быть для пользователей, чтобы поймать этот контент. Нильсен Норман Групп продемонстрировал, что лучше не иметь автоматически продвигающихся ползунков.

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

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

Чего следует избегать любой ценой

Вот важная вещь, которую я лично считаю падает под “избегать любой ценой”. Посмотрите или нажмите на скриншот ниже, и попытайтесь угадать, что это может быть.

На веб-сайте кафе Yozenn используется полноэкранный слайдер заголовков. Это не автоповорот, что здорово, однако слайды также не служат никакой цели, кроме украшения.

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

Я бы сказал, что эта функция скольжения в фоновом режиме не добавляет особой ценности и без того тесному сайту. Если бы на изображениях были ссылки или сопроводительный текст, они были бы как минимум более уместны.

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

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

То, как пользователи перемещаются по карусели, влияет на сам дизайн. Есть разнообразие стилей навигации, но это самые популярные:

• Точечная навигация
• Стрелка навигации
• Навигация по миниатюрам
• Список ссылок или заголовков

Наиболее распространенным является точечная навигация которые вы найдете на сотнях современных сайтов.

Пример 1: Chic at Home - домашняя страница

Chic at Home - отличный пример использования три крошечные точки под слайдером для обозначения навигации. Каждое изображение поворачивается автоматически, и соответствующая точка в серии наполняется черным. Две другие пустые точки обозначить потенциальные слайды для просмотра пользователями.

Это популярный шаблон дизайна что многие пользователи уже признают. Он попадает в ту же категорию, что и меню гамбургеров, которое не нравится многим дизайнерам, но пользователи уже признают это, и инстинктивно знаю, как его использовать.

Пример 2: Чистые циклы - домашняя страница

На домашней странице Pure Cycles используется комбинация точечной и стрелочной навигации. Таким образом, пользователи имеют навигацию вперед и назад, но также увидеть “в общем и целом” навигация через точечные ссылки внизу.

Я на самом деле считаю точечные ссылки в этом примере трудными для понимания. Сложность визуальных слайдов заключается в том, что многие элементы нелегко различить, поэтому стрелки и точки могут легко сливаться с фоном.

Пример 3: IGN - домашняя страница

На домашней странице IGN вы найдете другой карусель с автоматическим вращением который использует титульные ссылки для навигации. Это очень распространено для издателей, которые хотят продавать заголовки а не продукты. Каждая ссылка идет на отдельный слайд, который в конечном итоге ведет на страницу статьи.

Эти ссылки можно заменить на миниатюры, или даже включить эскизы из каждой истории - однако визуальный аспект показан в карусели, так что пропуск миниатюры на самом деле экономит место.

Разные сайты используют разные стили навигации по разным причинам. Учитывайте цели ваших посетителей, и дизайн для лучшего пользовательского опыта.

Ключевые вынос

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

Старайтесь избегать автоматически вращающихся каруселей и используйте их только на основных целевых страницах (домашняя страница является одним из примеров). Пока карусель имеет цель, а также не похоже на рекламу, ваш дизайн должен хорошо.

Если вам нужна дополнительная информация о веб-каруселях, ознакомьтесь с некоторыми из следующих сообщений:

• Карусели Брэда Фроста
• 8 требований UX для создания удобной домашней страницы карусели
• Удобство использования карусели: разработка эффективного пользовательского интерфейса для сайтов с перегрузкой контента