Главный экран приложения: как разместить все самое важное и не допустить ничего лишнего

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

Нужен новый «Главный экран» приложения!

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

И по ходу выработали методологию, с которой помогаем руководителям проектов и product owner’ам пройти этот нелегкий и довольно нервный путь.

Все начинается с анализа и проектирования совместного с бизнес-заказчиками будущего.

Проектирование и защита образа будущего «Главного экрана»

Этап 1. Аналитика

a.  Цели и требования бизнеса к главному экрану

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

b.  Анализ клиента и структуры клиентской базы

На этом шаге мы описываем нашего клиента:

       ·       Портрет клиента

        ·       Структура клиента: профиль, продукты, каналы, география, лояльность и т.д.

        ·       Бизнес-метрики, которые используются бизнесом в разрезе различных профилей клиентов

Эта информация будет использоваться в двух областях – анализ клиентских сценариев и приоритет показа информации на главном экране.

c.  Customer journey map (пользовательский путь)

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

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

Это можно сделать в любом виде – схема, таблица, текстовое описание или даже инфографика. Наша задача понять, как пользователь будет проходить основные сценарии на «Главном экране»: сначала на словах, а потом туда можно подставить уже разработанные макеты или экраны.

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

d.  Анализ обратной связи от клиентов

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

e.  Бенчмаркинг и best practices

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

Выводы по первому этапу        

Пожалуй, мы собрали всё, что нам нужно для анализа и принятия решений:

·       Какие именно продукты, сервисы, функции, элементы должны быть представлены на главном экране.

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

·       Слабые моменты мы узнали из обратной связи от клиентов, а сильные придумали сами или посмотрели на best practice.

А что еще можно получить от нашей аналитики, подробно рассказываем здесь:

https://www.trueengineering.ru/services/analytics

 Этап 2. Проектирование UI/UX

a.  Проектирование стратегии контента и функциональной логики UI

Обычно в основе стратегии лежат бизнес-цели и идея, которая объединяет всё в единую концепцию – какие элементы контента показываем, как с ним работаем и к какому результату это должно привести.

На этом шаге находим ответы на следующие вопросы:

·       Каким образом сегментировать аудиторию и разделять их взаимодействие с элементами главного экрана?

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

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

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

b.  Проектирование навигационной концепции

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

      ·       Потребности бизнеса – что должен сделать клиент, в каком порядке или приоритете.

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

      ·       Баланс, чтобы приложение было удобно клиенту и достигало цели бизнеса.

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

К примеру «операции приоритета 10 и 9 (высшие) доступны в один клик на главном экране, а остальные вынесены в смежные экраны или в боковое выпадающее меню».

Всё. Можно из это уже отрисовывать главный экран.

Подробнее про проектирование UI/UX можно узнать здесь: https://www.trueengineering.ru/services/uxui

c.  Дизайн главного экрана и экранов на уровень ниже

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

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

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

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

d.  UX-исследование

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

Поправив обнаруженные шероховатости, переходим к тестированию на реальных пользователях. Дополнительно на прототипе проводятся специализированные тесты типа First Click Test, который показывает, справляется ли клиент с входом в целевой сценарий в один клик.

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

Тест одного клика:

Результаты исследования:

e.  Работа с вкусовыми предпочтениями

После того, как у нас уже всё готово, мы рекомендуем сделать еще один заход на шлифовку визуальной составляющей (иллюстраций, цветов, размеров элементов и акцентов).

Выводы по второму этапу

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

Этап 3. Защита

a.  Вводная презентация

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

b.  Демо

Демонстрируем новый экран наглядно.

Ура! 

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

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

Интересные технические решения при реализации

 1. Скелетная загрузка

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

Для этого придумали скелетную загрузку – сначала пользователь видит скелет страницы (макет) с элементами пользовательского интерфейса. А затем уже на нем проявляется контент по мере загрузки.

2. Таргетированный контент.

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

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

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

4.  Каталог продуктов и услуг

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

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

5.  Навигация

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

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

Еще можно предусмотреть такие вещи как

·       Single Sign On (SSO), чтобы пользователь, авторизовавшись в одном продукте экосистемы, был сразу авторизован в другом. Это повышает не только уровень безопасности, но и юзабилити

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

Как подготовить пользователей к обновлениям?

Смена главного экрана – это всегда некоторого рода стресс. Редко, когда его удается менять последовательно и эволюционно. А значит пользователи, попав на новый главный экран после обновления, должны быть готовы к этому и воспринимать это максимально позитивно. Необходимо подумать о юзабилити на старте.  Вот что можно сделать, чтобы это было так:

1.  Анонс

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

2.  Онбординг 

Нужно «познакомить» пользователя с новым экраном. Это можно сделать одним или несколькими способами:

a.     Тур по новому экрану на старте приложения.

b.     Баннеры, которые рассказывают. Т.е. место под будущее продвижение сначала отдается обучению в виде карточек.

c.     Всплывающие подсказки.

3. Последовательное распространение приложения

Можно создать отдельную версию и распространить сначала по лояльной аудитории. Секретная ссылка «для своих» или любой другой механизм.

Раскатывать по 5-10% от общей аудитории, смотреть на реакцию и учитывать обратную связь.

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

4.  Поддержка по всем каналам коммуникаций

Поддержка скриптов и сценариев разъяснения для колл-центра, центра поддержки и чат-ботов.

В заключение собрали несколько заметок и советов наших специалистов:

·       Product owner должен слушать и вникать в комментарии и пожелания бизнеса, пользователей, команды разработки к элементам интерфейса. Но решения ему приходится принимать самому и потом нести за них ответственность. Баланс интересов – краеугольный камень. Нельзя принимать требования в стиле “На главном экране должно быть всё и кнопка Купить должна быть во весь экран”

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

·       Исследования на основе фактов должны стоять выше того, что называется «вкусовщина».

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

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

Пожалуй, мы рассказали в статье самое интересное и важное, что нужно сделать при проектировании и защите главного экрана приложения. Наши специалисты прошли этот путь для таких компаний, как S7 Airlines, ВСК, «Ингосстрах» и «СберСтрахование».

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