UNIVERSIDADE DO OESTE DE SANTA CATARINA UNOESC CAMPUS DE XANXERÊ FELIPE SOMENSI

Transcrição

1 1 UNIVERSIDADE DO OESTE DE SANTA CATARINA UNOESC CAMPUS DE XANXERÊ FELIPE SOMENSI CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL. Xanxerê 2010

2 2 FELIPE SOMENSI CRIAÇÃO DE UM PANFLETO DIGITAL PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL. Trabalho de conclusão de curso apresentado ao curso de Design Gráfico, Área das Ciências exatas, da Universidade do Oeste de Santa Catarina, Campus de Xanxerê. Prof. Orientador: Aleteonir J. Tomasoni Junior Xanxerê 2010

3 3 FELIPE SOMENSI CRIAÇÃO DE UM PANFLETO DIGITAL, PARA AUXILIAR EMPRESAS DA CIDADE DE XANXERÊ NO DESENVOLVIMENTO DO SEU PRIMEIRO ENDEREÇO VIRTUAL. Trabalho de Conclusão de Curso apresentado a Universidade do Oeste de Santa Catarina, como requisito parcial a obtenção do grau de Bacharelado em Design Gráfico. Aprovado em: 07 de dezembro de 2010 BANCA EXAMINADORA Profa. Me. Ronise de Paula Universidade do Oeste de Santa Catarina Nota atribuída Prof. Me. Luiz Claudio Mazolla Vieira Universidade do Oeste de Santa Catarina Nota atribuída Prof. Esp. Aleteonir Jose Tomasoni Junior Universidade do Oeste de Santa Catarina Nota atribuída

4 4 AGRADECIMENTOS Agradeço primeiramente a Deus aos meus familiares meus amigos, agradeço também aos meus professores que sempre estiveram junto comigo durante todo esse período de faculdade e principalmente ao meu orientador Aleto.

5 5 RESUMO Hoje em dia, com o grande acesso a internet e a interação do homem com o computador, fez com que a internet criasse uma necessidade, o segundo endereço das empresas, o virtual, hoje em dia a busca por novos clientes e novas fronteiras de negociação faz com que a internet se torne algo indispensável, tornando assim empresas em potencial sempre a busca de novos diferenciais competitivo, a internet faz que isso ocorra através dos Web Sites. A presente monografia discorre sobre a criação de um portal de Internet. O Portal Xanxerê será um website que ira funcionar como centro de informações para a cidade de Xanxerê - SC. O portal é uma forma de divulgação para empresas de pequeno e médio porte. Oferecendo um serviço gratuito que pretendem criar o seu primeiro endereço virtual, e que não possuem recursos financeiros suficientes para o mesmo. O portal terá aspecto profissional seguindo os conceitos básicos do design e dos critérios de usabilidade como aproximação, contraste, alinhamento, dentre outros. Devido à grande quantidade de informações do portal, serão utilizadas ferramentas de gerenciamento de conteúdo, o gerenciador tem o objetivo de alimentar as informações básicas do portal, os sistemas de gerenciamento de conteúdo auxiliam o cliente para poder inserir informações de sua empresa, de forma concisa e de fácil manuseio. A fim de facilitar a criação deste projeto foi optado trabalhar com a metodologia do Flavio Anthero dos Santos conhecida como MD3E Método de Desdobramento em 3 Etapas, foi optado esta metodologia pela analise feito e que conclui que o método traz aspectos e características muito parecidas com a do projeto, uma delas é que a metodologia MD3E é um método aberto, com isso ele se molda conforme as necessidades do usuário, e o projeto pressuposto aqui trabalha da mesma forma é um portal de internet que se molda conforme as necessidades do usuário. PALAVRAS-CHAVE: Usabilidade. Portal. Internet. Xanxerê.

6 6 ABSTRACT Nowadays, with the great access the internet and the man's interaction with the computer, did with the internet created a need, the second address of the companies, the virtual, nowadays the search for new customers and new negotiation borders does with that the internet becomes something indispensable, turning like this always companies in potential the search of new differential competitive, the internet does that that happens through the Web Sites. The present monograph talks about the creation of a portal of Internet. The Portal Xanxerê will be a website that angers to work as center of information for the city of Xanxerê - SC. The portal is a popularization form for companies of small and medium load. Offering a free service that intend to create its first virtual address, and that and that don't have enough financial resources for the same. The portal will have professional aspect following the basic concepts of the design and of the usability as approach, contrast, alignment, among others. Due to the great amount of information of the portal, tools of content administration will be used, the manager has the objective of feeding the basic information of the portal the systems of content administration aid the customer to insert information of his/her company, in a concise way and of easy handling. In order to facilitate the creation of this project was chosen to work with the methodology of Flávio Anthero dos Santos known as MD3E Method of Unfolding in 3 Stages, this methodology was chosen for the it analyzes done and that it concludes that the method brings aspects and characteristics a lot similar to the one of the project, one of them is that the methodology MD3E is an open method, with that he is molded as the user's needs, and the project presupposed here works in the same way is an internet portal that is molded according to the user's needs. KEYWORDS: Usability. Portal. Internet. Xanxerê.

