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

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

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

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

Несмотря на популярность видеоформата в последнее время, большая часть информации в Сети по-прежнему предоставляется в виде текста. Поэтому:

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

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

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

2. Миниатюрные интерактивные элементы

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

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

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

• Размер элементов должен быть таким, чтобы прикасаться к ним пальцами было удобно. Средний размер сенсорной кнопки должен быть 9 мм х 9 мм. Руководство гласит, что размер сенсорной мишени должен быть не менее 48 х 48 пикселей.
• Вокруг сенсорных кнопок управления должны быть достаточные отступы. Майкрософт рекомендуют делать отступы между сенсорными элементами, равные 10 мм.

3. Неожиданные передвижения контента

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

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

Для исправления этой проблемы можно измерить высоту динамического контента и жестко закодировать его как минимальную высоту для контейнера в CSS. Дополнительные советы по этому поводу вы найдете в статье Content Jumping (и как этого избежать).

4. Потеря данных

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

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

Данные пользователя священны.

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

window.onload = function() {

    var1 = localStorage.getItem(var1);

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

}

5. Неработающая кнопка "Назад"

Контроль и свобода пользователя — один из 10 эвристических элементов дизайна пользовательского интерфейса Якоба Нильсена. Там сказано:

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

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

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

window.onbeforeunload = function(event) { 

// уведомлять о возможной потере данных здесь

 };

6. Управление прокруткой

Управление прокруткой — это способ показать конкретные анимированные эффекты на своем сайте, с помощью полосы прокрутки.

Яркие иллюстрации и прекрасная анимация не всегда делают веб-приложение отличным.

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

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

Изображение для публикации

Захват слайдов на Tumblr.

7. Барьер в виде регистрации 

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

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

Попробуйте, прежде чем купить!

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

8. Автозапуск видео со звуком

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

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

9. Разрешение на отправку уведомлений

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

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

10. Разрешение на хранение cookies

GDPR (Общее положение о защите данных) — это нормативно-правовая база, которая устанавливает правила сбора и обработки личной информации для лиц, проживающих в Европейском Союзе. Данное положение требует от посетителей ЕС раскрытия ряда данных. 

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

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

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