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

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

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

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)

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 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 • 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 aplicação 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

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 • 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 • Avaliação em função dos objetivos iniciais • Filosofia de melhoria contínua 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 • Avaliação em função dos objetivos iniciais • Filosofia de melhoria contínua 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).

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

http://www.faberludens.com.br	164
http://www.edydjunges.com	61

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

by Edyd Junges on Jul 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 225

Statistics

Desenvolvimento de Projetos Interativos: Especificação e Implementação — Presentation Transcript