SlideShare uma empresa Scribd logo
1 de 19
Trabalho 2 (M2) – Grupo
Projeto de Interface
Simplificado
Projeto do Tic Tac
Alunos: André, Richard, Bruno
Escopo do Sistema
Um jogo publicitário(advergame) voltado
para o público casual que utiliza dispositivos
móveis , ou seja, será necessário botões grandes
e fontes claras, a marca promovida facilmente
identificável, baixa complexidade que possa ser
facilmente compreendido além de iniciado e
finalizado rapidamente.
Caracteristicas da Análise de Contexto
e Especificação de Requisitos
Características dos usuários: No geral eles possuem
características parecidas com idades (18 a 20 anos), e
conhecimentos semelhantes e sem limitações especiais.
Todos bem familiarizados com sistemas semelhantes.
Características dos cenários: Botões grandes; fontes
claras e objetividade quanto as tarefas exigidas.
Características do Ambiente Físico: Laboratório de Jogos;
Característica do Ambiente Técnico: desktops,
navegadores IE ou Chrome, software para gravação de
movimentos na tela (CamStudio).
Cenários
• Cenário Tarefa 1 – Iniciar partida:
Usuário deve clicar com o cursor no botão “iniciar”
da tela inicial. Ele tambem poderá clicar no botão
que leva para a tela de créditos do jogo.
• Cenário Tarefa 2 – Identificar pontuação:
O usuário deve perceber sua pontuação que é
mostrada na parte superior esquerda da tela do
jogo.
Cenários
• Cenário Tarefa 3 – Ativar/Desativar Som:
O usuário deve clicar no botão com ícone de alto falante
para desativar os sons e a música do jogo. O botão deve
mudar de figura para mostrar ao jogador que a ação foi
efetuada e para que a qualquer momento no jogo, ele
perceba que o som está desativado.
Nota: O ideal seria que houvessem dois controladores
separados. Um para a música e outro para os sons de
efeito. Mas por questões de simplificar o produto e
facilitar o desenvolvimento, optamos por um botão para
as duas funções.
Cenário
• Cenário Tarefa 4 – Movimentar Personagem:
O usuário deve utilizar as setas da direita e da
esquerda do teclado para movimentar o
personagem.
• Cenário Tarefa 5 – Retornar ao Menu:
O usuário deve apertar o botão “menu” na tela
do gameplay. Para retornar ao menu do jogo, a
qualquer momento durante a partida.
Prototipação Rápida
Baixa/Média-Fidelidade
Ferramenta utilizada: Microsoft PowerPoint
• Facilidade para uso;
• Editor de formas geométricas flexível;
• Permite linkar slides simulando o fluxo entre
as telas;
• Permite o uso de imagens.
Tarefa 1 – Iniciar Partida
Aqui o sistema preza
Primeiramente por
Simplicidade, com apenas
Duas tarefas. A linguagem
Usada serve para que não
Reste dúvidas para o usuário
Quanto aos objetivos de
Cada botão, assim como a
Arte na parte de cima, serve
Para dar uma introdução
Daquilo que virá na tela de
Jogo. E os sons de feedback
Servem como confirmação
Das ações.
Heurísticas usadas
• Consistência
• Inf. Necessárias (inclusão de
Uma tela de transição com
Instruções básicas de como jogar)
• Simplicidade
• Discrição (interface não
intrusiva)
• Sem repetição de tarefa
• Feedback para a ação (sonoro
E visual)
• Prevenção de erros
• Terminologia bem entendida
• Coerência
Tarefa 1 – Iniciar Partida
Principios e Metas
Aqui vai a ilustração de
Entrada do jogo
(pretende aumentar o
Nível de imersão nas
Atividades que se seguem)
Botão para começar o jogo
(pretende-se que ele mude
De forma quando selecionado
Pelo cursor, e ative um som,
Para quando for pressioado)
Botão que leva para a
Tela de créditos do jogo
(Mesmo comportamento
Do botão iniciar, só que leva
Para a tela de créditos)
Tarefa 2 – Identificar Pontuação/ fase/ vidas
Aqui pretende-se
que seja
identificada a
pontuação do
jogador por ele
mesmo, no canto
direito superior. A
fase deve ser
identificada logo
abaixo e a
quantidade de vidas
abaixo do indicador
da fase atual.
Heurísticas usadas
• Consistência
• Simplicidade
• Instintividade
• Discrição
• Terminologia bem
Entendida
• Feedback (com reforço
Sonoro)
• Coerência
Tarefa 2 – Identificar pontuação/ fase/ vidas
Principios e Metas
Identificação de pontos
Priorizando visibilidade
E mantendo espaço
Suficiente para um número
Aceitável de algarismos. Com
cor e tamanho nítidos.
Identificação de fase atual
Identificação do número de
vidas
Tarefa 3 – Ativar e Desativar Som
Aqui o usuário deve
Entender que ao clicar no
Botão de som, ele desativa
Os sons e a música do jogo.
E ao clicar de novo no
Mesmo botão, volta a
Ativá-los.
Heurísticas usadas
• Consistência
• Instintividade
• Feedback
• Simplicidade
• Fácil correção de erros
• Inf. Necessárias
• Terminologia bem
Entendida
• Escolha do usuário
• Discrição
• Coerência
Tarefa 3 – Ativar e Desativar Som
Princípios e Metas
O botão deve ter um ícone
De alto falante, enquanto
Estiverem os sons habilitados
E um risco aparecerá na
Frente do mesmo quando
Desabilitados. O botão terá
Também uma resposta
Sonora para quando ele for
Pressionado.
Tarefa 4 – Movimentar Personagem
Aqui o jogador deve
Perceber que utilizando as
Setas do teclado o
Personagem movimenta-se
De um lado a outro.
Heurísticas usadas
• Instintividade
• Simplicidade
• Consistência
• Feedback
• Terminologia bem
Entendida
Tarefa 4 – Movimentar Personagem
Princípios e Metas
Personagem controlável,
Utiliza movimentação padrão
E intuitiva.
Seta pra direita = move para a direita
Seta pra esquerda = move para a esquerda
Item a ser coletado
Para ganho de pontos
Item a ser evitado,
Pois quando coletado
Tira pontos do jogador
Tarefa 5 – Retornar ao Menu
Retornar rapidamente ao
menu do jogo.
Heurísticas usadas
• Simplicidade
• Terminologia bem
Entendida
• Coerência
• Consistência
• Prevenção de erros
(inclusão de uma pergunta de
Segurança)
• Feedback
• Fácil acesso ao menu
Do jogo
• Discrição
Tarefa 5 – Retornar ao Menu
Princípios e Metas
Apertando o botão “Menu”,
O usuário consegue acessar
Rapidamente o menu principal
Do jogo. Ele também terá uma
Resposta sonora quando
Pressionado.
Protótipos de telas
para teste
Resultados do teste com usuários
Usuário Marvin, cursa design de jogos tem
experiência com jogos digitais.
Observações do usuário
• Botão na tela de créditos para voltar ao menu;
• Botão para controlar a saída da tela de tutorial;
• Relocação das informações de pontos, fase e
vidas para cima da tela de jogo.

