Проектирование интерфейсов: основные методы, принципы и этапы разработки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Нелогичность пути пользователя. Иногда дизайнеры забывают добавить элементы, которые пользователь привык видеть на подобных страницах. Например, предложение восстановить пароль на странице авторизации.
2. Отсутствие консистентности. Когда одни и те же функции в разных частях приложения называются и выглядят по-разному. Например, переход в маркетплейс в одном месте называется «Магазин», а в другом — «Товары».
3. Прерывание пути пользователя. Например, когда клиент заполняет заявку на кредит, но внезапно появляется всплывающее окно с предложением оформить кредитную карту. Клиент не понимает, что ему делать и прерывает оформление заявки.
4. Отсутствие онбординга. Часть пользователей может быть не знакома с принципом работы вашего продукта. Поэтому хорошим тоном будут познакомить аудиторию с его функционалом и научить их им пользоваться.
5. Неинформативная обратная связь. Например, «Что-то пошло не так». Пользователь не понимает, что ему делать в таком случае, чтобы еще раз не увидеть такое сообщение.
6. Избыточная информация. Обилие текста или большое количество элементов на экране будет затруднять восприятие. Оставьте в интерфейсе только необходимое, группируя информацию и используя иконки, метки и другие средства для оптимизации пространства.
7. Сложные формы и процесс ввода данных. Разбивайте формы на несколько шагов, если это возможно, используйте автозаполнение и предоставьте пользователю подсказки и валидаторы на каждом шаге.