Топ-10 вещей, раздражающих пользователей в Интернете

И как большинство из них исправить.

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

Smashing Magazine

@smashingmag

User Frustrations in 2020: please avoid them if possible. twitter.com/smashingmag/st…

21:32 PM - 21 Jul 2020

Smashing Magazine @smashingmag

Common frustrations in 2020: – tiny scrollable panes – tiny click targets – <select>-dropdown for country selector – disabled "Continue" buttons – auto-playing carousels/videos – slow websites – unsupported "Back" button – push notifications – app install prompts – promo ads

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

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

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

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

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

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

2. Маленькие цели нажатия

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

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

Хорошая и плохая цели нажатия. Изображение Apple

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

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

Отступ между сенсорными целями. Изображение Microsoft

3. Неожиданные сдвиги контента.

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

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

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

Чтобы решить эту проблему, вы можете измерить высоту динамического контента и жестко закодить ее как min-height для контейнера в CSS. Дополнительные советы по этому поводу можно найти в статье «Content Jumping (and How To Avoid It)».

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

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

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

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

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

window.onload = function() {
var var1 = localStorage.getItem(var1);
if (var1 !== null) document.getElemenyById("var1").value = var1;
}

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

Контроль и свобода действий – это одна из 10 эвристик юзабилити дизайна интерфейса Якоба Нильсена. Она гласит:

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

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

window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) {
// notify about potential data loss here
};

6. Scroll hijacking

Scroll hijacking – это манипуляция с полосой прокрутки. Обычно вместо скролла страницы scroll hijacking показывает пользователю определенные анимированные эффекты. Но следует помнить, что:

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

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

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

Реализация scroll hijacking на Tumblr

7. Стены регистрации (Sign up walls)

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

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

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

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

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

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

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

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

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

9. Запрос на отправку push-уведомлений в браузере

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

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

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

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

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

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

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

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

Если вы хотите узнать больше о методах использования cookie-файлов, я рекомендую прочитать статью «Privacy UX: Privacy-Aware Design Framework».

Перевод статьи uxplanet.org