9 простых советов, которые помогут спасти интерфейс

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

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

Подход: учитывайте уровень пользователя

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

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

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

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

Главная страница: минимум информации и ключевые кнопки

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

Случалось, мы игнорировали минимальную высоту экрана — и в итоге ключевые элементы оказывались «за бортом». Например, кнопка оплаты не попадала на главный экран. В таком случае значительно снижается вероятность успешного действия — некоторые пользователи эту кнопку попросту не находят. Как правило, проблему легко выявить, просматривая записи сессий и сравнивая данные по разным разрешениям в Google Analytics.

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

Упрощаем регистрацию

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

• доступно объясняем, какие преимущества или возможности даёт регистрация. Если их нет — это повод задуматься, нужна ли она в принципе. Другой вариант — опция «без регистрации», пусть и с ограниченным набором доступных действий;

• разбиваем регистрацию на несколько шагов и показываем список этих шагов пользователю;

• на каждом этапе подробно объясняем, зачем нужна та или иная информация;

• перед регистрацией демонстрируем, какую пользу получит клиент. Сначала даём ценность и только затем требуем что-то взамен.

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

Поведение юзера: предупреждение ошибок вместо наказания

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

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

Навигация: ясность и предсказуемость

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

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

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

Как сделать иконки, которые будут понятны всем

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

Наглядная иллюстрация этого примера — редизайн Evernote образца 2014 года. В попытках облегчить дизайн создатели сформировали меню из одних только иконок. Удобство крайне сомнительно. Не надейтесь, что пользователь привыкнет к дизайну «на троечку» и разберётся с запутанным функционалом. В интернете всегда будет конкурент, которому не лень переделать кнопки, и клиенты вполне могут уйти к нему.

Последовательный интерфейс — прямая дорога к продажам

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

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

Пример ниже показывает, насколько легко испортить интерфейс в попытках изобрести велосипед. Кнопки «Да / Нет» или «Ок / Отмена» не должны запутывать посетителя.

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

Мобильные устройства: как не испортить дизайн приложения

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

1. Игнорирование контекста. Как правило, мы используем мобильные устройства в определённом контексте: общественный транспорт, спешка, ограничения во времени.

2. Слишком маленькая область нажатия. Хороший тон для любого активного элемента — область нажатия равна площади соприкосновения с пальцем.

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

Вместо итога: как проверить идею на жизнеспособность

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

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

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