7 7 LISTA DE FIGURAS Desenho 01: Exemplo de estrutura seqüencial Desenho 02: Exemplo de estrutura hierárquica Desenho 03: Exemplo de estrutura formato teia Desenho 04: Exame quantitativo da fixação do olhar Desenho 05: Padrão F de leitura de paginas nas quais o texto predomina Desenho 06: Exemplo de uma imagem com unidade Foto 01: Exemplo de uma imagem com segregação Desenho 07: Exemplo de uma imagem com fechamento Foto 02: Exemplo de uma imagem com continuidade Foto 03: Exemplo de uma imagem com proximidade Fluxograma 01 três estilos de fontes Fluxograma 02 fontes pré-instalada na maioria dos computadores Fluxograma 03 fonte pré-instaladas e suas características Fluxograma 04 Cores e simbologia das cores Desenho 07 Etapa Central Desenho 08 Etapas Básicas Desenho 08 Gerenciamento e Documentação Desenho 09 Desdobramentos Mínimos Desenho 10 Desdobramentos Auxiliares Desenho 11 Estrutura Radial Portal Xanxerê Gráfico 01 Empresas de Xanxerê e seu Perfil com a Internet Desenho 12 Concorrente Direto Site Hagah Desenho 13 Concorrente Indireto Site tudosobrexanxerê Desenho 14 Concorrente Indireto Site redeprincesa Fluxograma 05 CheckList Site Hagah Gráfico 02 Comparativo dos concorrentes indiretos Desenho 15 Área Visível na tela do computador Desenho 16 Área aonde o olhar pode correr na tela Desenho 17 Áreas com níveis de prioridade Fluxograma 06 Conteúdo do Site Desenho 18 Quadro Conceitual Desenho 19 Painel Semântico Desenho 20 Algumas Diretrizes de NIELSEN Desenho 21 Algumas Diretrizes de NIELSEN Desenho 22 Geração de Alternativa normas de NIELSEN (2007) Desenho 23 Geração de Alternativa feita Digitalmente a partir dos Concorrentes 59 Desenho 24 Geração de Alternativa dos Menus Desenho 25 Uma norma de Usabilidade de NIELSEN Desenho 26 Dimensões dos Menus Desenho 27 Cores Padrões Concorrente Direto Site Hagah Desenho 28 Cores Padrões Concorrente Indireto Site tudosobrexanxere Desenho 29 Cores Padrões Concorrente Indireto Site redeprincesa Desenho 31 Cores Padrões site Portal Xanxerê Desenho 32 Menu horizontal principal Desenho 33 menu vertical principal Desenho 34 Algumas diretrizes de NIELSEN Fluxograma 06 Algumas Fontes Padrões... 69

8 Fluxograma 07 Algumas Fontes Padrões Desenho 35 Gerações de Alternativas do Fundo da Pagina Desenho 36 Gerações de Alternativas da Home Page Fluxograma 08 CheckList Portal Xanxerê Gráfico 03 Comparativo dos resultados do CheckList Desenho 37 Gerações de Alternativas da Estrutura Desenho 38 Conceituação da Home Page a partir das normas de NIELSEN Desenho 39 Algumas normas de NIELSEN Desenho 40 Conceituação da Home Page a partir de STANQUE e GESTALT Desenho 41 Conceitos de GESTALT Desenho 42 Link Portal Xanxerê Desenho 43 Link Busca por Empresas Desenho 44 Link Resultado da Busca por Empresas Desenho 45 Link Panfleto Digital Desenho 46 Links Empresas Desenho 47 Link Busca por Patrocinadores Desenho 48 Link Resultado da Busca por Patrocinadores Desenho 49 Links Patrocinadores Desenho 50 Link Contato Desenho 51 Sistema de Gerenciamento da marca (empresas) Desenho 51 Sistema de Gerenciamento do Histórico Comercial (empresas) Desenho 52 Sistema de Gerenciamento do Contato (empresas) Desenho 53 Sistema de Gerenciamento das fotos (empresas) Desenho 54 Sistema de Gerenciamento da marca (patrocinadores) Desenho 55 Sistema de Gerenciamento do contato (patrocinadores)

9 9 SUMÁRIO 1 INTRODUÇÃO TEMA PROBLEMA OBJETIVOS Objetivos Gerais Objetivos Específicos JUSTIFICATIVA ESTRUTURA DO TRABALHO BASES DO CONHECIMENTO Design Design Gráfico WEB DESIGN INTERNET USABILIDADE Direção do olhar na tela do Computador Percepção Visual da Forma Gestalt Unidade Segregação Fechamento Continuidade Proximidade Tipografia nas Páginas da Web Cores e Imagens Significado das Cores Nomenclatura das Imagens Digitais DESENVOLVIMENTO DO PROJETO DE DESIGN Apresentando a Metodologia Projetual Estrutura Radial Pré-Concepção RESULTADO DO PROJETO Modelações Finais CONSIDERAÇÕES FINAIS

10 10 ANEXOS REFERÊNCIAS

11 11 1 INTRODUÇÃO A internet começou a ser utilizada no Brasil, em meados de 1990, somente por Instituições de pesquisas e um pouco depois por Universidades, permanecendo, assim, até o final de 1995, em 15 anos de historia, muitas coisas mudaram, muitas soluções para o dia a dia foram surgindo graças à internet. Hoje são milhões de usuários ligados a uma só rede, cada um com um objetivo, estudo, trabalho, diversão. O Portal Xanxerê será um website que funcionará como centro de informações para a cidade de Xanxerê SC, é uma forma de divulgação para empresas. Oferecendo um serviço gratuito para pequenas e médias empresas que pretendem criar o seu primeiro panfleto virtual, o portal Xanxerê tem também o intuito de atender pessoas e empresas que não possuem recursos financeiros suficientes para divulgar a sua empresa na internet. O portal terá aspecto profissional seguindo os conceitos básicos do design como usabilidade, aproximação, contraste, alinhamento, dentre outros. Devido à grande quantidade de informações do portal Xanxerê, serão utilizadas ferramentas de gerenciamento de conteúdo, o sistema de gerenciamento trabalhado neste projeto serão definidos por níveis hierárquicos, com isso o gerente máster poderá retirar ou adicionar informações aonde todos os usuários poderão ter acesso os demais administradores apenas terão a opção de inserir informações do seu setor ou do seu panfleto digital, os sistemas de gerenciamento aqui apresentados no projeto tem a função de facilitar a manutenção do portal e diminuir custos para o usuário do panfleto digital. 1.1 TEMA Criação de um portal de internet para auxiliar empresas da cidade de Xanxerê - SC no seu primeiro WebSite.

12 PROBLEMA Como fazer com que empresas de pequeno e médio porte tenham seu primeiro website sem custos, ou a um custo relativamente baixo. 1.3 OBJETIVOS Objetivos Gerais Desenvolvimento do layout para o portal Xanxerê para oferecer a primeira Home Page sem custos, para promover os produtos e serviços oferecidos pelas empresas da cidade de Xanxerê - SC, na internet Objetivos Específicos Pesquisar o número de empresas na cidade X número de Websites. Pesquisar como o Design Gráfico auxilia no desenvolvimento deste projeto. Analisar a melhor escolha de cores e formas para o site. Desenvolver o layout do portal e a Home Page para os usuários. 1.4 JUSTIFICATIVA O inicio da internet se deu na década de 60 pela necessidade de comunicação entre bases militares dos Estados Unidos, algumas décadas mais tardes a comunicação via internet se tornou publica, com o passar dos anos alem de ser uma ferramenta de comunicação a internet se tornou algo rentável e de fácil acesso para a população.

