interação humano-computador - docentes · interação humano-computador prototipagem. Últimas...
TRANSCRIPT
![Page 1: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/1.jpg)
Danielle Freitas
2014.2http://docente.ifrn.edu.br/daniellefreitas
Interação
Humano-Computador
Prototipagem
![Page 2: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/2.jpg)
Últimas Aulas
Baixa, média e alta fidelidade
Preditiva, empírica e heurística
•Necessidades do usuário•Perfil do usuário•Brainstorming
Metas de usabilidade
![Page 3: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/3.jpg)
O que é um protótipo?
Modelo em escala menor, por
exemplo, um prédio
Parte de um software
![Page 4: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/4.jpg)
O que é um protótipo?
Esboço de papel de uma tela
Fotografia eletrônica
Uma maquete de cartolina
Mockup: Pilha de telas vinculadas por hiperlinks
![Page 5: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/5.jpg)
Qual a função de um protótipo?
Possibilitar que os stakeholders interajam com um produto imaginado
Exemplos:
› PalmPilot (Jeff Hawking)
![Page 6: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/6.jpg)
Por que fazer protótipos?
São úteis quando se está discutindo ideias com os stakeholders, pois facilitam a
comunicação entre os membros da equipe
É uma maneira eficaz de testar as ideias para você mesmo
Encoraja a reflexão sobre o design
Testar a viabilidade técnica
![Page 7: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/7.jpg)
Protótipo
Aparelho para
ajudar crianças
com autismo a
se comunicarem
![Page 8: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/8.jpg)
Prototipagem de Software
Ao se desenvolver um protótipo não é necessário representar toda a
funcionalidade do produto
Somente deve ser representada a funcionalidade que atenda aos objetivos do
teste ou avaliação
![Page 9: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/9.jpg)
Storyboard
Série de telas mostrando como o usuário pode progredir em uma tarefa
![Page 10: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/10.jpg)
Tipos de Prototipação
Baixa fidelidade
Média fidelidade
Alta fidelidade
› Descartáveis
› Funcionais
![Page 11: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/11.jpg)
Prototipação de baixa fidelidade
Pode ser chamado de Wireframe
Baixo nível de detalhes
Usado na fase inicial de desenvolvimento para compreensão de requisitos
Representação das telas em papel e caneta, preferencialmente
Representação visual das funcionalidades
Não possuem recursos de interação
Custo reduzido
Produção extremamente rápida
Descartados após fase inicial
![Page 12: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/12.jpg)
Prototipação de baixa fidelidade
![Page 13: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/13.jpg)
Prototipação de baixa fidelidade
![Page 14: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/14.jpg)
Prototipação de baixa fidelidade
![Page 15: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/15.jpg)
Prototipação de média fidelidade
Apresenta aspectos visuais mais próximos do definitivo
Apresentada algumas sequências de diálogo com o usuário para simular
navegação
Pode fazer uso ferramentas computacionais para sua criação
![Page 16: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/16.jpg)
Prototipação de média fidelidade
![Page 17: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/17.jpg)
Prototipação de média fidelidade
![Page 18: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/18.jpg)
Prototipação de média fidelidade
![Page 19: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/19.jpg)
Prototipação de alta fidelidade
Assemelham-se bastante ao produto final, em termos de aparência visual,
interatividade e navegação.
Desenvolvido e apresentado no computador
Podem ser descartados ou evoluir até a versão final
› Descartados: desenvolvidos em programas específicos de design – Photoshop/Fireworks
(desconsiderando a criação automática de código)
› Evoluir: desenvolvidos em programas WYSIWYG – Dreamweaver, Visual Studio
![Page 20: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/20.jpg)
Protótipos de alta fidelidade
Protótipos que evoluem:
› Reduzem o tempo e custo de desenvolvimento do produto final
› Pode proporcionar testes de funcionalidades do sistema
![Page 21: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/21.jpg)
Prototipação de alta fidelidade
Design: template mosters
![Page 22: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/22.jpg)
Prototipação de alta fidelidade
Design: visual studio
![Page 23: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/23.jpg)
![Page 24: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/24.jpg)
Ferramentas de prototipação
Ferramentas para desenho(solução genérica) › Paint, Corel, Illustrator, InDesign , Powerpoint , Flash...
As próprias IDEs
Ferramentas específicas › Photoshop, Fireworks
› MS Visio (http://office.microsoY.com/pt_br/visio/default.aspx)
› Gliffy (http://www.gliffy.com/examples/wireframes/ )
› Pencil (https://addons.mozilla.org/pt_BR/firefox/addon/8487)
› Axure RP pro (http://www.axure.com/downloads.aspx)
![Page 25: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/25.jpg)
Ferramentas web
http://balsamiq.com/ (muito bom, mas é pago)
http://creately.com/ (muito bom, tem que baixar módulo web)
http://cacoo.com/ (bom)
http://framebox.org (não tem suporte a protótipo web)
http://lovelycharts.com/ (não tem suporte a protótipo web)
https://www.lucidchart.com (não tem suporte a protótipo web)
https://www.draw.io/ (não tem suporte a protótipo web)
http://www.google.com/google-d-s/drawings/ (bem básico mais para paint)
http://www.serena.com/products/prototype-composer/index.html
http://pencil.evolus.vn/en-US/Home.aspx
http://www.mockflow.com/
https://gomockingbird.com/
http://www.lumzy.com/
https://www.jumpchart.com/
http://www.justproto.com/en/
![Page 26: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/26.jpg)
![Page 27: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/27.jpg)
![Page 28: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/28.jpg)
![Page 29: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/29.jpg)
![Page 30: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/30.jpg)
Atividade
Desenvolver, por grupo, um storyboard e um protótipo (baixa
fidelidade) do seu projeto.
![Page 31: Interação Humano-Computador - Docentes · Interação Humano-Computador Prototipagem. Últimas Aulas Baixa, média e alta fidelidade Preditiva, empírica e heurística •Necessidades](https://reader034.vdocuments.mx/reader034/viewer/2022051603/5c00b22409d3f2377a8c217d/html5/thumbnails/31.jpg)
Post com vídeos de interação com
protótipos
http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-
prototyping/