Usabilidade de Interfaces - Parte 3

469 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
469
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
13
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

×