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

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

Недавнее исследование, проведенное в Университет штата Калифорния в Сан-Хосе, немного прояснило то, какой лейаут является наиболее быстрым для навигации.

Навигационные лейауты можно разделить на:

• верхний-верхний-верхний,
• верхний-левый-левый,
• верхний-верхний-левый,
• верхний-левый-верхний,
• левый-левый-левый,
• левый-верхний-верхний,
• левый-левый-верхний,
• левый-верхний-левый.

Обозначения уровней упорядочены по приоритету и иерархии (то есть, [1] – первичный, [2] – вторичный и [3] – третичный ). Критерии оценки скорости включают в себя:

• время навигации,
• нерешительность пользователя,
• перемещение курсора,
• ошибки выбора,
• предпочтения пользователя.

Время навигации

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

Нерешительность пользователя

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

Движение курсора

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

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

Читайте также:  Искусство убеждения: как отговорить клиента от безумных идей и не испортить рабочие отношения

Ошибки выбора

Количество лишних кликов представляет ошибку выбора. Когда первичный уровень находился в левой плоскости, произошло наименьшее количество ошибок выбора. Левый первичный вариант размещения уменьшил ошибки выбора на 80% по сравнению с верхним первичным.

Значительное количество ошибок выбора произошло, когда первичный и вторичный уровни были на верхней плоскости. Верхний-верхний-верхний и верхний-верхний-левый показали худшее результаты. Меньше ошибок выбора произошло, когда вторичный и третичный уровни находились на отдельной плоскости от первичного. Левый-верхний-левый и левый-левый-левый показали лучшие результаты.

Предпочтения пользователя

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

Лучшие расположения по всем критериям vs худшие

Каждому лейауту была дана итоговая оценка на основе их производительности. Лейауты оценивались с учетом вышеперечисленных критериев. Лучшей навигационной схемой признано расположение левый-верхний-верхний, а также левый-левый-левый. Двумя худшими лейаутами оказались верхний-верхний-левый и верхний-левый-верхний. Из двух лучших, левый-верхний-верхний был быстрее, чем левый-левый-левый примерно на 17 секунд.

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

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

Читайте также:  Дефицит в пользовательском опыте: психологическое предубеждение, которое стало нормой

Рекомендации от автора

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

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

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

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

Левый-верхний-верхний лейаут упрощает сканирование основных категорий. Он отличает вторичные и третичные категории от первичных и размещает их на разных вертикальных уровнях. Потому что при горизонтальном сканировании больше шансов перепутать вторичные и третичные элементы.

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

Читайте также:  Что и кого смотреть, чтобы стать крутым веб-дизайнером

Выводы

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

1: Главное меню должно быть слева, а не сверху. (~ 17 секунд сохранено)

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

2: Первичное меню должно быть на другой плоскости, чем вторичное и третичное меню. (~ 23 секунды сохранено)

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

3: Вторичные и третичные меню должны быть в одной плоскости. (~ 9 секунд сохранено)

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

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

Превью: Joseph Barrientos

По материалам: say-hi.me

Для отбора действительно лучших инструментов, использовались следующие критерии: время существования на рынке, количество функций, инновационные/уникальные функции и цена. Конечно, существует более 6 инструментов удаленного использования, но эти – наиболее прогрессивные и простые в использовании.

Для вашего удобства инструменты разделены на две категории: 1) инструменты юзабилити для веб-сайтов/приложений и 2) инструменты юзабилити для прототипов/дизайнов.

Итак, начнем!

Инструменты удаленного тестирования юзабилити для сайтов и приложений

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

Hotjar

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

Стоимость: У Hotjar есть бесплатная версия для старта, а их «плюс план» стоит $32 в месяц.

CrazyEgg

Crazyegg очень похож на Hotjar и также очень популярен среди профессионалов. Он предлагает высококачественные тепловые карты кликов и записи сессий, но не предлагает проведение опросов и анализ отзывов. Тем не менее, он предлагает достаточно интуитивно понятный инструмент A/B тестирования, а также очень хорошую поддержку клиентов.

