Tela de seleção de idioma

  • Mostrar opções de seleção de idioma (poderia ter nome do idioma e bandeira juntos, só bandeira ou só nome do idioma).
  • Somente botões grandes como opções e sem distrações.
  • Escolher simplesmente com um toque e passar para a seguinte fase da interface.
  • Problema de lógica possível: se o usuário volta até aqui e tem itens no carrinho, estes são apagados automaticamente.

Tela de seleção de categoria

  • Mostrar opções das categorias dos itens existentes (poderia ter nome e imagem ou só nome da categoria).
  • Somente botões grandes como opções e sem distrações.
  • Escolher simplesmente com um toque e passar para a seguinte fase da interface (seleção de item).
  • Opções na parte superior: voltar atrás (seleção de idioma) e um seletor de idioma.
  • Opções na parte inferior: cancelar pedido (voltar para seleção de idioma) ou ir para o carrinho (mostrar só se existirem itens no carrinho e número de itens).

Tela de seleção de item dentro da categoria escolhida

  • Mostrar grid de itens da categoria escolhida (deve ter imagem, nome e preço).
  • Somente botões grandes como opções e sem distrações.
  • Escolher simplesmente com um toque e passar para a seguinte fase da interface (personalização do item).
  • Opções na parte superior: voltar atrás (seleção de categoria), seletor de idioma, seletor de categoria e seletor de subcategoria.
  • Opções na parte inferior: cancelar pedido (voltar para seleção de idioma) ou ir para o carrinho (mostrar só se existirem itens no carrinho e número de itens).

Tela de personalização do item

  • Mostrar detalhes do produto (imagem, nome, descrição, preço) além do botão “adicionar ao carrinho”.
  • Somente botões grandes como opções e sem distrações.
  • Ao usar o botão “adicionar ao carrinho” passa para a seguinte fase da interface (carrinho de compra).
  • Opções na parte superior: voltar atrás (seleção de item) e seletor de idioma.
  • Opções na parte inferior: cancelar pedido (voltar para seleção de idioma), seguir comprando (voltar para seleção de categoria) ou ir para o carrinho (mostrar só se existirem itens no carrinho e número de itens).
  • Problema de lógica possível: se o usuário volta e adiciona o mesmo item, apenas 1 unidade é adicionada e ele é levado diretamente ao carrinho, sem opção de continuar comprando.

Tela de carrinho de compra ou resumo do pedido

  • Lista dos itens adicionados ao carrinho (imagem, nome, preço, quantidade e opção de apagar).
  • Somente botões grandes como opções e sem distrações (quantidade com botões de adicionar/remover e botão de apagar item).
  • Teclado virtual para inserir nome do cliente.
  • Ao usar os botões de quantidade ou apagar, a interface continua a mesma apenas atualizando valores.
  • Opções na parte superior: voltar atrás (seleção de item) e seletor de idioma.
  • Opções na parte inferior: cancelar pedido (voltar para seleção de idioma), seguir comprando (voltar para seleção de categoria) ou finalizar compra.
  • Ao usar o botão “fazer compra” passa para a seguinte fase da interface (confirmação).
  • Lógica: depois de finalizar a compra, salvar na base de dados o pedido com seus detalhes e limpar o carrinho.

Tela de confirmação

  • Mensagem de confirmação do pedido com detalhes (lista de itens, total, data e número do pedido).
  • Lógica: depois de 20 segundos, redirecionar para a tela inicial (seleção de idioma).
  • Problema de lógica possível: se o usuário deixa de interagir por 2 minutos ou mais, será redirecionado ao início (seleção de idioma), apagando qualquer atividade do carrinho.

Caso versão web

  • O sistema inicia em uma tela igual à de seleção de item, mas mostrando todos os itens.
  • Pode filtrar categorias e subcategorias na parte superior, além de trocar idioma.
  • Um novo botão na parte superior leva ao carrinho, mostrando também o número de itens.
  • Não precisa de opções na parte inferior, exceto na tela de carrinho de compra.

Regras gerais

  • Sempre usar botões grandes como opções e sem distrações.
  • Sempre usar janelas de confirmação (apagar ou cancelar pedido)