PARA ALÉM DA USABILIDADE: CONTRIBUIÇÕES DO DESIGN GRÁFICO NO PROJETO DE WEBSITES

Transcrição

1 UNIJUÍ UNIVERSIDADE REGIONAL DO NOROESTE DO ESTADO DO RIO GRANDE DO SUL DCEEng - DEPARTAMENTO DE CIÊNCIAS EXATAS E ENGENHARIAS CURSO DE DESIGN HAB. DESIGN GRÁFICO PARA ALÉM DA USABILIDADE: CONTRIBUIÇÕES DO DESIGN GRÁFICO NO PROJETO DE WEBSITES MARIANA DIEMER IJUÍ (RS), 2012

2 MARIANA DIEMER PARA ALÉM DA USABILIDADE: CONTRIBUIÇÕES DO DESIGN GRÁFICO NO PROJETO DE WEBSITES Monografia apresentada à Universidade Regional do Noroeste do Estado do RS UNIJUÍ como requisito parcial à obtenção do título de bacharel em Design Gráfico. Orientador: Fabiane Volkmer Grossmann IJUÍ (RS), 2012

3 DEDICATÓRIA A meus pais Paulo e Carla e minha irmã Francielle pelo apoio, incentivo e cooperação ao longo desses anos, tornando possível a concretização deste trabalho.

4 AGRADECIMENTOS Aos meus pais Paulo Luis Diemer e Carla Marisa Pedrali Diemer, pelo amor incondicional e pela paciência. Por terem feito o possível e impossível para me oferecer a oportunidade de estudar. A minha irmã Francielle Diemer por ter estado ao meu lado nesses cinco anos de faculdade. Por ter muitas vezes deixado suas coisas de lado para ajudar nas minhas. Obrigada pelo apoio, incentivo e compreensão. Aos meus amigos por compreenderem a importância desta conquista e aceitarem minha ausência quando necessário. Aos amigos conquistados ao longo dessa caminhada, em especial Tamires, Camila, Aline e Henrique pela amizade e pelo apoio. A minha orientadora Fabiane Volkmer Grossmann pela paciência, conhecimento compartilhado, empenho e amizade. Aos familiares que torceram e acreditaram na conclusão deste curso. A todos aqueles que não foram citados, mas que de alguma forma contribuíram direta ou indiretamente na realização deste trabalho, muito obrigada.

5 RESUMO Com o grande crescimento do mercado de websites, muitas empresas passaram a buscar na internet uma forma de divulgar seus produtos e atender melhor seus clientes devido à agilidade e praticidade que ela proporciona. O presente trabalho de conclusão de curso tem por objetivo mostrar as contribuições do Design Gráfico em interfaces gráficas, através de fundamentos teóricos que vão além da usabilidade (tipografia, cores, diagramação), para o desempenho interativo da interface gráfica a ser estudada e analisada. O estudo de caso trata-se de um redesenho de um website de uma empresa da construção civil localizada em Goiânia-GO. A metodologia utilizada para este projeto de monografia foi baseada na metodologia de FUENTES (2006).Aplicou-se um questionário a quinze pessoas visando saber o grau de experiência dos usuários com a navegação/uso da internet e o grau de satisfação em relação à interface gráfica do website. De maneira geral, a interface atual do website agradou os usuários observados, porém foram constatados alguns problemas com o excesso de contraste das cores e o não encontro de informações, fatores esses que foram corrigidos no redesenho do layout. Palavras-chave: Design de interface, Ergonomia, Interação, Usabilidade.

6 ABSTRACT With the big growth of the websites market, many companies have started to look on the internet for a way to advertise their products and better serve their customers due to it speed and convenience. This paper aims to show the contributions of Graphic Design in graphical interfaces, through theorical foundations that go beyond usability (typography, color, layout), for the performance of interactive graphical interface to be studied and analyzed. The case study it is a redesign of a website of a geotechnical engineering company in Goiânia-GO. The methodology used in this paper was based on FUENTES (2006). It was applied a questionnaire in which it was aimed to know the users level of experience with the internet and the satisfaction regarding the website s graphical interface. In general, the website s users liked the current interface, however it was found some problems like the excessive contrast of colors and not finding some information, what have been solved in the redesign of the layout. Keywords: Interface Design; Ergonomy; Interaction; Usability.

7 LISTA DE ILUSTRAÇÕES Figura 1: Metas que são fundamentais para o design de interação...17 Figura 2: Convite acionado automaticamente pelo sistema (Mozzila)...27 Figura 3: Convite acionado explicitamente pelo usuário...27 Figura 4: Convite acionado pela movimentação do mouse...27 Figura 5: Estrutura de menu...29 Figura 6: Diálogo passo a passo...31 Figura 7: Janela do programa Autocad Figura 8: Janelas que competem pela atenção do usuário...33 Figura 9: Exemplo de caixa de diálogo modal...33 Figura 10: Exemplo de caixa de diálogo não modal...34 Figura 11: Exemplo de formulário com campos obrigatórios...35 Figura 12: Opção default recaindo sobre a anulação de uma ação destrutiva...36 Figura 13: Exemplo de painel pull-down (rolagem)...39 Figura 14: Exemplo de radio Button...40 Figura 15: Grupos seletores check Box...40 Figura 16: Rótulo posicionado ao lado esquerdo do campo...41 Figura 17: Exemplo de fonte com serifas: Times New Roman...52 Figura 18: Nível de Legibilidade de diferentes combinações de cores...53 Figura 19: Escala Tipográfica...54 Figura 20: Anatomia da Fonte...55 Figura 21: Fonte Old English Text MT - Letras Negras..56 Figura 22: Fonte Centaur - Estilo Antigo...56 Figura 23: Fonte Baskerville Transicional...57 Figura 24: Fonte Bodoni BT Estilo Moderno...57 Figura 25: Fonte Candida BT Serifas quadradas...57 Figura 26: Fonte Futura Sem Serifas...57 Figura 27: Fontes Script e cursiva...58 Figura 28: Exemplos de fontes decorativas...58 Figura 29: Exemplo de Ícone Subjetivo...66 Figura 30: Exemplo de ícone objetivo...67 Figura 31: FUENTES...69 Figura 32: DIEMER (2012)...70 Figura 33: Página inicial do website da empresa Geosul...74 Figura 34: Página Notícias do website da empresa Geosul...75 Figura 35: Página Empresa do website da Geosul...75 Figura 36: Página Serviços do website da empresa Geosul...76 Figura 37: Página Obras do website da empresa Geosul...76 Figura 38: Página Contato do website da empresa Geosul...77 Figura 39: Gráfico Questão Figura 40: Gráfico Questão Figura 41: Gráfico Questão Figura 42: Gráfico Questão Figura 43: Gráfico Questão Figura 44: Gráfico Questão Figura 45: Gráfico Questão Figura 46: Gráfico Questão

8 Figura 47: Gráfico Questão Figura 48: Gráfico Questão Figura 49: Gráfico Questão Figura 50: Rough Figura 51: Rough Figura 52: Rough Figura 53: Rough Figura 54: Rough Figura 55: Layout Final Geosul Geotecnia e Fundações...89 Figura 56: Página de Notícias...90 Figura 57: Página Empresa...91 Figura 58: Página Serviços...91 Figura 59: Página Obras...92 Figura 60: Página Clientes...93 Figura 61: Página de Contato...94 Figura 62: Alerta de preenchimento de campos o...94 Figura 63: Mensagem enviada com sucesso...95 Figura 64: Menu Secundário

9 SUMÁRIO INTRODUÇÃO DESENVOLVIMENTO DE WEBSITES Usabilidade Modelo de Usabilidade Modelos de Interação Design de Interação Critérios Ergonômicos Condução Carga de Trabalho O Controle explícito A Adaptabilidade Gestão de Erros A Homogeneidade/Coerência Significado dos Códigos e Denominações A Compatibilidade RECOMENDAÇÕES ERGONÔMICAS Comportamentos de uma interface Comportamentos elementares Comportamentos Estruturados Diálogos concorrentes Diálogos sequenciais Objetos de Interação Painel de Controle Janelas Caixas de Diálogo Formulários Caixas de mensagens Objetos para manipulação Cursores dos dispositivos de entrada...36

10 Objetos para seleção Estrutura de Menus Barra de Menu Painel de Menu Barra de Ferramentas Lista de Seleção Grupos de seletores exclusivos (radio Button) Grupos de seletores não-exclusivos (check Box) Grupos de botões de comando Objetos para edição Campos de dados Linha e área de comando Objetos para apresentação Apresentações estruturadas Apresentação Simples Atributos de Objetos Atributos de significado Nomes Ícones Códigos: Alfanuméricos Atributos de forma Cores Fontes Bordas Arranjo (layout) Fundo DESIGN DE INTERFACES Tipografia Anatomia Tipográfica Classificação e Identificação Cores Conteúdo...62

11 Planos de Fundo Ícones PROJETO GRÁFICO Metodologia Identificação das Necessidades Definição do projeto: Problema Problematização do website Pesquisa: Coleta e análise de dados Coleta de dados Análise de Dados Desenvolvimento do Ante Projeto: Geração de Idéias Geração de Ideias Seleção de Idéias Implementação em software Finalização...89 CONSIDERAÇÕES FINAIS...97 REFERÊNCIAS BIBLIOGRÁFICAS...98 ANEXOS...100

12 INTRODUÇÃO Este estudo foi elaborado com o intuito de mostrar as contribuições do design gráfico em projetos de websites, através de uma revisão bibliográfica acerca dos temas design de interface, composição visual, ergonomia, interação e por fim usabilidade, que é tomada por nós, designers, como ponto de partida em um projeto, pois serve para facilitar a navegação do usuário, já que se preocupa com questões como legibilidade, feedback, experiência do usuário e outros. A usabilidade sozinha, porém, não é suficiente para agradar os usuários nos dias atuais, pois elementos que garantem um bom aspecto visual também devem ser levados em conta no momento da elaboração de um projeto. Sendo assim, a elaboração de itens como tipografia, cores, menu, planos de fundo, conteúdo e ícones foram abordados neste trabalho. É fundamental o estudo destes itens em um projeto, pois, se mal aplicados podem interferir na usabilidade do website e, interferindo na usabilidade farão com que o mesmo gere insatisfação nos usuários. Para que isso não ocorra há alguns critérios e recomendações ergonômicas que devem ser seguidos para que o projeto seja funcional e atenda as necessidades dos mesmos deixando-os satisfeitos. A usabilidade foi o primeiro item abordado neste trabalho, pois como escrito anteriormente, ela é tomada como ponto de partida em projetos de interfaces gráficas. Ainda no primeiro capítulo foram abordados os modelos de usabilidade, modelos de interação e fundamentos sobre design de interação como os critérios ergonômicos. Em um segundo momento, foram citadas as recomendações ergonômicas, que representam um conhecimento mais detalhado em relação aos critérios ergonômicos. No terceiro capítulo foram explicados alguns itens relacionados ao aspecto visual dos websites. O design de interface foi o primeiro elemento abordado, no qual foram estudados itens como cores, tipografia, conteúdo, plano de fundo e ícones. No quarto capítulo foi desenvolvido o projeto gráfico. Na etapa de levantamento de dados, realizou-se uma pesquisa exploratória com o intuito de

13 12 saber o grau de experiência dos usuários com a navegação/uso da internet e o grau de satisfação deles com o layout do atual website da empresa Geosul Geotecnia e Fundações, localizada em Goiânia GO. Considerando os resultados da pesquisa, gerou-se algumas alternativas de layout, uma delas foi aprovada pelos proprietários da Geosul, sendo executada ao final deste trabalho.

14 1. DESENVOLVIMENTO DE WEBSITES Com o crescimento constante do mercado de websites, muitas empresas passaram a buscar na internet benefícios como agilidade e praticidade para divulgar seus produtos e atender melhor os seus clientes. Comparada a outros meios de comunicação como o rádio, TV, revistas, a internet é um meio extremamente barato de divulgação, além de ser a mais usada no mundo inteiro devido à sua facilidade e praticidade, já que as portas ficam abertas vinte e quatro horas por dia, sete dias por semana, e o melhor, o cliente faz a compra sem sair de casa. Os websites têm uma função importante para as empresas: são a imagem institucional do negócio no meio virtual, que é enviada para o Brasil e o mundo. Através deles os clientes conhecem um pouco da história das empresas, objetivos, além dos produtos e serviços que são prestados, porém, para que cada um deles mostre todas essas informações, eles têm que ser desenvolvidos de forma funcional, atendendo às expectativas dos internautas 1.Os elementos devem ficar dispostos de maneira harmoniosa dentro das páginas, além disso, o website deve ser claro e objetivo, não contendo informações em excesso e irrelevantes, e palavras de difícil entendimento. Sendo assim, o projetista deverá conhecer quem está por trás da tela do computador, para que o projeto seja desenvolvido para aquele público em específico. Segundo Nielsen (2000), se o usuário 2 entrar em uma determinada página e não souber onde está, também não terá capacidade de interpretar o link que acabou de seguir. Quando se trata de websites, temos várias áreas que estão há anos desenvolvendo pesquisas para que esse tipo de projeto seja feito da melhor maneira possível. A usabilidade é um dos objetos de estudo dessas áreas. As principais contribuições vieram dos Engenheiros da Computação, produção, ergonomistas e etc. 1 Utilizador da Internet. 2 Entendido aqui no sentido de internauta, e por se tratar de uma monografia de design onde se considera a usabilidade, será sempre chamado de usuário.

