DESENVOLVIMENTO DE INTERFACE PARA SITE DE E-COMMERCE DA REDE DE SUPERMERCADOS ‘REDE SMART’ by Design Unifoa

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 0

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 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 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 2

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. 3

• 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. 4

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. 5

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.

5 CRONOGRAMA Para o planejamento e controle do desenvolvimento do projeto, abaixo estão definidas as atividades a serem executadas. ETAPA FASE 1 COMPREENSÃO E DEFINIÇÃO DO PROBLEMA

FASE 2 - COLETA DE INFORMAÇÕES

FASE 3 - ANALISE DAS INFORMAÇÕES COLETADAS

FASE 4 DESENVOLVIMENTO DE ALTERNATIVAS

FASE 5 - AVALIAÇÃO DE ALTERNATIVAS

FASE 6 - TESTES E EXPERIMENTAÇÃO

JUL 2011

AGO

SET

OUT

NOV

DEZ

JAN 2012

FEV

MAR

ABR

MAI

JUN

Tabela 1 - Cronograma

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. 8

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.

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: 10

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. 11

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

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 13

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 14

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 15

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 16

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

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

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

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 20

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

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

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. 23

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 24

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. Fezse 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 25

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

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.

Interface

Malha Diagramacional

Wireframe Estrutural

Wireframe Arquitetural

Tabela 5 - Similar #4 â&#x20AC;&#x201C; Amazon

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 subcategorias, 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).

Figura 11 - Similar #4 - Organograma navegacional

9.4.7 Linguagem sintĂŠtica AusĂŞncia

quase

total

Ăcones

pictogramas,

interface

predominantemente com hiperlinks.

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.

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

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:

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

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

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

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

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

LEVANTAMENTO

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

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.

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.

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)

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)

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

denominam-se

luzes

monocromáticas.

Figura 23 - Prima - cor como luz

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

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 45

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.

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

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 48

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.

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

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.

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. 52

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, 53

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.

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

complementares

divididas:

contraste

dos

matizes

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

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.

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.

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

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 59

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. (æ, ß, Œ, β)

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.).

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 62

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.

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

corpo

utilizado.

Assim, pode ser definido

simplesmente pelo número de pontos do tipo em uso. Por exemplo, em um tipo

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.

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 66

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.

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 ﬁnas, planas, com acabamento agudo e curvas, embora a junção com a haste normalmente seja mais suave que nas garaldes. 67

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. 68

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

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.

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.

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.

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

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

letras

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 74

leiturabilidade

depende

espacejamento

entre

caracteres,

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

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.

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:

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 78

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.

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.

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. 81

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

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.

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. 84

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).

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.

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. 87

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; 88



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



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.

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

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 Consumidores 1.1

2.0

2.6

3.4

4.8

7.0

9.5

Crescimento.% -

81% 30% 31% 41% 46% 36% 39% 33% 30%

2011*

13.2 17,6 23,00 30,0 30%

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

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

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

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

menus

gerais

(mais

abrangentes

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.

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

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

projeto.

palavras-chave

definiram

universo

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. 97

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. 98

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. 99

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.

100

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 101

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.

102

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.

103

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:

104

– 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. 105

Para IIDA (2005) e PADOVANI (2004), tais vantagens são conquistadas somente

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 106

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.

107

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

108

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 109



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.

110

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.

111

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.

112

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 claroescuro é 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.

113

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.

114

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. 115

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.

116

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.

117

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. HumanComputer 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. 118

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.

119

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.

120

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.

121