Storyboards
Introdução
Prototipações tem utilidades para desenvolver a representação de idéias pois facilitam a comunicação, entre membros da equipe, testa idéias e encoraja a reflexão sobre o design. Protótipos respondem questões e é uma fonte de opção, visando viabilidade técnica, requisitos vagos e realizaçao de testes com usuários e avaliações1 Aqui demonstraremos uma das formas de prototipação, usadas pelo grupo 01, para estudos relacionados a plataforma CD-MOJ.
Objetivo
O objetivo dos storyboards é auxiliar no desenvolvimento de produtos, proporcionando uma visualização clara das ideias e conceitos nas fases iniciais do projeto. Eles facilitam a comunicação entre a equipe e stakeholders, permitindo identificar pontos críticos e oportunidades de melhoria. Os storyboards permitem testar rapidamente novas funcionalidades e obter feedback dos usuários, garantindo que o produto final esteja alinhado às suas necessidades e expectativas2.
Metodologia
Metodologia
Para criar e utilizar os storyboards, a equipe inicia identificando os principais cenários de uso que representam as interações dos usuários com a plataforma CD-MOJ. Em seguida, são desenhadas sequências de quadros que ilustram cada etapa dessas interações, usando materiais simples como papel e caneta. Esses quadros são discutidos e refinados com a participação dos membros da equipe e stakeholders, garantindo que todos compartilhem uma visão comum do produto em desenvolvimento.
Os storyboards são então utilizados em sessões de teste com usuários reais, onde são convidados a "navegar" pelas sequências desenhadas3. O feedback coletado durante essas sessões é utilizado para ajustar e melhorar os quadros, garantindo que as interações representadas estejam alinhadas com as expectativas e necessidades dos usuários. Todo o processo é documentado e os insights são compartilhados com a equipe de desenvolvimento, assegurando que as ideias refinadas sejam incorporadas nas próximas fases do projeto3.
Storyboards
Os protótipos de baixa-fidelidade que é o caso do storyboard não se assemelham muito ao produto final, tem pouco nível de detalhamento e utilizam materiais simples, representados no papel mesmo por exemplo, em vez de telas eletrônicas2. Porém, são mais adequados para as primeiras etapas do processo de desenvolvimento de produtos, quando o objetivo é explorar ideias e conceitos. Eles também podem ser usados para testar rapidamente novas funcionalidades ou para obter feedback de usuários, que está em alinhamento com a fase que está sendo trabalhada3.
O Storyboard apresenta as características apresentadas na tabela 1:
Tabela 1 - Características do Storyboard.
| Característica | Descrição |
|---|---|
| O cenário | O cenário é o propósito por trás do storyboard. Ele delineia a razão pela qual você está criando o storyboard, como por exemplo, pode ser o baixo envolvimento do cliente com seu produto. Nessa situação, você está criando um storyboard para entender melhor a jornada do cliente e encontrar uma maneira de melhorá-la - esse é o seu cenário. |
| As atividades | Atividades são as etapas específicas que refletem a jornada do cliente ou do desenvolvimento do produto, tais como "solicitar um código de desconto" ou "adicionar novas características ao produto". |
| Os visuais | Visuais são quaisquer imagens, formas ou vídeos que estruturam as diferentes etapas de seu storyboard. Eles fornecem contexto e tornam o storyboard mais envolvente. |
| A história | Finalmente, a história é a narrativa do storyboard. Quando todas as suas atividades se unirem, você deverá ser capaz de ver a história como um todo. |
Fonte: O que é um Storyboard?4.
Também segundo materiais disponíveis sobre a disciplina Interação Humano-Computador, representados pela figura 1, é interessante também que o Storyboard apresente uma parte textual, como a seguir:
Figura 1 - Parte textual Storyboard.
Fonte: Lista de exercício da disciplina Interação Humano-Computador. BARROS, André4.
Storyboards desenvolvidos pelo grupo
A seguir, temos os storybords desenvolvidos pelo grupo 01 da disciplina Interação Humano-Computador, para fins de estudo sobre a plataforma CD-MOJ, com base nas Análises de tarefas, assim cada integrante ficou responsável pelo desenvolvimento de uma tarefa, divididas conforme a tabela 2 a seguir:
Tabela 2 - Responsáveis pelas tarefas.
| Tarefas (Análises de tarefas) | Responsável pelo storyboard |
|---|---|
| Tarefa 1: Submissão de Problemas | Eric Silveira |
| Tarefa 2: Tutorial de Resolução de Questões Pós-Contest | Arthur Alves |
| Tarefa 3: Verificação de Submissões | João Artur |
| Tarefa 4: Ranking de Contest | Diego Sousa |
| Tarefa 5: Criação de Problema (Administrador) | Luiz Gustavo |
| Tarefa 6: Criação de Contest (Administrador) | Douglas Marinho |
Fonte: Eric Silveira.
Tarefa 1: Submissão de Problemas
Nesta tarefa, o usuário tem como objetivo submeter uma solução para um contest em que ele está cadastrado. A tabela 3 a seguir, descreve a parte textual desta tarefa:
Tabela 3 - Submissão de problemas, parte textual.
| Tópico | Descrição do storyboard |
|---|---|
| Pessoas Envolvidas | Usuários (submetem as questões) Administradores ou Alunos monitores (passam as questões a serem submetidas) |
| Ambiente | Plataforma CD-MOJ IDE de programação Gerenciador de arquivos |
| Tarefas | 1. Acessar a plataforma CD-MOJ. 2. Navegar para a seção de questões disponíveis. 3. Selecionar uma questão para resolver. 4. Interpretar a questão para compreender os requisitos e objetivos. 5. Elaborar a solução para a questão. 6. Testar a implementação utilizando as entradas e saídas disponíveis. 7. Corrigir quaisquer erros identificados durante o teste. 8. Submeter a solução para avaliação. 9. Acompanhar o status da submissão para verificar se foi aceita. |
| Os passos envolvidos | Acessar o CD-MOJ -> Selecionar a questão -> Implementar o código -> Testar localmente -> Submeter para avaliação -> Verificar o status da submissão. |
| Motivação | O usuário se sente satisfeito ao submeter uma questão pois pode estar parcialmente resolvida ou, mesmo que não esteja, o usuário sabe que receberá algum feedback sobre a submissão. |
| O que precisa para completar a tarefa? | A implementação do código em um arquivo compatível e a submissão do mesmo. |
| O que motivou a usar o sistema? | A resolução de questões de programação. |
Fonte: Eric Silveira.
Já a figura 2 a seguir representa o storyboard desenvolvido para esta tarefa:
Figura 2 - Submissão de Problemas.
Fonte: Eric Silveira.
Tarefa 2: Tutorial de Resolução de Questões Pós-Contest
Nesta tarefa, o administrador fornece um guia passo a passo detalhado das soluções para os problemas apresentados após a conclusão de um contest. A tabela 4 a seguir, descreve a parte textual desta tarefa:
Tabela 4 - Tutorial de Resolução de Questões Pós-Contest, parte textual.
| Tópico | Descrição do storyboard |
|---|---|
| Pessoas Envolvidas | Usuários (avaliam a resolução das questões em busca de conhecimento) Administradores ou Alunos monitores (disponibilizam a resolução das questões) |
| Ambiente | Plataforma CD-MOJ IDE de programação Gerenciador de arquivos |
| Tarefas | 1. Analisar a questão. 2. Fazer o Código. 3. Submeter a questão. 4. Analisar o erro. 5. Acessar a seção de tutoriais. 6. Verificar o tutorial da questão. 7. Refazer o código. 8. Submeter o código |
| Os passos envolvidos | Acessar o CD-MOJ -> Acessar o contest -> Resolver as questões do contest -> Verificar status da questão -> analisar o tutorial da questão -> Refatorar a questão. |
| Motivação | O usuário estava frustrado por não conseguir resolver a questão, então verifica o tutorial da questão para ver onde ele estava errando. |
| O que precisa para completar a tarefa? | Verificar sua submissão e reenviar a questão refatorada esperando que seja aceita. |
| O que motivou a usar o sistema? | O usuário fez a questão em um primeiro momento e ela não foi aceita, em um segundo momento ele se baseia no tutorial da questão para ela ser aceita, assim ficando satisfeito. |
Fonte: Eric Silveira e Arthur Alves.
Já a figura 3 a seguir representa o storyboard desenvolvido para esta tarefa:
Figura 3 - Tutorial de Resolução de Questões Pós-Contest.
Fonte: Arthur Alves.
Tarefa 3: Verificação de Submissões
Nesta tarefa, o usuário ou o administrador avalia os resultados das submissões realizadas durante uma competição. A tabela 5 a seguir, descreve a parte textual desta tarefa:
Tabela 5 - Verificação de Submissões, parte textual.
| Tópico | Descrição do storyboard |
|---|---|
| Pessoas Envolvidas | Usuários (corrige e envia a questão) |
| Ambiente | Plataforma CD-MOJ IDE de programação Gerenciador de arquivos |
| Tarefas | 1. Identificar o erro no código submetido. 2. Acessar a ferramenta de edição de código localmente com o arquivo submetido. 3. Refatorar o código para corrigir os erros identificados. 4. Testar o código modificado localmente ou utilizando as ferramentas disponíveis na plataforma. 5. Submeter o código corrigido para avaliação. 6. Acompanhar o status da nova submissão para verificar se foi aceito. |
| Os passos envolvidos | Acessar o CD-MOJ -> Acessar a lista de submissão -> Escolher submissão -> Verificar o status da submissão -> Olhar cópia do código -> Refatorar e enviar o código. |
| Motivação | O usuário se sente satisfeito ao resolver uma questão, que antes constava errada. |
| O que precisa para completar a tarefa? | Verificar sua submissão e reenviar a questão, de forma que seja aceita. |
| O que motivou a usar o sistema? | O usuário se sente satisfeito ao resolver uma questão, que antes constava errada. |
Fonte: Eric Silveira e João Artur.
Já a figura 4 a seguir representa o storyboard desenvolvido para esta tarefa:
Figura 4 - Verificação de Submissões.
Fonte: João Artur.
Tarefa 4: Ranking de Contest
Esta tarefa trata da computação e exibição dos resultados dos participantes em forma de classificação durante ou após um concurso. A tabela 6 a seguir, descreve a parte textual desta tarefa:
Tabela 6 - Ranking de Contest, parte textual.
| Tópico | Descrição do storyboard |
|---|---|
| Pessoas Envolvidas | Usuários (usuários acompanham o rank) Administradores (administradores gerenciam e monitoram o rank) |
| Ambiente | Plataforma CD-MOJ Página de competição Sistema de classificação |
| Tarefas | 1. Acessar a página da competição. 2. Visualizar o ranking atual dos participantes. 3. Filtrar ou buscar nomes específicos para ver posições particulares (A plataforma não tem suporte para esse filtro, porém ocorre pela busca do navegador). 4. Analisa as métricas de desempenho, como quantidade de questões resolvidas e tempo médio de resolução. 5. Comparar o desempenho com outros participantes. 6. Utilizar as informações do ranking para planejar estratégias de melhoria. |
| Os passos envolvidos | Acessar o CD-MOJ -> Navegar até a seção de competições -> Selecionar uma competição específica -> Visualiza o ranking do contest. |
| Motivação | Os usuários são motivados pela competição e pela possibilidade de melhoria no ranking. |
| O que precisa para completar a tarefa? | Acesso à internet e login na plataforma CD-MOJ para acompanhar o ranking em tempo real. |
| O que motivou a usar o sistema? | A competitividade e o desejo de melhorar suas habilidades de programação em um ambiente estimulante. |
Fonte: Eric Silveira e Diego Sousa.
Já a figura 5 a seguir representa o storyboard desenvolvido para esta tarefa:
Figura 5 - Ranking de Contest.
Fonte: Diego Sousa.
Tarefa 5: Criação de Problema (Administrador)
Nesta tarefa, o administrador e alunos monitores criam uma variedade de problemas a serem resolvidos pelos participantes para aprimoramento das habilidades de programação. A tabela 7 a seguir, descreve a parte textual desta tarefa:
Tabela 7 - Criação de Contest, parte textual.
| Tópico | Descrição do storyboard |
|---|---|
| Pessoas Envolvidas | Professores (como administradores) e alunos monitores (responsáveis pela elaboração das questões) |
| Ambiente | Plataforma CD-MOJ Interface administrativa de criação de questões |
| Tarefas | 1. Acessar a interface de criação de questões no módulo administrativo. 2. Elaborar o enunciado da questão, incluindo detalhes, contexto e requisitos de resolução. 3. Definir critérios de correção e casos de testes. 4. Inserir dados de teste que validem as soluções submetidas. 5. Revisar a questão com a ajuda de monitores e outros administradores para garantir clareza e correção. 6. Salvar e catalogar a questão para uso futuro em contests. |
| Os passos envolvidos | Acessar o CD-MOJ -> Logar com credenciais de administrador -> Navegar até a seção de criação de questões -> Compor e configurar a nova questão -> Salvar a questão no sistema. |
| Motivação | Professores e monitores são motivados pelo desejo de desafiar os alunos e aprimorar suas habilidades de resolução de problemas em programação. |
| O que precisa para completar a tarefa? | Acesso à plataforma CD-MOJ com permissões de administrador, informações adequadas para compor a questão, e ferramentas para inserir e testar os critérios de correção. |
| O que motivou a usar o sistema? | A possibilidade de criar questões que estimulam o aprendizado prático e o pensamento crítico dos alunos em um ambiente competitivo. |
Fonte: Eric Silveira e Luiz Gustavo.
Já a figura 6 a seguir representa o storyboard desenvolvido para esta tarefa:
Figura 6 - Criação de Problema (Administrador).
Fonte: Luiz Gustavo.
Tarefa 6: Criação de Contest (Administrador)
Nesta tarefa, o administrador cria contests que reúnem uma variedade de problemas a serem resolvidos pelos participantes dentro de um período de tempo estipulado. A tabela 8 a seguir, descreve a parte textual desta tarefa:
Tabela 8 - Criação de Contest, parte textual.
| Tópico | Descrição do storyboard |
|---|---|
| Pessoas Envolvidas | Professores (como administradores) e Alunos Monitores (auxiliam na elaboração das questões) |
| Ambiente | Plataforma CD-MOJ Interface administrativa Ferramentas de edição de contest |
| Tarefas | 1. Acessar o módulo administrativo para criação de contests. 2. Definir os detalhes do contest, incluindo título, descrição, e duração. 3. Selecionar ou cadastrar questões para o contest, podendo incluir novas questões elaboradas pelos monitores. 4. Cadastra alunos que estão cursando suas disciplinas para participar do contest. 5. Define regras e critérios de avaliação para as submissões. 6. Publica o contest e monitorar as inscrições e a progressão dos alunos. |
| Os passos envolvidos | Acessar o CD-MOJ -> Logar como administrador -> Navegar até o módulo de criação de contests -> Preencher e configurar os detalhes do contest -> Selecionar questões e participantes -> Publicar o contest. |
| Motivação | Professores são motivados pela oportunidade de avaliar e incentivar o aprendizado e a competência dos alunos em programação através de uma competição prática e engajadora. |
| O que precisa para completar a tarefa? | Conexão estável à internet, acesso administrativo na plataforma CD-MOJ, e lista de alunos e questões disponíveis. |
| O que motivou a usar o sistema? | A possibilidade de criar um ambiente competitivo e educacional que promove o desenvolvimento de habilidades práticas em programação entre os alunos. |
Fonte: Eric Silveira e Douglas Marinho.
Já a figura 7 a seguir representa o storyboard desenvolvido para esta tarefa:
Figura 7 - Criação de Contest (Administrador).
Fonte: Douglas Marinho.
Referência Bibliográfica
1. ROGERS, Yvonne. SHARP, Helen. PREECE, Jhennifer. Design de Interação: Além da Interação Humano-Computador. Capítulo 8.2.1: O que é um protótipo. Página 260 e 261.
2. ROGERS, Yvonne. SHARP, Helen. PREECE, Jhennifer. Design de Interação: Além da Interação Humano-Computador. Capítulo 8.2.3: Prototipação de baixa-fidelidade. Página 263.
3. ROGERS, Yvonne. SHARP, Helen. PREECE, Jhennifer. Design de Interação: Além da Interação Humano-Computador. Capítulo 8.2.2: Por que fazer protótipos? Página 261.
4. Miro. O que é um Storyboard? Tópico: Quais são as principais características de um storyboard? Disponível em: https://miro.com/pt/storyboard/o-que-e-storyboard/. Acesso em 18/05/2024.
Bibliografia
ROGERS, Yvonne. SHARP, Helen. PREECE, Jhennifer. Design de Interação: Além da Interação Humano-Computador. Editora Bookman, São Paulo: 2005.
Histórico de Versão
| Versão | Data | Data Prevista de Revisão | Descrição | Autor(es) | Revisor(es) |
|---|---|---|---|---|---|
1.0 |
15/05/2024 | 18/05/2024 | Criação da Documentação dos Storyboards | Eric Silveira | Arthur Alves, João Artur e Luiz Gustavo |
1.1 |
18/05/2024 | 20/05/2024 | Inserção dos storyboards e partes textuais dos mesmos | Eric Silveira | Arthur Alves, João Artur e Luiz Gustavo |
1.2 |
18/05/2024 | 20/05/2024 | Inserção da: Tabela 2 - Responsáveis pelas tarefas. | Eric Silveira | Arthur Alves, João Artur e Luiz Gustavo |
1.3 |
08/07/2024 | 08/07/2024 | Inserindo introdução e metodologia | Eric Silveira | Arthur Alves, João Artur e Luiz Gustavo |