Prototipação
PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM)
TWITTER: @OZIELNETO
Como interfaces não planejadas
podem afetar o resultado final de um
projeto?
Antes da Prototipação
Discutir sobre as possíveis ideias e soluções
Protótipo
 Surge como a pedra angular (algo fundamental)
do processo de criação, é graças a ele que
podemos imaginar o di...
Para que protótipos?
 Quando se constroem protótipos de diversos
tamanhos, com formas e funcionalidades
diferentes, é mai...
Qual o momento da
prototipagem?
Conseguimos com um
protótipo
 Obter retorno sobre desenho mais depressa
 Poupar tempo de desenvolvimento e dinheiro
 Ex...
Quais tipos de protótipos
iremos estudar?
 Cenários
 Storyboards
 Protótipos de baixa fidelidade e de alta
fidelidade
...
Cenários
O que é um cenário?
 Um meio de representar, analisar e planejar
como um sistema computacional pode causar
impacto nas at...
Exemplo de um cenário
João dirigiu-se à máquina de vender bilhetes de metrô,
escolheu o seu destino carregando no botão fí...
Componentes de um
cenário
 Nome – um rótulo curto para referência a um cenário
específico.
 Descrição – em geral texto i...
Exemplo do livro de
Rocha (2003)
 Nome: Iniciando o Jogo da Fábrica: atividade síncrona à
distância baseada em sistema co...
Analisando o uso de
cenários
 Permitem desenvolver e explorar o espaço de
design com um mínimo de comprometimento.
 Perm...
Em que momento do
processo surgem os
cenários?
ED
Storyboards
Storyboard no cinema
 Os storyboards surgiram originalmente do
cinema, para se ter uma idéia da cena.
ED
Storyboard no cinema
 Neles se combinam imagens e textos para
complementar as informações das cena.
 As setas ajudam a c...
Os storyboards das
interfaces
 Os storyboards são os desenhos de tela e as
conexões entre elas.
 Eles podem ser apresent...
Os storyboards das
interfaces
 São usados para
especificar as ações
que os usuários podem
efetuar para resolver
cenários ...
Projeto IBIMM
Storyboard para interface
 Elementos do sistema e suas ligações começam
a ser organizados
 Usuários conseguem avaliar ra...
Storyboard para interface
 Oferecem uma série de
esboços que ilustram os
detalhes e as interações
importantes. Os detalhe...
Ex. de storyboard (mais
elaborado)
ED
Protótipos de
baixa
fidelidade
Protótipos de Baixa
Fidelidade
 Fidelidade refere-se ao nível de detalhe.
 É uma representação ‘artística’, um esboço, c...
Protótipos de Baixa
Fidelidade
 são construídos, na maioria
das vezes, em papel e
podem ser testados com
usuários reais, ...
Protótipos de Baixa
Fidelidade
 Seu uso pode aumentar a qualidade das
interfaces, pois permitem várias avaliações pelo
us...
Protótipos de Baixa
Fidelidade
 Com eles, os usuários são obrigados a pensar no
conteúdo em vez da aparência, uma vez que...
Protótipos Físicos de Baixa
Fidelidade (Gadgets)
 Neste tipo de protótipo, as dimensões e o
aspecto são importantes, embo...
Protótipos Físicos de Baixa
Fidelidade (Gadgets)
Protótipos de
Alta
Fidelidade
Protótipos de Alta
Fidelidade
 Assemelham-se ao produto final. Neles os
detalhes são importantes, pois simulam todas as
f...
Protótipos de Alta
Fidelidade
 A apresentação formal
sugere um “produto
acabado”. Além de
visualizar as conexões,
consegu...
Protótipos de Alta
Fidelidade
 Acarreta mais
tempo e dinheiro
investido em sua
confecção do
que no protótipo
de baixa
fid...
Wizard of Oz
Wizard of Oz
 Permite que tecnologias que ainda não existem
sejam avaliadas por meio do uso de uma pessoa
que simula a re...
Como funciona o método
Wizard of Oz?
 Uma pessoa – que será o “wizard” – senta em um
ambiente separado e observa as ações...
O uso do Wizard of Oz
pode
 Buscar informações sobre a natureza da interação.
 Testar quais comandos e mecanismos melhor...
Wireframes
Projeto IBIMM
Wireframe de Baixa
Fidelidade
Projeto IBIMM
Wireframe de Alta
Fidelidade
Wireframe e Design da
Página
 O wireframe não limita o trabalho de um
designer, mas apenas orienta quanto as
informações ...
Projeto Concurso Quiz Terra Sonora
Wireframe
Projeto Concurso Quiz Terra Sonora
Design
Projeto Concurso Quiz Terra Sonora
Wireframe
Projeto Concurso Quiz Terra Sonora
Design
Projeto Hatalé (www.hatale.ca)
Wireframe
Projeto Hatalé (www.hatale.ca)
Design
Projeto Como en Casa (www.comoencasa.ca)
Wireframe
Projeto Como en Casa (www.comoencasa.ca)
Design
Tools
 Cloud Wirefrme.cc
