Как большие фоновые изображения влияют на поведение пользователей сайта

Анализ поведения пользователей (user experience) в последнее время приобрел большое значение. Современный веб сайт должен быть функциональным, удобным и эффективным. Кроме этих важных факторов, веб сайт должен быть еще привлекательным и стильным. Чтобы выделиться среди множества конкурентов ваш веб сайт обязан произвести на пользователей очень хорошее впечатление. Вы должны быть уверены, что вашим пользователям понравился ваш веб сайт и они не остались равнодушны.

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

Веб дизайн — как полноэкранные фоновые изображения влияют на поведение пользователей

Маркетинговая история

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

Square — возможность принимать оплату кредитными картами где угодно!

Вы можете обыграть данный прием по-разному.  Но, несомненно, полноэкранные или просто большие фоновые изображения могут решить эту задачу наилучшим образом. Рассмотрим конкретный пример: Square. Этот ресурс с помощью интерактивного слайд-шоу, использующего большие фоновые изображения, рассказывает пользователю о способе принимать к оплате кредитые карты независимо от места расположения. Даже несмотря на то, что фоновое изображение размыто, оно все-равно образует позитивную ауру вокруг рекламируемого продукта. Это добавляет динамики. И это не только красиво выглядит, но и представляет продукт в действии.

Пояснения

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

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

Большое фоновое изображение в данном случае помогает пользователю быстрее понять что именно вы предлагаете, понять вашу основную идею. Рассмотрим веб сайт PayPal. На фоновом изображении мы видим образ умиротворения, спокойствия. Повседневные аксессуары вроде чашек для кофе, телефон, солонка, перечница. Всё это сопровождается слоганом: "Банкомат гораздо удобней, когда он у тебя с собой". Это дает понять, что сервис предоставляет услуги банкинга (работы со счетами и пластиковыми картами) столь же удобен и привычен, как и то, что повседневно нас окружает.

Вовлечение

Вовлечение очень важно для любого веб сайта. Если на вашем веб сайте не будет вовлечения, то посетители будут уходить раньше чем что-либо успеют сделать или приобрести (на что вы рассчитываете). Для того, чтобы использовать вовлечение, вы должны привлечь внимание пользователей с самого первого момента, как только они пришли. Как только вы сумели привлечь внимание, вы можете делать с этим уже то, что вам нужно. Например, перенаправить их внимание на что-то другое, войти с вами в контакт, попытаться предложить что-то купить или любые другие действия.

Kosmetik Fusspflege Gunia — расслабление с головы до ног

Большие фоновые изображения помогут вам привлечь и сфокусировать внимание ваших посетителей.

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

Мотивация

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

Airbnb — отпускное жилье, частные комнаты, посуточна субаренда

Полноэкранные фоновые изображения помогут вам правильно мотивировать посетителей.

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

Персонализация

Персонализация начинает играть всё более важную роль в интернете. Люди хотят быть индивидуальными и иметь свой собственный неповторимый стиль. Одновременно с этим, индивидуальные вещи вызывают привыкание. Индивидуальная одежда, поведение, гаджеты, музыкальные предпочтения и т.д. — определяют нашу индивидуальность. А веб-сайты помогают людям донести до сообщества свою индивидуальность, поделиться ею, рассказать о себе. Эта привязанность может сыграть на руку вашему бренду или проекту.

Персонифицированный поиск от Google

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

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

Как это работает?

Выше, мы на конкретных примерах увидели, как используются полноэкранные (или просто большие) фоновые изображения на веб сайтах. Они могут быть использованы для описания вашего продукта, привлечения внимания, мотивации или персонификации. Но как это работает? Чтобы получить такой же эффект, как на вышеприведенных сайтах, вы должны:

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

Удачи!

Вольный перевод статьи: "How Full Page Background Images Affect The User Experience"

Поделитесь с друзьями:



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>