Стоимость: Базовый план стоит $24 в месяц.

Usabilla

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

Читайте также:  Топ-6 отличных книг по веб-дизайну

Стоимость: Нет в открытом доступе.

Инструменты тестирования юзабилити для прототипов/дизайнов

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

UserTesting.com

UserTesting была одной из первых компаний, вошедших в отрасль. И она внесла большой вклад в создание основы, на которой все строится. Usertesting.com предлагает несколько интересных интеграций с платформами создания прототипов, такими как Adobe XD и Sketch. Он также предлагает живое видео реальных пользователей. Рассказывающих свои идеи для вашего прототипа, сайта или приложения. Обратите внимание, что в UserTesting также есть инструмент для тестирования удобства сайта. Но он не был включен в приведенный выше список, поскольку не соответствовал критериям.

Стоимость: Нет в открытом доступе.

UsabilityHub

UsabilityHub – еще один признанный многими инструмент, который также существует на рынке в течение длительного времени. Он достаточно интуитивно понятен, предлагает 4 типа тестирования и предоставляет проницательные результаты. Такие как тепловые карты кликов, путь пользователей, ответы и временные шкалы.

Стоимость: Есть гибкий план, начинающийся с $50.

Useberry

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

Вот почему он уже был стратегически интегрирован с 5 платформами создания прототипов. Такими как Adobe XD, Figma, Sketch, InVision и Marvel. По этой же причине у него есть 7 типов тестирования и результатов, таких как тепловые карты кликов, пути пользователей, видеозаписи, временные шкалы и временные метки кликов. Useberry руководствуется инновациями, поэтому можно ожидать, что в будущем появится еще больше возможностей и прорывных решений.

Все изображения: Unsplash

По материалам: say-hi.me

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

Итак, кто же прав?

Каждый пользователь имеет уникальные привычки. Люди действуют по-разному в зависимости от ситуации. Это означает, что нужное количество кнопок зависит от множества различных факторов, в том числе от клиента, с которым вы работаете.

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

Возможно, вопрос не в том, «Должна ли страница иметь один CTA?», а в том, «Когда и почему страница должна иметь только один CTA?».

Определение маркетингового призыва к действию

Давайте начнем с простого. Что такое CTA на самом деле?

Call To Action (призыв к действию) – это кнопка или ссылка, которая сообщает пользователю на вашем сайте, что делать дальше.

Когда потенциальный покупатель прокручивает вашу целевую или домашнюю страницу, он может увидеть CTA, говорящую ему «Создать учетную запись», «Купить сейчас» или «Скачать здесь». CTA – это призыв к определенному действию.

Сайт mystorytime.com использует CTA «Старт» на своей домашней странице:

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

• Осведомленность: «Узнай больше», «Узнай, как …»
• Рассмотрение: «Скачать сейчас».
• Решение: «Свяжитесь с нами», «Закажите бета-версию».
• Привлечение: «Стать участником», «Зарегистрироваться сейчас».
• Защита интересов: «Поделитесь своими мыслями».

Без CTA вы не подталкиваете своих клиентов к следующему этапу покупки. Например, WordStream обнаружил, что один CTA в электронной почте увеличивает количество кликов на 371%, а продажи — до 1617%.

Читайте также:  3 крутые идеи, как сделать CAPTCHA менее раздражающей

Разные веб-страницы требуют разных CTA

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

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

CTA на домашней странице

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

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

Взгляните на домашнюю страницу компании King and Mcgaw. На этой странице у пользователя есть возможность кликнуть мышью по множеству элементов:

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

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

CTA на странице продукта

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

Читайте также:  4 принципа веб-дизайна, которым вас научит Голливуд

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

Возмем, к примеру, сайт Karimoku Cat. На странице есть ссылка как на страницу продукта, так и на страницу Amazon. Благодаря этому, клиенты могут выбрать как им удобнее продолжить просмотр.

CTA на странице поддержки

