Usabilidade de Interfaces - Parte 3
2 gostaram1,093 visualizações
Prototipação é um processo fundamental no desenvolvimento de interfaces. Existem diferentes tipos de protótipos como cenários, storyboards e protótipos de baixa e alta fidelidade que podem ser usados em diferentes estágios para comunicar ideias, testar funcionalidades e obter feedback dos usuários antes do desenvolvimento final.
Usabilidade de Interfaces - Parte 3
- 1. Prototipação PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM) TWITTER: @OZIELNETO
- 2. Como interfaces não planejadas podem afetar o resultado final de um projeto?
- 4. Antes da Prototipação Discutir sobre as possíveis ideias e soluções
- 5. 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?
- 7. 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.
- 8. Qual o momento da prototipagem?
- 9. 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
- 10. Quais tipos de protótipos iremos estudar? Cenários Storyboards Protótipos de baixa fidelidade e de alta fidelidade Wizard of OZ Wireframes
- 11. Cenários
- 12. 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.
- 13. 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
- 14. 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
- 15. 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
- 16. 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
- 17. Em que momento do processo surgem os cenários? ED
- 18. Storyboards
- 19. Storyboard no cinema Os storyboards surgiram originalmente do cinema, para se ter uma idéia da cena. ED
- 20. 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
- 21. 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.
- 22. 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.
- 23. Projeto IBIMM
- 24. 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.
- 25. 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.
- 26. Ex. de storyboard (mais elaborado) ED
- 28. 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.
- 29. 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
- 30. 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.
- 31. 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
- 32. 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.
- 33. Protótipos Físicos de Baixa Fidelidade (Gadgets)
- 35. 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
- 36. 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/
- 37. 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/
- 38. Wizard of Oz
- 39. 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
- 40. 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.
- 41. 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
- 42. Wireframes
- 43. Projeto IBIMM Wireframe de Baixa Fidelidade
- 44. Projeto IBIMM Wireframe de Alta Fidelidade
- 45. 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.
- 46. Projeto Concurso Quiz Terra Sonora Wireframe
- 47. Projeto Concurso Quiz Terra Sonora Design
- 48. Projeto Concurso Quiz Terra Sonora Wireframe
- 49. Projeto Concurso Quiz Terra Sonora Design
- 52. Projeto Como en Casa (www.comoencasa.ca) Wireframe
- 53. Projeto Como en Casa (www.comoencasa.ca) Design
- 55. Prototipação PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM) TWITTER: @OZIELNETO