{
 "id": 36980,
 "slug": "2020-05-01_desenhar-uma-interface-para-uma-pagina-de-pedidos-de-comida",
 "url": "https://agents.willem.com/pt/posts/2020-05-01_desenhar-uma-interface-para-uma-pagina-de-pedidos-de-comida/",
 "source_url": "https://willem.com/pt/2020-05-01_desenhar-uma-interface-para-uma-pagina-de-pedidos-de-comida/",
 "language": "pt",
 "date": "2020-05-01",
 "published": "2020-05-01T00:00:00+02:00",
 "created": "2025-06-26T22:10:00.066000+02:00",
 "updated": "2026-10-20T09:19:34.357000+02:00",
 "title": "Desenhar uma interface para uma página de pedidos de comida",
 "subtitle": "Equilibrar opções poderosas com usabilidade em telemóvel",
 "summary": "As páginas de pedidos online são mais importantes do que nunca. O vírus COVID-19, os confinamentos que se seguiram e as regras de distanciamento social deixaram clara a necessidade de uma interface de loja online bem desenhada. É surpreendentemente difícil acertar nisto!",
 "topics": [
  "creating",
  "design",
  "lemmid-store",
  "programming",
  "smartphone",
  "web",
  "webdesign",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and hunspell (pt_PT)",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "pt",
  "source_language": "en"
 },
 "translations": [
  {
   "language": "en",
   "title": "Designing an interface for a food ordering page",
   "url": "https://agents.willem.com/en/posts/2020-05-01_designing-an-interface-for-a-food-ordering-page/",
   "source_url": "https://willem.com/en/2020-05-01_designing-an-interface-for-a-food-ordering-page/"
  },
  {
   "language": "nl",
   "title": "Een interface ontwerpen voor een bestelpagina voor eten",
   "url": "https://agents.willem.com/nl/posts/2020-05-01_een-interface-ontwerpen-voor-een-bestelpagina-voor-eten/",
   "source_url": "https://willem.com/nl/2020-05-01_een-interface-ontwerpen-voor-een-bestelpagina-voor-eten/"
  },
  {
   "language": "de",
   "title": "Gestaltung einer Benutzeroberfläche für eine Bestellseite (Essen)",
   "url": "https://agents.willem.com/de/posts/2020-05-01_gestaltung-einer-benutzeroberflache-fur-eine-bestellseite-essen/",
   "source_url": "https://willem.com/de/2020-05-01_gestaltung-einer-benutzeroberflache-fur-eine-bestellseite-essen/"
  },
  {
   "language": "es",
   "title": "Diseñando una interfaz para una página de pedidos de comida",
   "url": "https://agents.willem.com/es/posts/2020-05-01_disenando-una-interfaz-para-una-pagina-de-pedidos-de-comida/",
   "source_url": "https://willem.com/es/2020-05-01_disenando-una-interfaz-para-una-pagina-de-pedidos-de-comida/"
  },
  {
   "language": "fr",
   "title": "Concevoir l'interface d'une page de commande de repas",
   "url": "https://agents.willem.com/fr/posts/2020-05-01_concevoir-l-interface-d-une-page-de-commande-de-repas/",
   "source_url": "https://willem.com/fr/2020-05-01_concevoir-l-interface-d-une-page-de-commande-de-repas/"
  },
  {
   "language": "it",
   "title": "Progettare un'interfaccia per una pagina di ordinazione di cibo",
   "url": "https://agents.willem.com/it/posts/2020-05-01_progettare-un-interfaccia-per-una-pagina-di-ordinazione-di-cibo/",
   "source_url": "https://willem.com/it/2020-05-01_progettare-un-interfaccia-per-una-pagina-di-ordinazione-di-cibo/"
  },
  {
   "language": "pap",
   "title": "Desèñá un interface pa un página pa pidi kuminda",
   "url": "https://agents.willem.com/pap/posts/2020-05-01_desena-un-interface-pa-un-pagina-pa-pidi-kuminda/",
   "source_url": "https://willem.com/pap/2020-05-01_desena-un-interface-pa-un-pagina-pa-pidi-kuminda/"
  },
  {
   "language": "fy",
   "title": "In ynterface ûntwerpe foar in bestelside foar iten",
   "url": "https://agents.willem.com/fy/posts/2020-05-01_in-ynterface-untwerpe-foar-in-bestelside-foar-iten/",
   "source_url": "https://willem.com/fy/2020-05-01_in-ynterface-untwerpe-foar-in-bestelside-foar-iten/"
  }
 ],
 "image": "https://willem.com/global/images/649de8a48c1c.webp",
 "image_width": 2560,
 "images": [
  {
   "url": "https://willem.com/global/images/46615fdc8e0d.webp",
   "description": "Esboço inicial da interface de pedidos de comida",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-1.png"
  },
  {
   "url": "https://willem.com/global/images/92caf81f6d3a.webp",
   "description": "Esboçar em contexto: tenta enquadrar o teu design numa janela de visualização mais pequena",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-2.png"
  },
  {
   "url": "https://willem.com/global/images/4fcb33754a9f.webp",
   "description": "Esboço de uma interação em dois passos: distinguir entre os modos de lista e de detalhe",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-3.png"
  },
  {
   "url": "https://willem.com/global/images/2eb5b8a8f3a5.webp",
   "description": "Pedir comida em três passos: lista, detalhe, resumo",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-4.png"
  },
  {
   "url": "https://willem.com/global/images/c80a12452033.webp",
   "description": "Enganadoramente simples: a página de pedidos de comida final",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_36980_images-5.jpg"
  }
 ],
 "text": "O desafio: pedidos de comida online\nPode 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:\n- personalização do produto: por exemplo, oferecer diferentes molhos, acompanhamentos, coberturas e tamanhos\n- 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\")\n- várias variantes: alguém deve poder pedir duas pizzas iguais, mas com coberturas diferentes\nAcresce 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.\nEnfrenta desafios complexos com esboços!\nSempre que enfrento um desafio de design complexo, costumo começar por fazer esboços. Uso_um_tablet_como_computador_principal (https://willem.com/en/building-a-tablet-os-what-happens-when-you-reject-the-mainstream/), 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.\nO 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:\n- alguns produtos não terão imagem, e o texto fica alinhado de forma estranha se tiveres esta interface numa lista\n- alguns produtos têm títulos e descrições longos, por isso o design tem de acomodar a quebra de linha\n- este design ignora por completo as personalizações do produto (como escolher uma cobertura ou um molho)\nFaz 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.\nPensar como no mundo real: interação em dois passos\nPara 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.\nO 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.\nSe 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.\nCompletar o design: pedir comida em 3 passos\nMuitas 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.\nNa 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:\nConclusão\nDesenhar 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.\nSe 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 (https://lemmid-store.com) e funciona fantasticamente!",
 "word_count": 680,
 "markdown_url": "https://agents.willem.com/pt/posts/2020-05-01_desenhar-uma-interface-para-uma-pagina-de-pedidos-de-comida/post.md"
}