15 14 Os pesquisadores que começaram a falar em usabilidade tinham como base os ensinamentos e pesquisas de Jakob Nielsen, que preocupava-se somente com isso. Nós, Designers Gráficos, sabemos que devemos nos preocupar com questões que vão além da usabilidade, que é tomar ela como ponto de partida e fazer com que de alguma maneira ela seja parte de um elemento da comunicação visual da empresa. As informações têm que estar postas de uma maneira que o website seja uma unidade gráfica, ou seja, que tenha preocupação com a usabilidade e funcionalidade associada à parte estética do projeto. Sendo assim, para o desenvolvimento de uma boa interface, alguns elementos ligados ao design devem ser considerados como: cores, plano de fundo, tipografia e a disposição dos elementos dentro da página. Lembrando sempre que um website deve primeiramente atender às necessidades dos usuários, fazendo-os chegar até a informação desejada sem muito esforço, dando autonomia a eles, fazendo-os sentir que possuem o controle sobre a navegação, ou seja, a aprendizagem tem que ser quase imediata para que o website não sofra rejeição. Além disso, ele deve ser reversível, pois, se por algum motivo o usuário cometer algum erro, o sistema deve solucionar o problema, ou então sugerir algumas soluções possíveis e, nunca emitir mensagens que informem que o erro foi dele. Inicia-se falando sobre usabilidade justamente por ser uma área fundamental no desenvolvimento de websites e, por tomarmos ela como ponto de partida em um projeto gráfico para a web. 1.1 Usabilidade Hoje em dia, as pessoas esperam muito dos websites e cada vez menos aceitam um projeto ruim. Um projeto mal desenvolvido pode trazer alguns problemas para as empresas. Os equívocos causados pelo mau planejamento resultam em clientes insatisfeitos e consequentemente em perda de negócios. É para isso que serve a usabilidade, prevenir erros e oferecer suporte aos objetivos de negócios das empresas na web e, ajudá-las a ganhar mais dinheiro.

16 15 A usabilidade é um atributo de qualidade que está relacionado à facilidade de uso de algo, neste caso, uma interface de website, a fim de realizar uma tarefa específica e de interesse do usuário. Ou ainda, a rapidez com que os usuários podem aprender a usar alguma coisa, ou seja, ela garante que os produtos são fáceis de usar, eficientes e agradáveis, do ponto de vista de quem está utilizando. Implica melhorar a interação estabelecida entre as pessoas e os produtos interativos (web 3, software...), permitindo que elas realizem suas atividades em casa, no trabalho, ou em qualquer outro lugar. Para saber se um website possui uma boa usabilidade, são realizadas algumas pesquisas de uso de uma determinada página, dispositivo ou objeto. Os usuários são submetidos a alguns testes onde interagem com uma interface ou dispositivo, a fim de averiguar possíveis dúvidas, dificuldades ou insatisfação que eles encontraram ao interagir com os aparelhos para posteriormente realizar melhorias nos aspectos que deixaram a desejar. Segundo YAZBEK (2012), a preocupação com a usabilidade teve sua crescente ao final dos anos 90, com a difusão do auto serviço e o aumento da utilização da internet. A internet nessa época passou a estar diretamente relacionada ao resultado das empresas, que por sua vez, começaram a oferecer seus serviços online. A exemplo dos bancos, onde os clientes fazem suas consultas, pagamentos, transferências, etc., processos que dão maior comodidade para os clientes e reduzem o custo destes. De acordo com os autores Sharp, Preece e Roger (2005), as metas do design de interação consistem em entender as necessidades do usuário, bem como ser claro e objetivo. Divide-se em metas de usabilidade e metas da experiência do usuário. Sendo as primeiras referentes à: Ser eficaz no uso (eficácia) Ser eficiente no uso (eficiência) Ser segura no uso (segurança) Ser de boa utilidade (utilidade) Ser fácil de aprender (learnability) Ser fácil de lembrar como se usa (memorability) (SHARP, PREECE e ROGER, 2005, p ). 3 Palavra de origem inglesa que significa teia ou rede. Com o surgimento da internet a web passou a designar a rede que conecta computadores por todo mundo, a World Wide Web (WWW).

17 16 Ser eficaz, diz respeito à eficácia do sistema, ou o quanto ele é bom em fazer o que se espera dele. A eficiência refere-se ao modo como o sistema ajuda os usuários a realizar suas tarefas. O sistema tem que ser eficiente para o usuário após ele saber como usá-lo, para que se atinja uma boa produtividade. A segurança protege o usuário das situações indesejadas. O sistema deve prever possíveis erros e evitar que os usuários os cometam e, se caso acontecer, deve permitir uma fácil recuperação ao estado inicial/anterior. A Utilidade segundo Sharp, Preece e Roger (2005, p. 37), refere-se à medida na qual o sistema propicia o tipo certo de funcionalidade, de maneira que os usuários possam realizar aquilo de que precisam ou que desejam. Capacidade de aprendizagem (learnability), refere-se à facilidade que o usuário tem para aprender a utilizar um sistema. Capacidade de memorização (memorability) refere-se à facilidade que os usuários têm de lembrar como se utiliza um sistema depois de já ter aprendido como ele funciona. A segunda meta segundo os autores tem como foco a melhoria da eficiência e da produtividade dos usuários no trabalho, os desenvolvedores estão cada vez mais preocupados em desenvolver sistemas que sejam: Satisfatórios Agradáveis Divertidos Interessantes Úteis Motivadores Esteticamente apreciáveis Incentivadores de criatividade Compensadores Emocionalmente adequados (SHARP, PREECE e ROGER, 2005,p. 40). O objetivo da criação de produtos interativos que sejam agradáveis, divertidos, interessantes, úteis, etc., está na experiência que esses produtos proporcionarão aos usuários ou ainda como o usuário se sentirá na interação com o sistema. A relação entre metas de usabilidade e experiência do usuário é mostrada na figura a seguir.

18 17 Figura 1: Metas que são fundamentais para o design de interação e são operacionalizadas por meio de critérios diferentes. 4 (SHARP, PREECE e ROGER, 2005, p. 41) Modelo de Usabilidade Como dito acima, a usabilidade é vista como a facilidade da utilização de um sistema. O autor Eason (1984 apud LEITE, 1998), diz que a usabilidade não depende apenas da natureza do usuário, mas também das características da tarefa e do sistema. Ou seja, as variáveis do usuário, sistema e das tarefas combinam para determinar a usabilidade de um sistema. Do ponto de vista de alguns autores, a usabilidade tem que ser vista como uma qualidade que não somente satisfaz as necessidades dos usuários, como também algo que se acopla às capacidades e conhecimentos e considera o impacto da tecnologia no contexto de trabalho e integra o usuário dentro dele. Segundo LEITE (1998), a usabilidade tem como desafio, criar designs de dispositivos/equipamentos integrados no ambiente de trabalho de forma que 4 No círculo externo são mostradas as metas decorrentes da experiência do usuário, as quais são menos claramente definidas. Fonte: SHARP, PREECE e ROGER, 2005, p. 41

19 18 aumente as capacidades dos usuários, considerando-os pessoas inteligentes e capacitadas para o aprendizado e interpretação ao invés de desmerecê-los. Moran (1981) e Noman (1986 apud LEITE, 1998), dizem que o conhecimento necessário para que o usuário adquira competência para usar algum sistema (modelo conceitual do usuário, assim chamado pelos autores), envolve tudo o que se pode fazer e como se pode interagir (funcionalidade e modelo de interação). É chamado então de modelo de usabilidade por ser fundamental para a usabilidade de um sistema. Segundo Leite (1998, p. 32), o design da aplicação de software é fundamentalmente o design do modelo de interação e do modelo funcional da aplicação, ou seja, do modelo de usabilidade Modelos de Interação Modelos de interação são protocolos que permitem que o usuário interaja com algum sistema. Os protocolos algumas vezes são determinados por uma linguagem, portanto podem ser chamados também de linguagem de interação. Segundo Leite (1998), a linguagem de interação determina as atividades físicas e mentais que o usuário deve desempenhar e os processos computacionais que o software da interface deve ter para interpretar os comandos e dados do sistema. Pode ser caracterizado por um padrão e por um estilo de interação. O estilo de interação fala sobre o tipo de interação usada que pode ser: linguagem de comando, menus, preenchimento de formulário, linguagem natural, e WIMP. O padrão de um modelo de interação se refere a uma caracterização mais específica dos estilos através de regras que determinam atributos deste modelo. Nas interfaces gráficas um padrão determina a aparência e o comportamento dos widgets. São exemplos de padrões de interfaces gráficas o Motif da ISO, o OpenLook da Sun Microsystems e o Windows da Microsoft (LEITE, 1998, p. 30). O usuário segundo o autor deve conhecer o modelo de interação para poder interagir com o sistema, e é importante diferenciar o modelo conceitual de usuário de um modelo que é definido formalmente através da linguagem de programação que o

20 19 implementa. Abaixo será abordado um pouco mais sobre interação e Design de Interação. 1.2 Design de Interação Design de Interação ou Arquitetura da Informação é uma área voltada ao projeto de interações entre as pessoas e os sistemas. Ela estuda como as pessoas trabalham e reagem aos artefatos interativos que utilizam, para posteriormente desenvolver melhorias na interação entre homem-máquina, de forma que o produto seja fácil, agradável e eficaz, já que ele faz sucesso no mercado devido ao seu design de alta qualidade e a experiência interativa que ele proporciona ao usuário. Para que um produto ou serviço atenda às expectativas e necessidades dos usuários, é necessário conhecê-los e saber o que querem, e para isso diferentes áreas trabalham em conjunto. São elas: Design Gráfico, Design de Produto, Design Visual, Desenho Industrial, Informática, Engenharia, Ergonomia, Psicologia, Sociologia, Antropologia e outras. A razão em se conhecer os usuários antes de criar um novo projeto deve-se ao fato de que cada um possui necessidades diferentes, segundo Sharp, Preece e Roger (2005), as crianças possuem expectativas diferentes dos adultos quanto à maneira como querem aprender ou jogar. Crianças consideram desafios interativos e personagens de desenhos animados altamente motivadores, enquanto os adultos acham os desenhos algo aborrecedor. Por outro lado, os adultos apreciam discussões sobre tópicos enquanto as crianças consideram isso algo maçante. O processo de design de interação envolve quatro atividades básicas: identificar as necessidades e estabelecer requisitos, desenvolver designs alternativos que preencham esses requisitos, construir versões interativas desses designs, de maneira que possam ser comunicados e analisados, avaliar o que está sendo construído durante o processo.

21 20 Como dito anteriormente, um produto faz sucesso no mercado devido ao seu design de alta qualidade e as boas experiências interativas que os usuários têm com eles, e para obter esse sucesso, o design de interação deve: 1. Comunicar com eficácia a interatividade e funcionalidade de um sistema; 2. Definir comportamentos que comunicam um sistema de respostas para interações do usuário; 3. Revelar, simultaneamente, fluxos de trabalho simples e complexos; 4. Informar os usuários sobre mudanças no sistema; 5. Prevenir erros do usuário. Segundo o autor AGNER (2006), Para se tornar eficaz, a Arquitetura da Informação deverá atuar como uma instância mediadora entre os interesses dos usuários, do cliente, do time gráfico e da equipe de programação. No centro de uma complexa rede de ideias diferentes e de pontos de vista divergentes, o arquiteto de informação emprega um arsenal de técnicas - combinadas a sua capacidade de comunicação interpessoal - para traduzir as necessidades e os objetivos dos usuários aos demais (AGNER, 2006, p. 90). De acordo com Sharp, Preece e Roger, (2005), o surgimento de novas tecnologias trouxe maiores oportunidades para fornecer suporte às pessoas em seu dia a dia, com isso, pesquisadores e profissionais passaram a considerar outras metas. O design de interação enfoca principalmente na melhoria da eficiência e da produtividade no trabalho, além de estar cada vez mais preocupado com a criação de sistemas que sejam: Satisfatórios Agradáveis Divertidos Interessantes Úteis Motivadores Esteticamente apreciáveis Incentivadores de criatividade Compensadores Emocionalmente adequados (SHARP, PREECE e ROGER, 2005, p. 40)

