Проектирование пользовательского интерфейса: главное про UI/UX в одной статье

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

UI – это «User Interface» или «Пользовательский интерфейс», UX – «User Experience» или «Пользовательский опыт».

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

Без интерфейса «объяснить» системе, что от нее требуется, у человека просто не было бы никакой возможности. Впрочем, при плохо спроектированном интерфейсе, пользователь также может не понять, как этой возможностью воспользоваться. И это уже про UX.

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

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

Обычно тщательная проработка UI/UX требуется для CRM, мобильных приложений, сайтов с объемным функционалом. Корпоративные сайты и лендинги меньше нуждаются в детальной проработке UI/UX, т.к. поведенческие сценарии там довольно стандартны.

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

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

Также иногда доведение проекта до идеала связано со слишком большими затратами, т.к. требует полностью переписать большой объем кода. Если такая перспектива не вызывает энтузиазма, обычно принимается решение собрать наиболее удобного и симпатичного «Франкенштейна» из того, что есть.

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

В зависимости от потребностей проекта какие-то этапы могут быть пропущены или наоборот, добавлены. Рассмотрим вариант, который оптимально подходит для CRM, сайта или приложения с объемным функционалом.

На этом этапе разработчик собирает и анализирует всю потенциально полезную информацию. Это может быть исследование ЦА, веб-аналитики по проекту клиента и похожих цифровых решений от конкурентов. Также в рамках этого этапа составляется Customer Journey Map (CJM).

CJM или карта пути клиента позволяет увидеть весь процесс взаимодействия пользователя с продуктом. Цель этого исследования – выявить точки, где интерфейс можно улучшить, или составить подробное представление, какой функционал понадобится (для новых проектов).

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

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

Вот как это выглядит на практике на примере проекта нашей студии:

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

Для сложных проектов на этом этапе составляется карта, подробно описывающая логику функционирования всего продукта в каждой из пользовательских ролей. Например, какие функции на каждой странице будут видны обычному пользователю, авторизованному пользователю, администраторам разного уровня. Обычно для разработки такой карты используются сервисы построения mind maps (например, xmind) или Figma. Если проект не очень большой, его структура может быть описана в обычном текстовом документе.

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

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

В рамках UI/UX основная задача дизайнера – создать интуитивно понятное для пользователя решение, используя привычные обозначения. То есть окна программы должны закрываться по клику на «х», операции должны подтверждаться зеленой кнопкой и отменяться красной и т.д.

Если нажатие «х» будет открывать три новых окна, а красная кнопка подтверждать согласие без возможности отмены, пользоваться таким продуктом будут в основном те, кто в силу каких-то обстоятельств судьбы не сможет от этого отказаться.

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

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

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

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

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

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

Вот и весь процесс работы над UI/UX. Этапы выстроены таким образом, чтобы учесть все возможные риски и реализовать проект с минимальными затратами по ресурсам. В идеале на выходе получилось красивое и удобное решение, которое эффективно встроилось в бизнес-процессы клиента.

В нашей студии вы можете заказать концептуальное исследование UI/UX вашего продукта, доработку существующего решения или создание проекта «с нуля». Наши специалисты имеют большой опыт в проектировании сайтов, мобильных приложений и CRM – с примерами работ можно ознакомиться в портфолио. Надеемся, эта статья была вам полезна и будем рады дальнейшему сотрудничеству!