Страницы поддержки или контактные страницы также могут иметь несколько CTA.

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

На странице поддержки onwards.agency предоставлен доступ к адресу электронной почты для пользователей, номеру телефона и ссылкам на Google Maps, Twitter и Instagram:

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

CTA целевой страницы

В то время как многие страницы сайта могут содержать несколько кнопок CTA, с целевыми страницами все наоборот.

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

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

Читайте также:  25 крутых бесплатных новогодних иконок

Если вы все же решили разместить дополнительный CTA на целевой странице, убедитесь, что это будет приводить к тому же результату, что и основной призыв к действию. Например, «Купить сейчас» может сопровождать «Узнать больше».

Выбор правильного количества CTA для любой страницы

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

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

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

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

Однако в веб-дизайне есть место и для нескольких CTA. Домашняя страница, страницы магазинов и даже страницы контактов могут содержать более одной кнопки CTA – и это нормально. Главное – продумать желаемое поведение пользователя заранее и добавить соответственное количество кнопок.

Превью: Igor Miske

По материалам: say-hi.me

Если Google скажет что-то сделать, лучше это сделать.

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

И когда дело доходит до использования HTML метатегов для SEO, никто из нас не должен тратить время в пустую.

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

Что такое HTML метатеги?

Заголовок веб-страницы содержит много информации о найденном там контенте. Здесь вы найдете HTML метатеги вместе со ссылками на CSS или JavaScript, которые применимы к странице.

Вы можете найти несколько важных деталей о странице только из этого фрагмента:

• (Мета) заголовок
• Мета описание
• Тип мета-содержимого и область просмотра

Это все метатеги. В большинстве случаев они написаны на HTML в виде пары названий/значений. Например:

<meta property=»og:title» content=»15 Best CSS Libraries for 2019 | Webdesigner Depot» />

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

Какие метатеги нужно использовать?

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

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

Title

HTML пример

<title>5 Ways to Beef Up Your WordPress Security Today</title>

Что он делает?

Тег <title> указывает на название страницы.

Действительно ли он необходим?

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

Этот тег пригодится, если вы хотите настроить свой заголовок специально для результатов поиска. Итак, допустим, вы написали кликбейт заголовок, чтобы посетители, которые его увидели, захотели узнать, о чем идет речь. Что-то вроде:

How to Earn a Six-figure Salary with Nothing More Than Your Laptop, Passport, and Your Best Friend

(Как заработать шестизначную зарплату, не имея ничего, кроме ноутбука, паспорта и лучшего друга)

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

Читайте также:  40+ вдохновляющих сайтов с плоским дизайном

<title>Earn 6 Figures with Your Laptop, Passport, and Your Best Friend</title>

Это 56 символов, теперь заголовок вписывается в лимиты Google, и работает так же хорошо, как оригинал.

Description

HTML пример

<meta name=»description» content=»Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today.»>

Что он делает?

Это краткое изложение того, что можно найти на странице. В поиске это описание страницы, которое появляется под заголовком и URL страницы.

Действительно ли он необходим?

Да, это еще один важный метатег.

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

Итак, найдите время, чтобы написать описание самостоятельно.

Character Set (Набор символов)

HTML пример

<meta charset=»UTF-8″>

Что он делает?

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

Действительно ли он необходим?

UTF-8 – не единственный набор символов и не является универсально приемлемым. Итак, убедитесь, что вы определили набор символов для сайта по умолчанию, используя этот метатег.

Если вы сомневаетесь, что вашему сайту нужен именно этот набор символов, обратитесь к этому списку. Можно с уверенностью сказать, что в случае, когда веб-сайт должен переводится для международной аудитории, вам нужно использовать другой тег charset. UTF-8 в этом случае не подойдет.

Hreflang

HTML пример

<link rel=»alternate» href=»http://mywebsite.com/en-au/» hreflang=»en-au» />

Что он делает?

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

Действительно ли он необходим?

Есть несколько причин использовать этот метатег:

1. Когда вы создали международный веб-сайт с разными переведенными версиями;
2. Когда вы написали контент на определенном диалекте, например, en-us или en-gb;
3. Когда ваша страница содержит смесь языков или диалектов, и вы хотите, чтобы каждый из них был обнаружен.

Viewport

HTML пример

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

Что он делает?

Читайте также:  8 книг, которые должен прочесть каждый дизайнер

Он содержит руководство о том, как Google должен отображать вашу страницу на всех устройствах. Это особенно важно для мобильных устройств.

Действительно ли он необходим?

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

Вот почему Google рекомендует каждый раз устанавливать для контента значение width = device-width, initial-scale = 1. Если вы попытаетесь ввести такие переменные, как минимальный масштаб, вы можете испортить внешний вид вашего веб-сайта. Это происходит потому, что он трансформируется, например, из портретной ориентации в горизонтальную.

Canonical Link

HTML пример

<link rel=»canonical» href=»https://mywebsite.com/blog/7-ways-to-beef-up-wordpress-security» />

Что он делает?

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

Действительно ли он необходим?

Google не принимает дубликаты контента. Но допустим, что ваша статья «5 способов повысить безопасность WordPress сегодня» – это рерайт статьи под названием «7 способов повышения безопасности WordPress» от 2015 года.

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

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

Robots

HTML пример

<meta name=»robots» content=»noindex,nofollow»>

Или же:

<meta name=»googlebot» content=»noindex,nofollow»>

Что он делает?

Мета-теги “robots” всем поисковым ботам (роботам) или определенным ботам-обходчикам («googlebot», «bingbot», «duckduckbot» и т. д.), как обрабатывать страницу. Обычно это связано с тем, как должна быть проиндексирована страница.

Действительно ли он необходим?

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

Есть несколько причин, по которым вы могли бы заставить поисковые системы действовать иначе:

• noindex: используйте этот тег, если вы хотите скрыть страницу от поиска. (Не полагайтесь на это в целях безопасности. Помните, это всего лишь техническое решение.)
• nofollow: это полезно для блогов, которые принимают контент от авторов, но не проверяют его. Таким образом, если партнерские ссылки будут размещены на странице, Google не будет следовать им.
• nosnippet или max-snippet: управляет отображением вашего текста, изображения или фрагмента видео в поиске.
• noarchive: если существуют более старые кэшированные версии страницы, используйте этот тег, чтобы запретить поисковым системам показывать их.
• unavailable_after:[date]: это хороший вариант для ограниченного продвижения, например, в период продаж в Черную пятницу. Если вы, захотите привлечь трафик на страницу с октября по декабрь, возможно, имеет смысл убрать все из поиска после завершения праздников и прекращения действия сделок.

Читайте также:  5 ошибок SEO оптимизации: как избежать или исправить

Google Site Verification

HTML пример

<meta name=»google-site-verification» content=»https://mywebsite.com» />

Что он делает?

Это один из методов, которые вы можете использовать. Чтобы подтвердить свое право собственности на сайт для Google Search Console.

Действительно ли он необходим?

Вам не нужен этот метатег, если вы выбрали один из других вариантов подтверждения. Например, вы можете подтвердить право собственности на сайт с помощью своего кода отслеживания Google Analytics или обновив запись DNS. Если вы захотите, вы можете просто добавить метатег HTML в свой заголовок.

Twitter Cards и Open Graph (Социальные сети)

Образец HTML

<meta property=»og:type» content=»article» /> <meta property=»og:title» content=»5 Ways to Beef Up Your WordPress Security Today» /> <meta property=”og:description” content=»Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today.» /> <meta property=»og:image» content=»https://mywebsite.com/media/wordpress-security-lock/» /> <meta property=»og:url» content=»https://mywebsite.com/blog/5-ways-wordpress-security/» /> <meta property=”og:site_name” content=»My Website» />

Что он делает?

Метатеги Open Graph (например, в приведенном выше фрагменте) сообщают Facebook и LinkedIn. Как отображать метаданные для страницы или публикации, публикуемой в этих социальных сетях.