22 21 Para que se crie um sistema interativo que atenda aos itens acima, deve-se levar em conta também os fatores cognitivos, ou seja, como as pessoas percebem, memorizam e aprendem novas informações que lhes são dadas, além do feedback que será abordado a seguir. O sistema criado não deve fazer com que os usuários memorizem tudo o que foi feito dentro da página, todas as informações tem que estar visíveis, de forma que ele não se perca dentro da página e tenha o controle do que está fazendo. Além da abordagem cognitiva, como dito anteriormente, o feedback também é um fator importante na construção de um sistema interativo. Ele deve dar retorno de informações aos usuários a respeito da ação que foi feita, como por exemplo, quando preenchemos um formulário de cadastro na web o sistema deve dar retorno sobre ter sido enviado com sucesso ou não. Segundo Nielsen (2006), projetar a estrutura de um website sem o feedback dos clientes é um equívoco que pode custar milhares ou milhões de dólares. Devemos projetar para a conveniência deles e não a nossa. Sharp, Preece e Roger (2005), dizem que o feedback auxilia os usuários no encontro de informações a respeito da ação que foi feita e do que foi realizado. Usado da maneira correta, pode proporcionar a visibilidade necessária para a interação do usuário. Há vários tipos de feedback disponíveis para o design de interação: áudio, tátil, verbal, visual e combinações dos mesmos Critérios Ergonômicos Os critérios ergonômicos são um conjunto de qualidades ergonômicas que segundo Cybis (2007) devem estar presentes nas interfaces humano-computador. O conjunto é composto por 8 (oito) critérios principais que se subdividem em 18 (dezoito) subcritérios e critérios elementares. Os critérios principais são:

23 Condução A condução refere-se a tudo que orienta, conduz, informa e aconselha o usuário na interação com o computador. Ou seja, favorece o aprendizado e a utilização do sistema por usuários inexperientes. A condução permite que o usuário saiba onde ele se encontra após realizar uma sequência de interações com a página, e para que consiga realizar uma tarefa desejada. Fazem parte da condução: convite, agrupamento e distinção entre itens, legibilidade e o feedback imediato Carga de Trabalho Diz respeito aos elementos de uma interface que têm um papel importante na redução da carga cognitiva e motora do usuário, isto é, redução da leitura e memorização desnecessárias, além de deslocamentos inúteis e repetição de entradas. Uma tarefa que possui uma carga de trabalho cognitivo maior para o usuário, ou seja, é muito complexa, ou ainda, o usuário é distraído por alguma informação desnecessária, faz com que a probabilidade dele cometer erros seja maior. Sendo assim, informações inúteis dentro de uma interface devem ser excluídas permitindo que o usuário conclua suas tarefas sem um desvio de atenção. Fazem parte da carga de trabalho os seguintes subcritérios: breviedade (que inclui concisão e ações mínimas) e densidade informacional O Controle explícito O controle explícito é aplicado às tarefas longas sequenciais e quando os processamentos são demorados. Diz respeito tanto ao processamento explícito pelo sistema das ações do usuário, quanto o controle que eles, os usuários, têm sobre o processamento de suas ações pelo sistema. Quando o usuário tem o controle dos processos realizados dentro de uma página, a chance de errarem é menor. O

24 23 Controle Explícito define-se em dois critérios elementares: ações explícitas do usuário e controle do usuário A Adaptabilidade Refere-se à capacidade do sistema dar uma resposta ao usuário de forma que atenda suas necessidades e preferências. É uma qualidade esperada nos sistemas que possuem público alvo vasto e variado. Como as interfaces não conseguem atender aos diferentes tipos de usuários, ela deve propor maneiras diferentes de realizar uma tarefa, de forma que eles possam escolher e dominar uma delas ao longo do seu aprendizado. Dois subcritérios fazem parte da adaptabilidade: flexibilidade e a consideração da experiência do usuário Gestão de Erros Diz respeito a todos os mecanismos que permitem evitar ou reduzir a ocorrência de erros e que favoreçam sua correção. Aplica-se principalmente quando as ações realizadas pelos usuários estão sujeitas a erros de grande responsabilidade, ou seja, que envolvam perda de dados, dinheiro ou que coloque em risco a saúde das pessoas. Três subcritérios fazem parte da gestão de erros: a proteção contra os erros, a qualidade das mensagens de erro e a correção dos erros A Homogeneidade/Coerência Critério aplicado normalmente quando os usuários são novatos ou intermitentes. Refere-se à forma na qual as escolhas em uma criação de interface (códigos, denominações, formatos, procedimentos, etc.) são conservadas idênticas em contextos idênticos e diferentes para contextos diferentes. É recomendado que

25 24 se padronize os objetos quanto ao seu formato e sua denominação, para que os usuários não se confundam e percam muito tempo procurando informações. O LabUtil 5, cita como exemplos de recomendações de homogeneidade: Localização similar dos títulos das janelas; formatos de telas semelhantes; procedimentos similares de acesso às opções dos menus; na condução, sempre utilizar as mesmas pontuações e as mesmas construções de frases; apresentar na mesma posição os convites (prompts) para as entradas de dados ou de comandos; os formatos dos campos de entrada de dados devem ser sempre os mesmos Significado dos Códigos e Denominações Refere-se à adequação do objeto ou a informação apresentada e sua referência na interface. Códigos e denominações não significativos para os usuários podem levá-los a cometer alguns erros, eles escolhem uma opção errada e vão para um local não desejado, e o sistema pode deixar de informar um dado importante. Se a adequação for significativa, a recordação e o reconhecimento serão mais fáceis A Compatibilidade Favorece o aprendizado e a utilização eficiente do sistema por usuários já experientes em suas tarefas. Esse critério pode ser entendido a partir de três perspectivas de compatibilidade: a compatibilidade com o usuário, a compatibilidade com a tarefa (ou a maneira como ele realiza a tarefa) e a compatibilidade com o ambiente (com outros sistemas rodando em um mesmo ambiente operacional). As características do sistema têm que ser compatíveis com as do usuário em termos cognitivos (memória, percepção), demográficos (idade, sexo), culturais (hábitos), de competência (conhecimento e desempenho). Resumindo, esse critério refere-se ao grau de semelhança entre diferentes sistemas que são executados no mesmo 5 Foi o laboratório de utilizabilidade da Informática da Universidade Federal de Santa Catarina entre 1995 e o final de 2003 quando foi desativado.

26 25 ambiente operacional (Windows, Mac, OpenLook). Uma interface copatível possui: uma rápida e eficaz transferência de informações do contexto da tarefa para o sistema, procedimentos e as tarefas são organizados de maneira a respeitar expectativas e/ou costumes do usuário, transposições, traduções e as interpretações ou referências à documentação são minimizadas (telas compatíveis com os documentos em papel), a informação é apresentada de forma diretamente utilizável. Para cada um dos critérios citados acima existem recomendações ergonômicas que representam um conhecimento mais detalhado em relação aos citados anteriormente. Essas recomendações serão abordadas no próximo capítulo.

27 2 RECOMENDAÇÕES ERGONÔMICAS Neste capítulo serão explicadas as recomendações ergonômicas para cada um dos critérios ergonômicos abordados no capitulo anterior. As recomendações são regras aplicáveis à seleção e à configuração de estilos de diálogos, janelas, formulários, menus, botões, tabelas, etc. As recomendações são divididas em: comportamentos de uma interface, objetos de interação, atributos de objetos, que serão detalhados a seguir. 2.1 Comportamentos de uma interface Os comportamentos de interface englobam dois subitens que são: Comportamentos Elementares e Comportamentos Estruturados. Estes dois itens apresentam elementos de diálogo e interação que ajudam os usuários a chegar ao objetivo final através das escolhas do mesmo Comportamentos elementares Uma interface deve antecipar-se e reagir às ações executadas pelos usuários de forma que lhes forneça respostas adequadas das ações, andamento e resultado das ações realizadas por ele. Ou seja, são elementos de diálogos que ajudam os usuários a chegar ao objetivo final, ou então obter os resultados pretendidos. Fazem parte dos comportamentos elementares: Convite à interação, apoio às ações do usuário, feedback das ações do usuário. Convite à interação O convite à interação pode ser ativado de três formas diferentes: Ativado automaticamente pelo sistema (Figura 2), ser um efeito colateral de uma ação do usuário (Figura 3) ou ser acionado explicitamente pelo usuário (Figura 4).

28 27 Figura 2: Convite acionado automaticamente pelo sistema (Mozzila) Fonte: CYBIS, 2007, p. 51 Figura 3: Convite acionado explicitamente pelo usuário (IRPF 2007) Fonte: CYBIS, 2007, p. 51 Figura 4: Convite acionado pela movimentação do mouse (Lattes) Fonte: CYBIS, 2007, p. 51 Apoio às ações do usuário O usuário recebe apoio através do fornecimento de informações de status, como, por exemplo: o estado dos componentes do sistema - se um botão está ativo,

29 28 selecionado, etc. Há situações em que o feedback é a única informação de status que o usuário recebe. Feedback das ações do usuário Cada ação executada pelo usuário deve fazer com que o sistema produza feedback. Se uma ação realizada pelo usuário não tiver retorno imediato o sistema deve enviar uma indicação de que recebeu a solicitação, começou a executá-la e que completou a execução. O feedback deve ser adaptado de acordo com o perfil do usuário-alvo da aplicação e ser mais explicativo para aqueles usuários que são inexperientes Comportamentos Estruturados São diálogos que se estabelecem entre os usuários e o sistema, seguindo estruturas ou estilos e repetindo os seguintes padrões gerais de comportamento: sequência rígida de interações ou, uma sequência livre como ocorre na maioria dos casos, onde o usuário pode escolher entre ações que lhes são apresentadas de forma concorrente (em paralelo). Fazem parte dos comportamentos estruturados: diálogos concorrentes (diálogo por menu, por linguagem de comando, por preenchimento de formulário, por manipulação direta) e diálogos sequenciais (diálogo passo a passo e diálogo questão versus resposta) Diálogos concorrentes Em estruturas concorrentes ou paralelas as interações são realizadas em uma ordem qualquer. Seu uso é indicado quando existirem diversas tarefas e diversas maneiras de realizá-las.

30 29 Diálogo por menu Seu uso é recomendado quando a tarefa principal é baseada no mouse como um dispositivo de interação, como quando é feito a edição de uma imagem. A estrutura de um menu possui diversos comandos que são organizados segundo critérios como: ordem cronológica da tarefa, frequência de uso e importância para a tarefa (Figura 5) Figura 5: Estrutura de menu (MS Word) Fonte: CYBIS, 2007, p. 55 Diálogo por linguagem de comando Recomendado para usuários experientes. É aplicada em tarefas que dependem de grande quantidade de opções de comando e possuem sequencia lógica imprevisível. A experiência do usuário deve ser considerada pelo sistema ao aceitar entradas de comandos múltiplos e autorizar o usuário a definir sinônimos para os comandos.

31 30 Diálogo por preenchimento de formulário É aplicado quando as entradas da tarefa são de dados organizados em grupos lógicos e com poucos comandos. O sistema deve apoiar a navegação pelo formulário e entre eles (Figura 6) de forma a propor uma posição adequada para o inicio do diálogo e facilidades de navegação entre os campose grupos de campos. Diálogo por manipulação direta É aplicado quando a entrada de dados e comandos possuem inter-relações complicadas e quando pode-se criar metáforas a partir de objetos e entidades do mundo real que representem as inter-relações graficamente. O sistema deve deixar claro que tipo de ação está sendo executada, objeto que está selecionado pelo usuário e o foco desta ação através de alguma indicação Diálogos sequenciais Nas interações que possuem estrutura sequencial, as tarefas são executadas em sequencia rígida de passos que é definida pelo projetista. Diálogo passo a passo As interações as quais o usuário é submetido são do tipo etapa por etapa. Elas são predefinidas, e os passos seguintes só podem ser realizados depois que o anterior foi concluído. O uso deste tipo de diálogo é indicado nos casos em que os usuários novatos se deparam com tarefas mais complicadas, como a instalação de um software. Diálogo questão versus resposta Neste tipo de diálogo, cada passo corresponde a uma questão que deve ser respondida pelo usuário para que se avance na interação. Os passos seguintes são definidos conforme a resposta que o usuário der para o sistema.

32 31 Figura 6: Diálogo passo a passo (à esquerda) e questão versus resposta (à direita) (MS Office) Fonte: CYBIS, 2007, p Objetos de Interação São objetos de software que possuem recursos para gerar imagens e reagir confirme as ações executadas pelos usuários sobre estas imagens. Representam metáforas do mundo não informatizado: janelas, menus, botões etc. São construídos a partir de recursos dos sistemas gerenciadores de janelas, dos quais herdam um estilo particular de apresentação e de comportamento (CYBIS, 2007, p. 58) Painel de Controle São coleções de objetos necessários para uma ação ou tarefa. Fazem parte do painel de controle: Janelas, Caixas de diálogo, Formulários, Caixas de mensagens.

33 Janelas Servem para representar comandos, ferramentas e dados de determinada aplicação de forma gráfica. As janelas devem possuir título único, curto e significativo, devendo ficar em sua barra superior esquerda, centrado ou alinhado pela esquerda. (Figura 7) Figura 7: Janela do programa Autocad 2007 Fonte: < O layout das janelas deve ser padronizado para todas as aplicações com uma diagramação equilibrada, ou seja, deve ter uma diferenciação clara entre as zonas funcionais bem como uma boa distribuição das áreas livres. Em algumas situações o usuário poderá criar outras janelas de documentos, porém, a janela principal e as secundárias criadas competirão pelo foco de atenção do usuário (Figura 8), com isso, o projetista terá que destacar a janela que está em foco por meio da aparência com bordas chamativas, barra de título e elementos de controle.

