desenvolvimento de interface para site de e-commerce da rede de supermercados ‘rede smart’

0

FUNDAÇÃO OSWALDO ARANHA

CENTRO UNIVERSITÁRIO DE VOLTA REDONDA

CURSO DE GRADUAÇÃO EM DESIGN GRÁFICO

TRABALHO DE CONCLUSÃO DE CURSO

LUCAS RAMALHO GONÇALVES

DESENVOLVIMENTO DE INTERFACE PARA SITE DE E-COMMERCE DA REDE

DE SUPERMERCADOS ‘REDE SMART’

VOLTA REDONDA

2011

0

FUNDAÇÃO OSWALDO ARANHA

CENTRO UNIVERSITÁRIO DE VOLTA REDONDA

CURSO DE GRADUAÇÃO EM DESIGN GRÁFICO

TRABALHO DE CONCLUSÃO DE CURSO

DESENVOLVIMENTO DE INTERFACE PARA SITE DE E-COMMERCE DA REDE

DE SUPERMERCADOS ‘REDE SMART’

Monografia apresentada ao Curso de

DESIGN do UniFOA como requisito à

Obtenção do título de bacharel em Design

Gráfico.

Aluno:

Lucas Ramalho Gonçalves

Orientador:

Prof. Me. Bruno de Souza Correa

VOLTA REDONDA

2011

SUMÁRIO

1 INTRODUÇÃO ......................................................................................................... 1

2 OBJETIVO ................................................................................................................ 2

2.1 OBJETIVOS ESPECIFICOS .............................................................................. 2

2.2 OBJETIVOS OPERACIONAIS ........................................................................... 2

3 JUSTIFICATIVA ....................................................................................................... 3

4 METODOLOGIA ....................................................................................................... 5

5 CRONOGRAMA ....................................................................................................... 7

6 BRIEFING ............................................................................................................... 8

7 PROBLEMATIZAÇÃO ............................................................................................ 10

8 LEVANTAMENTO DE DADOS .............................................................................. 13

8.1 Levantamento de Dados Sobre Comércio Eletrônico ...................................... 13

8.2 Tipos de comércio eletrônico ........................................................................... 13

8.3 Histórico ........................................................................................................... 14

8.4 Futuro do e-commerce no mercado ................................................................. 14

8.5 Produtos Virtuais .............................................................................................. 15

8.6 Quais são as maiores barreiras ao Comércio Eletrônico? ............................... 15

9 Levantamento de similares (ficha de similares) ...................................................... 17

9.1 CARREFOUR .................................................................................................. 17

9.2 PÃO DE AÇÚCAR ........................................................................................... 20

9.3 WALMART ....................................................................................................... 24

9.4 AMAZON .......................................................................................................... 27

9.5 APPLE STORE ................................................................................................ 31

10 LEVANTAMENTO DE DADOS DAS CARACTERÍSTICAS TECNOLÓGICAS .... 38

11 UNIVERSO IMAGÉTICO ...................................................................................... 40

12 ESTUDO SOBRE UNIVERSO CROMÁTICO ...................................................... 43

12.1.1 Círculo cromático ..................................................................................... 44

12.1.2 Cores primárias........................................................................................ 45

12.1.3 Cores secundárias ................................................................................... 45

12.1.4 Cores complementares ............................................................................ 46

12.1.5 Tom .......................................................................................................... 46

12.1.6 Tom rompido ............................................................................................ 47

12.2.0 Temperatura das cores ............................................................................ 48

12.2.1 Contraste ................................................................................................. 49

12.2.2 Contraste de tom ..................................................................................... 49

12.2.3 Contraste claro-escuro ............................................................................. 50

12.2.4 Contraste quente-frio ............................................................................... 51

12.2.5 Contraste de complementares ................................................................. 51

12.2.6 Contraste de limite ................................................................................... 52

12.2.7 Contraste simultâneo ............................................................................... 53

12.3 Harmonia .................................................................................................... 54

13 ASPECTOS PSICODINÂMICOS DAS CORES ................................................... 58

14 ESTUDO TIPOGRÁFICO ..................................................................................... 60

14.1 Anatomia do tipo ............................................................................................ 61

14.2 Modalidades de fontes tipográficas ................................................................ 62

14.3 Proporções ..................................................................................................... 64

14.4 Kerning ........................................................................................................... 65

14.5 Contraste (espessura das hastes) ................................................................. 66

14.5.1 Estresse (contraste) ................................................................................. 67

14.6 Estudo sobre famílias tipográficas ................................................................. 69

15 ESTUDO DE ERGONOMIA VISUAL ................................................................... 73

15.1 Legibilidade .................................................................................................... 74

15.2 Leiturabilidade ................................................................................................ 74

15.3 Pregnância ..................................................................................................... 75

15.4 Distâncias de leitura ....................................................................................... 76

15.5 Estudos de planos de leitura .......................................................................... 77

16 ESTUDO DE LINGUAGEM SINTÉTICA / PICTOGRAFIA ................................... 79

17 ESTUDO SOBRE USABILIDADE ........................................................................ 81

17.1.1 O que é Análise Heurística? .................................................................... 81

17.1.2 Metodologia de aplicação ........................................................................ 81

17.1.3 Resultados ............................................................................................... 82

17.3 Linguagem adequada .................................................................................... 83

17.3.1 Liberdade e controle do usuário............................................................... 83

17.3.2 Coerência ................................................................................................ 83

17.3.4 Controle de erros ..................................................................................... 84

17.3.5 Reconhecimento ...................................................................................... 84

17.3.6 Flexibilidade e eficiência .......................................................................... 84

17.3.7 Estética e minimalismo ............................................................................ 85

17.4 As dez heurísticas de Jacob Nilsen ............................................................... 86

17.5 Acessibilidade ................................................................................................ 87

18 DADOS DE PRESENÇA HUMANA ..................................................................... 90

18.1 Número de usuários no Brasil ........................................................................ 90

18.2 Comércio eletrônico ....................................................................................... 91

18.3 Banda larga .................................................................................................... 91

18.4 Crescimento do número de usuários ............................................................. 92

18.5 Crescimento de consumidores no comércio eletrônico .................................. 92

18.6 Perfil do Consumidor – eBit ........................................................................... 93

19 ANÁLISE DOS DADOS ........................................................................................ 94

19.0 Análise Comércio Eletrônico .......................................................................... 94

19.1 Análise de similares ....................................................................................... 95

19.2 Análise das Características Tecnológicas ...................................................... 96

19.3 Análise Imagética ........................................................................................... 97

19.4.1 Análise Cromática ....................................................................................... 98

19.4.2 Análise dos Aspectos Psicodinâmicos das Cores ....................................... 99

19.5 Análise Tipográfica ....................................................................................... 100

19.6 Análise Ergonomia Visual ............................................................................ 104

19.7 Análise Linguagem Sintética ........................................................................ 105

19.8.1 Análise Usabilidade ................................................................................... 106

19.8.2 Análise Acessibilidade .............................................................................. 108

19.9 Análise Presença Humana ........................................................................... 110

20 SÍNTESE ............................................................................................................ 112

LISTA DE TABELAS

Tabela 1 - Cronograma ............................................................................................... 7

Tabela 2 - Similar #1 - Carrefour ............................................................................... 19

Tabela 3 - Similar #2 – Pão de Açúcar ...................................................................... 22

Tabela 4 - Similar #3 – Walmart ................................................................................ 25

Tabela 5 - Similar #4 – Amazon ................................................................................ 28

Tabela 6 - Similar #6 - Ebay ...................................................................................... 36

Tabela 7 - Resoluções de tela mais utilizadas .......................................................... 39

Tabela 8 - Crescimento de consumidores em comércio eletrônico ........................... 92

Tabela 9 - Tamanhos de texto recomendáveis ....................................................... 101

LISTA DE FIGURAS

Figura 1 Similar #1 - Carrefour – Cores .................................................................... 19

Figura 2 - Similar #1 - Carrefour - Organograma navegacional ................................ 20

Figura 3 - Similar #2 - pictogramas e ícones ............................................................ 20

Figura 4- Similar #2 - Cores ...................................................................................... 22

Figura 5 - Similar #2 - Pão de Açúcar - Organograma navegacional ........................ 23


Figura 7 - Similar #3 – Cores .................................................................................... 25

Figura 8 - Similar #3 - Organograma navegacional .................................................. 26


Figura 10 - Similar #4 – Cores .................................................................................. 29

Figura 11 - Similar #4 - Organograma navegacional ................................................ 30

Figura 12 - Similar #4 - pictogramas e ícones .......................................................... 31

Figura 13 - Similar #5 - Apple Store .......................................................................... 32







Figura 20 - Modelo básico de wireframe ................................................................... 38

Figura 21 - Painel semântico do universo imagético grupo (bem estar -

comportamental) ................................................................................................ 41

Figura 22 - Painel semântico do universo imagético grupo (alimento - temático) ..... 42

Figura 23 - Prima - cor como luz ............................................................................... 43

Figura 24 - Potes de pigmentos coloridos - cor como pigmento ............................... 44

Figura 25 - Círculo cromático .................................................................................... 44

Figura 26 - Cores aditivas ......................................................................................... 45

Figura 27 - Cores subtrativas .................................................................................... 45

Figura 28 - Cores secundárias .................................................................................. 46

Figura 29 - Variações de tom .................................................................................... 47

Figura 30 - Tom rompido .......................................................................................... 47

Figura 31 - Temperatura de cor ................................................................................ 48

Figura 32 - Constraste de tom .................................................................................. 50

Figura 33 - Contraste claro-escuro ........................................................................... 50

Figura 34 - Contraste quente-frio .............................................................................. 51

Figura 35 - Contraste de complementares ................................................................ 52

Figura 36 - Contraste de limite .................................................................................. 53

Figura 37 - Contraste simultâneo .............................................................................. 53

Figura 38 - Esquema harmônico neutro (escala acromática) ................................... 54

Figura 39 - Esquema harmônico monocromático ..................................................... 55

Figura 40 - Esquema harmônico análogo ................................................................. 55

Figura 41 - cores complementares ........................................................................... 55

Figura 42 - Esquema de complementares divididas ................................................. 56

Figura 43 - Esquema harmônico análogo complementar ou duplo complementar ... 56

Figura 44 - Esquema de trios harmônicos ................................................................ 56

Figura 45 - Esquema de quartetos, quintetos, sextetos harmonicos. ....................... 57

Figura 46 - Acordes consonantes e dissonantes ...................................................... 58

Figura 47 - Anatomia do Tipo - Lucy Niemeyer (2006) – Pag. 34 ............................. 62

Figura 48 - Modalidades de fontes tipográficas - Romanos ...................................... 63

Figura 49 - - Modalidades de fontes tipográficas – Lineares ................................... 63

Figura 50 - Modalidades de fontes tipográficas – Incisos ......................................... 63

Figura 51 - Modalidades de fontes tipográficas – Manuais ....................................... 64

Figura 52 - Modalidades de fontes tipográficas – Manuscritos ................................. 64

Figura 53 - Modalidades de fontes tipográficas – Góticos ........................................ 64

Figura 54 - Exemplo de proporções na Tipografia .................................................... 65

Figura 55 - Exemplo Kerning .................................................................................... 66

Figura 56 - Exemplo da variação de tracking ............................................................ 66

Figura 57 - Exemplo da variação do contraste na tipografia ..................................... 67

Figura 58 - Características das Humanísticas .......................................................... 69

Figura 59 - Características das Garaldinas ............................................................... 70

Figura 60 - Características das Transicionais ........................................................... 70

Figura 61 - Características das Didodianas .............................................................. 70

Figura 62 - Características das Egípcias .................................................................. 71

Figura 63 - Características das Neotransacionais .................................................... 71

Figura 64 - Características das grotescas ................................................................ 71

Figura 65 - Características das neogrotescas .......................................................... 72

Figura 66 - Características das geométricas ............................................................ 72

Figura 67 - Características das humanísticas ........................................................... 72

Figura 68 - Características das Glíficas .................................................................... 73

Figura 69 - Características das Caligráficas ............................................................. 73

Figura 70 - Características das Decorativas ............................................................. 73

Figura 71 - Exemplo de contraste combinação de fundo azul e texto preto

(legibilidade) ....................................................................................................... 77

Figura 72 - Exemplo de contraste - preto e branco (legibilidade) ............................. 78

Figura 73 - Exemplo de efeito do contraste simultâneo ............................................ 78

Figura 74 - Crescimento do número de usuários no Brasil – .................................... 92

Figura 75 - Renda Familiar - Quantidade de Transações (R$ / Mês) ....................... 93

Figura 76 - Faixa Etária - Quantidade de Transações .............................................. 93

Figura 77 - Escolaridade - Quantidade de Transações............................................. 93

Figura 78 – Estudo de caso que gerou o modelo dos padrões encontrados nos

similares ............................................................................................................. 96

Figura 79 - Niveis de Leitura ................................................................................... 103

1

1 INTRODUÇÃO

São inúmeros os produtos interativos no dia-a-dia das pessoas, entretanto, no

quesito usabilidade, são poucos os que realmente cumprem seu papel de forma fácil

e eficiente já que muitos produtos exigem a interação dos usuários para realização

de tarefas, mas que não foram projetados de acordo com a necessidade do usuário,

tendo ele em mente, mas apenas para realizar determinadas funções. Nesse

contexto de interfaces, sites de e-commerce ou comércio eletrônico, que são os

negócios que ocorrem na Internet foram descrito como o novo paradigma

econômico, contudo é prejudicado por não seguir as recomendações de usabilidade.

Na visão da engenharia não é nenhum defeito, uma vez que seus produtos

funcionam de forma eficaz pela sua perspectiva. Para que o usuário possa interagir

de forma intuitiva com as interfaces é necessária essa mudança no alvo da

perspectiva projetual, e ter como foco a quem utilizará as interfaces e não somente

as funções que as interfaces possuíram.

2

2 OBJETIVO

Desenvolvimento de uma interface para web site de e-commerce para a rede

de supermercados “REDE SMART”.

2.1 OBJETIVOS ESPECIFICOS

Projetar uma interface para website de e-commerce com o intuito de facilitar a

interação do usuário/cliente.

2.2 OBJETIVOS OPERACIONAIS

Todos os subitens dos objetivos operacionais abaixo estão explícitos na

metodologia do projeto.

Briefing

Levantamento De Dados

Levantamento De Similares (Ficha De Similares)

Levantamento De Dados Das Características Tecnológicas

Universo Imagético

Estudo Amplo Sobre Universo Cromático

Estudo Tipográfico

Estudo De Ergonomia Visual

Estudo De Linguagem Sintética / Pictografia

Estudo Sobre Usabilidade

Síntese

Geração De Alternativas

Seleção Da Solução Final

Experimentação

Detalhamento Técnico

3

3 JUSTIFICATIVA

Atualmente são inúmeros os produtos interativos inseridos no dia-a-dia das

pessoas, sendo que alguns deles acabam passando despercebidos, tamanho o

costume de utilizá-los. Segundo DIX, FINLAY, ABOWD e BEALE (1998), “por

interação nos referimos a qualquer comunicação entre o usuário e o computador,

seja direta ou indireta”.

Telefone, celular, computador, caixa eletrônico, impressora, rádio... Uma lista

que a cada vez aumenta mais, tamanha a importância da tecnologia no estilo de

vida atual. Contudo, no quesito usabilidade, são poucos os que realmente cumprem

seu papel de forma fácil e eficiente. Isso ocorre porque muitos produtos que exigem

a interação dos usuários para realização de tarefas, não foram projetados de acordo

com a necessidade do usuário, tendo ele em mente, mas apenas para realizar

determinada função. Segundo PREECE, ROGERS E SHARP (2005), “usuários

diferentes têm necessidades diferentes e produtos interativos precisam ser

projetados de acordo com tais necessidades”.

O comércio eletrônico (e-commerce), termo utilizado para descrever os

negócios que ocorrem na Internet, em 2010 realizou vendas no total de R$ 14,8

bilhões, segundo informou a E-bit, empresa de pesquisa de mercado especializada.

O número representa um crescimento de 40% em relação ao faturamento registrado

em 2009, de 10,6 bilhões, e supera a estimativa para o ano, que era de 14,5 bilhões.

Cabe ao designer saber optar pela melhor tecnologia de apresentação das

opções que o usuário poderá escolher que, segundo as autoras PREECE, ROGERS

e SHARP (2005) são:

• Considerar no que seus usuários são bons ou não;

• Considerar quais alternativas poderão ser colocadas a fim de prestar auxílio

aos usuários diante de atividades que eles ainda não conhecem;

• Pensar no que pode proporcionar experiências de qualidade aos usuários;

• Ouvir os usuários e envolvê-los no processo de design.

4

• Utilizar técnicas baseadas no usuário que forem testadas e aprovadas

durante o desenvolvimento do produto.

Para 2011, a expectativa é que o e-commerce fature até R$ 20 bilhões, um

crescimento nominal de 30% em relação a 2010, segundo a E-bit. E de acordo com

um estudo realizado pelo Nielsen Norman Group (NN/g), houve um aumento de 4%

na usabilidade dos sites de e-commerce desde o último estudo realizado em 2000.

No ano 2000, os sites de e-commerce seguiam 45% das recomendações de

usabilidade sugeridas pelo NN/g. Hoje, esse valor subiu para 49%. Em relação às

recomendações relativas à eliminação de problemas técnicos, o valor sobe para

78% dos sites.

A projetação de produtos interativos exige que se leve em conta o usuário que

irá utilizá-lo e o local onde ele será utilizado. Outra preocupação essencial é a

utilidade desse produto e em quais momentos eles serão usados. Não há como

desenvolver um produto bom se não se conhece muito bem as reais necessidades

do usuário, como ele pensa e, na medida do possível, carregar para dentro do

computador as habilidades que ele naturalmente já possui no mundo real. Segundo

(OLIVEIRA, Revista Custo Brasil) dentro desse contexto é que a psicologia se torna

uma ferramenta indispensável no processo de conhecimento do aprendizado

humano e, portanto, deve ser aplicado dentro da interação Humano Computador, no

sentido de trazer conceitos e técnicas que possam facilitar o processo de

aprendizagem e utilização do produto digital. A cognição é o que acontece em

nossas mentes quando realizamos nossas atividades diárias; envolve processos

cognitivos, tais como pensar, lembrar, aprender, fantasiar, tomar decisões, ver, ler,

escrever, falar. Segundo NORMAN (1993). Usabilidade é a facilidade encontrada

pelo usuário para navegar na loja e realizar todas as ações que desejar. Quanto

mais fácil for esse processo para o usuário, menor o nível de “atrito” que desestimula

a efetivação da compra e menor a chance de que erros ocorram.

Segundo PREECE, ROGERS e SHARP (2005), o que define o rumo do

projeto são as comparações entre bons e maus exemplos de design de interação,

pois através da especificação de pontos fracos e fortes de produtos e sistemas

interativos, passa-se a compreender a definição de algo que pode ser utilizado na

interface ou não.

5

4 METODOLOGIA

Para a realização deste projeto, serão feitos estudos de caso e pesquisas

bibliográficas sobre Comércio Eletrônico, Usabilidade, Arquitetura da informação,

