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

У главного экрана приложения для бытовых услуг одна задача: довести человека от «что-то сломалось» до записи к мастеру за минимум касаний. В первом черновике ниже есть всё, что нужно хозяину дома, но он заставляет его искать. Он просит ввести в поиск «услуги, категории, специалисты», кричит о скидке 30% в красном баннере, раскладывает двенадцать категорий с подписями в 8 px и хоронит каждого мастера в строках фактов шрифтом 8 px.

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

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

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

Исправлено

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

Справа экран читается в том порядке, в котором думает хозяин дома: что сломалось, есть ли скидка, какого рода работа, кто может приехать. Текст идёт от 12 до 18 px против 8 до 15 px в черновике, поля по 20 с обеих сторон, и ничто не лежит в карточке.

Что изменилось, в цифрах

Правка 1: задайте один простой вопрос

До

После

Тонкое контурное поле поиска «Поиск услуг, категорий, специалистов» с микрофоном над строкой популярных запросов: устранение протечки, обслуживание кондиционера, генеральная уборка, потолочный вентилятор. Против высокого серого поля с лупой, словами «Что нужно починить» и микрофоном.

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

«Что нужно починить?» это вопрос, на который приложение и отвечает, так что пользователь может описать проблему своими словами. Поле вырастает с 32 до 48 px, то есть становится нормальной зоной касания, а микрофон остаётся на случай, когда руки мокрые. Популярные запросы, устранение протечки, кондиционер, генеральная уборка и потолочный вентилятор, открываются из поля по касанию, так что ничего не потеряно, а с экрана уходит строка текста в 9 px.

Правило на будущее: пишите плейсхолдер как проблему пользователя, а не как свою информационную архитектуру.

Правка 2: превратите баннер в одну строку

До

После

Красный баннер с иконкой ярлыка, «СКИДКА 30% НА ПЕРВЫЙ ЗАКАЗ» капсом с тремя восклицательными знаками, мелкий текст «Используйте код FIX30 при оформлении, только для новых пользователей, действуют условия» и жёлтая кнопка «ЗАКАЗАТЬ». Против одной тонкой жёлтой строки «Скидка 30% на первый ремонт, FIX30» со стрелкой.

У красного баннера три задачи, и ни одну он не решает хорошо. Красный читается как ошибка или предупреждение, восклицательные знаки читаются как спам, а код живёт только в мелком шрифте. Его кнопка «ЗАКАЗАТЬ» ещё и конкурирует с кнопками «Записаться» у мастеров ниже.

Исправленная строка говорит то же самое на одном дыхании: скидка, для кого она и код. Она жёлтая, а это единственный акцентный цвет действия в приложении, и вся строка является кнопкой, так что стрелка заменяет «ЗАКАЗАТЬ». Ни фото, ни крика. Новичок всё равно видит предложение, а вернувшегося пользователя не кричат каждый раз, когда он открывает приложение.

Правило на будущее: предложение это строка, а не билборд. Отдайте код пользователю и сделайте саму строку нажимаемой.

Правка 3: сократите двенадцать категорий до трёх и «Ещё»

До

После

Заголовок «Все категории» со ссылкой «Показать все» над двенадцатью мелкими контурными плитками в три ряда по четыре, у каждой цветная иконка и подпись 8 px: сантехника, электрика, уборка, покраска, столярные работы, ремонт кондиционеров, бытовая техника, дезинсекция, переезд, садоводство, слесарь, умный дом. Против четырёх крупных контурных плиток с простыми чернильными иконками: сантехника, электрика, уборка и «Ещё».

Двенадцать цветных иконок в сетке выглядят организованно, но пользователю приходится прочесть двенадцать подписей, чтобы найти свою. Хуже того, хозяин с протечкой часто не знает, к какой категории она относится. Капающий потолок это сантехника, покраска или столярка? Широкое меню такому человеку не помогает, оно усложняет догадку.

Исправление работает на двух уровнях. Поле поиска принимает проблему простыми словами, так что пользователь, не знающий категории, не обязан её угадывать. Три плитки закрывают самые частые работы, а «Ещё» открывает остальные девять: покраску, столярные работы, ремонт кондиционеров, бытовую технику, дезинсекцию, переезд, садоводство, слесаря и умный дом. Плитки 76 на 72 с иконками 26 px и подписями 12 px, а иконки стали простыми чернильными, потому что двенадцать разных цветов иконок были шумом, а не информацией.

Ничего не удалено. Все двенадцать категорий всё так же в одном касании. Thumbtack использует тот же подход: сначала поиск по работе, а под ним короткий список категорий.