13 13 De acordo com KOBAYACHI apud Cintia (2004) pg 32. A internet é a maior rede de computadores que existe. Ela conecta pessoas de qualquer parte do planeta, bastando para isso um computador e uma linha telefônica. Permite a troca de informações entre seus usuários e também fornece todo o tipo de informação. A necessidade do mercado atual é que empresas de pequeno e médio porte possuam um segundo endereço, o virtual, esta nova tendência faz com que as empresas que possuem uma Home Page saiam na frente, o intuito do primeiro endereço virtual é que estas empresas tenham o primeiro contato com o cliente via internet, a facilidade e a comodidade de comprar um produto ou verificar um serviço faz com estas empresas tenham um diferencial competitivo, assim é possível conhecer a empresa sem visualizá-la fisicamente. Conforme USABILIDOIDO (2009) Se na sociedade atual a visão é considerada o sentido mais importante, a aparência de um website conta muito. Além de exibir com graça informações, ela deve ser bonita e agradável. Há séculos artistas, psicólogos, filósofos e designers estudaram quais recursos estão disponíveis para atingir esse objetivo e como utilizá-los A vantagem que a internet leva sobre as outras formas de anúncios, é que pode ser acessado a qualquer hora e lugar, bastando apenas acesso a internet, uma Home Page alem de ser uma forma de divulgação barata comparando com o grande numero de acessos, também pode ser modificada sem maiores gastos e perca de tempo, a grande vantagem de se ter uma Home Page é que o usuário poderá ter acesso quantas vezes quiser e o melhor é que ele poderá visualizar o tempo que for necessário, tornando assim um elo de comunicação com o usuário e fortalecendo a venda de produtos ou serviços. 1.5 ESTRUTURA DO TRABALHO Com o decorrer da leitura deste projeto, serão apresentados todos os tópicos que demonstram os passos de estudo do projeto, levando assim a um entendimento de como o projeto foi realizado. O trabalho aqui apresentado refere se a criação do Layout da pagina Portal Xanxerê, para o desenvolvimento do trabalho foi dividido em 4 capítulos,

14 14 No capitulo 01 será apresentado a introdução, problemas, objetivos e justificativa. No capitulo 02 conta os temas relevantes para o desenvolvimento deste projeto ao apresentar como as Bases do Conhecimento, Design, Design Gráfico, Web Design, Internet, Usabilidade, Direção do Olhar na tela do Computador, Percepção Visual da Forma, Tipografia nas Paginas da Web, Cores e Imagens, Significado das Cores, Nomenclatura das Imagens Digitais. O capitulo 03 é explicado todo o processo utilizado para alcançar os objetivos do projeto entre os conteúdos estudados então Desenvolvimento do Projeto, Metodologia do Projeto de Design, a Pré-Concepção, Concepção, e Pós- Concepção, No capitulo 04 é o resultado do projeto, é nele que sera mostrado todas as peças gráficas e a sua conceituação. 2 BASES DO CONHECIMENTO 2.1 Design Segundo Ximenes (2000, p.309), "design, do idioma inglês, é de origem latina, de designo, -as, -are, -atum, com os sentidos de designar, indicar, representar, marcar, ordenar, dispor, regular. Há alguns anos, uma das dificuldades dos designers era explicar para nossas mães o que exatamente nós fazemos, mas hoje a realidade já é outra. Segundo Cesar Hirata (O valor do design Guia ADG) O que se espera de um design são idéias e soluções gráficas ou não, tangíveis ou não para um problema ou situação específica do cliente. Uma idéia que possa gerar retorno. Hoje é cada vez mais visível a necessidade do design para o dia a dia, onde disponibiliza-se do avanço da tecnologia para a criação ou atualização de produtos e serviços, a verdade é que a velocidade com que as tecnologias atingiram o profissional de design fez com que, mais e mais clientes e empresários em potencial descobrissem as vantagens competitivas dos produtos que carregam um padrão estético diferenciado para as vendas.

15 15 Segundo GUIA ADG BRASIL (2010) O mercado de Design não é mais o mesmo, a atuação dos escritórios de design tem mudado bastante nos últimos tempos, e essas mudanças positivas é fruto do papel que o design tem exercido nas corporações e nos seus produtos, as empresas estão percebendo que sua imagem tornou-se um diferencial competitivo. O design gráfico é uma área do design que vem adquirindo cada vez mais importância crescente e maior valorização, devido ao fato de trabalhar com qualquer meio ou tipo de informação visual. Um bom design é, hoje, condição primordial para uma empresa se destacar e fazer sucesso no mercado. Segundo (Guia ADG Brasil) Arte não pode ser confundida com design, nem vice-versa, mas se for somente uma questão de rotulo, nada impede que se recorra a subdivisões semânticas entre design autoral e design corporativo Design Gráfico O design gráfico tem o desafio de transformar uma idéia em um atributo gráfico, que pode acelerar as vendas de um produto pelo design diferenciado de sua embalagem, ou marca. O Design Gráfico tem a capacidade de elaborar projetos gráficos com grande qualidade, construção de manuais e sistemas de identidade visual para empresas e outras instituições, também elabora projetos de embalagem, estratégias de usabilidade, ilustrações, desenvolvimento de marcas e soluções na área de Webdesign. Segundo Fontoura (2009) O design é uma atividade interdisciplinar onde envolve diversos campos do conhecimento, com isso o design é muito mais do que apenas a criação de uma marca ou de uma embalagem, mas sim é um profissional que tem o intuito de mexer com o emocional dos consumidores com os seus projetos.

