Projeto de interfaces

Silvio A. Carro
silvio@[Link]

Princípios básicos do
design

1
 Web Sites: PRINCÍPIO 1: BALANÇO E PROXIMIDADE
Elementos devem ter alguma conexão visual com outros elementos da página.

Simétrico

Assimétrico

Web Sites: PRINCÍPIO 1: BALANÇO E PROXIMIDADE

 Alinhar os elementos simetricamente (centralizado e

balanceado) sugere um ambiente conservador e seguro

 Alinhar os elementos de forma assimétrica qdo se quer um

ambiente intenso e energético

2
 Web Sites: PRINCÍPIO 1: BALANÇO E PROXIMIDADE

Elementos que
se relacionam
devem ser
disponibilizados
de maneira
próxima

Web Sites: PRINCÍPIO 1: BALANÇO E PROXIMIDADE

Espaços em
branco ajuda a
organizar os
elementos da
página,
aumentando a
legibilidade e a
atenção a certos
elementos

3
 Web Sites: PRINCÍPIO 2: CONTRASTE E FOCO

 Contraste é a mistura de elementos para estimular a atenção

 O contraste de uma página faz com que os olhos se virem

para ela. Se dois itens não forem exatamente iguais,
diferencie-os completamente.

 diferentes estilos de texto, cores e tamanhos

Web Sites: PRINCÍPIO 2: CONTRASTE E FOCO

Relação entre elementos de um layout:

(Robin Williams)

 CONCORDANTE

 CONFLITANTE

 CONTRASTANTE

writer . teacher . mom . not the

actor

4
 Web Sites: PRINCÍPIO 2: CONTRASTE E FOCO

CONCORDANTE:
Quando não há contraste algum entre os elementos de uma página, e
seu resultado é normalmente insosso: margens do mesmo tamanho,
título e texto feitos na mesma letra e quase o mesmo corpo, dando a
impressão de "apostilão".

Web Sites: PRINCÍPIO 2: CONTRASTE E FOCO

CONFLITANTE:
Quando o designer resolve inovar, mas não ousa muito. Surgem então
pequenas diferenças de tipo, corpo e estilo de texto, imagens com
pequenas variações no estilo, tamanho, moldura, posição etc

5
 Web Sites: PRINCÍPIO 2: CONTRASTE E FOCO

CONTRASTANTE:
Atrai a visão na hora, e cria uma real curiosidade e interesse. Ele pode
variar o tamanho, peso, estilo, forma e cor. Quanto maior a quantidade ou
intensidade dos contrastes, mais interessante poderá ser. Só é importante
ter coragem: não se pode ser tímido e avançar meio sinal.
[Link]
[Link]

Web Sites: PRINCÍPIO 3: PADRÃO

Web Pages e Web Sites necessitam de padrões (bom

senso)

6
 Web Sites: PRINCÍPIO 3: PADRÃO

Uso de Grids

Web Sites: PRINCÍPIO 3: PADRÃO

 Uso de Grids

7
 Projeto de
Interfaces

Projeto de interfaces

Concepção de interfaces

• Atividade multidisciplinar (informática, ergonomia, psicologia

cognitiva, lingüística, design visual...);

• Em equipe ou por indivíduos com consciência de outras áreas;

• Tradicionalmente, não faz parte da formação de profissionais de

informática;

8
 Projeto de interfaces

Concepção de interfaces: Por que é difícil?

• Muitas limitações: limites tecnológicos, humanos (físicos e/ou

cognitivos), prazos, orçamentos e organizacionais;

• Inúmeros requisitos e inúmeras fontes de requisitos (principalmente se

for web);

• Problema duplo:
• O que é uma boa interface?
•Princípios, características, recomendações, guidelines
• Como construir uma boa interface?
•Ciclos, modelos, metodologias, técnicas, ferramentas

Projeto de interfaces

Concepção de interfaces: Princípios básicos

1- ORGANIZAR:
Prover o usuário com uma estrutura clara e consistente:
• Consistência interna: convenções e regras para todos os elementos;

• Consistência externa: identidade visual para todos os sub-sistemas de um sistema

