Professor: Fernando Gonçalves de Oliveira

1
INTRODUÇÃO

Simplificar, rentabilizar, otimizar, facilitar, melhorar, acelerar, estes

verbos que envolvem o conceito de usabilidade. Mas usabilidade é

sinônimo de flexibilidade e de maior interação.

USABILIDADE é sinônimo de facilidade de uso. Se um produto é fácil

de usar, o usuário tem maior produtividade; aprende mais rápido a

usar, memoriza as operações e comete menos erros.

DESIGN DE PORTAIS 2/37

USABILIDADE DE UM SITE

• Usando uma linguagem simples e clara;

• Títulos limpos para os links;

• Fácil Navegação;

• Estrutura do site fácil de ser entendida;

• Conteúdo Objetivo;

• Páginas específicas para assuntos específicos (nada de muito generalizado);

• Contato em destaque.

DESIGN DE PORTAIS 3/37

BENEFÍCIOS

Um site com uma boa usabilidade é aquele em que o usuário

consegue encontrar rapidamente a informação desejada.

DESIGN DE PORTAIS 4/37

USABILIDADE x NECESSIDADES ESPECIAIS

Até que ponto podemos dizer que uma interface tem uma boa

usabilidade?

Um mouse pode ter uma boa usabilidade para a maioria das

pessoas, porém para uma pessoa com deficiência motora ele não é o

ideal.

Ou seja, usuários especiais precisam de interfaces especiais.

DESIGN DE PORTAIS 5/37

INTUITIVIDADE

Quando um usuário entre em um site, em 90% das vezes, está em

busca de alguma informação específica e não que perder tempo

navegando em seu site para encontrá-la. Por isso o lema do

internauta é “NÃO ME FAÇA PENSAR”.

USUÁRIO deve apenas: VER, COMPREENDER, e CLICAR na

informação desejada.

DESIGN DE PORTAIS 6/37

INTUITIVIDADE

Lembre-se: Procure sempre elaborar seu site de forma clara e

objetiva, sem invenções mágicas, pois o tempo do usuário é precioso

e não deve ser gasto para entender suas idéias.

• Quanto mais intuitivo é seu site, melhor será a experiência do

usuário.

• Designers têm idéias malucas. Sempre que tiver que optar entre

usabilidade e a aparência, fique com a usabilidade.

DESIGN DE PORTAIS 7/37

RECURSOS

Facil de entender, manter,

• Ferramentas; modificar?
Linguagens/metodologias
• Metodologias.

DESIGN DE PORTAIS 8/37

REGRAS BÁSICAS

Clareza ao arquiteturar a informação

• Essencial que o usuário consiga discenir o que é prioritário e o

que é secundário no site;

• Usuários sempre terão dificuldade em encontrar o que procuram

portanto devem ser ajudados.

• Prover um senso de como a informação está estruturada e

localizada. (Exemplo Mapa do Site)

DESIGN DE PORTAIS 9/37

REGRAS BÁSICAS

Facilidade de navegação

• O usuário deverá conseguir acessar a informação desejada, no

máximo em três cliques.

DESIGN DE PORTAIS 10/37

REGRAS BÁSICAS

Simplicidade

• Quem navega quer encontrar o mais rapidamente possível o

objetivo de busca.

DESIGN DE PORTAIS 11/37

REGRAS BÁSICAS

A relevância do conteúdo

• Sempre que questionados sobre sites, usuários se referem a

quantidade e relevância do conteúdo;

• Um bom texto para essa mídia;

• O mais conciso e objetivo possível.

DESIGN DE PORTAIS 12/37

Layout

O layout do site deve mostrar a filosofia da empresa, valorizando-a.

Condução do olhar

Normalmente nossos olhos movimentam-se da esquerda para

direita e de cima para baixo, ou seja, o layout ideal é aquele

que leva o usuário a ver primeiro os elementos superiores

equerdos (normalmente o logotipo), e a partir daí descer em

forma diagonal.

DESIGN DE PORTAIS 13/37

Layout

O layout do site deve mostrar a filosofia da empresa, valorizando-a.

Condução do olhar

Normalmente nossos olhos movimentam-se da esquerda para

direita e de cima para baixo, ou seja, o layout ideal é aquele

que leva o usuário a ver primeiro os elementos superiores

equerdos (normalmente o logotipo), e a partir daí descer em

forma diagonal.

DESIGN DE PORTAIS 14/37

DESIGN DE PORTAIS 15/37
HIERARQUIA DA INFORMAÇÃO

Contraste visual

cores texturas direção

forma tamanho

DESIGN DE PORTAIS 16/37

MENUS

É necessário subcategorizar corretamente produtos ou ações, não se

esquecendo de dar tratamento “visual” idêntico a itens semelhantes.

Livros
Informática
Música
DVDs
Turismo

DESIGN DE PORTAIS 17/37

WIREFRAME

O wireframe de uma site é um esboço estrutural que tem como

função diagramar o conteúdo para que o entendimento do site fique

mais fácil e padronizado.

DESIGN DE PORTAIS 18/37

INDEX

• Principal
• Organização

Páginas de entrada

• Carregando
• Redirencionar

DESIGN DE PORTAIS 19/37

FONTES

• Serif Fonts (Courier New, Times New Roman)

