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

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

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

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

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

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

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

Стань менеджером digital-проектов за 16 недель!

COSSA рекомендует один из лучших онлайн-курсов нашего рынка по управлению сложными digital-проектами. Прокачай свои скиллы менеджера проекта по программе одного из крупнейших веб-продакшенов России.

  1. Экологичный путь менеджера
  2. Релиз-менеджмент: готовим проекты к запуску
  3. Требовательность digital-продюсера
  4. Аналитика. Базовые навыки
  5. Как пасти котов: правильное делегирование в IT
  6. Переговорные навыки. Часть 1. Цикл продаж
  7. Переговорные навыки. Часть 2. Провокации. Работа с возражениями
  8. Оценка и декомпозиция digital-проектов
  9. Планирование своего времени
  10. Управляем дизайнерами. Scrum в дизайне
  11. Выравнивание рабочего потока и балансировка нагрузок
  12. Навыки ведения конструктивного диалога
  13. Работа с кадрами: сложные вопросы
  14. Тонкие моменты (рассмотрим по ходу дела)
  15. Работаем с типовыми документами

Записывайтесь на курс! Старт ближайшего потока — уже 27 октября.

Реклама

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Комментарии:

Ответить?

Самые интересные статьи, обзоры и размышления —
в рассылке!

Email *


Подпишись!


Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Twitter Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Twitter, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой