7 худших примеров в истории дизайна и чему они могут нас научить

Сегодня мы будем учиться не у лучших, а у худших. 🙃

Как дизайнеры, мы любим красивые вещи.

Мы черпаем вдохновение в интерфейсах Apple, Airbnb и Linear. Мы фотографируем красивые постеры на улице. Мы добавляем в закладки сайты с креативной анимацией.

Но иногда уродливые вещи могут преподать нам по-настоящему ценные уроки.

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

Несмотря на то, что нам бывает физически больно смотреть на плохой дизайн, он часто запоминается надолго и служит мощным инструментом для вдохновения. Сегодня мы рассмотрим несколько ужасных (и забавных) примеров с известного форума badUIBattles на Reddit и узнаем, чему они могут нас научить.

#1 Попробуй отпишись

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

Проблема №1: Скрытые кнопки отписки

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

К сожалению, многие компании используют именно такой паттерн, чтобы удержать своих подписчиков. Пример — электронное письмо от Tattly ниже. Избыточный текст и множественные CTA (призывы к действию) создают дополнительные препятствия для пользователей, которые пытаются отказаться от подписки.

Проблема № 2: Незнакомые паттерны, которые сбивают пользователей с толку

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

Что следует сделать вместо этого

Прощание не менее важно, чем приветствие

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

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

Предложите что-то значимое

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

Например, если основной причиной отказа от услуг Hotjar является их высокая стоимость, компания предлагает временную скидку, чтобы вы не отменяли подписку. Другой пример — Jasper. Если вы решите отказаться от подписки, они предложат вам бесплатное продление пробного периода на 30 дней, чтобы у вас было больше времени на изучение продукта.

#2 Просто еще один экран загрузки

Экраны загрузки — одни из самых недооцененных в продуктовом дизайне.

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

То же самое происходит, когда вы видите экран загрузки цифрового продукта. Исследование «Допустимое время ожидания и влияние обратной связи на готовность пользователей ждать», показало, что пользователи, которые видят индикатор выполнения, ждут в среднем 22,6 секунды, прежде чем покинуть веб-страницу, в то время как без индикатора выполнения время ожидания сокращается до 9 секунд из-за отсутствия видимого прогресса.

Что следует сделать вместо этого

Иллюзия затраченных усилий

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

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

Поддерживайте вовлеченность пользователей

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

Одна из моих любимых игр на PlayStation — MLB The Show. Однако, поскольку размер файла составляет около 30 ГБ, для установки полной версии требуется несколько часов. Чтобы скрасить ожидание, на этот период разработчики предоставляют пользователю демоверсию игры. К моменту ее окончания, полная версия будет практически готова к запуску!

#3 Обыграйте компьютер, чтобы доказать, что вы человек

Думаю, вы не раз сталкивались с капчей (CAPTCHA) — популярным инструментом, который компании используют для блокировки доступа ботов к своим сервисам.

Однако знаете ли вы, что доля неудачных попыток прохождения капчи составляет почти 29%? Кроме того, люди с нарушениями зрения отмечают, что CAPTCHA остается одним из самых проблемных барьеров для доступа к веб-сайтам на сегодняшний день.

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

Что следует сделать вместо этого

Еще раз подумайте, нужна ли вам капча

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

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

#4 Используйте вентилятор для перемещения курсора

Пробовали ли вы когда-нибудь набрать название фильма или приложения на телевизоре с помощью пульта или ввести пароль Wi-Fi на PS4 или Xbox? Это по-настоящему мучительный опыт — прямо как в примере выше.

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

Что следует сделать вместо этого

Узнайте популярные размеры экранов

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

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

#5 Настоящий темный режим

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

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

Однако в большинстве случаев темный режим реализуется неправильно. Многие компании считают, что достаточно просто переключить цвет фона на чисто черный (#000000), а текста на белый (#ffffff) или инвертировать текущие цвета. Но такой дизайн лишь еще больше ухудшает читаемость и напрягает глаза.

Что следует сделать вместо этого

Используйте темно-серый вместо чистого черного

Не используйте чисто черный (#000000) в качестве фонового цвета. Вместо этого выбирайте для фона более мягкие темно-серые оттенки, например #121212. Они снижают нагрузку на глаза и придают интерфейсу более профессиональный вид.

Аналогичные рекомендации содержатся в руководстве Material Design от Google — темно-серый фон позволяет достигнуть нужного баланса между удобством и читабельностью.

Обеспечьте высокую контрастность, но не переборщите

Работая над темным режимом, проверьте, чтобы текст и UI-элементы соответствовали минимальному коэффициенту контрастности — 4,5:1. Специальные инструменты, такие как WebAIM Contrast Checker, помогут убедиться, что все цветовые сочетания отвечают стандартам доступности.

#6 Ввод в стиле игры Donkey Kong

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

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

Что следует сделать вместо этого

По возможности объединяйте поля

Если это возможно, объедините имя и фамилию в одно поле. Это упростит пользователям задачу и снизит вероятность ошибок. При необходимости вы можете прибегнуть к помощи алгоритмов, чтобы разбить введенные данные на компоненты. Энтони из https://uxmovement.com описывает это следующим образом:

«Не у каждого пользователя есть имя и фамилия. Всё зависит от их культурного бэкграунда. Например, если человек родом из Латинской Америки, есть вероятность, что у него две фамилии, по одной от каждого родителя. Если из Китая, его имя будет располагаться после фамилии, и они всегда будут использоваться вместе».

Сформируйте четкие ожидания

По возможности, добавляйте в поля плейсхолдеры, например, «Джон Доу» (русский аналог — «Иван Иванов»), чтобы помочь пользователям понять, что нужно вводить. Проверьте, чтобы все текстовые метки были логичными и корректными.

#7 Укажите свой возраст с помощью «Змейки»

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

Другая проблема — необходимость использовать специальные компоненты выбора даты (например, выпадающие списки для месяца, дня и года) без возможности вводить данные напрямую.

Что следует сделать вместо этого

Устанавливайте разумные значения по умолчанию

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

Разрешите прямой ввод

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

Заключение

Хотя все эти примеры кажутся утрированными и смешными, многие из рассмотренных негативных аспектов UX, к сожалению, встречаются в реальных продуктах, которые мы используем ежедневно. Изучив худшие дизайны, мы можем понять, как создавать интерфейсы, которые не только не разочаруют аудиторию, но и, напротив, подарят ей массу положительных эмоций.