Как избежать разочарования

Аудио перевод статьи
0:00
0:00
Аудио перевод статьи
0:00
0:00
·

Резюме: Топ 10 ключевых разочарований пользователей в Интернете

И как их устранить (большинство из них) 

С какими самыми удручающими вещами вы сталкиваетесь в интернете сегодня? Виталий Фридман из Smashing Magazine проделал отличную работу, обобщив все ключевые разочарования пользователей в 2020 году.

https://twitter.com/smashingmag/status/1285534260129128450

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

  1. Мелкий текст

Несмотря на недавнюю популярность видеоформатов, большая часть информации в интернете по-прежнему представлена в письменном виде. Вот почему

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

Вот несколько практических советов, которым вы можете следовать при работе с текстом:

  • Размер шрифта должен быть минимум 16 пикселей. 16 пикселей для основного текста — хорошее начало, но помните, что чем больше размер экрана, тем крупнее текст.
  • Для оптимальной читаемости стремитесь к тому, чтобы высота строки составляла 1,5 em или 1,6 em.
  • Всегда просматривайте свои проекты на реальном устройстве.
  1. Маленькие объекты для нажатия

Чем меньше интерактивные элементы (ссылки, кнопки и другие элементы управления UI), тем больше ошибок совершит пользователь при взаимодействии с вашим сайтом.

Не играйте со своими посетителями в игру “охота на кнопку”.


Сравнение хороших и плохих сенсорных объектов. Изображение от Apple

Вот несколько хороших советов:

  • Сенсорные объекты должны быть удобными для пальцев. Их средний размер должен составлять 9мм x 9мм. В Material Design указано, что размер сенсорного объекта должен быть как минимум 48 x 48 пикселей.
  • Добавьте соответствующие отступы вокруг сенсорных объектов. В своих методических руководствах Microsoft рекомендует использовать отступы между ними в размере 10 мм.
Отступ между сенсорными объектами. Изображение от Microsoft


  1. Неожиданные смещения контента

Вы намереваетесь перейти по ссылке. Вы наводите курсор на ссылку и нажимаете на нее, и внезапно понимаете, что делаете неправильно. Вместо ссылки, по которой вы хотели перейти, вы нажимаете на рекламное объявление. Знакомо, правда?

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

Контент смещается на веб-сайте Verge. Изображение от CSS-Tricks

Чтобы решить эту проблему, вы можете измерить высоту динамического содержимого и закодировать ее как минимальную высоту для контейнера в CSS. Больше советов на эту тему вы найдете в статье “Прыгающий контент (и как этого избежать)”.

  1. Потеря данных при ошибках

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

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

Пользовательские данные священны.

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

window.onload = function() {

   var var1 = localStorage.getItem(var1);

   if (var1 !== null) document.getElemenyById("var1").value = var1;

}

  1. Не работает кнопка “Назад”

Пользовательский контроль управления и свобода — это одна из 10 установок исследования юзабилити для дизайна пользовательского интерфейса Якоба Нильсена . Он говорит:

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

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

window.addEventListener("beforeunload", function(event) { ... });

   window.onbeforeunload = function(event) {

   // notify about potential data loss here

};

  1. Захват скролла

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

Четкие иллюстрации и прекрасная анимация не всегда обеспечивают наилучшую работу в интернете.

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

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

Захват скролла Tumblr

  1. Стены регистрации

Стена регистрации — это обязательное требование создать учетную запись для пользования услугой. Стены регистрации не позволяют пользователям использовать сервис.


The New York Times предлагает пользователям зарегистрироваться, чтобы продолжить чтение.

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

Попробуйте перед покупкой

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

  1. Автовоспроизведение видео со звуком

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

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

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


  1. Разрешение на отправку push-уведомлений в браузере

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

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

Запросы веб-сайта на отправку уведомлений. Изображение от Mozilla


  1. Разрешение на хранение файлов cookie

GDPR (General Data Protection Regulation, Общий регламент ЕС по защите персональных данных) — это правовая основа, которая определяет руководящие принципы для сбора и обработки персональной информации от лиц, проживающих в Европейском Союзе. Он обязывает посетителей из ЕС раскрывать некоторые данные. Файлы cookie — это основной инструмент, в котором хранятся персональные данные, позволяющие владельцам сайтов отслеживать вашу активность в интернете; вот почему GDPR требует согласие на использование файлов cookie.

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

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

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

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

Источник:
uxplanet.org
·
comments powered by HyperComments