Tipografia, Universo Cromático e Ergonomia Visual com foco em interfaces. Para

atingir os objetivos deste projeto, foi realizada uma pesquisa inicial com as obras dos

seguintes autores: Bruno Munari, Bernhard Burde e Leonard Bruce Archer. O

método escolhido para o presente projeto é chamado de “Sistema de primeira

geração”, segundo Bürdek (2006) esse método possui as seguintes etapas:

Compreensão e definição do problema, Coleta de informações, Analise das

informações coletadas, Desenvolvimento de alternativas, Avaliação de

alternativas e Testes e Experimentação, ficam também definidos abaixo as suas

finalidades:

FASE 1 - COMPREENSÃO E DEFINIÇÃO DO PROBLEMA:

Nessa etapa serão exploradas as necessidades do cliente para que se possa

nortear o projeto. A etapa de tangenciar e definir os problemas são definidos a partir

de briefing. Muitas vezes um simples briefing com o cliente não é suficiente para

definir com clareza o escopo de um projeto. Dessa forma será feito uma pesquisa

sobre o mercado de comércio eletrônico, a problematização de interfaces de

comércio eletrônico abordando os problemas mais comuns e relevantes e também o

fichamento de similares por último, mostrando possíveis caminhos projetuais a

serem seguidos ou não.

FASE 2 - COLETA DE INFORMAÇÕES: Procura-se sintetizar e organizar

uma série de tópicos informacionais que identificarão não somente a situação inicial,

mas também o melhor caminho a ser percorrido para chegar a um produto final bem

resolvido. Para isso é necessário conhecer o universo do projeto em questão. Nessa

coleta de dados, são essenciais informações como o levantamento de dados das

características tecnológicas, o universo imagético, um estudo amplo sobre universo

cromático e seus aspectos psicodinâmicos, um estudo tipográfico, de ergonomia

visual, de linguagem sintética, bem como, dados complementares a esse projeto

como: usabilidade, acessibilidade e os dados de presença humana. Com os dados

organizados será feita a análise dos dados.

6

FASE 3 - ANALISE DAS INFORMAÇÕES COLETADAS: Essa etapa

possibilita a geração de alternativas. Nela, pode-se organizar o conteúdo, as

ferramentas e funcionalidades em diferentes modelos através de técnicas distintas e

selecionar a melhor delas orientando o processo criativo. A partir da análise de

dados é gerada síntese com os melhores caminhos a serem tomados pelo projeto.

FASE 4 - DESENVOLVIMENTO DE ALTERNATIVAS: Após a síntese, com

as primeiras especificações do projeto definidas será feita a geração de alternativas

e análise das alternativas, através de brainstorms considerando os caminhos citados

na síntese. A construção do wireframe nos dará as primeiras ideias de como ficará a

navegação no layout.

FASE 5 - AVALIAÇÃO DE ALTERNATIVAS: Será feita a escolha das

melhores características que se encaixarem nos aspectos desejados para que seja

definida a interface final, que será submetida a uma análise de usabilidade. Com

estes dados analisados, iniciaremos a construção do possível layout através do

Adobe Firewoks e de uma ferramenta online chamada 960 grid systems.

FASE 6 - TESTES E EXPERIMENTAÇÃO

Feito o detalhamento técnico e por ultimo, o modelo funcional da alternativa

escolhida, este segue para o Teste e experimentação que consiste em uma

segunda análise heurística, cujo método é mencionado no levantamento de dados

no capítulo 17, onde usuários avaliaram o desempenho da interface, para que o

designer possa fazer os ajustes finais.

7

5 CRONOGRAMA

Para o planejamento e controle do desenvolvimento do projeto, abaixo estão definidas as atividades a serem executadas.

ETAPA JUL 2011 AGO SET OUT NOV DEZ JAN 2012 FEV MAR ABR MAI JUN

FASE 1 -

COMPREENSÃO E

DEFINIÇÃO DO

PROBLEMA

1 31

FASE 2 - COLETA DE

INFORMAÇÕES 1 15

FASE 3 - ANALISE

DAS INFORMAÇÕES

COLETADAS

16 5

FASE 4 -

DESENVOLVIMENTO

DE ALTERNATIVAS

6 31

FASE 5 - AVALIAÇÃO

DE ALTERNATIVAS 1 31

FASE 6 - TESTES E

EXPERIMENTAÇÃO 1 1

Tabela 1 - Cronograma

8

6 BRIEFING

1 - Histórico / Breve relato sobre a empresa

Até o presente, a rede SMART está em 20 estados brasileiros, mais Distrito

Federal. São 870 lojas filiadas em 591 cidades brasileiras

2 - Produtos oferecidos pela empresa

Produtos alimentícios e artigos de higiene, limpeza e beleza, frios, carnes,

pães, hortifruti e congelados, entre outros.

3 - A quem se destinam a venda online?

Jovens e adultos que querem comodidade e praticidade ao comprar itens de

forma virtual, e pessoas que possivelmente iram migrar pela praticidade de se

comprar sem sair de casa.

4 - Concorrentes diretos e indiretos

Redes de supermercados.

5 - Principais diferenciais em relação à concorrência

Está presente em um grande número de estabelecimentos espalhados por

vários estados no Brasil.

6 - Preços em relação à concorrência.

Parecidos.

7 - Quem decide a compra?

O usuário.

8 - Razões emocionais da compra:

Comprar de forma rápida, intuitiva, sem locomoção e de forma a evitar se

perder e gastar tempo procurando produtos no supermercado, enfrentar filas

bem como outras variáveis.

9

9 - Área / Local de atuação da empresa:

São 870 lojas filiadas em 591 cidades brasileiras

Localização das lojas

Presente em 20 estados brasileiros

O que será necessário desenvolver?

Website de e-commerce para a rede de supermercados

Estratégia preliminar do projeto

Aproximar o cliente a rede de supermercados, facilitando sua interação ao

indicar o estabelecimento mais próximo de sua localidade, o permitindo fazer

compras online, receber newsletter com ofertas e ter maior comodidade ao

comprar determinados itens. A experiência para o usuário deverá ser simples e

intuitiva. Adequando as respostas do sistema às entradas do usuário,

balanceando interação e funcionalidade e prevenindo erros.

10

7 PROBLEMATIZAÇÃO

As lojas virtuais desempenham um papel estratégico para qualquer negócio na

Internet. O visitante é apresentado aos produtos e, talvez, pode se sentir

motivado a realizar a compra. Partindo-se do pressuposto que os produtos

oferecidos são de interesse do visitante a decisão de compra vai depender

basicamente da qualidade da loja virtual em transmitir informações precisas,

sua confiabilidade, segurança e facilidade de navegação. Abaixo serão citadas

algumas situações/problemas que podem frustrar o usuário, fazendo-o desistir

do processo de compra, são eles:

Problema: Aplicação não funciona adequadamente ou falha;

Solução: A interface deve fornecer recursos de interação apropriados a

diferentes tipos de usuários de sistema.

Problema: Imagens que não representam o produto;

Solução: Deve se então valorizar a visão, pois ela será o fator decisivo no

processo de compra, uma vez que o olfato, o tato, e o paladar que são muito

importantes, na experimentação dos produtos e que não podem ser utilizadas

no ambiente virtual. A maior parte dos sites disponibiliza poucas imagens,

muitas vezes pequenas e de baixa qualidade e que não mostram detalhes dos

produtos.

Problema: Informação relevante para o usuário não tem destaque;

Solução: Priorizar na página o que é relevante para o seu consumidor, assim

aumenta-se as chances dele comprar - e ainda indicar o site para outras

pessoas.

Problema: Letra difícil de ler;

Solução: Muitos sites ainda usam letras muito pequenas, com pouco contraste,

o que dificulta a leitura de informações essenciais para decidir a compra:

11

características do produto, prazo de entrega, garantia etc.; Deve se então

conhecer a distância ideal de leitura, o tamanho ideal da fonte a ser utilizada

em cada situação bem como combinações de contraste e cores que atendam o

projeto em questão.

Problema: Não informar o nível de segurança

Solução: Deve-se informar o nível de segurança, junto à explicação técnica

das tecnologias empregadas na criptografia. Por desconhecimento, o usuário

acaba ficando com medo de concretizar a compra e fornecer seus dados

pessoais.

Problema: Navegação não privilegia a compra;

Solução: Mostrar o caminho para que o consumidor vá sozinho. Deixe claro

onde ele está no site e como ele pode ver produtos similares e ir para outras

seções. Filtros por marca, faixa de preço e características, e os menus

secundários na página de produto ajudam nesse contexto. A interface deve ser

consistente, no sentido de que, sempre que possíveis operações semelhantes

sejam ativadas da mesma maneira.

Problema: Quando a aparência de uma interface apresenta muitos efeitos de

cor ou é muito confusa, mirabolante ou muito autoritária;

Solução: Deve se usar cores, contrastes e combinações que sejam pertinentes

ao projeto, pois as cores têm diferentes significados dependendo de como são

aplicadas, podendo induzir o usuário inclusive a cometer erros. Quando a cor

de algum objeto da interface é alterada, isso deve significar que algo

aconteceu. Quando uma determinada cor é utilizada para exibir um tipo de

mensagem/alerta essa mesma cor deve ser sempre usada para esse tipo de

ocorrência em todo o sistema.

Problema: Quando as expectativas do usuário não são atendidas;

Solução: um produto usável deve apresentar uma adequação aceitável entre

as funções oferecidas pelo sistema e as necessidades e requisitos dos

usuários adequando as respostas do sistema às entradas do usuário,

balanceando interação e funcionalidade e prevenindo erros.

12

Problema: Quando as mensagens de erro são vagas, confusas ou provadoras;

Solução: As mensagens de erro devem ser claras e objetivas, e por que não

amigáveis como as mensagens de erro do google: “'Oops! Isto não era para

acontecer” diferente de mensagens como (ex: “ERRO FATAL”) (“Esta ação é

proibida. Tente outra alternativa) que não dão ideia alguma do aconteceu e

também não indicam uma solução.

Problema: Quando o site não faz o que o usuário deseja;

Solução: muitos sites focam apenas na ação final de comprar. Desconsideram

que a compra é um processo, não conhecem ou desrespeitam a vontade do

usuário, não sabem conquistar o cliente e perdem vendas. Todas as etapas de

compra devem ser bem definidas não obrigando o usuário ter que pensar muito

para realizar tarefas, ser mais intuitivo.

Problema: Quando o usuário realiza determinada tarefa, porém não tem um

feedback, e acaba se perdendo;

Solução: Para NIELSEN, as interfaces de navegação deveriam auxiliar o

usuário a responder a três perguntas:

1 - onde estou? A localização do usuário deve ser apresentada em dois níveis:

Com relação à Web ; e

Com relação à estrutura do próprio site.

2 - de onde vim? Recomenda-se não modificar as cores-padrão, pois os

usuários só entendem o significado das cores se elas forem às mesmas. O

pesquisador testou muitos sites com cores de links atípicas – e descobriu que o

usuário acaba não entendendo que links haviam percorrido.

3 - para onde vou? Esta pergunta deve ser respondida pelas opções visíveis

em cada página. Se o usuário adquiriu conhecimento sobre a estrutura do site,

ele pode ter uma ideia de outras páginas a visitar, mesmo que invisíveis.

Problema: Quando um sistema não fornece informações suficientes que

permitam ao usuário saber o que fazer;

Solução: A interface deve utilizar termos e conceitos que tenham como base a

experiência das pessoas que mais vão utilizar o sistema. A interface deve

13

fornecer recursos de interação apropriados a diferentes tipos de usuários de

sistema.

Problema: Quando um sistema requer que os usuários realizem passos para

cumprir uma tarefa – Para acabar descobrindo que um erro foi cometido em

alguma parte do procedimento e que será preciso começar tudo de novo.

Solução: A interface deve incluir mecanismos que permitam aos usuários a se

recuperarem de erros. Em etapas de compra, deve se oferecer a possibilidade

de voltar e corrigir determinadas informações mantendo intactas as

informações que já foram fornecidas.

8 LEVANTAMENTO DE DADOS

Segundo Luna (1999, p. 08) desenvolver uma pesquisa “visa à produção de

conhecimento novo, relevante teórica e socialmente, além de fidedigno”. O

levantamento de dados mostrará a importância dos termos usabilidade,

arquitetura da informação e ergonomia visual em projetos de interfaces gráficas

para comércio eletrônico.

8.1 Levantamento de Dados Sobre Comércio Eletrônico

O termo comércio eletrônico ou e-commerce é utilizado para descrever

os negócios que ocorrem na Internet. O e-commerce foi descrito como o novo

paradigma econômico por ALBERTI (2004).

8.2 Tipos de comércio eletrônico

Conforme ALBERTI (2004) conceitua-se como o uso da comunicação

eletrônica e digital, aplicada aos negócios, criando, alterando ou redefinindo

valores entre organizações (B2B) ou entre estas e indivíduos (B2C), ou entre

14

indivíduos (C2C), permeando a aquisição de bens, produtos ou serviços,

terminando com a liquidação financeira por intermédio de meios de pagamento

eletrônicos.

8.3 Histórico

Conforme Felipini (www.e-commerce.org.br). Existe certa tradição no

mundo dos negócios de que tudo que ocorre nos Estados Unidos em termos de

mercado ocorre no Brasil alguns anos depois. O e-commerce não foge a essa

regra. As vendas por meio do e-commerce começaram a deslanchar nos

Estados Unidos por volta de 1995, com o surgimento da Amazon.com e outras

empresas. Cinco anos depois no Brasil o e-commerce começou a ser levado a

sério e diversas lojas virtuais começaram a aparecer no horizonte da Internet.

Desce então, da mesma forma que o ocorrido nos Estados Unidos, às vendas

por meio do e-commerce não pararam de crescer no Brasil.

De acordo com a pesquisa da e-bit, no Brasil, os artigos preferidos pelos

internautas são: Livros, CDs e DVDs – 47,7%; Eletroeletrônicos – 32,7%;

Informática – 27,6%; Telefonia e Celulares – 20,6%. Mas é cada vez mais

amplo o leque de opções de produtos e serviços que podem ser adquiridos

com o teclar dos dedos.

8.4 Futuro do e-commerce no mercado

Segundo Costa (2007), O e-commerce nunca sofreu uma grande

mudança, mas nos últimos anos vemos a chegada de novas tecnologias que,

com isso temos a aparição de novas modalidades no e-commerce:

M-Commerce - Mobile Commerce

Comércio Eletronico Móvel

T-Commerce - Television Commerce

Dada a presença massiva da Televisão no Brasil e os avanços do Ginga, a

plataforma de Televisão Digital Interativa do SBTVD, em breve as compras

15

poderão ser feitas durante os anúncios e inserções nos programas de TV. Uma

das principais características desta forma de e-commerce é a redução do

tempo entre o anúncio e uma venda, o que deverá aumentar ainda mais os

números do e-commerce no país.

SNO (Social Network Optimization)

Redes sociais é a verdadeira febre na internet. Grandes redes de e-commerce

já começam a usá-las como ferramenta de marketing viral, atingindo

diretamente seus clientes.

8.5 Produtos Virtuais

Conforme Costa (2007), grandes lojas como Saraivam e Submarino já

oferecem produtos virtuais como filmes, jogos, softwares, livros entre outros.

Cada vez mais se torna uma forma prática de e-commerce, tanto para o

comprador (este não se preocupa em perder um livro, ou estragar um DVD,

pois tudo é digital e pode ser feito download a qualquer momento após a

compra) como para o vendedor (este não precisa de estoque, por exemplo). E

com a chegada do Kindle e principalmente do IPad vemos que esse será um

dos pontos fortes do e-commerce nos próximos anos.

8.6 Quais são as maiores barreiras ao Comércio Eletrônico?

Os clientes estão preocupados com o possível roubo dos números do

cartão de crédito, da privacidade das suas informações pessoais, e de

desempenhos inaceitáveis por parte da rede. A maior parte dos compradores

ainda não está convencida que o processo de compra on-line seja melhor do

que as compras tradicionais. É preciso ligar-se à Internet, procurar por sites de

lojas on-line, esperarem que as imagens sejam exibidas, tentar perceber o

processo de compra, e depois ficar preocupado com a possibilidade de que

algum hacker possa obter nossos números do cartão de crédito. (YBIS, 2007)

Outro fator preponderante é a falta do contato físico neste tipo de

tecnologia que deixa de existir, pois todo o processo de realização de uma

venda é feito através de aparelhos eletrônicos como o computador, o cliente

16

não consegue tocar na mercadoria, pois esta é mostrada para o cliente através

de fotos, impossibilitando que o mesmo tenha aquela sensação de sentir o

produto que esta comprando. Segundo ALBERTIN (2004), esse problema

atinge também o fator controle de qualidade, pois o cliente irá ter contato com o

produto apenas quando o mesmo for entregue em sua residência, e só a partir

de então poderá verificar se o produto apresenta realmente as características

que foram anunciadas. Autores como (SMITH; SPEAKER; THOMPSON, 2000;

SIEGEL, 2000; ALBERTIN,1999) citam algumas das desvantagens do

comércio eletrônico que são:

O prazo de entrega dos produtos nem sempre é cumprido;

A falta de hábito do cliente em participar de negociações eletrônicas;

A desconfiança do comprador em relação ao processo;

A argumentação do vendedor é prejudicada

8.7 Vantagens do e-commerce para empresas

Graeml (2000) diz que: A principal vantagem do comércio eletrônico é a

sua capacidade atingir um mercado à escala global, sem que isso implique,

necessariamente, um grande esforço financeiro. Os limites deste tipo de

comércio não são definidos geograficamente, o que permite aos consumidores

proceder a uma escolha global, obter a informação necessária e comparar as

ofertas de todos os potenciais fornecedores, independentemente das suas

localizações.

Ao permitir a interação direta com o consumidor final, o comércio

eletrônico permite diminuir o comprimento da cadeia de distribuição dos

produtos, ou mesmo, por vezes, eliminá-la completamente. Cria-se desta forma

um canal direto entre o produtor ou prestador de serviços e o consumidor final,

permitindo oferecer produtos e serviços que se adéquem às preferências

individuais do mercado-alvo.

O comércio eletrônico permite aos fornecedores estarem mais próximos

dos seus clientes, traduzindo-se em ganhos de produtividade e competitividade

para as empresas; como conseqüência, o consumidor sai beneficiado com a

17

melhoria na qualidade do serviço, resultante da maior proximidade e de um

suporte pré e pós-venda mais eficiente. Com as novas formas de comércio

eletrônico, os consumidores passam a dispor de lojas virtuais abertas 24 horas

por dia.

A redução de custos é outra das vantagens muito importantes,

normalmente associada ao comércio eletrônico. Quanto mais trivial for um

determinado processo comercial, maior será a probabilidade do seu êxito,

resultando numa significativa redução dos custos de transação e, logicamente,

dos preços praticados aos clientes.

9 Levantamento de similares (ficha de similares)

Para extrair as informações dos similares vamos preencher informações

relevantes como base nos seguintes requisitos dos seguintes analisados:

Carrefour, Pão de Açucar, Walmart, Amazon, Apple Store e Ebay, as