https://wireframe.cc/
Prototipação
PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM)
TWITTER: @OZIELNETO
Usabilidade de Interfaces - Parte 3
Usabilidade de Interfaces - Parte 3
Próximos SlideShares
Carregando em…5
×

Usabilidade de Interfaces - Parte 3

454 visualizações

Publicada em

Usabilidade de Interfaces, prototipação

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
454
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
12
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Usabilidade de Interfaces - Parte 3

  1. 1. Prototipação PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM) TWITTER: @OZIELNETO
  2. 2. Como interfaces não planejadas podem afetar o resultado final de um projeto?
  3. 3. Antes da Prototipação Discutir sobre as possíveis ideias e soluções
  4. 4. Protótipo  Surge como a pedra angular (algo fundamental) do processo de criação, é graças a ele que podemos imaginar o dispositivo ou a experiência que se está tentando criar. • É muito difícil descrever um aparelho que não existe. Como explicar o que é um iPod a alguém que nunca o viu?
  5. 5. Para que protótipos?  Quando se constroem protótipos de diversos tamanhos, com formas e funcionalidades diferentes, é mais fácil transmitir o que se tem em mente e tirar conclusões.  Eles não apenas comunicam idéias, como também persuadem o cliente e o convence a aceitar a proposta.
  6. 6. Qual o momento da prototipagem?
  7. 7. Conseguimos com um protótipo  Obter retorno sobre desenho mais depressa  Poupar tempo de desenvolvimento e dinheiro  Experimentar alternativas de desenho  Resolver problemas antes de escrever o código  Manter desenho centrado nos usuários
  8. 8. Quais tipos de protótipos iremos estudar?  Cenários  Storyboards  Protótipos de baixa fidelidade e de alta fidelidade  Wizard of OZ  Wireframes
  9. 9. Cenários
  10. 10. O que é um cenário?  Um meio de representar, analisar e planejar como um sistema computacional pode causar impacto nas atividades e experiências do usuário.  É uma descrição em geral narrativa, mas também em outro formatos (storyboards, cartoons anotados, maquetes em vídeos, protótipos em script), que as pessoas fazem e experimentam conforme elas imaginam ou tentam fazer uso de sistemas e aplicações.
  11. 11. Exemplo de um cenário João dirigiu-se à máquina de vender bilhetes de metrô, escolheu o seu destino carregando no botão físico da máquina correspondente área 1, depois selecionou um bilhete de ida e volta carregando na opção correspondente. Quando lhe apareceu um diálogo para confirmar a informação introduzida, o João carregou no botão <OK> e o sistema passou para a tela de pagamento, selecionando o João a opção de pagar com débito automático na conta corrente. O João passou o cartão do banco na ranhura e introduziu a senha correspondente. Finalmente, o João carregou no botão <Recibo> para receber um recibo da sua operação. ED
  12. 12. Componentes de um cenário  Nome – um rótulo curto para referência a um cenário específico.  Descrição – em geral texto ilustrando uma situação específica.  Lógica Essencial – com relação ao usuário, representações e ações que devem estar disponíveis ao usuário, independentemente de aspectos relacionas à implementação, com relação ao sistema, informações necessárias para que o sistema funcione como requerido.  Passos Genéricos – sequência de passos que o usuário realizaria, independentemente de aspectos de implementação.  Passos Específicos – sequência de ações do usuários seguidas de feedback do sistema, considerando possibilidade de ações erradas do usuário. ED
  13. 13. Exemplo do livro de Rocha (2003)  Nome: Iniciando o Jogo da Fábrica: atividade síncrona à distância baseada em sistema computacional  Descrição: Funcionários da fábrica X conectam-se via Internet e iniciam o Jogo da Fábrica: uma simulação de conceitos e processo de manufatura com objetivo de formação.  Lógica Essencial:  (usuário) Cada usuário em seu local de trabalho, ao conectar-se ao sistema, vê a tela inicial do jogo e informações sobre a conexão dos demais participantes, cada um ocupando um célula da linha de manufatura representada no jogo. Cada usuário saúda os demais que estão conectados a distância, pelo canal de comunicação, aguardando início do jogo.  (sistema) Informação necessária para conexão: IP da máquina servidora.  Passos Genéricos: Buscar opção de conexão no menu. Entrar com dados solicitados.  Passos Específicos: Selecionar “Entrar com IP do servidor”. ED
  14. 14. Analisando o uso de cenários  Permitem desenvolver e explorar o espaço de design com um mínimo de comprometimento.  Permitem avaliar a interface inicial sem custos de construir um modelo concreto.  Como não há interação com dados reais, ele não permite flexibilidade para o usuário, pois os usuários não podem se mover livremente pelo sistema. ED
  15. 15. Em que momento do processo surgem os cenários? ED
  16. 16. Storyboards
  17. 17. Storyboard no cinema  Os storyboards surgiram originalmente do cinema, para se ter uma idéia da cena. ED
  18. 18. Storyboard no cinema  Neles se combinam imagens e textos para complementar as informações das cena.  As setas ajudam a compreender as ações. ED
  19. 19. Os storyboards das interfaces  Os storyboards são os desenhos de tela e as conexões entre elas.  Eles podem ser apresentados a usuários potenciais que tentam explicar o que pensam ser possível fazer e efeitos esperados de suas ações.  Desta maneira, eles complementam os cenários.
  20. 20. Os storyboards das interfaces  São usados para especificar as ações que os usuários podem efetuar para resolver cenários de utilização.  Desta maneira, eles complementam os cenários.
  21. 21. Projeto IBIMM
  22. 22. Storyboard para interface  Elementos do sistema e suas ligações começam a ser organizados  Usuários conseguem avaliar rapidamente se os passos estão levando ao lugar desejado.
  23. 23. Storyboard para interface  Oferecem uma série de esboços que ilustram os detalhes e as interações importantes. Os detalhes irrelevantes são suprimidos.
  24. 24. Ex. de storyboard (mais elaborado) ED
  25. 25. Protótipos de baixa fidelidade
  26. 26. Protótipos de Baixa Fidelidade  Fidelidade refere-se ao nível de detalhe.  É uma representação ‘artística’, um esboço, com muitos detalhes omissos  Vantagem: não tomam muito tempo para seu desenvolvimento e não requer equipamento dispendioso.
  27. 27. Protótipos de Baixa Fidelidade  são construídos, na maioria das vezes, em papel e podem ser testados com usuários reais, assim, permitem demonstrar o comportamento da interface muito cedo no desenvolvimento
  28. 28. Protótipos de Baixa Fidelidade  Seu uso pode aumentar a qualidade das interfaces, pois permitem várias avaliações pelo usuário em pouco tempo e o retorno imediato.
  29. 29. Protótipos de Baixa Fidelidade  Com eles, os usuários são obrigados a pensar no conteúdo em vez da aparência, uma vez que somente são realizados esboços que servem como protótipos
  30. 30. Protótipos Físicos de Baixa Fidelidade (Gadgets)  Neste tipo de protótipo, as dimensões e o aspecto são importantes, embora ainda possam ser feitos com materiais simples como cartolina e massa de modelar.
  31. 31. Protótipos Físicos de Baixa Fidelidade (Gadgets)
  32. 32. Protótipos de Alta Fidelidade
  33. 33. Protótipos de Alta Fidelidade  Assemelham-se ao produto final. Neles os detalhes são importantes, pois simulam todas as funcionalidades do sistema. Wearable computer - Eurotech
  34. 34. Protótipos de Alta Fidelidade  A apresentação formal sugere um “produto acabado”. Além de visualizar as conexões, conseguimos visualizar o design: o arranjo gráfico, o uso das cores, os tipos, etc. Soft-shell mobile phone – http://www.nec-design.co.jp/showcase/
  35. 35. Protótipos de Alta Fidelidade  Acarreta mais tempo e dinheiro investido em sua confecção do que no protótipo de baixa fidelidade P-ISM : Pen-style Personal Networking Gadget Package http://www.nec-design.co.jp/showcase/
  36. 36. Wizard of Oz
  37. 37. Wizard of Oz  Permite que tecnologias que ainda não existem sejam avaliadas por meio do uso de uma pessoa que simula a resposta de um sistema.  Muitas vezes, o usuário não sabe que as respostas estão sendo geradas por uma pessoa e não um computador.  Com isto, esta técnica permite testar conceitos difíceis de interfaces e sugerir funcionalidades antes que o sistema seja implementado. ED
  38. 38. Como funciona o método Wizard of Oz?  Uma pessoa – que será o “wizard” – senta em um ambiente separado e observa as ações dos usuários e, então, simula as respostas do sistema em tempo real.
  39. 39. O uso do Wizard of Oz pode  Buscar informações sobre a natureza da interação.  Testar quais comandos e mecanismos melhor representam a interação, de maneira que os esforços subsequentes de desenvolvimento sejam direcionados apropriadamente.  Testar a interação de um dispositivo antes de construir um modelo funcional.  Descobrir os problemas que as pessoas terão com esta interface.  Investigar aspectos visuais dos produtos. ED
  40. 40. Wireframes
  41. 41. Projeto IBIMM Wireframe de Baixa Fidelidade
  42. 42. Projeto IBIMM Wireframe de Alta Fidelidade
  43. 43. Wireframe e Design da Página  O wireframe não limita o trabalho de um designer, mas apenas orienta quanto as informações e proposta de peso de importância ou relevância de cada item.  Veja alguns exemplos de wireframes e design da página.
  44. 44. Projeto Concurso Quiz Terra Sonora Wireframe
  45. 45. Projeto Concurso Quiz Terra Sonora Design
  46. 46. Projeto Concurso Quiz Terra Sonora Wireframe
  47. 47. Projeto Concurso Quiz Terra Sonora Design
  48. 48. Projeto Hatalé (www.hatale.ca) Wireframe
  49. 49. Projeto Hatalé (www.hatale.ca) Design
  50. 50. Projeto Como en Casa (www.comoencasa.ca) Wireframe
  51. 51. Projeto Como en Casa (www.comoencasa.ca) Design
  52. 52. Tools  Cloud Wirefrme.cc https://wireframe.cc/
  53. 53. Prototipação PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM) TWITTER: @OZIELNETO

×