Design interfaces para internet

Apostila
Design de Interfaces para Internet
Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e
distribuído sob os seguintes termos:
1. As apostilas publicadas pelo do Núcleo de Educação a distância da NRsystem podem ser
reproduzidas e distribuídas no todo ou em parte, em qualquer meio físico ou eletrônico, desde que
os termos desta licença sejam obedecidos, e que esta licença ou referência a ela seja
exibida na reprodução.
2. Qualquer publicação na forma impressa deve obrigatoriamente citar, nas páginas externas, sua
origem e atribuições de direito autoral (o Núcleo de Educação a distância da NRsystem e seu(s)
autor(es)).
3. Todas as traduções e trabalhos derivados ou agregados incorporando qualquer informação
contida neste documento devem ser regidas por estas mesmas normas de distribuição e direitos
autorais. Ou seja, não é permitido produzir um trabalho derivado desta obra e impor restrições à
sua distribuição. O Núcleo de Educação a distância da NRsystem deve obrigatoriamente ser
notificado

(nrsystem@nrsystem.br)

de

tais

trabalhos

com

vista

ao aperfeiçoamento e

incorporação de melhorias aos originais.
Adicionalmente, devem ser observadas as seguintes restrições:


A versão modificada deve ser identificada como tal



O responsável pelas modificações deve ser identificado e as modificações datadas



Reconhecimento da fonte original do documento



A localização do documento original deve ser citada



Versões modificadas não contam com o endosso dos autores originais a menos que
autorização para tal seja fornecida por escrito.

A licença de uso e redistribuição deste material é oferecida sem nenhuma garantia de qualquer
tipo, expressa ou implícita, quanto a sua adequação a qualquer finalidade. O Núcleo de Educação
a distância da NRsystem não assume qualquer responsabilidade sobre o uso das informações
contidas neste material.

CONTEÚDO
INTRODUÇÃO.....................................................................................................................3
1 ALFABETIZAÇÃO VISUAL...............................................................................................3
1.1 Linguagem Visual.........................................................................................4,5,6
Exercício...................................................................................................................7
2 DESIGN: CONCEITOS.............................................................................................8,9,10
2.1 Prototipagem......................................................................................10,11,12,13
2.2 Sintaxe HTML.....................................................................................................5
3 DESIGN FÍSICO: CONCRETIZANDO UMA IDÉIA.........................................................14
3.1 Diretrizes adotadas no desenvolvimento do design físico.................14,15,16,17
4 USABILIDADE E INTERAÇÃO.............................................................................17,18,19
5 ENTENDENDO AS NECESSIDADES DO USUÁRIO...............................................20,21
6 ENGENHARIA DE USABILIDADE..................................................................................21
6.1 Estilos de Interface...........................................................................................22
6.2 Princípios de Usabilidade............................................................................23,24
6.3 Funcionalidade versus. Usabilidade............................................................24,25
7 TEORIA DAS CORES...........................................................................................26,27,28
SUGESTÕES DE LEITURA...............................................................................................29

Última atualização 23/12/213

INTRODUÇÃO

A utilização de elementos visuais como forma comunicação é uma prática comum no
processo de desenvolvimento de interfaces para internet. Um dos grandes desafios
consiste em criar interfaces intuitivas, sendo assim, o sucesso de um trabalho de design,
depende

em grande parte, da utilização de

elementos com os quais o usuário se

identifique.
O uso de imagens em interfaces para internet contribui de maneira significativa para a
composição visual de um site, este recurso, quando bem explorado, pode tornar a
navegação mais intuitiva. Importante ressaltar, que em virtude do grande número de
pessoas com limitação visual, devemos sempre disponibilizar uma descrição alternativa
das imagens na forma de texto (acessibilidade universal).
Esta apostila apresenta técnicas, conceitos e métodos que podem ser utilizados
sistematicamente para assegurar um alto grau de usabilidade na interface de aplicações
web.