imagens foram colhidas no dia 26 de outubro de 2011.

Dados gerais (url e origem)

Dimensões (largura e altura em pixels)

Diagramas e grids

Tipografia

Universo cromático

Fluxo de navegação

Linguagem sintética

9.1 CARREFOUR

9.1.1 Dados gerais

CARREFOUR - www.carrefour.com.br; Origem: Nacional.

9.1.2 Dimensões (largura e altura em pixels)

1000x8000 pixels

9.1.3 Diagramas e grids

18

O foco da página se divide em quatro: A atenção se volta para a imagem

da notícia principal (promoções) e também para os links das categorias no

menu lateral. Em segundo plano as descrições dos produtos na categoria

selecionada e propagandas na lateral direita no canto superior.

Interface Malha Diagramacional

Wireframe Estrutural Wireframe Arquitetural

19

Tabela 2 - Similar #1 - Carrefour

9.1.4 Tipografia

Foram identificadas três tipografias. Os nomes das seções e links do

menu, utilizam fontes web.

9.1.5 Universo Cromático

A interface utilizou uma paleta de cores compatível com a marca do

Carrefour, usando duas cores principais e mais sete para menus. Fez-se o uso

das cores para discriminar as seções dos grupos de usuários específicos e

para diferenciar os tipos de links. Para os campos de texto específicos, o verde

utilizado deixou em alguns casos a legibilidade em risco.

Figura 1 Similar #1 - Carrefour – Cores

20

9.1.6 Fluxo De Navegação

Figura 2 - Similar #1 - Carrefour - Organograma navegacional

9.1.7 Linguagem Sintética

Identificou-se o pouco uso de ícones. Eles estão presentes junto ao

carrinho e dos menus das seções de contato do site.

Figura 3 - Similar #2 - pictogramas e ícones

9.2 PÃO DE AÇÚCAR

9.2.1 Dados Gerais

URL: www.paodeacucar.com.br; Origem: NACIONAL


1000x3100

9.2.3 Diagramas E Grids

21

O foco da página se divide em dois: A atenção se volta para a o menu

lateral (produtos) e também para a descrição dos produtos da categoria

selecionada.



22

Tabela 3 - Similar #2 – Pão de Açúcar

9.2.4 Tipografia

Foram identificados quatro tipos de fontes. Os nomes das seções e links

do menu utilizam fontes web. As tipografias são sem serifa. Entrelinhamento e

espaçamento satisfatório. Alguns blocos de texto descritivos são muito densos

e dificultam a leiturabilidade.



Carrefour, usando duas cores principais e mais sete para menus. Fez-se o uso

das cores para discriminar as seções dos grupos de usuários específicos e

para diferenciar os tipos de links. Para os campos de texto específicos, o verde

utilizado deixou em alguns casos a legibilidade em risco.

Figura 4- Similar #2 - Cores

23

9.2.6 Fluxo De Navegação

Foram utilizados nomes autoexplicativos, ou seja, com o significado

direto de sua função. Nota-se a hierarquia adotada, a partir do momento em

que as categorias, que são os principais motivos de acesso dos usuários, são

tratados como prioridade. Toda a área dinâmica tem um padrão visual e fica

centralizada em uma mesma região. Existem apenas uma forma de busca de

produtos, através de um menu superior.

Figura 5 - Similar #2 - Pão de Açúcar - Organograma navegacional

9.2.7 Linguagem sintética

Identificou-se o pouco uso de ícones. Eles estão presentes junto ao carrinho e

dos menus das seções no site, facilitando na identificação da função.

24


9.3 WALMART

9.3.1 Dados Gerais

URL: www.walmart.com.br; origem: Nacional.


1010x8000

9.3.3 Diagramas e Grids

O foco da página se divide em cinco: A atenção se volta para a imagem

da notícia principal (promoções), para a enorme barra lateral de categorias, a

descrição dos produtos e a as propagandas na lateral direita. Há um excesso

de informação porém em áreas bem definidas.



http://www.walmart.com.br/

25

Tabela 4 - Similar #3 – Walmart

9.3.4 Tipografia

Foram identificados dois tipos de fontes. Os nomes das seções e links


espaçamento satisfatório.

9.3.5 Universo cromático


Walmart, usando duas cores principais. Foi utilizado mais quatorze cores. Fez-

se o uso das cores para discriminar as seções dos grupos de usuários

específicos e para diferenciar os tipos de links. Para os campos de texto

específicos, o amarelo que em alguns casos coloca a legibilidade em risco.

Figura 7 - Similar #3 – Cores

9.3.6 Fluxo de navegação

Foram utilizados nomes autoexplicativos com o significado direto de sua

função. Nota-se a hierarquia adotada, a partir do momento em que as

categorias, que são os principais motivos de acesso dos usuários, são tratadas

26

como prioridade. Há uma grande quantidade de sub-categorias em cada

categoria o que estende desnecessariamente a navegação, dificultando o

tempo de acesso e aumentando exponencialmente o número de cliques para

se realizar uma tarefa. Existem três formas de busca de produtos, através de

um menu (topo, canto superior direito), um principal (centralizado) e um lateral

aumentando as formas de navegação para o usuário.

Figura 8 - Similar #3 - Organograma navegacional

27


Identificou-se o pouco uso de ícones. Eles estão presentes junto ao

carrinho e dos menus dos canais no site, facilitando somente a identificação de

serviços de contato com a empresa.


9.4 AMAZON

9.4.1 Dados gerais

URL: http://www.amazon.com/; Origem: Internacional.


1200* x 6000 (Resolução acomoda-se de acordo com a resolução de

tela do usuário / * Menor resolução de largura)


O foco da página se divide em três: A atenção se volta para a imagem

da notícia principal (novos produtos / promoções) e também para os links das

categorias na lateral, bem como a área dinâmica com a descrição dos

produtos da categoria selecionada.

http://www.amazon.com/

28



Tabela 5 - Similar #4 – Amazon

29

9.4.4 Tipografia

Foram identificados quatro tipos de fontes. Os nomes das seções e links


espaçamento satisfatório. Alguns blocos de texto descritivos são muito densos

e dificultam a leiturabilidade.


A interface utilizou uma paleta de cores compatível com a marca da

Amazon, usando duas cores principais e mais duas para menus. Fez-se o uso

das cores em saturações diferentes para discriminar as seções dos grupos de

usuários específicos e para diferenciar os tipos de links. Para os campos de

texto específicos, a cor laranja foi empregada funcionando como uma cor

contraste para realçar as informações.



Foram utilizados nomes autoexplicativos com o significado direto de sua

função. Nota-se a hierarquia adotada, a partir do momento em que as

categorias, que são os principais motivos de acesso dos usuários, são tratadas

como prioridade. Toda a área dinâmica tem um padrão visual e fica

centralizada em uma mesma região. Apesar de ter muitas categorias e sub-

categorias, essas foram dispostas em grupos bem definidos de forma eficiente

dessa forma a interação no site através de menus suspensos facilitam muito a

usabilidade evitando um excesso de cliques para se chegar ao objetivo.

Existem duas formas de busca de produtos, através de um menu lateral e uma

barra superior de busca (que procura em tempo real com palavras-chave).

30



Ausência quase total de ícones e pictogramas, interface

predominantemente com hiperlinks.

31


9.5 APPLE STORE

9.5.1 Dados gerais

URL: store.apple.com/br; Origem: Nacional.


992 x ~6000


O foco da página se divide em dois: A atenção se volta para a imagem

da notícia principal (novos produtos) e também para os links das categorias.

32



Figura 13 - Similar #5 - Apple Store

9.5.4 Tipografia

Foram identificadas duas tipografias. Os nomes das seções e links do

menu, utilizam fontes web. Entrelinhamento e espaçamento satisfatório para

descrição de produtos.


33

A interface utilizou uma paleta de cores compatível com a marca da

Apple, usando duas cores principais e mais três para menus. Fez-se o uso das

cores em saturações diferentes para discriminar as seções dos grupos de

usuários específicos e para diferenciar os tipos de links. Para os campos de

texto específicos, a cor azul foi empregada funcionando como uma cor

contraste para realçar as informações.




direto de sua função. Nota-se a hierarquia adotada, a partir do momento em

que as categorias, que são os principais motivos de acesso dos usuários, são

tratadas como prioridade. Toda a área dinâmica tem um padrão visual e fica

centralizada em uma mesma região. O grande diferencial está na forma como a

informação foi organizada, as categorias estão dispostas de formas diretas e

simples sem que o usuário tenha que buscar um determinado item depois de

muitas subcategorias. Existem duas formas de busca de produtos, através de

um menu principal (topo) e um lateral. A navegabilidade fica visível no

organograma abaixo:

34



Identificou-se o grande uso de ícones. Eles estão presentes junto ao

carrinho e dos menus das seções no site bem como nas categorias, facilitando

na identificação da função.


35

9.6 E-BAY

9.6.1 Dados gerais

URL: http://www.ebay.com/; Origem: Internacional


986x1440


O foco da página se divide em dois: A atenção se volta para a imagem

da menu lateral com as categorias de produtos e também para as descrições

dos produtos que pertencem a categoria selecionada.



http://www.ebay.com/

36

Tabela 6 - Similar #6 - Ebay

9.6.4 Tipografia

Foram identificados três tipos de fontes. Os nomes das seções e links do

menu utilizam fontes web. As tipografias são sem serifa. Entrelinhamento e

espaçamento satisfatório.



Ebay, usando quatro cores principais e oito para menus/links. Fez-se o uso de

cores diferentes, porém com mesma saturação para discriminar as seções dos

grupos de usuários específicos e para diferenciar os tipos de links. Para os

campos de texto específicos, a cor azul foi empregada como uma cor contraste

para realçar as informações.


37



direto de sua função. As categorias são muito bem explicativas em formato de

hiperlinks em um menu lateral suspenso que se expande mostrando todas as

categorias em um lugar só. Nota-se a hierarquia adotada, a partir do momento

em que as categorias, que são os principais motivos de acesso dos usuários,

são tratadas como prioridade. Toda a área dinâmica tem um padrão visual e

fica centralizada em uma mesma região. Existem duas formas de busca de

produtos, através de um menu superior e um lateral.


38


Identificou-se o grande uso de ícones. Eles estão presentes junto ao

carrinho e dos menus das seções no site, facilitando a identificação da função.

Os ícones estão tanto em formato de imagem quanto em forma de

pictogramas.


10 LEVANTAMENTO DE DADOS DAS CARACTERÍSTICAS

TECNOLÓGICAS

O wireframe é um desenho básico, como um esqueleto, que apresenta de

forma simples a arquitetura de informação de uma interface. Trata-se de uma

ferramenta essencial na construção de web sites.

Figura 20 - Modelo básico de wireframe

39

Segundo Memória (2006, pág. 37) os wireframes facilitam o processo de

aprovação do projeto porque começam a mostrar a estrutura do que está

sendo elaborado. Além disso, o wireframe também oferece à equipe técnica

que vai construir o produto uma noção mais clara da quantidade e

complexidade do trabalho. Este “esqueleto” tem a função de estruturar o

conteúdo de cada página, indicando o peso e relevância de cada elemento do

layout e sua relação com os demais elementos formadores do todo. Sua meta

é indicar a correta marcação de textos, „migalhas de pão‟ de navegação

guidelines de marca e até recursos de programação e tecnologia a serem

utilizados pela equipe de programadores (OLIVEIRA, 2009).

Resolução de tela

Segundo a pesquisa elaborada pela W3C, vide quadro abaixo, sobre as

resoluções de tela mais usadas nos tempos atuais, a resolução usada pelo

maior número de pessoas atualmente é 1024x768 e deve ser considerada nas

etapas projetuais.

Tabela 7 - Resoluções de tela mais utilizadas

Segurança digital

Segundo BARBAGALO (2005), para garantir a validade jurídica são requisitos

básicos a autenticidade, integridade e perenidade do conteúdo. Para isto, os

documentos eletrônicos elegeram alguns requisitos para validar sua eficácia: a

criptografia, a assinatura digital e o certificado digital e autoridade certificadora.

40

Criptografia

Trata-se de uma técnica para garantir o sigilo e a segurança no ambiente

eletrônico. Funciona com a aplicação de código secreto de substituição de

caracteres, tornando a mensagem indecifrável àqueles que não tenham

conhecimento do padrão técnico criptográfico utilizado. Utiliza-se de algoritmos

para tornar a formação digital diferenciada mediante uma técnica de comutação

binária. Com esta técnica há uma garantia da eficácia jurídica dos documentos

eletrônicos.

Assinatura digital

Trata-se de um conjunto de dados em forma eletrônica conjugados a outros

dados matemáticos, utilizados como meio de autenticação. Essa assinatura

possui a função de identificar o remetente, autenticar o documento e garantir a

autoria da mensagem. A assinatura digital utiliza-se da criptografia para

transmitir informações através da rede de computadores. Desta tecnologia, são

utilizados dois sistemas criptográficos: o simétrico e o assimétrico. É

fundamental este requisito para validar a eficácia jurídica dos documentos

eletrônicos, garantindo uma maior segurança jurídica.

Entidades certificadoras

A definição de entidades certificadoras é dada pela Diretoria da União Européia

para assinaturas digitais. Trata-se, então, de uma pessoa física ou jurídica que

expede certificados ou presta serviços com relação às assinaturas digitais.

Assim, entidades certificadoras validam a eficácia jurídica e garantem à

segurança eletrônica.

11 UNIVERSO IMAGÉTICO

Segundo Ambrose (2009) As imagens são os elementos gráficos que

podem dar vida a um design. São essenciais à comunicação de uma

mensagem e à consolidação da identidade visual de um projeto.

41

O levantamento imagético foi realizado em três etapas, são elas:

Definição de palavras-chave, busca de imagens e elaboração de painéis

semânticos. As palavras-chave definirão o universo de supermercados, suas

referências e influencias, com elas definidas foi feita uma busca de imagens

para exemplificá-las através de painéis semânticos. Os painéis semânticos

foram classificados categorias distintas, formando grupos referenciais, são

eles: Bem estar – Comportamental; Alimento-Temático;

Bem estar - Comportamental: Felicidade, liberdade, disposição, leve,

simples.

Figura 21 - Painel semântico do universo imagético grupo (bem estar - comportamental)

42

Alimento-Temático: Saboroso, colorido, textura, olfato, tato, paladar,

visão, nutritivo, saudável.

Figura 22 - Painel semântico do universo imagético grupo (alimento - temático)

43

12 ESTUDO SOBRE UNIVERSO CROMÁTICO

A cor é um dos elementos mais fascinantes e indispensáveis para a

representação da natureza, dos objetos e imagens criadas pelo homem. O

aspecto mais intrigante com relação às cores é a sua existência em confronto

com a sua inexistência. Segundo PEDROSA (2009), "A cor não tem existência

material: é apenas uma sensação produzida por certas organizações nervosas

sob a ação da luz - mais precisamente, é a sensação provocada pela ação da

luz sobre o órgão da visão”. FABRIS-GERMANI, ao buscar seu significado com

fins científicos também descobre um duplo sentido para as cores, "um

intimamente ligado ao outro porque ambos são, respectivamente, causa e

efeito do mesmo fenômeno. A causa da cor é ela mesma em seu aspecto de

substância corante. O efeito da cor é também a própria cor sob o aspecto de

sensação que o olho recebe dos corpos coloridos. A causa e o efeito se unem

intimamente nos fenômenos das radiações eletromagnéticas, compreendidas

em certa gama de comprimento de ondas, emitidas pelos corpos e recebidas

pelo olho". Os estímulos causadores das sensações cromáticas são divididos

em dois grupos: a cor enquanto luz e a cor enquanto pigmento. (PEDROSA,

2009)

1. COR LUZ – É a radiação luminosa visível que tem como síntese aditiva a luz

branca. Sua melhor expressão é a luz solar, por reunir deforma adequada toda

a cor existente na natureza. As faixas coloridas que compõem o espectro solar,

quando tomadas isoladamente, uma a uma denominam-se luzes

monocromáticas.

Figura 23 - Prima - cor como luz

44

2. COR PIGMENTO - É a substância material que, conforme sua natureza

retrata e reflete os raios luminosos componentes da luz que se difunde sobre

ela. É a qualidade “da luz refletida que determina a sua denominação”.

Figura 24 - Potes de pigmentos coloridos - cor como pigmento

12.1.1 Círculo cromático

Diagrama cromático, baseado na disposição ordenada das cores básicas e de

seus componentes binários, os quais dividem o círculo em 3, 6, 24 setores ou

tons. A ordem da sucessão é a mesma do espectro.

Figura 25 - Círculo cromático

45

12.1.2 Cores primárias

Ambrose (2009) diz que existem dois tipos de cores primárias, as aditivas e as

subtrativas. As primárias aditivas são aquelas obtidas pela luz que é emitida:

Vermelho, Verde e Azul. A combinação das três produz o branco. As primárias

subtrativas são aquelas associadas à subtração de luz: Ciano, Magenta e

Amarelo, as cores de escala usadas na impressão em quadricromia. A

combinação das três produz o preto.

Figura 26 - Cores aditivas

Figura 27 - Cores subtrativas

12.1.3 Cores secundárias

Ambrose (2009) diz também que é possível produzir um conjunto de cores

secundárias a partir de cada conjunto de cores primárias. As cores secundárias

são criadas por meio da combinação de quaisquer duas cores primárias na

46

mesma proporção. No espaço de cores subtrativo, as cores secundárias são:

Vermelho, Verde e Azul. No espaço aditivo, as cores secundárias são: Ciano,

Magenta e Amarelo.

Figura 28 - Cores secundárias

12.1.4 Cores complementares

Pedrosa (2009) descreve que desde a época de Newton, adota-se em Física a

formulação de que cores complementares são aquelas cuja mistura produz o

branco. Segundo Helmholtz, excluindo-se o verde puro, todas as demais cores

simples são complementares de outra cor simples, formando os seguintes

pares: Vermelho e azul-esverdeado amarelo e anil, azul e laranja. Em

Física, cores complementares significam par de cores, uma complementando a

outra.

12.1.5 Tom

É a Sensação primordial da cor, variação qualitativa da cor, ligada ao

comprimento de onda e sua radiação; • Comprimento de onda dominante que

dá o nome do tom.

47

Figura 29 - Variações de tom

12.1.6 Tom rompido

Quando a pureza da cor é atenuada pela mistura em uma determinada

proporção, de sua complementar. Misturadas em quantidades oticamente

iguais, duas cores complementares criam um cinza:

Figura 30 - Tom rompido

48

12.2.0 Temperatura das cores

A cor é proveniente da luz e esta é uma forma de energia. Assim, quanto

mais energia liberada, mais calor é produzido. Um objeto, ao ser iluminado,

absorve algumas cores e refletem outras, absorvendo e refletido, portanto,

energia ou calor. Baseados nestes dados e também no comprimento das

ondas de cada uma das cores convencionou-se a utilização dos termos cores

frias (tons de azul, violeta e verde) e quentes (tons de amarelo, vermelho e

laranja).

A conotação das cores em frias e quentes está relacionada tanto com os

fatores emocionais quanto com o processo de reflexão de energia, luz e calor.

Uma superfície branca reflete por completo a luz que incide sobre ela. Já uma

