О#nbsp;том, что приложение отличное, говорит не#nbsp;количество загрузок и#nbsp;установок, а#nbsp;число активных пользователей. На#nbsp;это влияет UI/UX дизайн. Мы#nbsp;хотим, чтобы каждое приложение было успешным, но#nbsp;давать универсальные советы в#nbsp;этой области#nbsp;— отважное дело. Люди могут принять их#nbsp;за#nbsp;прямое руководство к#nbsp;действию и#nbsp;не#nbsp;согласиться, начнут спорить и#nbsp;низко оценят статью.
Наши специалисты знают свою работу. Под руководством экспертов они проводят аудит и#nbsp;редизайн различных сервисов, проектируют удобные и#nbsp;современные прототипы приложений и#nbsp;сайтов. Но#nbsp;и#nbsp;они, и#nbsp;кураторы не#nbsp;могут дать на#nbsp;100% универсальных рекомендаций. Их#nbsp;не#nbsp;существует. А#nbsp;если вы#nbsp;знаете такие, пожалуйста, поделитесь в#nbsp;комментариях.
Во-первых, каждый сайт и#nbsp;приложение отличаются. Во-вторых, в#nbsp;UI/UX дизайне бывает непросто следовать каким-то общепринятым правилам. Нет такого, что раз в#nbsp;тренде новый минимализм, то#nbsp;все должны делать приложения с#nbsp;белым фоном и#nbsp;минимальным количеством элементов в#nbsp;оформлении, ведь это гарантированно сработает. Нет, скорее сработает знание своего продукта и#nbsp;пользователей.
Поэтому мы#nbsp;решили поступить иначе и#nbsp;рассказать о#nbsp;плохих решениях в#nbsp;UI/UX дизайне приложения для#nbsp;поиска жилья. Гораздо лучше знать, что и#nbsp;как не#nbsp;стоит делать, и#nbsp;при создании своего продукта ориентироваться на#nbsp;это. Познакомьтесь с#nbsp;нашим топом ошибок, из-за которых можно потерять пользователей.
1. Долгий онбординг и сложная навигация
Не#nbsp;важно, скачал пользователь приложение впервые или уже знаком с#nbsp;ним#nbsp;— каждый раз при входе проводите его через несколько слайдов онбординга. Хорошо, если в#nbsp;них будет побольше анимации#nbsp;— пусть не#nbsp;отвлекается и#nbsp;постоянно смотрит на#nbsp;экран. Так он#nbsp;потратит больше времени и#nbsp;по-настоящему поймет ценность приложения.
Удобная навигация и#nbsp;правило 3-х кликов не#nbsp;нужны. Пусть экран будет похож на#nbsp;лист Excel, где нужно просмотреть все строки и#nbsp;блоки, чтобы найти то, за#nbsp;чем пришел пользователь. Необычная и#nbsp;запутанная навигация#nbsp;— это увлекательное путешествие, которое лучше познакомит его с#nbsp;приложением. А#nbsp;если вы#nbsp;разместите в#nbsp;интерфейсе много одинаковых кнопок, не#nbsp;ранжируя их#nbsp;на#nbsp;первичные и#nbsp;вторичные#nbsp;— это только подчеркнет вашу креативность и#nbsp;профессионализм.
Люди часто нетерпеливы и#nbsp;хотят получить доступ к#nbsp;приложению максимально быстро и#nbsp;без каких-либо преград. Здорово, когда туториал запускается лишь при регистрации, а#nbsp;пользователь при желании может пропустить ненужную информацию с#nbsp;помощью соответствующей кнопки.
Чем важнее блок, тем выше он#nbsp;должен быть расположен. Открыв приложение по#nbsp;поиску и#nbsp;бронированию жилья, пользователь должен сразу увидеть то, за#nbsp;чем пришел#nbsp;— каталог. А#nbsp;в#nbsp;каталоге легко найти кнопку «Забронировать». И#nbsp;при этом не#nbsp;спутать ее#nbsp;с#nbsp;другими кнопками. Часто мы#nbsp;фиксируем ее, чтобы человек скроллил список и#nbsp;в#nbsp;любой момент, когда найдет апартаменты или отель, который ему понравится, мог ее#nbsp;нажать.
2. Обилие текста
Разместите на#nbsp;странице как можно больше текста, чтобы пользователь получил максимум информации. Не#nbsp;стоит делить текст на#nbsp;блоки, делать заголовки и#nbsp;абзацы, пусть наслаждается сплошной неотформатированной «стеной» из#nbsp;предложений#nbsp;— так поместится больше полезного контента.
Отдельное удовольствие#nbsp;— длинные текстовки мелким шрифтом. Они увеличивают время нахождения пользователя перед экраном. После прочтения первой строки ему придется лететь взглядом ко#nbsp;второй. Во#nbsp;время этих перелетов он#nbsp;забудет, на#nbsp;чем остановился. Придется возвращаться и#nbsp;вспоминать, что#nbsp;же было написано вначале#nbsp;— бинго.
Массивные блоки текста не#nbsp;подкреплены визуалом? Отлично#nbsp;— на#nbsp;свободном месте можно разместить еще текст. В#nbsp;приложениях для#nbsp;поиска и#nbsp;бронирования жилья это тем более не#nbsp;нужно. Люди лучше прочитают и#nbsp;представят, как выглядит 2х комнатная сталинка в#nbsp;Строгино или отель на#nbsp;первой линии в#nbsp;Сочи, чем посмотрят фото.
Поставьте себя на#nbsp;место пользователя. Вы#nbsp;хотите быстро найти подходящие апартаменты, понять, нужно#nbsp;ли бронировать номер в#nbsp;гостинице, или бесконечно скроллить массу текста?
Когда приложение перегружено текстом, человек легко теряет свое внимание. Здорово, когда текст емкий, с#nbsp;выстроенной иерархией и#nbsp;подкреплен визуальным контентом#nbsp;— так можно легко сориентироваться и#nbsp;быстро найти то, что заинтересует. В#nbsp;приложениях для#nbsp;поиска и#nbsp;бронирования жилья изображения дополняют и#nbsp;раскрывают суть текста, а#nbsp;иногда могут и#nbsp;заменять его.
Не#nbsp;стоит забывать и#nbsp;про расстояние между строками. Когда мы#nbsp;работаем с#nbsp;интерфейсами в#nbsp;Figma, часто используем настройку Line height 130%, не#nbsp;ниже. Конечно, нет точного правила#nbsp;— только 130% и#nbsp;все. Это зависит и#nbsp;от#nbsp;шрифта (ведь они бывают разные по#nbsp;высоте), и#nbsp;от#nbsp;длины строки. Но#nbsp;130−150% используем чаще всего.
3. Выбор изображений
Если у#nbsp;вас нет реальных фотографий для#nbsp;приложения, и#nbsp;вы#nbsp;не собираетесь их#nbsp;покупать, используйте стоковые. Их#nbsp;легко можно найти на#nbsp;общедоступных платформах типа Unsplash. Есть бесплатные и#nbsp;платные варианты. Плюсы очевидны#nbsp;— не#nbsp;нужно тратить время на#nbsp;создание уникального контента. При этом фотографии не#nbsp;обязательно должны быть концептуальными и#nbsp;полностью отражать суть приложения, главное#nbsp;— красота.
Современным пользователям все сложнее угодить, они ожидают от#nbsp;приложений определенного качества. Поэтому в#nbsp;визуал стоит добавлять фотографии с#nbsp;самым высоким разрешением и#nbsp;низкой пикселизацией#nbsp;— 4К Ultra#nbsp;HD. Так люди смогут детально рассмотреть каждый уголок номера в#nbsp;отеле и#nbsp;на#nbsp;100% проникнуться сервисом.
Никто не#nbsp;запрещает использовать стоковые изображения. Но#nbsp;нужно понимать, что не#nbsp;только вы#nbsp;будете это делать. В#nbsp;результате они могут встречаться на#nbsp;каждом втором сайте и#nbsp;его мобильной адаптации. К#nbsp;тому#nbsp;же сейчас людям хочется реальных эмоций и#nbsp;реальных фотографий. Наигранные фото с#nbsp;приукрашенными деталями могут отпугнуть, вызвать недоверие.
Отлично, если заказчики могут предоставить свои фотографии. Еще лучше#nbsp;— взять фотографа и#nbsp;самим классно отснять варианты апартаментов, отелей и#nbsp;хостелов для#nbsp;приложения. Доверие к#nbsp;сервису повысится, ведь это не#nbsp;какое-то непонятное изображение, а#nbsp;реальная квартира или гостиница#nbsp;— то, что как раз ищут пользователи. А#nbsp;еще уникальный контент для#nbsp;главного экрана и#nbsp;каталога#nbsp;— необычно, не#nbsp;как у#nbsp;всех. Минус с#nbsp;в#nbsp;том, что это дорого и#nbsp;далеко не#nbsp;всегда осуществимо.
Что касается качества изображений, то#nbsp;слишком высокое разрешение сильно замедлит загрузку страницы. Фотографии с#nbsp;пикселями и#nbsp;не в#nbsp;фокусе#nbsp;— тоже ошибка. Вы#nbsp;когда-нибудь пытались разобрать, что находится на#nbsp;пикселизированном изображении на#nbsp;экране смартфона? Это нелегко. Поэтому оба варианта#nbsp;— откровенно плохой пользовательский опыт. Лучше выбирать фотографии с#nbsp;разрешением 1920×1080.
4. Неподходящие иконки
Иконки#nbsp;— самая легкая часть дизайна, декоративный элемент. Сделайте их#nbsp;крутыми, остроумными и#nbsp;разнообразными, чтобы пользователь запомнил ваш креатив. Сочетайте прямоугольные символы с#nbsp;закругленными, меняйте радиус угла, размеры и#nbsp;ширину линии.
В#nbsp;приложении иконки часто являются эквивалентом кнопок. Чтобы пользователь понял, какое действие он#nbsp;совершит с#nbsp;помощью каждой иконки, они должны быть понятны всем, подходить друг другу и#nbsp;поддерживать единый стиль приложения.
Мы#nbsp;подходим к#nbsp;выбору бесплатных иконок строго избирательно, используем векторы SVG и#nbsp;часто создаем иконки самостоятельно, чтобы улучшить восприятие.
5. Точки фокуса и контрастность
Смело делайте приложение визуально однородным. Размещайте как можно больше сухого текста без каких-либо акцентов. Можно выбрать и#nbsp;другой вариант#nbsp;— красивый интерфейс, в#nbsp;котором подсвечены абсолютно все моменты. Пусть акцент будет на#nbsp;всем, все важно.
Уменьшайте текст до#nbsp;8 пикселей#nbsp;— так он#nbsp;лучше помещается в#nbsp;горизонтальном пространстве. Используйте светлый оттенок серого#nbsp;— он#nbsp;ведь так эстетично выглядит. Размещайте красивую яркую фотографию с#nbsp;ярким текстом на#nbsp;ней или светлую#nbsp;— со#nbsp;светлым.
Точки фокуса, контраст между цветом фона и#nbsp;написанным контентом не#nbsp;так важны. Главное#nbsp;— запоминающийся дизайн, а#nbsp;как решить свою проблему с#nbsp;помощью приложения, люди разберутся.
Отсутствие акцентов, как и#nbsp;их#nbsp;множество#nbsp;— плохая практика. Пользователь потеряется в#nbsp;однообразии или запутается в#nbsp;обилии жирных шрифтов и#nbsp;ярких призывов, не#nbsp;найдет быстро то, что ему нужно, удалит приложение и#nbsp;скачает другое у#nbsp;конкурентов.
Главное в#nbsp;UI/UX дизайне#nbsp;— сделать интерфейс максимально удобным и#nbsp;дать решение проблемы. К#nbsp;примеру, в#nbsp;приложении для#nbsp;поиска жилья мы#nbsp;решили сделать акцент на#nbsp;цене, фотографиях и#nbsp;отзывах реальных пользователей. Именно на#nbsp;основании этих параметров люди чаще всего принимают решение о#nbsp;съеме квартиры или бронировании номера.
Вы#nbsp;сами пробовали хоть раз открыть приложение с#nbsp;низкой контрастностью в#nbsp;дизайне на#nbsp;ярком солнце? Это#nbsp;же максимально неудобно. Приходится прикрывать экран рукой, отходить в#nbsp;тень или придумывать что-то еще, чтобы прочитать текст или просто выйти из#nbsp;приложения.
Поэтому мы#nbsp;часто:
используем высококонтрастный цвет для#nbsp;CTA;
по-разному раскрашиваем модальные окна и#nbsp;фоновое содержимое, чтобы они были более заметными и#nbsp;привлекали внимание;
делаем достаточный контраст между текстом и#nbsp;фотографией, чтобы информация легко считывалась;
С#nbsp;точки зрения#nbsp;UI дизайна для#nbsp;каждой сферы и#nbsp;тематики стоит использовать свою цветовую гамму. В#nbsp;приложении для#nbsp;поиска жилья это зеленый, синий, оранжевый, красный и#nbsp;их#nbsp;оттенки. Они вызывают позитивные ассоциации#nbsp;— изобилие, безопасность, спокойствие, энергия, страсть#nbsp;— и#nbsp;побуждают человека проникаться симпатией и#nbsp;доверием к#nbsp;приложению. Другие цвета использовать нельзя, они будут не#nbsp;в#nbsp;тему.
Также можно спокойно полагаться на#nbsp;собственные предпочтения и#nbsp;выбирать цвета, которые нравятся именно вам. У#nbsp;дизайнеров хороший вкус и#nbsp;творческое видение#nbsp;— это главное.
Грамотный подбор цветовой гаммы#nbsp;— важный UI/UX фактор. Уже давно известно, что цвет влияет на#nbsp;выбор человека, и#nbsp;этим успешно пользуются маркетологи. Но#nbsp;нет жестких правил, которые говорят, что конкретные цвета подходят только для#nbsp;определенных ниш, и#nbsp;остальные категорически нельзя использовать.
Например, для#nbsp;финансовых и#nbsp;страховых учреждений часто рекомендуются синие и#nbsp;голубые оттенки. Многие сайты и#nbsp;приложения банков так и#nbsp;оформлены#nbsp;— все как один. Но#nbsp;посмотрите на#nbsp;Тинькофф или Альфа-банк#nbsp;— цветовая гамма вне шаблонов. При этом люди активно пользуются их#nbsp;продуктами.
Мы#nbsp;считаем, что нет правильных и#nbsp;неправильных цветов. Есть те, которые подходят каждому конкретному приложению на#nbsp;основании многих факторов, не#nbsp;только стандартных цветовых ассоциаций. Это позволяет выделиться среди конкурентов и#nbsp;при этом соответствовать общему контексту проекта и#nbsp;ожиданиям целевой аудитории.
7. Неудачный шрифт
Покажите, что вы человек творческий – используйте везде экспериментальные шрифты. Ну и что, что они трудно читаются, часто «плывут» на устройствах нестандартных размеров и могут не подходить под общую стилистику проекта.
Когда шрифт с засечками и большим количеством изящества применяется и в заголовке, и основном тексте – это красиво, пусть и менее читабельно. Еще лучше добавить в проект 3-4 шрифта, чтобы было креативнее.
На наш взгляд, больше всего ошибок UI/UX дизайнеры делают в типографике, хотя это основа. Важно знать, как читает пользователь. Если ему сложно это делать, он уйдет и скачает приложение у более заботливого конкурента. Поэтому, когда речь заходит о выборе шрифта, зачастую лучше всего использовать что-то нейтральное, разборчивое.
Часто в своих проектах, в том числе в приложении для поиска и бронирования жилья, мы используем только один шрифт – San Francisco или Inter. Нам хватает разных его начертаний, ведь они отличаются по степени жирности и наклону.
Но необязательно применять один и тот же шрифт во всем тексте, комбинировать — тоже хороший вариант. Берем 2 шрифта – с засечками и без. С засечками используем для заголовков, а остальное без засечек. Как вариант, можно генерировать шрифты, которые удачно сочетаются между собой, с помощью сервиса fontjoy.com.
8. Блок с отзывами
Не#nbsp;стоит добавлять в#nbsp;приложение для#nbsp;поиска и#nbsp;бронирования жилья блок с#nbsp;отзывами. Чтобы сделать выбор, пользователю достаточно подробного описания апартаментов, хостелов, отелей и#nbsp;других вариантов с#nbsp;их#nbsp;преимуществами в#nbsp;каталоге.
Кроме того, людям может что-то не#nbsp;понравится, и#nbsp;они оставят негативный отзыв, который плохо повлияет на#nbsp;рейтинг представленного жилья и#nbsp;сам сервис. Если и#nbsp;размещать отзывы, то#nbsp;только положительные. Негативные удалять.
Сегодня недостаточно сделать красивое и#nbsp;удобное приложение. Важно, чтобы оно было настоящим, чтобы пользователи вам верили. Для#nbsp;этого они должны видеть, что вам УЖЕ доверяют, что сервис работает, как вы#nbsp;описываете, а#nbsp;услуги пользуются спросом. Реальные отзывы#nbsp;— отличная возможность для#nbsp;этого.
От#nbsp;негативных отзывов никто не#nbsp;застрахован. Человек может неверно оценить уровень комфорта представленного жилья или договориться о#nbsp;цене, негласно ожидая скидку, и#nbsp;остаться недовольным. Удалять такие отзывы не#nbsp;стоит. Лучше грамотно вступить в#nbsp;диалог, выяснить все нюансы и#nbsp;уладить ситуацию, а#nbsp;не#nbsp;банить всех подряд и#nbsp;этим подрывать доверие к#nbsp;сервису.
Мы#nbsp;обязательно даем возможность пользователям поделиться отзывами и#nbsp;впечатлениями о#nbsp;квартирах и#nbsp;гостиницах, которые они нашли с#nbsp;помощью приложения. Ведь многие боятся первыми посетить новый отель или снять на#nbsp;длительный срок дом за#nbsp;городом. Проще довериться тому, что уже выбрали и#nbsp;положительно оценили для#nbsp;себя другие. Это придает уверенности в#nbsp;собственном правильном выборе.
9. Фильтры
Последнее, что нужно добавить в#nbsp;каталог приложения#nbsp;— фильтры. Если человек задался целью найти квартиру в#nbsp;Санкт-Петербурге, чтобы весело и#nbsp;культурно провести выходные с#nbsp;компанией друзей#nbsp;— сам обязательно найдет. Решили все-таки дать пользователям такую возможность? Тогда сделайте фильтр очень подробным, чтобы учесть все нюансы при выборе подходящего жилья.
В#nbsp;приложении по#nbsp;поиску и#nbsp;бронированию жилья фильтры нужны, но#nbsp;не#nbsp;нужно их#nbsp;перегружать. Каталог со#nbsp;слишком большим количеством фильтров, как человек, который на#nbsp;празднике пытается завести крепкую дружбу с#nbsp;каждым гостем#nbsp;— одно раздражение. Для#nbsp;тех, кто не#nbsp;любит заполнять каждую позицию при выборе, избыток фильтров может оттолкнуть и#nbsp;вынудить вообще отказаться от#nbsp;поиска.
Мы#nbsp;придерживаемся умеренного варианта: простой фильтр с#nbsp;несколькими основными критериями (как правило#nbsp;— цена, вид жилья, дата) и#nbsp;скрытая панель с#nbsp;дополнительными позициями для#nbsp;педантичных пользователей.
10. Сложные формы
Для#nbsp;регистрации, авторизации, обратной связи используйте длинные формы. Ничто так не#nbsp;привлекает в#nbsp;приложении как большое количество обязательных полей для#nbsp;заполнения. Хорошим решением также будут сложные требования к#nbsp;паролю и#nbsp;отсутствие возможности упрощенной аутентификации. Пользователи такое любят.
С#nbsp;длинными формами для#nbsp;регистрации и#nbsp;других действий ситуация такая#nbsp;же, как и#nbsp;с#nbsp;фильтрами в#nbsp;каталоге. Большое количество полей отталкивает, тогда как короткая форма на#nbsp;2 поля скорее побудит пользователя внести данные.
Еще здорово дать возможность человеку войти в#nbsp;приложение с#nbsp;помощью аккаунтов социальных сетей. Ведь люди выбирают мобильное приложение из-за его эффективности и#nbsp;скорости, чтобы быстро решить проблему даже на#nbsp;ходу.
Несколько полезных советов
Хватит о#nbsp;вредном. Вот несколько полезных решений для#nbsp;UI/UX дизайна приложения для#nbsp;поиска и#nbsp;бронирования жилья:
Панель вкладок для#nbsp;сохраненных мест. Если вытянуть кнопку «сохраненные» из#nbsp;информационной архитектуры в#nbsp;новую панель вкладок, пользователь сможет быстро получать доступ к#nbsp;своим сохраненным местам. Это удобно, если хочешь вновь посетить ту#nbsp;же#nbsp;квартиру или мини-гостиницу.
Рекомендация ближайших мест. Удобная функция. Представим, что вы#nbsp;решили снять номер в#nbsp;семейном отеле в#nbsp;Судаке на#nbsp;неделю. Приезжаете#nbsp;— из-за внезапных проблем, не#nbsp;зависящих от#nbsp;собственника, она закрыта на#nbsp;пару дней. Неужели нужно возвращаться домой? Нет, можно открыть приложение и#nbsp;найти ближайшие аналогичные мини-отели, гостевые дома и#nbsp;поселиться в#nbsp;другом месте.
Оптимизация поиска. Подстраивать страницу с#nbsp;результатами поиска под портрет пользователя. Например, паре в#nbsp;отпуске предлагать первым делом гостиницы, гостевые дома или полупансионы.
Режим офлайн. Удобно, когда есть возможность пользоваться приложением без интернета#nbsp;— зоны покрытия везде разные. Например, можно скачать сохраненные результаты подбора апартаментов и#nbsp;в#nbsp;режиме офлайн вязаться для#nbsp;бронирования.
Использовать не#nbsp;до#nbsp;конца продуманные решения в#nbsp;UI/UX дизайне приложения#nbsp;— это как вставлять прямоугольный пазл с#nbsp;выступами в#nbsp;круглое отверстие. Пользователь расстраивается, решает, что впустую потратил время, выходит из#nbsp;себя и#nbsp;в#nbsp;итоге удаляет приложение. Он#nbsp;скачивал его, чтобы упростить и#nbsp;облегчить свою жизнь, а#nbsp;не#nbsp;наоборот.
Варианты, которые мы#nbsp;здесь обсуждаем, не#nbsp;претендуют на#nbsp;истину#nbsp;— для#nbsp;каждого проекта есть свои решения и#nbsp;исключения. Смотрите на#nbsp;это как на#nbsp;отправную точку для#nbsp;собственных рассуждений и#nbsp;выводов.
Делитесь, что думаете по#nbsp;этому поводу. Поможет#nbsp;ли этот список улучшить ваш UI/UX дизайн приложения?