Esqueleto

Os Elementos da
Experiência do Usuário
Design para Web com Foco no Usuário
(Baseado no livro “The Elements of User Experience:

User-Centered Design for the Web” de J. J. Garrett)
Esqueleto
Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Curso de Design Gráfico - Universidade de Caxias do Sul
Esqueleto
A estrutura conceitual começa a dar forma aos requisitos

levantados a partir de nossos objetivos estratégicos.
No esqueleto, refinamos a estrutura, identificando
aspectos de interface, navegação e
design da informação.
A estrutura intangível começa a ficar concreta.

Definindo o Esqueleto
A estrutura diz como nosso site vai funcionar.

O esqueleto define a forma que a funcionalidade vai ter.
Na estrutura, nos preocupamos com problemas "macro"

em relação à arquitetura e interação.
No esqueleto, nossa preocupação voltar-se-á para um
nível mais individual de cada página e seus componentes.

No lado do software, trabalhamos o esqueleto através

do design de interface (botões, campos e outros
componentes de interface).
O design de navegação é a forma especializada de

design de interface voltada para apresentar espaços
de informação.

Permeando os dois campos, temos o

design da informação, a informação apresentada para
uma efetiva comunicação.

Estes três elementos são muito próximos e podem deixar

margem à dúvidas e confusões quanto às suas fronteiras
entre si. No entanto, é importante termos clara essa
divisão. Um bom design de navegação não corrige um
mau design de informação.
Se não soubermos enxergar onde está nosso problema
com clareza, não estaremos aptos a resolvê-lo.

Se envolve a capacidade do usuário de resolver

problemas, é design de interface.
Se envolve a habilidade do usuário de ir a determinados
lugares, isto é design de navegação.
E, finalmente, se envolve comunicar idéias ao usuário,
é design de informação.

Convenção e Metáfora
Hábito e reflexo são fundamentais para a maioria de

nossas interações com o mundo.
Nossa habilidade de dirigir, cozinhar ou usar um
computador depende do acúmulo de muitos
pequenos reflexos.
Convenções nos permitem aplicar estes reflexos em
diferentes circunstâncias.

As vezes parece que o layout não deveria fazer

tanta diferença.
Mas faz.

O tempo que o usuário leva para encontrar um

determinado botão para realizar uma ação pode
parecer pouco.
No entanto, para o usuário, esse pouco tempo é, na
verdade, pura perda de tempo.
E, provavelmente, uma eternidade de tempo convivendo
com a frustração.

Isso não quer dizer que o segredo para uma boa

interface é manter, o máximo possível, aderência às
convenções.
Na verdade, criar uma experiência do usuário bem

sucedida significa ter, explicitamente definidas,
as razões para cada escolha que fazemos.

Fazer nossa interface consistente com as demais

interfaces com as quais o usuário já tem familiaridade
é importante. Mas mais importante ainda, é manter a
consistência com ela mesma.
Manter a consistência é a forma de possibilitar ao

usuário uma rápida adaptação.

Por mais atrativo e divertido que possa parecer, o uso de

metáforas deve ser fortemente evitado.
Elas quase nunca funcionam como deveriam.
Na verdade, frequentemente elas não funcionam.

Por exemplo, ter um ícone de uma agenda telefônica

para representar seu guia de ramais funciona bem.
Ter uma imagem de uma cafeteria para

representar sua área de chat pode ser um pouco
mais problemático...

Design de Interface
Interfaces bem-sucedidas são aquelas em que o usuário

percebe, imediatamente, aquilo que é importante.
Para quem tem um histórico profissional relacionado à

programação, alguns ajustes na maneira de pensar serão
necessários. Frequentemente sua maneira de pensar
difere muito da de um usuário comum.

Design de Interface
Uma interface bem desenhada reconhece os caminhos

que os usuários fazem em suas ações mais
frequentemente e tornam esses elementos mais fáceis
de serem usados e acessados.
Isso não significa que a solução seja transformar em

botões enormes as ações mais procuradas pelo usuário.

Design de Interface
A tecnologia atual nos permite criar apenas dois tipos de

botões: em HTML e Flash.
Se por um lado isso nos limita em termos de opções na

hora de criar, por outro também limita a quantidade de
conhecimento que o usuário precisa ter para se
familiarizar com a maioria das interfaces web disponíveis.

Design de Interface
Em HTML, temos os seguintes tipos de elementos

de interface:
- Checkboxes
- Radio Buttons
- Text Fields
- Menus Dropdown
- List boxes
- Botões de ação

Design de Interface
Em HTML, temos os seguintes tipos de elementos

de interface:
- Checkboxes
- Radio Buttons
- Text Fields
- Menus Dropdown
- List boxes
- Botões de ação

Design de Interface
Em resumo, o Flash oferece o mesmo tipo de opções,

variando mais nas possibilidades de forma do que
de tipo, basicamente.

Design de Navegação
O design de navegação parece algo bastante simples.

Basta espalharmos links em todas as páginas que
permitam que o usuário navegue livremente entre elas.
Mas basta se deter um pouco mais na experiência do

usuário que começamos a perceber melhor
sua complexidade.

O design de navegação deve ter 3 objetivos principais:
a) Prover ao usuário um caminho efetivo entre dois

pontos do site. Não é nada prático linkar todas as páginas
com todas as páginas de nosso site (a propósito, os links
devem todos funcionar corretamente).

b) Demonstrar a relação entre os elementos.
Uma mera lista de links não serve de nada

se não deixarmos claro o que eles tem a ver uns
com os outros.

