Auto-atendimento

Wireframe para Caixas Eletrônicos

Protótipo desenvolvido para saque em caixas eletrônicos. Me inspirei no Banco do Brasil que é onde tenho conta, e adicionei um item que gostaria que tivesse, como "escolha de notas" e utilizei a opção de inserir o cartão somente um vez.

Utilizei o Axure para protótipo das telas.

 

Wireframe para Caixas Eletrônicos

Wireframe para Caixas Eletrônicos

Wireframe Auto-Atendimento Daron's Bank

Os wireframes abaixo apresentam a proposta de um auto-atendimento bancário para o banco "Daron's Bank", este sistema foi criado especifico para realização de Saques.

Figura 01 - Interface Inicial

Image

 

Figura 02 - Menu Principal

Image

 

Figura 03 - Seleção de Valores para Operação de Saque

Image

 

Figura 04 - Solicitação da Senha para Confirmação de Saque

Image

 

Figura 05 - Interface Informativa para Retirada do Dinheiro

Image

 

Saque rápido - Wireframes para caixas eletrônicos

Após pensar em algumas melhorias na interface dos caixas eletrônicos, listei algumas sugestões para melhorar o processo de saque.

  1. O usuário não precisa inserir o cartão duas vezes. Sei que deve ter algum motivo técnico para isso, mas acho que é um tempo desnecessário que deve ser eliminado.
  2. Guardar um histórico dos valores mais sacados pelo usuário.
  3. Ter a opção do usuário escolher quais notas (2, 5, 10,...) deseja sacar.
  4. Melhorar a sinalização dos botões ativos do caixa eletrônico. Já fiquei na dúvida qual botão apertar pois a opção ficava entre dois botões laterais. A sugestão é termos algo com led. Botão ativo fica acesso, inativo apagado.
  5. Inserir um botão Voltar que funcionará na navegação entre as telas. Ele só estará ativo em algumas situações.

 

Wireframes para telas de sistema de auto-atendimento em caixa eletrônicos

Image

Objetivo: criar wireframes para telas do sistema de auto-atendimento de um caixa eletrônico utilizando como exemplo o saque em dinheiro.

Utilizei basicamente o sistema do meu banco. Não tenho problemas em operá-lo porém tenho certeza que muitos não utilizam pois tem dificuldades ou um certo medo.

Criei telas de apoio passo a passo para aqueles que tem dúvidas ou nunca utilizaram um caixa eletrônico. Montei voltado a transação para saque porém teria ajuda para todas as outras opções.

Wireframe para um auto-atendimento bancário

O wireframe a seguir, foi criado para representar um sistema de auto-atendimento bancário, para um usuário que deseja sacar dinheiro de sua conta corrente. 

Wireframe

Wireframe - Técnicas de Prototipação

Wireframe Auto-atendimento

Wireframe do Sistema de Auto-atendimento bancário

Ponto i - Protótipo em papel do quiosque de auto-atendimento

O resultado final da disciplina Técnicas de Prototipação foi um protótipo em papel de uma das mídias do nosso sistema de informações.

Escolhermos prototipar apenas algumas das funcionalidades relacionadadas a transportes, alimentação, por serem importantes tanto para o cidadão quanto para o turista, além de informações periféricas como previsão do tempo, data, hora, notícias da cidade, dicas, etc... 

Usando a técnica de stop motion, criamos este vídeo que mostra como seriam as interações nestas funcionalidades. Este vídeo foi apresentado no Dia Mundial da Usabilidade em Curitiba.


Ponto i - Paper Prototyping from Felipe Sad on Vimeo.

Central de Informação - Wireframes

Galeria de Imagens (clique para ver maior)

Turma trabalhando nos wireframes da interface

No último sábado, desenvolvemos os wireframes de algumas telas da interface do quiosque que fará parte de nosso sistema de informação.

A aula foi bastante dinâmica, com todos os alunos, e o professor Érico Fileno, participando ativamente na organização dos elementos de cada tela e como o usuário deverá interagir com eles. 


Add to calendar