CAPITULO 1 – ALFABETIZAÇÃO VISUAL
Atualmente, passamos por várias alfabetizações. Devemos levar em conta que a
formação educacional não se limita ao domínio da leitura e escrita; a mesma envolve
uma diversidade de códigos culturais da sociedade e das relações econômicas e
produtivas.
O conceito de alfabetização visual foi desenvolvido pelo professor João Kulcsár em tese
de mestrado, na Universidade de Kent (Inglaterra), nos anos 90, e na Universidade de
Harvard (Estados Unidos), onde esteve como professor visitante em 2002 e 2003.
Alfabetização digital é definida como a forma como as imagens são utilizadas e
manipuladas para conter mensagens precisas e reunirem informações.

3
Prof. Rogério Fernandes
rogerio@nrsystem.com


1.1 Linguagem Visual
Linguagem visual é uma linguagem não verbal, que compreende várias formas de
expressão, construídas a partir de elementos visuais. Para compreender a estrutura
da linguagem visual é conveniente concentrar-se nos seguintes elementos visuais:


Ponto;



Linha;



Cor;



Textura;



Dimensão.

A análise individual dos elementos visuais se faz necessária para um conhecimento mais
aprofundado de suas qualidades específicas.
Ponto
O ponto é a unidade mais simples na comunicação visual (irredutível). Quando fazemos
uma marca com tinta ou com um bastão, por exemplo, pensamos nesse elemento
visual como um ponto de referência ou um indicador de espaço. Qualquer ponto tem
grande poder de atração visual sobre o olho.

Dois pontos são instrumentos úteis no desenvolvimento de qualquer tipo de projeto
visual. Aprendemos cedo a utilizar o ponto como sistema de notação ideal, junto com
a régua e outros instrumentos de medição, como o compasso, por exemplo.

4


Linha
Quando os pontos estão muito próximos entre si, torna-se praticamente impossível
identificá-los individualmente, neste caso, temos a sensação de direção, e a cadeia de
pontos se transforma em outro elemento visual distintivo: a linha. Poderíamos definir a
linha como um ponto em movimento, ou como a história do movimento de um ponto,
pois, quando fazemos uma marca contínua, ou uma linha, nosso procedimento se
resume a colocar um marcador de pontos sobre uma superfície e movê-lo segundo uma
determinada trajetória, de tal forma que as marcas assim formadas se convertam em
registro.

Cor
No Design digital, o uso de cores proporciona:
• Mostrar as coisas conforme são vista na natureza;
• Representar associações simbólicas;
• Chamar e direcionar a atenção;
• Tornar a interface mais fácil de ser memorizada;
• Auxiliar na identificação de estruturas e processos.
O critério para selecionar as cores não pode ser somente baseado em conceitos
estéticos, deve-se também considerar como elas irão interagir umas com as outras. As
pessoas relacionam as cores com diversas situações, entre elas: perigo, atenção,
entre outras; estas associações variam de acordo com aspectos geográficos, culturais
e/ou idade.
Classificação das cores
As cores podem ser classificadas como cromáticas e acromáticas (baseadas em tons de
cinza)
Cores acromáticas:

5


Cores cromáticas:
1. Cores Quentes: Amarelo, Laranja e Vermelho;
2. Cores frias: Azul, Turquesa e Violeta.

Obs. Existem ainda, as chamadas “cores marginais”, seu caráter depende da cor
que esteja ao redor. Exemplo: Verde e Magenta.
Textura
A textura é o elemento visual que se relaciona com a composição de uma substância com
variações mínimas na superfície do material, perceptíveis através do tato ou da visão
(aspecto de lixa).

Dimensão
A representação da dimensão em formatos visuais bidimensionais depende da
ilusão (ótica). Em nenhuma das representações bidimensionais da realidade, como
o desenho, pintura, fotografia, cinema e televisão, existem uma dimensão real; ela é
apenas implícita.

6


EXERCÍCIO
A ilusão pode ser reforçada de muitas maneiras, mas o principal artifício para simulá-la é
a convenção técnica da perspectiva.
Faça uma análise e identifique os itens visuais utilizados no quadro de Pablo Picasso
“Guernica”

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
______________________________________________________________________

7