c) Mostrar relação entre os conteúdos e a página que

o usuário está visitando naquele momento.
Caso contrário, como ele saberá qual é a melhor opção,

entre as disponíveis, para chegar ao seu objetivo?

Nós ainda não sabemos como (nem o quanto) as pessoas

guardam a estrutura de websites em sua cabeça.
Até que saibamos disso, o melhor a fazer é assumir que

nosso usuário não tem nenhum conhecimento a
respeito disso.

Alguns dispositivos de navegação não fazem parte da

estrutura de suas páginas, pois existem de forma
independente do conteúdo ou da funcionalidade
de nosso site.

São chamadas ferramentas remotas de navegação e

geralmente são um último recurso para usuários que
se frustraram ao tentar, através da navegação
tradicional, alcançar seu objetivo.

- Mapa do Site: é uma ferramenta bastante comum

e dá ao usuário, de forma concisa (em apenas uma
página) uma visão geral sobre da
arquitetura de nosso site.

- Índice: É uma lista de tópicos relevantes, em ordem

alfabética, em forma de links. É bastante semelhante a
um índice de livro.
É mais efetiva em sites que contém uma gama

muito variada de assuntos. Pode ser elaborado para
uma seção particular do site, por exemplo.

Design da Informação
Normalmente é difícil de ser visualizado de forma clara.

Frequentemente serve como uma "cola" que mantém
juntos os componentes de nosso design.
Às vezes, o design da informação é visual.

Um gráfico de pizza é a melhor maneira de apresentar

determinada informação ou um gráfico de barras é
mais claro para nosso usuário?
Um ícone de um binóculo é suficientemente explícito

para indicar a busca de nosso site?

Outra vezes, ele diz respeito à maneira como agrupamos

ou arranjamos "pedaços" de informações.
A chave é agrupar e arranjar os elementos da informação

de maneira que reflitam como nossos usuários pensam
e tornem sua tarefa mais fácil.

Wireframes
O layout da página é onde o design da informação,

o design da interface e o design de navegação
juntam-se para formar um esqueleto
unificado e coeso.

Wireframes
O layout deve incorporar todos os vários sistemas de

navegação, todos os elementos de interface necessários
para a boa funcionalidade da página e o design de
informação do conteúdo propriamente dito.
Balancear tudo isso de uma só vez é muita coisa.

Wireframes
Assim, detalhamos a página em um documento

chamado wireframe.
Wireframe é uam representação esquemática de todos

os componentes da página e como eles
estarão organizados.

Wireframes
Este desenho baseado em linhas simples é,

normalmente, carregado de anotações e outros tipos
de detalhamentos que se fizerem necessários.
Em alguns casos, especificações detalhadas sobre a

navegação são um ótimo complemento para os
wireframes.

Wireframes
Para projetos pequenos um simples

wireframe é suficiente para servir de template para
todas as páginas que vamos construir.
Em outros casos, precisamos de múltiplos wireframes

para mapear o resultado que se quer.

Wireframes
É no wireframe que devemos ver, de forma concreta,

aquilo que está especificado na estratégica, escopo
e estrutura.

Os Elementos da
Experiência do Usuário
Design para Web com Foco no Usuário
(Baseado no livro “The Elements of User Experience:

User-Centered Design for the Web” de J. J. Garrett)
Esqueleto


Esqueleto

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Esqueleto

Enviado por

Direitos autorais:

Formatos disponíveis

Os Elementos da

(Baseado no livro “The Elements of User Experience:

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

A estrutura conceitual começa a dar forma aos requisitos

A estrutura intangível começa a ficar concreta.

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

A estrutura diz como nosso site vai funcionar.

Na estrutura, nos preocupamos com problemas "macro"

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

No lado do software, trabalhamos o esqueleto através

O design de navegação é a forma especializada de

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Permeando os dois campos, temos o

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Estes três elementos são muito próximos e podem deixar

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Se envolve a capacidade do usuário de resolver

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Hábito e reflexo são fundamentais para a maioria de

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

As vezes parece que o layout não deveria fazer

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

O tempo que o usuário leva para encontrar um

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Isso não quer dizer que o segredo para uma boa

Na verdade, criar uma experiência do usuário bem

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Fazer nossa interface consistente com as demais

Manter a consistência é a forma de possibilitar ao

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Por mais atrativo e divertido que possa parecer, o uso de

Na verdade, frequentemente elas não funcionam.

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Por exemplo, ter um ícone de uma agenda telefônica

Ter uma imagem de uma cafeteria para

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Interfaces bem-sucedidas são aquelas em que o usuário

Para quem tem um histórico profissional relacionado à

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Uma interface bem desenhada reconhece os caminhos

Isso não significa que a solução seja transformar em

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

A tecnologia atual nos permite criar apenas dois tipos de

Se por um lado isso nos limita em termos de opções na

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Em HTML, temos os seguintes tipos de elementos

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Em HTML, temos os seguintes tipos de elementos

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

Em resumo, o Flash oferece o mesmo tipo de opções,

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

O design de navegação parece algo bastante simples.

Mas basta se deter um pouco mais na experiência do

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

O design de navegação deve ter 3 objetivos principais:

a) Prover ao usuário um caminho efetivo entre dois

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

b) Demonstrar a relação entre os elementos.

Uma mera lista de links não serve de nada

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV

c) Mostrar relação entre os conteúdos e a página que

Caso contrário, como ele saberá qual é a melhor opção,

Prof. Airton Jordani - Disciplina de Projeto Gráfico IV