Mais conteúdo relacionado

Mais procurados

Vamos aprender a usar o mouse
Vamos aprender a usar o mouseVamos aprender a usar o mouse
Vamos aprender a usar o mouseemefetchegoyen
 
TUTORIAL DE UTILIZAÇÃO DO TABLET EDUCACIONAL
TUTORIAL DE UTILIZAÇÃO DO TABLET EDUCACIONALTUTORIAL DE UTILIZAÇÃO DO TABLET EDUCACIONAL
TUTORIAL DE UTILIZAÇÃO DO TABLET EDUCACIONALReinaldo Paes
 
HeyeLighter Manual
HeyeLighter ManualHeyeLighter Manual
HeyeLighter ManualAureoSoft
 
Avarias mais comuns nos teclados
Avarias mais comuns nos tecladosAvarias mais comuns nos teclados
Avarias mais comuns nos tecladostraquo97
 
Configuração windows 7
Configuração windows 7Configuração windows 7
Configuração windows 7Sónia Abrantes
 
Livro 3 win 98
Livro 3  win 98Livro 3  win 98
Livro 3 win 98J M
 

Mais procurados (7)

Tutorial MEME
Tutorial MEMETutorial MEME
Tutorial MEME
 
Vamos aprender a usar o mouse
Vamos aprender a usar o mouseVamos aprender a usar o mouse
Vamos aprender a usar o mouse
 
TUTORIAL DE UTILIZAÇÃO DO TABLET EDUCACIONAL
TUTORIAL DE UTILIZAÇÃO DO TABLET EDUCACIONALTUTORIAL DE UTILIZAÇÃO DO TABLET EDUCACIONAL
TUTORIAL DE UTILIZAÇÃO DO TABLET EDUCACIONAL
 
