7 примеров плохого дизайна пользовательского интерфейса, из которых можно извлечь уроки

Вам когда-нибудь приходилось нажимать на кнопку, которая не реагировала? Или вы терялись в лабиринте запутанных меню? Вы не одиноки! Такие взаимодействия вызывают у пользователей разочарование и приводят к упущенным бизнес-возможностям.

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

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

Вы можете задаться вопросом: «Зачем сосредотачиваться на негативных моментах?»

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

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

‍Пример 1: Перекрывающиеся элементы

При разработке пользовательского интерфейса мы стремимся к совершенству. Однако даже самые известные платформы иногда допускают ошибки. Рассмотрим конкретный пример пользовательского интерфейса X, ранее известного как Twitter.

Почему этот пример выделяется?

На изображении представлен снимок экрана из X – платформы, насчитывающей 368 миллионов активных пользователей в месяц по всему миру. Учитывая ее известность, можно было бы ожидать безупречного дизайна. Однако этот фрагмент демонстрирует явную проблему, которая может раздражать многих пользователей. Поэтому мы считаем этот пример достойным объектом для нашего анализа.

Ошибка

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

Почему следует избегать таких наложений?

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

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

‍

Выводы и оптимальные решения

Из этой ошибки в дизайне мы извлекаем следующие уроки:

1. Важность тщательного тестирования:

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

2. Идеальное решение – расстановка элементов и расстановка приоритетов:

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

3. Важность циклов обратной связи:

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

Пример 2: Перегруженное отображение результатов поиска

Приложение Kindle для Mac предлагает обширную коллекцию книг в цифровом формате. Благодаря акценту на пользовательском опыте, удобстве и мобильности платформа привлекла 30 миллионов активных пользователей только в США.

Почему этот пример выделяется?

Это приложение Kindle для Mac отличается от привычного Kindle и других платформ для чтения электронных книг. Такой смелый отход от привычного дизайна подчеркивает важность анализа влияния решений по интерфейсу на пользовательский опыт.

Ошибка

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

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

Как избежать излишней сложности

Такой нестандартный подход вызывает вопрос: «Зачем?»

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

Это напоминает дизайнерам о золотом правиле: ставить потребности пользователей на первое место.

Выводы и идеальные решения

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

1. Результаты поиска в боковой панели: выдвижная боковая панель могла бы отображать результаты поиска ненавязчивым образом. Это поможет пользователям просматривать результаты, не теряясь в тексте.
2. Четкая графика с подписями: вся графика должна иметь четкие индикаторы, подписи и интерактивные элементы, чтобы обеспечить контекст.
3. Интуитивные заметки и выделения: вместо того, чтобы группировать их с результатами поиска, заметки и выделения могли бы иметь свой отдельный раздел. Это сделает их легкодоступными и упорядоченными.

Пример 3: Неактивный футер

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

Почему этот пример выделяется?

Футер сайта BigBasket является актуальным примером для обсуждения из-за его отклонения от типичных рекомендаций по UX/UI-дизайну. Футеры веб-сайтов представляют собой области вторичной навигации, которые направляют пользователей к важным ссылкам и информации. Такой дизайн позволяет найти баланс между исчерпывающей информацией и удобством использования.

Ошибка

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

Как избежать упущений в функциональности

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

Выводы и оптимальные решения

Этот дизайнерский выбор демонстрирует важность привязки элементов дизайна к конкретным функциям. Вот возможные улучшения:

1. Активные ссылки на города

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

2. Сворачиваемые списки или выпадающие меню

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

3. Четкие визуальные индикаторы

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

Пример 4: Неправильная приоритезация элементов

Мобильный пользовательский интерфейс Spotify служит идеальным образцом для дизайна приложений. Его интуитивная компоновка обеспечивает пользователям плавный интерфейс, в котором приоритет отдается эстетике и функциональности. На изображениях показана четкая категоризация музыки, подкастов и другого аудиоконтента с удобными вкладками, такими как «Главная», «Поиск» и «Ваша библиотека». Кроме того, функция DJ на базе искусственного интеллекта улучшает персонализированный поиск музыки.

‍Почему этот пример выделяется?

Spotify является самым популярным в мире сервисом потоковой передачи аудио по подписке. Он насчитывает более 551 миллиона пользователей и 220 миллионов подписчиков на более чем 180 рынках. Учитывая столь обширный глобальный охват, сервис должен обеспечивать пользователям приятный опыт взаимодействия. Любое отклонение от безупречного интерфейса может создать прецедент, учитывая его авторитет и влияние.

Ошибка

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

‍Как избежать неверного расстановки приоритетов

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

Выводы и идеальное решение

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

Пример 5: Неудачная реализация на мобильных устройствах

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

Почему этот пример выделяется?