34 33 Figura 8: Janelas que competem pela atenção do usuário Fonte: DIEMER (2012) Caixas de Diálogo Servem para auxiliar na operação de funções delimitadas e específicas. É uma janela que não possui estrutura de comandos, como menus e caixa de ferramentas. Existem caixas de diálogo que servem para realizar buscas de textos, controlar acesso a um sistema e para formatar parágrafo. Podem ser modais ou não-modais. A modal (Figura 9) exige atenção exclusiva do usuário, impedindo-o de realizar qualquer outra ação sobre o sistema, enquanto a não-modal (Figura 10) não exige atenção do usuário, podendo aguardar em segundo plano enquanto o usuário termina outras ações. Figura 9: Exemplo de caixa de diálogo modal Fonte: DIEMER (2012)

35 34 Figura 10: Exemplo de caixa de diálogo não modal Fonte: DIEMER (2012) Da mesma forma que nas janelas, os títulos das caixas de diálogos devem ser centralizados na margem superior ou alinhados pela esquerda. Os elementos devem ser bem distribuídos seguindo uma diagramação adequada de forma a evitar sobrecarga de informação. Para diminuir carga de trabalho do usuário, campos seletores devem ser preenchidos com valores default 6 adequados Formulários São caixas destinadas à entrada e consulta de dados. Os formulários devem ter títulos significativos e um layout que agrupe, diferencie e ordene de forma lógica as categorias de dados apresentadas. Devem ser distribuídos respeitando uma estrutura lógica dos dados e facilitando a interação com o usuário. As entradas de dados devem iniciar no primeiro campo no alto à esquerda, e este deverá estar com o foco das ações do usuário toda vez que o formulário for apresentado. Campos obrigatórios devem ser destacados visualmente e se possível, devem ser colocados nas primeiras posições do formulário. 6 Valor Padrão

36 35 Figura 11: Exemplo de formulário com campos obrigatórios Fonte: < Efeitos sonoros podem ser empregados para informar que o preenchimento de um campo e sobre a impossibilidade de acesso a um campo protegido. Rótulos devem estar perto dos campos, na mesma linha à esquerda ou acima deles. Um formulário bem projetado deve evitar a troca de dispositivos de interação pelo usuário oferecendo recursos que deixem a navegação mais rápida e ágil entre os campos Caixas de mensagens Informam o usuário sobre: o que fazer nas interações; estado em que se encontra o sistema; resposta do sistema a uma ação do usuário; situações perigosas, de erro ou de anormalidade; como recuperar a normalidade do sistema. São normalmente do tipo modais, exigindo que o usuário interaja com o sistema antes de lhe permitir dar sequencia à interação. Quando aparecer na tela uma mensagem que leve a confirmação de uma ação destrutiva, a opção default deve recair sobre a anulação e nunca para a confirmação (Figura 12).

37 36 Figura 12: Opção default recaindo sobre a anulação de uma ação destrutiva Fonte: DIEMER (2012) Quando houver situações de perigo como, por exemplo, a formatação de um disco rígido, as caixas de mensagens devem ser destacadas com a cor vermelha, efeito de intermitência ou por som. Em situações de anormalidade, a cor amarela deve ser empregada para chamar atenção e, mensagens de erro devem sempre ter um botão de ajuda Objetos para manipulação Cursores dos dispositivos de entrada Representam os objetos manipuláveis pelo usuário em uma interface gráfica. São pequenos, o que é bom, pois facilita seu uso em caso de designação ou indicação de objetos pequenos na tela. Associado ao mouse, o cursor se desloca pelos objetos da tela mudando sua forma conforme o posicionamento ou o tipo de tarefa que está sendo executada pelo usuário Objetos para seleção Este tipo de objeto de interação reduz o esforço físico e cognitivo do usuário, que tem a facilidade de não ter que digitar nem lembrar o nome exato do comando ou dado a informar, ou seja, esses objetos facilitam entradas dos usuários por meio de seleção de uma entre várias opções disponíveis. Fazem parte dos objetos para

38 37 seleção: Estrutura de menus, Barra de menu, Painel de Menu, Barra de ferramentas, lista de seleção, grupos de seletores exclusivos (radio Button), grupos de seletores não - exclusivos (check Box), grupos de botões de comando Estrutura de Menus As estruturas de menus envolvem um menu principal e diversos painéis de menus que são de ordem inferior. As recomendações para este item são: os nomes das opções devem ser significativos e familiares aos usuários; menus que possuem grande número de opções devem ser organizados em grupos ou submenus que fiquem entre cinco e nove opções inter-relacionadas logicamente; deve haver balanço adequado entre largura e profundidade de uma estrutura de menus, a largura máxima é de sete grupos com sete opções e a profundidade é de até três ou quatro níveis; uso de teclas de atalhos; opções com múltiplas formas de acionamento Barra de Menu Abriga as opções do menu principal. Possui a mesma regra para a quantidade de opções, entre cinco e nove e a retirada da barra de menu da tela deve ser comandada pelo usuário Painel de Menu São composições de menu dispostas verticalmente, umas abaixo das outras. Os painéis de menu devem apresentar todas as opções simultaneamente, diferenciando as opções ativas das não ativas. Assumem diferentes estados: ativo, inativo, em foco, ativado e desativado. As opções dos painéis devem ser leves e

39 38 legíveis e as linhas separadoras de grupos devem ser discretas e simples. Se houver necessidade de ordenar opções devem ser feitas de forma numérica Barra de Ferramentas É um painel de menu sem continuidade, suas opções são em forma de ícones e são associadas aos comandos que o usuário necessita durante suas tarefas. Devem ser organizadas em grupos temáticos e as opções constadas na barra de ferramentas devem ser aquelas mais frequentemente usadas pelos usuários em suas tarefas. As barras de ferramentas devem ser flexíveis para que usuários mais experientes personalizem conforme preferirem Lista de Seleção São menus de valores possíveis para os dados de entrada dos usuários. Possui como recomendação: limite de visualização entre cinco e nove itens sem rolagem; limite máximo de opções em uma lista é de em torno cinquenta itens, ordenados por frequência de uso, ordem alfabética ou numérica; podem haver separadores para diferenciar valores recentemente escolhidos; em situações que não há muito espaço pode-se usar painéis em pull-down (Figura 13); a largura do painel pode ser determinada pelo item mais longo.

40 39 Figura 13: Exemplo de painel pull-down (rolagem) Fonte: DIEMER (2012) Grupos de seletores exclusivos (radio Button) É usado para tornar a entrada de dados mais rápida e segura. É usado para escolhas simples e valores conhecidos, porém quando houver valores possíveis em grande número, o projetista deverá subdividir em grupos lógicos, marcando visualmente essa divisão através de linhas simples ou retângulo de linhas simples.

41 40 Figura 14: Exemplo de radio Button Fonte: Grupos de seletores não-exclusivos (check Box) É usado para que os usuários escolham diversas opções dentre as diferentes apresentadas. Figura 15: Grupos seletores check Box Fonte: DIEMER (2012)

42 Grupos de botões de comando São usados nas caixas de diálogos para disparar uma ação na qual o resultado final é o descrito pelo rótulo textual ou icônico e em situações nas quais as opções de comandos possíveis sejam em número reduzido Objetos para edição Esses objetos proporcionam aos usuários entrada de valores não antecipáveis pelos projetistas, o que torna a entrada crítica, pois está sujeita a erros. Desta categoria fazem parte: campos de dados e linha e área de comando Campos de dados Devem apresentar um rótulo identificador, dispor de recursos extras, como valor default, explicitação do formato do dado (dd/mm/aa), de sua unidade (cm, mm) e dos valores possíveis (1 a 10) para prevenir ou minimizar possíveis erros. Rótulos devem ser colocados ao lado esquerdo do campo ou acima dele alinhado pela esquerda (Figura 16). O comprimento de um campo unilateral não deve passar de 40 ou 50 caracteres. Se as entradas excederem esse comprimento, o campo deverá ser multilinear. Figura 16: Rótulo posicionado ao lado esquerdo do campo Fonte: CYBIS (2007)

43 Linha e área de comando São campos de edição uni e multilineares. Seus conteúdos são interpretados como comandos pelo sistema e proporcionam flexibilidade ao usuário que consegue acionar um comando sem ter que ir até o menu ou caixa de diálogo. Devem ser localizadas preferencialmente na parte inferior da tela e apresentar um mínimo de quatro linhas Objetos para apresentação São recomendações de uma grande variedade de objetos que servem para apresentar dados e informações aos usuários. Apresentações estruturadas (listas, gráficos, tabelas, textos e mensagens) e apresentação simples (dados individuais, rótulos) fazem parte dos objetos de apresentação Apresentações estruturadas Segundo CYBIS (2007, p. 81), é usada para levar ao usuário informações e dados quantitativos, facilitando seu exame e permitindo, em maior ou menor grau, a identificação das inter-relações e tendências. Listas Devem ter cabeçalho conciso e representativo dos dados que são apresentados. Deve-se ter um cuidado especial com o alinhamento. No caso de listas longas, o projetista deve optar entre a navegação por paginação ou por rolagem. A paginação é aplicada no caso de usuário inexperientes ou se a tarefa envolver busca de informações isoladas. Se o objetivo da tarefa for busca de relações entre dados, é recomendado usar a técnica de rolagem. Gráficos Possuem diferentes formatos e se aplicam para:

44 43 Gráficos de barras exame de amostras a intervalos discretos; Gráficos de setores análise de valores que representam partes de um todo; Gráficos de curvas análise de tendências; Gráficos de superfícies exame de valores cumulativos. O título de um gráfico deve descrever as correlações apresentadas. Quando um gráfico mostrar diversas curvas diferentes, estas podem ser diferenciadas por meio de traços pontilhados, símbolos geométricos, espessuras e cores (CYBIS, 2007, p. 83). Na configuração das escalas dos gráficos, deve-se ter atenção nas definições relativas ao tamanho das letras, ao intervalo de rotulação (a cada 1,2,5 ou 10 marcações) e ao número de subdivisões (não mais de 10). Tabelas As recomendações das tabelas são basicamente as mesmas que as das listas, porém, no caso das tabelas, pode ser necessária a definição de cabeçalhos também para as linhas, que devem ser diferenciados dos dados. Uma tabela deve mostrar recursos de uma coluna à outra para facilitar a leitura de dados, como as linhas separadoras, padrões alternados (linhas sim, linhas não) para o fundo da tabela e a definição de blocos de linhas, separados por uma linha em branco ou um traço simples. Para que o usuário não se perca, as tabelas devem apresentar informações de status como; quantos elementos há dentro da tabela, e quantos elementos estão apresentados na tela atual. Para que a busca por informações seja facilitada, as tabelas longas devem propor recursos de navegação, por paginação, permitindo ao usuário deslocar-se para páginas adjacentes ou uma página específica. Textos Devem ser configurados para facilitar a leitura, pois transmitem informações de todos os tipos: conceituais, quantitativas, qualitativas, abstratas etc. As primeiras recomendações são referentes ao formato normal ou em colunas. No formato normal, o alinhamento é definido pela margem esquerda, e o comprimento da linha

45 44 não deve passar de 50 ou 60 caracteres. Com isso as palavras são espaçadas naturalmente e não devem ser quebradas no final das linhas. No formato em colunas, o texto pode ser alinhado tanto pela esquerda como justificado (alinhamento pela esquerda e pela direita), desde que as linhas não excedam 35 caracteres. O espaçamento entre colunas se alinhadas pela direita pode ser de três caracteres. Caso o texto seja justificado, é recomendado deixar um espaço maior entre as colunas, cerca de 8 caracteres. Em todos os formatos citados acima, os parágrafos devem ser espaçados entre si por aproximadamente uma linha em branco. O texto não deve nunca aparecer piscando para o usuário, além disso, é bom evitar apresentar os textos somente em caixa alta (maiúsculas). Mensagens Usadas para orientar, ajudar, avisar, alertar ou sinalizar um erro ao usuário. São apresentadas dentro de caixas de mensagens ou em áreas especiais nas telas. Podem ser permanentes ou transitórias, modais ou não modais, e a apresentação delas pode ser solicitada pelo usuário ou então comandada pelo sistema como resposta de alguma mudança de contexto. Servem para expressar noções abstratas, deduções lógicas, e podem ser complementadas por algum elemento gráfico (ícone ou figura). Frases devem ser apresentadas em vocabulário simples, significativo e familiar e, devem ser formuladas de forma afirmativa e direta, na voz ativa, procurando evitar pontuações desnecessárias e apresentando os argumentos segundo ordem lógica. Dados que devem ser memorizados pelo usuário devem aparecer somente na última parte da mensagem Apresentação Simples Dados Individuais Devem possuir rótulos que os identifique e que sejam explicativos, de forma que esclareçam sobre a unidade e o formato dos valores apresentados. O projetista