HeyeLighter Manual
HeyeLighter ManualHeyeLighter Manual
HeyeLighter Manual
 
Avarias mais comuns nos teclados
Avarias mais comuns nos tecladosAvarias mais comuns nos teclados
Avarias mais comuns nos teclados
 
Configuração windows 7
Configuração windows 7Configuração windows 7
Configuração windows 7
 
Livro 3 win 98
Livro 3  win 98Livro 3  win 98
Livro 3 win 98
 

Semelhante a Projeto Tic Tac - Interface simplificada para advergame móvel

Ufcd752 sistemasoperativosmultitarefa
Ufcd752 sistemasoperativosmultitarefaUfcd752 sistemasoperativosmultitarefa
Ufcd752 sistemasoperativosmultitarefaProfessoraCarlaFerna
 
Palestra - Introdução ao desenvolvimento de Jogos
Palestra - Introdução ao desenvolvimento de JogosPalestra - Introdução ao desenvolvimento de Jogos
Palestra - Introdução ao desenvolvimento de Jogosjuliocoopergames
 
Criação de jogos game maker - férias
Criação de jogos   game maker - fériasCriação de jogos   game maker - férias
Criação de jogos game maker - fériasInstituto Inovar
 
Aula 2 - 28/10/2013
Aula 2 - 28/10/2013Aula 2 - 28/10/2013
Aula 2 - 28/10/2013sala40
 
Análise do gameplay
Análise do gameplayAnálise do gameplay
Análise do gameplayediqueli
 
Análise do gameplay
Análise do gameplayAnálise do gameplay
Análise do gameplayediqueli
 
Criaodejogos gamemaker-frias-100919090019-phpapp01
Criaodejogos gamemaker-frias-100919090019-phpapp01Criaodejogos gamemaker-frias-100919090019-phpapp01
Criaodejogos gamemaker-frias-100919090019-phpapp01Liana Vieira
 
Interfaces acesso
Interfaces acessoInterfaces acesso
Interfaces acessogenarui
 
User experience - IHM
User experience - IHMUser experience - IHM
User experience - IHMMath_Alves07
 
Apresentação de Experiência de Usuário - IHM
Apresentação de Experiência de Usuário - IHMApresentação de Experiência de Usuário - IHM
Apresentação de Experiência de Usuário - IHMMath_Alves07
 
Apostila microstation para iniciantes
Apostila microstation para iniciantesApostila microstation para iniciantes
Apostila microstation para iniciantesMonalisa Chagas
 
User experience (IHM)
User experience (IHM)User experience (IHM)
User experience (IHM)Dery Mason
 
Criação de jogos scratch - férias
Criação de jogos   scratch - fériasCriação de jogos   scratch - férias
Criação de jogos scratch - fériasInstituto Inovar
 
Minicurso pós: Manuseando um computador
Minicurso  pós: Manuseando um computadorMinicurso  pós: Manuseando um computador
Minicurso pós: Manuseando um computadormerlylimas2
 
Manuseando um computador
Manuseando um computadorManuseando um computador
Manuseando um computadormerlylimas2
 
Guia básico netbooks
Guia básico netbooksGuia básico netbooks
Guia básico netbooksEscolalorenzo
 
Etec ai -1- windows xp
Etec   ai -1- windows xpEtec   ai -1- windows xp
Etec ai -1- windows xpNutsha De luca
 
Etec ai -1- windows xp
Etec   ai -1- windows xpEtec   ai -1- windows xp
Etec ai -1- windows xpNutsha De luca
 

Semelhante a Projeto Tic Tac - Interface simplificada para advergame móvel (20)

Ufcd752 sistemasoperativosmultitarefa
Ufcd752 sistemasoperativosmultitarefaUfcd752 sistemasoperativosmultitarefa
Ufcd752 sistemasoperativosmultitarefa
 
Palestra - Introdução ao desenvolvimento de Jogos
Palestra - Introdução ao desenvolvimento de JogosPalestra - Introdução ao desenvolvimento de Jogos
Palestra - Introdução ao desenvolvimento de Jogos
 
Windows 7 aula 1
Windows 7 aula 1Windows 7 aula 1
Windows 7 aula 1
 
Criação de jogos game maker - férias
Criação de jogos   game maker - fériasCriação de jogos   game maker - férias
Criação de jogos game maker - férias
 
Aula 2 - 28/10/2013
Aula 2 - 28/10/2013Aula 2 - 28/10/2013
Aula 2 - 28/10/2013
 
