ПЕРЕВОДЫ
Как избежать разочарования
Резюме: Топ 10 ключевых разочарований пользователей в Интернете
Вот несколько хороших советов:

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

•Добавьте большие расстояния вокруг сенсорных кнопок управления. Майкрософт рекомендуют делать 10-миллиметровые пространства между сенсорными элементами.
Расстояние между сенсорными элементами


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

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

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

Для исправления этой проблемы можно измерить высоту динамического контента и жестко закодировать его как минимальную высоту для контейнера в 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 нашел очень хороший сбалансированный подход - несмотря на то, что сервис использует перехват прокрутки на главной странице, контент на этой странице оформлен в виде отдельных слайдов, и пользователи чувствуют, что по мере прокрутки они переключают слайды.
С какими самыми разочаровывающими элементами вы сегодня сталкиваетесь в сети? Виталий Фридман из Smashing Magazine проделал большую работу, обобщив все основные разочарования пользователей в 2020 году.

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


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

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

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

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

•Размер шрифта должен быть не менее 16px. 16px для основного текста - хорошее начало, но помните, что чем больше размер экрана, тем больше должен быть текст.

•Для оптимальной читабельности примите во внимание, что высота строки должна быть 1,5 em или 1,6 em.

•Всегда просматривайте свои проекты на реальном устройстве.


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

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

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


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

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

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

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


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

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

Это прекрасно, если вы используете автопроигрывание видео, но убедитесь, что оно приглушено по умолчанию. Установите звук на OFF по умолчанию с возможностью включить его.
Запросы веб-сайта на отправку уведомлений. Изображение от Mozilla


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

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

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

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


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

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

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


Источник:

Uxplanet: Top 10 User Frustrations on Web
ПРОФЕССИЯ
UX/UI ДИЗАЙНЕР
3-х месячный практический курс
от ведущей дизайн студии

скидка — 35% в этом месяце
ПОДЕЛИТЬСЯ МАТЕРИАЛОМ
ХОЧЕШЬ ПОЛУЧАТЬ ЛУЧШИЕ НОВОСТИ ПО ДИЗАЙНУ ЗА НЕДЕЛЮ?
ПЕРЕВОДЫ
Топ навыков для новичков в дизайне
ПЕРЕВОДЫ
Как манипулировать своими пользователями
ПЕРЕВОДЫ
Дизайн с учетом особенностей слуха
© 2016 Your company
ПЕРЕВОДЫ
Как избежать разочарования
Резюме: Топ 10 ключевых разочарований пользователей в Интернете
Вот несколько хороших советов:

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

•Добавьте большие расстояния вокруг сенсорных кнопок управления. Майкрософт рекомендуют делать 10-миллиметровые пространства между сенсорными элементами.
Расстояние между сенсорными элементами


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

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

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

Для исправления этой проблемы можно измерить высоту динамического контента и жестко закодировать его как минимальную высоту для контейнера в 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 нашел очень хороший сбалансированный подход - несмотря на то, что сервис использует перехват прокрутки на главной странице, контент на этой странице оформлен в виде отдельных слайдов, и пользователи чувствуют, что по мере прокрутки они переключают слайды.
С какими самыми разочаровывающими элементами вы сегодня сталкиваетесь в сети? Виталий Фридман из Smashing Magazine проделал большую работу, обобщив все основные разочарования пользователей в 2020 году.

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


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

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

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

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

•Размер шрифта должен быть не менее 16px. 16px для основного текста - хорошее начало, но помните, что чем больше размер экрана, тем больше должен быть текст.

•Для оптимальной читабельности примите во внимание, что высота строки должна быть 1,5 em или 1,6 em.

•Всегда просматривайте свои проекты на реальном устройстве.


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

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

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


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

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

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

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


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

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

Это прекрасно, если вы используете автопроигрывание видео, но убедитесь, что оно приглушено по умолчанию. Установите звук на OFF по умолчанию с возможностью включить его.
Запросы веб-сайта на отправку уведомлений. Изображение от Mozilla


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

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

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

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


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

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

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


Источник:

Uxplanet: Top 10 User Frustrations on Web
ПРОФЕССИЯ
UX/UI ДИЗАЙНЕР
3-х месячный практический курс
от ведущей дизайн студии

скидка — 35% в этом месяце
ПОДЕЛИТЬСЯ МАТЕРИАЛОМ
ХОЧЕШЬ ПОЛУЧАТЬ ЛУЧШИЕ НОВОСТИ ЗА НЕДЕЛЮ?
ПЕРЕВОДЫ
Топ навыков для новичков в дизайне
ПЕРЕВОДЫ
Sketch против Figma: Сравнение топовых инструментов