Вряд ли в мире есть хоть один продукт, дизайнер которого не вспомнит за собой ни единого неверного решения. Обычно разработчики исправляют промахи в новых версиях и редизайнах, но бывает и так, что идея, которая изначально казалась ошибочной, начинает нравиться пользователям — они привыкают. Так было, например, с перезапуском Foursquare в 2014.
Ошибок, которые может допустить дизайнер интерфейса, очень много. Но можно выделить самые раздражающие — те, на которые нельзя закрывать глаза при разработке.
Подход: учитывайте уровень пользователя
Пожалуй, самая распространенная ошибка при построении интерфейсов — наследование модели реализации. Чаще всего её допускают разработчики, стараясь перенести принципы и логику внутреннего устройства продукта в пользовательский интерфейс. Так появляются сложные многоуровневые фильтры, необъяснимые требования конфиденциальной информации и другие сложности.
Однако следование модели реализации нельзя назвать ошибкой. Наглядный пример — интерфейс приложения-камеры, который имитирует настройки профессионального фотоаппарата без готовых сценариев. Это решение понравится определённой группе пользователей, но большинство людей выберут для себя что-то попроще: приложение, где можно просто выбрать стиль фото и в одно нажатие сделать подходящий снимок.
Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*
Как получить измеримые результаты в фарммаркетинге.
Показываем на примерах →
Спецпроект
Создавая интерфейс, всегда держите в фокусе проблему массового пользователя. Это поможет не загромождать сайт или приложение ненужными элементами и лишней информацией, облегчит клиенту жизнь и сэкономит его время.
Главная страница: минимум информации и ключевые кнопки
С подходом разобрались. Теперь перейдём непосредственно к построению интерфейса. Театр начинается с вешалки, а информационный продукт — с главного экрана или страницы. Здесь важно, чтобы пользователя встречала только самая необходимая информация и обязательно — ключевой элемент, который позволит начать использование сервиса.
Случалось, мы игнорировали минимальную высоту экрана — и в итоге ключевые элементы оказывались «за бортом». Например, кнопка оплаты не попадала на главный экран. В таком случае значительно снижается вероятность успешного действия — некоторые пользователи эту кнопку попросту не находят. Как правило, проблему легко выявить, просматривая записи сессий и сравнивая данные по разным разрешениям в Google Analytics.
Пользователь оценивает новый для него сайт в среднем за пять секунд. Поэтому важно, чтобы на стартовой странице или первом экране была только главная информация и call to action. На примере — не только отсутствие кнопки с призывом, но и обилие лишней информации, которая путает посетителя сайта. Не делайте так.
Упрощаем регистрацию
Следующий шаг — регистрация. Есть продукты, для которых она обязательна и дизайнеру кажется абсолютно естественной. Но регистрация — всегда испытание для клиента. Позвольте ему авторизоваться через социальные сети. Если такой возможности нет — разбейте процесс регистрации на простые шаги:
-
доступно объясняем, какие преимущества или возможности даёт регистрация. Если их нет — это повод задуматься, нужна ли она в принципе. Другой вариант — опция «без регистрации», пусть и с ограниченным набором доступных действий;
-
разбиваем регистрацию на несколько шагов и показываем список этих шагов пользователю;
-
на каждом этапе подробно объясняем, зачем нужна та или иная информация;
-
перед регистрацией демонстрируем, какую пользу получит клиент. Сначала даём ценность и только затем требуем что-то взамен.
На примере ниже регистрационная форма запрашивает слишком много информации. Даже если все эти данные объективно нужны сервису, стоит разбить процесс на несколько шагов: создание аккаунта, редактирование профиля, данные для оформления заказов, дополнительная информация. При этом все шаги, кроме создания аккаунта, стоит сделать опциональными.
Поведение юзера: предупреждение ошибок вместо наказания
Как правило, хорошие интерфейсы помогают не совершать ошибок, а не наказывают за них пользователей. Например, если какое-то из полей формы обязательно для заполнения, хороший интерфейс не даст отправить форму с пустым полем, а подскажет, что надо заполнить обязательно. Если сайт или приложение обнуляет все поля, обнаружив ошибку всего в одном, — это катастрофа.
Облегчить пользователю заполнение форм могут выпадающие списки или примеры текста в поле, на которые он сможет ориентироваться.
Навигация: ясность и предсказуемость
Навигация должна отвечать на вопросы «где я сейчас», «где я уже был» и «куда могу пойти».
На скриншоте — сайт, где можно потеряться в один клик. Опустим эстетическую сторону вопроса. Главная проблема в том, что пользователь не понимает, где он. Причём обозначить это действительно просто — достаточно выделить конкретный пункт меню.
Ещё одна проблема в том, что кнопок в меню слишком много, и часть из них ведёт на сторонние ресурсы.
Как сделать иконки, которые будут понятны всем
На «понятность» продукта прямо влияет то, насколько узнаваемы и понятны различные кнопки и иконки. Как правило, у пользователей не возникает проблем с часто используемыми метафорами вроде денег, времени, сообщений, логина. Но если вы хотите использовать какую-то менее распространённую метафору, потрудитесь добавить к ней подпись.
Наглядная иллюстрация этого примера — редизайн Evernote образца 2014 года. В попытках облегчить дизайн создатели сформировали меню из одних только иконок. Удобство крайне сомнительно. Не надейтесь, что пользователь привыкнет к дизайну «на троечку» и разберётся с запутанным функционалом. В интернете всегда будет конкурент, которому не лень переделать кнопки, и клиенты вполне могут уйти к нему.
Последовательный интерфейс — прямая дорога к продажам
Все элементы продукта должны вести себя одинаково и предсказуемо для пользователя. Беспроигрышной тактикой будет выбор паттернов, которые уже знакомы потенциальному клиенту. К таким элементам относятся привычные кнопки, ссылки, чекбоксы, выпадающие списки, обычные поля ввода. Чем больше знакомых элементов, тем выше шанс, что пользователь успешно пройдет путь из точки «А» в точку «Б»: например, от регистрации на сайте до покупки продукта.
Если вы не можете решить задачу стандартным элементом интерфейса, убедитесь, что пользователи поймут, как работает то, что вы придумали. Самый простой способ — провести обычное «коридорное тестирование» среди коллег в офисе. Оптимальный — полноценное юзабилити-тестирование на конечных пользователях.
Пример ниже показывает, насколько легко испортить интерфейс в попытках изобрести велосипед. Кнопки «Да / Нет» или «Ок / Отмена» не должны запутывать посетителя.
Советую не только уделить внимание тому, насколько инструмент знаком клиенту, но и оценить его уместность. Часто дизайнеры используют элемент не по назначению. Например, если пользователь может выбрать только одну из десяти опций на выбор, в этом случае скорее подойдёт выпадающий список, а не набор радиокнопок.
Мобильные устройства: как не испортить дизайн приложения
Отдельно стоит упомянуть ошибки, которые из раза в раз повторяют в приложениях или в мобильных версиях сайтов. Их три.
-
Игнорирование контекста. Как правило, мы используем мобильные устройства в определённом контексте: общественный транспорт, спешка, ограничения во времени.
-
Слишком маленькая область нажатия. Хороший тон для любого активного элемента — область нажатия равна площади соприкосновения с пальцем.
-
Неочевидное управление жестами. Новому пользователю не всегда очевиден функционал, который спрятан за жестами. Если ваше приложение поддерживает жесты, опишите взаимодействие с помощью подсказок.
Вместо итога: как проверить идею на жизнеспособность
Оценить перспективы идеи можно только на практике. Полагаться в этом вопросе исключительно на интуицию — плохое решение. Прежде чем внедрять новую «фишку» на сайте или в приложении, её необходимо протестировать. Но и тогда, когда решение уже реализовано в продукте, нужно отслеживать его эффективность с помощью Google Analytics и «Яндекс.Метрики».
Если выясните, что какие-то элементы дизайна мешают взаимодействию с продуктом, смело сносите, даже если они нравятся вам, генеральному директору и его маме. Комфорт пользователя — в приоритете.
Мнение редакции может не совпадать с мнением автора. Если у вас есть, что дополнить — будем рады вашим комментариям. Если вы хотите написать статью с вашей точкой зрения — прочитайте правила публикации на Cossa.
Источник:
