{"id":2175,"url":"\/distributions\/2175\/click?bit=1&hash=803b6e1bcbd9dfc4ba9456fda887a878c80d24df8d3a575913b14876e18923a5","title":"TJ \u0437\u0430\u043a\u0440\u043e\u0435\u0442\u0441\u044f 10 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044f \u2014\u00a0\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0430\u043d\u043e\u043d\u0441 \u0441 \u0434\u0435\u0442\u0430\u043b\u044f\u043c\u0438","buttonText":"\u0427\u0438\u0442\u0430\u0442\u044c","imageUuid":"d1d355d8-93a3-5140-aeae-14b03046b760","isPaidAndBannersEnabled":false}
Офтоп
Симуран Ночи

Революция в дизайне интерфейсов или как меня поимел Booking.com

Сразу скажу, что не считаю себя профессиональным дизайнером, у меня нет диплома, хотя с моей помощью две мои подруги написали и защитили свои дипломы в России и Испании, на 4 и 5 соответственно, да и сам я почти каждый день изучаю это сложную науку. Поэтому думаю я могу всё же считать, что с принципами дизайна я знаком, а нравиться заниматься мне им потому что как мне кажется у меня довольно высокий уровень эмпатии, а значит кривой UX и раздражающий UI, я могу почувствовать сразу за многих.

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

И начал я с приложения которое бесило меня больше всего. Нечто подобное испытываешь, когда идешь по улице с хипстерскими заведениями у которых половина бюджета была потрачена на дизайн логотипа и вывески, и на перекресте натыкаешься на «продукты 24» красными буквами, с типичными «бакалея, хлеб, сигареты» тем же полужирным красным Arial’ом.

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

Таким «магазином» было для меня приложение Booking.com. Даже красные и желтые цвета, как в лучших традициях азербайджанских полуподвальных продуктовых. И на это можно было закрыть глаза, 5 лет назад (хотя уже тогда нельзя было назвать дизайн, актуальным или адекватным) когда у ребят не было конкурентов, но сейчас, когда есть OneTwoTrip, отели от Skyscanner и AirBnB, это выглядит как плевок в лицо пользователю, при том что в отличии от хач-маркета у ребят бабки на редизайн есть, и они вообще почти что обязаны делать это.

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

Новая концепция оформления результатов поиска, позволила сделать пару изменений в UX, именно тогда появилась кнопка «найти на карте рядом» минуя, 3 шага для перехода к нужному экрану.

Этот экран я сделал использовав концепцию экрана результатов поиска, что позволило упростить юзабилити на 5 шагов, для каждого отеля рядом. Если раньше, вам надо было открыть приложение - нажать на строку поиска - выбрать отели рядом - нажать на кнопку карты - (нажать на ближайший отель- если цена ему нравиться - оценить фоточки - вернуться на карту и нажать на следующий отель, что бы сравнить с предыдущим) x2-5 раз, то теперь вам осталось только открыть приложение, и все остальное вы можете сделать прямо на стартовом экране (ну или после нажатия кнопки "отели рядом).

А потом пришел он – инсайт.

Зачем тратить энергию для поиска контента, если ты можешь получить его на стартовом экране? Ещё раз. Зачем тратить мою энергию, для того что бы именно я, получил информацию, которая нужна именно мне, когда я могу получить её на моем стартовом экране. П – персонализация.

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

Поэтому для наглядности сегментов я ввел, двух персонажей милую путешественницу Киру и «казанову» Дэвида.

Где на стартовом экране Дэвида сразу будут показывать ближайший отель, основанный на финансовых и эстетических предпочтениях (и прочих данных) Дэвида. Таким образом, юзабилити идеально адаптировано под сегмент людей, которые в 90% случаев ищут отель рядом с собой. А данные об этом у букинга конечно же есть. В дальнейшем с помощью всё того же ML, алгоритмы смогут выдавать, конкретный отель (рядом) оптимальный по всем параметрам.

А у милашки Киры, стартовый экран будет выглядеть по типу еженедельной подборки от Spotify, города в которые сейчас наиболее выгодно и актуально ехать для Киры, по удобству это почти автозаполение поля в поиске гугла. Тут ML, может превратить долгий выбор страны, подбора отелей и билетов, в нажатие 2х кнопок, потому что Big Data уже знает, что и как любите уже лучше вас.

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

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

Но сегодня с утра, в ленте новостей ВК я наткнулся на чей-то редизайн приложения Кинопоиска, я решил поделиться своим видением с товарищем, поскольку у меня был свой редизайн этого приложения где я использовал ту же концепцию Machine Learning Design, или проще говоря персонализацию под сегменты пользователей. А потом дело дошло и до букинга…

Думаю, самые недоверчивые из вас уже проверили приложение букинга, чтобы сравнить мои скриншоты тем что сейчас, и они уже в курсе. Дело в том, что спустя 5 лет стагнации в дизайне приложения в одном из последних обновлений этого месяца Booking.com все же появилась кнопка «найти ближайший отель», совпадение?

Окей согласен, этого маловато, но как насчет того, что на экране поиска текстовые кнопки получили иконки, те самые иконки, которые предлагал я.

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

Больше всего меня интересует, что вы думаете о концепции дизайна, основанного на Big data и Machine Learning? Как думаете увидим мы в ближайшее время её реализацию в Booking.com, потом и в других приложениях? Стоит мне писать про редизайн Кинопоиска или выпить йаду? И насколько вообще автор наивный глупыш или чертов гений?)

