Компания
39,56
рейтинг
23 ноября 2012 в 15:38

Разработка → Мобильное приложение Ostrovok.ru для бронирования отелей

Привет, меня зовут Евгений Селезнев (evgenyseleznev), я дизайнер и руководитель команды мобильной разработки в Островке.

Мы в компании Ostrovok.ru недавно выпустили мобильное приложение для бронирования отелей по всему миру. В нем мы постарались преподнести богатый функционал в удобном интерфейсе. Как был устроен процесс работы, расскажу подробнее.

На данный момент есть два основных продуктовых направления в мобильных приложениях по бронированию отелей:
1. стандартный поиск отелей через выбор направления, дату и т. д. В некоторых сервисах учитывается местоположение пользователя, чтобы найти отели рядом с ним;
2. last minute booking — бронирование на ближайшую ночь из специальных предложений отелей. Некоторые стартапы, используя только эту модель, уже стали успешными.

Задача


Сделать простое и удобное приложение для поиска и бронирования отелей.

Исследование


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



Понимаем, что механика практически одна и та же — стандартный поиск отелей через выбор направления, дат, отзывов и т. д.

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

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

Процесс


Чтобы понять общую механику, рисуем скетчи, варфреймы, бумажные прототипы. По ходу определяемся с несколькими ключевыми вещами:
1. Нижний таббар нам не нужен, потому что у нас нет равнозначных разделов, которые действительно стоит показывать на всех экранах. К тому же дополнительные 49 (96@2x) пикселей никогда лишними не будут.
2. Поскольку телефон все-таки выполняет функцию удовлетворения потребностей в режиме «здесь и сейчас», то добавляем поиск отелей по текущему геоположению пользователя и делаем его по умолчанию.



Определившись с функционалом, приступаем к отрисовке экранов.

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



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

Левая верхняя кнопка по умолчанию зарезервирована на включение бокового меню, менять ее нельзя. Верхняя правая подойдет либо под включение/выключение карты, либо фильтры с сортировкой. Перебрав много вариантов, останавливаемся на фильтрах с сортировкой. Включение карты делаем при помощи смахивающего жеста сверху вниз (аналог Pull Down to Refresh).

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

На карту добавляем кнопку определения текущего местоположения.



Фильтры и сортировки
Если с экранами поискового запроса проблем не возникло, то с фильтрами и сортировкой пришлось повозиться. Первую мысль «раз одна кнопка, то и экран один» отгоняем сразу. Фильтры и сортировка — разные сущности. Вариант с кнопками для переключения не очень нравится, мы, по-прежнему, за минимализм и лаконичность.
Делаем псевдокнопку, которая переключает экраны, с точками-индикаторами как на домашнем экране.



Карточка отеля
Следущий экран по сложности после СЕРПа — это карточка отеля. Мы перебрали кучу вариантов: от «полного фарша» на одном экране до нынешнего минималистичного. На данный момент, это один из немногих экранов, который мы будем переделывать и значительно улучшать.



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



И все остальное
Добиваем экранами с избранным, «О программе», «Позвонить в Островок», различными ошибками, пустыми экранами и интеграцией с Пассбуком.



Добавляем детали, рисуем иконки, наводим лоск и выдыхаем.



Ссылка на App Store: itunes.apple.com/ru/app/ostrovok.ru/id564204730?mt=8

P.S. Кстати, если вы из приложения расшарите информацию о нем в Фейсбук или Твиттер, то получите 1000 рублей на счет.
Автор: @Ostrovok
Ostrovok.ru
рейтинг 39,56
Реклама помогает поддерживать и развивать наши сервисы

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

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

  • +3
    Отличное приложение, молодцы. Сразу видно, поработали над интерфейсом.
  • +1
    Круто. Планируете под Android?
    • +1
      Спасибо! Да, уже скоро.
    • +1
      делаем прямо сейчас, ага )
      • 0
        Простите, я за 10 минут до конца раб дня в пятницу уже туго соображаю. Это сарказм был? =)
        • +1
          Нет, это был не сарказм. Вовсю разрабатываем.
          • 0
            Буду мониторить появление в маркете. Ибо скоро как-раз предстоит путешествие в какое-нибудь эдакое местечко =)
  • +1
    Фильтры и сортировки
    «Расстояние до отеля» -> «Расстояние до центра» всё же, если мне не изменяет память.

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



    • 0
      В жизни это выглядит несколько иначе. На экране с фильтрами — это индикация для перелистывания (как home page controls), а на страницах бронирования — это последовательные шаги. Анимация нам помогает это увидеть.
  • –1
    Был я в Гипножабе, да… хороший город и гипноотели…
  • +1
    Как пользователь и как человек, который по долгу работы рассматривает сотни приложений еженедельно, хочу сказать спасибо за умный дизайн. Приложение на 5+, удачи!
  • 0
    42 ребенка

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

Самое читаемое Разработка