Концепт приложения Booking.com под iOS 7

    Выход iOS 7 стал важным этапом для всех мобильных разработчиков. Из-за новой стилистики, гайдлайнов и логики все приложения часто нужно полностью перепроектировать под новую ось. Если Tweetbot, Instagram (кроме иконки), Facebook, Linkedin уже обновились, то множество других популярных приложений застряли в эре скевоморфизма.
    image
    Мы в e-Legion проектируем, рисуем и разрабатываем под iOS 7, а в свободное время размышляем, как можно было бы улучшить приложения, которыми пользуются миллионы людей. В этом посте наш ведущий дизайнер Анна Kuchuganova расскажет и покажет, какие проблемы есть у самого известного приложения для бронирования отелей Booking.com. Для наглядности будут спроектированы основные экраны с пояснением выбранных решений.


    Дальше идет прямая речь.

    Любая статья должна начинаться с эпичной истории. Однажды я застряла во Вьетнаме… :) Срочно нужен был отель на одну ночь, интернет был очень медленный и, в панике пролистывая список отелей в букинге на телефоне, я абсолютно не понимала, на какой отель стоит переходить, а на какой нет. Еще тогда появилось желание навести порядок в этом приложении. Приступив к концепту, я сразу решила уделить основное внимание проектированию и внешнему виду информации и проработать основной кейс — просмотр списка отелей.

    Список отелей


    Взаимодействие начинается с того, что приложение просит ввести данные для поиска отелей. С точки зрения UI здесь проблем нет, продумано хорошо, ничего лишнего. Только дизайн выглядит несовременно, но это проблема в целом всего приложения.
    image
    Что мы имеем? В пространстве ячейки есть неприятная белая дыра под маленькой фотографией. Информация перечисляется друг за другом и очень пестрит, у каждой строчки свой стиль, большой акцент на цену — разумно, однако дальше много всего намешано. Не понятно, что такое «Потрясающе, 8.5», звезды и палец вверх? Нет, вообще ясно, что у отеля хороший рейтинг или отзывы, но почему для этого нужно выносить сразу 4 характеристики и в разные места ячейки? На экран моего 4S влезает всего 2,5 ячейки, в целом неплохо, но можно ведь и больше. Описательный текст, который заканчивается многоточием и практически всегда повторяет то, что уже написано выше.

    Начинаем думать. Первое, на что обращает внимание пользователь, когда делает выбор тапнуть/не тапнуть — фотография и цена. Соответственно, я внутренне запрещаю себе уменьшать размер фотографии, и ставлю микроцель ее увеличить, если будет такая возможность. Оставляем акцент на цену. Что еще важно? Конечно, расстояние, звездность отеля, отзывы пользователей. И этого достаточно, чтобы сделать выбор, продолжать просматривать или нет.

    Начинаем верстать. Примерно после часа передвижений в иллюстраторе, я нахожу приятную компоновку. Отзывы и расстояние снабжаю иконкой. Фотографию удалось увеличить (я прижала ее к краям, ячейка постройнела, но при этом здесь много «белого
    пространства» которое помогает пользователю/читателю легче воспринимать информацию). Кстати, для отчаянных визуалов, таких как я, приложения Airbnb и iHotel предлагают вот такую компоновку ячейки.
    image
    В Airbnb фотографии можно еще и пролистывать прямо в ленте. Это супер! Но давайте исходить из того, что у нас есть: нужно создать гармоничную ячейку, информация на которой воспринимается легко. И еще момент: я всегда мечтала, чтобы мне сообщали, цена указана за сутки или за все дни? Радоваться мне этой цене или расстраиваться и листать дальше? Вот что получается:
    image
    Тратим еще немного времени на то, чтобы посмотреть, как ячейка смотрится в общем списке. В экран iPhone 5 влезает минимум 4 ячейки, в iPhone 4 влезает 3 штуки, учитывая, что нам нужно разместить еще кое-какие элементы интерфейса.

    Очень часто дизайнеры любят набрать один текст, вставить одну картинку и везде дублировать их. Это дурной тон. Очень полезно вставлять в макеты реальный контент, это поможет избежать массы неприятных сюрпризов при сборке.
    image

    Займемся верхним баром. Понятно, что будем использовать стиль iOS 7. Но суть не в стиле, он может быть любым, важно грамотно проработать представление информации. Например, локализация Booking выносит в заголовок экрана запрос пользователя, это правильно, но неправильно то, что основная информация зачастую не влезает в бар — оптимизируем. Город, числа, количество гостей, всё отлично уместилось крупно в 2 строки. Переходим ко вкладкам, здесь я использую дефолтные. Загадка, почему многие кастомизируют элементы интерфейса (и не всегда удачно), в то время, как платформа предлагает вполне достойный их внешний вид.
    image
    Я намеренно не вынесла количество отелей в Navigation Bar (верхний), считаю, что этой информацией можно пренебречь, тем более что сам Booking предлагает отличное решение — показывать количество просмотренных/общее количество на полупрозрачной плашке при скролле. Это удобно, своевременно и экономит пространство. Поиск тоже не включен в верхний состав, потому что это и не поиск вовсе, а часть фильтра (сортировка по названию отеля). К тому же не хотелось «утяжелять» верхнюю часть экрана.
    image
    Дизайн iOS7 — это не только новые контролы и «плоский стиль», но и анимация. Мне кажется, по мере того, как всё больше приложений будут использовать анимацию и физический движок iOS7 (UIKit Dynamics), приложения без них будут выглядеть для пользователя всё более пресными. Поэтому я предлагаю добавить вот такую анимацию при просмотре списка, выглядит чисто и лаконично.
    image

    Фильтры


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

    • видеть, что фильтр влияет на выдачу;
    • быстро его сбросить.

    В приложении Booking фильтры, сортировка и валюта расположены внизу, на синем баре, который притягивает к себе внимание. Решение мне нравится, но реализовано топорно. Задачу усложняет то, что у нас 12 фильтров, а это немало. Я перерыла Dribbble и Behance в поисках примеров классных решений по фильтрам, однако ничего достойного не нашла. Если у вас вдруг есть на примете приложение, где хорошо реализована фильтрация, поделитесь, пожалуйста!

    У меня в голове давно зрел вариант с маленькими стикерами, которые можно было бы редактировать по тапу и легко удалять по крестику — удобно! Пытаюсь применить его здесь. Смотрится неплохо, но тут же осознаю, что такой вариант нам не подойдет, фильтров слишком много, и они будут уезжать при скролле. Этот вариант хорош, когда параметров 2-3-4. Выкидываем в корзину!
    image

    Тут мне попадается приложение Ebay для iOS и приятно удивляет. Сортировка, добавление в избранное и внешний вид списка объединены с поиском, сами фильтры вынесены под бар. Они скроллятся влево/вправо и отмечаются синим, если активны. Смело! Однако, полностью модальности избежать не удалось. Всех примененных фильтров всё равно не видно и возникает небольшая путаница, редактировать каждый фильтр в одном месте или отдельно? Да и не нужно пользователю постоянно видеть параметры, он помнит, какой отель он ищет.

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

    image
    Сам фильтр тоже требует небольшой уборки: ячейки и шрифты «скачут». Тяжело воспринимать разом такой большой список, поэтому я разбила его на небольшие группы. К тому же, чтобы установить ряд параметров, например цену или расстояние, можно избежать перехода на новый экран.
    image
    В текущем приложении можно нарваться на забавный «баг»: когда пытаешься подвинуть левый ползунок, настойчиво открывается боковая навигация. В новой оси жест от края экрана это переход на предыдущий экран (ссылка на developer.apple.com). Поэтому я располагаю слайдеры чуть дальше от краёв. Эту проблему, кстати, можно решить программно (увеличить тапабельную область слайдера и сделать так, чтобы лишние жесты не срабатывали поверх него). Этот момент нужно будет протестировать отдельно.

    image

    Страница отеля


    Беремся за последнюю страницу — страницу отеля. Начнем с навбара, разумная идея — вынести туда название отеля, а не безликое «отель». Затем я более плотно верстаю первый блок и освобождаю место для крупных фотографий с пролистыванием. Это выглядит эстетически приятно и сразу располагает к себе, не нужно совершать лишних нажатий. На сайте букинга есть картинки с разным соотношением сторон. С вертикальными превью можно поступать так: зумить по ширине и вырезать прямоугольник по центру. По тапу можно посмотреть фотографию целиком.
    image
    Дальше всё просто — грамотно сортируем информацию. Я размышляю так: если пользователя устраивает цена и внешний вид, он уже частично готов совершить бронь и подкрепляет (или наоборот) свое решение, читая отзывы и уточняя детали. Цена->Параметры (чтобы можно было поиграть с ценой)->Описание. «Поделиться» в нынешнем приложении оформлен как обычная ячейка. Но это действие, а не переход. Потому я считаю нужным вынести шэринг в виде иконки на нижний бар, рядом с «Добавить в избранное», так как это действия одного типа.

    Итог



    увеличение по клику

    Целью данного поста было сжато продемонстрировать, что несмотря на всю субъективность, дизайн может и должен быть удобен для любого пользователя. И добиться этого можно совсем небольшими временными затратами — на всю работу было потрачено около 10 часов. Разобранные экраны, безусловно, можно реализовать по-другому, либо вовсе переделать с нуля. Важно было показать направление мысли.

    С нетерпением ждем обновленного официального приложение Booking.com под новую операционную систему. Наверняка там будут использованы какие-то новые интересные решения, благо возможности iOS 7 позволяют.
    e-Legion
    Делаем приложения, которыми пользуются миллионы

    Similar posts

    Comments 36

      +5
      а вы эти предложения в booking то послали? :)
        0
        Ждем реакции их PR-отдела)
        +4
        В целом симпатично, но очень плохо, что вы выпилили рейтинг цифрами. Я намного больше ему доверяю, чем абстрактным «хорошо», да и места меньше занимает.
          0
          Внутри его всё еще можно посмотреть :) Хотелось сократить количество показателей для первичного выбора. У меня совсем не было данных, поэтому для примера остались отзывы.
          +10
          Вот если бы вы хоть раз сами пользовались этим приложением, а не смотрели на картинки, то знали бы, что самый неприятный косяк — это автозаполнение данных карты вместе с данными о брони так, что можно легко клацнуть по кнопке и оформить бронь на сегодня вместо желаемой даты. Дизайн должен начинаться с выявления таких вещей, а не рисования градиентов.

          И да, я уже пару раз так влёгкую попал, и отправил тикет в Букинг.
            –4
            Я сама ни разу не пользовалась, но один знакомый рассказывал :)
            +7
            Мне кажется слабо продумали список отелей, например: как будет выглядеть ячейка если цена будет в рублях: 18 535,95 рублей за сутки, куда уедут звездочки (если их пять), и как будет выглядеть строка с ценой за 7 ночей? Весь «красивый» дизайн нужно всегда демонстрировать с реальными данными, предпологая самое худшее.
              0
              Я мало знаком с версткой под IOS, но нельзя ли звездочки в этом случае прятать/переносить на следующую строку? В общем использовать адаптивность?
              0
              Сглаживание шрифтов страдает на макетах.
                +4
                Мне кажется, что прятать кнопку «Назад» очень-очень неправильно

                image
                  –1
                  в iOS 7 переход назад осуществляется свайпом слева на право.
                    +2
                    Тут дело даже не в кнопке назад, а в том, что конкретно в этом примере прячется полезная информация – параметра поиска. Особенно если забываешь к середине списка что именно ты искал (а такое у меня, например, часто, когда нет точных дат, я только планирую поездку). Назад то легко попасть, но вот обратно вперёд в середину списка быстро не попадёшь – надо заново жать поиск и прокручивать в середину.
                      0
                      Знаю, но зачем тогда там вообще кнопка «Назад»?
                        +6
                        Многие пользователи iOS не знают, что можно листать назад слайдом.
                        Многие пользователи iOS не знают, что можно удалять ячейки из таблицы слайдом.
                        Многие пользователи iOS не знают, что можно растягивать на iPad клавиатуру жестом.
                        Многие пользователи iOS не знают, что боковое меню обычно вытягивается слайдом.
                        Многие пользователи iOS не знают, как набрать с клавиатуры 'ё' или '–'
                        Многие пользователи iOS не знают, что при повороте экрана может поменяться количество или характер выводимой информации в приложениях.
                        Многие пользователи iOS хотят просто пользоваться приложением и взаимодействовать с ним привычным способом.
                          +1
                          Так я согласен, с тем, что не знают. Потому и намекнул, так сказать. То есть прятать кнопку назад и говорить о том, что есть свайп и пользуйтесь им — неправильно, по описанным вами причинам. И я люблю кнопку назад, она для меня удобней чем свайп.
                            –1
                            Вы передираете: не знают, так покажите при первом заходе в приложение.

                            Так можно сказать, что и мультитачем не знали как пользоваться — это же не повод не внедрять мультитач. Или, что обновить, нужно свайп вниз по списку сделать.
                              +1
                              Всё равно не узнают. Всё равно будут ставить негативные отзывы, если не оставить привычных им кнопок.
                              Если смотреть с точки зрения разработчика, то интерфейс должен быть удобным для подслеповатого глухонемого пользователя с сосиской на каждой руке вместо пальцев (тогда мы не получим негативной связи и плохих отзывов).
                              Но для гика мы должны дать возможность использовать жесты и т.д. (тогда мы получим позитивные отзывы).
                              Кнопка back и слайд, обычная клавиатура и растянутая, допускать 'е' вместо 'ё', редактировать ячейки слайдом и добавлять кнопку 'Редактировать' для всей таблицы
                              Жесты надо внедрять (там где уместно), но это не должен быть единственный способ сделать что-либо.
                          +1
                          Очень-очень неправда.
                          Половина приложений использует сайд бар и вообще, переход свайпом назад слишком неочевиден.
                          Кнопка «Назад» должна быть.
                          0
                          Сафари так делает, так что мне кажется это будет привычно пользователю IOS7, мне было-бы привычно
                            0
                            Да, сафари действительно так делает, но вот он меня этим каждый раз в тупик и ставит.
                              +1
                              Сафари так делает, чтобы предоставить пользователю как можно больше места под контент (веб страница, видео и т.д.).
                              В случае прокрутки списка бессмысленно прятать navigation bar.
                              Может это было добавлено, чтобы использовать UIKit Dynamics, но к сожалению он для других эффектов.
                            0
                            А может в вас говорит консерватизм? Даже хром не побоялся скрывать кнопку назад, а это ведь браузер, где вы совершаете этот переход в разы чаще. Меня подобные решения приводят в восторг, ведь на экране мобильного телефона так мало места. Да, многие пользователи не знают о жестах, но это не значит, что не нужно продвигаться дальше, спустя поколения, все равно узнают!
                            +5
                            Вы знаете, выглядит свежо, но столько непродуманных вещей для того, кто первый раз откроет приложение в вашем дизайне. Только на первый взгляд:
                            1. Потеряли общее количество найденных отелей — это все же важная информация — выбираете вы из пяти предложений или из 2000 — на компьютере понятно хотя бы из пагинации или высоты страницы. На телефоне — непонятно вовсе.
                            2. «за сутки» — дублируется у каждого отеля непонятно зачем
                            3. Расстояние в км — это расстояние от чего и до чего? Скачет по ширине — логично его выключить направо.
                            4. Логично показывать общую стоимость всего проживания, а не цену за сутки, если уж вы задали даты и количество людей.
                            5. Как показывать специальные предложения букинга? Типа «умное предложение» и все такое? Кстати «белая дыра» под фотографией именно от этого и это не дыра вовсе.
                            6. «Палец вверх» без подписи — это лайк, а не сортировка по рейтингу.

                            Ну и дальше — очень много всяких вопросов — например, если вы рисуете три синие звезды из пяти серых, то это выглядит как оценка, а не как звездность отеля.
                              +1
                              1. Нет, не потеряли, я отдельно написала, что положение в списке и общее количество отелей высвечивается при скролле — отличное, на мой вкус, решение.
                              2. Да, пожалуй, я бы убрала, но даже среди комментаторов этой статьи много «забывашек»
                              3. Да, актуально когда ищешь на месте, а выключка — вкусовщина.
                              4. Согласна и писала об этом :)
                              5. «белая дыра» в оригинале не для этого, все предложения выстраиваются в столбик. В моём варианте для особых случаев чуть переверстывается ячейка. Я не считаю нужным всё пихать в общий список, что-то можно показать и внутри, так чище, свободнее и понятнее.
                              6. Можно подумать над более удачной метафорой, согласна. Звезду использовать нельзя, стрелочка растущая вверх?

                              В общем, есть еще над чем поработать! Спасибо вам за комментарий и дельные замечания.
                              +3
                              У меня выработался четкий алгоритм поиска в букинге и просмотр фотографий стоит там далеко не на первом месте потому, что является «уязвимым местом выбора»: фотки могут быть неудачными, неинформативными или наоборот, слишком гламурными или просто фотками самых дорогих номеров в отеле.
                              Они ничего не скажут о шумности и запахах в номере, работе кондея и санузла.
                              Зато обо всем этом прекрасно расскажет количество оценок, «звезды» и отзывы пользователей.
                              Поэтому сначала я строю выборки/сортировки, позволяющие просмотреть лучшие варианты по критериям «много оценок/высокий рейтинг/хорошие отзывы/приемлемые цены» и только потом идут фотки. Соответственно исходя из такой user story делал бы акценты в интерфейсе. :-)
                                +1
                                Хороший дизайн)

                                Пара комментариев с точки зрения iOS — разработчика:

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

                                2. Вам нужно продумать цвет нажатых элементов, например избранное.

                                3. Свайп с левого края экрана можно отключить в случае необходимости.

                                А так все здорово, понравилось.
                                  +2
                                  3. Свайп с левого края экрана можно отключить в случае необходимости.


                                  Мне кажется, это не очень хорошая идея — отключать system-wide жест для навигации. Гораздо лучше — адаптировать свои интерфейсы так, чтобы с ним ничего не конфликтовало.
                                    0
                                    Согласен с вами, однако как это сделать в случае Facebook-style меню, которое по умолчанию открывается именно таким жестом? Это кстати большая проблема данного контрола в iOS 7.
                                      +1
                                      Тут есть много вариантов:

                                      — перенести его вправо (то есть, оно будет открываться свайпом в другую сторону)
                                      — попробовать использовать жест только в рамках экрана с небольшим паддингом (в то время, как для навигации используется жест как-бы из-за левого края экрана)
                                      — выключать жест открытия меню, когда мы идём вглубь стека навигации, и включать обратно, когда этот стек состоит только из текущего экрана (т.е. переход «назад» неактуален)
                                      — отказаться от сайд-меню в пользу других интерфейсных решений

                                      Вариант же с целенаправленной поломкой общепринятого способа навигации с целью оставить кастомное решение мне кажется в корне неправильным :)
                                        +1
                                        Согласен, системные жесты лучше оставлять такие, как они есть. Что характерно, сами Фейсбук уже прибрали это меню из своего приложения, заменив на таб бар =) Теперь у них свайп только с правой стороны экрана. Возможно, меню с левой стороны уже доживает свои последние дни на iOS.
                                  0
                                  Удалено
                                    0
                                    Мне нравятся такие разборы интерфейсов.

                                    Я всегда читаю описание отеля, а в вашем дизайне оно потерялось.
                                    Пусть описание всегда будет рядом с фотографиями, это единственный текст, который написан для людей.
                                      +1
                                      Значок доллара принято писать до суммы, а центы отделять точкой! "$258.70 за сутки" смотрится куда органичней, чем «258,70 $ за сутки».
                                        +1
                                        Насколько я знаю, знак валюты перед суммой принято ставить только в США и Великобритании, в остальных странах сначала идет сумма, а только потом уже знак валюты.
                                        0
                                        image

                                        Правильнее такой порядок:
                                        — название места
                                        — рейтинг места
                                        — цена

                                        К тому же сейчас название места имеет самый большой визуальный вес, а по иерархии лишь 3-е сверху.

                                        «За сутки» не стоит выделять как цену. Я бы вообще написал: "$435/сутки".

                                        Звезды можно показать все 5 (часть серыми), чтобы было ясно из скольких звезд состоит максимальная оценка.

                                        Сейчас рейтинг вообще над названием и возле цены. Похоже на оценку стоимости, а не места.

                                        image
                                        Когда мы ищем поиск, то лучше, когда он находится вверху, чтобы быстро нам помочь. Иначе надо просмотреть всю страницу до самого низа, чтобы его найти

                                        image
                                        Я еще не занимаюсь мобильными приложения и гайдлайнов не знаю, но, наверное, метки поиска слишком мелкие и неудобные. Очень трудно будет не задеть соседей
                                          +1
                                          Тем временем вышло реальное обновление данного приложения под iOS 7. Ваш дизайн в некоторых местах лучше дизайна реального приложения.

                                          Only users with full accounts can post comments. Log in, please.