CAPÍTULO 2 – DESIGN: CONCEITOS
Design: esforço criativo relacionado à configuração, concepção e elaboração de algo,
como por exemplo, um objeto ou uma imagem (voltado para uma determinada função).
O termo design refere-se à concepção de uma solução prévia para um problema,
o profissional atuante nesta área é o Designer, palavra da língua inglesa para qual não
cabe tradução.
Formas de expressão: pintura, ilustração, fotografia, vídeo, ambientes, vestimenta, etc.
Design Gráfico
Consiste no processo de programar, projetar, coordenar, selecionar e organizar uma série
de elementos para produzir objetos visuais destinados a comunicar mensagens
específicas a determinados grupos.
O profissional desta área trabalha com sistemas visuais: criação de logotipos e identidade
visual, embalagens, interfaces para websites, editoração de livros e revistas, etc.
O resultado final de um design gráfico denomina-se grafismo (unidade composto por uma
infinidade de elementos diferentes).

Interface
Definições para Interface:


Superfície entre duas faces;



Interligação entre dois dispositivos;



Lugar onde acontece o contato entre duas entidades.

Exemplos de interface: Maçanetas de portas, torneiras, etc.
No contexto do desenvolvimento web, a Interação Humano-Computador (IHC) nos
fornecerá subsídios para superarmos um dos maiores desafios: como criar interfaces
intuitivas?

8


O que é IHC?
Interação Humano-Computador - Área que se dedica a estudar os fenômenos de
comunicação entre pessoas e sistemas computacionais, seus estudos envolvem todos
os aspectos relacionados com a interação entre usuários e sistemas.
Durante um projeto para desenvolvimento de interface, é importante identificarmos os
momentos que “devemos pensar” como técnico/projetista ou usuário final.
Preparação para o estudo de interfaces, considerações:
1. Para produzir tecnologia que auxilie humano, é necessário antes conhecê-los;
2. Estudar em primeiro plano as necessidades dos usuários (funcionalidades), se não, as
tecnologias disponíveis (requisitos não funcionais);
3. Aproveitar os conhecimentos do usuário e torná-lo um parceiro no desenvolvimento.
Design Conceitual
Transforma as necessidades e requisitos do usuário em um modelo conceitual.
Princípios chave do design conceitual:


Manter a mente aberta, mas nunca esquecer os usuários e seu contexto;



Discutir ideias com outros stakholders;



Utilizar prototipação de baixa fidelidade para obter rápido feedback;

Formas de pensar o modelo conceitual
Que modo de interação é mais adequado para o produto?


Conversação, Instrução, manipulação e navegação, exploração e pesquisa.

Figura 1 – Falha no levantamento de requisitos

9



Webdesign
WebDesign é o Design voltado para a Internet, e Webdesigner é o criador do processo.
Assim como as demais mídias, a internet possui elementos visuais próprios. Sites que
tenham um design bem definido e que estejam de acordo com a proposta do produto ou
do assunto a que deram origem, com certeza serão mais eficientes.
No design para web “imagem” é tudo, ou quase tudo, portanto um webdesigner tem
que saber exatamente os elementos que deve ou não utilizar em cada projeto.
Protótipos
Em interface homem máquina (interação humano-computador), pode ser:


Uma série de rascunhos de tela;



Mock-up1 ou representações de um design;



Um slide em PowerPoint;

Os protótipos permite testar facilmente diferentes ideias e podem responder questões
que envolvam a escolha de melhores alternativas, normalmente são usados para:


Testar a viabilidade técnica de uma ideia;



Esclarecer requisitos vagos;



Realizar alguns testes com usuários.

2.1 Prototipagem
A técnica de prototipagem pode ser usada para definir a diagramação, posição e tamanho
dos elementos para aumentar a efetividade do site (conversão). O protótipo é a primeira
atividade executada numa etapa de concepção visual, para que o site comece a tomar
forma.
Características de um protótipo
 Pode-se construir um protótipo com a intenção de descartá-lo;
 Pode-se construir um protótipo com a intenção de fazê-lo evoluir para o produto
final.
Podemos classificar os protótipos como sendo de baixa, média ou de alta fidelidade.

1

Modelo em escala ou em tamanho real de um design ou dispositivo

10


