Interface Homem-Computador

Transcrição

1 Faculdade de Ciências e Tecnologia do Maranhão Interface Homem-Computador Aula: Prototipação Professor: M.Sc. Flávio Barros [email protected]

2 Prototipar desenvolver e testar interfaces antes de iniciar a programação.

3 Desafios... Interfaces cada vez mais complexos; Prazos de desenvolvimento cada vez mais curtos; É necessário usar uma metodologia mais simples e rápida para modelação de interfaces; Novos desafios através do uso de Rich Internet Applications: Aplicações de Internet Rica (RIA) são Aplicações Web que tem características e funcionalidades de softwares tradicionais do tipo Desktop; RIA transferem todo o processamento da interface para o navegador da internet, porém mantém a maior parte dos dados (ex. o estado do programa, dados do banco) no servidor de aplicação; RIAs normalmente: rodam em um navegador, ou não necessitam de instalação; e rodam localmente em um ambiente seguro chamado sandbox.

4 O que são Protótipos? Usados para identificar as interações em rascunho e o design dos ecrãs (significa tela, display, monitor); Podem ser feitos testes e simulações rápidas; Servem para transmitir aos designers os ecrãs e as funcionalidades que o interface deverá ter, bem como os fluxos de informação; Podem ser concebidos em papel ou outros formatos (PowerPoint, Visio, etc...)

5 Protótipos Porquê em Papel e não noutro formato? É mais fácil transpor as ideias diretamente para o papel; É mais rápido de desenhar do que usando qualquer software; Porque em papel dá para apagar e voltar a escrever por cima, tirar notas, dobrar, recortar... (mesmo durante os testes de usabilidade); É mais fácil envolver outras pessoas no desenvolvimento dos protótipos; Os utilizadores conseguem ser mais críticos ao olharem para um protótipo em papel do que para uma página com um aspecto mais formal.

6 Protótipos Consegue-sereduzir gastos com este método? As maiores melhorias no 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 no 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.

7 Prototipação e o Ciclo de Design

8 Exemplos de Protótipos Alta Fidelidade Baixa Fidelidade Média Fidelidade Fonte:

9 Protótipos: comparativos Baixa Fidelidade X Alta Fidelidade 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 Apoiam a avaliação de todos os detalhes de um design Necessitam mais tempo e recursos para serem construídos

10 Protótipos O que são Protótipos em Papel? Representações de umdesign; É 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 através de: Esquemas feitos a mão; Foto-copias; Recortes de pedaços de papel; Uma combinação criativa de qualquer um dos itens acima.

11 Protótipos Vantagens dos Protótipos em Papel? Explorar - Permite testar facilmente diferentes ideias; Comunicar - Apresenta as ideias de uma forma que pode ser entendida facilmente; Colaborar - Facilita que todo o time de design construa e avalie o protótipo; Validar - Determina a eficiência dos elementos de design e do fluxo de navegação.

12 Protótipos Desvantagens dos protótipos em papel? Difícil copiar o comportamento de alguns elementos do interface: scrollbars, transmissão de informação através do uso de cores, animações, Rich Applications, etc... Durante a concepção e testes aos protótipos, não é escrita nenhuma linha de código, o que pode atrasar o tempo total disponível para o projeto; O aspecto dos ecrãs pode fazer com que os utilizadores (e o cliente) sinta que é um método pouco profissional; Não permite encontrar todo o tipo de problemas de usabilidade.

13 Protótipos Quando usar protótipos empapel? Nos primeiros estágios do processo de design, porque: 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.

14 Protótipos Ferramentas necessárias para prototipar em papel? Papel sulfite; Canetas coloridas; Tesoura; Post-it; Durex; Quaisquer outros materiais de escritório;... e criatividade!

15 Protótipos Exemplo - Prototipação em papel

16 Protótipos Exemplo - Prototipação em papel

17 Protótipos Aplicação de Prototipação em Papel Realizado por pelo menos dois avaliadores, um simula o sistema, outro observa experiência de uso Atividades Preparação Coleta de dados Interpretação Consolidação dos resultados Relato dos resultados

18 Protótipos Aplicação de Prototipação em Papel Realizado por pelo menos dois avaliadores, um simula o sistema, outro observa experiência de uso Atividades Preparação Coleta de dados Interpretação Consolidação dos resultados Relato dos resultados Definir tarefas para os participantes executares; Definir perfil dos participantes e recrutá-los; Criar protótipos em papel da interface para executar tarefas; Preparar ambiente para realização dos testes; Executar teste-piloto.

19 Protótipos Representação das telas do sistema em papel Desenhos a mão livre Telas estáticas Menus Dicas sobre elementos da interface Resultados de busca de diálogo, etc. Representar e destacar principais elementos da interface Não há preocupação com detalhes O que não for possível prever, será desenhado durante a simulação

20 Protótipos Ambiente para Avaliação Tipicamente uma sala de reunião Equipamento Câmera de vídeo Gravador de voz