0
64 комментария
Написать комментарий...

Комментарий удален модератором

Развернуть ветку
Поперечный кавалер

Боишься напрямую послать нахуй, потому что Лихачев забанит по новому кодексу?

Ответить
Развернуть ветку
Оборонный файл

А там можно самому написать?) Просто на мыло я им отправил, но похоже там и без меня хватает новостей.

Ответить
Развернуть ветку
Драгоценный Кирилл
Таким образом, юзабилити идеально адаптировано под сегмент людей, которые в 90% случаев ищут отель рядом с собой

Откуда цифра? Я не помню ни разу, чтобы я или кто-то из знакомых искал отель рылом с собой. Всегда отели ищешь и бронируешь заранее, из дома. Найти здесь и сейчас - это гораздо менее объёмный сегмент, чем бронирование и поиск заранее. У букинга др недавнего времени для этого сценария было отдельно приложение, как-то называлось типа booking night, или что-то вроде.
Сейчас я его не нашёл. Видимо, встроили функционал в основное приложение.

А сравнивать booking, airbnb и onetwotrip между собой - это как сравнить корову, спорткар и цвет волос. Все эти сервисы делают разные вещи: букинг - поиск отелей, airbnb - поиск квартир/домов у частных лиц, onetwotrip - поиск билетов на самолёт. Как их можно сравнивать между собой?

И я много читал про то, как устроен букинг, на каких принципах строится дизайн и их консервативность - это не нежелание сделать красиво, а эффективность с точки зрения монетизации и конверсии. Они на каждое малейшее изменение на сайте заряжают длительные a/b тесты и по их результатам оставляют лучший вариант, который даёт максимальную эффективность. Да и кардинальная смена дизайна на таком мега-посещаемом сайте - это сильный удар по посетителям. На таких сайтах изменения нужно проводить итерациями и понемногу. Вспомни переделку Кинопоиска или вк и сколько говна было набросано на дизайнеров.

Ответить
Развернуть ветку
Органический дебаркадер

Комментарий недоступен

Ответить
Развернуть ветку
Оборонный файл

"И я много читал про то, как устроен букинг, на каких принципах строится дизайн и их консервативность - это не нежелание сделать красиво, а эффективность с точки зрения монетизации и конверсии."
Главное что бы бабла побольше, а удобно пользователям или нет, неважно! А в хач-маркетах не такая же философия? Забавно, что при редизайне, конверсия тоже может вырасти, из-за того, что контент (в том числе и интерфейс) будет более клиентоориентированным.
"Они на каждое малейшее изменение на сайте заряжают длительные a/b тесты и по их результатам оставляют лучший вариант, который даёт максимальную эффективность. "
Принципы хач-маркета + неповоротливость крупной компании, это уже напоминает Почту России.
"Да и кардинальная смена дизайна на таком мега-посещаемом сайте - это сильный удар по посетителям. На таких сайтах изменения нужно проводить итерациями и понемногу. Вспомни переделку Кинопоиска или вк и сколько говна было набросано на дизайнеров."
У кинопоиска не дизайн поменялся, а фунционал, и батхерт был в том, что пропала половина самых юзабельных функций.
Что касается редизайна вк, ты о каком? Когда вместо стены появился микро-блог?
Хейт к по поводу перемен, даже когда перемены на пользу, это естественно в нашем мире.
Если по поводу последнего обновление, то хейта было не так уже и много, при том, что обновление дизайна даже Павел Дуров назвал неудачным.

Если ещё какие-то моменты кажутся вам нелогичными или непонятными, я с удовольствием попробую вам всё объяснить.

Ответить
Развернуть ветку
11 комментариев
Оборонный файл

Спасибо за такой объемный комментарий попробуем разобраться по пунктам:
"Откуда цифра? Я не помню ни разу, чтобы я или кто-то из знакомых искал отель рылом с собой. Всегда отели ищешь и бронируешь заранее, из дома. Найти здесь и сейчас - это гораздо менее объёмный сегмент, чем бронирование и поиск заранее. У букинга др недавнего времени для этого сценария было отдельно приложение, как-то называлось типа booking night, или что-то вроде."
Это предположение, как есть люди которые слушают Джастина Бибера и русский рэп, или например смотрят Ларина, удивишься насколько их много, и если их нет в твоем окружении это хорошая новость.
"А сравнивать booking, airbnb и onetwotrip между собой - это как сравнить корову, спорткар и цвет волос. Все эти сервисы делают разные вещи: букинг - поиск отелей, airbnb - поиск квартир/домов у частных лиц, onetwotrip - поиск билетов на самолёт. Как их можно сравнивать между собой?"
Легко можно сравнивать) Поскольку если ты сейчас откроешь приложение OneTwoTrip обнаружишь, что у них уже давно реализован поиск отелей, а на AirBnB уже половина обьявлений по Питеру это хостелы как и в букинге. Сорян, бро опять мимо)

