Мы подготовили очередной обзор приложения для Android, содержащий практические рекомендации по улучшению дизайна, архитектуры и эргономичности интерфейса. Сегодня мы поговорим о приложении «Ostrovok». Ранее мы уже рассмотрели приложения «@to Music», «auto.ru», «Pronto» и «ЖД Билеты». Обзоры подготовлены совместно с компанией UsabilityLab.
О приложении
Ostrovok – приложение для поиска и бронирования отелей. С его помощью можно подобрать и забронировать подходящий отель, введя данные банковской карты. Отличительные функции приложения: поиск отелей, находящихся рядом с пользователем, и бронирование отеля на ближайшую ночь в Москве, Санкт-Петербурге и Киеве со скидкой 60%.
Общий рейтинг приложения в Google Play по оценкам 231 пользователя достаточно высокий — 4,3. Большее количество пользователей оценили его функциональность в 5 звездочек.
Судя по отзывам, пользователи хотели бы видеть в приложении больше опций, также есть замечания по интерфейсу:
«У программы слишком мелкий шрифт. Нет возможности увеличить фотографии номера. Не помешали бы отзывы посетителей гостиниц».
Запуск приложения
При первом запуске на экране появляется информация о новой функции «Отель на ближайшую ночь». Однако её трудно заметить, внимание пользователя скорее привлекут три картинки с узнаваемыми видами городов.
Представим, что перед пользователем стояла задача забронировать отель в Санкт-Петербурге на ночь с 21 по 22 сентября. Скорее всего он нажмет на картинку «Санкт-Петербург». Отсутствие какой-либо реакции интерфейса заставит пользователя нажать на картинку несколько раз. И только окончательно убедившись в том, что картинка не кликабельна, он закроет всплывающий экран.
Информация для разработчиков
Проблема |
Критичность |
Рекомендация |
| В всплывающем окне «Новая функция: Отель на эту ночь!» картинки не кликабельны. |  |
Клик по фотографии города должен переводить на форму поиска отеля в выбранном городе. |
Навигация
В руководстве для разработчиков под Android подробно описаны стандарты Navigation Drawer. Но в приложении работают не все паттерны взаимодействия, предусмотренные руководством.
Навигация по приложению организована с помощью Навигационного Меню, которое выезжает слева. Взаимодействие с меню происходит стандартно: нажатием иконки в левом верхнем углу или жестом swipe по экрану. А вот при нажатии на телефоне кнопки «Возврат» приложение закрывается. Такой сценарий станет для пользователя неожиданностью, потому что он предполагает, что это действие вернет его к текущему экрану приложения.
Навигационное Меню. В данном случае мы находимся на экране «Поиск отелей», который предусмотрительно отмечен в меню. И опять недочет – если пользователь по привычке нажмет на значок Навигационного меню еще раз, чтобы вернуться к экрану поиска отелей, то ничего не произойдет. Данный паттерн прекрасно работает в таких популярных приложениях как Facebook и Vkontakte. Пользователи уже привыкли к этому действию, и переучить их будет очень сложно.
Информация для разработчиков
Проблема |
Критичность |
Рекомендация |
| Навигационное меню Navigation Drawer не закрывается с помощью кнопки «Возврат» телефона, вместо этого происходит полный выход из приложения. |  |
По нажатию на кнопку «Возврат» должен закрываться Navigation Drawer и происходить возврат в текущий экран приложения. |
| При нажатии на выделенный пункт Навигационного Меню ничего не происходит. |  |
По нажатию на выделенный пункт меню должен происходить возврат на активный экран приложения. |
Поиск отеля
По умолчанию в форме поиска предустановлены самые частые параметры — это ближайшая дата и количество гостей «Взрослых: 2». При этом у пользователя нет возможности уточнить, сколько номеров нужно для 2-х взрослых: в зависимости от обстоятельств это может быть как один, так и два номера.
По нажатию на «Выбор направления» появляется поле для ввода города и страны. Клавиатура появляется только при нажатии на поле ввода – единственном на экране. Пользователи обычно не хотят совершать лишних действий, поэтому лучше сразу показывать клавиатуру. При вводе в поле «Выбор направления» страны «Россия», в списке появляется несколько городов. Выбираем «Санкт-Петербург».
При нажатии на поле с датами открывается календарь. Когда пользователь выбирает дату, в календаре автоматически выделяется следующее число. Это удобно. Но если пользователь ищет отель на несколько суток, ему нужно использовать жест «удержать и перетащить» (Swipe). Пользователю потребуется время, прежде чем он об этом догадается.
Когда на экране «расхлопнуты» поля «Город» или «Календарь», кнопка «Найти» не видна: она здесь есть, но находится за границей экрана. Чтобы добраться до кнопки, придется прокручивать экран вниз или закрывать календарь.
Вкладки (tabs) «Все отели» и «На эту ночь» находятся на месте меню действий (action bar), из-за чего пользователь не видит названия приложения. Это не критичный недостаток с точки зрения юзабилити, но лучше, чтобы название приложения, с которым работает пользователь, всегда было на виду.
Сравним расположение вкладок в приложении Ostrovok и в руководстве для платформы Android. На скриншоте мы видим правильное расположение Action Bar, меню действий (1) и Tabs, вкладки (2).
Информация для разработчиков
Проблема |
Критичность |
Рекомендация |
| Вкладки (tabs) «Все отели» и «На эту ночь» находятся на месте меню действий (action bar) приложения. |  |
Разместить вкладки (tabs) ниже, под меню действий (action tabs). См. руководство по стилю. |
| Когда разворачивается поле «Выбор направления», клавиатура не появляется автоматически. |  |
Показывать клавиатуру, как только пользователь переходит к этому полю. |
| Для выбора нескольких дней в календаре нужно пользоваться жестом «удержать и перетащить» (swipe). |  |
Поддерживать жест простого нажатия (touch), чтобы пользователь мог выбирать даты двумя нажатиями. |
Результаты поиска
После того как все параметры выбраны и нажата кнопка «Найти», примерно за 1,5-2 секунды приложение находит соответствующие запросу отели в Санкт-Петербурге. При первом взгляде принцип сортировки отелей не понятен: не по цене, не по рейтингу и не по названию. Отели отсортированы беспорядочно.
При просмотре списка отелей у пользователей с ослабленным зрением могут возникнуть проблемы с прочтением адреса отеля и рейтинга отеля, потому что цвет шрифтов сливается с фоном.
Представим себе пользователя, которого интересуют самые бюджетные отели. Он, естественно, предпочел бы отсортировать отели по цене, чтобы в начале поисковой выдачи увидеть нужные ему варианты. По нажатию на иконку Настроек появляется окно с фильтрами и сортировкой.
На экране находится список фильтров для поиска, однако вкладки (tabs) «Фильтры» и «Сортировка» скрывают название приложения. Название приложения всегда должно быть на виду: и с точки зрения удобства пользователя, а также следуя руководству по стилю для платформы Android, tabs должны располагаться под action bar. На скриншоте приведено сравнение экрана приложения Ostrovok и Google Play, где панель вкладок находится под элементом Action bar.
Вкладка «Фильтры» содержит набор настроек. Если поля «Введите название отеля» и «Стоимость (в рублях)» понятны пользователю, то параметр «Расстояние до отеля (в метрах)» совершенно бесполезен, если в данный момент gps не включен. У пользователя нет точки отсчета для применения этого параметра.
Настроив «Фильтры», пользователь начинает искать кнопку, чтобы применить параметры. Но этой кнопки в приложении не предусмотрено. Процесс обработки настроек в «Фильтрах» запускается по нажатию кнопки телефона «Возврат». И это, опять же, совершенно не очевидное действие.
Перейдем на вкладку «Сортировка». Список возможных сортировок сопровождается радиокнопками. После выбора нужных характеристик пользователь ожидает, что приложение вернется к отсортированному списку отелей, но это не происходит автоматически. Здесь опять нужна кнопка «Возврат». Дополнительные неудобства создает и то, что система не запоминает тип сортировки, выбранный пользователем. Приложение не даёт пользователю возможности выбора: запомнить тип сортировки или обнулить.
Представим, что пользователь ищет размещение для двух человек в дешевом хостеле. Его вполне устроит кровать в общем номере на 8-10 человек, целый номер ему не нужен. Однако найти хостелы с таким размещением невозможно, хотя они и есть в системе. А все потому, что в поиске в поле «Количество гостей» было введено 2 человека. В этом случае только некоторые упорные пользователи смогут найти хостелы, догадавшись ввести в поиске «1 гость».
Информация для разработчиков
Проблема |
Критичность |
Рекомендация |
| Невозможно найти дешевый хостел, если пользователь ищет размещение для двух и более человек. |  |
Показывать в результатах поиска варианты проживания в хостелах, где люди размещаются в общих номерах. |
| В результатах поиска шрифт слишком мелкий и недостаточно контрастный. |  |
Сделать тексты более контрастными. |
| Вкладки (tabs) «Фильтры» и «Сортировка» находятся на месте меню действий (action bar) и закрывают название приложения. |  |
Разместить вкладки (tabs) ниже, под меню действий (action tabs). См. руководство по стилю. |
| На экране с фильтрами нет кнопки для применения фильтров. |  |
Добавить кнопку для применения фильтров и возврата к списку отелей. Это может быть кнопка «Применить фильтры» или «Отфильтровать». |
| Приложение не запоминает сортировку, которую установил пользователь в прошлый раз. |  |
У пользователя должен быть выбор запомнить сортировку или обнулить. |
| После клика по типу сортировки приложение не переводит пользователя на отсортированный список отелей, а остается на этом же экране. |  |
По клику на какой-либо вид сортировки, перемещать пользователя на отсортированный список отелей. |
| Сортировка – это функция, которая часто используется, но чтобы до нее добраться нужно сделать 2 клика. |  |
Рекомендуется поставить в меню действий (action bar) прямую ссылку на сортировку результатов поиска. |
| В поле «Расстояние до отеля (в метрах)» не указано, какое расстояние имеется в виду. |  |
Обозначить точку отсчета расстояния. |
Информация об отеле
На странице отеля пользователя в первую очередь интересует расположение, количество звезд, отзывы, стоимость и виды номеров, информация о питании, wi-fi, наличие сейфа и др. Эта информация должна быть представлены в кратком и удобном виде, чтобы текст или символы были понятны.
В приложении есть ряд проблем с отображением информации об отеле. Во-первых, для пользователя не явным остается то, что фотографии отеля можно пролистывать: привычное нажатие на фото не запускает просмотр фотографий.
Судя по обратной связи от пользователей на Google Play, в приложении не хватает отзывов об отелях.
Кроме того, указывается рейтинг отеля без пояснений, по каким параметрам он присвоен.
Описание отеля представлено в виде длинного текста, хотя наиболее эффективным и простым решением будет переход от сплошного текста к легко читаемым спискам.
Информация о номерах находится в самом низу экрана с описанием отеля, вполне вероятно, что пользователь так её и не увидит.
На странице с номерами есть только общая информация, но не хватает подробностей, которые помогут понять отличия предложенных вариантов. Под иконкой «инфо» есть только информация о возможности отмены бронирования. Недостаток информации о номерах и их отличиях иногда приводит к таким казусам: по описанию номера одинаковы, а по цене отличаются в разы.
Когда пользователь нажимает на один из номеров, то, скорее всего, он ожидает увидеть более подробную информацию о номере, но попадает на форму бронирования.
Информация для разработчиков
Проблема |
Критичность |
Рекомендация |
| Пользователь не понимает, как просмотреть фотографии отеля. |  |
По нажатию на фотографии отеля переходить к просмотру фотографий. Также можно слева и справа от фотографии показать фрагменты других фотографий, чтобы пользователь понял, что их можно пролистывать. |
| В приложении нет возможности читать отзывы. |  |
Добавить в приложение возможность чтения отзывов об отелях. |
| Информация об отеле представлена одним сплошным текстом, который трудно читать. |  |
Визуально разбить текст на блоки и сделать его более читабельным. |
| Нет возможности почитать подробную информацию о номерах. |  |
Добавить больше информации о номерах по клику по номеру. |
Бронирование
На первом экране пользователь вводит информацию о себе и контактные данные, на втором экране — реквизиты банковской карты.
Для эксперимента был введен номер карты и CVV, состоящие из одних нулей, однако система не выдала никакой ошибки. А это значит, что она не проверяет корректность ввода номера карты. Система не оповестит пользователя об ошибке и он решит, что бронирование прошло успешно. Таким образом основная и самая главная задача приложения – забронировать отель – не выполняется.
Информация для разработчиков
Проблема |
Критичность |
Рекомендация |
| При вводе несуществующего или неверного номера карты, CVV или других некорректных данных, приложение не сообщает пользователю об ошибке, а напротив говорит, что все хорошо. |  |
Данная проблема может привести к тому, что пользователь, совершив ошибку при вводе данных, потеряет «забронированный» номер. Поэтому важно, чтобы приложение проверяло данные карты до того, как сообщить о результате бронирования. |
Немного о хорошем
На самом деле, некоторые функции приложения достойны похвалы.
- Отели можно добавлять в избранное.
- Есть возможность найти отель на ближайшую ночь, что очень нравится пользователям, судя по отзывам в Google Play.
- При включенном gps пользователь может посмотреть список ближайших отелей.
Таким образом, у этого приложения есть все шансы стать незаменимым помощником путешественников, когда разработчики устранят все текущие юзабилити-проблемы.
Подведем итог
Большинство проблем, найденных в приложении, не столь критичны, чтобы препятствовать бронированию отелей. Но некоторые проблемы значительно снижают функциональность приложения. Начинать нужно с наиболее серьезной проблемы с банковской картой.
Резюме для разработчиков по масштабу критичности всех обнаруженных проблем:
Проблема |
Критичность |
Рекомендация |
| При вводе несуществующего или неверного номера карты, CVV или других некорректных данных, приложение не сообщает пользователю об ошибке, а напротив говорит, что все хорошо. |  |
Данная проблема может привести к тому, что пользователь совершив ошибку при вводе данных, может потерять, как ему кажется, «забронированный» номер. Поэтому важно, чтобы приложение проверяло данные карты до того, как сообщить о результате бронирования. |
| Невозможно найти дешевый хостел, если пользователь ищет размещение для двух и более человек. |  |
Показывать в результатах поиска варианты проживания в хостелах, где люди размещаются в общих номерах. |
| Вкладки (tabs) «Все отели» и «На эту ночь» находятся на месте меню действий (action bar) приложения. |  |
Разместить вкладки (tabs) ниже, под меню действий (action tabs). См. руководство по стилю. |
| Пользователям может быть не понятно, как просмотреть фотографии отеля. |  |
По нажатию на фотографии отеля переходить к просмотру фотографий. Также можно слева и справа от фотографии показать фрагменты других фотографий, чтобы пользователь понял, что их можно пролистывать. |
| В приложении нет возможности читать отзывы. |  |
Добавить в приложение возможность чтения отзывов об отелях. |
| Информация об отеле представлена одним сплошным текстом, который трудно читать. |  |
Визуально разбить текст на блоки и сделать его более читабельным. |
| Нет возможности почитать подробную информацию о номерах. |  |
Добавить больше информации о номерах по клику по номеру. |
| Навигационное меню Navigation Drawer не закрывается с помощью кнопки Возврат телефона, вместо этого происходит полный выход из приложения. |  |
По нажатию на кнопку «Возврат» телефона должен просто закрываться Navigation Drawer и происходить возврат в текущий экран приложения. |
| В результатах поиска шрифт слишком мелкий и недостаточно контрастный. |  |
Сделать тексты более контрастными. По бледно-серому нужно писать более темным цветом, например, черным. |
| Вкладки (tabs) «Фильтры» и «Сортировка» находятся на месте меню действий (action bar) приложения. |  |
Разместить вкладки (tabs) ниже, под меню действий (action tabs). См. руководство по стилю. |
| На экране с фильтрами нет кнопки для применения фильтров. |  |
Добавить кнопку для применения фильтров и возврата к списку отелей. Это может быть кнопка «Применить фильтры» или «Отфильтровать». |
| Приложение не запоминает сортировку, которую установил пользователь в прошлый раз. |  |
Приложение должно запоминать сортировку, которую установил пользователь. |
| После клика по типу сортировки приложение не переводит пользователя на отсортированный список отелей, а остается на этом же экране. |  |
По клику на какой-либо вид сортировки, переводить пользователя на отсортированный список отелей. |
| Когда разворачивается поле «Выбор направления», клавиатура не появляется автоматически. |  |
При разворачивании данного поля сразу же раскрывать клавиатуру. |
| Для выбора нескольких дней в календаре нужно пользоваться жестом «удержать и перетащить» (swipe). |  |
Поддерживать также жест простого нажатия (touch), когда пользователь сможет выбирать начальную и конечную даты двумя нажатиями. |
| При нажатии на выделенный пункт навигационного меню ничего не происходит. |  |
По нажатию на выделенный пункт меню должен происходить возврат на активный экран приложения. |
| В сообщении о новой функции «Отель на эту ночь» фотографии городов не кликабельны. |  |
Клик по фотографии города должен переводить на форму поиска, в которой должен быть установлен выбранный город. |
| Сортировка – это функция, которой пользователи пользуются часто, но чтобы до нее добраться нужно сделать 2 клика. |  |
Рекомендуется поставить в меню действий (action bar) прямую ссылку на сортировку результатов поиска. |
| В поле «Расстояние до отеля (в метрах)» не указано, какое расстояние имеется в виду. |  |
Уточнить, какое расстояние имеется в виду. На данный момент об этом можно только догадываться. |
Developers Relations Team, Google Россия
Автор: Developers_Relations
