Desenhar uma interface para uma página de pedidos de comida

O desafio: pedidos de comida online

Pode ser que não te apercebas quando escolhes a tua pizza ou as tuas batatas fritas no teu restaurante de comida para levar favorito, mas pedir comida é, na verdade, bastante difícil do ponto de vista do design de interfaces. Tens de ter em conta:

• personalização do produto: por exemplo, oferecer diferentes molhos, acompanhamentos, coberturas e tamanhos
• validação das personalizações: algumas personalizações exigem uma resposta (como queres o teu bife, mal passado, médio ou bem passado?), enquanto outras permitem mais variação (como escolher "no máximo 5 coberturas de pizza")
• várias variantes: alguém deve poder pedir duas pizzas iguais, mas com coberturas diferentes

Acresce que cerca de 80% de toda esta interação se faz num ecrã muito pequeno. Isso limita o espaço disponível para botões, interruptores e comutadores. É difícil acertar e não me surpreendeu ver muitas apps e páginas de pedidos existentes falharem neste ponto, e de forma pouco elegante.

Enfrenta desafios complexos com esboços!

Sempre que enfrento um desafio de design complexo, costumo começar por fazer esboços. Uso um tablet como computador principal, o que me permite explorar ideias desenhando-as. Claro que também podes usar o bom e velho papel. O importante é visualizares o teu pensamento, porque isso revela as possibilidades e as limitações do teu conceito.

O esboço acima mostra a minha ideia inicial para a interface. Vês uma imagem, um título, uma descrição do produto, o preço, botões de mais e de menos e uma caixa com o número de produtos que compraste. Pode parecer um bom (e simples) começo, mas este design tem falhas porque:

• alguns produtos não terão imagem, e o texto fica alinhado de forma estranha se tiveres esta interface numa lista
• alguns produtos têm títulos e descrições longos, por isso o design tem de acomodar a quebra de linha
• este design ignora por completo as personalizações do produto (como escolher uma cobertura ou um molho)

Faz o esboço no contexto de um smartphone e vais ver depressa onde o teu design falha. No segundo esboço (acima) vês apenas dois produtos na página de pedidos, e o número de botões visíveis (mais / menos) já é o dobro. Mostrar sempre vários botões por produto é claramente uma má ideia, sobretudo se tiveres muitos produtos.

Pensar como no mundo real: interação em dois passos

Para chegar a algo mais elegante, tentei imaginar-me a pedir o jantar num restaurante a sério. Descobri que o empregado de mesa cumpre, na verdade, uma parte importante do puzzle: responde à tua escolha fazendo perguntas específicas do produto. Por exemplo, quando peço um bife, o empregado pergunta-me como o quero cozinhado.

O truque é que só se fazem as perguntas relevantes para a tua escolha. Isto ajuda quando duas pessoas (à mesma mesa) pedem o mesmo produto: a abordagem pessoal permite personalizações diferentes por pessoa.

Se tentares captar esta interação em dois passos numa interface, podes desenhar um modo de lista/detalhe. Responder às perguntas específicas do produto faz-se no "modo detalhe", enquanto o "modo lista" oferece uma visão geral compacta (mas informativa) dos diferentes produtos.

Completar o design: pedir comida em 3 passos

Muitas vezes, o empregado de um restaurante conclui o pedido com um resumo do que foi pedido por todas as pessoas de uma mesa. Este resumo é um passo (final) muito importante antes de o pedido seguir para o cozinheiro.

Na página de pedidos online, este último passo também funcionaria. Serviria de última verificação antes de fazeres o pedido. Seguindo a analogia do mundo real, chegamos a uma interface simples de pedido de comida em 3 passos:

Conclusão

Desenhar uma página de pedidos de comida é um desafio por causa das muitas variáveis que é preciso acomodar num ecrã muito pequeno. O grande design pega nesta complexidade e torna-a simples.

Se desenhas uma interface, pode ser muito útil aplicar algum pensamento do mundo real. Arranja uma analogia ou metáfora diferente. Ver a página de pedidos como um "empregado de mesa virtual" ajudou-me a chegar a um design simples em três passos. Acabei por implementar este design e funciona fantasticamente!