superfície preta absorve esta energia.

Figura 31 - Temperatura de cor

Desta maneira, um objeto preto deverá ser, sob iluminação natural,

cerca de 10 graus mais quente que um objeto totalmente branco. Esta relação

entre cores é utilizada há muito pela população de todo o mundo mesmo sem

saber de detalhes científicos. É comum pessoas utilizarem roupas escuras no

frio para absorver mais calor do ambiente, e evitarem usar roupas escuras no

verão, exatamente para evitar mais calor no corpo. Os comprimentos de onda

das cores quentes, especialmente o vermelho, são muito próximos do

infravermelho que transmite calor. Mais do que quaisquer outras, as cores

quentes atraem os olhos e excitam as emoções. Já as cores frias têm

49

exatamente o efeito oposto às cores quentes: diminuem o metabolismo e

acalmam. Algumas vezes podem parecer excessivamente tristes e opressivas,

tendo como exemplo o “período azul” das pinturas de Pablo Picasso.

12.2.1 Contraste

A luz nos permite a observação das coisas da natureza através dos efeitos

cromáticos e entre os quais, o contraste. Tudo o que nós podemos perceber

pelos nossos sentidos, se efetua por comparações. Fala-se em contrastes,

quando se pode constatar entre dois efeitos de cores que se compara,

diferenças ou intervalos sensíveis. Quando estas diferenças atingem um

máximo, fala-se de contrastes de oposição ou polares. No campo fisiológico

das sensações cromáticas, as influências que algumas cores exercem sobre

outras ao serem percebidas, são de grande importância para o problema das

relações cromáticas.

12.2.2 Contraste de tom

É o mais simples. Não exige grandes esforços da visão, porque, para

representá-lo, é possível utilizar qualquer cor pura e luminosa.

A força de expressão deste contraste diminui à medida que as cores utilizadas

se afastam das três primárias. Quando são separadas por branco ou preto,

suas características particulares são ainda mais postas em relevo. O contraste

mais forte é proporcionado pelas cores básicas, sem modulações

intermediárias. É necessário ter a precaução de prevalecer apenas uma cor

como dominante (em extensão, intensidade ou saturação), atenuando as

outras com branco ou preto ou em menor extensão espacial.

50

Figura 32 - Constraste de tom

12.2.3 Contraste claro-escuro

- A luz e as trevas, o claro e o escuro são contrastes polares e tem importância

fundamental para a vida humana e toda a natureza. O número das gradações

de cinza diferentes depende da acuidade do olho e do grau de sensibilidade de

cada indivíduo. Os valores claro-escuro de uma cor pura se modificam segundo

a intensidade da iluminação.

Figura 33 - Contraste claro-escuro

51

12.2.4 Contraste quente-frio

- Correlação entre cor e temperatura

As radiações vermelhas do espectro têm efeitos térmicos em contraste com as

radiações azuis. O laranja e o ciano constituem a polaridade termo cromática.

São cores diametralmente opostas no círculo das cores. Um dos mais

importantes efeitos do contraste termo cromático, prende-se ao fato, que o

vermelho aproxima, enquanto que o ciano se afasta. É o efeito da diferença de

planos, sem a necessidade da utilização da perspectiva.

Figura 34 - Contraste quente-frio

12.2.5 Contraste de complementares

- É provado fisiologicamente que para uma determinada cor, nosso olho exige

a complementar, e se ela não é dada, ele a produz. As cores complementares

utilizadas segundo proporções corretas criam um efeito estático e sólido. Cada

cor conserva sua luminosidade, sem modificações. A realidade e o efeito das

cores complementares são idênticos. Cada par de complementares tem

caraterísticas próprias.

52

Figura 35 - Contraste de complementares

12.2.6 Contraste de limite

É um esquema que usa três cores secundárias equidistantes. Por exemplo:

verde, violeta, laranja ou então violeta azulado, laranja avermelhado, verde

amarelado. A tríade é considerada como um dos esquemas mais harmoniosos

na roda de cores. Forma um triângulo isósceles na Roda de Cores. Para usar o

esquema triplo com sucesso e de forma harmoniosa, as cores devem ser

balanceadas cuidadosamente - use uma cor dominante e duas de apoio.

Se a cor é primária, contrasta sempre o a secundária e vice-versa. O resultado

estético dessas combinações nem sempre é satisfatório, a não ser que haja

interesse em explorar o choque visual produzido por elas. Quando mais forte

forem elas, maior será esse impacto. A cor central é uma mistura das duas

cores laterais. Observe que a faixa central é clareada por cada uma das duas

outras cores, mas do lado oposto. No limite com a faixa vermelha, o violeta é

clareado pelo azul e, no limite com a faixa azul, o violeta é clareado pelo azul, o

violeta é clareado pelo vermelho.

53

Figura 36 - Contraste de limite

12.2.7 Contraste simultâneo

O contraste simultâneo é uma consequência do trabalho do olho pela busca de

equilíbrio. Ele ocorre sempre que o olho é sensibilizado por uma cor. A partir

desse instante, o olho procura o tom complementar a essa cor, para que esses

tons se anulem e ele possa voltar ao seu estado de equilíbrio inicial. Quando o

olho encontra esse tom complementar e consegue se anular, consegue-se a

famosa “harmonia cromática”

Figura 37 - Contraste simultâneo

Nessa imagem, o quadrado cinza escuro e o quadrado verde possuem a

mesma luminosidade. já os dois quadrados cinzas centrais são exatamente

iguais. No entanto, o quadrado que está dentro do quadrado verde está

avermelhado. O que acontece é que nosso cérebro, tentando anular o verde,

54

projetou no cinza a cor vermelha. O cinza, por ser um tom neutro, é muito mais

suscetível a receber influência dos outros tons.

12.3 Harmonia

Segundo GEORGES PATRIX “A cor é a música do silêncio”. JOHN LOCKE,

filósofo, em 1690 contava sobre um cego: “Depois de ter quebrado a cabeça

para compreender como eram os objetos visíveis, para entender esses nomes

de luzes e cores... finalmente compreendeu o que significava o vermelho

escarlate... era como o som de uma trombeta”. OTSWALD dizia: “Harmonia é

ordem; ordenar os valores cromáticos de uma composição, segundo

determinadas proporções entre tom e superfície, entre poder expressivo e

significado”. JUAN VERANI chama de composição harmônica, aquela em que

cada uma das cores tem uma parte de cor comum a todas as demais;

composição contrastante, a que se realiza entre cores que não tem nada em

comum. Uma boa harmonia é simplesmente uma construção colorida

adequada em relação ao tempo e ao espaço, portanto, em relação ao homem,

que num determinado lugar e momento, vivem estas duas dimensões.

A harmonia das cores é dividida em duas categorias:

1 - Harmonia das cores relacionadas

São as combinações entre cores que possuem em sua composição uma parte

básica da cor comum a todas. Podem ser subdivididas em:

Esquema harmônico neutro (escala acromática): composto pelo cinza formado

pela mescla do branco e preto.

Figura 38 - Esquema harmônico neutro (escala acromática)

Esquema harmônico monocromático: formado por uma única cor, com

diferentes valores de tom ou saturação, em intervalos iguais ou não, da escala

monocromática.

55

Figura 39 - Esquema harmônico monocromático

Esquema harmônico análogo: combina-se normalmente, até três cores vizinhas

no círculo das cores.

Figura 40 - Esquema harmônico análogo

2 - Harmonias das cores contrastantes

São combinações de cores totalmente diversas entre si, todas na mesma

tonalidade, ou com tons diferentes entre as próprias cores. As combinações

usadas com maior frequência são as de cores complementares. Esquema

harmônico complementar: formado por matizes diretamente opostos entre si no

círculo das cores.

Figura 41 - cores complementares

Esquema de complementares divididas: o contraste dos matizes

complementares pode ser atenuado quando um deles é substituído por duas

cores adjacentes.

56

Figura 42 - Esquema de complementares divididas

Esquema harmônico análogo complementar ou duplo complementar: é

composto por duas cores análogas combinadas com a complementar de uma

delas ou de ambas.

Figura 43 - Esquema harmônico análogo complementar ou duplo complementar

Esquema de trios harmônicos: são esquemas formados por um grupo de 3

cores primárias ou secundárias ou terciárias, coincidindo com os vértices de

um triângulo equilátero ou isósceles, que gira sobre o centro do círculo das

cores.

Figura 44 - Esquema de trios harmônicos

Esquema de quartetos, quintetos, sextetos: esquemas de quatro, cinco, seis e

até sete cores, utilizando o mesmo princípio dos esquemas de trios

harmônicos.

57

Figura 45 - Esquema de quartetos, quintetos, sextetos harmonicos.

Acordes consonantes e dissonantes - Uma cor combina com outra por

afinidade, semelhança, aproximação, etc., ou por contraste, dessemelhança,

oposição, etc. Segundo PEDROSA, podemos classificar as harmonias em:

a) HARMONIA CONSONANTE - Afinidade de tons entre si, pela presença de

uma cor geratriz comum, que participa de maneira variável na estrutura de

todas elas.

b) HARMONIA DISSONANTE - Dois tons que se complementam formam

sempre uma dissonância.

c) HARMONIA ASSONANTE - Larga escala harmonizada (acorde múltiplos),

em que várias cores tônicas se equivalem em nível de saturação e criam por

semelhança ou aproximação estrutural um acorde tônico, valorizado pela

organização e qualidade de outros acordes que funcionam como cor dominante

e de passagem.

De um modo geral pode-se dizer que: todos os pares de complementares,

todos os acordes triplos onde as cores sobre o círculo cromático dividido em 12

partes iguais se encontram em relação formando um triângulo equilátero ou

isósceles, ou acordes quádruplos formando um quadrado ou um retângulo, são

harmoniosos.

58

Figura 46 - Acordes consonantes e dissonantes

13 ASPECTOS PSICODINÂMICOS DAS CORES

Segundo Pedrosa (1989, p.18): [...] o fenômeno da percepção da cor é bem

mais complexo que o da sensação. Se nesta entram apenas os elementos

físicos (luz) e fisiológicos (o olho), naquela entram, além dos elementos

citados, os dados psicológicos que alteram substancialmente a qualidade do

que se vê.

Por exemplo, o fato de um lençol branco nos parecer sempre branco, tanto sob

a luz incandescente amarela como sob a luz violácea de mercúrio, quando em

realidade ele é tão amarelo quanto à luz incandescente, quando iluminado por

ela, como tão violáceo quanto à luz de mercúrio que o ilumina. Na maioria das

vezes não atentamos para a mudança de coloração e continuamos a

considerar branco o lençol por uma codificação do cérebro, que incorpora aos

objetos, como uma de suas características físicas, a cor apresentada por eles

59

quando iluminados pela luz solar, transformando em valor subjetivo as cores

permanentes dos corpos naturais.

De acordo com Goldman (1964, p. 145), “87% dos estímulos que chegam ao

nosso cérebro vão através da visão, ficando a audição com 7%, o olfato 3%, o

tato 1,5% e o paladar com 1,5%”. Ao receber o estímulo da luz, "os olhos

alimentam o cérebro com informação codificada em atividade neural – cadeias

de impulsos elétricos – a qual, pelo seu código e pelos padrões de atividade

cerebral, representa objetos" (GREGORY,1979, p.77).

O corpo humano, ao receber pelas células foto-sensoras dos olhos as

ondas de luz que definem as cores, repassa ao cérebro diversas sensações

antes mesmo de uma interpretação destas. Algumas informações são

transmitidas ao sistema límbico, às glândulas pituitárias, hipotálamo e pinel,

glândulas estas que controlam os sistemas nervosos responsáveis pela sede,

fome e sexo, por exemplo. Já o sistema límbico tem relação com as emoções

de amor, ódio, dor e satisfação. Desta maneira, fica clara a interferência

fisiológica e, por conseguinte psicológica pelas cores. Como exemplo,

citaremos algumas cores.

O azul, que tem um tempo de percepção de 0,06 segundos, com ondas

curtas de fraca intensidade, que atua com suavidade nos neurônios, baixando

o fluxo sanguíneo e até mesmo causando certa introspecção do indivíduo. Já o

vermelho possui um tempo menor de percepção, 0,02 segundos, com ondas

de comprimento longo e de maior intensidade, excitando o cérebro. Neste

caso, o vermelho eleva a pressão arterial do indivíduo, acelera os batimentos

cardíacos e causa certa inquietação, interferindo ainda no sistema nervoso

responsável pelo alerta, pelo ataque e pela defesa. Outra cor bastante

interessante do ponto de vista fisiológico é o amarelo, quem tem o mais rápido

tempo de percepção, 0,01 segundo, e atua nas funções metabólicas e

hipotalâmicas, despertando a sensação de fome.

O círculo de cores de Goethe ou círculo cromático é dividido em duas

metades, onde estão localizadas separadamente as cores chamadas frias e

quentes. As cores quentes possuem comprimentos de ondas mais longas e

têm a propriedade de terem uma intensidade ou densidade maior, avançando

60

na direção do olhar e diminuindo o espaço. Já as cores frias 25 possuem ondas

mais curtas e provocam exatamente o contrário, isto é, a sensação de

distanciamento do olhar e do aumento do espaço. Outra diferença entre cores

frias e quentes é que as cores quentes estimulam a circulação sanguínea

fazendo com que aumente a temperatura corporal. As cores frias diminuem a

circulação sanguínea e faz com que caia a temperatura do organismo.

Farina (1990, p.43) completa, usando os princípios da psicologia, para dizer

que [...] o mundo percebido por qualquer indivíduo é, em grande parte, um

mundo resultante das experiências adquiridas em lidar-se com o meio

ambiente.

14 ESTUDO TIPOGRÁFICO

Segundo Niemeyer (2006), existe doze principais espécies de caractere no

alfabeto latino:

Maiúsculas - Também chamadas de caixa alta por razões históricas: elas

tradicionalmente eram guardadas na parte superior da gaveta (ou caixa) onde

os compositores dispunham os tipos de metal.

Minúsculas - Ou caixas baixas, surgidas na Idade Média, através de uma lenta

modificação e transformação das maiúsculas.

Versaletes - São as caixas altas semelhantes à altura-X, para serem

compostas como caixas baixas, e que raramente são disponíveis em fontes

digitais.

Ligaturas - São minúsculas unidas, em geral, por suas ascendentes (ff, fi, tt) e

que também raramente são incluídas em fontes digitais.

Ditongos - São maiúsculas ou minúsculas unidas, em geral, por suas hastes e

que, em determinadas línguas, representam fonemas próprios. (æ, ß, Œ, β)

61

Acentos gráficos - Nas fontes digitais, eles são acompanhados pelas letras às

quais se referem.

Algarismos - Eles podem ou não ser alinhados pela linha de base (3 e 4 e ou

3 e 4)

Frações - Exemplos (½, ¼...)

Sinais de pontuação - Exemplos:. ; : ? { } – “ “

Símbolos monetários - Exemplos $ ,€, ¥, £, ₩ ,₪, ,₤, Q, L, ₡, ₦, Ø...

Símbolos de operações matemáticas - +, =, <, >

Símbolos comerciais - ™ © ® ¢ € ¥ £ ¤

14.1 Anatomia do tipo

Segundo Niemeyer (2006): As principais partes que compõem os tipos são as

hastes e as barras, as barrigas e os bojos, as ascendentes e as descendentes,

as montantes, as ápices e os vértices, as serifas e as esporas, os ocos. Sendo

que nenhum caractere possui todos esses elementos – e há outros específicos

(braços, ombros, ganchos, orelhas etc.).

62

Figura 47 - Anatomia do Tipo - Lucy Niemeyer (2006) – Pag. 34

Quando compostos numa linha, os caracteres são dispostos segundo algumas

coordenadas. As mais importantes são a linha de base, a linha X, a linha das

ascendentes e das descendentes e as linhas das maiúsculas.

Embora na grande maioria das famílias as linhas das maiúsculas e das

ascendentes coincidam (e, então, são denominadas apenas como linha das

maiúsculas), os tipos mais próximos dos romanos clássicos têm as

ascendentes projetadas um pouco acima da linha das maiúsculas (gerando

assim a linha das ascendentes, como no exemplo acima). No texto composto

também é possível perceber a ocorrência da projeção – um recurso de ajuste

ótico no desenho dos tipos utilizado nas curvas que tangenciam coordenadas.

14.2 Modalidades de fontes tipográficas

Tipos de Fontes: A classificação feita adotada pela Association Typographique

Internationale (ATypl) de acordo com Niemeyer (2006) em seu livro é

conhecida como Classificação Tipográfica Vox/ATypl, que leva este nome por

63

ter se baseado em uma classificação feita por Maximilien Vox, em 1954.

A Vox/ATypl, divide os tipos em sete grandes classes, por sua vez

divididas em subclasses. As Classes são:

Romanos, divididos em cinco subclasses: Humanistas (ou Venezianos),

Garaldos (ou garaldo-aldinos, ou garaldinos), Transicionais (ou de transição, ou

barrocos ou old style), Didones (ou modernos) e mecanizados.

Figura 48 - Modalidades de fontes tipográficas - Romanos

Lineares (ou sem serifa) divididos em quatro subclasses:

Grotescos, Geométricos, Neogrotescos e Humanísticos.

Figura 49 - - Modalidades de fontes tipográficas – Lineares

Incisos

Figura 50 - Modalidades de fontes tipográficas – Incisos

Manuais divididos em duas subclasses: Decorativos (ou display ou

fantasia) e Brush.

64

Figura 51 - Modalidades de fontes tipográficas – Manuais

Manuscritos (ou script).

Figura 52 - Modalidades de fontes tipográficas – Manuscritos

Góticos divididos em quatro subclasses: Texturados, Rotundos,

Bastardos, Fraktur e variantes de Fraktur.

Figura 53 - Modalidades de fontes tipográficas – Góticos

14.3 Proporções

Ainda segundo Niemeyer (2006) a respeito de proporções ela diz que: Nos

primórdios da imprensa, os diferentes tamanhos de tipo foram chamados por

vários nomes, os sistemas de medida mais utilizados eram: o Didot, o Cícero e

a Paíca. Até a década de 1970, o sistema Didot era o mais utilizado no Brasil.

[...] Há outras aplicações de medida em tipografia, uma delas é o eme, que é

definido tradicionalmente como a largura da letra M do tipo que está

sendo composto. A medida eme equivale a um quadrado cujo lado tem

o mesmo tamanho do corpo utilizado. Assim, pode ser definido

simplesmente pelo número de pontos do tipo em uso. Por exemplo, em um tipo

65

de corpo 18 pontos, a medida eme é a distância de 18 pontos. (NIEMEYER,

2006, p.38)

Tamanho de X é a altura do corpo principal de uma fonte, não incluindo os

ascendentes ou descendentes: (Typography Deconstructed, 2011).

Figura 54 - Exemplo de proporções na Tipografia

14.4 Kerning

Ambrose (2009) define Kerning simplificadamente como: Kerning diz respeito

ao espaço entre duas letras. Já Niemeyer (2006) diz que o Kerning é o ajuste

de espaços horizontais entre pares de caracteres específicos em um

texto, para criar visualmente um espaço aparentemente homogêneo entre

