Как только мы сделали первую версию iOS приложения, я начал упорно приставать к людям на футбольных полях и баскетбольных площадках с просьбой установить Topic и пощелкать его прямо при мне.
Нет ничего ценнее, чем вживую понаблюдать, как пользователи взаимодействуют с интерфейсом. По итогам наблюдений стало понятно, что многие вещи мы сделали не совсем так, как надо. Далее о наших ошибках, как мы их исправили, и советы, как эти ошибки не повторить.
Изображение №1: поиск игр (Find a game в меню приложения)
Самое главное, для чего нужен Topic — это найти подходящую игру. При этом, основными критериями для игроков являются:
— Расположение площадки для игры
— Время игры (день недели и период времени)
— Уровень игры
В первой версии приложения мы постарались вывести в списке игр все эти (и некоторые другие) данные. Но столкнулись с тем, что информации оказалось слишком много, пользователю сложно с ходу сориентироваться. Также неочевидным оказался выбранный нами способ вывода списка игр — горизонтальное листание.
Отсюда выводы:
1. Используйте привычные для пользователя элементы UI
Горизонтальное листание позволяет вывести больше информации, но оказалось неочевидным. А вертикальная лента новостей/объявлений/товаров применяется во многих популярных приложениях.
2. Старайтесь снизить «шумность» интерфейса
Чтобы не рассеивать внимание пользователя, надо выводить только наиболее важные данные. Второстепенные необходимо скрыть глубже. Мы убрали адрес, уровень (пусть диапазон уровней игрок выбирает в настройках), количество свободных мест (если мест нет, то игра не выводится), аватары организатора и записавшихся, кнопки создания игры и добавления площадки.
3. Важные элементы управления необходимо сделать достаточно крупными, неважные — спрятать глубже
Типичным поведением оказалось переключение одного пользователя между 1-3 любимыми видами спорта. Поэтому, мы решили, что лучше с самого начала спросить, какие виды спорта пользователю интересны, сохранить это в его профиле и выводить по умолчанию список игр по выбранным видам спорта (см об этом ниже).
В этом случае контрол выбора спорта теряет важность и уходит глубже в общие настройки фильтрации. Что позволяет сделать важные кнопки перехода к настройкам фильтрации (Filter) и поиску по карте (Map) значительно заметнее и крупнее.
4. Старайтесь выводить данные в формате, который проще для восприятия
Если цена ровная, без центов/копеек, то 00 центов выводить не надо. Если игра сегодня или завтра, то надо так и написать, не заставляя пользователя вспоминать какое сегодня число и день недели.
5. Не заводите пользователя в тупик нулевым результатом выдачи
Если в поиске игр ничего не найдено — выводим лучшие ближайшие корты, где можно создать игру, чтобы пользователь мог исправить ситуацию
Изображение №2: поиск игр, ничего не найдено (выставьте в настройках фильтрации приложения все диапазоны от 0 до 0)
6. Мягко подталкивайте пользователя к нужным вам действиям: If You Don'T Ask, You Don'T Get
Нам хотелось бы, чтобы как можно больше пользователей создавали игры на Топике. Поэтому, в конце ленты с играми, выводим кнопку создания новой игры.
Проблема, которую пока не удалось решить — список игр не дает наглядного представления о расположении игры на карте. Но карта не дает наглядного представления о других параметрах игр, например, дате и времени. Возможно, экраном по умолчанию должен быть не список игр с фотографиями (List), а карта с маркерами (Map). Буду рад услышать ваш совет.
Изображение №3: поиск игр (пролистать в самый конец ленту поиска игр)
7. Используйте вводные экраны: минимум текста, максимум наглядности
Чтобы быстро сориентировать пользователя куда он попал, какую ценность он получит от использования приложения, в первый запуск показываем ему два вводных экрана. Экраны намекают, что у нас можно найти игры по разным видам спорта и, что игры можно фильтровать по разным критериям.
Изображение №4: вводные экраны при первом запуске приложения
8. Первый опыт пользователя должен быть классным. Кастомизируйте ваш контент так, чтобы опыт стал как можно класнее
Как только у нас появилось больше 5 видов спорта в одном городе, конверсия с экрана с поиском игр в просмотр конкретной игры стала ниже. Крайне желательно, чтобы список игр, который мы покажем пользователю, был релевантен его предпочтениям. Поэтому, сразу после вводных экранов и запроса прав на определение местоположения, предлагаем выбрать любимые виды спорта, которые уже позже после регистрация запишем ему в профиль.
Раньше мы запрашивали любимые виды спорта уже после регистрации. Выбор до регистрации увеличивает релевантность ленты игр, дает возможность сделать акцент на других более важных элементах интерфейса.
Если пользователь не выбрал виды спорта, то в ленте показываем ему все виды спорта.
9. Упрощайте ввод и выбор опций
После нашей предыдущей статьи на Хабре, многие просили добавить на Топик самые неожиданные виды спорта. Сначала мы боролись с этим и выводили только популярные (иначе выбор вида спорта из огромного списка превращался в кошмар).
Но в итоге сдались и решили просто добавить в список форму для фильтрации по названию. Ничего не введено — показываются все виды спорта, как только начинаем ввод — происходит фильтрация списка.
Изображение №5: Выбор любимых видов спорта (четвертый вводный экран при первом старте приложения)
Не стоит запрашивать все нужные приложению права пачкой при первом старте. При таком подходе, пользователь не понимает зачем он должен давать их приложению — мы же ничего не объясняем. А отказавшись, дать права уже не так просто, придется довольно глубоко копаться в настройках телефона.
10. Запрашивайте права только перед тем, как они понадобятся
Изображение №6: Запрос прав на отправку push-уведомлений (после первой отправки сообщения кому-либо или после отправки запроса на участие в игре с необходимостью подтверждения записи организатором)
11. Прозрачно доносите, что пользователь получит, дав права
12. Показывайте диалоговое окно iOs только тогда, когда пользователь явно проявляет свое намерение дать права. Давайте пользователю выбор
Например, если пользователь отказывает на пред-запрос прав на определение местоположения, то предлагаем ему ввести город вручную + показываем кнопку с возможностью все-таки дать права.
Изображение №7: Пред-запрос прав на определение местоположения пользователя (третий вводный экран при первом запуске приложения)
13. Если права уже не выданы, то показывайте наглядную подсказку, как их выдать
Изображение №8: Если запрос прав на на отправку push-уведомлений уже был отклонен пользователем, но пользователь на экране изображения №6 нажал на «Notify me»
14. Используйте данные социального графа или другие вспомогательные данные для того, чтобы улучшить опыт пользователя
Пойти на встречу с незнакомым человеком — когнитивно дискомфортная ситуация. Пойти на групповое мероприятие значительно проще, градус неловкости спадает. Если мероприятие спортивное — еще проще. Но самое комфортное — это пойти туда с друзьями или знакомыми.
Данные о том, что трое моих фейсбук-друзей идут завтра рядом играть в футбол, значительно улучшит мой опыт использования приложения. Конечно, не всем приложения помогут данные о социальных связях пользователей. Но, наверняка, есть другие вспомогательные данные, которые вы можете использовать для того, чтобы сделать пользователей немного счастливее.
Изображение №9: Предложение найти зарегистрированных на Топике друзей (появляется на второй день использования приложения)
15. Делайте заметнее данные, которые влияют на совершение пользователем желательных действий
Мы заметили устойчивый паттерн поведения: очень многие перед тем, как записаться, смотрят страницы тех, кто уже записался на игру. Чтобы им было это проще делать, мы увеличили размер фотографий записавшихся. Скорее всего, следующим шагом выведем по каждому записавшемуся другие сводные данные — какой уровень игры, сколько игр сыграл.
Изображение №10: Страница игры (Клик по любой игре в разделе Find a game)
Реквестирую совет хабравчан: возникла проблема, как дать пользователю возможность поменять список “My activities”, который он вводит при первом запуске приложения. Если он зарегистрированный, то все не так плохо, виды спорта редактируются в профайле. Хоть это и не такой уж очевидный путь, как хотелось бы.
Если незарегистрированный, то все еще сложнее. Возможно, стоит вывести в списке отдельный контрол для редактирования “My activities”. Если пользователь не зарегистрирован, то просить его зарегистрироваться для редактирования. Если зарегистрирован, то отправляем в редактирование профайла. Буду рад услышать ваш совет.
Изображение №11: Фильтр игр (Клик по соответствующей кнопке в разделе Find a game)
16. Не делайте из приложения многофункциональный комбайн, фокусируйтесь на главном функционале
Для основной части пользователей создание игры и добавление площадки не так важно,
поэтому, мы убрали эти кнопки из нижнего бара и выделили их отдельно в меню.
Возможно, позднее мы выделим функционал организатора в отдельное приложение, как это сделал Eventbrite.
Изображение №12: Меню (клик по иконке в левом верхнем углу)
Ну и напоследок доработанная страница регистрации/авторизации:
Изображение №13: Страница авторизации (клик по ссылке «Sign in» в меню)
Практически все вышеуказанные доработки еще пекутся, их пока нет в версии, которая сейчас лежит в апсторе. Прошу хабровчан поддержать нас и посоветовать здесь, что еще мы можем улучшить приложение, а в апсторе — отметить что хорошего уже в нем есть ;)
Для вашего удобства пронумеровал все изображения, чтобы было удобно ссылаться в комментариях. Прописал кратко как попасть на экран в приложении.
Нет ничего ценнее, чем вживую понаблюдать, как пользователи взаимодействуют с интерфейсом. По итогам наблюдений стало понятно, что многие вещи мы сделали не совсем так, как надо. Далее о наших ошибках, как мы их исправили, и советы, как эти ошибки не повторить.
Изображение №1: поиск игр (Find a game в меню приложения)
Лента игр
Самое главное, для чего нужен Topic — это найти подходящую игру. При этом, основными критериями для игроков являются:
— Расположение площадки для игры
— Время игры (день недели и период времени)
— Уровень игры
В первой версии приложения мы постарались вывести в списке игр все эти (и некоторые другие) данные. Но столкнулись с тем, что информации оказалось слишком много, пользователю сложно с ходу сориентироваться. Также неочевидным оказался выбранный нами способ вывода списка игр — горизонтальное листание.
Отсюда выводы:
1. Используйте привычные для пользователя элементы UI
Горизонтальное листание позволяет вывести больше информации, но оказалось неочевидным. А вертикальная лента новостей/объявлений/товаров применяется во многих популярных приложениях.
2. Старайтесь снизить «шумность» интерфейса
Чтобы не рассеивать внимание пользователя, надо выводить только наиболее важные данные. Второстепенные необходимо скрыть глубже. Мы убрали адрес, уровень (пусть диапазон уровней игрок выбирает в настройках), количество свободных мест (если мест нет, то игра не выводится), аватары организатора и записавшихся, кнопки создания игры и добавления площадки.
3. Важные элементы управления необходимо сделать достаточно крупными, неважные — спрятать глубже
Типичным поведением оказалось переключение одного пользователя между 1-3 любимыми видами спорта. Поэтому, мы решили, что лучше с самого начала спросить, какие виды спорта пользователю интересны, сохранить это в его профиле и выводить по умолчанию список игр по выбранным видам спорта (см об этом ниже).
В этом случае контрол выбора спорта теряет важность и уходит глубже в общие настройки фильтрации. Что позволяет сделать важные кнопки перехода к настройкам фильтрации (Filter) и поиску по карте (Map) значительно заметнее и крупнее.
4. Старайтесь выводить данные в формате, который проще для восприятия
Если цена ровная, без центов/копеек, то 00 центов выводить не надо. Если игра сегодня или завтра, то надо так и написать, не заставляя пользователя вспоминать какое сегодня число и день недели.
5. Не заводите пользователя в тупик нулевым результатом выдачи
Если в поиске игр ничего не найдено — выводим лучшие ближайшие корты, где можно создать игру, чтобы пользователь мог исправить ситуацию
Изображение №2: поиск игр, ничего не найдено (выставьте в настройках фильтрации приложения все диапазоны от 0 до 0)
6. Мягко подталкивайте пользователя к нужным вам действиям: If You Don'T Ask, You Don'T Get
Нам хотелось бы, чтобы как можно больше пользователей создавали игры на Топике. Поэтому, в конце ленты с играми, выводим кнопку создания новой игры.
Проблема, которую пока не удалось решить — список игр не дает наглядного представления о расположении игры на карте. Но карта не дает наглядного представления о других параметрах игр, например, дате и времени. Возможно, экраном по умолчанию должен быть не список игр с фотографиями (List), а карта с маркерами (Map). Буду рад услышать ваш совет.
Изображение №3: поиск игр (пролистать в самый конец ленту поиска игр)
Вводные экраны
7. Используйте вводные экраны: минимум текста, максимум наглядности
Чтобы быстро сориентировать пользователя куда он попал, какую ценность он получит от использования приложения, в первый запуск показываем ему два вводных экрана. Экраны намекают, что у нас можно найти игры по разным видам спорта и, что игры можно фильтровать по разным критериям.
Изображение №4: вводные экраны при первом запуске приложения
8. Первый опыт пользователя должен быть классным. Кастомизируйте ваш контент так, чтобы опыт стал как можно класнее
Как только у нас появилось больше 5 видов спорта в одном городе, конверсия с экрана с поиском игр в просмотр конкретной игры стала ниже. Крайне желательно, чтобы список игр, который мы покажем пользователю, был релевантен его предпочтениям. Поэтому, сразу после вводных экранов и запроса прав на определение местоположения, предлагаем выбрать любимые виды спорта, которые уже позже после регистрация запишем ему в профиль.
Раньше мы запрашивали любимые виды спорта уже после регистрации. Выбор до регистрации увеличивает релевантность ленты игр, дает возможность сделать акцент на других более важных элементах интерфейса.
Если пользователь не выбрал виды спорта, то в ленте показываем ему все виды спорта.
9. Упрощайте ввод и выбор опций
После нашей предыдущей статьи на Хабре, многие просили добавить на Топик самые неожиданные виды спорта. Сначала мы боролись с этим и выводили только популярные (иначе выбор вида спорта из огромного списка превращался в кошмар).
Но в итоге сдались и решили просто добавить в список форму для фильтрации по названию. Ничего не введено — показываются все виды спорта, как только начинаем ввод — происходит фильтрация списка.
Изображение №5: Выбор любимых видов спорта (четвертый вводный экран при первом старте приложения)
Запросы прав
Не стоит запрашивать все нужные приложению права пачкой при первом старте. При таком подходе, пользователь не понимает зачем он должен давать их приложению — мы же ничего не объясняем. А отказавшись, дать права уже не так просто, придется довольно глубоко копаться в настройках телефона.
10. Запрашивайте права только перед тем, как они понадобятся
Изображение №6: Запрос прав на отправку push-уведомлений (после первой отправки сообщения кому-либо или после отправки запроса на участие в игре с необходимостью подтверждения записи организатором)
11. Прозрачно доносите, что пользователь получит, дав права
12. Показывайте диалоговое окно iOs только тогда, когда пользователь явно проявляет свое намерение дать права. Давайте пользователю выбор
Например, если пользователь отказывает на пред-запрос прав на определение местоположения, то предлагаем ему ввести город вручную + показываем кнопку с возможностью все-таки дать права.
Изображение №7: Пред-запрос прав на определение местоположения пользователя (третий вводный экран при первом запуске приложения)
13. Если права уже не выданы, то показывайте наглядную подсказку, как их выдать
Изображение №8: Если запрос прав на на отправку push-уведомлений уже был отклонен пользователем, но пользователь на экране изображения №6 нажал на «Notify me»
14. Используйте данные социального графа или другие вспомогательные данные для того, чтобы улучшить опыт пользователя
Пойти на встречу с незнакомым человеком — когнитивно дискомфортная ситуация. Пойти на групповое мероприятие значительно проще, градус неловкости спадает. Если мероприятие спортивное — еще проще. Но самое комфортное — это пойти туда с друзьями или знакомыми.
Данные о том, что трое моих фейсбук-друзей идут завтра рядом играть в футбол, значительно улучшит мой опыт использования приложения. Конечно, не всем приложения помогут данные о социальных связях пользователей. Но, наверняка, есть другие вспомогательные данные, которые вы можете использовать для того, чтобы сделать пользователей немного счастливее.
Изображение №9: Предложение найти зарегистрированных на Топике друзей (появляется на второй день использования приложения)
15. Делайте заметнее данные, которые влияют на совершение пользователем желательных действий
Мы заметили устойчивый паттерн поведения: очень многие перед тем, как записаться, смотрят страницы тех, кто уже записался на игру. Чтобы им было это проще делать, мы увеличили размер фотографий записавшихся. Скорее всего, следующим шагом выведем по каждому записавшемуся другие сводные данные — какой уровень игры, сколько игр сыграл.
Изображение №10: Страница игры (Клик по любой игре в разделе Find a game)
Фильтрация
Реквестирую совет хабравчан: возникла проблема, как дать пользователю возможность поменять список “My activities”, который он вводит при первом запуске приложения. Если он зарегистрированный, то все не так плохо, виды спорта редактируются в профайле. Хоть это и не такой уж очевидный путь, как хотелось бы.
Если незарегистрированный, то все еще сложнее. Возможно, стоит вывести в списке отдельный контрол для редактирования “My activities”. Если пользователь не зарегистрирован, то просить его зарегистрироваться для редактирования. Если зарегистрирован, то отправляем в редактирование профайла. Буду рад услышать ваш совет.
Изображение №11: Фильтр игр (Клик по соответствующей кнопке в разделе Find a game)
16. Не делайте из приложения многофункциональный комбайн, фокусируйтесь на главном функционале
Для основной части пользователей создание игры и добавление площадки не так важно,
поэтому, мы убрали эти кнопки из нижнего бара и выделили их отдельно в меню.
Возможно, позднее мы выделим функционал организатора в отдельное приложение, как это сделал Eventbrite.
Изображение №12: Меню (клик по иконке в левом верхнем углу)
Ну и напоследок доработанная страница регистрации/авторизации:
Изображение №13: Страница авторизации (клик по ссылке «Sign in» в меню)
Практически все вышеуказанные доработки еще пекутся, их пока нет в версии, которая сейчас лежит в апсторе. Прошу хабровчан поддержать нас и посоветовать здесь, что еще мы можем улучшить приложение, а в апсторе — отметить что хорошего уже в нем есть ;)
Для вашего удобства пронумеровал все изображения, чтобы было удобно ссылаться в комментариях. Прописал кратко как попасть на экран в приложении.