• Mundo real: metáforas

Layout de tela:
• Regiões delimitadas para certos elementos (mensagens, menus, etc)
• Agrupar elementos relacionados e distanciar elementos distintos.

Navegabilidade:
• Propiciar acesso fácil aos elementos relacionados

Foco de atenção:
• Destacar (com contraste, fontes, cores) o foco corrente da tela

9
 Projeto de interfaces

Concepção de interfaces: Princípios básicos

2- ECONOMIZAR:
Minimizar as ações do usuário e o tempo de resposta (feedback e
processamento/transmissão de dados)

3- COMUNICAR:
Tornar a interação natural no meio em que se está trabalhando:
Objetividade: não desviar a atenção do foco;
Simplicidade: poucos objetos e pouca densidade;
Comunicação visual clara: significado mais importante que realismo;
WYSIWYG: refletir o que acontece

Projeto de interfaces

Concepção de interfaces: Ciclo de concepção

Não há receita de bolo para a concepção de interfaces:

• É necessário um ciclo de estudo, construção, experimentação e avaliação de
interfaces
• Ciclo organiza um procedimento de “tentativa e erro” a partir de uma boa tentativa
e guiado por princípios e heurística de projeto
• Princípios e Heurísticas são aproveitamento da experiência de outros
desenvolvimentos (DOs e DON´Ts de projeto)

10
 Projeto de interfaces

Concepção de interfaces: Tipos de concepção

• Concepção tradicional (engenharia de software antiga)

• Concepção centrada no usuário

• Concepção orientada a usabilidade

Projeto de interfaces

Concepção de interfaces: Tradicional

• Pouca ou nenhuma consideração ao ponto de vista do usuário e aos

aspectos de usabilidade

• Orientação a sistema:
• Ausência de modelos para IHC;
• Qualidade interna tem mais prioridade que qualidade externa;

• “Design from user”

• O usuário pede e o programador faz...

11
 Projeto de interfaces

Concepção de interfaces: Centrada no usuário

• Consideração dos aspectos cognitivos e físicos do usuário

• Orientação e qualidade externa

• Qualidade interna considerada apenas superficialmente

• “Design for user”

Projeto de interfaces

Concepção de interfaces: Centrada no usuário

• Centrar no usuário:
• Conhecer o usuário: objetivos, técnicas, características;
• Adaptar o sistema ao usuário e não o usuário ao sistema: vocabulário,
experiência, necessidades;
• Dar o máximo de controle ao usuário: feedback, correção, escolha de
alternativas e caminhos;
• Auxiliar o usuário: guiar se necessário, mensagens explicativas, help on-line,
documentação;
• Perdoar o usuário: não exigir leitura de manuais, prevenir erros, explicar os
erros, desfazer erros

12
 Projeto de interfaces

Concepção de interfaces: Orientada a usabilidade

• Consideração de aspectos contextuais da realização do trabalho do

usuário além dos aspectos cognitivos e físicos do usuário;
• Centrada no trabalho do usuário
• Noção confirmada pela Teoria da Atividade

Transformar um objeto para um resultado motiva a existência de uma atividade.

Projeto de interfaces

Concepção de interfaces: Orientada a usabilidade

• Necessidades solicitadas explicitamente pelo usuário

+
• Necessidades:
• Implícitas, identificadas pela análise da tarefa, nem sempre reconhecidas ou
expressas pelo usuários
• Contingentes, relativas às regras organizacionais associadas às atividades
dentro de um processo da organização

• Aceitação do sistema depende mais da qualidade de suporte a

algumas tarefas e menos da quantidade de funções suportadas

13
 Projeto de interfaces

Concepção de interfaces: Orientada a usabilidade

• Busca integrada de qualidade externa e interna

• “Design for user needs”

Padrões
by Martijn van Welie

[Link]

14
 The Wizard (O Assistente)

Problema: O usuário deseja alcançar um objetivo, mas várias decisões devem ser tomadas
antes que o objetivo seja completado, decisões estas que podem não ser conhecidas do
usuário.

Princípio de Usabilidade: Ajuda ao Usuário (Visibilidade)