todos os tipos, como visto na figura abaixo.

66

Figura 55 - Exemplo Kerning

Tracking de acordo com Niemeyer (2006) é o controle do espaço médio entre

os caracteres num bloco de texto. Não havendo uma regra rígida para a

escolha de um tracking, cabe ao designer encarregado do projeto gráfico usar

com bom senso, o tracking é uma ferramenta muito útil para a eliminação de

viúvas em massas de texto.

Figura 56 - Exemplo da variação de tracking

14.5 Contraste (espessura das hastes)

Segundo Niemeyer (2006), a espessura das hastes e a sua relação com o oco

(ou vazio) e com o corpo, criam tipos estreitos ou largos, finos ou grossos.

Essas relações de proporção e contrastes fazem com que o texto adquira um

aspecto mais leve e claro, ou escuro e pesado. O eixo de angulações e as

ligações entre as partes do tipo também geram diferentes impressões:

redondo, macio, floreado, duro, pontudo, apertado, inflexível. O ritmo do

67

movimento pode ser suave, intenso, fluido, instável, rígido, controlado,

monótono. O dinamismo pode ser energético e cheio de força, ou restrito,

coibido, obstruído. A expressão geral pode ser silenciosa, intensa,

individualista, diferenciada ou artificial.

14.5.1 Estresse (contraste)

Segundo FINIZOLA (2010), o contraste é a diferença de espessura entre as

partes finas e grossas de um mesmo tipo. Maior a diferença, maior o contraste.

O stress (ou ênfase) é a inclinação do eixo vertical das letras (sobretudo as

arredondadas). Ele pode ser nulo (como na Bodoni), inclinado positivo (caso

das itálicas) ou inclinado negativo (como na Garamond).

Figura 57 - Exemplo da variação do contraste na tipografia

Segundo o padrão A Casa do Tipo 2003 (ROCHA, 2005):

1. Serifadas

1.1. Humanistas: Apresentam formas arredondadas, traço modulado, eixo

inclinado, pouco contraste entre as variações de espessura, altura de x

relativamente pequena, barra do caractere “e” levemente inclinada, serifas

geralmente curvas e côncavas podendo apresentar extremidades com

acabamento reto, arredondado ou em ângulo.

1.2. Garaldes: Eixo de estricção do “o” levemente inclinado, barra do caractere

“e” paralela à linha de base, contraste acentuado entre as variações de

espessura.

1.3. Transicionais: Situadas entre as garaldes e as didones, eixo de estricção

7° Congresso de Pesquisa & Desenvolvimento em Design vertical ou

suavemente inclinado para qualquer dos lados, serifas mais finas, planas, com

acabamento agudo e curvas, embora a junção com a haste normalmente seja

mais suave que nas garaldes.

68

1.4. Didones: Desprovidas de características manuscritas, eixo de estricção

vertical, contraste muito acentuado entre as variações de espessura, serifas de

filete, retas, planas com acabamentos retos, counters pequenos e terminais

redondos.

1.5. Mecânicas: Ampla mancha gráfica, serifas slab, retas ou curvas, planas,

com acabamentos retos, desenhos simples, com eixo de estricção vertical ou

ausente.

2. Lineares (não serifadas)

2.1. Grotescas: Desenhos volumosos e pouco refinados, contrastes de

espessura bem definidos.

2.2. Neo-Grotescas: Sutis diferenças entre as grotescas. Desenhos mais

projetados, minimização dos contrastes entre variação de espessura para

tornar as formas mais elegantes. Seus projetos previam as distorções de

impressão e o caractere “g” possui descendente em forma de arco.

2.3. Geométricas: Inspiradas nas formas geométricas, contrastes monolíneos,

linhas e curvas modulares repetidas nos demais caracteres, expressão dos

ideais modernistas, eixos verticais ou ausentes.

2.4. Humanistas: Contraste mais definido entre as variações de espessura,

relacionadas às inscrições romanas e às minúsculas das garaldes e

venezianas.

3. Decorativas: Desenhos originais, com fortes características ilustrativas, que

não necessariamente resultam em famílias tipográficas completas.

4. Manuscritas: Imitam ou sugerem desenhos feitos à mão, nesta categoria

encontram-se também os tipos denominados caligráficos.

5. Símbolos: Decorrentes principalmente do ambiente digital, essa categoria

tipográfica é composta por fontes cujos caracteres originais são substituídos

por ilustrações, ícones, símbolos, expressões etc.

6. Não Latinas: Representam línguas cuja escrita não se apresenta por meio

de caracteres latinos. Ex: Chineses, Árabes, Japoneses etc.

69

14.6 Estudo sobre famílias tipográficas

Segundo Niemeyer (2006), a partir das observações das variações estruturais

dos caracteres, é possível diferenciar as diversas famílias. Há alguns

caracteres que, em geral, permitem uma diferenciação mais rápida das

famílias, são eles: A, M, O, Q, R, W e a, d, e, g, m, o, p, y, além dos números 1,

4 e 7. Entretanto, determinadas famílias possuem características decisivas que

não se encontram nestes caracteres. As famílias tipográficas podem ser

classificadas em quatro grandes grupos: serifadas, não-serifadas, cursivas e

dingbats (sinais). Lewis Blackwell criou uma classificação que vem resistindo

ao tempo, pela qual os tipos podem ser classificados em 13 grupos. Para

exemplificar a classificação de Blackwell segue abaixo trecho extraído da

publicação “Vade-mécum de Tipografia”, de Antonio Fontoura.

1. Humanísticas

Uso de serifas; Eixo da letra “o” com acentuada inclinação à esquerda (ênfase

ou stress à esquerda); Barra da letra “e” inclinada.; Pouco contraste entre

traços grossos e finos das letras. Exemplos: Centaur e Jenson

Figura 58 - Características das Humanísticas

2. Garaldinas

Uso de serifas; Eixo da letra “o” com acentuada inclinação à esquerda. ;

Barrado “e” horizontal (principal diferença em relação às humanísticas; Pouco

contraste entre traços grossos e finos das letras. Serifas com tendência a

inclinarem-se à esquerda (menos que nas humanísticas).; Modulação dos

70

traços mais acentuada. Exemplos: Caslon Old Face, Paladino, Times

Figura 59 - Características das Garaldinas

3. Transicionais

Uso de serifas; Modulação dos traços pouco mais acentuada que as

garaldinas; Hastes mais pronunciadas que as garaldinas; As serifas são

oblíquas ou horizontais com tendencia à retitude; Ênfase (stress) vertical.

Exemplos: Baskerville, Caledonia, Caslon, Fournier

Figura 60 - Características das Transicionais

4. Didodianas

Uso de serifas finas e horizontais; Contraste acentuado entre os traços grossos

e finos; Ênfase totalmente vertical. Exemplos: Bauer Bodoni, Bodoni e Torino.

Figura 61 - Características das Didodianas

5. Egípcias

Uso de serifas quadradas e horizontais; Ênfase vertical. Exemplos: Claredon,

Serifa, Menphis.

71

Figura 62 - Características das Egípcias

6. Neotransacionais

Uso de serifas; Tipos mais robustos que as transacionais, mais suaves e

arredondados; Descendentes mais curtas; Ênfase vertical. Exemplos:

Bookman, Cheltenham, Excelcior.

Figura 63 - Características das Neotransacionais

7. Sans serif – grotesca

Ausência de serifas; Ênfase vertical nos tipos normais; Arremate ortogonal das

letras. Exemplos: Franklin Gothic, News Gothic.

Figura 64 - Características das grotescas

8. Sans serif – neogrotesca

Ausencia de serifas; Pouco contraste entre os traços das letras; Embocaduras

de algumas letras mais abertas que as das grotescas; A letra “g” não possui

anel na descendente. Exemplos: Folio, Helvetica, Akzidens Grotesk.

72

Figura 65 - Características das neogrotescas

9. Sans serif – geométrica

Ausência de serifas; Segue regras geométricas bem definidas para a

construção dos caracteres; Ausência de modulação nos traços. Exemplos:

Futura, Avant garde, Eurostile.

Figura 66 - Características das geométricas

10. Sans serif – humanística

Ausencia de serifas; Inspiração formal nas inscrições romanas, na escritura

manual humanística e nas escrituras do Renascimento; Espessura das hastes

moduladas. Exemplos: Gill Sans, Goudy Sans e Optima.

Figura 67 - Características das humanísticas

11. Glíficas

Possuem larguras uniformes; Possuem arremates terminais cinzelados;

Ênfase, por vezes, oblíqua à esquerda; Construção muito precisa. Exemplos:

Albertus, Augustea e Latin.

73

Figura 68 - Características das Glíficas

12. Caligráficas

Grupo amplo de caracteres tipográficos que imitam a escrita manual.

Exemplos: Mistral e Zapt Chancery ITC.

Figura 69 - Características das Caligráficas

13. Decorativas

Muitos tipos que apresentam características formais que os tornam dificilmente

classificáveis em grupos bem definidos ou, então, apresentam referencias tão

vigorosas que descaracterizam qualquer categoria de classificação.

Figura 70 - Características das Decorativas

15 ESTUDO DE ERGONOMIA VISUAL

74

Segundo Niemeyer (2006), a usabilidade do tipo é uma importante área de

pesquisa em tipografia. O elemento básico da impressão é a letra. Ela,

portanto, está na base de tal investigação. O nível de atendimentos dos

requisitos é determinado por três critérios ergonômicos: legibilidade,

leiturabilidade (readability) e pregnância.

15.1 Legibilidade

Segundo Niemeyer (2006), a legibilidade de um caractere é a facilidade

de com que um usuário identifica um caractere individual como uma letra em

particular. A legibilidade de um texto se refere à facilidade com que grupos de

caracteres são identificados corretamente como uma palavra, resultando que o

leitor ou leitora percebe frases significativas para ele ou ela. Segundo Sanders

e Mc Gormick (1993): [...] Legibilidade [é] o atributo de caracteres

alfanuméricos que possibilita que cada um deles seja identificável dos outros.

“Isto depende de algumas características de espessura da haste e a forma do

caractere”.

Uma alta legibilidade é muito importante em livros e outros impressos

para leitura intensa, sem dúvida maior do que a aplicada em logotipos e

cartazes. Se um texto não é muito legível, esta característica irá afetar de modo

determinante a velocidade com que o texto é lido e aumentará o esforço mental

necessário para identificar corretamente as letras e a consequente

compreensão do texto. A legibilidade é também afetada por fatores ambientais,

como nível de iluminação, o grau de contraste entre letra e fundo e o nível de

fadiga visual do leitor.

Resumindo: é a clareza em identificar cada tipo em conjunto, palavra ou frase.

15.2 Leiturabilidade

Segundo Sanders e MC Cormick (1993), “Leiturabilidade (readability) [é] a

qualidade que torna possível o reconhecimento do conteúdo da informação em

um suporte quando ela está presentada por caracteres alfanuméricos em

grupamentos com significação, como palavras, frases ou texto corrido. A

75

leiturabilidade depende do espacejamento entre caracteres, de sua

combinação em frases ou sob outras formas, do espaçamento entre linhas, do

comprimento de linha e das margens, mais do que a configuração especifica do

caractere em si”

Portanto, para um nível alto de leiturabilidade, a composição do texto deve

possibilitar fácil acesso à informação contida nas palavras. Além da

composição em si, a leiturabilidade depende da dificuldade do vocabulário, da

estrutura frasal e do grau de abstração presente nas relações expressas pelas

palavras. Isso se refere não só aos parágrafos de texto. Então, enquanto certo

desenho e tipo podem ser chamados de legível, ele, por definição, não pode

ser categorizado como leiturável (readable). O termo leiturabilidade só foi

introduzido na década de 1930. Inicialmente, ele foi usado para expressar o

que hoje é chamado de legibilidade. Em consequência, os dois termos são

usados, equivocadamente, de modo alternativo. A diferença entre os dois

conceitos pode ser mais bem expressada no sentido das duas relações.

Quando um texto é de baixa legibilidade, sua leiturabilidade também será

necessariamente baixa. Mas um texto pode não ter boa leiturabilidade e,

entretanto, ser altamente legível.

Podemos concluir que a leiturabilidade é facilidade e fluência de um conjunto

de tipos, palavra ou frase.

15.3 Pregnância

Segundo Sanders e MC Cormick (1993), Pregnância: “é a qualidade de um

caractere ou símbolo que faz com que ele seja visível separadamente do seu

entorno”. Quanto mais uma linha se destaca entre outras informações

dispostas, mais pregnante ela é considerada. Textos altamente pregnantes

recebem mais atenção do que elementos gráficos, verbais ou não, que sejam

menos pregnantes visualmente. Está é a qualidade prioritária que se persegue

no design de mensagens de advertência e de cartazes. O corpo do texto em

livros não precisa ser pregnante. Entretanto, quando algumas palavras em um

texto devem atrair mais a atenção do que outras, elas ganham destaque. Para

isso, são compostas de uma forma que contrastem com as demais partes do

76

texto – seja através do corpo, do peso, da inclinação, do entrelinhamento, da

Indentação etc.

15.4 Distâncias de leitura

Conforme IIDA (1995:73), as principais características da visão são a acuidade

visual, acomodação, convergência e a percepção de cores. A acuidade visual

refere-se ao poder de resolução do olho humano, ou seja, à agudeza de

discriminar pequenos detalhes e depende, conforme o autor citado, da

iluminação e do tempo de exposição. A acomodação diz respeito à focalização,

através do acomodamento dos olhos para observar objetos a diferentes

distâncias e, nos seres humanos, decresce com o passar da idade. A

convergência é concernente, à capacidade de os dois globos oculares

tenderem ou dirigirem-se para um mesmo ponto coordenadamente. É essa

característica da visão que proporciona a impressão de profundidade, e a

menor distância para focalização situa-se em torno de 10 cm.

Segundo Guimarães (2001), sobre a leitura:

– adultos leem a uma taxa média de 250 a 300 palavras/min.

– A leitura dá-se durante as pausas de fixação.

– As fixações, com duração média de 1/2s ou 1/4s, representam 94% do tempo

de leitura.

– Às vezes, os olhos regridem ao começo da frase. Estas pausas de regressão

auxiliam a corrigir uma percepção incorreta.

– A leitura normal dá-se entre 30-35 cm. A esta distância, a fóvea (local de

visão mais nítida da retina) subentende um ângulo de 70 graus.

– Apenas quatro letras em um texto caem na região da fóvea, fora da qual a

acuidade decai gradualmente.

77

15.5 Estudos de planos de leitura

Segundo MULLET (2005), o contraste melhora a percepção do objeto e

acentua a diferença entre ele e seu entorno. Para tanto, é possível se recorrer

a cores, iluminação, movimento, aparência, tamanho, textura, posição e

direção. É ele o fator que mais seduz o usuário. Logo, fortalece o vínculo peça

versus (vs.) usuários. Além de favorecer visão geral do objeto quase de

imediato ou desde o primeiro instante, proporciona, também, a legibilidade do

ambiente, quando atua sobre letras e em cores de fundo. E mais, pode ser

explicitado entre cores do fundo e a cor da letra, entre tamanho e tipos de

letras diferentes, além de outras opções. Isto permite afirmar que o contraste

adota mecanismos que conduzem a um foco sobre determinado tema. O

problema é que o contraste entre duas cores depende do contexto em

que elas estão inseridas. Note no exemplo abaixo que uma mesma

combinação de fundo azul e texto preto não são bons no contexto

branco, mas no preto até que é razoável.

Figura 71 - Exemplo de contraste combinação de fundo azul e texto preto (legibilidade)

Num monitor preto-e-branco essa diferença é ainda mais fácil de

perceber:

78

Figura 72 - Exemplo de contraste - preto e branco (legibilidade)

Segundo Benjamim Martinez (Visual Forces, 1988), o que acontece é parecido

com o fenômeno que provoca a persistência de imagens (olhe para um objeto

vermelho e depois para um fundo branco e uma silhueta verde aparecerá).

Nessa ilusão de ótica dá pra perceber isso bem nítido:

Figura 73 - Exemplo de efeito do contraste simultâneo

Cores puras, intensas, primárias não são tão afetadas pelo contexto, mas as de

baixa intensidade e cores não primárias podem mudar de aparência

radicalmente. O tamanho também pode influenciar o efeito de contraste

simultâneo. Geralmente, áreas de cor maiores tem mais influência sobre os

menores. O pequeno quadrado verde é mudado pela cor do quadrado amarelo

ou azul, não o inverso. É por isso que o texto parece ser afetado pela cor do

fundo e não o contrário, ou porque um fio branco desfiando por cima de uma

79

roupa verde parece tão brilhante. O tamanho também pode influenciar o efeito

de contraste simultâneo. Geralmente, áreas de cor maiores tem mais influência

sobre os menores.

16 ESTUDO DE LINGUAGEM SINTÉTICA / PICTOGRAFIA

“(Ícone) seu principal objetivo está em guiar o usuário na busca pela

informação, ajudando na memorização de caminhos e tornando o meio digital

mais amigável” (Melissa Toledo).

O uso moderno dos pictogramas foi gerado a partir da demanda da

criação de uma comunicação rápida, simples e de fácil aplicação, independente

da origem cultural do observador, isto é, universal. Sendo a principal

dificuldade, a busca de símbolos de igual entendimento entre o mundo

ocidental e o oriental devido à existência de culturas completamente diferentes.

(MEGGS, pág. 538). Com a globalização e o crescimento excessivo dos

centros urbanos, foi possível a utilização de pictogramas de grande alcance de

compreensão. Por mais que os observadores não saibam ler, ou venham de

origens diferentes. (MEGGS, pág. 538).

Segundo PADOVANI (2004), no que se refere à informação como imagem,

destacam-se os ícones, os quais são vantagens de uso são:

Universalidade: compreensão que supera barreira da língua;

Detecção/ Identificação: percepção, com maior facilidade, que sinais

escritos; Visibilidade: melhor identificados em situações adversas de

iluminação.

Recodificação: não necessitam de recodificação como os enunciados

escritos.

Forma compacta: capacidade de representar informação de forma mais

condensada (ocupa menos espaço que enunciados escritos).

Multidimensionalidade: capacidade de incorporar cores, tratamentos,

tridimensionalidade para auxiliar a compreensão.

80

Para IIDA (2005) e PADOVANI (2004), tais vantagens são conquistadas

somente se os critérios ergonômicos para estes elementos forem

contemplados:

• Contornos fortes: figuras com contornos bem definidos, para atrair a

atenção.

• Simplicidade: formas simples, despojamento de detalhes, para ser mais

facilmente captadas.

• Figuras fechadas: inteiras, completas, obedecendo à teoria da “gestalt”,

são mais facilmente percebidas.

• Estabilidade da forma: não deve permitir informações dúbias (ex.:

confusões entre figura e fundo); deve ter separação visual clara entre os

vários elementos de um ícone.

• Simetria: a leitura será facilitada se a figura tiver simetria, na medida do

possível; o posicionamento relativo entre os elementos deve ser estável.

• Proporção semelhante a um quadrado: evitar figuras compridas ou largas

demais.

• Ângulo de visão adequado: utilizar a vista mais fácil para identificar o

objeto.

• Familiar e Concreto: usar objeto familiar, convencional, e o mais concreto

possível.

Mesmo contemplando a maioria ou todos os critérios ergonômicos para

símbolos gráficos, alguns ícones não transmitem de maneira eficaz a

informação.

81

17 ESTUDO SOBRE USABILIDADE

Um dos fatores fundamentais para o desenvolvimento de projetos de sucesso é

a usabilidade. Ela nos da à garantia de que a interface atende plenamente seus

usuários. A norma ISO 9241 define usabilidade como a capacidade que um

sistema interativo oferece a seu usuário, em determinado contexto de

operação, para a realização de tarefas de maneira eficaz, eficiente e agradável.

Outra definição do temo de forma objetiva: “A usabilidade é a qualidade que

caracteriza o uso dos programas e aplicações.” (CYBIS, 2007, p.15). Dizer que

uma interface oferece usabilidade significa dizer que seu usuário consegue

alcançar seus objetivos de maneira fácil e prazerosa, logo, fazem parte dos

objetivos esperados para a interface final deste projeto.

17.1.1 O que é Análise Heurística?

A análise heurística é um método rápido e barato para analisar a usabilidade

de um website. (NIELSEN, 2005a; 2005b) Recomenda-se que a análise seja

realizada por especialistas em usabilidade, porém nada impede que

desenvolvedores estudem os critérios de avaliação e realizem a análise.

(NIELSEN, 2005a; 2005b) Nielsen (2005a) diz que o melhor custo benefício

para a aplicação desta análise é utilizando entre três a cinco avaliadores.

17.1.2 Metodologia de aplicação

Os princípios heurísticos são os critérios de usabilidade, que devem ser

apresentados para cada avaliador a fim de padronizar os resultados e facilitar a

avaliação. (NIELSEN, 2005a; BASTIEN; SCAPIN, 1993) O avaliador deve

também ter conhecimento sobre o website e seus usuários, podendo assim

avaliar como a interface atinge ou tenta atingir as expectativas dos usuários. A

avaliação pode ser acompanhada ou não por um observador, que poderá

retirar dúvidas dos avaliadores, explicar sobre o funcionamento do sistema e

sugerir a realização de algumas tarefas.

82

Cada avaliador deverá realizar a análise sem contato com os outros

avaliadores, evitando que um avaliador influencie a análise do outro. Os relatos

do avaliador podem ser feitos através da gravação de áudio, enquanto ele

narra suas ações e problemas encontrados ou através de relato escrito dos

problemas encontrados. Se existir um observador a transcrição dos relatos

pode ser feita pelo observador em tempo real, sem necessidade de gravar o

áudio. Em um primeiro momento o avaliador deverá navegar livremente pelo

website (browsing) e relatar os erros que encontra. Sempre que possível o

avaliador deve relacionar os erros encontrados com os critérios heurísticos que

lhe foram apresentados anteriormente. Pode ser solicitado que o avaliador

realize algumas tarefas específicas na interface, executando ações julgadas

importantes para o website ou sistema analisado.

17.1.3 Resultados

O resultado desta primeira etapa da análise será uma lista com todos os

problemas de usabilidade encontrados pelos avaliadores. Este resultado deve

ser organizado na forma de uma tabela. Esta tabela contendo os erros

encontrados por todos os avaliadores será entregue para cada avaliador para

que quantifique o nível do problema.

17.2 Feedback - Nível dos erros (NIELSEN, 2003a)

O sistema deve sempre informar ao usuário o que está acontecendo, deixando

sempre visível o status do sistema a fim de evitar que o usuário se sinta

perdido. Deve-se evitar qualquer espera do usuário. Nielsen (2000) diz que o

tempo máximo para o usuário sentir que a interface responde de forma

imediata é de 10 segundos e o ideal é 1 segundo apenas. Quando a espera for

necessária o usuário deve ser informado sobre o andamento do processo. Isso

pode ser feito através de mensagem ou uma animação informando que a tarefa

está sendo processada. É preferível que seja informado o andamento da tarefa

e se possível o tempo esperado para finalizar o processo em execução, isso

83

evita que o usuário tenha a impressão de que aconteceu algum erro no

processo.

17.3 Linguagem adequada

O sistema deve utilizar uma linguagem familiar ao usuário e não focada em

linguagem técnica de difícil compreensão pra os usuários. Para o cumprimento

desta recomendação o conhecimento do nível cultural do usuário é

fundamental.

17.3.1 Liberdade e controle do usuário

O sistema só deve executar tarefas que o usuário solicitar e quando o usuário

solicitar. O usuário deve ter controles sobre o processamento do sistema com a

possibilidade de interromper, cancelar ou continuar as tarefas que estão sendo

realizadas. Estas ações devem ser antecipadas e as opções possíveis no

momento devem ser oferecidas ao usuário. Para Nielsen (2005c) o usuário

precisa ter conhecimento de uma “saída de emergência” para quando toma

ações erradas por engano, ele precisa ter liberdade para desfazer, corrigir ou

refazer ações.

17.3.2 Coerência

As denominações, formatos, situações e procedimentos devem sempre que

possível manter uma similaridade e seguir padrões definidos para o sistema. O

usuário não deve aprender termos e ações diferentes para se referir a uma

mesma definição ou objetivo. (NIELSEN 2005c; Bastien e Scapin, 1993)

Segundo Bastien e Scapin (1993) os elementos de uma interface são melhores

reconhecidos, localizados e utilizados quando sua localização, formato e

estética são iguais ou similares em diversas telas de um sistema.

84

17.3.4 Controle de erros

Deve ser feito o máximo para evitar ou reduzir o número de erros ocorridos no

uso de uma interface e quando eles ocorrerem deve a recuperação do sistema

deve ser facilitada. (BASTIEN; SCAPIN, 1993) Se o usuário não pode ou não

deve realizar uma ação deve ser feito o maior esforço possível para que ele

não consiga sua realização. A qualidade da mensagem de erro influencia o

aprendizado do usuário, portanto a mensagem deve ser esclarecedora, utilizar

a linguagem do usuário, explicitar onde está o problema e como o usuário deve

proceder para a recuperação do erro.

17.3.5 Reconhecimento

O usuário não deve precisar se esforçar ao relembrar de informações para

utilizar uma interface. As opções e informações necessárias para o uso devem

estar visíveis de uma tela para outra na interface, ou devem ser facilmente

acessadas quando necessário. Bastien e Scapin (1993) denominam um critério

chamado “significado dos códigos e denominações” onde se recomenda que as

denominações ou ícones utilizados devem ter uma forte relação semântica com

sua função. A terminologia utilizada deve condizer com a do usuário e

representar a real ação causada quando aquele elemento for acionado pelo

usuário.

17.3.6 Flexibilidade e eficiência

O sistema deve levar em consideração a experiência do usuário e permitir que

a interface se adapte ao nível do usuário. Nielsen (2005c) diz que deve ser

possível o uso de atalhos que permitem que usuários avançados aumentem

sua efetividade utilizando a interface. Bastien e Scapin (1993) argumentam que

dificilmente uma interface irá atender ao mesmo tempo todos os usuários em

potencial e devido a isto a interface deve se adaptar ao usuário. Recomenda-se

a possibilidade de diversos procedimentos para a realização de uma tarefa.

85

Quanto maiores as possibilidades para a realização de uma tarefa maior a

chance do usuário encontrar uma forma que se adapte ao seu método de uso.

17.3.7 Estética e minimalismo

Nielsen (2003a) ressalta a importância da estética na percepção e conforto do

usuário ao utilizar a interface. Recomenda-se a aplicação das leis da Gestalt

para a percepção humana, facilitando o entendimento da relação entre os

elementos de diálogo da interface. Nielsen (2003a) diz que deve ser possível a

utilização da interface sem diferenciação de cores, portanto as cores devem

servir apenas como complemento de identificação dos elementos e não como

forma principal para alguma informação. Através de uma análise da tarefa é

possível identificar os elementos realmente necessários na interface para que o

objetivo seja atingido. Nielsen (2005c) recomenda que estas informações

fiquem disponíveis em uma única tela e seja exibido apenas o necessário para

a realização da tarefa, evitando que o usuário se disperse com elementos que

não ajudarão na realização do objetivo.

17.3.8 Ajuda e documentação

O ideal é que o sistema possa ser utilizado sem nenhum auxílio documentação

ou sistema de ajuda. A documentação pode ser utilizada para melhorar a

eficiência de um usuário, porém não deve ser necessária para a utilização da

interface, pelo menos em suas funções principais (NIELSEN, 2003a, p. 148).

Nielsen (2003a, p.149) diz que se o usuário procura ajuda em documentações

é porque ele está com sérias dificuldades e almeja ajuda imediata. Sabendo

disso recomenda-se que a documentação seja orientada à realização de

tarefas e que o conteúdo seja facilmente localizado. A documentação pode

fazer parte da interface, contextualizada com a tarefa a ser realizada e exibida

em uma interface gráfica através de um quadro, ou balão de ajuda. (FARKAS,

1993 apud NIELSEN, 2003a p.150. SELLEN; NICOL, 1990 apud NIELSEN,

2003a, p.150).

86

17.4 As dez heurísticas de Jacob Nilsen

Para Jacob Nilsen (1994a), existem dez heurísticas que são essenciais em um

projeto de interface que são recomendações baseada em pesquisas

comprovadas pelo mesmo e que podem ser aplicadas, não só por

especialistas, mas também por outros que a dominem, elas são:

1) Diálogos simples e naturais

