При рассмотрении отдельных элементов веб-сайта, которые также положительно сказываются на опыте пользователей, логотип является маркетинговым и заслуживает отдельного рассмотрения. В этой статье я хотел бы поделиться с вами несколькими советами из нашей практики агентства о том, как обеспечить высокий уровень опыта пользователей для вашего веб-сайта при работе с вашим веб-логотипом.
Логотип веб-сайта заменяет пункт меню на стартовой странице
Логотип часто размещается в навигационной панели, и он ВСЕГДА должен быть связан со стартовой страницей. Пользователи сегодня также ожидают, что нажатие на логотип приведет обратно на стартовую страницу. Логотип таким образом заменяет также ссылку "Home" в меню, которая иногда до сих пор видна на веб-сайтах для перехода на стартовую страницу. Ссылка на домашнюю страницу как отдельный пункт меню в навигации не нужна. Это также экономит ценное место.
Город Варен (Мюритц) в Северной Германии, где находится наша компания, решил помочь пользователю с помощью иконки дома в качестве способа возврата на стартовую страницу. Вероятно, здесь она была использована по двум причинам: во-первых, помимо логотипа был размещен еще один логотип, что могло бы снизить желание кликнуть на логотип. Во-вторых, возможно, предполагается, что пользователи этого веб-сайта менее знакомы с интернетом. Честно говоря, эта иконка дома улучшает опыт пользователя лишь отчасти, поскольку на этом веб-сайте есть много заметных недостатков в информационной архитектуре, пользовательском интерфейсе и также доступности (особенно контрасты для чтения ссылок и текстов). Веб-сайт города Варен (Мюритц) остается тем самым негативным примером.
Responsive Logo: Адаптация логотипа к разрешению устройства
Во взглядах на рабочем столе доступно много места, и поэтому название компании или слоган в логотипе может быть включено, в мобильном виде из-за ограниченности места и внимания логотип должен быть размещен в уменьшенной форме.
Как и в случае с веб-сайтами, уже много лет наблюдается тенденция к приспособлению логотипов к размеру, среде и контексту. Здесь также говорится о адаптивном логотипе, что означает, что логотип учитывает обстоятельства окружающей среды и идеально представляет себя даже на меньших средствах, что, возможно, потребует представления его в некоторых случаях по-другому. В отличие от жестких логотипов, которые выглядят одинаково на всех устройствах и экранах, адаптивные логотипы соответствуют требованиям и обеспечивают согласованный и оптимизированный пользовательский опыт на различных устройствах. При этом логотип уменьшается только в своей форме, но не в своем брендовом послании.
Положительным примером здесь служит швейцарская компания Victorinox. Первым пользователь увидит большую иконку. Единственный минус: логотип вставлен в виде файла PNG вместо SVG.
Во время прокрутки отображается только элемент изображения. На заднем плане видна гора, подчеркивающая швейцарское происхождение. Таким образом, в первой зоне просмотра важно формирование бренда. Пользователь должен понять. Вы находитесь здесь в Victorinox в точности. Если пользователь прокрутит вниз, содержание становится важным. Логотип уменьшается в отображении, отдавая больше места основному контенту. Навигация остается закрепленной сверху, что также имеет смысл с точки зрения удобства использования.
Другой подход преследует веб-сайт компании Guinness: логотип размещен с названием компании. При прокрутке логотип становится немного меньше, но навигация остается видимой. Как только пользователь начинает прокручивать вверх, логотип и навигация снова увеличиваются, поскольку ожидается, что пользователь захочет посетить другие страницы.
Не слишком удачно настроен веб-сайт Commerzbank. Логотип размещен с названием компании и в виде SVG, что сделано хорошо. Однако он сильно конкурирует с соседними пунктами навигации. При прокрутке навигация полностью исчезает и пользователю приходится снова прокручивать вверх, чтобы увидеть навигацию. Было бы лучше, если бы навигация появлялась сразу при начале прокрутки вверх, как это сделано, например, на zeit.de.
Очень хорошо решена с точки зрения оптимизации конверсий Commerzbank с большим изображением и направлением взгляда двух человек. Они смотрят в сторону кнопки, что автоматически направляет взгляд посетителя на кнопку. Такие направления взглядов на вызов к действию очень эффективны. Хорошая работа, Commerzbank!
Интересно, когда мы рассматриваем примеры в мобильной версии.
В мобильной версии логотип Victorinox отображается еще меньше и центрируется, чтобы лучше структурировать возможности взаимодействия для пользователя. Guiness поместил текст справа от логотипа вместо того, чтобы разместить его снизу. Таким образом, у арфы больше места, и верхняя строка навигации не становится слишком большой. Commerzbank просто скрывает текст в разрешении смартфона.
Роль адаптивных логотипов в пользовательском опыте важна, так как они помогают сохранить визуальную консистентность и брендовую идентичность независимо от того, как пользователи получают доступ к сайту.
Если логотип не реагирует на изменяющиеся разрешения, он может слишком сильно привлечь внимание пользователя. В следующем примере Hypovereinsbank очень яркий логотип сильно конкурирует с призывом к действию, размещенным справа, особенно в мобильном виде. Точки навигации в среднем сером легко упускаются в виде просмотра на рабочем столе. В общем, на этом сайте также есть еще несколько ошибок в пользовательском опыте.
Чтобы обеспечить адаптивность логотипов, дизайнеры должны предоставлять несколько адаптаций логотипа. Логотип также должен хорошо работать на различных фонах и в различных размерах. Чем меньше разрешение, тем меньше деталей в логотипе. Однако он не должен потерять основной брендовый элемент. Вот где заключается искусство использования адаптивных логотипов. Поэтому при заказе ребрендинга бренда помни о этом требовании при использовании будущего логотипа.
Формат файла логотипа сайта
Использование адаптивных логотипов имеет смысл, потому что в зависимости от разрешения загружается правильный размер. Для меньших разрешений, например, на смартфоне загружается только меньшая графика. Это экономит время загрузки. Однако наибольший эффект на время загрузки вы получите, если:
- вставите логотип в правильном разрешении (также с указанием высоты и ширины). Часто логотипы вставляются с излишним разрешением, а затем уменьшаются для просмотра.
- вставите логотип в формате вектора SVG вместо PNG или JPG.
Использование логотипа сайта в качестве фавикона
Используйте уменьшенную версию своего логотипа для использования в качестве фавикона. При этом откажитесь от текста или других мелких элементов, которые нельзя распознать в малом разрешении фавикона.
Хотя сайт Guiness из приведенного примера хорошо использует адаптивный логотип для сайта по изображению, это не оптимально в качестве фавикона. Маленький белый текст Guiness не различим и уменьшает в целом впечатление фавикона. Контраст низкий. Впечатление было бы более ясным без текста и чисто уменьшено до арфы логотипа. Все другие примеры из этой статьи справились с этим лучше, чем Guiness.
Если вы ищете агентство, которое делает ставку на адаптивные логотипы, не стесняйтесь связаться с нами. Мы, в компании 4eck Media, являемся профессионалами в области пользовательского опыта.
Если вам важно профессиональное позиционирование, вам могут быть интересны следующие наборы иконок и шаблоны фирменного стиля:
Высокий уровень пользовательского опыта логотипа на веб-сайте благодаря отзывчивому поведению.