16 16 As imagens gráficas são mais do que ilustrações e descrição de coisas vistas, são signos que tem o sentido amplo e especifico de comunicar o seu publico alvo, com isso o papel do design esta sendo cumprido, pois o fator primordial do design é a solução de problemas. Para Holis (2000, p. 11): A mensagem do design atende as necessidades do cliente que está pagando por ela. Embora sua forma possa ser determinada ou modificada pelas preferências estéticas do designer, a mensagem precisa ser colocada numa linguagem que o público-alvo reconheça e entenda. O design está inserido em um mundo a onde existem consumidores exigentes e que necessitam de soluções e alternativas para resolveram problemas do cotidiano, para o designer conseguir sanar as necessidades do consumidor ele deve analisar o seu público-alvo deve ir a fundo ao universo deste público e assim ele poderá projetar soluções para o público a qual o projeto é destinado. Conforme (VILLAS-BOAS, 2000, p 26) Assim o design gráfico não é a simples diagramação de uma pagina, embora a diagramação possa ser uma das ferramentas de trabalho do designer. [...] Um projeto de design gráfico é um conjunto de elementos visuais. O design gráfico tem como principio passar informação através de elementos gráficos, a forma como o design ira fazer esta comunicação depende muito do projeto podendo ser com imagens, cores ou textos. 2.2 WEB DESIGN De acordo com MARIA LAURA MARTINEZ (2000) A web foi criada em 1990, com a invenção da linguagem HTML por Tim Berners Lee, no Laboratório CERN, na Suíça, em 1993 surgiu o primeiro browser para a utilização da linguagem HTML, o Mosaic.

17 17 De acordo com KOBAYACHI (2004), A internet é a maior rede de computadores que existe. Ela conecta pessoas de qualquer parte do planeta, bastando para isso um computador e uma linha telefônica. Permite a troca de informações entre esses usuários. A Internet é uma rede de computadores a onde estes computadores se comunicam entre si, a comunicação e a amostragem de produtos ou serviços na internet só se dá pelo acesso a uma Home Page, para que todo o processo de comunicação entre os computadores tenha uma qualidade é necessário a intervenção do Web Design. Um Website se caracteriza por ser um sistema interativo, um sistema interativo é considerado eficaz quando possibilita que os usuários atinjam seus objetivos, para toda essa navegação e acessibilidade acontecer é fundamental a participação do Webdesigner, ele é responsável por todo o estudo da usabilidade da tipografia e das cores que o site ira exibir. Conforme NAHR (2007) O Webdesigner é um fragmento do design [... ] o designer que faz web é este profissional que tem que aprender tudo; tipografia, fotografia, semiótica, gestalt, matemática, ótica, percepção, comportamento humano etc. Sem isso ele não consegue fazer Web. Quando falamos de Webdesigner, podemos dizer que se trata da aplicação da área do Design Gráfico com o foco na criação de Websites, este profissional é o único que tem a capacidade de entender e desenvolver um projeto para Web, pois a criação de apenas um layout para uma pagina é simples qualquer design pode fazer, mas a criação de um layout pensando no usuário faz com que o trabalho se torne muito mais eficaz e trazendo maiores resultados para o cliente.