46 45 deve, quando possível, adotar formatos padronizados e coerentes com as convenções do usuário. Dados devem ter formato diferente dos seus rótulos. Rótulos São elementos que servem para identificar dados, dar informações, controles e comandos de uma interface. Assumem forma textual (palavra ou expressão) ou icônica (símbolo ou sinal). Rótulos textuais devem ter palavras significativas e diferenciáveis, além de concisas e apresentar um estilo diferente do elemento que identifica. Se algum dado precisar de uma atenção especial, o rótulo pode ser destacado por recursos auxiliares como: cor, estilo de texto, etc. Devem ser colocados próximos dos objetos que identificam, acima ou à esquerda deles. Os rótulos têm diferentes tipos de funções, incluindo a identificação, descrição, incitação, indicação e distinção. Com essas funções e as relações com diferentes objetos é possível definir algumas instâncias de um rótulo. 2.3 Atributos de Objetos Atributos de significado São recomendações referentes aos atributos que transmitem significados para os usuários como: nomes, ícones, códigos (alfanuméricos, formas, cores e de intermitência visual) Nomes Segundo o autor Cybis (2006), Os nomes dos objetos de uma IHC devem estar associados à linguagem operativa do usuário, aquela que ele usa coletivamente para denominar as

47 46 tarefas, procedimentos, técnicas, ferramentas, materiais, agentes etc. de sua tarefa (CYBIS, 2006, p. 89). É recomendado o uso de abreviaturas somente quando necessário. Se usadas, devem ser distintas entre si, além de claras e significativas Ícones O uso dos ícones é indicado para representar objetos substituindo palavras e consequentemente aumentando espaço na tela. É recomendado que se use os ícones disponíveis nos guias de estilo dos fabricantes: Microsoft, Macintosh, Java, etc. Se não for usado os ícones disponíveis nos guias de estilos e sim desenhado, algumas recomendações devem ser seguidas: Definir ícones claros, significativos e pequenos; Desenhar ícones simples, com poucos elementos; Usar símbolos, emblemas, arquétipos e metáforas de objetos em vez de abstrações sobre ideias ou conceitos; Ampliar os elementos significativos dos ícones (que os distinguem); Evitar contornos espessos; Usar poucas cores; Desenhar ícones consistentes em seu conjunto; Respeitar a escala dos outros objetos da tela. Não os fazer muito grandes nem muito pequenos; Usar um número reduzido de ícones (não mais que 20). (CYBIS, p. 90) Códigos: Alfanuméricos Se o usuário tiver que memorizar um objeto identificado por códigos alfanuméricos, este não deve ser utilizado com mais de quatro ou cinco caracteres. O limite de uso para códigos alfanuméricos arbitrários é de sete a dez letras. Para este tipo de código, deve-se organizar letras e números em grupos separados, para evitar combinações perigosas entre caracteres semelhantes, por exemplo: em

48 47 alguns tipos de fontes, letras diferentes correspondem a mesma representação, como é o caso da fonte Arial, a letra L minúscula é igual a letra i maiúscula. Códigos de formas São códigos representados por formas geométricas, servem para codificar classes de eventos em gráficos estatísticos. Não é recomendado o uso de mais do que quinze opções de sinais geométricos. Códigos de cores As cores têm um papel muito importante dentro das recomendações ergonômicas, servem para transmitir informações, chamar atenção, contrastar e associar objetos de interação. Porém para que sejam eficazes deve-se ter um cuidado especial com três aspectos segundo Cybis (2007). A legibilidade final da informação; Os efeitos das cores sobre a performance perceptiva do usuário; As possibilidades dos dispositivos físicos. (CYBIS, 2007, p.92) As recomendações acima servem para evitar confusões visuais resultantes do exagero no uso de cores não pertinentes. Códigos de intermitência visual (pisca-pisca) Servem para destacar situações em que há perigo de acidentes. Não deve ser aplicada em mais de um elemento de cada vez e o projetista deve prever uma tecla que permita que o usuário desative a intermitência Atributos de forma São recomendações referentes ao uso de cores, fontes, bordas, arranjo (layout), fundo.

49 Cores É indicado fazer o projeto de interface primeiramente em preto e branco para somente depois de tudo pronto e testado colorir a interface. Quando for colorir Cybis (2007, pág. 94) recomenda: use poucas cores; use coresneutras; use cores com a mesma luminância (brilho); use cores brilhantes com cautela Fontes As recomendações do uso de fontes referem-se basicamente ao uso da serifa e ao espaçamento entre os caracteres. Fontes sem serifas são leves, porém de difícil leitura. Já as com serifa devem ser usadas em textos longos, como forma de facilitar o reconhecimento rápido dos caracteres. Em títulos e rótulos devem ser usadas fontes sem serifa. Fontes muito grandes não devem ser usadas de maneira que gritem com os usuários, textos somente com maiúsculas devem ser evitados e não se deve exagerar no uso do negrito, itálico e sublinhado Bordas As bordas servem para deixar os objetos mais leves através de traços simples e de uma distância entre textos e ícones Arranjo (layout) Segundo Cybis (2007), as recomendações para arranjo são: Definir um grid para o layout das telas e alinhar os elementos conforme as linhas e colunas desse grid. Definir focos de atenção (zonas de trabalho) agrupando os elementos inter-relacionado e colocando em evidencia o que for mais importante no

50 49 grupo. Recomenda-se também distribuir os elementos de um grupo da esquerda para a direita em função da frequência de acesso, da importância, da cronologia da tarefa etc. e separar grupos por meio de espaços em branco. Dar equilíbrio às telas, distribuindo os elementos de forma balanceada. Evitar áreas vazias ou altamente carregadas de componentes. Manter a consistência entre os arranjos das diferentes telas de uma mesma interface (CYBIS, 2007, p. 96) Fundo Devem ser definidos com cores neutras garantindo contraste adequado com os textos e rótulos em primeiro plano. O fundo da tela não deve ser carregado com elementos gráficos. No capítulo a seguir serão abordados elementos relacionados ao design de interfaces, estes que são essenciais em um projeto gráfico de websites.

51 3 DESIGN DE INTERFACES O design de interfaces 7 é uma área que tem como foco a experiência do usuário com uma interface gráfica e interação. Para obter um bom design de interfaces é necessário que ele seja funcional e facilite a conclusão de tarefas executadas pelo usuário. Assim como todo trabalho de design, este é um projeto que precisa de uma análise informacional, a partir de um briefing, onde é visto qual o objetivo do projeto, público - alvo, serviços oferecidos, etc., para que posteriormente, com esses dados, se defina a arquitetura da informação, estrutura de navegação e layout. Uma vez definido esses três últimos itens, o futuro site pode começar a ser organizado por páginas, tendo como foco a funcionalidade e usabilidade para que torne a interação e comunicação mais eficaz. O Design de Interface engloba alguns conteúdos que são fundamentais na criação de um website, são eles: tipografia, cores, conteúdo, planos de fundo, ícones, interação e etc., que serão abordados abaixo. 3.1 Tipografia Tipografia (do grego typos forma e graphein escrita ), é a arte e o processo de criação de letras, seja um texto, física ou digitalmente. Os primeiros vestígios de tipografia surgiram na era do homem primitivo, cujo usava pedras e pedaços de madeiras para fazer seus desenhos em cavernas (pictografia) e expressar acontecimentos do seu cotidiano. Os livros da época eram produzidos por escribas, pessoa que dominava e era educada nas artes da escrita tanto hieróglifas quanto hieráticas. Como o processo de escrita era muito trabalhoso e demorado, no século XV Gutenberg revolucionou e criou o primeiro processo de impressão por meio de uma 7 Estrutura que organiza informações dentro de um determinado contexto, promovendo interação entre o usuário e a informação.

52 51 prensa onde utilizava letras de madeira e metal com o intuito de reaproveitar os tipos e compor diferentes textos. (FUNK, DOS SANTOS, 2012). A mudança do processo de impressão veio com a revolução industrial, quando tudo passou a ser mecanizado, prensas giratórias a vapor substituíram a operação manual. (FUNK, DOS SANTOS, 2012). Na segunda metade do século XX surge a composição controlada por computador, montagens virtuais que resultavam em uma chapa para impressão e que eliminavam o processo de montagem em filmes como era feito nas fotocomposições até aquele momento. A tipografia digital que surgira agora são desenhos de tipos (letras) que podem ser colocados em escala conforme o tamanho desejado (CANDÊO, 2012). O conhecimento aprofundado sobre tipografia é essencial principalmente para os designers que trabalham com diagramação, seja de uma comunicação impressa ou digital, pois serve para dar forma e ordem estrutural aos arquivos. A legibilidade e leiturabilidade são dois critérios ergonômicos que tem que ser levados em conta na escolha de uma família tipográfica. A legibilidade refere-se à facilidade com que o leitor identifica o tipo em uma página, e para que as letras possam ser lidas, tem que estar bem identificadas. A leiturabilidade refere-se ao aspecto geral de como o tipo de letra é composto em uma coluna de texto. Envolve fatores como entrelinha, corpo, largura da linha e etc. Ou seja, a legibilidade fala de cada letra em particular enquanto a leiturabilidade refere-se a um grupo de letras.segundo Nielsen (2007), a legibilidade é um problema nos websites, independente da qualidade visual que um website possuir, se as pessoas não conseguirem ler os textos com facilidade, o site estará destinado ao fracasso. Em nossos estudos, vimos sempre pessoas de todas as idades e capacidades visuais apresentar dificuldades de ler o texto nos sites que mostramos. Algumas pessoas tiveram de parar o que estavam fazendo e usar óculos de leitura, enquanto outras precisaram se aproximar da tela e forçar a vista. A tipografia e os esquemas de cores corretos são componentes essenciais de bom design visual, mas temos visto decisões baseadas unicamente na marca, preferências pessoais e estéticas ou, simplesmente, caprichos pessoais. Os resultados: Texto parece muito pequeno ou confuso; O texto não é facilmente redimensionável; A cor do texto não fornece um bom contraste sobre o fundo;

53 52 O texto esta obscurecido pelos elementos do layout. (NIELSEN, 2006,p. 214). Levando em conta os fatores de legibilidade e leiturabilidade, deve-se ter um cuidado ao escolher uma família tipográfica, pois ela deve ser simples de modo que fique claro e legível para o usuário e auxilie na usabilidade do site. Há dois tipos principais de fontes: com serifa e sem serifa. As fontes com serifas têm arremates nas pontas de cada letra ou outros enfeites e variações sutis. Funcionam bem para a tipografia de alta qualidade de livros e revistas, pois tornam a leitura mais rápida em texto impresso. As sem serifas são simples e não tem os detalhes decorativos. Tipos de fontes sem serifas são os mais adequados para serem usados na web, pois são mais legíveis. As telas dos computadores não oferecem a qualidade tipográfica de impressão, sendo assim fontes serifadas não funcionariam na web, da mesma forma que no papel. Como a tela muitas vezes é menor que um papel, detalhes de fontes com serifas podem ser perdidos se ela for muito pequena. Figura 17: Exemplo de fonte com serifas: Times New Roman Fonte: DIEMER (2012) Fontes decorativas devem ser deixadas apenas para cabeçalhos, mantendo o conteúdo do website sempre legível. A cor da tipografia é outro elemento que deve ser levado em conta já que serve também como auxílio para memorização das informações. Se mal aplicada o resto dos elementos falham, pois os usuários não conseguem fazer a leitura dos textos. Para que isso não ocorra, deve-se usar cores que contrastem com o fundo do website de maneira que o texto fique legível, não causando cansaço nos olhos de

54 53 quem está fazendo a leitura. A melhor combinação a ser feita nesse caso, seria usar um texto preto em um fundo branco 8, e nunca usar uma combinação como azul e verde ou vermelho e verde que causam irritação e sensibilidade ótica, além de possuir pouquíssimo contraste tornando praticamente impossível a leitura no caso dos usuários daltônicos. Segundo Farina (2006), devemos considerar também o tamanho da fonte para a aplicação de uma cor que seja mais leve ou pesada. Cores escuras, em tipos sobre fundos também escuros, mas diferentes, resultam praticamente ilegíveis qualquer que seja o tamanho do tipo. As cores claras devem colocar-se em tipos não muito pequenos, especialmente se o fundo for vermelho, verde, roxo ou azul-escuro. O cinza geralmente não apresenta muita visibilidade, mesmo quando aplicamos sobre ele uma tipografia de tamanho grande (FARINA, 2006, p. 24). Abaixo, figura que mostra o nível de legibilidade de diferentes combinações de cores para a web. Figura 18: Nível de Legibilidade de diferentes combinações de cores Fonte: NIELSEN, 2006, p Além da cor, o tamanho da tipografia também é de extrema importância dentro de uma página da web. Seu tamanho não pode ser muito pequeno, tendo em vista que alguns leitores possuem uma visão reduzida, sendo assim, Nielsen (2006), recomenda que o tamanho do tipo para o conteúdo e textos do site sejam entre 10pt 8 Texto positivo