• Sans Serif Fonts (Arial, Verdana)

DESIGN DE PORTAIS 20/37

FLASH

Modo de usar:

• Menu;

• Mostrar claramente qual a função de cada botão;

• Evitar introduções animadas em flash, mas se forem usadas, dar

destque a um botão “skp intro/pular introdução”.

DESIGN DE PORTAIS 21/37

TESTE DE USABILIDADE

Análise:

• O conteúdo é relevante?

• A navegação é fácil e intuitiva?

• As Mensagens informativas são claras e objetivas?

• As instruções em Formulários são claras e objetivas?

DESIGN DE PORTAIS 22/37

AVALIAÇÃO HEURÍSTICA

A avaliação heurística é um método de inspeção sistemático da

usabilidade de sistemas interativos, cujo objetivo é identificar

problemas de usabilidade que, posteriormente, serão analisados e

corrigidos ao logo do processo de desenvolvimento do sistema.

DESIGN DE PORTAIS 23/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

1. Visibilidade do status do sistema

O sistema deve sempre manter os usuários informados sobre o

que está acontecendo através de feedeback apropriado, em um

tempo reazoável.

DESIGN DE PORTAIS 24/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

2. Compatibilidade entre sistema e mundo real:

O sistema deve utilizar a linguagem do usuário, com palavras,

frases e conceitos familiares para ele, ao invés de termos

específicos de sistemas. Seguir convenções do mundo real,

fazendo com que a informação apareça em uma ordem lógica e

natural.

DESIGN DE PORTAIS 25/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

3. Controle e liberade para o usuário:

Estão relacionados à situação em que os usuários frequentemente

escolhem as funções do sistema por engano e então necessitam

de “uma saída de emergência” claramente definida para sair do

estado não desejando sem ter que percorrer um longo diálogo, ou

seja, é necessário suporte a undo(desfazer) e redo(refazer).

DESIGN DE PORTAIS 26/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

4. Consistência e padrões:

Referem-se ao fato de que os usuários não deveriam ter acesso a

diferentes situações, palavras ou ações representando a mesma

coisa. A interface deve ter convenções não-ambíguas.

DESIGN DE PORTAIS 27/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

5. Prevenção de erros:

Os erros são as principais fontes de frustação, ineficiência e

ineficácia durante a utilização do sistema.

DESIGN DE PORTAIS 28/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

6. Reconhecimento em lugar de lembrança:

Tomar objetos, ações, opções visíveis e coerentes. O usuário não

deve ter que lembrar informações de uma parte do diálogo para

outra, Instruções para o usuo do sistema devem estar visíveis ou

facilmente acessíveis.

DESIGN DE PORTAIS 29/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

7. Flexibilidade e eficiência de uso:

A ineficiência nas tarefas pode reduzir a eficácia do usuário e

causar-lhes frustação. O sistema deve ser adequado tanto para

usuários inexperientes quanto para usuários experientes.

DESIGN DE PORTAIS 30/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

8. Projeto minimalista e estético:

Os diálogos não devem conter informações irrelevantes ou

raramente necessárias. Cada unidade extra de informação em um

diálogo compete com unidades relevantes e diminui sua

visibilidade relativa.

DESIGN DE PORTAIS 31/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

9. Auxiliar os usuários a reconhecer, diagnosticar e recuperar erros:

Mensagens de erro devem ser expressas em linguagem natural

(sem códigos), indicando precisamente o erro e sugerindo uma

solução.

DESIGN DE PORTAIS 32/37

AVALIAÇÃO HEURÍSTICA

Primeiro Passo:

10.Ajuda e documentação:

Mesmo que seja melhor o sistema possa ser usado sem

documentação, pode ser necessário fornecer ajuda e

documentação. Tais informações devem ser fáceis de encontrar,

ser centradas na tarefa do usuário, listar passos concretoss a

serem seguidos e não ser muito grandes. A ajuda deve estar

facilmente acessível e on-line.

DESIGN DE PORTAIS 33/37
AVALIAÇÃO HEURÍSTICA

Segundo Passo:

Grau de severidade dos problemas de usabilidade:

0 – Sem importância

Não afeta a operação da interface

1 – “Cosmético (Perfumaria)”

Não há necessidade imediata de solução

2 – Simples

Problema de baixa prioridades (pode ser reparado)

DESIGN DE PORTAIS 34/37
AVALIAÇÃO HEURÍSTICA

Segundo Passo:

Grau de severidade dos problemas de usabilidade:

3 – Grave

Problema de alta prioridade (deve ser reparado)

4 – Catastrófico

Muito grave, deve ser reparado de qualquer forma

DESIGN DE PORTAIS 35/37

http://iainstitute.org/pt/translations.html

http://www.fmemoria.com.br/portfolio.htm

http://graffletopia.com/ - vários tipos de stencils para Omnigraffle

http://www.userfocus.co.uk/consultancy/personas.html - métodos e
atividades usadas em processos de experiência do usuário

https://uservue.techsmith.com/ - teste de usabilidade remoto

http://www.userzoom.com/ - teste de usabilidade remoto

http://brazil.joelonsoftware.com/uibook/chapters/1.html

DESIGN DE PORTAIS 36/37

DESIGN DE PORTAIS 37/37