O documento discute técnicas de prototipagem para design de interface, incluindo protótipos em papel. Ele explica como prototipagem pode ajudar a testar interfaces com usuários de forma rápida e barata nas fases iniciais de design.
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
Prototipagem em Papel - Oficina
1. “Há mais papel entre um homem e sua
interface que julga sua vã filosofia”
2.
3. Introdução
Do que se trata a oficina:
Uma técnica de prototipagem para Design de interface
Roteiro:
Introdução à UX
Protótipos
Protipagem em papel
Parte prática / Intervalo
Teste do que foi feito
Encerramento
5. UX – Umbrella Topic
Emotion Design
Interface Design
Information Design
Information Architecture
Interaction Design
Usability
User Research
Social Media
…
6. Design de Interface
O que é (comparação com a Matrix)
Foi o que levou a computação a atingir o maior número
de usuários possível. Ambiente amigável x código.
Interface = interação entre coisas. Homem x máquina,
máquina x máquina, etc.
Antes homem interagia com máquina através de
válvulas, alavancas e etc.
7. Arquitetura de Informação
Exemplo do submarino, super mercado
Arquitetura de sistemas é dinâmica, pois o conteúdo
muda, novas tecnologias surgem e os usuários
desenvolvem novas necessidades.
9. Usabilidade
Usabilidade vs UX
Aumentar o desempenho da utilização da interface,
sem desgastar o usuário
Heurísticas – o que são
Testes com usuário (o objetivo é testar a interface, não
o usuário)
Survey
10. Prototipagem
Desenhos de Leonardo da Vincci
Idéias e aplicabilidade - Thomas Edison
Processo, avaliação e método Henry Dreyfuss
Por que prototipar?
Por que protótipos sao representações tangiveis de suas
idéias,
Eles devem refletir os requesitos e as decisões necessárias
Para a melhor desenvolvimento do produto.
12. Prototipagem
O uso do protótipo é intuitivo?
Um usuário tradicional completa tarefas com sucesso?
Deixar claras as consequências de tarefas complexas?
A interface é facil de aprender?
13. Mercado: percepção de valores
para consumidor
Custo é um fator muito importante em qualquer
projeto.
É um produto que vale o investimento?
Os clientes em potencial valorizam a funcionalidade
oferecida?
Requer custo de treinamento?
Requer atualizações caras e/ou frequentes?
14. Olhar e sentir
Se é uma experiência de marca, faz o vínculo do
usuário com o produto?
O conteúdo é compreensível e comunicativo?
Os usuários se divertem durante a utilização?
15. Processo
1. Verificar 6. Definir os critérios do
requerimentos design*
2. Desenvolver: tarefas, 7. projetar e construir o
interações e fluxos protótipo
3. Determinar cenário 8. Revisar o protótipo
9. Validar usabilidade do
4. Definir protótipo protótipo
componentes e
conteúdo 10. Passar do protótipo
para a real
5. Extrair o conteúdo implementação.
necessário
16. Processo
6. Definir os critérios do design
Determinar as telas de maior prioridade
Separar as partes mais importantes de sua tela
Fazer layout das telas mais importantes com todos os
elementos necessários.
Layout das telas importantes restantes
Especificar cada tela, todas as interações, fluxos e elementos
de forma racional.
17. Tipos de Prototipos
Níveis de fidelidade de cada prototipo
Dois tipos de prototipagem de software:
Rapid
“Demorada”
Porque usar cada uma?
18. Tipos de Prototipos
Rapid (é a que nós costumamos trabalhar)
Wireframes
Storyboard
Video
Softwares de prototipagem
Paper
21. Paper Prototyping
Versão em papel da interface, manipulada por uma
pessoa que faz o papel de computador
Os usuários realizam tarefas realistas
22. Paper Prototyping
O que é e o que não é:
É paper protoyping a partir do momento em que há papel e
interação
Wireframes exlusivamente não são paper prototyping, mas
podem vir a ser se houver um "computador" que responda
pela ações
Storyboards : usados na maioria das vezes para conceituar a
interface e o fluxograma do projeto. Pode se tornar um
paper prototyping adicionando informações necessárias
para dar suporte às tarefas que devem ser realizadas.
23. Paper Prototyping
Não requer prática
times multidisciplinares podem trabalhar juntos
Funções envolvidas:
usuário, facilitador, Computador, e observador
24. Benefícios
Na equipe ($$$)
Designing / Rendering / Coding menos gastos com equipe
Desenvolvimento interativo rápido
Economia com testes usando protótipos mais caros
Feitos no estágio inicial – espera-se respostas de interação
25. Benefícios
No usuário (psicológicos)
Respostas mais criativas
Os usuários entendem que a interface não está em estágio
final e por isso se preocupam com coisas mais
importantes, como a navegação em si e a realização de
tarefas – não precisa ter uma estética perfeita ou bem
acabada
O protótipo pode ser remendado e atualizado durante
os testes (até mesmo pelo próprio usuário)
26. Paper prototyping
e usabilidade
Determinar as metas do teste – o que se quer aprender
Quem são os usuários ?
Criar tarefas ao redor do que os usuários irão fazer
Criar os protótipos em papel das peças necessárias
para a performance das tarefas
Preparar o teste (poupar discussões internas sobre a
interface)
27. Paper prototyping
e usabilidade
Conduzir vários testes de usabilidade para refinar o
protótipo
Estabelecer as prioridades para os problemas
encontrados
Planejar mudanças adicionais e anotá-las para que
possam ser feitas depois
Comunicar suas descobertas para os que não estiverem
diretamente envolvidos
28. Dicas
Linhas retas não são essenciais para os protótipos (se o
alinhamento se torna realmente importante a
interface provavelmente deveria ser feita com ajuda
de um software).
Nas fases iniciais quando ainda estamos tentando
entender as necessidades dos usuários ou
estabelecer a funcionalidade, tamanho pode não ser
tão crítico como é nas fases posteriores do projeto.
29. Obrigado, e mantenham contato!
Diego Coutinho
diego.coutinho@ltia.fc.unesp.br
Fernanda Rodrigues
fernanda.rodrigues@ltia.fc.unesp.br
Henrique Perticarati
henrique.perticarati@ltia.fc.unesp.br
Editor's Notes
Alguem está familiarizado? Tem alguma idéia?
O que é o Ltia? - Laboratório de TI - Auto-sustentável O que é o AIR? - Grupo de UX - design de interface - aprendizado na prática e sob demanda! Piada pronta: premios do air
O que é o mergulho: - Uma técnica de prototipagem para Design de interface - Roteiro: - Introdução à UX - Protótipos - Protipagem em papel - Parte prática / Intervalo - Teste do que foi feito - Encerramento
- Experiencia em geral - Usuario - User Experience - Umbrella Topic
- Perguntar se alguem sabe - O que é (matrix) - Foi o que levou a computação a atingir o maior numero de usuarios possivel. Ambiente amigavel x codigo. - Interface = interação entre coisas. Homem x máquina, máquuina x máquina, etc. - Antes homem interagia com máquina através de válvulas, alavancas e etc. - Exemplos do mundo digital e analógico. - Enfatizar que vamos planezar uma interface digital.
- Exemplo do submarino - Exemplo do super mercado - Video - Retomar o video e explicar a metáfora do universo. - Arquitetura de sistemas pode ser dinamica, pois o conteudo muda, novas tecnologias surgem e os usuarios desenvolvem novas necessidades.
- Usabilidade vs UX - Aumentar o desempenho da utilizacao da interface, sem desgastar o usuario - … - - Heuristicas – o que são - Testes com Usuario (o objetivo é testar a interface, nao o usuario) - Survey
Histórico: Desenhos de Leonardo da Vincci Idéias e aplicabilidade Thomas Edison Processo, avaliação e método Henry Dreyfuss Porque prototipar? Por que protótipos sao representações tangiveis de suas idéias, eles devem refletir os requesitos e as decisões necessárias para a melhor desenvolvimento do produto.
O uso do protótipo é intuitivo? Um usuário tradicional completa tarefas com sucesso? Deixar claras as consequencias de tarefas complexas? A interface é facil de aprender?
É um produto que vale o investimento? Os clientes em potencial valorizam a funcionalidade oferecida? Requer custo de treinamento? Requer atualizações caras e/ou frequentes?
Se é uma experiência de marca, faz o vínculo do usuário com o produto? O conteúdo é compreensível e comunicativo? Os usuários se divertem durante a utilização?
6. Definir os critérios do design - Determinar as telas de maior prioridade - Separar as partes mais importantes de sua tela - Fazer layout das telas mais importantes com todos os elementos necessários. - Layout das telas importantes restantes - Especificar cada tela, todas as interações, fluxos e elementos de forma racional.
Dois tipos de prototipagem de software: - Rapid - “Demorada” - Porque usar cada uma? Lembrar dos niveis de fidelidade de cada prototipo Rapid (é a que nós costumamos trabalhar) - Wireframes - Storyboard - Video - Softwares de prototipagem - Paper
Wireframes
- Teste de usabilidade - tarefas realistas - versão em papel da interface (manipulada por uma pessoa que faz o papel de computador, e que não explica como a interface funciona) O que é e o que não: - paper protoyping a partir do momento em q há papel e interação - wireframes exlusivamente não são paper prototyping, mas podem vir a ser se houver um "computador" q responda pela ações - storyboards : usados na maioria das vezes para conceituar a interface e o fluxograma do projeto. Pode se tornar um paper prototyping adicionando informações necessárias para dar suporte às tarefas que devem ser realizadas. - Não requer prática - times multidisciplinares podem trabalhar juntos Funções envolvidas: usuário, facilitador, Computador, e observador
Na equipe ($$$) Designing / Rendering / Coding – sem gastos = menos gastos com equipe Desenvolvimento interativo rápido Economia com testes usando protótipos mais caros Uma vez q são feitos no estágio inicial, só precisa-se ter uma resposta (rápida) de como o usuário vai se comportar com o No usuário (psicológicos) programa/site/etc Respostas mais criativas Os usuários entendem q a interface não está em estágio final e por isso se preocupam com coisas mais importantes, como a navegação em si e a realização de tarefas – não precisa ter uma estética perfeita ou bem acabada O protótipo pode ser remendado e atualizado durante os testes (até mesmo pelo próprio usuário)
Determinar as metas do teste – o que se quer aprender Quem são os usuários ? Criar tarefas ao redor do que os usuários irão fazer Criar os protótipos em papel das peças necessárias para a performance das tarefas Preparar o teste (poupar discussões internas sobre a interface) Conduzir vários testes de usabilidade para refinar o protótipo Estabelecer as prioridades para os problemas encontrados Planejar mudanças adicionais e anotá-las para que possam ser feitas depois Comunicar suas descobertas para os que não estiverem diretamente envolvidos
Dicas Funções específicas Linhas retas não são essenciais para os protótipos (se o alinhamento se torna realmente importante a interface provavelmente deveria ser feita com ajuda de um software). Nas fases iniciais quando ainda estamos tentando entender as necessidades dos usuários ou estabelecer a funcionalidade, tamanho pode não ser tão crítico como é nas fases posteriores do projeto.