55 54 e 12pt para público em geral, adolescentes e adultos, 12pt a 14pt para idosos, pessoas com deficiências visuais, crianças e outros leitores iniciantes. Tamanhos menores podem ser utilizados em rodapés e outras informações que não sejam tão relevantes. Títulos de páginas devem ter entre 14 e 20 pontos. Figura 19: Escala Tipográfica Fonte: < Para o autor há quatro diretrizes fundamentais para o texto, sendo elas: Utilizar um tamanho de fonte comum com 10 ou mais pontos; Evitar fundos visualmente poluídos; Utilizar textos preto sobre fundos brancos; Manter o mínimo possível de texto gráfico, texto com todas as letras em maiúsculas e texto em movimento (NIELSEN, 2007, 215). Outro aspecto tipográfico apresentado por Niemeyer (2003) é que o tipo possui algumas espécies de caracteres no alfabeto latino como: Maiúsculas também chamadas de caixa alta, pois antigamente os criadores de tipografia guardavam suas criações na parte superior das gavetas (caixa); Minúsculas ou caixa baixa surgiram na idade média através das modificações e transformações dos tipos maiúsculos; Versaletes caixas altas com altura semelhante à altura-x; Ligaturas minúsculas unidas por ascendentes (ff, fi, tt), são raramente incluídas em fontes digitais; Ditongos maiúsculas ou minúsculas unidas por suas hastes, representam fonema próprio; Acentos gráficos Nas fontes digitais são acompanhados pelas letras às quais se referem; Algarismos podem ou não ser alinhados pela linha de base (1, 3, 4 e 6); Frações (,, ); Sinais de pontuação (. ; :? { } <> - ); Símbolos monetários ($ ); Símbolos de operações matemáticas (+, =); Símbolos comerciais (&,,, etc).(niemeyer, 2003, p. 29)

56 Anatomia Tipográfica Assim como o corpo humano, as letras possuem diversos componentes individualmente identificáveis. As partes principais que compõem os tipos segundo Niemeyer (2010) são: hastes (linhas verticais), barras (horizontais), barrigas e bojos (curvas ou circulares), as ascendentes e descendentes, montantes, ápices, vértices, serifas e esporas, e ocos. Nenhum caractere possui todos esses elementos juntos. Figura 20: Anatomia da Fonte Fonte: NIEMEYER, 2010, p. 34.

57 Classificação e Identificação A expansão dos bens e serviços comerciais durante Revolução Industrial fez com que houvesse uma grande distribuição de produtos manufaturados, e com isso surgiu a necessidade de uma variedade maior de estilos tipográficos, pois cada fabricante buscava ter uma identidade própria dentro do mercado. Sendo assim, Alexander Lawson 9 idealizou um método simplificado para o reconhecimento e categorização dos tipos. As categorias dentro do sistema de Lawson incluem letras negras, Estilo Antigo (Veneziano, Aldino-Francês e Holandês-Inglês), transicional, moderno, serifas quadradas, sem serifa, script-cursivo e display-decorativo. Figura 21: Fonte Old English Text MT - Letras Negras Fonte: DIEMER (2012) Figura 22: Fonte Centaur - Estilo Antigo Fonte: DIEMER (2012) 9 Amante de livros finos e impressão fina. Dedicou seu tempo, conhecimento e energia para educar os jovens na absorvente história da impressão. Ensinou tipografia na RIT (Rochester Instituto de Tecnologia) de 1947 a Publicou alguns artigos e livros acadêmicos. Seu trabalho mais conhecido é Anatomia de um tipo de letra (David R. Godine, 1990). Foi reconhecido em todo o país (EUA) como uma autoridade na história, design e desenvolvimento de tipos de impressão. Fonte: < (Tradução da autora)

58 57 Figura 23: Fonte Baskerville Transicional Fonte: DIEMER (2012) Figura 24: Fonte Bodoni BT Estilo Moderno Fonte: DIEMER (2012) Figura 25: Fonte Candida BT Serifas quadradas Fonte: DIEMER (2012) Figura 26: Fonte Futura Sem Serifas Fonte: DIEMER (2012)

59 58 Figura 27: Fontes Script e cursiva. A primeira (esquerda) BrockScript e a segunda Pelican Fonte: DIEMER (2012) Figura 28: Exemplos de fontes decorativas. Jokerman e Rosewood Std Regular Fonte: DIEMER (2012). Ao escolher uma tipografia para um website, deve-se optar por aquelas que já estão disponíveis nos computadores e navegadores dos usuários. Isso se justifica, pois as fontes digitais como a verdana e calibri, possuem altura de x maior, proporcional ao tamanho das hastes tornando a leitura mais legível. Se utilizar fontes diferentes, corre-se o risco dos textos não aparecerem da forma desejada no navegador do usuário. Para que isso não ocorra, pode-se observar os critérios relatados até aqui, (anatomia tipográfica, classificação) de modo que sejam observados critérios de legibilidade e leiturabilidade para visualização em tela Cores Ao escolher uma cor para uma comunicação visual, devemos levar em conta alguns aspectos que podem influenciar diretamente na compreensão de um projeto. Segundo Farina (2006), a cor é uma linguagem individual, portanto, as pessoas reagem a ela conforme suas condições físicas, influência do meio em que vivem, sua educação, temperamento, idade etc.

60 59 As cores influenciam o ser humano e seus efeitos, tanto de caráter fisiológico como psicológico, intervêm em nossa vida, criando alegria ou tristeza, exaltação ou depressão, atividade ou passividade, calor ou frio, equilíbrio ou desequilíbrio, ordem ou desordem etc. As cores podem produzir impressões, sensações e reflexos sensoriais de grande importância, porque cada uma delas tem uma vibração determina da em nossos sentidos e pode atuar como estimulante ou perturbador na emoção, na consciência e em nossos impulsos e desejos (FARINA, 2006, p. 2). As cores têm efeitos tanto positivos quanto negativos, e como dito, tudo depende do contexto e da resposta gerada pelas pessoas que as observam. Segundo o autor, o significado de algumas cores, na cultura ocidental podem ser: Branco: Aspectos Positivos Limpeza, inocência, pureza. Aspectos Negativos Frieza, Vazio, Estéril. Vermelho: Aspectos Positivos Força, coragem, paixão, liderança. Aspectos Negativos perigo, raiva, agressividade, dominação. Amarelo: Aspectos Positivos Alegria, otimismo, energia, prosperidade. Aspectos Negativos Covardia, irritação, impetuosidade, atenção, cuidado. Marrom: Aspectos Positivos calor, naturalidade, maturidade. Aspectos Negativos sujeira, tristeza, depressão. Verde: Aspectos Positivos Naturalidade, tranquilidade, relaxamento, vegetação, segurança, prossiga livre. Aspectos Negativos Ciúme, inexperiência, ganância. Azul: Aspectos Positivos Força, confiabilidade, autoridade. Aspectos Negativos Frieza, depressão, abatimento