Contexto: Um usuário não especialista necessita executar um tarefa complexa e

infreqüente consistindo de várias subtarefas onde cada uma destas subtarefas requer
tomada de decisão. O número de subtarefas deve ser pequeno, normalmente entre 3 e 10.

The Wizard (O Assistente)

Solução: Guie o usuário através da tarefa, um passo de cada vez. Deixe o usuário "passear“
através da execução e exiba em qual passo ele está e quantos serão no total. Quando a tarefa
complexa começar, o usuário é informado sobre o objetivo que será alcançado e o fato de que
várias decisões serão tomadas. O usuário pode ir ao próximo passo usando um elemento de
navegação (por exemplo, um botão). Se o usuário não puder iniciar a próxima tarefa antes de
completar a atual, ele é informado que não pode prosseguir (por exemplo, desabilitando o
elemento de navegação). O usuário deve poder revisar uma decisão já tomada.
Aos usuários é dado retorno sobre o propósito de cada subtarefa e os usuários podem ver a
qualquer momento onde estão na seqüência. Quando a tarefa complexa estiver completa, o
usuário é informado sobre sua finalização e, opcionalmente, o resultado do que foi processado.
Usuários que saibam as opções padrão podem imediatamente utilizar um atalho para
possibilitar que tudo seja feito em uma ação. A qualquer momento da seqüência deve ser
possível cancelar a operação, escolhendo uma saída visível.

15
 The Wizard (O Assistente)

The Grid (A Grade)

Problema: O usuário necessita entender rapidamente a informação e agir baseado nesta

informação.

Princípio de Usabilidade: Consistência, Familiaridade

Contexto: Qualquer situação onde muitos objetos de informação são exibidos e distribuídos
espacialmente em uma área limitada. Tipicamente em telas de diálogo, formulários e páginas
web.
• O usuário precisa visualizar muitos objetos, mas de forma
organizada.
• O usuário quer minimizar o tempo necessário para analisar os
objetos na tela.
• Os objetos têm alguma relação entre si e podem ser agrupados
conceitualmente.
• A disposição precisa ser compacta, mas clara, agradável e
legível.

16
 The Grid (A Grade)

Solução: Distribua os objetos em uma grade, com o número mínimo de linhas e colunas,
fazendo as células o mais largas possível. Os objetos do mesmo tipo devem ser alinhados e
exibidos da mesma maneira. Se vários objetos podem ser agrupados, a grade é aplicada ao
nível dos grupos também. Elementos pequenos podem ser alargados, adaptando-se aos
limites da grade. Elementos maiores podem utilizar mais de uma célula da grade. Certos
objetos podem ter um tamanho fixo, o que aumenta o número de linhas e colunas para que
eles possam manter seu tamanho. Botões de resposta padrão devem estar em posições
pré-definidas e podem ser acessados de fora da grade.

Minimizando o número de linhas e colunas, melhora o tempo necessário para

adquirir a informação e tomar a decisão apropriada. Diminuindo a poluição visual, aumenta-
se a eficiência e deixa a tarefa mais agradável, aumentando a satisfação.

The Grid (A Grade)

17
 Progress (Progresso)

Problema: O usuário quer saber o quanto da operação já foi realizado e quanto falta para
terminar.

Princípio de Usabilidade: Orientação (Feedback)

Contexto: Tarefas que demoram muito (mais que alguns segundos) e devem estar
finalizadas antes que outras tarefas possam iniciar.
• O desempenho da operação não pode ser sempre controlado pelo usuário (ou
projetista), muitas vezes, porque depende de sistemas externos, que podem falhar,
bloquear ou estar com baixo desempenho.
• O usuário não quer esperar e é impaciente.
• O usuário necessita feedback claro quanto ao progresso e o tempo restante.
• O usuário pode não estar familiarizado com a complexidade da tarefa.
• Durante a operação, o usuário pode decidir interromper a operação porque esta
demorará muito.

Progress (Progresso)

