desenvolvimento de interface para site de e-commerce da rede de supermercados ‘rede smart’
DESCRIPTION
TCC apresentado ao Curso de DESIGN do UniFOA como requisito à Obtenção do título de bacharel em Design Gráfico.TRANSCRIPT
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 6 - Similar #2 - pictogramas e ícones ............................................................ 24
Figura 7 - Similar #3 – Cores .................................................................................... 25
Figura 8 - Similar #3 - Organograma navegacional .................................................. 26
Figura 9 - Similar #3 - pictogramas e ícones ............................................................ 27
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 14 - Similar #5 – Cores .................................................................................. 33
Figura 15 - Similar #5 - Organograma navegacional ................................................ 34
Figura 16 - Similar #5 - pictogramas e ícones .......................................................... 34
Figura 17 - Similar #6 – Cores .................................................................................. 36
Figura 18 - Similar #6 - Organograma navegacional ................................................ 37
Figura 19 - Similar #6 - pictogramas e ícones .......................................................... 38
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
9.2.2 Dimensões (largura e altura em pixels)
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.
Interface Malha Diagramacional
Wireframe Estrutural Wireframe Arquitetural
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.
9.2.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 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
Figura 6 - Similar #2 - pictogramas e ícones
9.3 WALMART
9.3.1 Dados Gerais
URL: www.walmart.com.br; origem: Nacional.
9.3.2 Dimensões (largura e altura em pixels)
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.
Interface Malha Diagramacional
Wireframe Estrutural Wireframe Arquitetural
25
Tabela 4 - Similar #3 – Walmart
9.3.4 Tipografia
Foram identificados dois 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.
9.3.5 Universo cromático
A interface utilizou uma paleta de cores compatível com a marca do
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
9.3.7 Linguagem sintética
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.
Figura 9 - Similar #3 - pictogramas e ícones
9.4 AMAZON
9.4.1 Dados gerais
URL: http://www.amazon.com/; Origem: Internacional.
9.4.2 Dimensões (largura e altura em pixels)
1200* x 6000 (Resolução acomoda-se de acordo com a resolução de
tela do usuário / * Menor resolução de largura)
9.4.3 Diagramas e grids
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.
28
Interface Malha Diagramacional
Wireframe Estrutural Wireframe Arquitetural
Tabela 5 - Similar #4 – Amazon
29
9.4.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.
9.4.5 Universo Cromático
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.
Figura 10 - Similar #4 – Cores
9.4.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
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
Figura 11 - Similar #4 - Organograma navegacional
9.4.7 Linguagem sintética
Ausência quase total de ícones e pictogramas, interface
predominantemente com hiperlinks.
31
Figura 12 - Similar #4 - pictogramas e ícones
9.5 APPLE STORE
9.5.1 Dados gerais
URL: store.apple.com/br; Origem: Nacional.
9.5.2 Dimensões (largura e altura em pixels)
992 x ~6000
9.5.3 Diagramas e grids
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
Interface Malha Diagramacional
Wireframe Estrutural Wireframe Arquitetural
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.
9.5.5 Universo cromático
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.
Figura 14 - Similar #5 – Cores
9.5.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
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
Figura 15 - Similar #5 - Organograma navegacional
9.5.7 Linguagem sintética
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.
Figura 16 - Similar #5 - pictogramas e ícones
35
9.6 E-BAY
9.6.1 Dados gerais
URL: http://www.ebay.com/; Origem: Internacional
9.6.2 Dimensões (largura e altura em pixels)
986x1440
9.6.3 Diagramas e grids
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.
Interface Malha Diagramacional
Wireframe Estrutural Wireframe Arquitetural
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.
9.6.5 Universo cromático
A interface utilizou uma paleta de cores compatível com a marca do
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.
Figura 17 - Similar #6 – Cores
37
9.6.6 Fluxo de navegação
Foram utilizados nomes autoexplicativos, ou seja, com o significado
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.
Figura 18 - Similar #6 - Organograma navegacional
38
9.6.7 Linguagem sintética
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.
Figura 19 - Similar #6 - pictogramas e ícones
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
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
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
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.
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
16% - Entre 50 e 64 anos
32% - Entre 25 e 34 anos
38% - Entre 35 e 49 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
facilmente captadas.
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.
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.
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.