61 60 Para que o webdesigner acerte sempre na escolha das cores para o layout do site, e para que ele fique agradável aos olhos dos usuários, existem algumas combinações de cores que são recomendadas segundo Damasceno (2005), Amarelo X Azul Combinação original e que agrada a maioria dos usuários. É recomendado que se teste os tons de azul mas claros e acinzentados, e aproveitar o amarelo puro (#FFFF00) na maioria dos detalhes pequenos e linhas de composição do layout. Verde x Branco O verde é uma cor que deve ser usada com muito critério e moderação, já que diversos tons têm a propriedade de desagradar os olhos (como o verde bandeira). Sendo assim, recomenda-se esta combinação a partir de tons de verde mais metálicos e levemente azulados (#78ª996) que combinados com o branco, sugerem limpeza e bom gosto. Azul X Cinza Combinação fria, mas muito agradável. Alguns tons de azul devem ser usados com cautela, como por exemplo o azul puro (#0000FF). Ele remete aos primeiros padrões de web e, portanto, é uma cor ultrapassada. Além do mais é uma cor muito forte, e se aplicada em grandes áreas, tende a desagradar os olhos. Optar sempre por tons de azul acinzentado em grandes áreas. Qualquer tom de cinza é permitido, desde o mais claro até o grafite, mas deve-se misturar azul escuro e grafite com cautela, para que o visual não fique pesado. Amarelo X Cinza X Laranja O amarelo e o laranja são cores alegres e quentes e, se combinadas com o cinza, conferem um ar moderno e original ao website. Bege x Branco O bege (#DAD1BA) é uma tonalidade muito suave e pode ser combinada livremente com o branco, compondo websites para qualquer público alvo. É a combinação mais versátil de todas. (DAMASCENO,2005, p ) Ainda, de acordo com a autora, ao mesmo tempo em que se têm cores que juntas formam a combinação perfeita para uma página, há cores que não são recomendadas a serem usadas em um website: Verde x Amarelo O verde é uma cor difícil de combinar, por isso é melhor que se utilize ele com cores neutras. Além disso, os tons de verde são desagradáveis aos olhos numa tela de monitor. O amarelo é muito vivo e tende a brigar com o verde, esteja ele em qualquer tom. Vermelho x Preto O vermelho e o preto são cores que transmitem muito peso e sensualidade e podem intimidar os usuários.

62 61 Vermelho X Verde Assim como o verde e amarelo, as cores brigam entre si, já que o verde não é neutro e o vermelho impõe-se sem cerimônias. Roxo x Preto O roxo é uma bonita cor, porém estranha. Pode fazer sucesso em sites com layouts mais divertidos e jovens, quando levemente mais claro e combinado com cores alegres, como o amarelo. Ainda assim, o roxo traz em si a sensação de mistério e medo, e unido ao preto, sugere morbidez. Branco x Amarelo Da mesma maneira que as cores escuras tendem a pesar num website, cores muito claras desagradam os olhos com a mesma intensidade. Apesar de ser uma cor muito alegre, o amarelo puro, quando combinado ao branco, tende a ficar mito apagado e dói nos olhos do usuário do website. (DAMASCENO, 2005, p ). Ainda, de acordo com a autora, para que se desenvolva o layout de maneira satisfatória, existem algumas recomendações gerais. Cuidado redobrado ao utilizar cores como: roxo e preto. Roxo devido aos efeitos que ele causa aos olhos e nos usuários, o preto evitar usar como cor de fundo, pois sugere amadorismo e dificulta a leitura; Evitar misturar dois tons quentes e predominantes na aparência geral de um layout; procurar sempre quebrar o calor com algum tom frio; Cuidado ao utilizar dois ou mais tons muito luminosos como únicos em um website (por exemplo, branco e amarelo tendem a ferir a vista tanto quanto um site muito escuro); Evitar combinar apenas preto e cinza em um portal ou website muito visitado. Quebrar a monotonia com uma cor mais alegre; Ter extremo cuidado com algumas tonalidades de verde; Observar o publico alvo do seu website. Isso determinará a utilização de cores, como o rosa, restrita basicamente a sites femininos ou infantis; Prestar atenção na legibilidade do website. Cores muito escuras tendem a ofuscar a leitura dos textos, mesmo quando eles estão definidos com cores claras (DAMASCENO, 2005, p. 39). A importância de se ter uma grande atenção voltada às cores utilizadas em um website, justifica-se, pelo fato de que mais de 80% da percepção humana se dá através da visão, e os outros 20% são divididos entre os outros sentidos 10. Se aplicadas de maneira correta, a cor poderá servir de guia para o usuário, conforme o grau de importância que o projetista colocar para cada elemento. É importante também saber escolher as cores a serem usadas em uma página de website, não basta apenas ter uma cor ideal, deve-se fazer um estudo de várias combinações de 10 Audição, tato, olfato e paladar

63 62 cores 11 para posteriormente decidir quais delas se encaixam melhor com o projeto. Após decidir que cores serão aplicadas, fatores como o tema e o público alvo tem que ser levados em conta, para que a criação fique de acordo com o que o cliente quer passar para o usuário. No caso da criação de um website empresarial, recomenda-se usar as cores que façam parte de sua identidade visual, ou em outro caso, delimitar poucas cores 12, para auxiliar na organização dos elementos dentro de uma página, não as deixando confusas de modo que o usuário fique perdido não sabendo no que deve prestar atenção primeiro Conteúdo O conteúdo é o foco principal dos usuários de websites. Segundo Nielsen (2000), quando os internautas chegam a uma página olham imediatamente para a principal área de conteúdo da página e buscam títulos e outras indicações do teor da página. Por isso, devemos ter um grande cuidado com o que será colocado nessa área. Um website que possui intenso conteúdo, como os portais de notícias, é parecido com jornal 13 no qual a primeira página mostra as manchetes dos principais fatos do dia e que remetem às páginas internas para que o usuário veja mais detalhes. O jornal é cuidadosamente diagramado de forma que o conteúdo é apresentado de forma condensada. Possui cabeçalho com o nome e a identificação do jornal, títulos grandes que realçam as principais notícias e informações, imagens que as identificam, além de outras chamadas que possuem fontes em tamanhos menores. Muitos webdesigners não gostam de seguir o modelo que um jornal sugere para dispor as informações, porém a forma como é organizado, com chamadas para seções internas, organizadas de forma hierárquica é uma grande ideia, pois quem acessa uma página com esse padrão pela primeira vez, irá certamente identificarse com o formato, já que está acostumado a ler ou ao menos já tiveram um contato 11 Páginas 44 a 46 deste texto 12 No máximo seis e que fiquem dentro de um contexto e em harmonia 13 Esse assunto pode ser estudado mais aprofundadamente em GROSSMANN (2008)

64 63 direto com um jornal impresso ao longo de suas vidas, portanto exploraria com facilidade o conteúdo. A diferença entre um website e um jornal, é que um jornal é feito para ser degustado como fala em seu livro DAMASCENO (2005), enquanto um website deve ser otimizado para uma leitura rápida. Isso se deve pelo fato de que os usuários não lêem os textos completos dentro dos sites, por não terem paciência, além de ser algo desconfortável e a leitura ser mais lenta que no papel. Ao invés de ler os textos, os usuários escolhem algumas palavras chave, sentenças e parágrafos que lhes chame atenção, pulando as partes que menos lhes interessam, por isso, é importante que os textos sejam breves e de fácil entendimento. Segundo NIELSEN (2006), a simples visão de uma página repleta de textos sugere que os usuários terão um grande trabalho para encontrar informações desejadas, e isso gera uma repulsa por parte deles. Ainda, de acordo com o autor (2006, p. 80), conteúdo inútil não apenas irrita as pessoas; é uma das principais causas de vendas perdidas. Por isso, os textos tem que ser breves, escaneáveis e acessíveis, devemos usar a metade das palavras que usaríamos em uma mídia impressa. Além dos textos, os títulos das páginas também merecem atenção, eles devem ser claros, de forma que as pessoas entendam o que encontrarão lá O modelo padrão de websites baseados em jornal recomenda-se aos portais que têm grande quantidade de informações, que possuem um público-alvo bastante diverso. Nada impede que se crie um layout diferente, no caso de um site ser menor e possuir menos informações, porém é preciso sempre estar atento ao público-alvo para que suas necessidades sejam atendidas. Para que uma página possua uma organização visual satisfatória é extremamente importante que ela seja diagramada de maneira que os itens fiquem em equilíbrio e dispostos corretamente, já que a diagramação e o enquadramento dos itens de uma página influenciam diretamente na legibilidade de um conteúdo. Ao escrever um texto dentro da página, é necessário cuidar de seu alinhamento, recomenda-se deixar o texto alinhado à esquerda, pois facilita a leitura na tela. O alinhamento à direita ou centralizado além de dificultar a leitura pode confundir os usuários inexperientes resultando em um não entendimento do texto. A extensão da linha também deve ser cuidada, linhas muito curtas prejudicam a

65 64 leitura, pois tendem a fragmentar o texto e tornam difícil o entendimento. A extensão adequada deve ser em torno de 60 caracteres (de 8 a 12 palavras) Planos de Fundo O plano de fundo ou background é um elemento importante na construção de uma página, pois apresenta ao usuário o tema e as principais características do website. Ao contrário de algum tempo atrás, o background é bastante valorizado justamente por apresentar inúmeras possibilidades de uso. Pode ser composto tanto por uma cor sólida, quanto por texturas, imagens ou algo mais elaborado que envolva textos, preenchendo o fundo do website, inovando e atendendo requisitos da página. Porém, o uso de imagens em planos de fundo influencia no carregamento das páginas, podendo torná-las mais lentas. Sendo assim, o uso de cores neutras seria o mais indicado. O plano de fundo deve contribuir para a experiência dos usuários, e trabalhar a favor do website, direcionando o olhar do usuário para o conteúdo, se mal feito, pode se tornar algo desagradável e confuso. É desaconselhável o uso de texturas fortes que causam irritação ótica, tornando cansativa a visão e dificultando a leitura Ícones A palavra ícone vem do grego eikon e significa imagem. Na área da web, ícone não é apenas uma imagem, segundo a semiótica peirceana 14, ícones são imagens que tem alguma relação de semelhança entre a representação e o objeto que, se for convincente, permite que usemos a representação sem tomar conhecimento do objeto. Ou seja, são símbolos visuais que recuperam lembranças informativas relacionadas a eles. Para LEITE (1998), signos de interface ou ícones, 14 Ciência que tem por objeto de investigação todas as linguagens possíveis.

66 65 dizem respeito a qualquer distinção simbólica que adquira significado para o usuário ou para o designer. A vantagem de usar ícones nas páginas web, é que além de fazerem parte dos mecanismos de interação, eles representam e substituem através de suas imagens, textos e expressões que ocupariam mais espaço na página, porém a desvantagem deles é que não são reconhecidos tão rapidamente como os textos. Em suas primeiras experiências os usuários podem cometer erros no reconhecimento de um ícone, resultando em uma experiência negativa com o website que está sendo acessado pela primeira vez, com isso o internauta passa a rejeitar a página não querendo voltar a acessá-lo. Com o avanço da tecnologia, muitas ferramentas foram criadas para o desenvolvimento de websites. Muitos projetistas utilizam essas ferramentas com o intuito de inovar os ícones, o que, de certa forma, não é algo bom. Ao criar um novo ícone, é importante não fazer grandes modificações tendo em vista que os usuários já estão acostumados com um padrão, a não ser que o objetivo do novo ícone seja chamar atenção para ele próprio, do contrário, apenas os confundirá. Além disso, as cores, formas e os outros detalhes dos ícones devem ser baseados em critérios visuais, para que a diferença entre eles fique visível e identificável, mesmo se vistas de relance. No caso dos websites que possuem usuários frequentes, um ícone pode tornar a navegação mais simples através da rápida visualização desses elementos, já que o significado deles são conhecidos pelos internautas, que sabem para onde serão direcionados. Os ícones possuem várias funções e significados, cabe ao designer definir se ele servirá apenas para embelezar, agilizar ou desorientar o usuário. Ícones agilizadores jamais devem ficar juntos com aqueles que servem apenas para enfeitar o website, caso contrário, os dois perdem a força, e isso ocorre porque eles não são percebidos separadamente e sim, como se fizessem parte de uma série. Se bem projetados, os ícones trabalharão a favor do website e contribuirão para sua usabilidade, passando para os usuários uma primeira impressão de que ele

67 66 é fácil de ser usado. Websites que possuem grande concorrência e são acessados poucas vezes por usuários, saem na frente quando possuem usabilidade percebida (facilidade de uso). Damasceno (2005) apresenta em seu livro os ícones em três grupos diferentes, baseando a divisão nos significados aparentes, ou aquilo que transmitem aos olhos e à percepção do usuário: Ícones Subjetivos: São ícones que utilizam imagens remetendo à ideia de algo, seja através de clichês ou de associações. Em outras palavras, o significado que os ícones subjetivos transmitem é puramente ideológico e metafórico. Um exemplo de ícone subjetivo é a simbologia de uma casinha para indicar que aquele botão ou atalho o leva de volta à home Page do site. (DAMASCENO, 2005, pág. 359) Figura 29: Exemplo de Ícone Subjetivo Fonte: < Ícones subjetivos são frequentemente usados para representar categorias abstratas, como por exemplo, bate papo, cujo não possui uma imagem concreta ou elemento específico que o ilustre. O segundo ícone indicado pela autora é: Ícones Objetivos: São ícones compostos por imagens que descrevem literalmente uma palavra ou expressão. Ou seja, não se utilizam de significados ideológicos (DAMASCENO, 2005, p. 360). Um ícone que indica uma seção de livros é um exemplo de ícone subjetivo.

68 67 Figura 30: Exemplo de ícone objetivo Fonte: DAMASCENO (2005, p. 360). Ícones objetivos são mais fáceis de serem entendidos pelos usuários de um website, embora quase não sejam usados, talvez porque são menos originais e por indicar categorias menos frequentes de aparecer em um website. A terceira categoria de ícones, segundo a mesma autora, é: Ícones Abstratos ou bullets: É o tipo mais frequente de ícone, existindo na grande maioria dos websites. Correspondem às setinhas, marcadores, dentre outros. (DAMASCENO, 2005, p. 360) Abaixo alguns exemplos de ícones coletados de diferentes websites, que representam a página inicial de um site, busca, contato, sair/desligar e e- commerce/compra online. Página Inicial Busca

69 68 Contato Sair/Desligar E-commerce/compra online A utilização dos ícones como podemos ver, serve para auxiliar e facilitar a navegação, porém, como dito, deve-se cuidar ao utilizá-los para que não confundam os usuários, desta forma, um ícone deve ser bem estudado antes de ser aplicado. No capítulo seguinte, será apresentado o estudo de caso de um website de uma empresa de Geotecnia e Fundações localizada em Goiania GO.

70 4 PROJETO GRÁFICO Este capítulo apresenta um estudo de caso de projeto de design gráfico de uma interface de website. O projeto gráfico desta monografia tem por objetivo melhorar o desempenho interativo da interface do website da empresa Geosul Geotecnia e Fundações através de um redesenho do mesmo onde serão aplicados os conhecimentos adquiridos ao longo do curso de Design Gráfico na Universidade Regional do Noroeste do Estado do Rio Grande do Sul UNIJUI. O desenvolvimento deste projeto foi baseado em uma metodologia de projeto, uma vez que esta é fundamental na área do design, por estabelecer etapas e um passo-a-passo a ser adotado na elaboração e posterior execução do mesmo. Por ser essencial no desenvolvimento do projeto, servirá como base para a apresentação deste estudo de caso indicando a sequência de etapas propostas pela metodologia a seguir. 4.1 Metodologia A metodologia utilizada para este projeto de monografia será baseada na metodologia de Fuentes (2006) que na íntegra se estrutura da seguinte forma: Figura 31: FUENTES (2006) A metodologia abaixo foi reestruturada tomando a de Fuentes (2006) como base, sendo que algumas etapas foram eliminadas e outras acrescentadas para se adequar ao projeto gráfico do website como segue a seguir:

71 70 Figura 32: DIEMER (2012) A seguir será explicada a estrutura da metodologia acima que será utilizada ao longo do projeto gráfico Identificação das Necessidades O início deste projeto deu-se pela necessidade do redesenho do layout do website da empresa Geosul Geotecnia e Fundações, tendo em vista que o mesmo já passava por algumas modificações, porém não havia sido reestruturado completamente. Com o intuito de melhorar a estrutura da interface, elementos de interação e aplicar os conhecimentos adquiridos ao longo do curso de Design Gráfico, foi sugerido aos proprietários o estudo e criação de um novo layout para a empresa, o que foi aprovado por eles Definição do projeto: Problema Serão expostos nesta etapa os problemas e dificuldades encontrados ao acessar o website da Geosul.

72 Problematização do website A interface bem como a programação do website da empresa Geosul Geotecnia e Fundações foi desenvolvida em Agosto de 2011 pela autora desta monografia. O website foi desenhado, inicialmente, de maneira diferente do que se encontra atualmente disponível na web, era um layout simples, sem muitas informações em função da empresa estar começando no mercado. Aos poucos, a estrutura foi sendo alterada e, um novo desenho de interface foi criado, porém, por não possuir muito conhecimento na área de programação, algumas mudanças no layout tiveram que ser feitas, para que a autora conseguisse programar o website, de maneira que o resultado final ficasse da melhor maneira possível. O layout atual do website passou por algumas pequenas modificações ao longo do tempo, a interface foi aos poucos sendo melhorada de forma que as imagens e informações ficassem dispostas de maneira mais agradável. Mesmo com todas as modificações, a interface gráfica ainda não está de acordo com alguns aspectos visuais, de usabilidade e tampouco com as expectativas da criadora e dos proprietários. Sendo assim, sugeriu-se um estudo e redesenho do layout para o website da empresa, o que foi aprovado pelos administradores da Geosul Coleta e análise de dados: Nesta etapa será feita uma coleta de dados referente à empresa e seus concorrentes. Para levantamento de dados junto ao publico dos usuários, será realizada uma pesquisa conforme proposta de GROSSMANN (2007). Os dados levantados nesta pesquisa exploratória fornecerão subsídios para o desenvolvimento do projeto gráfico.

73 Coleta de dados Em uma conversa com os proprietários da Geosul, obteve-se algumas informações relevantes para a criação do novo layout. A principal das informações é que o novo layout deverá manter a simplicidade e as cores que fazem parte da identidade visual da empresa. Conhecer a história da empresa, serviços oferecidos, concorrentes, missão, visão e valores, são fundamentais para que a criação fique de acordo com aquilo que a empresa e seus administradores querem passar para seus clientes e colaboradores. A Geosul é uma empresa que está no mercado há um pouco mais de dois anos. É localizada em Goiânia Goiás e presta serviços na área de Geotecnia e Fundações, principalmente em obras de médio e grande porte como Usinas Hidrelétricas (UHE s), Pequenas Centrais Hidrelétricas (PCH s), Usinas Eólicas e de Pavimentação. Possui uma grande preocupação com o meio ambiente, tendo em seu quadro de funcionários uma Engenheira Civil, pós-graduada em Gestão Ambiental e mestranda em Geotecnia. Entre seus principais concorrentes estão as empresas: Fudsolo, Sondosolo, Sete Engenharia, Progeo, Rosseti. Todas as empresas concorrentes possuem atualmente uma página na web. A Geosul é uma empresa que a cada dia vem conquistando mais espaço no mercado de trabalho. Possui uma estrutura de equipamentos, máquinas e veículos novos, com ano de fabricação 2010, 2011 e 2012, para poder cumprir rigorosamente os prazos programados e objetivos dos seus clientes e parceiros, resultando em uma grande satisfação e alcançando um produto final que supera as expectativas deles. A missão, visão e valores da empresa são: Missão - A Geosul visa atender às necessidades de seus diversos clientes nas áreas de Geotecnia e Fundações, oferecendo segurança e pontualidade nos serviços prestados, proporcionando melhor qualidade de vida para a sociedade. Visão - Ser reconhecida a nível nacional como uma empresa de referência na área de Geotecnia e Fundações, pela sua dedicação, inovação e qualidade nos serviços prestados.

74 73 Valores o Transparência com clientes e colaboradores o Valorização profissional o Comprometimento com o Meio Ambiente e a Segurança do Trabalho o Qualidade nos trabalhos executados o Ética profissional A empresa possui atualmente um websitedisponível no endereço < Além do briefing realizado com o cliente, um questionário com 11 (onze) perguntas foi aplicado a 15 (quinze) pessoas com idades entre 20 (vinte) e 55 (cinquenta e cinco) anos e ambos os sexos, com o objetivo de saber o grau de experiência de navegação/uso da internet dos usuários com o computador e a satisfação deles em relação à interface do website da Geosul que encontra-se atualmente disponível online. O questionário aplicado (ANEXO A) solicitava que um grupo de usuários acessasse o website da empresa Geosul e interagissem com ele, procurando por notícias, fotos, serviços, localização da empresa, histórico e contato, isso para que elas se interassem um pouco mais do que se trata a empresa e para que pudessem responder questões referentes à organização e encontro de informações. O layout do website apresentado às pessoas para responderem a pesquisa segue abaixo.

75 Figura 33: Página inicial do website da empresa Geosul Fonte: DIEMER (2012) 74

76 75 Figura 34: Página Notícias do website da empresa Geosul Fonte: DIEMER (2012) Figura 35: Página Empresa do website da Geosul Fonte: DIEMER (2012)

77 76 Figura 36: Página Serviços do website da empresa Geosul Fonte: DIEMER (2012) Figura 37: Página Obras do website da empresa Geosul Fonte: DIEMER (2012)

78 77 Figura 38: Página Contato do website da empresa Geosul Fonte: DIEMER (2012) A seguir, serão apresentados os resultados obtidos com a pesquisa, baseada nas técnicas de interação, seguida por aplicação de questionário. 4.3 Análise de Dados Após realizar a pesquisa com um grupo de 15 (quinze) pessoas, foi criada uma planilha onde as respostas dos entrevistados foram organizadas lado a lado para somar os resultados obtidos e em seguida gerar um gráfico de cada pergunta. As opções de resposta para cada pergunta são representadas pelas colunas (eixo x), sendo que a altura delas é proporcional ao número de usuários que optaram por aquela opção de resposta (eixo x). Os dois primeiros gráficos (FIGURA 39 e FIGURA 40), a seguir, mostram os resultados referentes ao grau de experiência do usuário com a internet.

79 78 Figura 39: Questão 1 Na figura acima podemos observar que a maioria dos usuários, 86,7% utilizam o computador há mais de 4 (quatro) anos e 13,3% são um pouco menos experientes utilizando o computador a cerca de 2 a 3 anos. O tempo médio gasto com a internet varia conforme mostra a figura 40, mesmo assim observa-se que a maioria, 53,3%, gasta mais de duas horas por dia navegando na internet, e 6,7% gasta em torno de duas horas por dia, podendo ser considerados usuários experientes. Enquanto os outros que navegam menos de duas horas por dia na internet ou distribuem o tempo ao longo da semana, podem ser considerados usuários intermediários e inexperientes conforme o tempo de uso do computador e tempo gasto com a internet.

80 79 Figura 40: Questão 2 Ao avaliar a interface gráfica (Figura 41) do website da empresa Geosul, seguindo as recomendações deixadas no questionário, os usuários em sua maioria, 53,3%, classificaram a interface como sendo fácil de usar, 26,7%, muito fácil de usar, 13,3%, difícil de usar e 6,7%, muito difícil de usar. Figura 41: Questão 3

81 80 Figura 42: Questão 4 As cores usadas agradaram a maioria dos usuários, apenas 20% deles ficaram razoavelmente satisfeitos. A justificativa da não aprovação das cores segue no gráfico abaixo. Figura 43: Questão 5

82 81 Embora não tenham ficado totalmente insatisfeitos com a combinação de cores, os usuários fizeram questão em justificar a não aprovação. Dentre os fatores que justificam, as cores fortes / excesso de contraste estão em primeiro lugar com 66,7%, em segundo lugar, o fato das cores não fazerem referencia à marca da empresa também foi um fator decisivo na não aprovação das mesmas, a porcentagem neste quesito é de 33,3%. Figura 44: Questão 6 Em relação à legibilidade da tipografia (Gráfico 6) utilizada e seu tamanho (Gráfico 7), a maioria sentiu-se satisfeita ou muito satisfeita. De toda mostra, apenas 6,7% disseram que a legibilidade e o tamanho do tipo não estava de acordo.

83 82 Figura 45: Questão 7 Figura 46: Questão 8 A questão acima visava saber o grau de contraste entre o fundo e o texto, já que a parte onde contém textos informativos no website possui um fundo cinza claro. A maioria, 93,3%, respondeu que sim, havia contraste suficiente de maneira que as informações pudessem ser lidas. De toda amostragem, apenas 6,7% não souberam responder essa questão.

84 83 Figura 47: Questão 9 Para a maioria dos observados, a disposição / organização das imagens facilitou o uso da interface gráfica. 6,7% disseram que a disposição interferiu na facilidade tendo que ser organizadas de maneira diferente. Figura 48: Questão 10

85 84 De maneira geral, o website da Geosul que encontra-se atualmente online agradou os observados. 80% sentiram-se satisfeitos com o que lhes foi apresentado, 13,3% sentiram-se muito satisfeitos e apenas 6,7% sentiram-se insatisfeitos. Para a maioria, a interface é simples e fácil de ser usada, possui contraste suficiente entre fundo e texto e a disposição dos elementos também estão de acordo, de forma que facilitam o uso da mesma. Embora, de maneira geral a maioria tenha se sentido satisfeita com a interface, na última questão apontaram suas maiores dificuldades ao interagir com o website. 13,3% não conseguiram achar botões de acionamento, como por exemplo o link noticias, que encontra-se apenas na página principal. Outro fator apontado foi a questão das imagens dos serviços prestados pela empresa que encontram-se na página principal. 6,7% dos observados disseram que as fotografias deveriam abrir no mesmo menu de imagens da página serviços e não em páginas separadas. Figura 49: Questão 11

86 Desenvolvimento do Ante Projeto: Geração de Idéias Aqui serão realizados alguns rafes (roughs) de layout levando em conta os dados e resultados obtidos com a pesquisa Geração de Ideias Após realizada a pesquisa do grau de satisfação das pessoas com o website da Geosul e o briefing com os proprietários da empresa, constatou-se alguns aspectos que devem estar presentes no redesenho do novo layout.levando em conta a pesquisa e os comentários das pessoas ao respondê-la, criou-se alguns rafes onde os aspectos citados foram aplicados. O principal problema, embora muitos não tiveram dificuldades em achar as informações, foi a falta do link notícias que não constava no menu principal, e sim somente na página inicial do website.sendo assim, para facilitar o encontro das informações a respeito da empresa e melhor organizar a página, no redesenho do layout dois links extras, notícias e clientes foram acrescentados como podemos observar nas Figuras 50, 51, 52, 53, 54. Os redesenhos não tiveram grandes modificações em sua estrutura em função do resultado da pesquisa, que apontou grande satisfação com a facilidade de uso e disposição dos elementos.

87 86 Figura 50: Rough 01 Figura 51: Rough 02

88 87 Figura 52: Rough 03 Figura 53: Rough 04 Figura 54: Rough 05

89 Seleção de Ideias Embora não tenham descartado nenhuma das ideias acima, os proprietários da Geosul selecionaram o Rough 05 como a melhor opção para o novo layout do website. Em função dos resultados obtidos com a pesquisa, para eles o novo desenho deveria ser simples, contendo na página principal as informações necessárias para que os usuários conheçam do que se trata a empresa e que serviços prestam no mercado, sendo assim, o último desenho é o que melhor se encaixa com esses quesitos. Além de, este último atender os aspectos requeridos, o menu inferior também foi um fator decisivo na escolha, já que facilita o encontro das informações que não possuem link específico Implementação em software Com o rough selecionado parte-se para a implementação no software. O programa utilizado no desenvolvimento do layout foi o Corel Draw X5. O padrão de cores escolhidas para a aplicação foram tons de verde, branco e cinza. As cores serãomantidas conforme no layout do atual website, porém desta vez, o verde escuro serálevemente clareado para diminuir a aparência pesada que possuía e aplicado em degradê para que não fique com uma aparência dura. O cinza também será clareado e aplicado somente no background 15. A marca da empresa continuará sobre o fundo verde por exigência dos proprietários e com a autorização dos mesmos, a cor azul que possui no mapa da letra O será alterada para o verde para que não interfira no restante do layout. A tipografia escolhida para este projeto é a Arial, por ser uma fonte simples e de família tipográfica sem serifa, tornando a leitura na tela do computador mais legível que as fontes com serifas. O tamanho da tipografia escolhida é de 12 pontos para o texto e 14 para títulos. 15 Plano de Fundo do website

90 Finalização Na Figura 55 é apresentado o layout final da homepage 16 da nova proposta para o website da empresa Geosul Geotecnia e Fundações. Atendendo aos requisitos dos proprietários, a página inicial contém imagens que destacam os serviços prestados pela empresa bem como as obras nas quais a empresa presta seus serviços. Esses dois itens deveriam estar destacados, pois servem para identificar a empresa perante àqueles que não conhecem os serviços da mesma. Ao clicar em uma das imagens, serviços ou obras, o usuário será direcionado à pagina especifica de cada um deles e esta mostrará informações sobre o link seguido. Além disso, dentro da página serviços o usuário encontrará informações a respeito dos equipamentos utilizados pela Geosul e na página obras, uma galeria de fotos que, ao clicar em cima abrirá em tamanho maior mostrando as imagens e informações sobre elas. Além do acesso pela página inicial, outra maneira de acessar essas informações é navegando pelo menu principal e clicar em serviços ou obras ou ainda acessando o menu inferior. Figura 55: Layout Final Geosul Geotecnia e Fundações 16 Página Inicial

91 90 Da mesma forma que no caso anterior, quando o usuário clicar em mais para ler as últimas notícias a respeito da empresa, ele será direcionado à página específica de noticias como mostra a Figura 56. As três últimas notícias ficarão visíveis na página, caso o usuário deseje vê-la completa, deverá clicar em mais sendo direcionado à página do artigo. Para que possa ver informações mais antigas, haverá links de páginas para que o mesmo possa navegar. Figura 56: Página de Notícias

92 91 Figura 57: Página Empresa Durante a navegação o usuário poderá ainda visitar a página Empresa que mostrará o histórico e localização da Geosul. Além disso, poderá acessar também a página dos clientes da empresa e entrar em contato. Figura 58: Página Serviços

93 92 Figura 59: Página Obras A Figura 59 mostra a página de obras do website. Aqui estarão visíveis as 6 (seis) últimas obras executadas pela Geosul com uma imagem que identifique o local e poucas informações. Se o usuário desejar mais informações ou quiser ver as obras mais antigas, ele terá um link ao lado e outro numerado mais abaixo para acessar. Ao lado das obras, a galeria de fotos. As últimas imagens adicionadas estarão visíveis, para ver as mais antigas haverá uma segunda página na própria galeria como no website atual. A Figura 60 exibe a página criada para a divulgação dos clientes da Geosul. Serão colocadas as marcas das empresas e nas imagens o link que direciona ao seu website ou de contato. Ou seja, o usuário clicará na marca da empresa e será direcionado ao endereço especifico.

94 93 Figura 60: Página Clientes Na Figura 61 temos a página de contato do website. Aqui o usuário poderá entrar em contato de duas formas sendo uma delas com assunto específico que é trabalhar para a empresa. O formulário de contato contém os seguintes dados a serem preenchidos pelo usuário: Nome, , Telefone, Cidade, Estado e Mensagem. Já o formulário de Trabalhe Conosco, além dos dados citados anteriormente, contém o dado Interesse para que o usuário coloque em que área gostaria de atuar dentro da empresa. Após preencher os dados de qualquer formulário basta clicar em enviar, e caso o usuário precise limpar algum campo para deixá-lo em branco novamente, é só clicar em limpar.

95 94 Figura 61: Página de Contato Ainda nos formulários, existem dados em que o preenchimento é obrigatório, esses campos são destacados com um asterisco ao lado. Caso não forem preenchidos, um alerta (Figura 62) será emitido ao usuário e a mensagem não poderá ser enviada. Figura 62: Alerta de preenchimento de campos obrigatórios