Метатеги Twitter Card делают то же самое, за исключением того, что обычно также запрашивают дескриптор (@).

Действительно ли он необходим?

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

Подведем итоги

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

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

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

Превью: Florian Olivo

По материалам: say-hi.me

Новейшее поколение мобильного подключения может предложить несколько захватывающих изменений, в том числе уменьшение задержек, улучшение соединений и повышение скорости. Эксперты прогнозируют, что к 2025 году 5G будет доступен на 1,4 миллиарде устройств по всему миру.

Более того, 5G повлияет не только на просмотр веб-страниц с мобильного устройства. Изменения в мобильном интернете также окажут влияние на веб-дизайн.

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

Вот как вы можете подготовиться к пятому поколению мобильной связи.

5G: О чем идет речь?

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

5G – пятое поколение мобильных технологий. Он обещает более высокую скорость передачи данных, более стабильные соединения и более широкий охват в целом. По сравнению с 4G, показатели скорости 5G в 10–20 раз выше. Это означает, что пользователи могут загружать страницы и файлы за доли секунды.

5G был создан для обработки растущего объема данных в текущей среде. По мере увеличения потоковой передачи видео и музыки существующие спектральные диапазоны становятся все более перегруженными. Люди изо всех сил пытаются получить доступ к подключению, в котором нуждается каждый современный человек. С 5G мы можем создать более эффективный мобильный интернет.

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

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

Что означает 5G для дизайна сайта?

Итак, как же 5G повлияет на разработку клиентских сайтов?

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

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

Читайте также:  35 свежих шрифтов за июнь

Речь идет не только о сайтах с изображениями высокого разрешения, сейчас это не является проблемой. Дизайнеры часто используют технологию оптимизации изображений 4G, такую ​​как IMGIX, чтобы обеспечить работу сайта как на смартфоне, так и на других мобильных устройствах. Еще одним отличием 5G от 4G является возможность использования всех преимуществ видео. Теперь вы можете наполнять сайт качественным контентом в 4K. Хотя 4K видео уже давно появилось в интернете, веб-дизайнеры его используют очень редко. Это связано с тем, что время загрузки часто астрономическое – особенно с мобильным интернетом.

Тем не менее, с появлением 5G 4K видео становится гораздо более распространенной функцией. Вы можете встроить его в фон своего сайта или использовать вместо изображения героя.

Давайте подробнее рассмотрим, как именно 5G позволит веб-дизайнерам создавать действительно уникальные и впечатляющие дизайны для своих клиентов.

1. Видео будет проигрываться быстрее

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

Эксперты прогнозируют, что беспроводная технология 5G будет в 10-100 раз быстрее, чем 4G. Эта технология может быть даже более надежной, чем кабельное подключение у вас в доме.

Для веб-дизайнеров это означает, что возможности практически безграничны.

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

Хотя дизайнеры могут убрать автоматическое воспроизведение видео, чтобы удовлетворить пользователей с более низкой скоростью соединения, у вас будет возможность немедленно доставлять качественный контент посетителям. Посмотрите, например, фоновые изображения для Kuhl & Han и представьте, какими великолепными они будут с 5G:

2. Более захватывающий пользовательский опыт

Мобильная адаптивность играет важнейшую роль для создания слаженного UX дизайна.

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

Читайте также:  15 сайтов, которые взорвут ваш мозг

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

Хорошая новость заключается в том, что 5G должен максимально сократить разрыв между тем, что люди получают на рабочем столе, и тем, что доступно на их мобильных устройствах.

Дизайнеры должны иметь возможность создавать согласованный UX для клиентов, где бы они не находились в эру 5G.

3. Виртуальная и дополненная реальность

Наконец, VR (Виртуальная реальность) и AR (Дополненная реальность) уже начали набирать обороты в последние годы. Дизайнеры начали экспериментировать с инструментами, которые позволяют им размещать 3D-видео на веб-сайтах, или AR-приложения на страницах продуктов.

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

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

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