Deve-se apresentar exatamente a informação que o usuário precisa no

momento, nem mais nem menos. A sequência da interação e o acesso aos

objetos e operações devem ser compatíveis com o modo pelo qual o usuário

realiza suas tarefas.

2) Falar a linguagem do usuário

A terminologia deve ser baseada na linguagem do usuário e não orientada ao

sistema. As informações devem ser organizadas conforme o modelo mental

do usuário.

3) Minimizar a sobrecarga de memória do usuário

O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça

suas escolhas, sem a necessidade de lembrar um comando específico.

4) Consistência

Um mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma

operação deve ser apresentada na mesma localização e deve ser

formatada/apresentada da mesma maneira para facilitar o reconhecimento.

5) Feedback

O sistema deve informar continuamente ao usuário sobre o que ele está

fazendo. 10 segundos é o limite para manter a atenção do usuário focalizada

no diálogo.

87

6) Saídas claramente marcadas

O usuário controla o sistema, ele pode, a qualquer momento, abortar uma

tarefa, ou desfazer uma operação e retornar ao estado anterior.

7) Atalhos

Para usuários experientes executarem as operações mais rapidamente.

Abreviações, teclas de função, duplo clique no mouse, função de volta em

sistemas hipertexto. Atalhos também servem para recuperar informações que

estão numa profundidade na árvore navegacional a partir da interface

principal.

8) Boas mensagens de erro

Linguagem clara e sem códigos. Devem ajudar o usuário a entender e

resolver o problema. Não devem culpar ou intimidar o usuário.

9) Prevenir erros

Evitar situações de erro. Conhecer as situações que mais provocam erros e

modificar a interface para que estes erros não ocorram.

10) Ajuda e documentação

O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite

de ajuda ou documentação. Se for necessária à ajuda deve estar facilmente

acessível on-line.

17.5 Acessibilidade

Em geral essa palavra não está sozinha, vem contextualizada de

conceitos técnicos ou práticos, normalmente associados a pessoas com

deficiência. Sua aplicação, de fato, teve origem na necessidade da

transposição dos obstáculos arquiteturais que impediam e impedem o acesso

de pessoas com deficiência a lugares de uso comum e público. Mas, ao longo

do tempo, o conceito de acessibilidade assumiu dimensão mais ampla.

88

Qualquer tipo de barreira para qualquer pessoa, mesmo sem deficiências ou

apenas com limitações temporárias, passou a ser relacionado à acessibilidade.

Para CARRION (2005), acessibilidade significa “facilidade de interação” ou

aproximação.

E quando focada em tecnologia, seu objetivo é tornar computadores e a

internet mais acessível para deficientes físicos e visuais.

A W3C cita em seu site uma lista de incapacidades e sua relação com as

questões da acessibilidade na web:

Deficiência visual

Imagens que não têm texto alternativo “ALT”;

Imagens complexas (gráficos ou cartas) que não são descritas

adequadamente;

Vídeo que não está descrito no texto ou áudio;

Tabelas que não fazem sentido quando lidas em série;

Quadros que não têm alternativas "NOFRAME;

Formulários que são mal rotulados;

Navegadores e ferramentas que não possuem suporte de teclado para

todos os comandos;

Navegadores e ferramentas que não utilizam interfaces programadas no

padrão do sistema operacional em que se baseiam;

Documentos fora do padrão podem dificultar a interpretação do leitor de

tela.

Baixa visão

Páginas Web com tamanhos de fonte absolutos que bloqueiam o

navegador ampliar ou reduzir o texto;

Páginas da Web que, devido ao layout inconsistente, são difíceis de

navegar quando ampliadas, devido à perda do contexto envolvente;

Páginas ou imagens da Web, que tem um contraste pobre, e que não

podem ser facilmente alterados através das folhas de estilo;

89

Texto apresentado como imagens, o que impede a quebra de linha

quando ampliada;

Daltonismo

Cor que é usada como um marcador exclusivo para enfatizar o texto em

um site.

Texto e fundo sem contrastes;

Navegadores que não suportam substituir folhas de estilo.

Deficiência auditiva

Falta de legendas ou transcrições de áudio na Web, incluindo webcasts;

Falta de imagens relacionadas ao conteúdo de páginas, dificultando o

entendimento de usuários cuja primeira língua seja a língua de sinais em

vez de uma escrita / linguagem falada;

Falta de linguagem clara e simples;

Requisitos para a entrada de voz em web sites.

Visual e percepção auditiva

Falta de um texto alternativo que pode ser convertido para áudio ou a

falta de legendas para áudio.

Transtorno de déficit de atenção

Falta de atenção com elementos visuais ou de áudio que não podem ser

facilmente desativados;

Falta de organização clara e consistente dos web sites.

Deficiência intelectual

Uso da linguagem complexa;

Falta de gráficos em sites;

Falta de organização clara e consistente.

Deficiências de memória

Falta de organização clara e consistente das páginas dos sites.

Saúde deficiência mental

90

Distração provocada por elementos visuais ou de áudio que não pode

ser desativado facilmente;

Páginas com tamanhos de fonte que não podem ser ampliados.

Incapacidade física

Tempo limitado de opções de resposta;

Navegadores e ferramentas que não suportam as alternativas de teclado

para comandos de mouse;

Formulários que não podem ser tabuladas através de uma ordem lógica

(uso do TAB).

Deficiência de fala

Web sites que requerem a interação baseada em voz e não têm opções

de entrada, por exemplo, o uso do teclado.

Desordens de apreensão

Utilização de frequências visuais ou de áudio que podem desencadear

crises convulsivas.

18 DADOS DE PRESENÇA HUMANA

18.1 Número de usuários no Brasil

Segundo o F/Nazca, somos 81,3 milhões de internautas brasileiros (a partir de

12 anos). Já para o Ibope/Nielsen, somos 78 milhões (a partir de 16 anos -

setembro/2011. De acordo com a Fecomércio-RJ/Ipsos, o percentual de

brasileiros conectados à internet aumentou de 27% para 48%, entre 2007 e

2011. O principal local de acesso é a lan house (31%), seguido da própria casa

(27%) e da casa de parente de amigos, com 25% (abril/2010). O Brasil é o 5º

país com o maior número de conexões à Internet.

91

18.2 Comércio eletrônico

Em 2008 foram gastos R$ 8,2 bilhões em compras on-line. Em 2009, mesmo

com crise, foram gastos R$ 10,6 bilhões. 2010 fechou com R$ 14,8 bilhões,

atingindo 1/3 de todas as vendas de varejo feitas no Brasil. Ainda assim,

apenas 20% dos internautas brasileiros fazem compras na internet; aqueles

que ainda não compram, não o fazem por não considerar a operação segura

(69%) ou porque não confiam na qualidade do produto (26%).

18.3 Banda larga

Atingimos 10,04 milhões de conexões em junho de 2008: um ano e meio

antes do previsto, já que essa era a projeção para 2010. Quanto ao volume de

dados, o incremento foi de 56 vezes de 2002 até 2007. E a projeção é de um

aumento de 8 vezes até 2012; o número de conexões móveis cresceu de 233

mil para 1,31 milhão em um ano; Sistemas gratuitos de banda larga sem fio

(Wi-Fi) funcionam nas orlas de Copacabana, Leme, Ipanema e Leblon, nos

Morros Santa Marta e Cidade de Deus e em Duque de Caxias. Estão nos

planos: São João de Meriti, Belford Roxo, Mesquita, Nova Iguaçu, Nilópolis,

Rocinha, Pavão-Pavãozinho, Cantagalo e 58 km da Avenida Brasil, todos no

Rio de Janeiro. 16,9% dos internautas brasileiros tem uma velocidade de

banda larga de 128 a 512 Kbps; 47,8% tem 512 Kbps a 2 Mbps; 21,3% usa 2

Mbps a 8 Mbps; 8,7% tem velocidade superior a 8 Mbps.

www.ebitempresa.com.br / Compilação: www.e-commerce.org.br

http://www.e-commerce.org.b/

92

18.4 Crescimento do número de usuários

Figura 74 - Crescimento do número de usuários no Brasil – fonte ebit www.e-commerce.org.br

18.5 Crescimento de consumidores no comércio eletrônico

2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011*

Consumidores 1.1 2.0 2.6 3.4 4.8 7.0 9.5 13.2 17,6 23,00 30,0

Crescimento.% - 81% 30% 31% 41% 46% 36% 39% 33% 30% 30%

Tabela 8 - Crescimento de consumidores em comércio eletrônico

http://www.e-commerce.org.br/

93

18.6 Perfil do Consumidor – eBit

Figura 75 - Renda Familiar - Quantidade de Transações (R$ / Mês)

Figura 76 - Faixa Etária - Quantidade de Transações

Figura 77 - Escolaridade - Quantidade de Transações

94

19 ANÁLISE DOS DADOS

19.0 Análise Comércio Eletrônico

Segundo o levantamento de dados sobre o mercado de comércio

eletrônico, o mesmo permite aos fornecedores estarem mais próximos dos

seus clientes, traduzindo-se em ganhos de produtividade e competitividade

para as empresas; como consequência, o consumidor sai beneficiado com a

melhoria na qualidade do serviço, resultante da maior proximidade e de um

suporte pré e pós-venda mais eficiente. A redução de custos é outra das

vantagens muito importante, normalmente associada ao comércio eletrônico.

Existem algumas barreiras ao comércio eletrônico que podem ser dividas em

dois grupos: Segurança e as limitações sensoriais. Os clientes estão

preocupados com o possível roubo dos números do cartão de crédito, da

privacidade das suas informações pessoais, e de desempenhos inaceitáveis

por parte da rede também como a impossibilidade de transpor completamente

o mundo físico ao virtual. Na compra do produto somente o sentido da visão

será realmente decisivo, cancelando audição, olfato, tato e paladar que

poderiam ser essências no processo de experimentação e facilitar no processo

da compra. Autores como (SMITH; SPEAKER; THOMPSON, 2000; SIEGEL,

2000; ALBERTIN,1999) citam algumas das desvantagens do comércio

eletrônico que são:

O prazo de entrega dos produtos nem sempre é cumprido;

A falta de hábito do cliente em participar de negociações eletrônicas;

A desconfiança do comprador em relação ao processo;

A argumentação do vendedor é prejudicada

95

19.1 Análise de similares

No fichamento de similares realizado, alguns detalhes em comum foram

identificados e considerados como padrões nas construções dos sites da

categoria de similares pesquisadas.

a) A marca da empresa fica sempre posicionada no canto superior