Protótipos de Baixa Fidelidade: não se assemelham muito ao produto final, mas são
úteis, pois tendem a serem mais simples, baratos e de fácil produção. Os protótipos de
baixa fidelidade são normalmente usados para obter feedback rápido durante a definição
de requisitos.
Exemplos: storyboard, esboço.

Figura 2 – Exemplo de protótipo de baixa fidelidade (Story Board)

Figura 3 - Exemplo de wireframe (média fidelidade)

11


Figura 4 - Exemplo de wireframe de alta fidelidade

Protótipos de Alta fidelidade: Utilizam material que se espera que seja o mesmo da
versão final. Apesar de precisarmos de mais tempo e recursos para elaborar um protótipo
de alta fidelidade, este tipo de protótipo apoia a avaliação de todos os detalhes do design,
e se parece mais com a versão final do produto.
Em protótipos de alta fidelidade é comum à utilização de ferramentas What You See Is
What You Get (WYSIWYG). A imagem de manipulação da interface é a mesma que a
aplicação cria. Exemplos: Word da Microsoft e Fireworks da Adobe Systems

12


Wireframe
O wireframe é um guia visual que fornece a estrutura (template) que será usada pelo
designer para construir o layout (visual), o principal objetivo no uso de wireframe é
planejar como os requisitos funcionais serão usados pelo desenvolvedor.
A utilização de wireframe possibilita planejar a arquitetura da aplicação minimizando
as influências visuais. Os wireframes podem ter diferentes níveis de detalhes. Uma das
ferramentas mais usadas na criação de wireframe é o aplicativo Fireworks (Adobe
Systems).
Ferramentas free para criação de wireframe:
Cacoo - site para download: https://cacoo.com/getstarted
iPlotz – site para download: http://iplotz.com/

Sugestão de leitura
Design de Interação
Autor: Preece, Rogers & Sharp
Edição: 1 / 2005
Idioma: Português
Breve Descrição: Exposição atualizada do design das tecnologias interativas do
momento e de nova geração, como web, dispositivos móveis e computação vestível.
Explica como utilizar técnicas de design e avaliação para o desenvolvimento de
tecnologias interativas de sucesso.
Guilhermo Almeida dos Reis. Técnicas de prototipação rápidas. Disponível em:
http://www.guilhermo.com/aula_eca/paper_prototype.pdf. Acessado em: 31/12/2013

13


CAPÍTULO 3 – DESIGN FÍSICO: CONCRETIZANDO UMA IDÉIA
O Design físico envolve considerar questões mais concretas e detalhadas acerca de uma
interface, como design de tela ou do teclado, quais ícones utilizar, como estruturar
menus, etc...


Questões realistas devem ser consideradas;



Detalhamento do design da interface;



Interação entre o design conceitual e o design físico.

Figura 5 - Utilização de imagens em interface digital

3.1 Diretrizes adotadas no desenvolvimento do design físico
Avaliação heurística (Nielsen) - método de avaliação de usabilidade onde um avaliador
procura identificar problemas de usabilidade numa interface com o usuário.
1. Visibilidade do estado do sistema
2. Compatibilidade do sistema com o mundo real
3. Controle e liberdade do usuário
4. Consistência e padrões
5. Prevenção de erros
6. Reconhecimento ao invés de lembrança
7. Flexibilidade e eficiência de uso
8. Estética e design minimalista
9. Ajudar os usuários a reconhecer, diagnosticar e corrigir erros
10. Ajudas (Help)

14