Увеличенная скорость и уменьшенная задержка 5G откроют двери для новых возможностей. Пользователи могут даже отсканировать QR-код, воспользовавшись веб-сайт компании, и распаковать товар находясь в магазине с помощью телефонного приложения.

Что нужно помнить при создании дизайна для 5G

С появлением 5G современные веб-дизайнеры могут получить массу интересных возможностей. Однако, важно помнить, что есть и некоторые проблемы, которые необходимо преодолеть.

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

Технология все еще находится на ранних стадиях и будет доступна только в самых больших городах. После того, как будут построены вышки для отправки 5G сигналов, нужно будет адаптировать мобильные телефоны. А это требует создания определенных чипов, которые обеспечат доступ к новым возможностям мобильного браузинга.

Читайте также:  60+ дизайнов корпоративных сайтов для вашего вдохновения

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

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

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

Готовимся к 5G

Хотя веб-дизайнерам важно понимать и приспосабливаться к новому потенциалу, который может предложить 5G, это не означает что нужно ориентироваться только на 5G. Помните, что в некоторых частях мира 3G не только является стандартом, но и появился относительно недавно. Сосредоточение слишком большого внимания на этой новой технологии составит много трудностей для пользователей, которые не могут получить доступ к этим скоростям.

Вместо этого, сосредоточьте свои усилия для улучшения опыта 4G и типичных соединений. Изучите все возможности, которые может предложить 5G, и рассмотрите варианты реализации таких вещей, как 4k видео и внедрение виртуальной реальности.

Однако, когда вы внедряете элементы веб-дизайна, предназначенные для 5G пользователей, не забывайте делать их необязательными. Не делайте автоматическое воспроизведение видео или просмотр веб-сайта только при условии, что у пользователя есть доступ к AR.

Некоторое время мы будем жить в мире гибридного подключения к интернету…

По материалам: say-hi.me

Пока все в восторге от неоморфизма (и мы тоже присоединяемся ко всеобщему воодушевлению), нашлись те, кто скептически относится к тренду. В принципе, этого стоило ожидать, потому что вкусы у всех разные. И мы считаем, что стоит выслушать мнение, даже если оно противоречит нашему. Поэтому представляем вашему вниманию мысли George Kordatos – UI/UX дизайнера в useberry. Он считает, что у неоморфизма нет будущего. Согласны ли вы с ним?

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

Сразу оговорюсь: у меня нет ненависти к неоморфизму. Мне он даже нравится! Тогда почему я считаю, что он умер как тренд, хотя он даже не успел захватить все наши проекты?

Прежде всего, давайте определим неоморфизм как стиль.

Хотя пока нет четкого определения, мы можем с уверенностью сказать, что это интерактивный (с вопросительным знаком) тип дизайна, который имитирует реальные объекты. Он берет начало из скевоморфизма, и мы видели примеры везде: пользователь нажимает на виртуальную кнопку так, словно он жмет на реальную.

Проблемы неоморфизма

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

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

Читайте также:  Как появление 5G изменит веб-дизайн, и на что дизайнерам нужно обратить вниманиеАвтор: Kanhaiya Sharma

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

Вторая причина, по которой неоморфизм долго не протянет, связана с разработкой этих конструкций. Хотя создание самого концепта не сложное (Adobe XD или Figma отлично справляются со своей работой), его кодирование – настоящая боль для разработчиков. Кроме того, представьте себе такой сценарий: вашим разработчикам осталось перенести ваш дизайн в код. Вы, наконец, запускаете его, и вдруг обнаруживаете, что ваши пользователи не отвечают на интерфейс так, как вы хотите. Приходится все переделывать, и разработчики возвращаются к своим страданиям.

Наконец, давайте зададим себе вопрос: почему мы хотим, чтобы наши дизайны были реалистичными, если Интернет – совсем не реалистичная платформа? Нам кажется, что это круто? Тренды приходят и уходят – но мы не можем менять сайты каждый раз.

Двигаемся дальше