esquerdo da página;

b) Barras de menus gerais (mais abrangentes ou globais) são

disponibilizadas horizontalmente na parte superior da página, logo

abaixo da marca da empresa;

c) Menus mais especificados e sub-menus são encontrados na parte lateral

esquerda da página;

d) Recursos como pesquisas ou atalhos estilo “MenuJump” para páginas

internas dos sites são disponibilizados na parte superior dos sites (acima

ou na mesma linha dos menus gerais);

e) Campos para a entrada de dados do login e senha são localizados na

parte superior direita;

f) Em relação às cores dos sites, não existe um padrão. Elas geralmente

sã as cores ou variações das cores das marcas das empresas, porém é

importante ser ressaltado que a maioria dos sites utiliza em sua

programação visual degrades para dar a sensação de volume;

g) Quanto às dimensões dos sites, as páginas foram desenvolvidas para

serem visualizadas na resolução mínima de 1024x728 pixels sem que

haja a necessidade do navegador apresentar barras de rolagem

horizontal.

h) Alguns sites utilizam resolução maior que 1024x768 pixels e usam esse

espaço extra para promoções e anúncios gerais.

96

Figura 78 – Estudo de caso que gerou o modelo dos padrões encontrados nos similares

a) Marca

b) Meu geral

c) Menu lateral

d) Login

e) Campo de pesquisa / filtros

f) Área dinâmica

19.2 Análise das Características Tecnológicas

Segundo o levantamento de dados das características tecnológicas o

wireframe é uma ferramenta essencial na criação de interfaces. Segundo

Memória (2006, pág. 37) os wireframes facilitam o processo de aprovação do

projeto porque começam a mostrar a estrutura do que está sendo elaborado.

Além disso, o wireframe também oferece à equipe técnica que vai construir o

produto uma noção mais clara da quantidade e complexidade do trabalho.

Segundo a pesquisa da W3C sobre resoluções de tela mais usadas nos

tempos atuais, à resolução 1024x768 se sobressai sendo a mais usada. Em

relação segurança digital, podemos dizer que para o usuário esteja protegido

97

digitalmente e juridicamente ao se comprar online, são necessários alguns

requisitos como criptografia, assinatura digital e certificado digital de uma

autoridade para que se possa atestar eficácia de segurança em um comércio

eletrônico. Essas „ferramentas‟ devem ser explicadas de forma didática para os

usuários que estão no primeiro contato com o comércio eletrônico e as

desconhece.

19.3 Análise Imagética

Segundo o estudo sobre universo imagético, Ambrose (2009) nos diz que as

imagens são os elementos gráficos que podem dar vida a um design. São

essenciais à comunicação de uma mensagem e à consolidação da identidade

visual de um projeto. As palavras-chave definiram o universo de

supermercados, suas referências e influencias, com elas definidas foi feita uma

busca de imagens para exemplificá-las através de painéis semânticos. Os

painéis semânticos foram classificados categorias distintas, formando grupos

referenciais,

Bem estar – Comportamental

Pontos positivos: Uma grande possibilidade de temas serem gerados a partir

desses conceitos de qualidade de vida e bem estar que poderiam representar

bem a imagem da rede de supermercados ao consumidor.

Pontos negativos: Por ser algo abstrato, qualidade de vida e bem-estar são

difíceis de serem traduzidos em imagens e dificulta mais já que é um tema

subjetivo.

Alimento-Temático;

Pontos positivos: Uma interface gráfica utiliza a visão do usuário como meio

sensorial, e através dela deve seduzir o cliente, pois o mesmo não terá contato

físico com o produto.

Pontos negativos: Por ser algo realizado em ambiente digital, os produtos

disponíveis na interface devem ser atrativo o suficiente para amenizar a falta do

tato, olfato, audição e paladar no processo de compra.

98

19.4.1 Análise Cromática

Com base no levantamento do universo cromático, a análise irá apontar

pontos positivos negativos em relação aos seis contrastes da cor, os aspectos

psicodinâmicos das cores e harmonia, levando-se em consideração as

características desejadas no projeto.

CONTRASTE DE TOM

Pontos positivos: É o mais simples. Não exige grandes esforços da visão,

porque, para representá-lo, é possível utilizar qualquer cor pura e luminosa.

Pontos negativos: É necessário ter a precaução de prevalecer apenas uma

cor como dominante (em extensão, intensidade ou saturação), atenuando as

outras com branco ou preto ou em menor extensão espacial.

CONTRASTE CLARO-ESCURO

Pontos positivos: Grande unidade nas imagens que utilizam esse tipo de

contraste.

Pontos negativos: Utilização de apenas duas cores base.

CONTRASTE QUENTE-FRIO

Pontos positivos: Adição de sensações a imagem que utiliza este contraste, é

possível o efeito da diferença de planos, sem a necessidade da utilização da

perspectiva.

Pontos negativos: Algumas cores podem transmitir ambas as sensações.

CONTRASTE DE COMPLEMENTARES

Pontos positivos: Destacar algum elemento na imagem promovendo seu

contraste com o resto da imagem através da cor utilizada.

Pontos negativos: Se mal utilizado pode causar desconforto visual e uma

queda na legibilidade.

99

CONSTRASTE DE LIMITE

Pontos positivos: Ilusão de uma cor sobreposta à outra sendo essas

complementares.

Pontos negativos: A utilização desse tipo de contraste em textos pode causar

dificuldade na leitura.

CONSTRASTE SIMULTÂNEO

Pontos positivos: Com esse contraste é possível atingir a harmonia

cromática, que poderia ser usada como recurso.

Pontos negativos: O contraste simultâneo é uma consequência do trabalho do

olho pela busca de equilíbrio, esse tipo de contraste pode ser interessante em

imagens, mas em textos poderá criar um desconforto visual prejudicando a

legibilidade.

19.4.2 Análise dos Aspectos Psicodinâmicos das Cores

Segundo o estudo sobre os aspectos psicodinâmicos das cores - De acordo

com Goldman (1964, p. 145), “87% dos estímulos que chegam ao nosso

cérebro vão através da visão, ficando a audição com 7%, o olfato 3%, o tato

1,5% e o paladar com 1,5%”. Ao receber o estímulo da luz, "os olhos alimentam

o cérebro com informação codificada em atividade neural – cadeias de

impulsos elétricos – a qual, pelo seu código e pelos padrões de atividade

cerebral, representa objetos" (GREGORY, 1979, p.77).

As cores quentes possuem comprimentos de ondas mais longas e têm a

propriedade de terem uma intensidade ou densidade maior, avançando na

direção do olhar e diminuindo o espaço. Já as cores frias possuem ondas

mais curtas e provocam exatamente o contrário, isto é, a sensação de

distanciamento do olhar e do aumento do espaço. Outra diferença entre cores

frias e quentes é que as cores quentes estimulam a circulação sanguínea

fazendo com que aumente a temperatura corporal. As cores frias diminuem a

circulação sanguínea e faz com que caia a temperatura do organismo.

100

O azul, que tem um tempo de percepção de 0,06 segundos, com ondas curtas

de fraca intensidade, que atua com suavidade nos neurônios, baixando o fluxo

sanguíneo e até mesmo causando certa introspecção do indivíduo. Já o

vermelho possui um tempo menor de percepção, 0,02 segundos, com ondas

de comprimento longo e de maior intensidade, excitando o cérebro. Neste

caso, o vermelho eleva a pressão arterial do indivíduo, acelera os batimentos

cardíacos e causa certa inquietação, interferindo ainda no sistema nervoso

responsável pelo alerta, pelo ataque e pela defesa. Outra cor bastante

interessante do ponto de vista fisiológico é o amarelo, quem tem o mais rápido

tempo de percepção, 0,01 segundo, e atua nas funções metabólicas e

hipotalâmicas, despertando a sensação de fome.

19.5 Análise Tipográfica

Segundo o estudo tipográfico, algumas recomendações de pesquisadores

como Jacob Nielsen (2007), Bastian & Scapin (1993) e Ben Shneiderman

(1998), sobre a tipografia não são somente relacionada a legibilidade, mas

também a consistência das interfaces, sendo apontada como um recurso

que pode facilitar a orientação do usuário, ao lado de outros códigos como a

cor e demais elementos gráficos. Ao estudar recomendações e regras para

melhor utilização da tipografia na tela muitas referências da mídia impressa

devem ser mantidas, no entanto algumas recomendações aparecem de forma

invertida. Enquanto o uso de fontes serifadas é considerado adequado para a

mídia impressa por facilitar a leitura, nas telas as fontes não-serifadas são as

mais recomendadas, devido ao tamanho do pixel, menor unidade que compõe

uma imagem digital, dificultar a visualização de serifas. Conforme observa

Nielsen (2007) “Em virtude da baixa resolução da tela corrente do computador,

o texto pequeno é mais legível quando se apresenta em fonte sem serifa, como

a Verdana. Simplesmente não há pixels suficientes disponíveis para resolver

o detalhe sutil necessário para tipos com serifas em 10pt.

101

Da mesma forma o efeito de suavização (anti-aliasing) em fontes com menos

de 12 pontos deve ser evitado. Segundo Lupton (2006) enquanto nos

caracteres maiores esse recurso cria a aparência de uma borda suave, em

tamanhos menores, no entanto, esses textos parecem desfocados.

Fonte: LUPTON (2006)

Nielsen (2007) traz diversas recomendações relativas ao uso da tipografia, pois

segundo ele “independente da qualidade visual do seu site, se as pessoas não

puderem ler o texto facilmente, ele estará destinado ao fracasso”. A seguir

serão relacionadas algumas dessas recomendações.

a) Escolher a fonte mais adequada

Conforme citado anteriormente, ao contrário da mídia impressa, as fontes

mais recomendadas para a tela são as sem serifa.

b) Definir corretamente o corpo do texto

O designer deve escolher o tamanho de texto adequado ao público e ao

espaço disponível para o conteúdo. Nielsen (2007) sugere uma relação de

tamanhos de texto recomendáveis para ambiente web.

Tabela 9 - Tamanhos de texto recomendáveis

c) Oferecer controle ao usuário - Independente das recomendações de

tamanho do texto é importante permitir ao usuário a adaptação conforme suas

necessidades. A função de redimensionamento de texto, geralmente

102

representada por “A+ e A-” deve estar visível no próprio site, evitando assim

que o usuário precise vasculhar o navegador em busca desse recurso.

d) Manter a consistência da interface - Usar poucas combinações de fontes, se

possível da mesma família tipográfica, e manter a mesma ordem na sua

aplicação ajuda a reforçar a hierarquia e a consistência da interface.

e) Garantir um contraste satisfatório - Na mídia impressa o tipo de papel, o

processo escolhido, a tinta, enfim, vários fatores interferem, porém uma vez

impresso dificilmente o material sofrerá mudanças, a não ser por exposição ao

sol ou outros intempéries. Quando se trata de interface digital essas variações

são praticamente incontroláveis, uma vez que dependem de fatores que não

estão ao alcance do designer gráfico, como a resolução, brilho, e outros ajustes

que só o usuário final poderá definir. Portanto é recomendável optar por

contrastes mais altos, que garantam melhor conforto visual independente do

equipamento usado.

103

Figura 79 - Niveis de Leitura

f) Limitar a comprimento da linha - Assim como na mídia impressa estudos em

ambiente digital também indicam que linhas de texto muito estreitas ou muito

largas dificultam a leitura. Um estudo realizado por Dyson e Kipping (apud

SOUTO, 2007) revelou que também na mídia digital os comprimentos linha

influenciam na compreensão do leitor. Segundo os pesquisadores linhas com

55 caracteres de comprimento são mais fáceis de ler do que as com 100cpl.

104

19.6 Análise Ergonomia Visual

Segundo o estudo de ergonomia visual, Niemeyer (2006) diz que a

usabilidade do tipo é uma importante área de pesquisa em tipografia. O

elemento básico da impressão é a letra. Ela, portanto, está na base de tal

investigação. O nível de atendimentos dos requisitos é determinado por três

critérios ergonômicos: legibilidade, leiturabilidade (readability) e pregnância.

A legibilidade é afetada por fatores ambientais, como nível de iluminação, o

grau de contraste entre letra e fundo e o nível de fadiga visual do leitor. A

interface que tem a clareza em identificar cada tipo em conjunto, palavra ou

frase facilitara a legibilidade.

Segundo Sanders e MC Cormick (1993), “Leiturabilidade (readability) [é] a

qualidade que torna possível o reconhecimento do conteúdo da informação em

um suporte quando ela está presentada por caracteres alfanuméricos em

grupamentos com significação, como palavras, frases ou texto corrido. Textos

que há facilidade e fluência de um conjunto de tipos, palavra ou frase serão os

que possuem maior leiturabilidade e que dependem exclusivamente do texto e

deve possibilitar fácil acesso à informação contida nas palavras. Além da

composição em si, a leiturabilidade depende da dificuldade do vocabulário, da

estrutura frasal e do grau de abstração presente nas relações expressas pelas

palavras. Isso se refere não só aos parágrafos de texto. Quando um texto é de

baixa legibilidade, sua leiturabilidade também será necessariamente baixa. Mas

um texto pode não ter boa leiturabilidade e, entretanto, ser altamente legível.

Segundo Sanders e MC Cormick (1993), Pregnância: “é a qualidade de um

caractere ou símbolo que faz com que ele seja visível separadamente do seu

entorno”.

Conforme IIDA (1995:73), as principais características da visão são a

acuidade visual, acomodação, convergência e a percepção de cores. Segundo

Guimarães (2001), sobre a leitura:

105

– adultos leem a uma taxa média de 250 a 300 palavras/min.

– A leitura dá-se durante as pausas de fixação.

– As fixações, com duração média de 1/2s ou 1/4s, representam 94% do tempo

de leitura.

– Às vezes, os olhos regridem ao começo da frase. Estas pausas de regressão

auxiliam a corrigir uma percepção incorreta.

– A leitura normal dá-se entre 30-35 cm. A esta distância, a fóvea (local de

visão mais nítida da retina) subentende um ângulo de 70 graus.

– Apenas quatro letras em um texto caem na região da fóvea, fora da qual a

acuidade decai gradualmente.

19.7 Análise Linguagem Sintética

“(Ícone) seu principal objetivo está em guiar o usuário na busca pela

informação, ajudando na memorização de caminhos e tornando o meio digital

mais amigável” (Melissa Toledo).

Segundo PADOVANI (2004), no que se refere à informação como imagem,

destacam-se os ícones, os quais são vantagens de uso são:

Universalidade: compreensão que supera barreira da língua;

Detecção/ Identificação: percepção, com maior facilidade, que sinais

escritos; Visibilidade: melhor identificados em situações adversas de

iluminação.

Recodificação: não necessitam de recodificação como os enunciados

escritos.

Forma compacta: capacidade de representar informação de forma mais

condensada (ocupa menos espaço que enunciados escritos).

Multidimensionalidade: capacidade de incorporar cores, tratamentos,

tridimensionalidade para auxiliar a compreensão.

106

Para IIDA (2005) e PADOVANI (2004), tais vantagens são conquistadas

somente se os critérios ergonômicos para estes elementos forem

contemplados:

Contornos fortes: figuras com contornos bem definidos, para atrair a

atenção.

Simplicidade: formas simples, despojamento de detalhes, para ser mais


Figuras fechadas: inteiras, completas, obedecendo à teoria da “gestalt”,

são mais facilmente percebidas.

Estabilidade da forma: não deve permitir informações dúbias (ex.:

confusões entre figura e fundo); deve ter separação visual clara entre os

vários elementos de um ícone.

Simetria: a leitura será facilitada se a figura tiver simetria, na medida do

possível; o posicionamento relativo entre os elementos deve ser estável.

Proporção semelhante a um quadrado: evitar figuras compridas ou

largas demais.

Ângulo de visão adequado: utilizar a vista mais fácil para identificar o

objeto.

Familiar e Concreto: usar objeto familiar, convencional, e o mais

concreto possível.

Mesmo contemplando a maioria ou todos os critérios ergonômicos para

símbolos gráficos, alguns ícones não transmitem de maneira eficaz a

informação.

19.8.1 Análise Usabilidade

Estudo sobre usabilidade - Um dos fatores fundamentais para o

desenvolvimento de projetos de interface de sucesso é a usabilidade. Ela nos

da à garantia de que a interface atende plenamente seus usuários. Para o

desenvolvimento de uma interface é indispensável à análise heurística da

interface. Recomenda-se que a análise seja realizada por especialistas em

usabilidade, porém nada impede que desenvolvedores estudem os critérios de

107

avaliação e realizem a análise. (NIELSEN, 2005a; 2005b) Nielsen (2005a) diz

que o melhor custo benefício para a aplicação desta análise é utilizando entre

três a cinco avaliadores. Os princípios heurísticos são os critérios de

usabilidade, que devem ser apresentados para cada avaliador a fim de

padronizar os resultados e facilitar a avaliação. (NIELSEN, 2005a; BASTIEN;

SCAPIN, 1993) O avaliador deve também ter conhecimento sobre o website e

seus usuários, podendo assim avaliar como a interface atinge ou tenta atingir

as expectativas dos usuários.

O resultado desta primeira etapa da análise será uma lista com todos os

problemas de usabilidade encontrados pelos avaliadores. Este resultado deve

ser organizado na forma de uma tabela. Esta tabela contendo os erros

encontrados por todos os avaliadores será entregue para cada avaliador para

que quantifique o nível do problema. Esses dados serão essenciais para que a

interface seja aperfeiçoada nas etapas projetuais seguintes.

Sobre Feeback, o sistema deve sempre informar ao usuário o que está

acontecendo, deixando sempre visível o status do sistema a fim de evitar que o

usuário se sinta perdido. Deve-se evitar qualquer espera do usuário. Nielsen

(2000) diz que o tempo máximo para o usuário sentir que a interface responde

de forma imediata é de 10 segundos e o ideal é 1 segundo apenas.

As dez heurísticas de Jacob Nilsen são essenciais em um projeto de

interface, essas são recomendações que o autor dividiu em grupos após testes

e comprovações realizadas, essas podem ser utilizadas na concepção para

melhorar a usabilidade. As dez heurísticas de Nilsen são:

1) Diálogos simples e naturais - Deve-se apresentar exatamente a

informação que o usuário precisa no momento, nem mais nem menos. A

sequência da interação e o acesso aos objetos e operações devem ser

compatíveis com o modo pelo qual o usuário realiza suas tarefas.

2) Falar a linguagem do usuário - A terminologia deve ser baseada na

linguagem do usuário e não orientada ao sistema. As informações devem ser

