Дизайн приложения для бронирования отелей: редизайн главного экрана, до и после

Главный экран приложения для путешествий должен сначала заставить человека захотеть куда-то поехать, а уже потом о чём-то его спрашивать. Первый вариант ниже делает наоборот: открывается формой из четырёх полей, перечисляет направления простыми словами и размазывает одну цену на шесть строк. Исправленная версия сохраняет все функции и меняет только порядок того, что вы видите.

Весь экран, до и после

Черновик джуна

Исправлено

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

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

Исправление 1: задайте вопрос, уберите слоган

До

После

«Исследуйте мир, найдите идеальное жильё с нами!» рядом с сердечком и колокольчиком, против «Куда дальше?» рядом с колокольчиком с точкой.

Слоган на главном экране написан для компании. Вопрос написан для человека с телефоном в руке, и он прямо указывает на карточку поиска под ним. «Куда дальше?» ещё и спросил бы друг, а это именно тот тон, который нужен приложению для путешествий.

Сердечко ушло из шапки, потому что у сохранённых мест уже есть своя вкладка. Колокольчик остался, с точкой, когда есть что-то новое: снижение цены или изменение брони единственное, ради чего стоит отвлекать.

Исправление 2: одна карточка поиска, даты и гости в виде чипов

До

После

Четыре поля друг под другом (направление, заезд, выезд, гости) и оранжевая градиентная кнопка, против одного поля направления с чипами «14 по 16 нояб.» и «2 гостя» и круглой кнопки со стрелкой.

Форма из четырёх полей просит человека принять все решения, не увидев ни одного места. Большинство тех, кто открывает приложение, к этому не готовы: они просто смотрят. Форма на треть экрана для них стена.

Даты и гости редко меняются от поиска к поиску, поэтому в исправленной версии они показаны чипами со сменяемыми по умолчанию значениями, которые можно нажать, если нужно поменять. Печатать нужно только направление. Пара заезда и выезда стала одним чипом, «14 по 16 нояб.», потому что никто не воспринимает поездку как две отдельные даты.

Исправление 3: показывайте места, а не названия

До

После

«Лиссабон, Киото, Кейптаун, Бали, Париж» в виде серых текстовых плашек, против фото-плиток Лиссабона и Киото со страной под каждым названием и следующей плиткой, выглядывающей с края.

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

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

Исправление 4: одна цена за проживание

До

После

Маленькая миниатюра со значком -30%, пять звёзд, город, зачёркнутые $320, $224 за ночь, «+$38 налоги и сборы» и два зелёных преимущества, против большого фото с рейтингом 4,8, названием, «$224 ночь» и «Лиссабон, бесплатная отмена».

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

Исправление показывает одно число и одну деталь. Фото больше, потому что продаёт проживание именно фото. Деталь выбрана та, что снимает больше всего тревог: бесплатная отмена, а рейтинг заменил пять нарисованных звёзд числом, которое можно сравнивать.

Мелкие исправления

• Четыре вкладки, а не пять. Обзор, Сохранённое, Поездки и Профиль. «Главная» и «Обзор» слились в одну вкладку, «Обзор», потому что главный экран и есть место, где происходит исследование.
• Слова, которыми говорят люди. «Вишлист» стал «Сохранённым», а «Бронирования» стали «Поездками»: так на самом деле говорят путешественники.
• Один акцент. В черновике оранжевый градиент был у кнопки, зелёный у преимуществ и красный у скидок. В исправленной версии действия чёрные, а цвет приносят фотографии.
• Короче названия. «Grand Riviera Resort & Spa» на карточке стало «Grand Riviera Resort», чтобы название помещалось в одну строку рядом с ценой.

Проведите аудит своего приложения для путешествий

Скачайте файл Figma

В бесплатном файле оба экрана собраны как компоненты, каждое исправление показано парой «до и после», а ещё есть переменные цвета и текстовые стили iOS.

Бесплатный файл Figma

Главный экран бронирования отелей, до и после

Оба экрана и каждая исправленная часть как компоненты Figma. Бесплатно, только просмотр, продублируйте к себе в черновики.

Открыть в Figma

FAQ

Что должен показывать первым главный экран приложения для бронирования отелей?

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

Как показывать цены отелей в приложении?

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

Показывать ли в приложении для путешествий направления фотографиями или текстом?

Фотографиями. Люди выбирают места визуально, а плитка, обрезанная у края экрана, показывает, что ряд прокручивается, без дополнительных элементов управления.

Сколько вкладок должно быть в приложении для бронирования?

Четыре или пять. Объединяйте любые две вкладки, ведущие в одно место, и называйте вкладки словами путешественников, например «Сохранённое» и «Поездки».

Источники

• Оба экрана наши собственные, разработаны и размечены в Figma.
• Фотографии с Unsplash: Vali Sachadonig, Zion C, Asher Pardey, Roberto Nickson и Travis Chen.
• Правило FTC о недобросовестных или вводящих в заблуждение сборах, охватывающее краткосрочное проживание, вступило в силу 12 мая 2025 года.
• Впервые опубликовано как карусель в App Brainy.