As 8 regras de ouro de Shneiderman
Consistência: Sequência de ações similares para procedimentos similares. Manter um
padrão visual para as cores, Layout e fontes. Utilizar a mesma terminologia em menus.
Atalhos para utilizadores assíduos: Teclas de atalho, macros e navegação
simples facilitam e agilizam a interação do utilizador mais experientes com a interface.
Feedback informativo: Toda e qualquer ação do utilizador requer uma resposta
do sistema, cujo qual será mais ou menos explicativa dependendo do tipo de ação a ser
executada. Diálogos que indiquem término da ação: As sequências de ações do sistema
devem ser organizadas de tal forma que o usuário consiga entender os passos e saiba
quando cada um deles for executado com sucesso.
Diálogos que indiquem término da ação: As sequências de ações do sistema devem
ser organizadas de tal forma que o usuário consiga entender os passos e saiba quando
cada um deles for executado com sucesso.
Prevenção e tratamento de erros: A interface não pode dar vias para o
utilizador cometer erros graves, e caso ocorram erros, devem haver mecanismos que
tratem, corrijam na medida do possível, e caso não seja possível, instrua o usuário para
uma possível solução.
Reversão de ações: Sempre que possível, as ações devem ser reversíveis, de forma
que tranquilize o utilizador e lhe dá mais coragem para explorar o sistema.
Controle: Os utilizadores mais experientes devem ter a sensação de que eles dominam
os processos do sistema e que ele apenas responde a suas ações.
Baixa carga de memorização: O sistema deve conter uma interface simples para
memorização. Para isso requer uma boa Estrutura e Equilíbrio para relacionar elementos
e facilitar a memorização subjetiva das telas, sem exigir esforço.
Como aplico isto na prática? Use o seu bom senso!!!
Segmente seu trabalho. Guias de estilos: comercial, corporativos...
Diferentes estilos requerem diferentes tipos de recursos (caixa de diálogo, barras de
ferramentas, ícones, menus, etc.)


Design de menu



Design de ícones



Design de telas



Apresentação das informações

15


Design Físico: Menu.
 Quantos itens o menu deve ter?
 Em que ordem eles devem estar?
 De que forma o menu deve ser estruturado, isto é, quando deve ser
utilizado sub-menus,
 Caixas de combinação (combo)?
 Quantas categorias devem ser utilizadas para agrupar itens de menu?
 Como a divisão em grupos será denotada, isto é, com cores diferentes, linhas
divisórias?
 Quantos menus deverá haver?
 Qual a terminologia a ser utilizada? (as atividades para determinar os requisitos
fornecerão esta reposta)
 Como as restrições físicas podem ser compensadas (por exemplo, um telefone
celular)?
Design de Ícones
Um bom design de ícones é difícil. O significado dos ícones é muitas vezes cultural e
sensitivo ao contexto.
Algumas considerações:
1. Sempre utilize símbolos
tradicionais quando já existe
um padrão.
2. Esses objetos do ClipArt
o que significam para você?
Figura 6 - ClipArts

Design de Tela
 Capture a atenção do usuário para um ponto de destaque utilizando cores,
movimento, molduras;
 Animação é um recursos muito poderoso, mas pode distrair o usuário;
 Uma boa organização ajuda: agrupando, aproximando fisicamente;
 Procure o equilíbrio entre uma tela com itens muito dispersos e uma tela
sobrecarregada de itens.

16


Apresentação da informação
 As informações mais relevantes devem estar disponíveis todo o tempo;
 Diferentes tipos de informações implicam em diferentes tipos de apresentação;
 Consistência entre dados impressos e os exibidos apenas na tela.
1º Observar qual é o esquema dominante
 Ex. se for um site de receitas, a maior parte de suas categorias são baseadas
em ingredientes? Pratos principais? Culturas? Tipicamente, um vai se sobressair.
2º Ajustar a consistência da nomenclatura. Padronizar.
 Ex. se um grupo chama “material administrativo” você pode padronizá-lo para
“administração”.
Agora analise o todo!!!
 Os rótulos são adequados?
 Há mais de um item em cada categoria?
 Há categorias muito extensas, precisando ser subdivididas?
CAPÍTULO 4 – USABILIDADE E INTERAÇÃO
Etapas do Design de Interação:
1. Identificar necessidades e estabelecer requisitos;
2. Desenvolver designs alternativos que preencham esses requisitos;
3. Construir versões interativas dos designs, de maneira que possam ser comunicados e
analisados;
4. Avaliar o que esta sendo construído durante o processo.
Aplicações:
 Explicar as diferenças entre os bons e os maus designs;
 Delinear as diferentes formas de orientação utilizadas no design de interação;
 Metas de Usabilidade e Princípios de design.
O objetivo do Design de Interação é trazer a usabilidade para dentro do processo de
Design.

17