Análise do gameplay
Análise do gameplayAnálise do gameplay
Análise do gameplay
 
Análise do gameplay
Análise do gameplayAnálise do gameplay
Análise do gameplay
 
Criaodejogos gamemaker-frias-100919090019-phpapp01
Criaodejogos gamemaker-frias-100919090019-phpapp01Criaodejogos gamemaker-frias-100919090019-phpapp01
Criaodejogos gamemaker-frias-100919090019-phpapp01
 
Unity - Sessão 12
Unity  - Sessão 12Unity  - Sessão 12
Unity - Sessão 12
 
Interfaces acesso
Interfaces acessoInterfaces acesso
Interfaces acesso
 
User experience - IHM
User experience - IHMUser experience - IHM
User experience - IHM
 
Apresentação de Experiência de Usuário - IHM
Apresentação de Experiência de Usuário - IHMApresentação de Experiência de Usuário - IHM
Apresentação de Experiência de Usuário - IHM
 
Apostila microstation para iniciantes
Apostila microstation para iniciantesApostila microstation para iniciantes
Apostila microstation para iniciantes
 
User experience (IHM)
User experience (IHM)User experience (IHM)
User experience (IHM)
 
Criação de jogos scratch - férias
Criação de jogos   scratch - fériasCriação de jogos   scratch - férias
Criação de jogos scratch - férias
 
Minicurso pós: Manuseando um computador
Minicurso  pós: Manuseando um computadorMinicurso  pós: Manuseando um computador
Minicurso pós: Manuseando um computador
 
Manuseando um computador
Manuseando um computadorManuseando um computador
Manuseando um computador
 
Guia básico netbooks
Guia básico netbooksGuia básico netbooks
Guia básico netbooks
 
Etec ai -1- windows xp
Etec   ai -1- windows xpEtec   ai -1- windows xp
Etec ai -1- windows xp
 
Etec ai -1- windows xp
Etec   ai -1- windows xpEtec   ai -1- windows xp
Etec ai -1- windows xp
 

