Мы гордимся своими дизайнерами — это крутые ребята, которые проектируют удобные и стильные интерфейсы и создают дизайн приложений для путешествий. Но мы не дадим универсальных рекомендаций. Никто не сможет дать, а если попытаются — ошибутся. В дизайне нет правильного и неправильного, есть только то, что нужно в каждом уникальном случае.
Вам говорят, что есть идеальный интерфейс и правильные советы, которые выстрелят в 10 из 10 случаев? Такого нет, а кто говорит — не прав. UI/UX интерфейсы намного глубже, чем «в топе dark mode — делаем dark mode, он всем нравится».
Мы поступим немного по-другому. Вместо того, чтобы утверждать на правильности какого-либо решения и настаивать на своей правоте — поделимся тем, что и как делать точно не надо. Я, вместе с Юлей Тихий-Тищенко, вторым лид дизайнером в Purrweb, поделюсь вредными советами в UI/UX дизайне приложения для путешествий. Расскажу, что нужно сделать, чтобы разочаровать пользователя и провалиться на рынке.
1. Океаны текста
Чем больше текста — тем лучше. Текста должно быть очень много, ведь пользователям интересна каждая деталь. Текст не структурирован? Прекрасно, это лишнее — пользователь будет читать все подряд, не нужно его отвлекать какими-то заголовками и абзацами.
Будет большим плюсом, если куча текста не будет подкреплена визуалом. Они так же как и заголовки только отвлекают внимание и занимают ценное пространство, в которое можно добавить еще больше текста. Особенно это не нужно делать в приложениях для путешествий — человек лучше прочитает, как прекрасен пляж на Бали, чем посмотрит фотографии.
Пользователю редко нужно много текста, чтобы принять решение, например покупать тур или нет, бронировать жилье или нет. В приложении для путешествий упор лучше делать на визуале, чем на тексте. Вы хотите больше почитать о месте, в котором думаете отдохнуть, или посмотреть фотографии? Бронируя жилье, вы в первую очередь прочитаете описание или посмотрите фотографии?
Если текст структурированный, короткий и подкреплен визуалом — вы молодцы, потому что помогаете пользователю обратить внимание на то, что ему интересно. Визуал помогает тексту, но может и заменять его. Если что-то можно показать, а не рассказать — так и поступите.
2. Стоковые фотографии
Если нужны фотографии для проекта — смело идите на фотостоки. Лучше брать бесплатные, потому что платить за фотографии — глупо, тем более когда есть хорошие бесплатные альтернативы.
Прежде чем говорить о минусах стоковых фотографий, что вообще это такое? Стоковая фотография — это изображение, которое продается (или предоставляется бесплатно) на общедоступных площадках. Стоковая фотография — неплохая вещь, но когда ты создаешь новый продукт — лучше их не использовать. Особенно бесплатные, потому что: 1) это такие себе фотографии, 2) их можно увидеть на каждом втором сайте.
Платные стоковые фотографии уже не такие распространенные, поэтому их можно использовать, если других вариантов нет. Но в целом, когда ты путешествуешь по приложениям и сайтам, видишь одни и те же фотографии — это не вызывает у тебя доверия. Лучшее решение — съездить с фотографом на место, отснять классный материал и обработать. Это будет необычно и привлечет внимание.
Примеры фотографий, которые сделали наши заказчики для проекта
Но вариант со своими фотографиями не без минусов, это дорого и не всегда осуществимо. На недавнем проекте заказчики предоставили свои фотографии. Они организовывают уникальное путешествие по одному и тому же маршруту. Поэтому проблемы сделать свои фотографии не было.
3. Отсутствие акцентов
Если в визуале нет акцентов — дизайнер еще не идеален, но уже на правильном пути. Идеальный вариант — много сухой информации и отсутствие каких-либо точек внимания. Акцентировать какие-то детали нежелательно, особенно если это касается цены — человек сам найдет то, что ему нужно, потому что кто ищет, тот всегда найдет.
Акцентировать детали нужно. Суть дизайна не просто в эстетичности, но еще в удобстве. Человек не будет искать то, что ему нужно. Он пользуется вашим продуктом, чтобы решить свою проблему. Если вы не поможете ему это сделать — ваш продукт отправится в мусорку, а приложение конкурентов — вам на замену.
Много акцентов — тоже плохо. Когда все подряд привлекает внимание, то человек не может сфокусироваться на чем-то действительно важном. Излишки акцентов провоцируют отсутствие акцентов.
Если объяснять на примере, то на одном из недавних проектов мы сделали акцент на цене, фотографиях и маршруте. Проект предлагал отправиться в путешествие в Австралию. Заказчики самостоятельно организовывают тур и наши дизайнеры отрисовали маршрут, по которому отправятся желающие.
Заказчики хотели, чтобы все было ярко и подсвечено. Мы убедили их, что нужно сделать акценты только на важных вещах, потому что человек все читать не будет. Если его что-то зацепит — прочитает, а делать акценты на всем подряд — верная дорога в никуда.
4. Качество фотографий
Если и добавлять фотографии в визуал, то только самого лучшего качества, 4К Ultra HD. Люди офигеют от качества, смогут детально рассмотреть каждый уголок картинки и на 100% насладиться изображением.
Тот случай, когда нужно придерживаться золотой середины. Желательно не брать как фотографии плохого качество, так и высокого. Чем лучше качество изображения, тем сильнее это замедляет загрузку. Мы в основном стараемся брать изображения с разрешением 1920×1080. Если брать еще лучше — люди офигеют не от картинок, а от времени загрузки контента.
Слишком пиксельное изображение — не нормально. Это выглядит не презентабельно. Иногда приходится брать такие фотографии, например когда не получается найти в хорошем качестве или нет возможности сделать самим. Иногда выбора нет и приходится идти на жертвы. Так, на одном проекте мы с трудом смогли найти изображение отеля: дизайнер перерыл кучу ссылок и чудом нашел фотографию, но в ужасном качестве.
5. Обязательно яркие картинки
На главных экранах часто можно увидеть сочную картинку. Хорошая практика — люди любят яркие изображения. Идеально будет сделать так, чтобы фотография сливалась с текстом, который не будет видно на ее фоне. Поэтому изображение светлых оттенков прекрасно сочетается с текстом белого цвета. И не думайте, что картинка должна сочетаться с текстом в смысловом плане — ставьте самое красивое изображение, которое только найдете.
Часто можно увидеть одни и те же ошибки: 1) картинка не соответствует по смыслу тексту, 2) нет контрастности. Если у тебя картинка с голубым небом, то белый текст чаще всего будет сложно считываться. Главная страница должна зацепить человека и донести до него определенный месседж. А отсутствие контрастности все убивает. Мы не говорим, что текст не должен быть белого цвета. Нужно позаботиться о контрастности, чтобы текст хорошо читался и соответствовал изображению.
Мы знаем, как сделать хорошую контрастность и читаемый текст, а когда есть сомнения — берем специальные инструменты. Есть такая штука, называется WCAG. Это рекомендации по доступности веб-контента. Может прозвучать сложно, но мы не будем сильно углубляться и остановимся на контрастности.
Мы проверяем сочетание оттенков инструментом WCAG Contrast Checker, но не стоит доверять ему на 100%. Так, он отказывается пропускать белый текст на голубом фоне или даже ярко-синем фоне, хотя текст нормально считывается. Пропускает только темно-синий, но интерфейсы не всегда должны быть темными для хорошего контраста.
Нужно аккуратно использовать сочетание светлых оттенков из-за проверки контраста. Для инпутов подойдет, но текст лучше не делать белым. Мы используем сервис не за тем, чтобы откинуть возможно неподходящие цвета. Основная польза — убедиться, что таких сочетаний нужно использовать меньше в интерфейсе. WCAG — не закон, а предостережение.
6. Фильтры
Есть 2 проверенных варианта. Первый — не делать фильтры. Не нужно все разжевывать человеку. Если он хочет отправиться в путешествие — найдет сам. Второй — сделать максимально подробный фильтр с акцентом на каждой позиции. Какой вариант вы бы ни выбрали — оба правильные. Тут уже дело вкуса.
С фильтрами сложно, потому что не всегда очевидно, нужны ли они. Конечно, если вы предлагаете одну услугу — очевидно, вам не нужен фильтр. А если вы предлагаете больше одной услуги? Обычно фильтры нужны, но сложно не уйти в крайности. У одних приложений для туризма нет фильтров, у других они перегруженные. Последние сильно раздражают — когда перед тобой куча позиций, то тебе быстро надоедает их заполнять.
Когда я нажимаю на фильтр — я не должна видеть много позиций. Это пугает и отталкивает, складывается впечатление, что все нужно обязательно заполнить. Должны быть только основные позиции. Как правило, это цена, формат тура и, возможно, дата.
Есть отдельная категория педантичных людей, которые хотят и будут заполнять каждую позицию в выборе тура. Им нужно много критериев, чтобы все было учтено. Золотая середина — простой фильтр с несколькими позициями с возможностью открыть больше критериев. Если человек хочет подробный фильтр, нажмет на кнопку расширенного подбора, если нет — он просто не будет нажимать не нее.
7. Сложная навигация
Кто сказал, что навигация должна быть удобной? Конечно нет, она должна быть необычной, интересной и нагруженной. Забудьте о правиле 3 кликов — нужно устроить пользователю незабываемое путешествие по приложению. Не знали об этом правиле? Не берите в голову, очередная глупость, которая не стоит вашего внимания. А если вы еще сделаете везде одинаковые кнопки — целевая аудитория будет в восторге!
Допустим, я пользуюсь приложением для путешествий, например бронирования жилья. Мне оно нравится, я нахожу дом, в котором хочу жить во время отпуска, и начинаю искать кнопку «Забронировать». Но не могу ее найти. Как долго я буду искать кнопку, прежде чем выйду и удалю это приложение? Спойлер: недолго.
Часто кнопок в интерфейсе много и они не отличаются друг от друга — все главные, нет первичных и вторичных кнопок. Пользователю приходится разбираться, а какая кнопка забронировать, а какая позвонить. Внешний вид кнопки определяется тем, как она используется, какое действие выполняет. Так, кнопка «Забронировать» должна больше привлекать внимания, чем кнопка «Поделиться».
Один из вариантов — зафиксировать кнопку. Когда пользователь скроллит приложение, то кнопка всегда у него под рукой. В любой момент он может на нее нажать, что бы ты ни делал — кнопка всегда на одном и том же месте.
8. Отзывы и впечатления
Последнее, что нужно добавить в приложение — возможность делиться впечатлениями. Вся информация о туре есть в описании, отзывы людей будут лишними. Плюс человек может оставить негативный отзыв, который испортит другим впечатление о туре. Если вы все-таки дали пользователям такую возможность — удаляйте негативные отзывы, а хорошие можно написать самому.
Дать людям возможность делиться впечатлениями о туре — хорошая идея. О чем как не о путешествии хочется поделиться и рассказать другим? Удалять негативные комментарии — плохая практика, которую любят применять не только небольшие компании, но и лидеры рынка.
Реальные отзывы подкрепляют то, что вы рассказали о туре, и вызывают доверие. Но есть критерий объективности, когда человек специально говорит неправду, портя репутацию компании или продукта. Хотя даже в таких случаях можно ответить, что усилит доверие к бренду. Но если негативный комментарий правдив, то лучше принести извинения и разрешить ситуацию, а не банить всех подряд, потому что все не удалишь.
Другой момент — когда человек бронирует номер в трехзвездочном отеле и думает, что сервис будет на 5 звезд. В любом случае важно поддержать коммуникацию с человеком, объяснить ему, что он не прав или искренне принести извинения.
9. Выбор цвета
Для каждой ниши есть «правильные» цвета. В дизайне приложении для путешествий лучшие цвета — зеленый, оранжевый, красный и синий. Эти цвета универсальны для любого трэвел приложения и всегда будут в тему. Сочетайте их как угодно, главное — цвет должен быть динамичным, побуждающим и активным. А еще лучше выбирать цвет, основываясь на своих предпочтениях, нравится вам = нравится всем.
Каждый цвет и оттенок вызывает определенный сигнал в голове у человека. Но это не значит, что для той или иной отрасли бизнеса есть «правильные» цвета, и только их нужно брать. Представьте: один банк запускает свое приложение. Для продуктов в финансовой сфере рекомендуют (или уверяют в правильности) брать синий и его оттенки. Но если ваши конкуренты уже используют синий?
Дело в том, что нет правильного или неправильного цвета. Синий и зеленый ассоциируются с безопасностью, но это не единственный фактор выбора цвета. Какой посыл вы хотите донести до целевой аудитории. Хотите выделиться на фоне других брендов? Хотите, чтобы целевая аудитория ассоциировала цвет с вашим приложением? Или с отраслью в целом? Перед тем, как следовать каким-то рекомендациям, ответьте на эти вопросы — вам будет легче определиться с цветом.
10. Выбор шрифта
Тут все просто — берите самый трендовый шрифт и применяйте его везде — в заголовках, подзаголовках и как наборный. Если вам кажется, что шрифт смотрится скучновато — разбавьте его какой-нибудь классической гарнитурой. Это будет изюминкой интерфейса, которое отличит вас от конкурентов. Часто можно увидеть в заголовках модные, сложно читаемые шрифты. Не отставайте от этой тенденции, пользователи такое любят.
Как правило, главное требование в интерфейсе — шрифт должен быть разборчивым. Хороший дизайнер разбирается в типографике и понимает, как пользователь читает. У типографики интерфейсов свои особенности. Так, в модном дизайне антиквы и акцидентные шрифты будут неуместны, это будет смотреться как готический дом в центре Токио.
Экспериментальные шрифты почти не встречаются в интерфейсе — нужно потратить много времени, чтобы подобрать общую стилистику под шрифт. Такие шрифты чаще встречаются в графическом дизайне, когда фокус смещается с читаемости на эстетичность.
Наш с Юлей любимый шрифт — San Francisco. Мы часто его используем: буквы просто различить друг от друга, и в целом он хорошо читается. Это уже классика — хороший шрифт для интерфейсов. Его минус в том, что он не ставится на Android, поэтому часто на разработке приходится искать замену. Еще часто берем Inter, Poppins и Lato. Последние два нестандартных шрифта нужно применять аккуратнее, потому что они не всегда уместны и не всегда хорошо считываются.
Один и тот же шрифт не обязательно использовать в каждой части текста, комбинировать — хорошее решение. Если боитесь ошибиться в сочетании разных шрифтов — используйте суперсемейства. Это сгруппированные вместе гарнитуры, например семейство Roboto со шрифтами Roboto, Roboto Slab и Roboto Mono. Вариант еще проще — сервис fontjoy.com, который сгенерирует удачное сочетание шрифтов.
11. Интеграции
Что, если мы скажем, что интеграции не нужны? Не верите? Отбросьте сомнения, интеграции — это ненужная ерунда, которая только перегружает дизайн интерфейса мобильного приложения. Мы настоятельно рекомендуем не использовать интеграции. Вы же запускаете свой продукт, на кой вам какие-то сторонние сервисы?
Интеграции нужны почти в каждом проекте. Интеграции для сбора лидов, данных, онлайн оплаты, авторизации через социальные сети, CRM или CMS… Этот список можно продолжать долго, приложений и сервисов, которые можно интегрировать в свой продукт, тысячи. Чаще всего мы делаем интеграцию с платежными сервисами, например Stripe или braintree.
В дизайне приложении для путешествий актуально будет подкрутить интеграцию с Google картами. Помимо очевидной функции навигации, сервис будет отображать много информации: рестораны, бары, музеи, кинотеатры, прайсы и время работы заведений, отзывы и рейтинг.
Aviasales, например, сделали вполне логичную интеграцию. Когда нажимаешь на поиск билетов — у тебя автоматически открывается букинг. Это логично, что тебя кидает на сервис, где ты сразу можешь забронировать жилье, пока ищешь билет.
Несколько советов напоследок (не вредных)
Мы подготовили несколько подходящих решений для UI/UX дизайна приложения для путешествий. Без вредной части, сразу к полезному:
— Офлайн режим. Не всегда он нужен. Но если приложением в теории можно пользоваться без интернета, то стоит позаботиться об офлайн режиме. Так, в Google переводчике можно скачать языковой пакет, чтобы было не обязательно иметь доступ к интернету, если нужно воспользоваться переводчиком.
— Заметки. Это больше относится к приложениям по планированию путешествий. Удобно, когда ты можешь быстрыми заметками все отписать, чтобы все мысли сохранялись и ничего не забывалось.
— Рекомендация ближайших мест. Фича, которая сделает планирование маршрута еще удобнее. Допустим, решили вы сходить в музей, о котором давно слышали. Приходите — музей закрыт. Что делать? Идти домой без настроения или открыть приложение, посмотреть рекомендации ближайших мест и посетить другое заведение?
Утверждать, что одно правильно, а другое нет — невежественно. Есть фундаментальные UI/UX паттерны, которые дизайнеру нужно понимать, но не слепо применять их. Мы поделились ошибками, которые даже в 2021 году встречаются довольно часто. Рассказали, что мы думаем и применяем в работе в каждом случае. Но мы не говорим: «Делайте как мы». Проанализируйте и подумайте, как будет лучше поступить в вашем случае.
Есть более важные вещи, чем рекомендации и проверенные паттерны. Хороший UI/UX дизайнер знает, как спроектировать привлекательный и удобный интерфейс. Крутой дизайнер думает о пользователях, их желаниях и чувствах, умеет донести до целевой аудитории нужный посыл и знает, какое решение будет лучшим в каждом конкретном случае.
