Компания
20,77
рейтинг
13 мая 2014 в 15:40

Дизайн → Интерфейс приложения: наши ошибки и 16 советов как их не повторить

Как только мы сделали первую версию 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» в меню)

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

Для вашего удобства пронумеровал все изображения, чтобы было удобно ссылаться в комментариях. Прописал кратко как попасть на экран в приложении.
Автор: @kravets
Topic
рейтинг 20,77
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Комментарии (27)

  • 0
    Оу, квадратики теперь и на айфончике? Выходит Майкрософт права в своих стремлениях?
    • +2
      Так уже давно, вроде как, вместе с выходом 7-й iOS.
  • +5
    А если оба вариантов кажутся одинаково неприятными – это плохо?
    • +4
      Для нас — безусловно. Намекните, пожалуйста, что именно неприятно
      • +3
        Вот, при беглом просмотре экран (правый) вызвал отвращение/неприязнь из-за белого блока со слайдерами. Ощущение, что просто выдрали и вставили, хотя ожидал какой-то переработки.

        image
      • 0
        Ну лично для меню что в первом, что во втором случаем слишком «пёстро». То есть глаза за море деталей цепляются, это как новые игры с офигительной детализацией, а в итоге в общем картинка воспринимается не очень комфортно.
  • +2
    Расскажите пожалуйста, почему несколько слов подряд начинаются с заглавной буквы?
    как тут
    image
    • +1
      Вообще-то это одно из негласных (или гласных не уверен?) правил написания заголовков в английском языке.
      • +1
        Здесь подробнее: Letter case#Headings and publication titles.
        • +1
          А здесь покороче: www.oxforddictionaries.com/words/using-capital-letters

          Язык прессы вообще отличается от обычного английского, ну а заголовки — отдельная тема. Например, вот еще несколько правил, которых стоит придерживаться, и которые сбивают с толку неподготовленного читателя.
          • 0
            Покороче за счет того, что указан только title case (американский стиль заголовков), когда как англичане используют sentence case.
        • 0
          Хорошая ссылка, спасибо.

          The convention followed by many British publishers (including scientific publishers, like Nature, magazines, like The Economist and New Scientist, and newspapers, like The Guardian and The Times) is to use sentence-style capitalization in titles and headlines, where capitalization follows the same rules that apply for sentences. This convention is usually called sentence case. It is also widely used in the United States, especially in newspaper publishing, bibliographic references and library catalogues. Examples of global publishers whose English-language house styles prescribe sentence-case titles and headings include the International Organization for Standardization.

          Although title case is still widely used in English-language publications, especially in the United States, sentence case has been slowly gaining some popularity over title case in recent decades, for several reasons. One is that, in the era of shrinking budgets and profitability for traditional publishing, some production staffs have realized that title case is not lean (it imposes a cost to enforce the rules and exceptions of any particular house style that, because of its arbitrariness, does not add any inherent value to the text). Another is that title case strikes some users as old-fashioned, associated with non-scientific/technical and pre-internet writing style. Such trends may lend a certain fashionableness to sentence case.

          То есть, нормальный стиль заголовков в научной прессе никуда не девался, а в СМИ набирает популярность. Это не может не радовать.
      • –2
        не уверен как правильно используй -(NSString*)capitalizedString с локалью или без неё
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Выше пишут, что это газетный стиль, и то, потихоньку теряющий популярность.
  • 0
    Иконку Settings вырезали с Home screen?))
    • 0
      А вы внимательно скрин посмотрели? )
    • 0
      Вы про изображени №8? Да, вы правы, сделаю аккуратнее, без фона
  • 0
    5-е правило сомнительно:
    Очень бесит когда не понимаешь- то это твои результаты поиска, то ли лабуда какая-то не относящаяся к делу.
    • 0
      Спасибо, учтем
  • +1
    интересно, показательно, спасибо. Область не моя, но как пользователю правильно отюиксенные приложения мне видеть приятно.
    • 0
      Спасибо, будем еще работать над ними :)
  • 0
    Очень интересно, спасибо! Благодаря этому были замечены косяки в нашем приложении, будем исправляться в следующих версиях.
  • 0
    Так же хотелось узнать рекацию пользователей на смену интерфейса, легко ли они это приняли? Если судить по нынешней ситуации на хабре, не все тепло воспринимают координальные смены в интерфейсе.
    • 0
      Пока что новый дизайн не выкатили, хотели получить обратную связь от хабравчан. Будем смотреть, как изменятся конверсии, возможно, это будет темой отдельной статьи.
  • +2
    1. На первом изображении справа, третье предложение (головы торчат). Сложно прочитать кол-во миль и цену. Можно добавить такой же градиент как снизу или тень у текста.

    2. У фильтра иконка от настроек. Посмотрите какая иконка у других приложений или в гугл «filter icon svg».

    3. У предложений нет ясного указания, что за игра. Например, «Lost Altos High pick up game». Можно добавить перед названием («Soccer, Los Altos...»).

    4. Морда кота выбивается из дизайна.

    5. Для веб текст можно смело укорачивать. Было «Sorry, there are no more games. Create your own game: [button]Create a game[/button]». Стало «No more games [button]Create game[/button]».

    6. На изображении №12 текст стоит далеко от иконок.
    • +1
      Евгений, большое спасибо. Ваш комментарий — самый полезный для нас

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Дизайн