Storyboards

Introdução

Os storyboards são utilizados como uma ferramenta no design de interação para explorar ideias sobre como melhorar a prática de trabalho dos usuários com o suporte oferecido pela tecnologia. Eles auxiliam o designer a projetar soluções que aprimorem o trabalho dos usuários, permitindo visualizar e planejar a interface e a interação de forma mais clara. Uma vez criados, os storyboards ajudam a consolidar ideias e servem como base para o desenvolvimento de protótipos, possibilitando um processo iterativo de refinamento até alcançar uma solução satisfatória​. Neste documento, iremos realizar um storyboard para cada tarefa analisada, mostrando a imagem do storyboard e especificando as pessoas envolvidas, o ambiente, as tarefas, os passos envolvidos, a motivação e o resultado.

Tarefa 1 - Agendar visita técnica

O storyboard apresentado na figura 1 representa um usuário utilizando o sistema quando precisa agendar uma visita técnica em sua residência.

Figura 1: Storyboard de agendar visita técnica

Fonte: Henrique Alencar

Pessoas envolvidas:

• Carlos, 42 anos, gerente financeiro. Apenas um usuário comum.

Ambiente:

• Em sua casa, no quarto utilizando o computador.

Tarefas:

• Acessar o site da neoenergia, logar, escolher sua residência, agendar a visita técnica.

Passos envolvidos:

1. Acessar o site;
2. Inserir os dados para fazer login;
3. Escolher sua residência;
4. Acessar a função de agendar visita técnica.;
5. Informar o problema;
6. Selecionar a data;
7. Selecionar o horário;
8. Confirmar agendamento.

Motivação de usar a aplicação:

• Chamar um técnico da Neoenergia para resolver problemas em sua residência.

O que precisam fazer:

• Acessar o site e realizar o agendamento.

O que motivou a usar o sistema:

• Facilidade de acessar o site e rapidez ao realizar a tarefa.

Resultado ao completar a tarefa:

• Carlos se sentiu satisfeito em ter feito o agendamento e agora aguarda a realização da visita.

Tarefa 2 - Emissão de segunda via de conta

• O storyboard apresentado na figura 2 representa um usuário emitindo a segunda via de conta.

Figura 2: Storyboard de emissão segunda via de conta

Fonte: Dara Maria

Pessoas envolvidas

• João, cliente residencial, 34 anos

Ambiente

• Casa, usando um computador pessoal conectado à internet.
• Navegador web com a página inicial e outras áreas do site da Neoenergia abertas.

Motivação para usar a aplicação

• Resolver o problema de pagar a fatura de energia ao não encontrar o documento físico.

Tarefas e passos envolvidos

1. Acesso ao site

   • João digita o endereço do site da Agência Virtual no navegador.
   • Ele acessa a página inicial e sente-se confiante ao localizar o site correto.

2. Login no sistema

   • João tenta inserir o CPF e a senha e faz login com sucesso, sentindo-se satisfeito.

3. Localização da fatura

   • Após o login, João acessa o menu principal.
   • Localiza e seleciona a opção "Segunda Via de Conta".
   • Visualiza a lista de faturas em aberto e encontra a fatura desejada.

4. Emissão da segunda via

   • João seleciona a fatura correspondente.
   • Visualiza o PDF da conta diretamente no site.
   • Clica no botão "Baixar" para salvar o arquivo em seu computador.
   • Fica aliviado e satisfeito ao concluir essa etapa.

Resultado

• João está contente e aliviado por ter conseguido resolver seu problema de forma eficiente e sem grandes dificuldades. Ele finaliza a interação com o sistema satisfeito com a usabilidade e rapidez da plataforma.

Bibliografia

BARBOSA, S.D.J.; SILVA, B.S. Interação Humano-Computador. Editora Campus-Elsevier, 2010.

Histórico de versão

Versão	Data	Descrição	Autor(es)	Revisor
1.0	10/12/2024	Criação da página	Henrique Alencar	Dara Maria, Davi Casseb
1.1	10/12/2024	Adição de storyboard 2	Henrique Alencar	Dara Maria, Davi Casseb
1.2	26/01/2025	Adição do storybord da tarefa 2	Dara Maria	Davi Casseb, Henrique Alencar
1.3	26/01/2025	Atualização de storyboard	Henrique Alencar	Dara Maria, Davi Casseb