organizadas conforme o modelo mental do usuário.

108

3) Minimizar a sobrecarga de memória do usuário - O sistema deve mostrar

os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a

necessidade de lembrar um comando específico.

4) Consistência - Um mesmo comando ou ação deve ter sempre o mesmo

efeito. A mesma operação deve ser apresentada na mesma localização e deve

ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.

5) Feedback - O sistema deve informar continuamente ao usuário sobre o que

ele está fazendo. 10 segundos é o limite para manter a atenção do usuário

focalizada no diálogo.

6) Saídas claramente marcadas - O usuário controla o sistema, ele pode, a

qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar

ao estado anterior.

7) Atalhos - Para usuários experientes executarem as operações mais

rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de

volta em sistemas hipertexto. Atalhos também servem para recuperar

informações que estão numa profundidade na árvore navegacional a partir da

interface principal.

8) Boas mensagens de erro - Linguagem clara e sem códigos. Devem ajudar

o usuário a entender e resolver o problema. Não devem culpar ou intimidar o

usuário.

9) Prevenir erros - Evitar situações de erro. Conhecer as situações que mais

provocam erros e modificar a interface para que estes erros não ocorram.

10) Ajuda e documentação - O ideal é que um software seja tão fácil de usar

(intuitivo) que não necessite de ajuda ou documentação. Se for necessária à

ajuda deve estar facilmente acessível on-line.

19.8.2 Análise Acessibilidade

Nesse estudo também foi abordado à acessibilidade, CARRION (2005), diz

que acessibilidade significa “facilidade de interação” ou aproximação.

A W3C cita em seu site uma lista de incapacidades da acessibilidade na web:

Deficiência visual, Baixa visão, Daltonismo, Deficiência auditiva, Visual e

109

percepção auditiva, Deficiência intelectual, Saúde deficiência mental,

Incapacidade física, Deficiência de fala e Desordens de apreensão.

Abaixo alguns problemas que podem ser excluir esses grupos de pessoas, são

eles:

Páginas Web com tamanhos de fonte absolutos que bloqueiam o

navegador ampliar ou reduzir o texto;

Páginas da Web que, devido ao layout inconsistente, são difíceis de

navegar quando ampliadas, devido à perda do contexto envolvente;

Páginas ou imagens da Web, que tem um contraste pobre, e que não

podem ser facilmente alterados através das folhas de estilo;

Texto apresentado como imagens, o que impede a quebra de linha

quando ampliada;

Cor que é usada como um marcador exclusivo para enfatizar o texto em

um site.

Texto e fundo sem contrastes;

Navegadores que não suportam substituir folhas de estilo.

Falta de legendas ou transcrições de áudio na Web, incluindo webcasts;

Falta de imagens relacionadas ao conteúdo de páginas, dificultando o

entendimento de usuários cuja primeira língua seja a língua de sinais em

vez de uma escrita / linguagem falada;

Falta de linguagem clara e simples;

Requisitos para a entrada de voz em web sites.

Falta de um texto alternativo que pode ser convertido para áudio ou a

falta de legendas para áudio.

Transtorno de déficit de atenção

Falta de atenção com elementos visuais ou de áudio que não podem ser

facilmente desativados;

Falta de organização clara e consistente dos web sites.

Uso da linguagem complexa;

Falta de gráficos em sites;

Falta de organização clara e consistente.

Deficiências de memória

110

Falta de organização clara e consistente das páginas dos sites.

Distração provocada por elementos visuais ou de áudio que não pode

ser desativado facilmente;

Páginas com tamanhos de fonte que não podem ser ampliados.

Tempo limitado de opções de resposta;

Navegadores e ferramentas que não suportam as alternativas de teclado

para comandos de mouse;

Formulários que não podem ser tabuladas através de uma ordem lógica

(uso do TAB).

Web sites que requerem a interação baseada em voz e não têm opções

de entrada, por exemplo, o uso do teclado.

Utilização de frequências visuais ou de áudio que podem desencadear

crises convulsivas.

19.9 Análise Presença Humana

Segundo os Dados de presença humana para o F/Nazca, somos 81,3

milhões de internautas brasileiros (a partir de 12 anos). Já para o

Ibope/Nielsen, somos 78 milhões (a partir de 16 anos - setembro/2011. Em

2008 foram gastos R$ 8,2 bilhões em compras on-line. Em 2009, mesmo com

crise, foram gastos R$ 10,6 bilhões. 2010 fechou com R$ 14,8 bilhões,

atingindo 1/3 de todas as vendas de varejo feitas no Brasil.

Atingimos 10,04 milhões de conexões em junho de 2008: um ano e meio antes

do previsto, já que essa era a projeção para 2010. Quanto ao volume de dados,

o incremento foi de 56 vezes de 2002 até 2007. E a projeção é de um aumento

de 8 vezes até 2012.

111

Segundo o perfil do Consumidor brasileiro pela fonte e-BIT a Renda Familiar vs

Quantidade de Transações em comércio eletrônico (R$ / Mês):

9% - Mais de 8000

8% - Menos de 1000

11% Preferem não dizer

12% Entre 5001 e 8000

22% - Entre 3001 e 5000

28% - Entre 1000 e 3000

Há também dados sobre Faixa Etária vs Quantidade de Transações

1% - Até 17 anos

2% - Mais de 64 anos

11% - Entre 18 e 24 anos




Em relação à escolaridade podemos concluir que, Escolaridade vs Quantidade de Transações:

3% - Ensino Fundamental

20% - Pós-Graduação

22% - Ensino médio

23% - Ensino superior incompleto

32% - Ensino superior completo

Esses dados se tornam muito importantes, visto a dificuldade de tangenciar um

público alvo específico, sendo o mercado do projeto a nível nacional.

112

20 SÍNTESE

De acordo com os dados levantados e analisados, a interface a ser

desenvolvida deverá apresentar as seguintes características:

Requisitos de mercado

O prazo de entrega dos produtos nem sempre é cumprido, logo o

usuário deverá ter uma visão detalhada se possível do status da entrega

para que ele que ele tenha maior controle sobre a compra.

A falta de hábito do cliente em participar em negociações eletrônicas é

um fator de declivo, a interface deverá ser didática o suficiente para que

a pessoa que nunca teve contato possa saber o passo-a-passo.

A desconfiança do comprador em relação ao processo poderá ocasionar

desistências,

A argumentação do vendedor é inexistente em ambiente digital, logo os

produtos devem ser bem descritos, utilizando recursos gráficos

adequados para que sejam mais bem compreendidos.

Requisitos tecnológicos

O wireframe é uma ferramenta essencial na criação de interfaces e deve

ser utilizado, já que facilita o processo de aprovação do projeto porque

começam a mostrar a estrutura do que está sendo elaborado.

A resolução de tela mais usada atualmente segundo a W3C é

1024x768pixels e deverá ser considerada no grid de construção da

interface.

Criptografia, assinatura digital e certificado digital devem ser bem

traduzidos visualmente e textualmente na interface para que a pessoa

saiba de suas importâncias, contanto que o usuário nunca teve contato

com esse tipo de informação.

113

Requisitos do universo imagético

A interface deverá traduzir visualmente o conceito do grupo imagético

bem estar – comportamental para que a pessoa possa ter sensações

positivas ao navegar no ambiente. Por ser um ambiente digital, ele terá

muitas limitações sensoriais e para isso a interface necessita de um

acolhimento visual mais especifico.

A interface deverá traduzir visualmente o conceito do grupo imagético

Alimento – Temático, no ambiente digital os produtos disponíveis na

interface devem ser atrativo o suficiente porquanto imagens que não

despertam a atenção do consumidor ou que não mostra detalhes

suficientes dos produtos poderão ser fatores de desistência no processo

de compra.

Requisitos cromáticos

A interface deverá garantir um contraste satisfatório, contraste claro-

escuro é o mais recomendado para textos descritivo visto a facilidade de

leitura em interfaces uma vez que o contraste depende também de

fatores que não estão ao alcance do designer gráfico, como a resolução,

brilho, e outros ajustes que só o usuário final poderá definir. Portanto é

recomendável optar por contrastes mais altos, que garantam melhor

conforto visual independente do equipamento usado.

Os outros tipos de contrastes podem ser utilizados como recurso gráfico

desde que não prejudique a harmonia cromática os fatores de

usabilidade bem como da ergonomia visual.

Os aspectos psicodinâmicos das cores podem ser explorados para

trazer conforto e liberdade ao usuário partindo do pressuposto de que

ele é que está interessado em determinado produto do qual está

procurando, e sendo assim necessita um ambiente acolhedor, mesmo

que este seja digital.

114

Requisitos tipográficos

Diferentes da mídia impressa às fontes mais recomendadas para a tela

são as sem serifa devido ao tamanho do pixel, menor unidade que

compõe uma imagem digital, dificultar a visualização de serifas.

O tamanho de texto adequado ao público e ao espaço disponível para o

conteúdo deve ser entre 10-12 pontos para descrição de produtos

A interface deverá oferecer controle ao usuário independente das

recomendações de tamanho do texto é importante permitir ao usuário a

adaptação conforme suas necessidades.

Manter poucas combinações de fontes, se possível da mesma família

tipográfica, e manter a mesma ordem na sua aplicação ajuda a reforçar

a hierarquia e a consistência da interface.

Limitar comprimento da linha - Assim como na mídia impressa estudos

em ambiente digital também indicam que linhas de texto muito estreitas

ou muito largas dificultam a leitura. Segundo pesquisadores linhas com

55 caracteres de comprimento são mais fáceis de ler do que as com

100cpl

Requisitos de ergonomia visual

A interface que tem a clareza em identificar cada tipo em conjunto,

palavra ou frase facilitara a legibilidade.

O texto deve possibilitar fácil acesso à informação contida nas palavras

com a facilidade e fluência de um conjunto de tipos, palavra ou frase

pré-determinados, isso irá garantir uma maior leiturabilidade e que

dependem exclusivamente do texto.

Deverá ter a qualidade que faz com que os símbolos sejam visíveis

separadamente do seu entorno, essa característica é denominada

Pregnância.

A leitura se da entre 30-35 cm dependendo da idade. Para isso o

tamanho da fonte deverá ser compatível com esta distância.

115

Requisitos pictográficos

Devem ter contornos fortes: figuras com contornos bem definidos, para

atrair a atenção.

Devem ser formas simples, despojamento de detalhes, para ser mais


Preferencialmente projetados em figuras fechadas: inteiras, completas,

obedecendo à teoria da “gestalt”, onde serão mais facilmente

percebidas.

Não deve permitir informações dúbias (ex.: confusões entre figura e

fundo); deve ter separação visual clara entre os vários elementos de um

ícone.

A leitura será facilitada se a figura tiver simetria, na medida do possível;

o posicionamento relativo entre os elementos deve ser estável.

Proporção semelhante a um quadrado: evitar figuras compridas ou

largas demais.

Utilizar a vista mais fácil para identificar o objeto.

Usar objeto familiar, convencional, e o mais concreto possível.

Requisitos de usabilidade

Segundo as dez heurísticas de Nilsen, interface deverá ter as seguintes

características para que se possa atingir um maior grau de usabilidade:

1) Diálogos simples e naturais

2) Falar a linguagem do usuário - A terminologia deve ser baseada na

linguagem do usuário e não orientada ao sistema. As informações

devem ser organizadas conforme o modelo mental do usuário.

3) Minimizar a sobrecarga de memória do usuário - O sistema deve mostrar

os elementos de diálogo e permitir que o usuário faça suas escolhas,

sem a necessidade de lembrar um comando específico.

4) Consistência - Um mesmo comando ou ação deve ter sempre o mesmo

efeito. A mesma operação deve ser apresentada na mesma localização

e deve ser formatada/apresentada da mesma maneira para facilitar o

reconhecimento.

116

5) Feedback - O sistema deve informar continuamente ao usuário sobre o

que ele está fazendo. 10 segundos é o limite para manter a atenção do

usuário focalizada no diálogo.

6) Saídas claramente marcadas - O usuário controla o sistema, ele pode, a

qualquer momento, abortar uma tarefa, ou desfazer uma operação e

retornar ao estado anterior.

7) Atalhos - Para usuários experientes executarem as operações mais

rapidamente. Abreviações, teclas de função, duplo clique no mouse,

função de volta em sistemas hipertexto. Atalhos também servem para

recuperar informações que estão numa profundidade na árvore

navegacional a partir da interface principal.

8) Boas mensagens de erro - Linguagem clara e sem códigos. Devem

ajudar o usuário a entender e resolver o problema. Não devem culpar ou

intimidar o usuário.

9) Prevenir erros - Evitar situações de erro. Conhecer as situações que

mais provocam erros e modificar a interface para que estes erros não

ocorram.

10) Ajuda e documentação - O ideal é que um software seja tão fácil de usar

(intuitivo) que não necessite de ajuda ou documentação. Se for

necessária à ajuda deve estar facilmente acessível on-line.

Requisitos de acessibilidade

A interface deverá na medida do possível evitar todas as restrições na

lista de incapacidades da acessibilidade na web: Deficiência visual,

Baixa visão, Daltonismo, Deficiência auditiva, Visual e percepção

auditiva, Deficiência intelectual, Saúde deficiência mental, Incapacidade

física, Deficiência de fala e Desordens de apreensão. Todas as questões

projetuais que podem prejudicar esses grupos estão citadas no

levantamento de dados e devem ser consideradas.

117

Requisitos baseado nos dados de presença humana

A interface deverá atender todo o espectro da faixa etária de

consumidores em comércio eletrônico, que segundo pesquisas atuais é

de 1% - Até 17 anos; 2% - Mais de 64 anos; 11% - Entre 18 e 24 anos;

16% - Entre 50 e 64 anos; 32% - Entre 25 e 34 anos; 38% - Entre 35 e

49 anos. Bem como seu grau de escolaridade que é de 3% - Ensino

Fundamental. 20% - Pós-Graduação; 22% - Ensino médio; 23% - Ensino

superior; incompleto; 32% - Ensino superior completo.

118

20 REFERÊNCIAS BIBLIOGRÁFICAS

AMBROSE, Gavin, e Paul. HARRIS. Cor. Porto Alegre: Bookman, 2005.

AMBROSE, Gavin. Design básico Cor / Gavin Ambrose, Paul Harris. Porto

Alegre: Bookman, 2009.

DIX, Alan, Janet FINLAY, Gregory D. ABOWD, e Russel. BEALE. Human-Computer Interaction. New York: Prentice Hall, 1998.

BASTIEN, J. M. C.; SCAPIN, D. L. Ergonomic criteria for the evaluation of

human-computer interfaces. Rocquencourt : Institut National de Recherche

en Informatique et en Automatique, 1993. (Relatório de Pesquisa, 156).

BASTIEN, J. M. C.; SCAPIN, D. L. Evaluating a user interface with

ergonomic criteria. International Journal of Human-Computer Interaction, p.

105-121, 1995.

BARBAGALO, Érica Brandini. Contratos eletrônicos- algumas

considerações. São Paulo: Saraiva, 2005.

BÜRDEK, B. E. História, Teoria e Prática do Design de Produtos. Tradução Freddy Van Camp. São Paulo: Edgard Blücher, 2006.

CHURCH, Gregory, GLENNEN, Sharon.The handbook of assistive

technology. San Diego: Singular Publishing Group, 1992.

COSTA, J. F. A ética e o espelho da cultura. Rio de Janeiro, Rocco 1995:

FAGNER, Luiz. Ergodesign e Arquitetura da Informação: trabalhando com o usuário. Rio de Janeiro: Editora Quartet, 1959.

119

FARINA, Modesto. Psicodinâmica das Cores em Comunicação. 4ª ed. SP:

Edgard Blücher, 1990.

GERMANI, R.; FABRIS, S. Fundamentos del Proyecto Gráfico. Barcelona:

Don Bosco, 1973

GUIMARÃES, Luciano. A cor como informação: a construção biofísica, lingüística e cultural da simbologia das cores. 3. São Paulo: Annablume, 2004.

IIDA, Itiro. Ergonomia: Projeto e produção. 2ª Edição. Edgar Blücher, 2005

ISO 9241. Ergonomic requiriments for office work with visual display

terminals (VDTs). Part 10: Dialogue principles

KÜPPERS, Harald – Color: Origem, Metodologia, Sistematización,

Aplicación.Caracas: Editorial Lectura, 1973

LUNA, Sergio V. de. Planejamento de pesquisa: uma introdução. São

Paulo:EDUC, 1999

Memória, Felipe. Design para a Internet: Projetando a Experiência Perfeita. Rio de Janeiro: Campus, 2005.

MORATO, Elisson Ferreira. Presença da Filosofia Kantiana na Teoria

Semiótica de Charles Sanders Peirce. Disponível em: www.ichs.ufop.br/

memorial/trab/l8_4.doc. Acesso em: 23 de março 2011.

MUNARI, Bruno. Das coisas nascem coisas. São Paulo: Martins Fontes,

1998.

NIELSEN, Jakob; TAHIR, Marie. Homepage: 50 sites desconstruídos. Editora Campus, Rio de Janeiro: 1957.

http://www.ichs.ufop.br/

120

NIELSEN, Jakob. Projetando Websites. Editora Campus, Rio de Janeiro: 2000.

NIELSEN, Jacob. Ten Usability Heuristics. 2001. Disponível em: < http://www.useit.com/papers/heuristic/heuristic_list.html>

NIEMEYER, Lucy. Tipografia: Uma apresentação. – Rio de Janeiro: 2AB,

2006 (4ª Ed.).

NORMAN, Donald A. O design do dia-a-dia. Rio de Janeiro, Rocco, 2006.

OLIVEIRA, Dennison de. “Sociologia e Política.” Custo Brasil, 2000: 21.

PADOVANI, S. Apostila de Acompanhamento ao Módulo da Disciplina

Ergonomia Informacional – Especialização em Ergonomia. Manaus:

CPG/FT/UFAM, 2004.

PEDROSA, Israel. Da cor a cor inexistente. 10. Ed. Rio de Janeiro :Senac

Nacional, 2009. 256 p. II.

PHILLIPS, Peter L. Briefing: a gestão do projeto de design. São Paulo: Blucher, 2009.

REECE, Jennifer, Yvonne ROGERS, e Helen. SHARP. Design de interação: Além da interação homem-computador. Porto Alegre: Bookman, 2005.

ROCHA, Heloísa Vieira; BARNAUSKAS, Maria Cecília Calani. Design e

avaliação de interfaces humano-computador. 2000. Disponível em: <

http://pan.nied.unicamp.br/download_livro/livro-design-aval.zip>

Thumlert, Kurt. “ecommerce-internet.” E-Commerce Guide – Abandoned Shopping Carts: 27 de Junho de 2001.

http://pan.nied.unicamp.br/download_livro/livro-design-aval.zip

121

YBIS, Walter. Ergonomia e usabilidade: conhecimentos, métodos e aplicações. São Paulo: Novatec, 2007.

W3C. Web Content Accessibility Guidelines 1.0 – 1999.

<http://www.w3.org/TR/WCAG10/> Acesso em 23 de março. 2011.

desenvolvimento de interface para site de e-commerce da rede de supermercados ‘rede smart’

Documents