главная > блог > UX и UI ошибки в примерах

Примеры ошибок UX (User Experience) и UI (User Interface)

User Experience - опыт взаимодействия пользователя с продуктом

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

Facebook - ошибка UX - UI

Фейсбук спрашивает "отменить ли действие". И два варианта выбора "Отмена" или "Отменить"... что выбрать? И какое поведение в этом сценарии предполагал разработчик?

Сайт сервисного центра DR-Sound - программная или логическа ошибка UX

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

Сайт Альфа-банка - ошибка (UX - UI)

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

Сайт BCS-банка - программная ошибка (UX)

Вероятно программная ошибка (видима по F12) - не отправляется форма заявки, зависает на отправке. Не дотестировали?

google

Пользовательский тупичок от Гугла:

1. Раз: хотим сменить адрес электронной почты аккаунта. Переходим на предназначенную для этого страницу.
2. Два: на этой странице есть только один адрес и его мы СМЕНИТЬ НЕ МОЖЕМ.
3. Три: тупик.



И еще тупичок от Гугла - восстановление забытого пароля:
1. Раз: Хотим сменить аккаунт, вводим логин (емайл).
2. Два: Кликаем "Забыли пароль?".
3. Три: "Изменение пароля запрещено. Только владелец может менять пароль".
Тупик. И зачем было перекидывать сюда по ссылке "Забыли пароль?"

yandex-tracker

Яндекс-Трекер. Чем постоянно грешат сервисы Яндекса - отсутстивем User Friendly - доброжелательным (удобным, интуитивно-понятным) для пользователя интерфейсом и информацией.

В данном случае - нет понятной информации при создания логина-пароля. Пример ниже: не указано, какие символы допустимы, а какие - нет. Вместо подсказки - просто отмазка - "содержит недопустимы символы"...



И еще пример из Яндекса. Догадайтесь, текст "Как создать хороший пароль" - это образовательные рекомендации? А вот и нет - там скрыты ОБЯЗАТЕЛЬНЫЕ правила, без которых пароль "неподходящий". Но об этом можно только догадаться после долгих экспериментов.

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


Или в Яндекс-Маркете. В заказе есть важное сообщение "Выберите пункт самовывоза". Я бы выбрал, если бы сделали это сообщение кликабельным с переходом на этот самый выбор.

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

Очередные баги User Experience UX на сайте Билайна

Ищу подробности про включение-выключение переадресации.
И не только я - в разделе "Часто ищут - В билайне (кстати, почему со строчной буквы?)" - "Переадресация".
Но по столь популярному интересу юзеров поисковой системе Билайна, увы, сказать нечего... 



А теперь бага на стыке User Experience и User Interface:

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

Но форма чата с поддержкой работает.
Отправляю в чат скриншот. Благо, есть "скрепка" прикрепить файл.

Но бот - "doesn't accept attachments"! Так зачем на чате с этим ботом разместили навигацию для добавления аттачмента?

Сайт DNS магазина - программная ошибка (UX)

Программная ошибка. Форма регистрации не распознает формат номера телефона и не отправляет регистрационный код. Вероятно программисты не предусмотрели возможность ввода некоторого знака в номере: +, - или пробелов.

Сайт авиабилетов Expedia - программная ошибка (UX)

Программная ошибка на сайте туристического сервиса мирового уровня Expedia (агрегатор отелей и авиабилетов). Движок сайта "не видит", что данные городов вылета и прилета уже введены в форму. И требует их ввести. Чем ставит пользователя в тупи (проблема UX).

Непродуманный сценарий пользовательского поведения на сайте www.nat-geo.ru

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

Сайт издания Fontanka.ru - ошибка верстки (UX-UI)

На сайте популярного Питерского издания Фонтанка.ру криво сверстали и не проверили верстку спецпроекта. Верстка полностью разваливается при изменении размера окна браузера. Никто не тестировал на изменение размера окна?

Сайт компании Рольф Лахта: нарушение User Familiarity в UI

Кроме User Experience Design (UE - проектирование взаимодействия пользователя) и User Interface Design (UI - проектирование пользовательсткого интерфейса) есть близкое к ним по понятие User Familiarity (UF). Это элементы и методы взаимодействия с интерфейсом привычные или знакомые пользователю, которые ему интуитивно понятны.

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

Сайт GeekBrains - программная или организационная ошибка (UX)

Видеоурок на сайте обучающего центра GeekBrains. Как минимум, первые 31 минута записи урока - просто заставка (больше проверять не выдержал). Никто в компании не тестировал?

getcourse

Попробуйте удобно заполнить форму на сайте Геткурс (Getcourse.ru), когда часть полей уезжает влево под плашку с меню... И эти люди хотят нас чему-то учить :-)

Сайт SEO сервиса Serpstat - программная ошибка (UX)

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

User Experience - Skillbox

Один из постоянных источников негативного UX - общение с сотрудниками техподдержки:
- сотрудники не знают сайты своих компаний, не ориентируются в них, и поэтому не могут помочь;
- или не умеют излагать свои мысли (возможно еще и тяготятся свой работой).
Пример чата с техподдержкой обучающего центра Skillbox, где менеджер просто исчезла - видимо, не зная, что ответить:

Петербургская Недвижимость: кривое UX в рекламе

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

В примере ниже компания Петербуржская Недвижимость тратит деньги на рекламу ЖК Фортеция, однако рекламная ссылка ведет в никуда: не на страницу предложения по этому ЖК, а на страницу других ЖК, где данный проект не представлен. Более того, его не найти, даже если очень постараться...

UX проблема проектирования поддержки на сайте Авито

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

User Experience - чат с техподдержкой банка

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

irecommend

При заполнении отзыва пользователю предлагается самому пересчитывать слова в тексте - "не менее 50 слов". Не слишком User Friendly... И это сервис, который живет на контенте созданном посетителями.

Сайт компании Рольф Лахта: проблемы UX-UI

Проблема реакции сайта на активность пользователя.

Сайт не регирует на клик по кнопке "отправить заявку" в двух разных формах отправки заявки. Минимум - посетители получают плохой опыт, максимум -компания теряет клиентов.

Возможные причины проблемы:

1. Ошибка проектирования UX/UI (заявка отправляется, но юзеру не сообщают)

2. Программная ошибка UI (должно сообщать, но бага)

3. Программная ошибка 2 (заявка не уходит)

Сайт компании Рольф Лахта: программная бага UI

Проблема интерфейса UX-UI - не дает выбрать марку автомобиля в "калькуляторе услуг".
Минимум - посетители получают плохой опыт, максимум - компания теряет клиентов.
Варианты проблемы: Программная или логическая ошибка UI

Сайт компании Окна-Питер: баги UI мобильной версии

Тестирование на смартфонах, похоже, просто не проводилось. В мобильной версии:
1. Обрезается большая часть названия компании - полностью теряется идентификация, нанося ущерб репутации.
2. Расползается меню.
3. Полностью пропадает слоган с основными конкурентными преимуществами (сформулированными маркетологами компании) "Окно за 1 день! Гарантия 25 лет!"
И ведь никто не проверил - ни разработчики, ни сотрудники компании...

Сайт компании по веб-разработке

Сайт компании по разработке сайтов - "команда профессионалов". Однако, фотографии не подгружаются... Программная ошибка нарушает интерфейс и создает недоверие к компании. Вы хотите обратиться к этим "профессионалам" по разработке сайтов? 

Следующая статья по User Interface адаптивная верстка под все смартфоны и десктопы.