Projeto Tic Tac - Interface simplificada para advergame móvel

  • 1. Trabalho 2 (M2) – Grupo Projeto de Interface Simplificado Projeto do Tic Tac Alunos: André, Richard, Bruno
  • 2. Escopo do Sistema Um jogo publicitário(advergame) voltado para o público casual que utiliza dispositivos móveis , ou seja, será necessário botões grandes e fontes claras, a marca promovida facilmente identificável, baixa complexidade que possa ser facilmente compreendido além de iniciado e finalizado rapidamente.
  • 3. Caracteristicas da Análise de Contexto e Especificação de Requisitos Características dos usuários: No geral eles possuem características parecidas com idades (18 a 20 anos), e conhecimentos semelhantes e sem limitações especiais. Todos bem familiarizados com sistemas semelhantes. Características dos cenários: Botões grandes; fontes claras e objetividade quanto as tarefas exigidas. Características do Ambiente Físico: Laboratório de Jogos; Característica do Ambiente Técnico: desktops, navegadores IE ou Chrome, software para gravação de movimentos na tela (CamStudio).
  • 4. Cenários • Cenário Tarefa 1 – Iniciar partida: Usuário deve clicar com o cursor no botão “iniciar” da tela inicial. Ele tambem poderá clicar no botão que leva para a tela de créditos do jogo. • Cenário Tarefa 2 – Identificar pontuação: O usuário deve perceber sua pontuação que é mostrada na parte superior esquerda da tela do jogo.
  • 5. Cenários • Cenário Tarefa 3 – Ativar/Desativar Som: O usuário deve clicar no botão com ícone de alto falante para desativar os sons e a música do jogo. O botão deve mudar de figura para mostrar ao jogador que a ação foi efetuada e para que a qualquer momento no jogo, ele perceba que o som está desativado. Nota: O ideal seria que houvessem dois controladores separados. Um para a música e outro para os sons de efeito. Mas por questões de simplificar o produto e facilitar o desenvolvimento, optamos por um botão para as duas funções.
  • 6. Cenário • Cenário Tarefa 4 – Movimentar Personagem: O usuário deve utilizar as setas da direita e da esquerda do teclado para movimentar o personagem. • Cenário Tarefa 5 – Retornar ao Menu: O usuário deve apertar o botão “menu” na tela do gameplay. Para retornar ao menu do jogo, a qualquer momento durante a partida.
  • 7. Prototipação Rápida Baixa/Média-Fidelidade Ferramenta utilizada: Microsoft PowerPoint • Facilidade para uso; • Editor de formas geométricas flexível; • Permite linkar slides simulando o fluxo entre as telas; • Permite o uso de imagens.
  • 8. Tarefa 1 – Iniciar Partida Aqui o sistema preza Primeiramente por Simplicidade, com apenas Duas tarefas. A linguagem Usada serve para que não Reste dúvidas para o usuário Quanto aos objetivos de Cada botão, assim como a Arte na parte de cima, serve Para dar uma introdução Daquilo que virá na tela de Jogo. E os sons de feedback Servem como confirmação Das ações. Heurísticas usadas • Consistência • Inf. Necessárias (inclusão de Uma tela de transição com Instruções básicas de como jogar) • Simplicidade • Discrição (interface não intrusiva) • Sem repetição de tarefa • Feedback para a ação (sonoro E visual) • Prevenção de erros • Terminologia bem entendida • Coerência
  • 9. Tarefa 1 – Iniciar Partida Principios e Metas Aqui vai a ilustração de Entrada do jogo (pretende aumentar o Nível de imersão nas Atividades que se seguem) Botão para começar o jogo (pretende-se que ele mude De forma quando selecionado Pelo cursor, e ative um som, Para quando for pressioado) Botão que leva para a Tela de créditos do jogo (Mesmo comportamento Do botão iniciar, só que leva Para a tela de créditos)
  • 10. Tarefa 2 – Identificar Pontuação/ fase/ vidas Aqui pretende-se que seja identificada a pontuação do jogador por ele mesmo, no canto direito superior. A fase deve ser identificada logo abaixo e a quantidade de vidas abaixo do indicador da fase atual. Heurísticas usadas • Consistência • Simplicidade • Instintividade • Discrição • Terminologia bem Entendida • Feedback (com reforço Sonoro) • Coerência
  • 11. Tarefa 2 – Identificar pontuação/ fase/ vidas Principios e Metas Identificação de pontos Priorizando visibilidade E mantendo espaço Suficiente para um número Aceitável de algarismos. Com cor e tamanho nítidos. Identificação de fase atual Identificação do número de vidas
  • 12. Tarefa 3 – Ativar e Desativar Som Aqui o usuário deve Entender que ao clicar no Botão de som, ele desativa Os sons e a música do jogo. E ao clicar de novo no Mesmo botão, volta a Ativá-los. Heurísticas usadas • Consistência • Instintividade • Feedback • Simplicidade • Fácil correção de erros • Inf. Necessárias • Terminologia bem Entendida • Escolha do usuário • Discrição • Coerência
  • 13. Tarefa 3 – Ativar e Desativar Som Princípios e Metas O botão deve ter um ícone De alto falante, enquanto Estiverem os sons habilitados E um risco aparecerá na Frente do mesmo quando Desabilitados. O botão terá Também uma resposta Sonora para quando ele for Pressionado.
  • 14. Tarefa 4 – Movimentar Personagem Aqui o jogador deve Perceber que utilizando as Setas do teclado o Personagem movimenta-se De um lado a outro. Heurísticas usadas • Instintividade • Simplicidade • Consistência • Feedback • Terminologia bem Entendida
  • 15. Tarefa 4 – Movimentar Personagem Princípios e Metas Personagem controlável, Utiliza movimentação padrão E intuitiva. Seta pra direita = move para a direita Seta pra esquerda = move para a esquerda Item a ser coletado Para ganho de pontos Item a ser evitado, Pois quando coletado Tira pontos do jogador
  • 16. Tarefa 5 – Retornar ao Menu Retornar rapidamente ao menu do jogo. Heurísticas usadas • Simplicidade • Terminologia bem Entendida • Coerência • Consistência • Prevenção de erros (inclusão de uma pergunta de Segurança) • Feedback • Fácil acesso ao menu Do jogo • Discrição
  • 17. Tarefa 5 – Retornar ao Menu Princípios e Metas Apertando o botão “Menu”, O usuário consegue acessar Rapidamente o menu principal Do jogo. Ele também terá uma Resposta sonora quando Pressionado.
  • 19. Resultados do teste com usuários Usuário Marvin, cursa design de jogos tem experiência com jogos digitais. Observações do usuário • Botão na tela de créditos para voltar ao menu; • Botão para controlar a saída da tela de tutorial; • Relocação das informações de pontos, fase e vidas para cima da tela de jogo.