Upload
edyd-junges
View
2.150
Download
1
Embed Size (px)
DESCRIPTION
Curso de Arquitetura da Informação ministrado no iDIGO - Rio de Janeiro
Citation preview
Edyd Junges @edyd
Instituto Faber-Ludens @faberludens
www.faberludens.com.br
Módulo 3Desenvolvimento de Projetos InterativosEspecificação e Implementação
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
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)
Modelo Processual
Métodos de Pesquisa
• Entrevistas Contextuais
• Questionário
• Personas
• Moodboard
• Mapas Mentais
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
Design do Sistema de navegação
Definição de campos de Metadados
(locais)
Integração Tecnológica (sistemas)
Gerenciamento estratégico
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)
Concepção: Métodos e Ferramentas
• Service Blueprint
• Casos de Uso
• Experience Map (service string)
• Fluxograma de Interação/Navegação
• Diagrama Sequencial
Service Blueprint
Casos de Uso
Experience Map
http://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
• Protótipo em Vídeo
Wireframes
Wireflow
Protótipo funcional
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
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
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
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
Especificação: clientes internos
• Arquitetos de Informação
• Diretores de Arte e Designers Gráficos
• Redatores e Produtores de Conteúdo
• Programadores e Analistas
Especificação: comunicação
• Registrar regras
• Demonstrar a aplicacao das regras
Especificação: modelos gráficos
• Informações de forma concisa e compacta
• Visualização subdividida e hierárquica
• Redundância mínima
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 Welie's Pattern Library
• Guidelines
o Apple Human Interface Guidelines
o Android User Interface Guidelines
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
Implementação: fases
• Validação do Design
• Transferência de Conhecimento
Avaliação
• Validação e testes
• Análise dos resultados do projeto
• Avaliacao em funcao dos objetivos iniciais
• Filosofia de melhoria continua do website
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 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
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
• Avaliacao em funcao dos objetivos iniciais
• Filosofia de melhoria continua do website
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).
• Dados numéricos: a língua do cliente.
• Aprendizado para projetos futuros
• Melhora contínua do website
Avaliação
Edyd Junges @edyd
Instituto Faber-Ludens @faberludens
www.faberludens.com.br