A página da barbearia e a tela de agendamento

A página do estabelecimento

Logo que a página abre, o topo já responde o essencial, em duas faixas. Em cima vem a arte do estabelecimento — a foto de capa ou a promoção da vez —, sem nada escrito por cima dela. Logo abaixo, numa faixa própria, ficam o logo, o nome, a nota e o número de avaliações, o bairro, e à direita os dois botões: Agendar, que leva direto para a lista de serviços, e Loja, quando o estabelecimento vende produtos.

Se o estabelecimento ainda não subiu nenhuma foto, no lugar da capa fica só uma faixa fina de cor — nada de retângulo vazio.

Na faixa seguinte vem o contexto: a unidade (quando há mais de uma), as comodidades (Wi-Fi, estacionamento, ar-condicionado…) e, à direita, se o lugar está aberto agora — quando está fechado, ele diz a que horas abre de novo. No celular essa faixa carrega também o Ver rota.

Ao rolar a página, o cabeçalho assume o estabelecimento: logo, nome, nota e estado aparecem lá em cima, junto de Agendar e Loja e das abas da lista — assim a ação continua a um toque por toda a rolagem, sem precisar voltar ao topo.

Quando o estabelecimento subiu mais fotos, um botão {n} fotos no canto da capa abre a galeria em tela cheia.

Quando o estabelecimento monta um pacote (por exemplo Corte + Barba), ele aparece antes da lista, numa linha destacada com o desconto (-14%), o que vem dentro, o tempo total e o preço já com abatimento. No celular a linha inteira é o botão; no computador há um Agendar pacote do lado do preço.

Abaixo, a lista de serviços vem em linhas, com preço e duração alinhados para você comparar de cima a baixo. Quando o estabelecimento subiu uma foto do serviço, ela aparece como miniatura no começo da linha — só nos serviços que têm foto, então é normal que alguns venham sem. Tocar na foto ou no nome abre a página do serviço. Ao lado das abas fica o campo de busca — pode digitar sem acento (pigmentacao acha Pigmentação). As abas no topo da lista levam para Profissionais e Avaliações; ao lado de cada uma vai o número do que há lá dentro.

Se o estabelecimento tem planos de assinatura, eles fecham a lista de serviços, no fim da aba — depois de você já ter visto os preços avulsos que o plano costuma abater. Você escolhe o plano primeiro e só entra na conta na hora de confirmar.

No computador, a coluna da direita reúne tudo num painel único, separado por fios: a nota e o número de avaliações (toque para ir às avaliações), a equipe, o horário de funcionamento começando por hoje (Ver semana toda abre o resto), o endereço com mapa (com Ver rota e Copiar) e, no pé, como falar com o estabelecimento. No celular, esses mesmos dados estão no ícone de informações, no topo da tela.

O botão de claro/escuro agora fica no cabeçalho também no celular, ao lado da sua conta.

Como a tela de agendamento funciona

Ao tocar em um serviço, abre uma janela com duas telas: Agendar Horário e Confirmar Agendamento. Escolher e confirmar — é todo o agendamento na maioria das barbearias e salões.

Ofertas, produtos e seus dados não são mais telas: viraram partes da tela de confirmação, ao lado do preço. Só continua ganhando uma tela própria aquilo que o estabelecimento precisa que você responda: Entrega (endereço) e Para Quem (a ficha de quem vai ser atendido). Quem não usa nenhuma das duas vê dois passos, sempre.

• Você sempre sabe onde está. No topo aparece o nome da tela atual (Agendar Horário, Confirmar Agendamento…) e a contagem Passo 2 de 2. Esse total não muda no meio do caminho — o que ele mostra na primeira tela é o número real de telas até o fim.
• A barra de progresso é clicável. Logo abaixo, no celular, há uma barrinha por tela. As já concluídas ficam preenchidas — toque em qualquer uma delas para voltar direto àquele ponto. Tocar em uma tela que você ainda não alcançou não faz nada.
• Voltar funciona igual em todo lugar. A seta ← no rodapé, a barra de progresso e a tecla Esc (no computador) fazem exatamente a mesma coisa: voltam uma tela, sem perder nada do que você já escolheu. Só no primeiro passo o voltar fecha a janela.
• O total aparece uma vez só. No celular ele fica no rodapé, ao lado do botão. No computador fica dentro do próprio botão (Confirmar R$ 45,00), e o rodapé usa o espaço para lembrar que a confirmação chega no seu WhatsApp em segundos. Um número só, sem dúvida sobre qual é o valor certo.
• O rodapé diz pelo que você está pagando. Junto do valor aparece uma linha com o serviço, o dia, a hora e o profissional — dá para conferir tudo sem rolar a tela.