O documento descreve o processo de desenvolvimento de projetos interativos, incluindo pesquisa, concepção, especificação e implementação. Detalha vários métodos e ferramentas para mapear necessidades de usuários, criar wireframes e protótipos, documentar especificações e avaliar soluções.

2. Módulo 3
Desenvolvimento de Projetos Interativos
Especificação e Implementação
Edyd Junges @edyd
Instituto Faber-Ludens @faberludens
www.faberludens.com.br

3. 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 Experience
no Instituto Faber-Ludens @faberludens

4. Revisão rápida: Conceitualização
"O estudo da organização da informação que permite ao
usuá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 de
sistemas de busca." (Rosenfeld e Morville)
"Termo criado para legitimar a estruturalização de ambientes
informacionais para maior eficiência e controle do acesso
à informação por uma determinada organização de pessoas."
(Amstel)

5. Modelo Processual

6. Métodos de Pesquisa
• Entrevistas Contextuais
• Questionário
• Personas
• Moodboard
• Mapas Mentais

7. Personas

8. Moodboard

9. Mapas Mentais

10. Métodos de Pesquisa
• Cenários
• Etnografia Virtual
• User Stories
• Storyboard

11. User Stories

12. Storyboard

13. Métodos de Pesquisa
• Focus Group
• Shadowing
• Diário de Uso Continuado
• Benchmark

14. 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

15. 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)

16. Concepção: Métodos e Ferramentas
• Service Blueprint
• Casos de Uso
• Experience Map (service string)
• Fluxograma de Interação/Navegação
• Diagrama Sequencial

17. Service Blueprint

18. Casos de Uso

19. Experience Map
http://wireframes.linowski.ca/wp-content/themes/darwin/images/full141.png

20. Fluxograma de Interação/Navegação

21. Vocabulário Visual
http://iainstitute.org/pt/translations/000332.html

22. Diagrama Sequencial

23. Diagrama Sequencial Negativo

24. Concepção: Métodos e Ferramentas
• Prototipação em Papel
• Wireframe
• Wireflow
• Mockup
• Protótipo Funcional
• Protótipo em Vídeo

26. Wireframes

27. Wireflow

28. Protótipo funcional

29. 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

30. 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

31. 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

32. 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

33. Especificação: clientes internos
• Arquitetos de Informação
• Diretores de Arte e Designers Gráficos
• Redatores e Produtores de Conteúdo
• Programadores e Analistas

34. Especificação: comunicação
• Registrar regras
• Demonstrar a aplicação das regras

35. Especificação: modelos gráficos
• Informações de forma concisa e compacta
• Visualização subdividida e hierárquica
• Redundância mínima

36. Especificação: documentação
• Wireframes
• Sitegrama (blueprint)
• Fluxograma de navegação
• Vocabulário Controlado

37. Sitegrama

38. Sitegrama

39. Vocabulário Controlado
• Contém a taxonomia
• Pode conter um thesauro
• Gerenciadores de conteúdo

40. Especificação: documentação
• Biblioteca de padrões
o Yahoo! Design Pattern Library
o Welie's Pattern Library
• Guidelines
o Apple Human Interface Guidelines
o Android User Interface Guidelines

41. 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

42. Implementação: fases
• Validação do Design
• Transferência de Conhecimento

43. 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

44. Avaliação
• Análise de Estatísticas de navegação
• Análise Heurística
• Avaliação de Interface
• Testes de Usabilidade

45. 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

46. Análise de Estatísticas de navegação
• Análise de Estastísticas
• Mensuração
• Taxas de Conversão
• Teste A/B

47. Análise de Estatísticas de navegação

48. 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

49. 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).

50. Avaliação
• Dados numéricos: a língua do cliente.
• Aprendizado para projetos futuros
• Melhora contínua do website

51. Edyd Junges @edyd
Instituto Faber-Ludens @faberludens
www.faberludens.com.br