Módulo 3Desenvolvimento de Projetos InterativosEspecificação e Implementação Edyd Junges @edyd Instituto Faber-Ludens @fab...
Edyd Junges @edyd                 www.faberludens.com.br• Publicitário• Desenvolvedor Web• Pós-Graduando em Design de Inte...
Revisão rápida: Conceitualização"O estudo da organização da informação que permite aousuário chegar ao entendimento" (Wurm...
Modelo Processual
Métodos de Pesquisa       • Entrevistas Contextuais       • Questionário       • Personas       • Moodboard       • Mapas ...
Personas
Moodboard
Mapas Mentais
Métodos de Pesquisa       • Cenários       • Etnografia Virtual       • User Stories       • Storyboard
User Stories
Storyboard
Métodos de Pesquisa       • Focus Group       • Shadowing       • Diário de Uso Continuado       • Benchmark
Estratégia       Bottom-up - Identificação dos tipos de  documentos       Top-down - Organização e rotulação       Desi...
Concepção: Métodos e Ferramentas  • Inventário de Conteúdo  • Diagrama de afinidades  • Card-Sorting (http://websort.net/)...
Concepção: Métodos e Ferramentas  • Service Blueprint  • Casos de Uso  • Experience Map (service string)  • Fluxograma de ...
Service Blueprint
Casos de Uso
Experience Maphttp://wireframes.linowski.ca/wp-content/themes/darwin/images/full141.png
Fluxograma de Interação/Navegação
Vocabulário Visual    http://iainstitute.org/pt/translations/000332.html
Diagrama Sequencial
Diagrama Sequencial Negativo
Concepção: Métodos e Ferramentas  • Prototipação em Papel  • Wireframe  • Wireflow  • Mockup  • Protótipo Funcional  • Pro...
Wireframes
Wireflow
Protótipo funcional
Desenv. de Projetos Interativos • Especificação   o   Documentação do projeto e comunicação       das decisões de design p...
Especificação:documentação e comunicação  • Transformação da estratégia e concepção  • Elaboração de documentação detalhad...
Especificação:documentação e comunicação  • Foco nas características mais importantes    do sistema  • Discutir modificaçõ...
Especificação: comunicação  • Visão macro da solução detalhada  • Documentos de como construir o website  • Consistência e...
Especificação: clientes internos   • Arquitetos de Informação   • Diretores de Arte e Designers Gráficos   • Redatores e P...
Especificação: comunicação  • Registrar regras  • Demonstrar a aplicação das regras
Especificação: modelos gráficos   • Informações de forma concisa e compacta   • Visualização subdividida e hierárquica   •...
Especificação: documentação  • Wireframes  • Sitegrama (blueprint)  • Fluxograma de navegação  • Vocabulário Controlado
Sitegrama
Sitegrama
Vocabulário Controlado   • Contém a taxonomia   • Pode conter um thesauro   • Gerenciadores de conteúdo
Especificação: documentação  • Biblioteca de padrões    o   Yahoo! Design Pattern Library    o   Welies Pattern Library  •...
Implementação: construção• Conforme especificado• Designers, Redatores, Programadores, etc.• Especificações desenvolvidas ...
Implementação: fases  • Validação do Design  • Transferência de Conhecimento
Avaliação • Validação e testes • Análise dos resultados do projeto • Avaliação em função dos objetivos iniciais • Filo...
Avaliação • Análise de Estatísticas de navegação • Análise Heurística • Avaliação de Interface • Testes de Usabilidade
Avaliação de Interface  • Métodos com usuários    o Questionários    o Co-discovery    o Diário de uso    o Feature checkl...
Análise de Estatísticas de navegação  • Análise de Estastísticas  • Mensuração  • Taxas de Conversão  • Teste A/B
Análise de Estatísticas de navegação
Análise Heurística  • Validação e testes  • Análise dos resultados do projeto  • Avaliação em função dos objetivos ini...
Análise Heurística  • Heurísticas para Avaliação de Usabilidade em  Sistemas - Jakob Nielsen  http://usabilidoido.com.br/a...
Avaliação• Dados numéricos: a língua do cliente.• Aprendizado para projetos futuros• Melhora contínua do website
Edyd Junges @edydInstituto Faber-Ludens @faberludens     www.faberludens.com.br
Desenvolvimento de Projetos Interativos: Especificação e Implementação
Desenvolvimento de Projetos Interativos: Especificação e Implementação
Upcoming SlideShare
Loading in …5
×

Desenvolvimento de Projetos Interativos: Especificação e Implementação

2,562 views
2,396 views

Published on

Curso de Arquitetura da Informação ministrado no iDIGO - Rio de Janeiro

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,562
On SlideShare
0
From Embeds
0
Number of Embeds
426
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Desenvolvimento de Projetos Interativos: Especificação e Implementação

  1. 1. Módulo 3Desenvolvimento de Projetos InterativosEspecificação e Implementação Edyd Junges @edyd Instituto Faber-Ludens @faberludens www.faberludens.com.br
  2. 2. Edyd Junges @edyd www.faberludens.com.br• Publicitário• Desenvolvedor Web• Pós-Graduando em Design de Interação• Consultor de Inovação em User Experienceno Instituto Faber-Ludens @faberludens
  3. 3. Revisão rápida: Conceitualização"O estudo da organização da informação que permite aousuário chegar ao entendimento" (Wurman)"Organização da estrutura de um website e seu conteúdo,rotulagem e categorização da informação e o design desistemas de busca." (Rosenfeld e Morville)"Termo criado para legitimar a estruturalização de ambientesinformacionais para maior eficiência e controle do acessoà informação por uma determinada organização de pessoas."(Amstel)
  4. 4. Modelo Processual
  5. 5. Métodos de Pesquisa • Entrevistas Contextuais • Questionário • Personas • Moodboard • Mapas Mentais
  6. 6. Personas
  7. 7. Moodboard
  8. 8. Mapas Mentais
  9. 9. Métodos de Pesquisa • Cenários • Etnografia Virtual • User Stories • Storyboard
  10. 10. User Stories
  11. 11. Storyboard
  12. 12. Métodos de Pesquisa • Focus Group • Shadowing • Diário de Uso Continuado • Benchmark
  13. 13. Estratégia  Bottom-up - Identificação dos tipos de documentos  Top-down - Organização e rotulação  Design do Sistema de navegação  Definição de campos de Metadados (locais)  Integração Tecnológica (sistemas)  Gerenciamento estratégico
  14. 14. Concepção: Métodos e Ferramentas • Inventário de Conteúdo • Diagrama de afinidades • Card-Sorting (http://websort.net/) • Taxonomia • Tipologia de páginas (idioms)
  15. 15. Concepção: Métodos e Ferramentas • Service Blueprint • Casos de Uso • Experience Map (service string) • Fluxograma de Interação/Navegação • Diagrama Sequencial
  16. 16. Service Blueprint
  17. 17. Casos de Uso
  18. 18. Experience Maphttp://wireframes.linowski.ca/wp-content/themes/darwin/images/full141.png
  19. 19. Fluxograma de Interação/Navegação
  20. 20. Vocabulário Visual http://iainstitute.org/pt/translations/000332.html
  21. 21. Diagrama Sequencial
  22. 22. Diagrama Sequencial Negativo
  23. 23. Concepção: Métodos e Ferramentas • Prototipação em Papel • Wireframe • Wireflow • Mockup • Protótipo Funcional • Protótipo em Vídeo
  24. 24. Wireframes
  25. 25. Wireflow
  26. 26. Protótipo funcional
  27. 27. Desenv. de Projetos Interativos • Especificação o Documentação do projeto e comunicação das decisões de design para clientes e desenvolvedores • Implementação o Avaliação das soluções e relação projeto/entrega
  28. 28. Especificação:documentação e comunicação • Transformação da estratégia e concepção • Elaboração de documentação detalhada • Testes com o usuários/clientes • Revisão dos documentos elaborados
  29. 29. Especificação:documentação e comunicação • Foco nas características mais importantes do sistema • Discutir modificações e correções nos requisitos (baixo custo e mínimo risco) • Garantir que a documentação é adequada para comunicação com projetistas e programadores
  30. 30. Especificação: comunicação • Visão macro da solução detalhada • Documentos de como construir o website • Consistência em manutenções futuras • Comunicar para clientes internos e externos
  31. 31. Especificação: clientes internos • Arquitetos de Informação • Diretores de Arte e Designers Gráficos • Redatores e Produtores de Conteúdo • Programadores e Analistas
  32. 32. Especificação: comunicação • Registrar regras • Demonstrar a aplicação das regras
  33. 33. Especificação: modelos gráficos • Informações de forma concisa e compacta • Visualização subdividida e hierárquica • Redundância mínima
  34. 34. Especificação: documentação • Wireframes • Sitegrama (blueprint) • Fluxograma de navegação • Vocabulário Controlado
  35. 35. Sitegrama
  36. 36. Sitegrama
  37. 37. Vocabulário Controlado • Contém a taxonomia • Pode conter um thesauro • Gerenciadores de conteúdo
  38. 38. Especificação: documentação • Biblioteca de padrões o Yahoo! Design Pattern Library o Welies Pattern Library • Guidelines o Apple Human Interface Guidelines o Android User Interface Guidelines
  39. 39. Implementação: construção• Conforme especificado• Designers, Redatores, Programadores, etc.• Especificações desenvolvidas e implementadas• O êxito desta fase depende das fases anteriores• Arquiteto de info acompanha a implementação• Verificação do seguimento das especificações
  40. 40. Implementação: fases • Validação do Design • Transferência de Conhecimento
  41. 41. Avaliação • Validação e testes • Análise dos resultados do projeto • Avaliação em função dos objetivos iniciais • Filosofia de melhoria contínua do website
  42. 42. Avaliação • Análise de Estatísticas de navegação • Análise Heurística • Avaliação de Interface • Testes de Usabilidade
  43. 43. Avaliação de Interface • Métodos com usuários o Questionários o Co-discovery o Diário de uso o Feature checklist o Observação de campo o Entrevista contextual o Card sorting o Icon sorting o Prototipação em papel o Análise de Estatística de Uso • Métodos sem usuários o Critical Incidentes Technique o Checklists o Análise de Tarefa o Teoria e Prática de Avaliação Heurística
  44. 44. Análise de Estatísticas de navegação • Análise de Estastísticas • Mensuração • Taxas de Conversão • Teste A/B
  45. 45. Análise de Estatísticas de navegação
  46. 46. Análise Heurística • Validação e testes • Análise dos resultados do projeto • Avaliação em função dos objetivos iniciais • Filosofia de melhoria contínua do website
  47. 47. Análise Heurística • Heurísticas para Avaliação de Usabilidade em Sistemas - Jakob Nielsen http://usabilidoido.com.br/as_10_heuristicas_de_ni elsen_.html • Heuristícas para avaliação de Usabilidade de Portais Corporativos - Cláudia Dias http://www.reocities.com/claudiaad/heuristicas_we b.html •Recomendações básicas de Usabilidade baseadas em BASTIEN E SCAPIN (1993), DUL E WEERDMEESTER (1991), JORDAN (1998), SHNEIDERMAN(2005) E NIELSEN (1994).
  48. 48. Avaliação• Dados numéricos: a língua do cliente.• Aprendizado para projetos futuros• Melhora contínua do website
  49. 49. Edyd Junges @edydInstituto Faber-Ludens @faberludens www.faberludens.com.br

×