Motivação:
Entender o impacto das interfaces junto a:
 Usuários;
 Tarefas;
 Organizações.
A seguir são apresentados alguns exemplos de design, levando em consideração a
usabilidade dos produtos apresentados, faça uma análise pensando como designer e
outra como usuário final.

Bom e mau design: Caso 1

 O que há de errado com o
controle da Apex? (cinza à
direita)
 Por que o controle da TIVo
tem um melhor design?

Figura 7 - Design físico 1

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
______________________________________________________________________

18


Bom e mau design: Caso 2

Figura 8 – Site de busca aonde.com.br

Figura 8 - Site de busca Google

O que devemos considerar?
Quem são os usuários?
Que tipo de atividades as pessoas estão realizando?
Onde ocorre a interação?
Devemos otimizar as interações do usuário com o sistema.

19


CAPÍTULO 5 – ENTENDENDO AS NECESSIDADES DO USUÁRIO
 Considerar no que as pessoas são boas ou não.
 Considerar o que pode ajudar as pessoas na atual maneira de fazer as coisas.
 Ouvir o que as pessoas querem e envolvê-las no design.
 Utilizar técnicas baseadas no usuário “testadas e aprovadas” durante o processo
de design.
Equipes Multidisciplinares
Muitas pessoas com diferentes experiências envolvidas.
Diferentes perspectivas e formas de falar e ver sobre as coisas.
Benefícios:
Muitas ideias e design gerados.
Desvantagens:
Dificuldade na comunicação e no processo de criação de design.

Atividade de fixação – Maneiras de conceitualizar a usabilidade.
Crie um projeto de uma secretária eletrônica seguindo os seguintes critérios:
1. Não pode haver nenhum tipo de texto ou letras
2. Não pode haver botões (físicos)
Como será a interação do usuário com esse objeto?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
______________________________________________________________________
Como orientar os designers a pensar sobre aspectos diferentes de seus designs?
_______________________________________________________________________
_______________________________________________________________________
______________________________________________________________________

20


Como determinar o que os usuários devem ver e fazer quando realizam tarefas utilizando
um produto interativo?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
______________________________________________________________________
CAPÍTULO 6 – ENGENHARIA DE USABILIDADE
Engenharia de usabilidade: Eficácia, eficiência e satisfação analisados sob o prisma da
ISO 92412:
Eficácia: A capacidade oferecida para alcançar seus objetivos em número e com a
qualidade necessária.
Eficiência: A quantidade de recursos necessários que os sistemas solicitam aos usuários
para a obtenção de seus objetivos com o sistema.
Satisfação: A emoção que os sistemas proporcionam aos usuários em face dos
resultados obtidos e dos recursos necessários para alcançar tais objetivos.

Figura 9 - Relação entre conforto e produtividade

Princípios de Ergonomia: visa proporcionar eficácia e eficiência, além do bem estar e
saúde do usuário, por meio da adaptação do trabalho ao homem.

Figura 10 – falhas de interface e seus impactos
2

ISO 9241 norma internacional que trata do trabalho de escritório informatizado abrangendo a ergonomia de
interação humano-computador

21


6.1 Estilos de Interface
A modelagem de processos de negócio é uma fase crucial na definição dos aspectos de
usabilidade do produto. A definição do publico alvo (usuários) e tarefas que serão
realizadas na aplicação compõem a análise de contexto de uso.
O estilo de interface adotado no desenho de uma interface pode resultar em uma
aplicação mais adequada para a realização das tarefas. A seguir são descritos alguns
exemplos de estilos de interface.
 What You See Is What You Get (WYSIWYG) A imagem de manipulação da
interface é a mesma que a aplicação cria. Ex: Editores de texto do tipo Word da
Microsoft e Fireworks da Adobe Systems.
 Manipulação direta - Windows Explorer (mover arquivo/ diretório, ...).
 Windows, Icons, Menus and Pointers (WIMP). Permite a interação através
de componentes de interação virtuais denominados widgets.
 Estilo Menu, Logs de comando, Formulários.
