Ergonomia Informacional e IHC (Interação Humano-computador) - Design - UFMA Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem em IHC Prof. Dr. Carlos de Salles Soares Neto Estágio a docência Professor Auxiliar: Rosendy Jess Fernandez Galabo

1. ERGONOMIA
INFORMACIONAL E IHC
Interação Humano-Computador
Rosendy Jess Fernandez Galabo
rj@fgalabo.com
@zndgalabo

2. DESENVOLVIMENTO
Mapas de site,
Fluxos de Tarefa,
Wireframe
Prototipagem

3. Mapas do site
• Os mapas do site ajudam a identificar a estrutura dos
sites na web e das aplicações.
• Eles podem mostrar hierarquias e conexões que
permitem que o seu público obtenha uma compreensão
de onde os usuários podem localizar o conteúdo.
• Um mapa do site é simplesmente uma maneira visual de
exibir páginas representativas de um website ou
qualquer tipo de aplicação.

4. Mapas do site
• Na maioria dos casos, um mapa do site, você usará um
mapa do site para mostrar aos membros da equipe a
aos clientes como conteúdo de um website será
organizado.
• Ele fornecerá um panorama da navegação do site e em
alguns casos, exibirá todas as conexões que cada
página tem.

5. Mapas do site

6. Fluxo de tarefas
• Identificam caminhos ou processos que os usuários (e,
às vezes, um sistema) farão enquanto avançam através
do website ou aplicação.

7. Mapa do site e Fluxo de tarefas
Embora os mapas do site e os fluxos de tarefas possam
ser parecidos inicialmente, os dois tipos de diagramas
servem para finalidades diferentes:
• Um mapa do site lhe diz a hierarquia visual do layout
ou de uma aplicação
• Um fluxo de tarefa lhe dá detalhes das opções dos
usuários e dos caminhos que eles poderão seguir.

8. Elementos Básicos de Mapas do site e
fluxo de tarefas
• Para que as criações possam ser interpretadas por um
público maior, é melhor utilizar um grupo de formatos
padrão.
• O Vocabulário Visual da arquitetura da informação é um
padrão criado por Jesse James Garret.

9. Elementos Básicos de Mapas do site e
fluxo de tarefas
Página
• Uma página é a unidade básica da experiência do
usuário na web, uma página é bastante significativa.
• O formato mais simples e comumente usado é um
retângulo simples.

10. Elementos Básicos de Mapas do site e
fluxo de tarefas
Página
• Uma página é a unidade básica da experiência do
usuário na web, uma página é bastante significativa.
• O formato mais simples e comumente usado é um
retângulo simples.

11. Elementos Básicos de Mapas do site e
fluxo de tarefas
Pilha de Páginas
• Representa várias páginas de conteúdo semelhante.
• Uma maneira fácil para compreender pilha de páginas é
pensar no conteúdo dinâmico, como a página de blog
comum criada usando um sistema de publicação.
• As páginas são feitas uma vez e são modelos de design

12. Elementos Básicos de Mapas do site e
fluxo de tarefas
Ponto de decisão
• Um ponto de decisão é usado para mostrar o caminho
que um usuário pode seguir dependendo da resposta
para um pergunta.
• A resposta para essa pergunta determinaria qual página
(ou visualização de conteúdo seria exibida).

13. Elementos Básicos de Mapas do site e
fluxo de tarefas
Ponto de decisão
• Um ponto de decisão é usado para mostrar o caminho
que um usuário pode seguir dependendo da resposta
para um pergunta.
• A resposta para essa pergunta determinaria qual página
(ou visualização de conteúdo seria exibida).

14. Elementos Básicos de Mapas do site e
fluxo de tarefas
Conectores e Setas
• São utilizados para mostrar o movimento ou progresso
entre páginas, pilhas de páginas, pontos de decisão e
assim por diante. Os conectores geralmente aparecem
onde há uma chamada para ação de uma página para
outra.

15. Elementos Básicos de Mapas do site e
fluxo de tarefas
Conectores e Setas
• Os conectores com barra cruzada podem ser utilizados
para identificar que o movimento que retorna para a
página de onde você originou (fluxo contrário) não está
mais disponível.