21 Protótipos Aplicação de Prototipação em Papel Realizado por pelo menos dois avaliadores, um simula o sistema, outro observa experiência de uso Atividades Preparação Coleta de dados Interpretação Consolidação dos resultados Relato dos resultados Cada usuário deve executar as tarefas propostas interagindo com os protótipos em papel, mediado pelo avaliador; Avaliador deve Listar problemas encontrados Refinar protótipos em papel para resolver problemas mais simples

22 Protótipos Coleta de Dados Explicar Como estão representados os widgets no papel Como interagir com eles Simulação do sistema Compreender as ações do usuário sobre o protótipo Modificar a interface conforme comportamento planejado para o sistema Não fornecer explicações ou orientações O usuário deve se guiar pelo o que está na interface

23 Protótipos Interpretação Realizada após cada experiência de uso Análise dos dados coletados Identificar e listar problemas de usabilidade Problemas podem ser corrigidos antes da próxima experiência de uso

24 Protótipos Aplicação de Prototipação em Papel Realizado por pelo menos dois avaliadores, um simula o sistema, outro observa experiência de uso Atividades Preparação Coleta de dados Interpretação Consolidação dos resultados Relato dos resultados Priorizar as correções não resolvidos dos protótipos; Sugerir correções.

25 Protótipos Aplicação de Prototipação em Papel Realizado por pelo menos dois avaliadores, um simula o sistema, outro observa experiência de uso Atividades Preparação Coleta de dados Interpretação Consolidação dos resultados Relato dos resultados Relatar os problemas encontrados e sugestões de correções.

26 Protótipos Relato dos Resultados Objetivos e escopo da avaliação Breve descrição do método de prototipação em papel Número e perfil dos avaliadores e dos participantes Tarefas executadas pelos participantes Lista de problemas corrigidos durante avaliação Local, descrição e justificativa, fatores de usabilidade prejudicados, correção realizada no protótipo em papel, indicação se o problema voltou a ocorrer.

27 Prototipagem de Rich Internet Applications Como mostrar em papel as interações deste tipo de aplicações web?

28 Prototipagem de Rich Internet Applications O objetivo de testar um protótipo é o de criar um interface usável; Se for difícil de copiar o comportamento de algum efeito no papel, isso pode significar que o próprio efeito no site não será muito usável;

29 Prototipagem de Rich Internet Applications O objetivo da prototipagem é testar se os utilizadores conseguem realizar as suas tarefas. Os protótipos não precisam de incorporar todos os elementos da página. Apenas necessitam de capturar a funcionalidade do site e fornecer as informações corretas e dentro do mesmo contexto.

30 Prototipagem de Rich Internet Applications

31 Prototipagem de Rich Internet Applications

32 Ferramentas

33 UX Design

34 Axure RP Pro

35 iplotz

36 iplotz

37 MockingBird

38 inpreso Screens

39 Balsamiq Mockups

40 Mockup Screens

41 Pencil Project Um editor de prototipagem, wireframe e mockups. Roda no Linux, Mac e Windows.

42 Pencil Project Um editor de prototipagem, wireframe e mockups. Roda no Linux, Mac e Windows.

43 Técnica: Wireframes para Web Wireframe com papel e caneta em papel quadriculado

44 Conclusão Com Protótipos em Papel... Poupámos tempo e dinheiro; Garantimos um nível elevado de satisfação dos utilizadores e diminuímos a probabilidade de ter que efetuar correções no futuro; Fornecemos à equipa de desenvolvimento um conjunto de ecrãs e especificações que lhes permitiram desenvolver todo o interface tendo em conta as recomendações dos seus reais utilizadores;

45 Conclusão Com Protótipos em Papel... Temos um método simples e rápido para desenhar e testar interfaces; A avaliação é por observação: envolve usuários reais ou potenciais; Avalia-se a usabilidade de um design de IHC por meio de simulação; Identifica problemas antes mesmo de construir uma solução de IHC executável

46 Conclusão Protótipos em papel realmente funcionam? Explique? Sim, funcionam Porque a informalidade é contagiante: Os usuários sentem que podem ajudar a melhorar o produto Os protótipos são fáceis de serem manuseados pelo usuário Os protótipos indicam claramente que o projeto ainda está numa fase de desenvolvimento Porque são rápidos e baratos Não é necessário nenhuma habilidade específica ou ferramenta cara para desenvolver o protótipo Porque permitem a colaboração de todo o time Qualquer pessoa do time de projeto, independente da sua formação entende e pode ajudar na construção do protótipo

47 Referências REIS, Guilhermo. Protótipos em Papel: técnicas de prototipação rápidas Disponível em: < FERNANDES, Leandro A. F. Interface Homem/Máquina: método de prototipação em papel UFF. GOMES, Ivo. Prototipagem em Papel. Leituras Complementares The Third Dimension in Paper Prototypes. Disponível em: < Using Paper Prototypes to Manage Risc. Disponível em: < Paper Prototypes: Still Our Favorite. Disponível em: < Prototyping Using Visio. Disponível em: < prototypingvisio.html>. Paper Prototyping. Disponível em: < Paper Prototyping: Stills from de Video - AlertBox Disponível em: <

48 Faculdade de Ciências e Tecnologia do Maranhão Interface Homem-Computador Obrigado pela atenção! [email protected]