Ответить
Развернуть ветку
5 комментариев
Технологический чайник

Комментарий недоступен

Ответить
Развернуть ветку
Оборонный файл

У меня нет приложения ТЖ, но если интересно могу попробовать)

Ответить
Развернуть ветку
Драгоценный Кирилл

Да и где в статье сравнение в виде картинки исходного макета и дизайна приложения букинга, который якобы слизал детали предложенного автором дизайна?

Ответить
Развернуть ветку
Оборонный файл

Лучший пруф, то сравнить скрины букинга который был 2 месяца назад (они в статье есть), с тем букингом который сейчас на вашем андроиде.
Конкретно стартовый экран, и экран результатов поиска.

Ответить
Развернуть ветку
3 комментария
Удобный рубин

Так ничего и не слизали, по крайней мере в андроиде. Тем более за 1.5 месяца это едва ли возможно.

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

Ответить
Развернуть ветку
4 комментария
Богатый торшер

Я устала нажимать контрол+энтер и править этот грамматический пиздец.

Ответить
Развернуть ветку
Экологический алмаз

Что бросилось в глаза при беглом просмотре макета:
— название компании bold'ом — зачем?
— огроменная лупа, прилипающая к краям инпута больше, чем текст
— подписи в инпутах дат слишком прилипают к левому краю
— куча отцентрированных элементов (1 ночь, Номер и тд)
— маленькая кнопка "Поехали" — это же основной CTA элемент на странице, он должен занимать максимум места
— из-за мелкой кнопки "Поехали" весь блок с кнопками отцентрирован
— цена без указаняи валюты и отбивки разрядов
— надпись "скидка n%" в сниппетах мелкая, а должна быть заметная, иначе пользователь не поймёт, что цена низкая
— с рейтингом такая же беда
— когда смотришь на 2 сниппет в выдаче стикеры сливаются
— очень-очень маленькие кнопки Сортировки/Фильтры для тача в выдаче

Ответить
Развернуть ветку
Оборонный файл

похоже вы не прочитали первый абзац текста))
Идея была не вылизать UI, а предложить новую концепцию UX)
Но за критику спасибо)

Хотя некоторые ваши слова звучат очень сомнительно)
Например, "маленькая кнопка "Поехали" — это же основной CTA элемент на странице, он должен занимать максимум места". Вам самим эта строчка странной не кажется?))
Особенно в эпоху социальных сетей, когда кнопка отправить сообщение занимает не то, что максимум пространства, а скорее минимум.
А ваш принцип отлично подходит для хач-маркетов, на которых обязательно написано "сигареты, вино и т.д." хотя эти продукты и так в каждом магазине, продаются.

Что касается других пунктов спорить не буду.

Ответить
Развернуть ветку
2 комментария
Удобный рубин

Не убедил.

Ответить
Развернуть ветку
Смешной Валера

Я не очень люблю писать про грамотность, но в тексте какая-то беда с запятыми. Статья большая, и при чтении волей-неволей начинаешь обращать внимание на ошибки.

Ответить
Развернуть ветку
Валютный шар

Комментарий недоступен

Ответить
Развернуть ветку
Приличный Слава

Там не только запятые, там вообще с русским жопа
Но текст в целом не вполне шлак, есть зерно

Ответить
Развернуть ветку
Драгоценный Кирилл

Там ещё и неоднократное "нравиться"

Ответить
Развернуть ветку
Оборонный файл

Прошу прощения, за запятые, это моя беда, не понимаю как они работают.

Ответить
Развернуть ветку
Изящный мангал

Есть видео как тебя....?

Ответить
Развернуть ветку
Немой месяц

Ну ты бы ещё свои очевидные всем идеи патентовал, как это эппл делает

Ответить
Развернуть ветку
Оборонный файл

Блин, мне по большому счёту всё равно, на то что они уже сделали) Пускай я только рад, что удобней стало пользоваться миллионам людей.

А вот если они используют ту концепцию о которой я рассказал и присвоят её себе, я расстроюсь, но хотя бы буду знать, что несколько сотен читателей, будут знать чья идея.

Ответить
Развернуть ветку
4 комментария
Оборонный файл

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

Ответить
Развернуть ветку
Удобный рубин

Это все, что у тебя якобы украли?

Ответить
Развернуть ветку
8 комментариев

Комментарий удален модератором

Развернуть ветку
Валютный Женя

Нуу не знаю. Все эти типа нейтрально-синие дизайны надоели. Желтый может и не самый лучший выбор, но точно лучше однотонного.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Оборонный файл

об этом в статье написано, раньше для этого нужно было сделать 3 клика, теперь один.

Ответить
Развернуть ветку
Читать все 64 комментария
null