Design de app de serviços domésticos: redesign da tela inicial, antes e depois

Um app de serviços domésticos tem uma só missão na tela inicial: levar alguém de "algo quebrou" a um profissional contratado no menor número de toques possível. O primeiro rascunho abaixo tem tudo o que um morador precisa, mas obriga a pessoa a caçar. Ele pede para buscar "serviços, categorias, profissionais", grita 30% de desconto num banner vermelho, espalha doze categorias com rótulos de 8 px e enterra cada profissional em linhas de fatos de 8 px.

A correção mantém todas as funções e muda a ordem. Uma pergunta simples vem primeiro, a oferta encolhe para uma linha, três categorias carregam a tela, e cada profissional mostra só aquilo em que as pessoas se baseiam para escolher.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

À esquerda, uma dúzia de coisas pede atenção com o mesmo peso. O banner vermelho é o objeto mais barulhento, os doze blocos são a maior massa, e as pessoas de verdade que vão fazer o trabalho ficam lá embaixo, num texto tão pequeno que exige apertar os olhos.

À direita, a tela lê na ordem em que o morador pensa: o que está errado, tem promoção, que tipo de serviço é, quem pode vir. O texto vai de 12 a 18 px contra os 8 a 15 px do rascunho, a margem é 20 nos dois lados, e nada fica dentro de um cartão.

O que mudou, medido

Correção 1: faça uma pergunta simples

Antes

Depois

Um campo de busca fino com contorno e o texto Buscar serviços, categorias, profissionais com um microfone, sobre uma linha de buscas populares: Leak Repair, AC Service, Deep Clean, Ceiling Fan. Em contraste com um campo cinza alto com uma lupa, as palavras O que precisa de conserto e um microfone.

"Buscar serviços, categorias, profissionais" é um rótulo de banco de dados. Ele pede que o usuário decida se procura um serviço, uma categoria ou uma pessoa antes de digitar uma palavra. Ninguém chega a um app de encanamento pensando nesses termos. Chega pensando "a pia está vazando".

"O que precisa de conserto?" é a pergunta que o app existe para responder, então o usuário pode digitar o problema com as próprias palavras. O campo cresce de 32 para 48 px, virando uma área de toque de verdade, e o microfone fica para a hora em que a mão está molhada. As buscas populares, Leak Repair, AC Service, Deep Clean e Ceiling Fan, abrem a partir do campo quando ele é tocado, então nada se perde e a tela elimina uma linha de texto de 9 px.

Regra para reutilizar: escreva o placeholder como o problema do usuário, não como a sua arquitetura de informação.

Correção 2: transforme o banner em uma linha

Antes

Depois

Um banner vermelho com um ícone de etiqueta, FLAT 30% OFF FIRST BOOKING em maiúsculas com três pontos de exclamação, letras miúdas com o texto Use o código FIX30 no checkout, só para novos usuários, aplicam-se termos, e um botão amarelo BOOK NOW. Em contraste com uma linha amarela fina com o texto 30% de desconto no seu primeiro conserto, FIX30, com uma seta.

O banner vermelho tem três funções e não cumpre nenhuma bem. Vermelho lê como erro ou alerta, os pontos de exclamação leem como spam, e as letras miúdas são o único lugar onde o código mora. O botão BOOK NOW dele ainda compete com os botões BOOK dos profissionais logo abaixo.

A linha corrigida diz a mesma coisa de uma só vez: o desconto, para quem é e o código. Ela é amarela, a única cor de ação do app, e a linha inteira é o botão, então a seta substitui o BOOK NOW. Sem foto e sem grito. Quem é novo ainda vê a oferta, e quem volta não leva um berro toda vez que abre o app.

Regra para reutilizar: oferta é uma linha, não um outdoor. Entregue o código ao usuário e faça a própria linha ser tocável.

Correção 3: corte doze categorias para três e um Mais

Antes

Depois

Um título Todas as categorias com um link Ver tudo sobre doze blocos pequenos com contorno em três fileiras de quatro, cada um com um ícone de cor diferente e um rótulo de 8 px: Plumbing, Electrical, Cleaning, Painting, Carpentry, AC Repair, Appliances, Pest Control, Moving, Gardening, Locksmith, Smart Home. Em contraste com quatro blocos maiores com contorno e ícones simples na cor da tinta: Plumbing, Electrical, Cleaning e Mais.

Doze ícones coloridos numa grade parecem organizados, mas o usuário precisa ler doze rótulos para achar o dele. Pior, um morador com um vazamento muitas vezes não sabe a que categoria ele pertence. Um teto pingando é Encanamento, Pintura ou Carpintaria? Um menu largo não ajuda essa pessoa, só deixa o palpite mais difícil.

A correção funciona em dois níveis. O campo de busca recebe o problema em palavras simples, então quem não conhece a categoria nunca precisa adivinhar uma. Os três blocos cobrem os serviços mais comuns, e o Mais abre as outras nove: Painting, Carpentry, AC Repair, Appliances, Pest Control, Moving, Gardening, Locksmith e Smart Home. Os blocos têm 76 por 72 com ícones de 26 px e rótulos de 12 px, e os ícones ficam na cor da tinta, porque doze cores diferentes de ícone eram ruído, não informação.

Nada foi removido. As doze categorias continuam a um toque de distância. O Thumbtack adota a mesma abordagem, com uma busca pelo serviço primeiro e uma lista curta de categorias embaixo.