«Хорошо, мы поняли. Ты предполагаешь, что неоморфизм скоро умрет. Но где доказательства?»

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

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

Я лишь говорю о том, что неоморфизм нельзя назвать новой ступенью в развитии дизайна.

Читайте также:  Дизайн логотипов: 10 трендов 2018 года

По материалам: say-hi.me

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

Пока 2020 год в веб-дизайне продолжает традиции 2019-го: сайты с большим количество анимации и смелых цветов. Мы собрали 20 свежих примеров отличного веб-дизайна. Все картинки кликабельны и ведут на сайты.

Вдохновляйтесь!

Plink

Чтобы конкурировать с гигантами вроде PayPal, вам нужен убедительный бренд и простое сообщение. А еще можно удивить первым впечатлением — как сделал Plink со своей #D-анимацией.

Madame Turfu

Интересно, что принесет вам год грядущий? Тогда прыгайте на сайт Madame Turfu – здесь вам предскажут будущее с помощью классных диджитал-карт таро.

Nathan Taylor

Как может не нравиться этот сайт? Вы точно найдете здесь что-то для себя; наша любимая часть – разные режимы освещения.

Meatable

Meatable – сложная франшиза: это настоящее мясо, но для его получения не убивают животных – мясо выращивают в лаборатории. Простой сайт отлично объясняет процесс по этапам.

Sussex Royal

Гарри и Меган попали даже в подборку классных сайтов. Персональный сайт принца и его жены просто пышет королевским классом. Для промо-сайта, который ничего не продает, это великолепная работа.

Emotive Feels

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

UNREAL

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

Читайте также:  Поиск новых форм: известные дизайнеры предложили новый вид ya.ru

Kate Jackling

Иногда хороший дизайн просто отступает назад и позволяет насладиться сутью. Сайт фотографа Кейт Джеклинг делает именно это: позволяет вам насладиться прекрасными работами.

Helias

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

Klokki

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

Jonnie Hallman

Простой сайт-резюме Джонни Холлмана выигрывает от имен, с которыми он работал. Но главная прелесть, которую может перенять любой – переход деталей при прокрутке.

eaast

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

Pantheone Audio

Pantheone Audio доказывает, что элегантная прокрутка все еще очень важна в 2020 году, и использует ее для плавной навигации по сайту со сложной сеткой.

Leaf

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

Mociun

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

Jon Way

В портфолио показаны работы больше чем за 10 лет творчества. Чтобы пользователи не заскучали при скроллинге, авторы добавили анимаций и классный эффект «статики» – он выдержан по всему сайту.

Kota Yamaji

Еще одно портфолио – но оно кардинально отличается от предыдущего. Здесь все просто пестрит цветов. Вау!

Robb Owen

За последние пару лет мы видели много анимированных векторных аватаров, но редко встречаемся с такими проработанными. Робб Оуэн постарался на славу: движение курсора делает его аватара реальным.

Читайте также:  Великий дизайн кроется в деталях: секрет успеха интерфейсов Apple и Google

Glasgow International Festival 2020

Что нужно для международного фестиваля в Глазго? Конечно же, кельтская типография и яркие цвета!

Megababe

Megababe – дикий бренд, который борется с индустрией красоты не по правилам. Сайт выглядит достаточно просто, но он полностью отражает выбранную линию: такой же сумасшедший.

Фото на главной: Lee Campbell

По материалам: say-hi.me

Перевод статьи Aleksei Kipin Using auto-layout components in Figma. Перевод сделан с разрешения автора.

Я какое-то время играл с компонентами Figma Auto Layout. Здесь я покажу, как создать полностраничный компонент, используя Auto Layout в Figma.

Подробнее

Часто «прокачать» и очеловечить интерфейсный текст можно без привлечения сил копирайтеров. Достаточно не делать текст роботизированным, повторяя распространённые ИТшные приёмы, которые убивают человечность и понятность текста.

Подробнее

Музыкальный сервис Spotify пришел в Россию:

Подробнее