Solução: Mostre que a aplicação continua rodando e dê uma indicação de seu progresso.
Providencie retorno numa taxa que notifique ao usuário de que a operação ainda
está ocorrendo, em geral, a cada 2 segundos usando animação. Adicionalmente,
providencie uma indicação válida do progresso. Progresso é tipicamente o tempo restante
para terminar a operação, o número de unidades processadas ou a porcentagem de
trabalho realizado. O progresso pode ser exibido em um elemento
visual, como a barra de progresso. A barra de progresso deve ter um rótulo exibindo o
progresso relativo ou na unidade em que está sendo medida.

Providenciando retorno a uma taxa de 1 a 2 segundos, o usuário pode notar que a aplicação
está realmente processando e não travou. A indicação de progresso informa quando tempo a aplicação
ainda ficará neste estado. Combinando estes dois aspectos, alivia-se a preocupação do usuário.

18
 Progress (Progresso)

The Shield (O Escudo)

Problema: O usuário pode acidentalmente selecionar uma funcionalidade que tenha efeitos
irreversíveis.

Princípio de Usabilidade: Prevenção de Erros (Segurança)

Contexto: Funcionalidades que têm efeitos irreversíveis ou precisem de muito recurso para
serem desfeitas. Os efeitos colaterais podem levar a uma situação insegura ou altamente
indesejável. O resultado das ações pode ser severo e o usuário pode não ter consciência
disto, já que, normalmente, a operação é segura.

• O usuário deve ser protegido, mas a operação normal não

deve ser modificada.
• O usuário busca rapidez ao mesmo tempo em que tenta evitar
erros.
• Alguns efeitos colaterais podem ser mais indesejáveis que
outros.

19
 The Shield (O Escudo)

Solução Proteja o usuário inserindo um escudo. Adicione uma camada de proteção extra à
funcionalidade para proteger o usuário de cometer enganos. Pede-se ao usuário a
confirmação de sua intenção, com a resposta padrão sendo a resposta segura.

A camada extra exige do usuário dois erros em sequência em vez de apenas um. A
opção segura como padrão diminui a chance de um segundo engano. A solução aumenta a
segurança, reduz erros e aumenta a satisfação. Entretanto, requer uma ação a mais do
usuário, o que pode levar a uma redução do desempenho.

The Shield (O Escudo)

20
 The Preview (A Prévia)

Problema: O usuário está procurando por um item em um conjunto pequeno e tenta encontrá-
lo pesquisando o conjunto.

Princípio de Usabilidade: Compatibilidade (Mapeamento Natural)

Contexto: Em muitas aplicações o usuário necessita encontrar um item, por exemplo, um

arquivo, uma apresentação, um clip de video ou uma imagem, para os quais uma busca visual
ou auditiva é mais efetiva, mas o índice do conjunto não é audiovisual (ex. uma etiqueta de
texto).

Forças:
• Embora o usuário simplesmente queira ver o item real, os recursos necessários para
exibi-lo podem não estar disponíveis.
• O usuário vê o nome do índice, mas não é capaz de identificar o item somente pelo
nome.
• O usuário está procurando por um item mas precisa do nome do índice como
resultado de busca para outras tarefas.

The Preview (A Prévia)

Solução: Permita ao usuário uma prévia do item. Mostre uma prévia representativa de um ou
mais itens. A prévia pode utilizar menos recursos como espaço na tela, tempo para exibir ou
qualidade do que o original. A prévia deve ser suficientemente boa para poder ser
identificada. Se o número de itens no conjunto é pequeno, pode haver prévia de todos os
itens ao mesmo tempo. Se o conjunto contém muitos itens ou se a etiqueta de nome é
importante para o usuário, exiba uma prévia junto com a etiqueta. A prévia deve estar
positionada próxima ao item selecionado para reforçar a ligação entre eles.
Quando a seleção muda, a prévia é imediatamente atualizada.

O tempo de busca diminui porque o usuário pode "ver" ou "ouvir" se o item foi
localizado. De outra maneira, o usuário precisaria abrir o item antes de saber se era o
procurado. Por usar menos recursos que o original, a prévia é muito mais eficiente e a busca
se torna mais efetiva à medida em que a prévia é mais representativa. A solução melhora o
desempenho e a satisfação.

21
The Preview (A Prévia)

22