Дизайн меню в приложении может стоить половины пользователей
Энтони Роуз, соучредитель и главный технический директор социальной сети для телевидения zeebox, написал колонку о проблемах навигации в мобильных приложениях. ЦП выбрал из нее самое интересное.
При создании мобильных приложений с несколькими экранами проектировщики интерфейсов сталкиваются с регулярной проблемой — как разместить все элементы на небольшом экране смартфона. Часто дизайнеры рисуют меню вверху в виде закладок, либо располагают кнопки в нижней части.
Однако, подобные решения занимают слишком много места на и без того небольшом экране телефона. Android команда zeebox решила попробовать перенести рубрики на выезжающем слева дополнительном экране — сайд-меню. Таким образом можно освободить пространство экрана, при этом расположив полноценный список страниц приложения в боковой панели.
Когда команда zeebox только начинала создавать приложение, меню находилось горизонтально в верхней части экрана. Рассуждения разработчиков были просты: «С глаз долой, из сердца вон». Если пользователь не видит доступных вариантов навигации, то он не будет знать об их существовании.
В случае сайд-меню, даже если пользователь запомнит расположение пунктов навигации, ему потребуется дополнительный шаг, чтобы попасть в него. При этом, конечно, дизайн приложения станет чище и свежее.
Идея переноса навигации по приложению в исчезающую область экрана, вероятно, возникла полтора года назад. Новый тренд был применен в приложении Facebook в сентябре 2013 года. «Конечно, если бы Facebook делал это, то это должно было быть хорошо», — предположил Роуз, и его команда приступила к проектированию нового интерфейса.
Поэтому спустя несколько месяцев в Google Play была загружена новая версия zeebox с обновленным дизайном. Чтобы пользователям было легче ориентироваться, приложение при первом запуске показывало сайд-меню в открытом виде.
Нововведение, судя по отзывам в магазине приложений, было встречено хорошо. Но аналитики считали, что это катастрофа — время вовлечения пользователя в продукт сократилось в два раза.
Поняв всю серьезность ситуации, команда zeebox через две недели выпустила обновление — навигация вернулась на прежнее место. Чтобы не расстраивать пользователей, полюбивших сайд-меню, была предоставлена возможность настройки видов меню.
Прошло шесть месяцев. За это время команда расширила функционал — появился обновленный персональный канал новостей, ТВ-шоу, подписки на контент и прочее. Все это с трудом умещалось на экране, и Роуз вновь задумался об эксперименте с меню. Однако, на этот раз он вооружиллся инструментами A/B тестирования.
В zeebox A/B тестирование стали применять как на прототипах, так и на рабочих версиях продукта.
Для тестирования макетов дизайна, разработчики используют FLinto — простой инструмент для создания интерактивных прототипов. Два раза в неделю несколько человек из числа пользователей приходят в офис zeebox для тестирования макетов. Иногда победитель выявляется сразу. В других случаях, как, например, с навигацией, все сложнее. Приходится прибегать к A/B тестированию на тысячи пользователей, и делать это уже на рабочем приложении.
Для подобных случаев команда zeebox использует Swrve. Помимо того, что сервис умеет автоматически переключать всех пользотелей на более успешный вариант теста, Swrve также позволяет работать с конкретными кейсами. «Например, если вы являетесь абонентом Comcast, и мы заметили, что вы еще не использовали zeebox как пульт дистанционного управления (а такая возможность есть), то Swrve может отправить пуш-уведомление конкретно этому пользователю», — пишет Роуз.
Разработчики запустили на 48 часов тест с соотношением 15/85, где 15 процентов пользователей увидели сайд-меню, в 85 — старую навигацию. Все показатели снизились. Результаты теста дали такие же низкие результаты, как и год назад.
Хорошей новостью было то, что команда могла сразу переключить всех пользователей на старое меню, без выпуска обновления. К тому времени и Facebook на iPhone запустил новую версию приложения с постоянной навигацией внизу экрана, отказавшись от слайд-меню.
Впрочем, на Android, как заметил Роуз, Facebook продолжает экспериментировать: «Посмотрите на Facebook в моем телефоне и телефоне моего коллеги, должно быть они прямо сейчас проводят А/Б тестирование навигации на Android. Интересно бы было узнать, как у них обстоят дела с вовлечением пользователя».
Соучредитель zeebox считает, что основные элементы управления должны находиться постоянно перед глазами пользователя. В сайд-меню можно прятать пользовательские настройки и параметры приложения.
Если продукт состоит из нескольких ключевых экранов, необходимо учитывать, что применив сайд-меню можно получить резкое падение уровня вовлеченности пользователей в приложение.
При создании мобильных приложений с несколькими экранами проектировщики интерфейсов сталкиваются с регулярной проблемой — как разместить все элементы на небольшом экране смартфона. Часто дизайнеры рисуют меню вверху в виде закладок, либо располагают кнопки в нижней части.
Однако, подобные решения занимают слишком много места на и без того небольшом экране телефона. Android команда zeebox решила попробовать перенести рубрики на выезжающем слева дополнительном экране — сайд-меню. Таким образом можно освободить пространство экрана, при этом расположив полноценный список страниц приложения в боковой панели.
Удобство против дизайна
Когда команда zeebox только начинала создавать приложение, меню находилось горизонтально в верхней части экрана. Рассуждения разработчиков были просты: «С глаз долой, из сердца вон». Если пользователь не видит доступных вариантов навигации, то он не будет знать об их существовании.
В случае сайд-меню, даже если пользователь запомнит расположение пунктов навигации, ему потребуется дополнительный шаг, чтобы попасть в него. При этом, конечно, дизайн приложения станет чище и свежее.
Идея переноса навигации по приложению в исчезающую область экрана, вероятно, возникла полтора года назад. Новый тренд был применен в приложении Facebook в сентябре 2013 года. «Конечно, если бы Facebook делал это, то это должно было быть хорошо», — предположил Роуз, и его команда приступила к проектированию нового интерфейса.
Поэтому спустя несколько месяцев в Google Play была загружена новая версия zeebox с обновленным дизайном. Чтобы пользователям было легче ориентироваться, приложение при первом запуске показывало сайд-меню в открытом виде.
Нововведение, судя по отзывам в магазине приложений, было встречено хорошо. Но аналитики считали, что это катастрофа — время вовлечения пользователя в продукт сократилось в два раза.
Удивительная правда
Поняв всю серьезность ситуации, команда zeebox через две недели выпустила обновление — навигация вернулась на прежнее место. Чтобы не расстраивать пользователей, полюбивших сайд-меню, была предоставлена возможность настройки видов меню.
Прошло шесть месяцев. За это время команда расширила функционал — появился обновленный персональный канал новостей, ТВ-шоу, подписки на контент и прочее. Все это с трудом умещалось на экране, и Роуз вновь задумался об эксперименте с меню. Однако, на этот раз он вооружиллся инструментами A/B тестирования.
A/B тесты
В zeebox A/B тестирование стали применять как на прототипах, так и на рабочих версиях продукта.
Для тестирования макетов дизайна, разработчики используют FLinto — простой инструмент для создания интерактивных прототипов. Два раза в неделю несколько человек из числа пользователей приходят в офис zeebox для тестирования макетов. Иногда победитель выявляется сразу. В других случаях, как, например, с навигацией, все сложнее. Приходится прибегать к A/B тестированию на тысячи пользователей, и делать это уже на рабочем приложении.
Для подобных случаев команда zeebox использует Swrve. Помимо того, что сервис умеет автоматически переключать всех пользотелей на более успешный вариант теста, Swrve также позволяет работать с конкретными кейсами. «Например, если вы являетесь абонентом Comcast, и мы заметили, что вы еще не использовали zeebox как пульт дистанционного управления (а такая возможность есть), то Swrve может отправить пуш-уведомление конкретно этому пользователю», — пишет Роуз.
Разработчики запустили на 48 часов тест с соотношением 15/85, где 15 процентов пользователей увидели сайд-меню, в 85 — старую навигацию. Все показатели снизились. Результаты теста дали такие же низкие результаты, как и год назад.
Хорошей новостью было то, что команда могла сразу переключить всех пользователей на старое меню, без выпуска обновления. К тому времени и Facebook на iPhone запустил новую версию приложения с постоянной навигацией внизу экрана, отказавшись от слайд-меню.
Впрочем, на Android, как заметил Роуз, Facebook продолжает экспериментировать: «Посмотрите на Facebook в моем телефоне и телефоне моего коллеги, должно быть они прямо сейчас проводят А/Б тестирование навигации на Android. Интересно бы было узнать, как у них обстоят дела с вовлечением пользователя».
Кто победит
Соучредитель zeebox считает, что основные элементы управления должны находиться постоянно перед глазами пользователя. В сайд-меню можно прятать пользовательские настройки и параметры приложения.
Если продукт состоит из нескольких ключевых экранов, необходимо учитывать, что применив сайд-меню можно получить резкое падение уровня вовлеченности пользователей в приложение.