Правило на будущее: показывайте немногое, что нужно большинству, а остальное прячьте за «Ещё». Пусть поиск обслуживает тех, кто не знает категорию.

Правка 4: показывайте мастера так, как его выбирают

До

После

Три мастера, у каждого фото 40 px, имя, серая строка навыков вроде «сантехника, устранение протечек, водонагреватели, прочистка труб», строка «4,9 (312), выполнено 1 240 заказов, 1,2 мили, 45 долларов в час», строка «Доступен пн-сб, с 8 до 18» и кнопка ЗАПИСАТЬСЯ капсом. Против трёх мастеров с фото 48 px, именем, звездой с 4,9, 1 240 заказами и 45 долларами в час и ближайшим окном зелёным, например «Ближайшее окно сегодня, 15:00», с кнопкой «Записаться».

Черновик выкладывает всё, что знает о каждом мастере: навыки, рейтинг, число отзывов, заказы, расстояние, ставку и недельный график. Это семь фактов шрифтом 8 px, а три мастера выглядят одинаково, так что сравнить их невозможно. Строка с часами одинакова у всех троих, то есть информации не несёт.

Мастера выбирают по трём вещам: кто он, доверяют ли ему другие и когда он может приехать. Поэтому исправление показывает имя, одну строку «4,9 · 1 240 заказов · $45/час» и ближайшее окно зелёным, например «Ближайшее окно сегодня, 15:00». Время это новый факт, и он заменяет общий недельный график тем, что нужно для записи.

Навыки, расстояние и полный график переезжают на страницу самого мастера. Фото растёт с 40 до 48 px, а кнопка «Записаться» с 21 до 34 px в высоту, то есть становится нормальной зоной касания.

Цифры на обоих экранах одинаковые. Minh Tran это 4,9, 1 240 заказов и $45/час и там, и там.

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

Мелкие правки

• Все функции остаются. Длинный адрес открывается из «24 Hayes St» и его стрелки. Микрофон остался в поле поиска. Вкладка «Предложения» свернулась в строку оффера, а корзина стала вкладкой «Заказы».
• Одно поле. В черновике 14 px слева и 12 px справа. В исправленном экране 20 с обеих сторон.
• Один акцент. Жёлтый это цвет действия, на предложении и на каждой кнопке «Записаться». В черновике красный, жёлтый и двенадцать цветов иконок борются друг с другом.
• Четыре вкладки, один стиль иконок. Пять вкладок со смесью залитых и контурных иконок стали четырьмя в одном стиле, на плоской панели 78 px с тонкой линией.
• Логотип крупнее, адрес короче. Логотип вырос до 24 px, а адрес потерял строку улицы и город, потому что пользователь знает, где живёт.
• Шкала шрифтов. Текст идёт от 12 до 18 px вместо 8 до 15 px.
• «Показать всех» остаётся. Остальные мастера лежат за «Показать всех», а третий мастер уходит за панель вкладок, чтобы список казался длиннее.

Проверьте свой экран бытовых услуг

Получите файл Figma

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

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

Редизайн экрана бытовых услуг, до и после

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

Открыть в Figma

FAQ

Как спроектировать главный экран приложения бытовых услуг?

Начните с одного простого вопроса вроде «Что нужно починить?», затем одна тонкая строка с предложением, три или четыре плитки категорий с «Ещё» и короткий список мастеров. Показывайте каждого мастера по имени, рейтингу и ближайшему окну, с одной кнопкой «Записаться».

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

Три или четыре на главном экране, а остальные за «Ещё». Двенадцать плиток заставляют каждого читать каждую подпись, а люди с проблемой часто не знают, к какой категории она относится.

Что выбрать приложению услуг: строку поиска или категории?

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

Что должна показывать карточка специалиста в маркетплейсе услуг?

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

Как показывать скидку в приложении бытовых услуг?

Одной тонкой строкой с предложением и кодом, где нажимаема вся строка. Красный баннер с восклицательными знаками читается как спам, а его кнопка конкурирует с кнопками «Записаться».

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Приложение Fixly, люди, адрес и цены выдуманы. Предложение, скидка 30% с кодом FIX30, и показатели Minh Tran, 4,9, 1 240 заказов и $45/час, одинаковы на обоих экранах.
• Изученный паттерн: Thumbtack, сначала поиск по работе, а под ним короткий список категорий.
• Иконки из Phosphor (MIT). Фото с Pexels: Ivan S, Kindel Media, Son Hoa Nguyen и Mahmoud Yahyaoui.
• Впервые опубликовано как карусель в App Brainy.