18 INTERNET Conforme RNP (2010) Até recentemente, no Brasil, o acesso à Internet era restrito a professores, estudantes e funcionários de universidades, a partir de 1995, surgiu à oportunidade para que usuários fora das instituições acadêmicas também obtivessem acesso à Internet, hoje são 349 milhões de usuários e é a maior rede mundial de comunicação. Com o constante crescimento da internet no Brasil e a facilidade de acesso a redes de computador, o Brasil se destaca pelo numero de usuários da rede, mas o Brasil ainda tem uma qualidade de sinal da internet muito baixa comparando com países subdesenvolvidos, mesmo assim temos vários Web Designers que se destacam pelo mundo, com a grande qualidade na criação de suas Home Page. Conforme RNP (2010) O Brasil ocupa o segundo lugar na América Latina em termos de proporção da população com acesso à Internet, perdendo para o Uruguai com 9%. A taxa brasileira é inferior à média mundial, que, segundo dados de novembro de 2000, é de 6,71% (407,1 milhões). Nos Estados Unidos, o país com a maior proporção de pessoas plugadas à Internet, 55,83% da população tem acesso à rede. No Brasil o processo de evolução da internet passou de uma espécie de brinquedo ou moda para um negócio rentável do dia para a noite, a grande procura por um endereço virtual se da pela eficácia de informações postas em endereços virtuais (sites), como o Brasil é o segundo pais da America Latina no acesso da internet, o mercado virtual vem crescendo constantemente, mas como todo crescimento tem uma regularização foram criados normas para identificar cada pais no meio virtual. Conforme RNP (2010) Mais um pouco da estrutura da Internet pode ser visualizada pela forma dos endereços de s. Por exemplo, o endereço hipotético abece@instituição.gov.br (a explicação vale também para sites, como apresenta uma nova hierarquia. A

19 19 terminação "br" refere-se ao Brasil (na França a terminação é "fr", etc.) e é chamada domínio de primeiro nível. Esse domínio subdivide-se em vários outros, como "gov" (referente a endereços do governo), "edu" (criado no fim de 2000, referente a endereços de instituições educacionais), "com" (endereços comerciais), etc. Cada um desses subdividem-se ainda em vários outros (chamados agora simplesmente de "domínios"), que correspondem cada um a uma instituição. Por exemplo, no site o "mc" indica Ministério das Comunicações. 2.4 USABILIDADE Segundo MORAES (2002) A questão fundamental da usabilidade é que o produto seja fácil de usar. Um sistema deve oferecer sua funcionalidade de tal maneira que o usuário para o qual foi planejado seja capaz de controlá-lo e utilizá-lo sem constrangimentos demasiados sobre suas capacidades e habilidades. Usabilidade é um termo utilizado para definir a facilidade com que as pessoas posam usar uma ferramenta a fim de realizar uma tarefa específica, a usabilidade está relacionada aos estudos de Ergonomia e a Interação Humano-computador, isso normalmente se refere à simplicidade e facilidade com que uma pessoa possa utilizar e interagir com a interface, permitindo uma utilização eficiente e sem apresentar erros. Conforme Bergamo (2000) O foco da usabilidade é a facilidade de uso de um produto. Ela é determinante para o desenvolvimento eficaz de softwares e de websites [...] Para analisa a desenvoltura de um Website é necessário fazer teste de usabilidade, uma das técnicas utilizadas para garantir um bom projeto centrado no usuário, ou UCD (User-Centered Design), tem como principal foco criar um elo do usuário com as tarefas que deveram ser realizadas em um determinado ambiente. Nielsen (2007) Realizou testes de usabilidade de sites na web baseados na medição de parâmetros distintos. O primeiro estudou como se lê na web e, o segundo, como se recupera a informação e a satisfação/atitude do usuário em relação ao site. [...]

20 20 Além dos testes com usuários, existe outra forma de avaliação da usabilidade, a análise heurística, na análise heurística, é um grupo de especialistas a onde eles procuram os pontos em que a interface vai contra os princípios de usabilidade, o resultado da avaliação heurística gera uma lista dos problemas de usabilidade na interface, alguns dos princípios de usabilidade descritos por Nielsen. Conforme NIELSEN (2002) Facilidade de aprendizado o sistema deve ser fácil de aprender de tal forma que o usuário consiga rapidamente explorá-lo e realizar suas tarefas com ele. Eficiência de uso o sistema deve ser eficiente a tal ponto de permitir que o usuário, tendo aprendido a interagir com ele, atinja níveis altos de produtividade na realização de suas tarefas Facilidade de memorização após um certo período sem utilizá-lo o usuário não freqüente é capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele. Baixa taxa de erros em um sistema com baixa taxa de erros, o usuário é capaz de realizar tarefas sem maiores transtornos, recuperando erros, caso ocorram. Satisfação subjetiva o usuário considera agradável a interação com o sistema e se sente subjetivamente satisfeito com ele Direção do olhar na tela do Computador Para um melhor entendimento da direção do olhar na tela do computador é necessário entender as formas de estrutura que podem ser utilizadas para a construção de um Web Site, a estrutura de um Web Site é montada conforme a experiência que o usuário possui com o computador, e a faixa etária de idade do usuário. Conforme Lynch e Horton (2001) três estruturas básicas podem ser usadas para a construção de um web site: seqüencial, hierárquica e em forma de teia. A estrutura seqüencial tem a característica linear, isso quer dizer que a amostragem das paginas é em ordem lógica, a onde as paginas se mostra em progressão, este tipo de estrutura é mais apropriada para cursos de treinamento a onde os estudantes desenvolvem um roteiro previsível de leitura, esta estrutura é mais utilizada para pessoas completamente leigas e que não tenham o hábito de utilizar o computador e a internet.

21 21 Desenho 01: Exemplo de estrutura seqüencial Fonte: STANQUE 2008 A estrutura hierárquica parte de uma pagina inicial denominada home, a leitura da estrutura hierárquica é por diferentes seções, paginas que abrem caminhos para outras paginas subordinadas, caracterizado como um esquema ramificado, a estrutura hierárquica permite grandes níveis de organização é excelente para grandes volumes de informações. Utilizada mais para usuários já mais experientes, que tenham uma maior afinidade com internet e informática. Desenho 02: Exemplo de estrutura hierárquica Fonte: STANQUE 2008 A estrutura em forma de teia descreve uma navegação mais complexas, impondo uma combinação de varias rotas possíveis essa navegação é pouco previsível, com muitos roteiros para o mesmo ponto, é mais utilizadas para sistemas extremamente complexos e com muito conteúdo, essa estrutura é mais adequada para usuários com maior experiência com o computador e a internet.

22 22 Desenho 03: Exemplo de estrutura formato teia Fonte: STANQUE 2008 Conforme o tipo de layout apresentado ao usuário obtém dois tipos de leitura em uma pagina, leitura por pontos isolados ou seguindo o formato semelhante a um F, o tipo de leitura de uma pagina tem a vantagem de auxiliar na organização das informações da pagina. Segundo Shrestha e Lenz (2007) a partir da experiência de rastreamento da movimentação do olhar pode ser constatado que os leitores desse tipo de organização visual fixam a visão seqüencialmente em cada um dos segmentos de informação chamadas de Bloco Desenho 04: Exame quantitativo da fixação do olhar Fonte: SHERESTHA E LENZ 2007 No desenho 04 cada circulo mais claro indica a duração da fixação do olhar, os círculos maiores e mais claros indicam durações maiores do olhar.

23 23 Quando uma pagina não mostra blocos de informações à leitura é semelhante a um F como mostra Nielsen (2006) em seus testes de rastreamento do olhar. Desenho 05: Padrão F de leitura de paginas nas quais o texto predomina Fonte: NIELSEN Percepção Visual da Forma Gestalt Segundo FILHO - GESTALT (2000) ao abordar a Gestalt, o mesmo afirma que a gestalt é a arte que trabalha os princípios da pregnância da forma. Ou seja, na formação de imagens. Gestalt é a arte do equilíbrio da clareza e da harmonia visual das formas, estes fatores se tornam uma necessidade indispensável para o ser humano, sem isso o individuo que vê uma imagem não o consegue distinguir, o objetivo do designer é desenvolver objetos que satisfaçam as necessidade do ser humano baseado na arte da gestalt Unidade Segundo FILHO - GESTALT (2000) Uma unidade pode ser consubstanciada num único elemento, que se encerra em si mesmo, ou como parte de um todo. Ainda, numa conceituação mais ampla, pode ser entendida como o conjunto de mais de um elemento, configurando o todo, propriamente dito, ou seja, o próprio objeto.

24 24 Desenho 06: Exemplo de uma imagem com unidade Fonte: FILHO 2000 (GESTALT) Uma unidade pode ser um único elemento ou uma parte de um todo, também pode ser um conjunto de elementos figurativos, as unidades podem ser percebidas com elementos de pontos, linhas planos, volumes cores, sombras e brilho Segregação Segundo FILHO - GESTALT (2000) ao abordar a Gestalt, o mesmo afirma que a segregação significa a capacidade perceptiva de separar, identificar, evidenciar ou destacar unidades formais em um todo compositivo ou em partes deste todo. Segregação significa a capacidade de separar e identificar formas em uma imagem qualquer. Foto 01: Exemplo de uma imagem com segregação. Fonte: FILHO 2000 (GESTALT)

25 Fechamento Segundo FILHO - GESTALT (2000) ao abordar a Gestalt, o mesmo afirma que o fechamento é fator importante para a formação de unidade. As forças de organização da forma dirigem-se espontaneamente para uma ordem espacial que tende para a formação de unidades em todos fechados. Fechamento é uma sensação visual que tende a dar continuidade através de linhas e traços em uma estrutura pré-determinada, ou seja, pelo agrupamento de alguns elementos de tal maneira que constitui uma imagem. Desenho 07: Exemplo de uma imagem com fechamento. Fonte: FILHO 2000 (GESTALT) Continuidade Segundo FILHO - GESTALT (2000) ao abordar a Gestalt, o mesmo afirma que a continuidade é a impressão visual de como as partes se sucedem através da organização perceptiva da forma de modo coerente, sem quebras ou interrupções na sua trajetória ou na sua fluidez visual. Continuidade é o alinhamento de formas simétricas ou assimétricas colocadas em determinado espaço a continuidade alem de ser percebida pela forma também pode ser percebida pela continuidade de cores.

26 26 Foto 02: Exemplo de uma imagem com continuidade. Fonte: FILHO 2000 (GESTALT) Proximidade Segundo FILHO - GESTALT (2000) ao abordar a Gestalt, o mesmo afirma que elementos ópticos próximos uns dos outros tendem a ser vistos juntos e, por conseguinte, a constituírem um todo ou unidades dentro do todo. Proximidade é um elemento gráfico próximo um ao outro eles podem ser vistos separados ou em conjunto formando uma unidade toda, a maior característica da proximidade é a igualdade de formas podendo apenas variar a cor. Foto 03: Exemplo de uma imagem com proximidade. Fonte: Filho 2000 (GESTALT)

27 Tipografia nas Páginas da Web Conforme STANQUE pg 112 (2008) Em função da heterogeneidade de plataformas informáticas, a navegação da Internet com uso do HTML limita a escolha das fontes tipográficas, a composição tipográfica nos Web sites é configurada basicamente com três tipos de fontes: com serifas, sem serifas e monoespaçadas. Serifas são pequenos traços nas pontas de cada letra ou outros enfeites, fontes monoespaçadas são aquelas que ocupam sempre as mesmas dimensões, as fontes monoespaçadas são bem similares a da máquina de datilografar. Fonte Serifada Fonte sem Serifa Fonte Monoespaçadas Georgia Arial Black Comic Sans MS Fluxograma 01 três estilos de fontes Fonte: STANQUE (2008) Conforme NIELSEN (2007) Utilize um tamanho de fonte comum com 10 ou mais pontos. Evite fundos visualmente poluídos. Utilize texto preto sobre fundos brancos. Mantenha o mínimo possível de texto gráfico, texto com todas as letras em maiúsculas e texto em movimento. Elementos artísticos como tipografia e esquemas de cor desempenham um papel importante para que o Website cause uma boa impressão, o Webdesign tem o objetivo de comunicar e a escolha da tipografia é um fator fundamental para que isso ocorra, o fato de comunicar não é apenas a parte da tipografia, mas também é um aglomerado de detalhes que fazem que o Website se torne algo agradável e útil aos olhos dos usuários. Conforme NIELSEN (2007) Nem todas as fontes são criadas da mesma maneira. Ao escolher uma fonte para seu Web site, certifique-se de optar por aquelas disponíveis nos computadores e navegadores dos seus clientes. Caso contrario, os sistemas deles talvez utilizem uma face de tipos padrão que não está otimizada para visualização on-line, e o site não aparecerá como pretendido.

28 28 As fontes pré-instaladas na maioria dos navegadores são: Nome da Fonte Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana Família de Fontes genérica Sem serifas Sem serifas Monoespaçadas Monoespaçadas Com serifas Sem serifas Com serifas Sem serifas Sem serifas Fluxograma 02 fontes pré-instalada na maioria dos computadores Fonte: NIELSEN (2007) Conforme NIELSEN (2007) Nome da Fonte Legibilidade on-line Características Arial Legibilidade em tamanho Moderna, limpa, básica, sem razoável. Boa na fonte de 10 pontos ou acima firulas. Geralmente a preferida por pessoas de todas as idades. Comic Sans MS Fonte decorativa, mas difícil de Amigável, juvenil, divertido e ler on-line, mesmo em tamanhos grandes. informal. Não apropriada para Web sites mais sérios ou profissionais. Georgia A melhor fonte com serifa De aparência tradicional, mas com projetada para leitura on-line. Geralmente boa em tamanhos de fontes de 10 pontos e acima. um visual mais moderno e legível que Times New Roman. Boa alternativa para fontes serifadas on-line. Impact Geralmente utilizada para Escura. Não adequada a blocos de impressão. Não recomendada conteúdo. Pode ser utilizada para visualização on-line. algumas vezes para títulos curtos. Legibilidade ruim mesmo em tamanhos grandes. Times New Roman Bom para materiais impressos. A De aparência tradicional. Não legibilidade na tela rapidamente recomendada se você quiser

29 29 Trebuchet MS Verdana diminui em tamanhos menores. Somente boa no corpo 12 ou superior. Legível em tamanhos razoáveis. Boa na fonte de 10 pontos ou acima. A fonte on-line mais legível, mesmo em texto pequeno. Fluxograma 03 fonte pré-instaladas e suas características Fonte: NIELSEN (2007) parecer profissional. Geralmente não é a preferida pela audiência de qualquer idéia. Moderna, simples, aguçada. Profissional, simples e moderna. A fonte recomendada para uso no corpo de texto, em que a legibilidade é fundamental. Altamente cotada na preferência dos usuários Cores e Imagens As cores estão ocupando cada vez mais espaço em nosso cotidiano, não mais apenas para destacar textos, mas se propondo a criar um elo de conversação com o leitor. Ao longo dos anos foi surpreendente o avanço das imagens sobre a mídia impressa, nos livros, nas revistas e nos jornais. Segundo FARINA (2000) Color, dizia o latino, na antiga Roma, para expressar o que hoje nós chamamos cor. Quando se refere ao período da Renascença a onde teve uma mudança da era da arte para a era da imagem impressa, as imagens e as cores prestavam ao culto ás religiões e as suas praticas, a historia do uso das imagens e da cor tem raízes muito profundas e complexas, sempre associadas ás praticas culturais e muito pouco ao processo comunicativo das imagens. Segundo Hollis (2001) A cor não é apenas um elemento decorativo ou estético, é o fundamento da expressão, está ligado á expressão de valores sensuais e espirituais. O olho do seu espírito avistava nas pegadas o próprio animal.

30 Significado das Cores O impacto que a cor traz para o individuo que a vê esta intimamente ligada ao uso que se fará do elemento visto, a utilização das cores para descriminar uma área está ligado as exigências de cada setor, como por exemplo, a Educação, a prevenção de acidente, Decoração, Medicina, produtividade, moda, trânsito e outras. Conforme FARINA (2000) Cada campo utiliza uma linguagem especifica que explicita seus pontos de vista e por meio da qual procura atingir os objetivos propostos. O estudo e o entendimento de cada cor para o desenvolvimento de um projeto gráfico é fundamental, o estudo das cores e a devida aplicação em embalagens faz com que o produto se torne mais chamativo, passando para o cliente maiores informações e criando um vinculo de comunicação visual para com o cliente. Conforme FARINA (2000) Analisar a cor apenas em função da Comunicação, focalizando as leis que regem o seu domínio, para que ela se torne um instrumento eficaz nas mãos dos que a manejam. Toda cor possui uma ação e um significado, mas algumas cores existem um peso psicológico na sua preferência de uma ou outra cor. A cor sempre fez parte da vida do homem, sempre houve o azul do céu, o verde das árvores, o vermelho do pôr do Sol, mas as pessoas que utilizam as cores, nunca estudaram a fundo o real significado de cada cor. Conforme FARINA (2000) BRANCO Associação material: batismo, casamento, cisne, lírio, primeira comunhão, neve, nuvens em tempo claro, areia clara. Associação afetiva: ordem, simplicidade, limpeza, bem, pensamento, juventude, otimismo, piedade, paz, pureza, inocência, dignidade, afirmação, modéstia, deleite, despertar, infância, alma, harmonia, estabilidade, divindade. A palavra branco nos vem do germânico blank (brilhante). Simboliza a luz, e nunca é considerado cor, pois de fato não é. Se para os ocidentes simboliza a vida e o bem, para os

31 31 PRETO orientes é a morte, o fim, o nada. Representa também, para nós, ocidentais, o vestíbulo do fim, isto é o medo ou representa um espaço (entrelinhas). Associação material: sujeira, sombra, enterro, noite, carvão, fumaça, condolência, morte, fim, coisas escondidas. Associação afetiva: mal, miséria, pessimismo, sordidez, tristeza, frigedez, desgraça, dor, temor, negação, melancolia, opressão, angústia, renuncia, intriga. Deriva do latim Níger (escuro, preto, negro). Nós utilizamos o vocábulo preto, cuja etimologia é controvertida. É expressivo e angustiante ao mesmo tempo. É alegre quando combinado com certas cores. Ás vezes tem conotação de nobreza, seriedade. CINZA Associação material: pó, chuva, ratos, neblina, máquinas, mar sob tempestade. Associação afetiva: tédio, tristeza, decadência, velhice, desanimo, seriedade, sabedoria, passado, finura, pena, aborrecimento, carência vital. Do latim cinicia (cinza) ou do germânico gris (gris, cinza); nós utilizamos o termo de origem latina. Simboliza a posição intermédia entre a luz e a sombra. Não interfere junto ás cores em geral. VERMELHO Associação material: rubi, cereja, guerra, lugar, sinal de parada, perigo, Cida, sol, fogo, chama, sangue, combate, lábios, mulher, feridas, rochas vermelhas, conquistas, masculinidade. Associação afetiva: dinamismo, força, baixeza, energia, revolta, movimento, barbarismo, coragem, furor, esplendor, intensidade, paixão, vulgaridade, poderio, vigor, glória, calor, violência, dureza, excitação, ira, interdição, emoção, ação, agressividade, alegria comunicativa, extroversão. Vermelho nos vem do latim vermiculus [verme, inseto (a cochonilha)]. Desta se extrai uma substância escarlate, o carmim, e chamamos a cor de carmesim [do árabe: qirmezi (vermelho bem Vico ou escarlate)]. Simboliza uma cor de aproximação, de encontro. LARANJA Associação material: outono, laranja, fogo, pôr do sol, luz, chama, calor, festa, perigo, aurora, raios solares, robustez. Associação afetiva: força, luminosidade, dureza, euforia, energia, alegria, advertência, tentação, prazer, sendo de humor. Laranja origina-se do persa narang, através do árabe nananja. Simboliza o flamejar do fogo. AMARELO Associação material: flores grandes, terra argilosa, palha, luz, topázio, verão, limão, chinês, calor de luz solar.

32 32 Associação afetiva: iluminação, conforto, alerta, gozo, ciúme, orgulho, esperança, idealismo, egoísmo, inveja, ódio, adolescência, espontaneidade, variabilidade, euforia, originalidade, expectativa. Amarelo deriva do latim amaryllis. Simboliza a cor da luz irradiante em todas as direções. VERDE Associação material: umidade, frescor, diafaneidade, primavera, bosque, águas claras, folhagem, tapete de jogos, mar, verão, planície, natureza. Associação afetiva: adolescência, bem-estar, paz, saúde, ideal, abundância, tranqüilidade, segurança, natureza, equilíbrio, esperança, serenidade, juventude, suavidade, crença, firmeza, coragem, desejo, descanso, liberdade, tolerância, ciúme. Verde vem do latim viridis. Simboliza a faixa harmoniosa que se interpõe entre o céu e o sol. Cor reservada e de paz repousante. Cor que favorece o desencadeamento de paixões. VERDE AZULADO AZUL Associação afetiva: persistência, arrogância, obstinação, amor próprio, elasticidade da vontade. Associação material: montanhas longínquas, frio, mar, céu, gelo, feminilidade, águas tranqüilas. Associação afetiva: espaço, viagem, verdade, sentido, afeto, intelectualidade, paz, advertência, precaução, serenidade, infinito, meditação, confiança, amizade, amor, fidelidade, sentimento profundo. Azul tem origem no árabe e no persa lázurd, por lazaward (azul). É a cor do céu sem nuvens. Dá sensação do movimento para o infinito. ROXO Associação material: noite, janela, igreja, aurora, sonho, mar profundo. Associação afetiva: fantasia, mistério, profundidade, eletricidade, dignidade, justiça, egoísmo, grandeza, misticismo, espiritualidade, delicadeza, calma. Roxo nos vem do latim russeus (vermelho-carregado). Cor que possui um forte poder microbicida. MARROM Associação material: terra, águas lamacentas, outono, doença, sensualidade, desconforto. Associação afetiva: pesar, melancolia, resistência, vigor. Marrom, do francês marron (castanho). PÚRPURA Associação material: vidência, agressão, furto, miséria. Associação afetiva: engano, calma, dignidade, autocontrole, estima, valor. Púrpura deriva do latim púrpura. Simboliza a dignidade real, cardinalícia.

33 33 VIOLETA Associação afetiva: engano, miséria, calma, dignidade, auto-controle, violência, furto, agressão. Violeta é diminutivo do provençal antigo viula (viola). Essa cor possui bom poder sonífero. VERMELHO ALARANJADO Associação material: ofensa, agressão, competição, operacionalidade, locomoção. Associação afetiva: desejo, excitabilidade, dominação, sexualidade. Fluxograma 04 Cores e simbologia das cores Fonte: FARINA (2000) Nomenclatura das Imagens Digitais Com a evolução da tecnologia as cores sofreram uma divisão por categorias, esta divisão foi necessária para podemos aplicar as cores em diversos meio de comunicação como o impresso e o digital, O RGB é a abreviatura do sistema de cores aditivas formado por Vermelho (Red), Verde (Green) e Azul (Blue) o RGB cria uma paleta de mais de 16,5 milhões de cores. O propósito principal do sistema RGB é a reprodução de cores em dispositivos eletrônicos como monitores de TV e computador, entre centenas de extensões de arquivos, temos aqui os mais utilizados. Formato é utilizado na criação de gráficos como logotipos e ilustrações, os GIFs são aceitos por todos os navegadores. Eles são pequenos e fazem coisas que muitos outros formatos de arquivos não fazem como animação e transparência. O formato de arquivos JPEG foi desenvolvido especificamente para imagens de estilo fotográfico. Ele observa áreas com mudanças sutis de tons e cores, tem a opção de oferecer a melhor compactação quando encontra esse tipo de criação de imagens. Entretanto ele não compacta bem cores sólidas. PNG é um método de compactação sem perdas o que significa que não há perda de qualidade quando aplicado a imagens. Diferentemente do GIF ou JPEG o PNG pode ser armazenado com diversas profundidades de bit. O PNG também tem um grande número de métodos de filtragem distintos tornando a otimização de imagens PNG mais trabalhosa.

34 34 3 DESENVOLVIMENTO DO PROJETO DE DESIGN A metodologia do projeto é um instrumento que auxilia o design a realizar o desenho do projeto, a metodologia não procura soluções, mas contribui na escolha das melhores alternativas para o projeto, a metodologia faz com que as informações adquiridas sobre o projeto criem um vinculo entre si, para que o resultado do projeto seja o mais coerente possível. Para que o resultado do projeto seja coerente é necessário que a metodologia seja, clara e objetiva, possibilitando ao profissional a total compreensão dos seus objetivos, proporcionando segurança e autonomia para o profissional tomar decisões importantes e buscar soluções adequadas. Segundo Munari (1998. P 10) O método de projeto não é mais do que uma série de operações necessárias, dispostas em ordem lógica, ditada pela experiência. Seu objetivo é o de atingir o melhor resultado com o menor esforço. 3.1 Apresentando a Metodologia Projetual A metodologia projetual é de suma importância para o design, ficaria inviável o desenvolvimento de um projeto sem a metodologia, pois é com a metodologia que se delimita e orienta o profissional para o melhor resultado, sem que ele cometa erros. A metodologia proposta para este projeto foi baseada a partir da metodologia desenvolvida por Flavio Anthero dos Santos, a metodologia conhecida como MD3E Método de Desdobramento em 3 etapas, foi escolhida esta metodologia porque é um método aberto, com isso ele se molda conforme as necessidades do usuário, e o projeto trabalha da mesma forma, que é um portal de internet que se molda conforme as necessidades do usuário. O MD3E estabelece como etapa central a definição do problema e a necessidade humana, que se pretende satisfazer com o projeto, após essa etapa central do problema é dividido em três partes para facilitar a sua solução, isso acontece através dos desdobramentos que são realizados, é importante salientar que o MD3E é um método aberto aonde pode ser moldado conforme as necessidades, mas mesmo assim ele define algumas etapas obrigatórias.

35 35 Desenho 07 Etapa Central Fonte: FLAVIO (2000) A primeira etapa central e obrigatória é a definição do problema do projeto e a sua relação com a necessidade humana a ser atendida, com isso o primeiro passo é a definição do problema a ser resolvido e qual a necessidade humana que se pretende satisfazer com o produto a ser projetado, uma vez definido o problema a ser resolvido pode-se começar os desdobramentos subseqüentes. Desenho 08 Etapas Basicas Fonte: FLAVIO (2000) A segunda parte é desdobrada em 3 etapas básicas, pré-concepção, a concepção, e a pós-concepção, assim todo o projeto deve passar por essas três etapas, desta forma na pré-concepção serão definidos todas as atividades que precisam ser desenvolvidas antes da geração de alternativas, na concepção é toda

36 36 a parte aonde será gerado alternativas para o projeto, na pós-concepção é todas as atividades a serem desenvolvidas após a definição da melhor solução para o projeto. Desenho 08 Gerenciamento e Documentação Fonte: FLAVIO (2000) A partir dessas três etapas básicas o método é desdobrado em varias atividades obrigatório a serem desenvolvidas até que o projeto seja concluído, neste momento é definida a atividade que orienta todo o trabalho, o gerenciamento e a documentação, essa atividade aparece logo após as três etapas básicas, para mostrar que o gerenciamento do projeto e sua documentação devem ser preocupações constantes para o projeto. Desenho 09 Desdobramentos Mínimos Fonte: FLAVIO (2000)

37 37 Logo após o gerenciamento e a documentação do projeto são feitas 3 desdobramentos mínimos recomendados para cada etapa são elas. Pré-Concepção o Planejamento do projeto o Analise do problema o Atributos do produto Concepção o Caminhos criativos o Geração de alternativas o Seleção e adequação Pós-Concepção o Subsistemas e/componentes o Processos produtivos o Mercado Todas essas etapas obrigatórias podem ser alteradas conforme as necessidades do projeto, os desdobramentos subseqüentes são de acordo com as necessidades do projeto e do profissional, levanto a finalização do projeto.