No contexto histórico, os primeiros programas não possuíam interface gráfica (MS
DOS, por exemplo). Algumas décadas após o surgimento dos primeiros programas, a
interação passou da linha de comando, em modo texto, para desktops em três dimensões
e softwares que aceitam comandos por voz ou gestos com o propósito de facilitar e tornar
mais intuitiva a utilização das máquinas.

Sugestão de leitura:
Felipe Arruda. História da Interface. Disponível em:
http://www.tecmundo.com.br/historia/9528-a-historia-da-interface-grafica.htm.

Acessado

em: 31/12/2013

22


6.2 Princípios de Usabilidade
Usabilidade pode ser medida através da qualidade de experiência do usuário ao interagir
com um sistema.

Figura 11 - Falha de usabilidade em interface

A Usabilidade é associada a 5 características:
1. Fáceis de aprender;
2. Fáceis de lembrar;
3. Maximizam a produtividade;
4. Minimizam erros;
5. Maximizam satisfação.

23


Exemplo de falha de usabilidade. Onde está localizado o menu do site abaixo????

Figura 14 - Falha de usabilidade em projeto de website

6.3 Funcionalidade versus. Usabilidade
O foco dos projetistas é a funcionalidade, eficiência e custo.
 Porém se tudo funciona como especificado, por que os usuários não se
satisfazem com muitos sistemas?
 Porque é importante considerar além da funcionalidade?
Métricas para avaliação de Usabilidade:
1. Tempo utilizado para a realização de uma tarefa;
2. Número de cliques ou comandos efetuados;
3. Razão entre interações de sucesso e erro;
4. Frequência de uso de manuais de ajuda;
5. Número de vezes que o usuário expressou frustração;
6. Taxa de tarefas completadas.

24


Figura 12 - Diferença entre usabilidade e ergonomia

Ergonomia

Figura 13 - Falha de usabilidade em produto

Considerações importantes:
 Técnicas de avaliação são importantes para obter feedback;
 Diagnóstico prévio traz economia em tempo e dinheiro;
 A participação do usuário é necessária no processo de desenvolvimento do site;
 Quanto melhor a usabilidade maior o sucesso.

25


CAPÍTULO 7 – TEORIA DAS CORES
O critério para selecionar as cores não deve se basear apenas em padrões estéticos,
devemos levar em consideração como as cores adotadas irão interagir umas com as
outras.
 O uso de cores em interfaces permite:
 Mostrar as coisas conforme são vistas na natureza;
 Representar associações simbólicas;
 Chamar e direcionar a atenção;
 Enfatizar alguns aspectos da interface;
 Diminuir a ocorrência de erros;
 Auxiliar na memorização de estruturas e processos;
 Tornar uma interface mais fácil de ser memorizada.
7.1 Associação de Cores:
Normalmente, as pessoas associam as cores a diversas situações de suas vidas,
seu uso pode indicar condições diversas: perigo, atenção, qualidade dos alimentos,
acidez e alcalinidade em experimentos químicos, etc.
As associações dependem de diversos aspectos, entre eles:
 Geográficos;
 Culturais;
 Idade.
Uso de Cores – Associações à cor branca
Em aplicativos em que o usuário tem que visualizar uma mesma tela por muito tempo,
não é recomendado o uso da cor branco como cor de fundo.
 Em contraste com um texto escuro produz uma máxima legibilidade.
Associações do branco
Positivas

Negativas

Neve

Frio

Pureza

Hospital

Inocência

Vulnerabilidade

Paz

Palidez fúnebre

Limpeza

Rendição

26


Uso de Cores – Associações à Cor Preta
Funciona como um estimulante para as demais cores e harmoniza bem com todas elas.
 Não é aconselhável utilizar como cor de fundo.
 Eficientes para aumentar o contraste entre cores diferentes.
Associações do preto
Positivas

Negativas

Noite

Medo

Carvão

Vazio

Poder

Morte

Estabilidade

Segredo

Solidez

Maldição

Uso de Cores – Associações à Cor Cinza
O default da maioria dos softwares comerciais possui uma cor cromática de baixo brilho
como cor de fundo. Quanto mais baixo o brilho (menor a intensidade de luz), mais cinza
existe na cor.
A cor cinza reduz conotações emocionais.
 Combina com todas as cores.
 Embora seja uma boa cor de fundo tem pouco apelo.