Regra para reutilizar: mostre os poucos que a maioria precisa e deixe o resto atrás de um Mais. Deixe a busca cuidar de quem não conhece a categoria.

Correção 4: mostre cada profissional do jeito que as pessoas escolhem

Antes

Depois

Três profissionais, cada um com uma foto de 40 px, um nome, uma linha cinza de habilidades como Plumbing, Leak Repair, Water Heaters, Drain Cleaning, uma linha com 4.9 (312), 1.240 serviços feitos, 1,9 km, 45 dólares por hora, uma linha com Disponível de seg a sáb, das 8h às 18h, e um botão BOOK em maiúsculas. Em contraste com três profissionais com foto de 48 px, um nome, uma estrela com 4.9, 1.240 serviços e 45 dólares por hora, e o próximo horário livre em verde, como Próximo horário hoje, 15h, com um botão Agendar.

O rascunho lista tudo o que sabe sobre cada profissional: habilidades, nota, número de avaliações, serviços, distância, valor e horas semanais. São sete fatos em texto de 8 px, e os três profissionais parecem idênticos, então o usuário não tem como compará-los. A linha de horário é a mesma para os três, então não carrega informação nenhuma.

As pessoas escolhem um profissional por três coisas: quem é, se os outros confiam nele e quando ele pode vir. Então a correção mostra um nome, uma linha com "4.9 · 1.240 serviços · $45/h" e o próximo horário livre em verde, como "Próximo horário hoje, 15h". O horário é o fato novo, e substitui as horas semanais genéricas pela única que um agendamento precisa.

Habilidades, distância e horários completos vão para a página do próprio profissional. A foto cresce de 40 para 48 px e o botão Agendar de 21 para 34 px de altura, virando uma área de toque de verdade.

Os números são os mesmos nas duas telas. Minh Tran tem 4.9, 1.240 serviços e $45/h em ambas.

Regra para reutilizar: mostre os fatos em que as pessoas se baseiam para escolher e mande o resto para a página de detalhes.

As correções menores

• Toda função continua. O endereço longo abre a partir de "24 Hayes St" e da sua seta. O microfone fica no campo de busca. A aba Ofertas foi incorporada à linha de oferta, e o carrinho virou a aba Agendamentos.
• Uma só margem. O rascunho tem 14 px à esquerda e 12 px à direita. A tela corrigida usa 20 nos dois lados.
• Um só destaque. O amarelo é a cor de ação, na oferta e em todo botão Agendar. No rascunho, vermelho, amarelo e doze cores de ícone competem entre si.
• Quatro abas, um estilo de ícone. Cinco abas com ícones cheios e contornados misturados viram quatro em um só estilo, sobre uma barra plana de 78 px com um filete.
• Logotipo maior, endereço menor. O logotipo cresce para 24 px e o endereço perde a linha da rua e a cidade, porque o usuário sabe onde mora.
• Escala tipográfica. O texto vai de 12 a 18 px no lugar de 8 a 15 px.
• Ver tudo continua. O restante dos profissionais fica atrás de Ver tudo, e o terceiro profissional passa por baixo da barra de abas para a lista parecer mais longa.

Audite a sua própria tela de serviços domésticos

Baixe o arquivo do Figma

O arquivo grátis tem o rascunho júnior, a tela corrigida e cada parte como componente.

Arquivo grátis do Figma

Redesign da tela de serviços domésticos, antes e depois

As duas telas e cada parte como componente do Figma. Grátis, somente visualização, duplique para os seus rascunhos.

Abrir no Figma

FAQ

Como projetar a tela inicial de um app de serviços domésticos?

Comece com uma pergunta simples como "O que precisa de conserto?", depois uma linha fina de oferta, três ou quatro blocos de categoria com um Mais, e uma lista curta de profissionais. Mostre cada profissional por nome, nota e próximo horário livre, com um único botão Agendar.

Quantas categorias um app de serviços domésticos deve mostrar?

Três ou quatro na tela inicial, com um Mais para o resto. Doze blocos fazem todo mundo ler todos os rótulos, e quem tem um problema muitas vezes não sabe a que categoria ele pertence.

Um app de serviços deve usar barra de busca ou categorias?

Os dois, nessa ordem. Um campo de busca que pergunta sobre o problema atende quem não conhece a categoria, e alguns blocos cobrem os serviços comuns para quem conhece.

O que o cartão de um profissional deve mostrar num marketplace de serviços?

Um nome, uma nota com serviços feitos e valor, e o próximo horário disponível. Habilidades, distância e horários completos pertencem à página do próprio profissional, porque não ajudam alguém a escolher entre três opções.

Como mostrar um desconto num app de serviços domésticos?

Como uma linha fina com a oferta e o código, em que a linha inteira é tocável. Um banner vermelho com pontos de exclamação parece spam, e o botão dele compete com os botões Agendar.

Fontes

• As duas telas são nossas, projetadas e medidas no Figma. O app, Fixly, as pessoas, o endereço e os preços são inventados. A oferta, 30% de desconto com o código FIX30, e os 4.9, 1.240 serviços e $45/h de Minh Tran são os mesmos nas duas telas.
• Padrão estudado: Thumbtack, com uma busca pelo serviço primeiro e uma lista curta de categorias embaixo.
• Os ícones são do Phosphor (MIT). As fotos são do Pexels: Ivan S, Kindel Media, Son Hoa Nguyen e Mahmoud Yahyaoui.
• Publicado originalmente como carrossel no App Brainy.