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 ([email protected]) 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

3 Prof. Rogério Fernandes

[email protected]

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.



[email protected]

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.



[email protected]

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:



[email protected]

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.



[email protected]

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”

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

______________________________________________________________________



[email protected]

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?



[email protected]

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



[email protected]

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



[email protected]

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)



[email protected]

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

Figura 4 - Exemplo de wireframe de alta fidelidade



[email protected]

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

https://cacoo.com/getstarted

http://iplotz.com/

http://www.guilhermo.com/aula_eca/paper_prototype.pdf



[email protected]

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.

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)

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



[email protected]

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



[email protected]

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.

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.

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



[email protected]

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.



[email protected]

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

Figura 7 - Design físico 1

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

______________________________________________________________________

O que há de errado com o

controle da Apex? (cinza à

direita)

Por que o controle da TIVo

tem um melhor design?



[email protected]

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.



[email protected]

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?

_______________________________________________________________________

_______________________________________________________________________

______________________________________________________________________



[email protected]

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.

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.

2ISO 9241 norma internacional que trata do trabalho de escritório informatizado abrangendo a ergonomia de

interação humano-computador

Figura 9 - Relação entre conforto e produtividade

Figura 10 – falhas de interface e seus impactos



[email protected]

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

http://www.tecmundo.com.br/historia/9528-a-historia-da-interface-grafica.htm



[email protected]

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.

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.

Figura 11 - Falha de usabilidade em interface



[email protected]

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

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.

Figura 14 - Falha de usabilidade em projeto de website



[email protected]

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.



[email protected]

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



[email protected]

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.

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;

Na Índia representa o casamento.

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

Associações do preto

Positivas Negativas

Noite Medo

Carvão Vazio

Poder Morte

Estabilidade Segredo

Solidez Maldição

Associações do vermelho

Positivas Negativas

Força Guerra

Paixão Sangue

Coragem Satã

Ação Feridas

Energia Fogo



[email protected]

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.

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.

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.

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.

Associação do amarelo

Positivas Negativas

Sol Covardia

Verão Traição

Serenidade Risco

Ouro Doença

Inovação Loucura

Associações do verde

Positivas Negativas

Vegetação Decadência

Natureza Inexperiência

Fertilidade Inveja

Esperança Ganância

Segurança Fuga à realidade

Associações do Azul

Positivas Negativas

Céu Depressão

Espiritualidade Obscenidade

Estabilidade Mistério

Paz Conservadorismo



[email protected]

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.

http://www.tecmundo.com.br/historia/9528-a-historia-da-interface-grafica.htm

http://www.iar.unicamp.br/lab/luz/ld/Cor/psicodinamica_das_cores_em_comunicacao.pdf

http://www.guilhermo.com/aula_eca/paper_prototype.pdf

Design interfaces para internet

Education

Transcript of Design interfaces para internet