Можно рисовать экраны, а нужно — решать задачу бизнеса: пять важных шагов в создании интерфейсов

Digital-агентство «Атвинта» рассказывает, через какие чек-поинты лежит путь к хорошему UI/UX.

В прошлой статье рассказали, что на самом деле стоит за термином «хороший UX». Сегодня — о важных частях процесса.

Самые популярные способы провести аналитику — совместить исследование по открытым источникам и проблемные интервью с представителями целевой аудитории.

• Провести кабинетное исследование компании и рынка в целом

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

• Провести глубинные интервью или опросы пользователей

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

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

Например, при разработке экосистемы умных IoT-лабораторий, мы прорабатывали интерфейс по непрерывной обратной связи от пользователей. Узнавали, как они пользуются устройством при проведении экспериментов, какие данные нужно видеть сразу, а какие — опционально, какие функции им нужны при запуске эксперимента. Всю информацию использовали при проектировании.

В итоге дизайн такого интерфейса дал медтех-стартапу дополнительное конкурентное преимущество на старте: еще до старта производства у них были заказы от лабораторий и финансирование.

Улучшить веб-сайт или приложение с точки зрения UX, — это упростить структуру, уменьшить количество ответвлений на пути клиента и улучшить навигацию.

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

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

На основании аналитического отчета дизайнеры продумывают:

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

Гипотезы о разных UX-решениях, компоновке элементов, взаимодействиях тестируем на прототипах. Ведь внести изменения на этом этапе намного проще, чем в готовый продукт, а значит — дешевле.

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

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

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

Так, разрабатываем сайты с 3D или анимациями, где принципиально добиться баланса между моушн-эффектами и скоростью загрузки.

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

Сравните два варианта страницы «О компании» на сайте Группы «Кронштадт», разработчиков беспилотные авиационных систем.

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

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

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

Например, вот выдержка из руководства Google для разработчиков о том, что система относит к UX-показателям:

• Интерактивность: насколько быстро сайт реагирует на взаимодействия пользователя.
• Визуальная стабильность: текст или изображения не должны смещаться на странице в процессе загрузки.
• Удобство для мобильных устройств: сайтом должно быть удобно пользоваться с любого устройства.
• Безопасность: страница должна работать на протоколе HTTPS
• Безопасность при просмотре: проверка, есть или нет вредоносные программы, вводящие в заблуждение страницы, вредоносные файлы и необычные загрузки.
• Отсутствие навязчивых межстраничных объявлений: вроде поп-апов, всплывающих окон, рекламных баннеров, которые перекрывают контент и мешают пользователю.

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

Хороший дизайн требует понимания целевой аудитории, большого количества исследований, тестирований. Это результат работы целой команды: UX-аналитика, редактора, дизайнеров, разработчиков, тестировщиков и менеджеров.

И конечно, он требует много вложений со стороны заказчика. При этом на старте разработки сложно спрогнозировать, сколько денег принесет или сэкономит то или иное дизайнерское UI/UX-решение.

Однако дело не в рентабельности инвестиций, а в стратегической ценности:

• Устранить препятствия на пути клиентов и повысить конверсию
• Повысить эффективность рекламы и SEO за счет соответствия требованиям поисковиков к удобству сайта.
• Создать добавочную ценность в восприятии клиентов
• Увеличить лояльность к компании, возвращаемость клиентов и вероятность рекомендации.
• И в результате — увеличить продажи и прибыль.