5 идей по улучшению UX на сайте за 2 часа

5 идей по улучшению UX на сайте за 2 часа

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

1. Не заставляйте пользователя что-то считать

Сценарий: «это новый пост?»

Все мы сталкивались с этим: вы пытаетесь понять, был ли пост, который вы сейчас читаете, опубликован сегодня или вчера. И вы смотрите по всей странице в поисках даты публикации «20 ноября».

Хорошо, теперь вы забыли, какое сегодня число!

Вы кликаете на часы на ноутбуке и вспоминаете, что сегодня 26 число. Отлично, посту…. уже 6 дней. Вы потратили время на вычисления.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

5 идей по улучшению UX на сайте за 2 часа

Другой подход

Относительные временные метки могут упростить этот процесс. Можно показывать не время и дату публикации поста, а сколько дней посту (т.е. 2 дня назад, неделю назад…). Такой подход улучшит UX, но его нужно использовать аккуратно, так как формулировка «1 год назад» не самая хорошая идея. Хороший тон – если пост старше недели, переключаться на абсолютные временные метки.

5 идей по улучшению UX на сайте за 2 часа

2. Используйте нормальный текст, а не DRY

Сценарий: я разговариваю с роботом?

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

А что если форма была бы более естественной? Взгляните на изображение ниже.

5 идей по улучшению UX на сайте за 2 часа

Функционально, но сухо. Ощущение, что текст написан роботом, правда?

Другой подход

Давайте поправим форму и сделаем все в форме диалога. Уйдем от классического стиля, попробуйте вставить поля в параграф текста. На изображении ниже заметно, что форму стало намного легче читать и заполнять, и не звучит слишком формально!

5 идей по улучшению UX на сайте за 2 часа

3. Разожгите любопытство читателя

Сценарий: покажите значимость

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

Возможно, вас заинтересовали эти советы, но когда вы переходите на страницу загрузки, перед вами всплывает сообщение «чтобы загрузить книгу и посмотреть советы, введите свой emal!». В 90% случаев это попахивает мошенничеством. Все мы скачивали книги с советами, которые видели уже ранее.

5 идей по улучшению UX на сайте за 2 часа

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Другой подход

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

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

5 идей по улучшению UX на сайте за 2 часа

4. Говорите о преимуществах своего приложения, а не функциях

Сценарий: рекламирование товара

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

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

5 идей по улучшению UX на сайте за 2 часа

Другой подход

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

5 идей по улучшению UX на сайте за 2 часа

5. Увеличьте области касания/клика

Сценарий: переход на страницу регистрации/авторизации на телефоне/планшете

5 идей по улучшению UX на сайте за 2 часа

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

Если вас не перекинуло куда-то еще, вам нужно увеличить страницу и кликнуть второй раз. Вы теряете примерно 2 секунды на тупой кнопке. Хорошо ли это с точки зрения пользователя? Возможно, нет.

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

Другой подход

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

5 идей по улучшению UX на сайте за 2 часа

Заключение

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

Автор: Saad Al-Sabbagh

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Рисуй крутые сайты, получай заказы и путешествуй!

Пройди практический видео курс по веб-дизайну

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

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

Я не робот.

Spam Protection by WP-SpamFree