UX/UI-ошибки при создании сайта: как найти и исправить

UX/UI — это, в первую очередь, удобство и решение задач. Ошибки при создании сайта делают интерфейс неудобным для пользователя и мешают бизнесу привлекать клиентов. А в итоге компания не достигает своих целей.

Хороший интерфейс решает сразу две задачи: удобство пользователя и достижение целей бизнеса. Человек заходит на сайт и сразу понимает, что и как он тут может сделать. А бизнес получает больше посещений, заказов или подписок на рассылку — в зависимости от изначальной цели.

Но чтобы сайт был удобным, важно не допускать ошибок при его создании. Рассказываем, какие ошибки UX/UI-дизайна встречаются чаще всего и как с ними бороться.

Сайт не выглядит как единое целое

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

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

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

Пользователь не понимает, где он и что делать

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

Как решать: пользоваться принципом «взгляда новичка» и смотреть с позиции пользователя, который оказался на сайте впервые. Для каждого экрана отвечать себе на три вопроса: «Где я нахожусь? Что тут можно сделать? Что произойдет дальше?». Хороший дизайн — такой, где ответы на все три вопроса очевидны с первого взгляда.

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

Формы составлены неудобно

Очень частая ошибка при создании сайта — не продуманы количество и размер форм. Есть два базовых правила:

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

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

Как решать: если есть возможность, уменьшать количество полей. Если возможности нет — уменьшать форму визуально и облегчать дизайн.

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

Не соблюдаются законы расположения

Конкретно — закон Фиттса и теория близости. Оба закона говорят о расположении элементов:

• закон Фиттса — если элементы слишком маленькие, по ним сложно попадать мышью или пальцем. А если расположены слишком близко друг к другу — слишком легко кликнуть не туда и сделать не то;
• теория близости — если два элемента расположены рядом друг с другом, они воспринимаются как взаимосвязанные. А если они далеко друг от друга, связь не прослеживается.

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

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

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

Не продуман язык интерфейса

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

Пример: классическая ситуация — окно с двумя кнопками «Отмена» и «Отменить». С первого взгляда невозможно понять, чем различаются эти кнопки и есть ли между ними вообще какие-то различия.

Как решать: грамотная редактура текста на кнопках. Текст должен быть понятным и однозначно отвечать на вопрос пользователя «Что произойдет, если я сюда нажму?». Хороший интерфейс читается как обычное предложение: если его прочесть, всё понятно. А в идеале он еще и соответствует tone of voice продукта.

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

Не учитываются привычки пользователя

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

Отсюда вытекает еще одна проблема: пользователь может привыкнуть нажимать «не туда». Пример — окно «Подтвердить удаление». Люди настолько к нему привыкли, что нажимают «Да» бездумно. А ведь смысл как раз в противоположном: дать человеку возможность задуматься.

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

Пример: вместо окна «Подтвердить удаление» можно добавить кнопку «Отменить удаление». Если пользователь удалит что-то случайно или передумает, он сможет вернуть всё на место.

Адаптация под разные устройства не учитывает их особенности

Более половины пользователей заходят на сайты с мобильных устройств. И это не всё: у кого-то широкий монитор, а у кого-то — старый с маленьким экраном. Кто-то пользуется смарт-часами или вообще сидит в сервисе с телевизора со SmartTV. У всех этих устройств — разные сценарии использования. Если это не учитывать, кто-то просто не сможет пользоваться сайтом, и компания потеряет возможного клиента.

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

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

Слишком сильная зависимость от технологии

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

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

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

Итоги: какие детали учесть, чтобы избежать ошибок

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

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