16. Elementos Básicos de Mapas do site e
fluxo de tarefas
Condições
• Uma linha tracejada é uma forma bem comum de exibir
uma condição. Ela pode aparecer em mapas de site e em
fluxos de tarefa.
• Pode-se utilizar uma linha tracejada como um conector
ou como uma caixa em volta de uma área para
destacar que uma conexão para uma página é
condicional baseada em alguma outra ação ou evento

17. Elementos Básicos de Mapas do site e
fluxo de tarefas
• Outros elementos para ajudar a articular os mapas de site
e fluxos de tarefa podem ser encontrados em:
• www.jjg.net/ia/visiovocab/

19. WIREFRAMES

20. Wireframe
• Desenho da interface
• É utilizado para identificar os elementos que serão
exibidos na página ou na tela, tais como:
• Navegação
• Seções de conteúdo
• Necessidades de imagem e/ou mídia
• Elementos de forma
• Chamadas para ações (CTA)

21. Wireframe
• Geralmente são criados em preto e branco ou em
sombras de cinza, utiliza substituintes para as imagens
e não entram nas especificidades das fontes (embora
muitos apliquem o tamanho da fonte para conduzir
separações dos tipos de cópias). (UNGER e CHANDLER, 2009)

22. Wireframe
• É chamado de “Rectangle phase” porque os esboços
começar por subdividir cada exibição em rígidas áreas
retangulares correspondentes a painéis, componentes
de controle (como barras de ferramentas) e outros
recipientes de nível superior. Rotule os retângulos,
ilustre e descreva como um grupo ou elemento afeta
os outros. (COOPER , REINMANN E CRONIN 2007)

23. Wireframe: Anotações
As anotações são explicações e notas sobre um elemento
ou uma interação em um wireframe. Normalmente, elas
contêm informações como:
• Identificação do conteúdo ou rotulação
• Fonte(s) de conteúdo
• Regras de exibição
• Regras de interação
• Destinos de interação
• Regras de processo
• Conteúdo/mensagem de erro

24. Criando Wireframes
• Para criar um wireframe, geralmente se precisa de uma
série de requisições.
• É preciso ter uma compreensão do que é que você está
tentando criar para um usuário, quais as conexões e
uma compreensão geral das limitações e expectativas
tecnológicas.

25. Criando Wireframes
• Na adaptive path
utiliza-se seis
modelos, que
simplesmente
oferecem espaço para
fazer seis pequenos
esboços minimizados.

26. Criando Wireframes
• O wireframe com anotações detalha cada elemento da
página, assim como as chamadas para ação esperadas e
os resultados da ação (como o carregamento de uma
página específica).

30. Técnica de cardsorting
• É utilizada para entender como os usuários categorizam
o conteúdo a ser apresentado em um site. (SANTA ROSA e
MORAES, 2008)
• Cardsorting é uma técnica de usabilidade utilizada para
descobrir o modelo mental do usuário num espaço de
informação. Uma aplicação típica é obter ideias para
estruturas de menu, pedindo aos usuários para
ordenarem cartões com nome dos comandos. (Nielsen,
2003)

31. Técnica de cardsorting
• O cardsorting é empregado para verificar a diferença
entre o modo pelo qual os usuários inexperientes e
experientes entendem o sistema. O cardsorting gera
ainda sugestões de nomenclatura, visto que os
usuários participam rotulando esses grupos sob títulos
que consideram eficazes (Zilse, 2003).

32. Técnica de cardsorting
• A técnica consiste em escrever pequenos cartões
vários tópicos ou temas. Eles são distribuídos a um
conjunto de pessoas, que devem agrupá-los de forma
a fazer sentido semanticamente, sendo depois
analisados na procura por similaridade. Como resultado,
obtém-se um “protótipo” de uma arquitetura de
informação de um sistema.

33. Técnica de cardsorting
Os objetivos da aplicação da técnica de cardsorting são:
• Perceber como cada perfil de usuário pode acessar um
determinado conteúdo
• Perceber como diferentes públicos-alvo agrupam conteúdos,
possibilitando que sejam criadas estruturas de organização de
informação mais adequadas.
• Identificar terminologia mais fácil de ser compreendida pelo
usuário.
• Perceber como diferentes públicos-alvo categorizam o
conteúdo.
• Identificar os itens difíceis de classificar.
• Identificar informações que possam pertencer a mais de um
grupo

