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

https://www.youtube.com/watch?v=k9mTvt0LXgk

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