Платформа, обслуживающая более 33 миллионов человек и 100 000 компаний, должна обеспечивать наилучший пользовательский опыт на всех устройствах. Удивительно, но мобильная версия сайта LastPass полностью повторяет версию для настольных компьютеров и не имеет видимой оптимизации для небольших экранов. Это создает дискомфорт для пользователей.

Ошибка

LastPass не адаптировал интерфейс веб-сайта для мобильной версии. Вместо этого компания создала сжатую версию для мобильного приложения. Сворачивание бокового меню для доступа к основным функциям уже кажется неинтуитивным. Интерфейс сжимает важный раздел настроек учетной записи и отображает только 40% его содержимого. Таким образом, пользователи вынуждены прокручивать и настраивать экран, чтобы получить доступ к важным элементам управления.

Как избежать подхода, ориентированного исключительно на компьютеры

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

Выводы и идеальное решение

Этот пример напоминает о том, что необходимо обеспечить единый пользовательский интерфейс на всех платформах. Итак, вот что может сделать LastPass:

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

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

Пример 6: Перегруженный макет

Internet Movie Database, или IMDb, – это известная платформа для киноманов. Благодаря огромному массиву информации, от биографий актеров до рейтингов фильмов, здесь есть все, что нужно любителям кино. Но есть одна загвоздка: навигация по обширному контенту может оказаться сложной задачей, в первую очередь из-за неудобного пользовательского интерфейса.

Почему этот пример выделяется?

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

Ошибка

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

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

В чем заключается задача? Отделить главное от второстепенного.

Важность хорошо спроектированного пользовательского интерфейса

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

IMDb содержит огромный объем данных. Отобразить все эти данные, не перегружая пользователей, – сложная задача. Однако текущий дизайн затрудняет пользователям распознавание и приоритезацию информации.

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

Выводы и идеальные решения

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

1. Адаптивное размещение рекламы: вместо того чтобы размещать рекламу в верхней части страницы, попробуйте вставлять ее в текст. Также можно размещать ее по бокам страницы.
2. Структурированная верстка: разбейте контент на четко обозначенные разделы. Если это страница актера, фотографии, биография и фильмография должны занимать отдельные области.
3. Улучшенная навигация: упростите меню и используйте навигационную цепочку. Это поможет пользователям понять, где они находятся и куда могут перейти дальше.

Пример 7: Высокая контрастность и наглядность

На веб-сайте Нью-Йоркского университета (NYU) преобладает оттенок фиолетового. Он используется для отражения идентичности бренда и выполнения дизайнерских функций.

Почему этот пример выделяется?

Контраст имеет решающее значение в веб-дизайне. Он гарантирует, что пользователи могут легко читать и понимать контент.

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

Высокий контраст, хотя и необходим для читаемости, может вызывать дискомфорт, если он не сбалансирован. Панель в правом нижнем углу также не соответствует требованиям WCAG 2 по цветовому контрасту с белым цветом для обычного текста согласно рекомендациям уровня AAA. Коэффициент контрастности составляет 6,66:1 вместо рекомендуемого 7:1.

Ошибка

На веб-сайте преобладает насыщенный фиолетовый оттенок в сочетании с ярко-белым текстом. Заголовок «Линда Миллс вступила в должность 17-го президента Нью-Йоркского университета» на фиолетовом фоне обеспечивает удобство чтения. Однако некоторым посетителям такой выбор цветовой гаммы может показаться неудобным.

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

Как избежать утомительной монотонности

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

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

Выводы и идеальное решение

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

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

Наиболее распространенные ошибки в дизайне пользовательского интерфейса и как их избежать

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

 –  Дон Норман, «Дизайн повседневных вещей»

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

1. Несогласованность элементов дизайна

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

2. Игнорирование мобильной оптимизации

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

3. Перегрузка информацией

• Ошибка: Засыпать пользователей избыточной информацией.
• Пример: Веб-страница, заполненная абзацами, затрудняет поиск призывов к действию.
• Вывод: Используйте пустое пространство и выделяйте важную информацию.

4. Скрытая навигация

• Ошибка: Затруднять пользователям поиск нужной информации.
• Пример: Слишком сложные или скрытые меню.
• Вывод: обеспечьте интуитивную навигацию и доступность.

5. Игнорирование отзывов пользователей

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

6. Недостаточное тестирование

• Ошибка: предполагать, что дизайн будет работать для всех, не проведя тщательного тестирования.
• Пример: Цветовая схема, которая затрудняет чтение для пользователей с дальтонизмом.
• Вывод: Всегда тестируйте дизайн на различных устройствах и с участием разных групп пользователей.

7. Неудачный выбор цветов

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

8. Медленная загрузка

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

9. Неинформативные сообщения об ошибках

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

10. Сложные формы

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

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

Выводы

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

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