34. PROTOTIPAGEM

35. Prototipagem
• É uma representação limitada de um design que
permite aos usuários interagir com ele e explorar a sua
conveniência. Pode ser imaginado como um modelo em
escala menor ou parte de um software em
desenvolvimento. Entretanto, um protótipo também pode
ser de papel de uma tela ou conjunto de telas. (PREECE,
ROGERS e SHARP. 2005)

36. Prototipagem
• Tem como finalidade: Testar a viabilidade técnica de
uma ideia, esclarecer alguns requisitos vagos, realizar
alguns testes com usuários e avaliações ou verificar se
certo rumo que se tomou no design é compatível com o
resto do desenvolvimento do sistema. (SANTA ROSA e MORAES,
2008)

37. Prototipagem
Segundo (Santa Rosa e Moraes, 2005) os protótipos são
classificados em:
• Prototipagem de baixa-precisão - Utiliza materiais
muito diferentes da versão final pretendida, como papel e
cartolina, em vez de telas eletrônicas e metal. São úteis
porque tendem a ser simples, baratos e de rápida
produção.
• Prototipagem de alta-precisão – Utiliza materiais que
você espera que estejam no produto final e realiza um
protótipo que se parece muito mais com algo acabado.

38. Prototipagem: Vantagens e desvantagens
Problemas da prototipagem em alta precisão
• Tempo necessário para construção
• Após desenvolvimento, programadores relutam em
implementar as alterações sugeridas
• A prototipagem em alta-precisão é útil para vender ideias
a pessoas e testar questões técnicas

39. Prototipagem: Vantagens e desvantagens
Vantagens da prototipagem em papel
• Rapidez e Baixo custo
• Identificação de problemas antes da implementação
• Mais e melhores opiniões dos usuários
• Ajuda os desenvolvedores a pensar criativamente
• Permite que os usuários se envolvam no processo
• Proporcionar trabalho em grupo e comunicação
• Evitar conflitos de opinião

40. Prototipagem: Vantagens e desvantagens
Desvantagens da prototipagem em papel
• Dificuldade de simular o comportamento de alguns
elementos de interface, tais como scrollbars
• Dificuldade de transmissão da informação através de
cores e animações
• Esse tipo de metodologia não permite a detecção de
todos os tipos de problema de usabilidade

41. Prototipagem em papel
Suprimentos utilizados na prototipagem em papel
• Quadro de avisos branco
• Papel em branco
• Fichas
• Canetas e lápis (Pretas e
coloridas)
• Marca-texto
• Tesoura
• Fita gomada
transparente
• Cola em bastão
• Fita adesiva
• Transparência
• Corretor líquido
• Post-it
• Flip chart
• Régua
• Lápis ou coneta de
ponta fina
• Plastificação

42. Referências bibliográficas
• BARBOSA, S.D.J.; SILVA, B.S. Interacao Humano-Computador.
Editora Campus - Elsevier, 2010.
• COOPER,A.; Reinamann, R.; Cronin, D. About face 3: The
Essentials of Interaction Design. New York, NY: John Wiley & Sons,
2007.
• ZILSE, R. Análise ergonômica do trabalho dos desenvolvedores
versus o modelo mental dos usuários, tendo como foco a
arquitetura da informação de websites. Rio de Janeiro, 2004.
222p. Dissertação (Mestrado em Design) – Departamento de Artes e
Design, Universidade Pontíficia Católica do Rio de Janeiro
• SANTA ROSA, José Guilherme; MORAES, Anamaria de. Avaliação e
projeto no design de interfaces. 1. Ed. Teresópolis, RJ: 2AB, 2008.
• UNGER, R. CHANDLER, C. O Guia para Projetar UX: A Experiência
do Usuário (UX) para projetistas de conteúdo digital, aplicações e
web sites. Rio de Janeiro: Alta Books, 2009. 268p.