Uso de cores – Associações à Cor Vermelha
A cor vermelha possui o maior impacto universal devido a sua associação com o sangue
e o fogo, portanto com a guerra. Curiosidade, seu significado simbólico varia:
 Na Inglaterra representa a realeza;
 Nos Estados Unidos representa perigo;
 Na China representa revolução;
Associações do vermelho
 Na Índia representa o casamento.
Positivas

Negativas

Força

Guerra

Paixão

Sangue

Coragem

Satã

Ação

Feridas

Energia

Fogo

O vermelho é eficiente em interfaces para chamar a atenção, bordas vermelhas
são rapidamente percebidas.
Obs. Evite usar a cor vermelha em áreas amplas ou como cor de fundo, devido ao fato
de ser uma cor agressiva (dominante) chama muito atenção

27


Uso de Cores – Associações à Cor Amarela
A cor amarela possui como característica incandescência acolhedora por sua associação
com o sol, simboliza vida e calor.
Associação do amarelo
Positivas

Negativas

Sol

Covardia

Verão

Traição

Serenidade

Risco

Ouro

Doença

Inovação

Loucura

Uso de Cores – Associações à Cor Verde
A cor verde se tornou marca dos movimentos ambientalistas.
O olho humano é mais propicio aos comprimentos de onda próximos ao verde-amarelo,
desta forma, entre as três cores do RGB é a cor mais visível, sendo muito
propicia quando se deseja passar rapidamente uma informação.
Associações do verde
Positivas

Negativas

Vegetação

Decadência

Natureza

Inexperiência

Fertilidade

Inveja

Esperança

Ganância

Segurança

Fuga à realidade

Uso de Cores – Associações à cor Azul
A cor azul sugere profundidade e espaço devido a sua associação com o céu e mar. O
azul é uma cor fria e suave, tem uma grande capacidade em relaxar e tranquilizar as
pessoas. Entre as principais “qualidades” da cor azul, podemos destacar o fato de ser a
cor mais usada nas bandeiras nacionais por simbolizar autoridade e espiritualidade.
Associações do Azul
Positivas

Negativas

Céu

Depressão

Espiritualidade

Obscenidade

Estabilidade

Mistério

Paz

Conservadorismo

Obs. Devido ao fato do olho humano ser menos sensível aos comprimentos de ondas da
cor azul, a cor azul não oferece uma boa focalização ou níveis de contraste, sendo assim,
evite utilizar a cor azul como cor de texto e detalhes finos.

28


SUGESTÕES DE LEITURA
ARRUDA, F. História da Interface. Disponível em:
http://www.tecmundo.com.br/historia/9528-a-historia-da-interface-grafica.htm.

Acessado

em: 31/12/2013
DE MORAES, Anamaria; SANTA ROSA, José Guilherme. Avaliação e projetos no design
de interfaces. 1 ed. Rio de Janeiro: 2AB, 2008
FREITAS, A.K.M. Psicodinâmica das cores em comunicação. Disponível em:
http://www.iar.unicamp.br/lab/luz/ld/Cor/psicodinamica_das_cores_em_comunicacao.pdf.
Acessado em: 31/12/2013.
HIX, D. HARTSON.H.R. Developing User Interfaces:Ensure Usability Through
Poduct and Process. John Wiley and Sons, New York.
ISO 9241. “Ergonomic requirements for office work with visual display terminals
(VDTs)”. Part 10: Dialogue principles.
NIELSEN, J. Usability Engineering. San Francisco, CA: Morgan Kaufmann, 1993.
PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de interação: além da
interação humano-computador. Trad. Viviane Possamai. Porto Alegre: Bookman, 2005.
REIS, G. A. Técnicas de prototipação rápidas. Protótipos de papel. Disponível em:
http://www.guilhermo.com/aula_eca/paper_prototype.pdf. Acessado em: 31/12/2013.

29

Design interfaces para internet

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Design interfaces para internet

Semelhante a Design interfaces para internet (20)

Último

Último (20)

Design interfaces para internet