Я Павлов Александр
Веб дизайнерВерстальщикРазработчик WordPress

Обо мне

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


Web designer / Web developer

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

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

jQuery

WordPress

Html

Css

Javascript

Sass

Моя специализация

Что я могу сделать


Веб-дизайн

Дизайн сайтов, лендингов, интернет магазинов

Вёрстка

Быстрая загрузка сайта, отображение на мобильных

Программирование

Ваш сайт будет хорошо смотреться во всех браузерах

Разработка сайтов

Использую самые популярные CMS WordPress, Joomla, Modx

Прототипирование

Визуальное представление сайта на этапе разработки

Адаптивный дизайн

Разработка с учётом отображения на популярных гаджетах

Портфолио

Реализованы проекты


Отзывы

Отзывы клиентов на сайте freelance.ru


Blog Posts

Praesent scelerisque tincidunt ullamcorper.


Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню

  • 07.08.2020

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню

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

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

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

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

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

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

  • время навигации,
  • нерешительность пользователя,
  • перемещение курсора,
  • ошибки выбора,
  • предпочтения пользователя.
Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

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

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

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

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

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

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

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

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

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай
Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай
Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай
Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай
Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай
Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай
Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай
Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

Превью: Joseph Barrientos

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

6 лучших инструментов для удаленного тестирования юзабилити

  • 07.08.2020

6 лучших инструментов для удаленного тестирования юзабилити

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

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

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

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

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

6 лучших инструментов для удаленного тестирования юзабилити – Сей-Хай

Hotjar

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

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

CrazyEgg

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

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

Usabilla

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

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

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

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

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

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 должно быть на одной странице для максимальной конверсии

  • 07.08.2020

Подробное руководство: сколько CTA должно быть на одной странице для максимальной конверсии

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

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

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

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

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

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

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

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

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

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

Подробное руководство: сколько CTA должно быть на одной странице для максимальной конверсии – Сей-Хай

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

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

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

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

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

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

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

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

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

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

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

Подробное руководство: сколько CTA должно быть на одной странице для максимальной конверсии – Сей-Хай

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

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

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

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

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

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

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

Подробное руководство: сколько CTA должно быть на одной странице для максимальной конверсии – Сей-Хай

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

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

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

Подробное руководство: сколько CTA должно быть на одной странице для максимальной конверсии – Сей-Хай

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

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

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

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

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

Подробное руководство: сколько CTA должно быть на одной странице для максимальной конверсии – Сей-Хай

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

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

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

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

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

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

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

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

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

Превью: Igor Miske

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

Для связи

Отправьте сообщение или  свяжитесь со мной через социальные сети


Почта

fealtino@gmail.com

Телефон

(099) 649 3686