View
3.027
Download
6
Category
Preview:
DESCRIPTION
Citation preview
Disciplina Técnicas de Prototipação 1Prof.: Paolo Domenico Passeri
ESTRUTURAAula 1Apresentação da Disciplina | Introdução a Prototipação | Sketch | Mind Map | Visual Thinking | Lançamento do Projeto
Aula 2Tipos de Protótipos | Métodos de Interação | Diagrama de Fluxo | Prototipação em Papel
Aula 3Modelagem | Prototipação Física
Aula 4Protótipos Vivos | Desenhando Experiênicias | Storyboarding | Role-playing
Aula 5Business Design | Apresentações em Papel | Frameworks | Infográficos | O “Pitch”
Aula 6Projeto Final da Disciplina
Equipes do Projeto
1
A
•Lenin•Alysson•Anderson•Vinicius
B
2
•Ramon•Tiago•Jean•Pedro
•Kallel•Rodrigo•Rafael Giuliano•Gabriela
•Raphael•Paulo•Viviane•Tiago Pain
REVISÃO
Individual:•Ir a um restaurante e OBSERVAR as interações que ocorrem. Tirar fotos e fazer anotações se possível.
•Compartilhar fotos e anotações com as suas equipes.
Grupo:•Após a visita ao restaurante, validar o que foi feito na aula 1 (levantar mais problemas, melhorar os desenhos).
•Pensar em uma solução técnologica composta por HW e SW que possa melhorar a experiência no restaurante.
•Criar um “Concept Sketch” da solução.
TÉCNICA D.D.P.
Refinando a sua Ideia
“DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”
• Quem é o seu PÚBLICO ALVO?• O principal usuário será o cliente, garçom ou outra pessoa.
• Jovens, adultos ou idosos
• Homens ou Mulheres
• Vão usar diariamente ou ocasionalmente
• Quais serão as principais FUNCIONALIDADES?• Cardápio do restaurante?
• Realizar pedidos?
• Chamar o garçom?
Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.
- Mark Twain
“”
Meetings for iPadPaolo Domenico Passeri
ATIVIDADE 1
• DEFINAM quem será o público alvo da sua solução
• LEVANTEM todas as funcionalidades que o sistema deverá ter
• CORTEM funcionalidades que não fazem parte do core (menos importantes)
• UNAM o PÚBLICO ALVO e as FUNCIONALIDADES em uma única frase
• Criem o SCKETCH CONCEITO da solução (usando técnicas da aula 1)
45 minutos
• Post-It
• Papel
• Lápis/Caneta
INTERAGINDO COM DISPOSITIVOS
Métodos de Interação
• Lembre-se que existem diferentes meios de interagir com o dispositivo
• Antes de desenhar/prototipar a UI, é necessário avaliar quais meios estão disponíveis e serão utilizados
• Analise se não existe outra maneira de usuários entrarem com “dados” e atingir seus objetivos
• Seja criativo e não se limite ao “tradicional”
Padrões de Interação
• Definem alguns CONTROLES e ELEMENTOS padrões para o design de interfaces
• É uma maneira de aprendermos com soluções que foram bem APLICADAS e DOCUMENTADAS por outros designers
• Ótimo ponto de PARTIDA para DESENHARMOS e entendermos partes específicas de um design
Manipulação INDIRETA
• É necessário aprender o mapeamento das teclas• Deve ser muito consistente• Não são muito flexíveis
• Joystick Direcional• Botões Alfa-numéricos• Soft-keys• Rodas
Manipulação DIRETA/Touch/Haptic
• Toques curtos e longos• Arrastar• Deslizar• Girar• Pinçar e Expandir
• Não existe mapeamento pois as teclas são “virtuais”• Difícil aprender todos os meios de entrada• São muito flexíveis
Manipulação por GESTOS
• Utilizada através de sensores• Através do dispositivo por completo
• Inclinando• Asoprando • Chacoalhando• “Se movendo”
TÉCNICADiagrama de
Fluxo de Interfaces
Diagrama de FLUXO
• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra
• Te obriga a pensar na FLUIDEZ da sua interface, sem considerar os seus detalhes
• Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de uma boa NAVEGAÇÃO
TO
OLS
• Usado principalmente por dois motivos:
• Ter uma VISÃO GERAL, em alto nível, da interface de usuário (arquitetura visual da UI)
• Modelar as INTERAÇÕES que os usuários terão com seu sistema;
• Como o fluxo oferece uma visão geral, você tem um entendimento RÁPIDO de como o sistema deve FUNCIONAR.
• É uma maneira simples para avaliar todo o fluxo da INTERFACE DO USUÁRIO, e responder algumas perguntas:
• Este fluxo faz sentido?
• Por que eu não posso ir da tela “X” para a tela “Y”?
• É um simples método para validar se a interface será USÁVEL. Se tiverem muitas caixa e muitas ligações entre eles, é um sinal de que seu sistema é muito grande e complexo para pessoas entenderem.
Po
r q
ue u
sar?
Exemplo
Exemplo
Meetings for iPadPaolo Domenico Passeri
ATIVIDADE 2
• LEIAM novamente a “Declaração de Definição do Produto” (DDP)
• LISTEM as principais TELAS do sistema
• CONSIDEREM as interações que usadas para navegação entre as telas (toque, arrasto, click)
• TRACEM o seu DIAGRAMA usando post-its coloridos (uma cor para telas e outra para interações).
• DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a mesma funcionalidade
45 minutos
• Post-It
• Papel
• Lápis/Caneta
PROTOTIPOS BAIXA FIDELIDADE e ALTA FIDELIDADE
•Apoiam a avaliação de todos os
detalhes de um design
•Necessitam mais tempo e
recursos para serem construídos
•Não apoiam a avaliação de todos os
detalhes de um design, como:
• Interações da interface com o usuário
• Layout e formato do produto
• Representações dinâmicas
• Tempo de resposta do sistema
• Apoiam a avaliação do modelo
conceitual usado no design
• Necessitam de pouco tempo e recursos
para serem construídos
BAIXA FIDELIDADE ALTA FIDELIDADE
Baixa FidelidadeVisão Abstrata
Alta FidelidadeMédia Fidelidade
TÉCNICAPrototipos em Papel
• Mock-ups ou REPRESENTAÇÕES de um design
• É uma maneira para AVALIAR um design através de um teste com usuários
• Ferramenta de comunicação para facilitar o ENTENDIMENTO de um design
• São FEITOS de:
O q
ue s
ão?
1.Esquemas feitos a mão2.Fotocópias3.Recortes de pedações de papel4.Uma combinação criativa de qualquer um dos itens acima
• Explorar - permite testar facilmente diferentes idéias
• Comunicar - apresenta as idéias de uma forma que pode ser entendida facilmente
• Colaborar - facilita que todo o time de design contribua e avalie o protótipo
• Validar - determina a eficiência dos elementos de design e do fluxo de navegação
Po
r q
ue u
sar?
• Nos primeiros estágios do processo de design, pois:
• É quando as pessoas são menos resistentes a mudanças
• Foi investido pouco tempo e recursos no projeto
• Ainda não se tem clareza de qual a melhor solução
Qua
ndo
usa
r?
• Exigem MÍNIMOS RECURSOS para serem contruidos
• São contruidos com FERRAMENTAS SIMPLES, que não requerem habilidades específicas
• Permitem que as IDEIAS SEJAM TESTADAS nos primeiros estágios do processo de design
• Facilitam a COLABORAÇÃO entre os membros do time
• Os protótipos são construídos RAPIDAMETE
• Ajudam a IDENTIFICAR os maiores PROBLEMAS de usabilidade do projeto
Vant
agen
s
• As maiores melhorias na interface de um produto são obtidas através da recolha de dados de usabilidade nas fases iniciais do seu desenvolvimento
• Os benefícios da aplicação de metodologias de usabilidade nas fases iniciais é 10 vezes maior do que se for apenas utilizada numa fase posterior (para correção de erros e alteração de elementos na interface)
• É mais barato alterar um produto na sua fase inicial do que fazer alterações a um produto acabado. Estima-se que seja 100 vezes mais barato efetuar alterações antes de se começar a programar do que esperar que todo o desenvolvimento tenha sido efetuado.
Poupar dinheiro usando protótipos
Jacob Nielsen
• Funcionalidade
• Navegação e Estrutura
• Arquiterura da Informação
• Fluxo de telas
• Layout e Agrupamento dos elementos
• Conteúdo
• Terminologia e linguágem
• Rótulos, botões e controles
O que pode ser avaliado?
Usabilidade Arq. Inform. Design
1.Identificar o que prototipar
2.Criar o(s) protótipo(s)
3.Planejar o teste
4.Conduzir o teste com o usuário
5.Analisar os resultados
6.Modificar o design
7.Refazer o teste
Passos para criar um Protótipo em Papel
• O protótipo geralmente não precisa ser completo
• Considere as 3 ou 4 principais tarefas do projeto (mais utilizadas pelo usuário) e faça um protótipo para testá-las
• Comece com conceitos simples e depois evolua para protótipos mais abrangentes ou profundos
Quais elementos incluir no Protótipo em Papel?
Ferramentas necessárias
• Papel• Post-it• Canetinha média
• Tesoura• Fita adesiva
• Cola bastão
• TransparênciasOrganizaçã
o e
Criatividade!
Exemplos
Ponto-i
Exemplo: demonstrando a interface
ATIVIDADEPROJETO
1. Baseado no diagrama de fluxo, criar um protótipo do sistema usando a técnica de prototipação no papel
2. Escolher os principais componentes (3 a 4 telas) e desenha-los.
3. Simular a interação e filmar o resultado
Entregáveis desta aula: post no blog da Faber-Ludens, com DDP, diagrama de fluxo, e vídeo do protótipo que demonstra o uso do sistema.
2 horas
• Tesoura
• Cola
• Revistas
• Papel
• Post-it
• Canetinha
Recommended