mapas de site, fluxos de tarefa, wireframe e prototipagem

ERGONOMIA

INFORMACIONAL E IHCInteração Humano-Computador

Rosendy Jess Fernandez Galabo

[email protected]

@zndgalabo

DESENVOLVIMENTOMapas de site,

Fluxos de Tarefa,

Wireframe

Prototipagem

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.

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.

Mapas do site

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.

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.

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.


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.


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


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


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.


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.


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


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/

WIREFRAMES

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)

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)

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)

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

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.

Criando Wireframes

• Na adaptive path

utiliza-se seis

modelos, que

simplesmente

oferecem espaço para

fazer seis pequenos

esboços minimizados.

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

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)


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


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


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

PROTOTIPAGEM

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)

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)

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.

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


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


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

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

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.