Tcc vanessapacheco

UNIVERSIDADE DO SUL DE SANTA CATARINA VANESSA PACHECO

WEB DESIGN E ACESSIBILIDADE – HP CONTABILIDADE SUBTÍTULO DO TRABALHO

Florianópolis 2010

VANESSA PACHECO

WEB DESIGN E ACESSIBILIDADE – HP CONTABILIDADE SUBTÍTULO

Trabalho de Conclusão de Curso apresentado ao Curso de Graduação em Design da Universidade do Sul de Santa Catarina, como requisito parcial à obtenção do título de Bacharel em Design.

Orientadora: Prof. Renata Krusser.

Co-orientador: Prof. Dr. Nome do Professor.

Florianópolis 2010

VANESSA PACHECO

WEB DESIGN E ACESSIBILIDADE – HP CONTABILIDADE

Este Trabalho de Conclusão de Curso foi julgado adequado à obtenção do título de Bacharel em Design e aprovado em sua forma final pelo Curso de Graduação de Design da Universidade do Sul de Santa Catarina.

Florianópolis, 24 de novembro de 2010.

______________________________________________________ Professora e orientadora Renata Krusser, Msc. Universidade do Sul de Santa Catarina ______________________________________________________ Prof. Roberto Forlin, Msc. Universidade do Sul de Santa Catarina ______________________________________________________ Prof. Tiago A. Cruz, Esp. Universidade do Sul de Santa Catarina

Dedico este trabalho a meus pais, Mariza e Humberto, minha madrinha Sueli por ter me dado a oportunidade de cursar esta faculdade, Taila e meus irm達os que me apoiaram nesta conquista.

AGRADECIMENTOS

Primeiramente gostaria de agradecer a Deus por ter me dado tantas oportunidades e conquistas na vida.

Meus pais, Mariza e Humberto, que sempre me apoiaram, educaram e me proporcionaram o melhor, permitindo que eu chegasse onde cheguei.

Minha madrinha Sueli por proporcionar esta grande conquista de me tornar uma designer, todo o apoio e compreensão durante todos estes anos.

Minha amiga Júlia, por sempre possuir uma palavra amiga de incentivo e coragem durante todos estes anos.

Minha super amiga Taila, que sempre me apoiou, ajudou e demonstrou que uma grande e verdadeira amizade existe.

Meus irmãos e minhas cunhadas por serem sinceros nas críticas sobre trabalhos, e sempre me fazendo rir mesmo em momentos de desespero pelo TCC. Minha orientadora Renata Krusser, que sempre me ajudou, compreendeu os acontecidos durante esta etapa de TCC, que me deu conselhos e tornou-se uma grande amiga.

RESUMO

O presente projeto demonstra em sua íntegra, etapas de desenvolvimento da construção do website e intranet para a empresa HP Contabilidade, situada na cidade de Florianópolis, Santa Catarina. Atualmente a empresa não possui um website, porém detectou-se a necessidade da divulgação da marca e dos serviços prestados através da criação de um portal, onde seus clientes acessem com facilidade as informações. Este trabalho tem como objetivo, portanto, propor um website e uma intranet, proporcionando a conexão entre empresa e cliente. O projeto apresenta, inicialmente, definição da problemática, objetivos gerais e específicos, metodologia de projeto. Sendo seguidas as etapas de fundamentação teórica, entrevistas e coleta dos dados, análise dos dados, etapas de desenvolvimento e detalhamento do projeto e suas implementações.

Palavras-chave: Interação. Web. Intranet. Digital.

ABSTRACT

This project demonstrates in its entirety, development stages of building the website and intranet for the company HP Contabilidade, located in Florianopolis, Santa Catarina.

Currently the company has no website, but it was detected the necessity of spreading the brand and the services provided by creating a website where customers easily access the information. This paper aims, therefore, propose a website and an intranet, providing the connection between company and client. The project initially presents the problem definition, goals and objectives, design methodology. Being followed the steps of theoretical, interviews and data collection, data analysis, stages of development and detailed design and implementations.

Keywords: Interaction. Web. Intranet. Digital.

LISTA DE ILUSTRAÇÕES

Figura 1 – Exemplo de arquitetura e sitemap da equipe TV Globo. ...................................... 24 Figura 2 – Exemplo wireframe do site da equipe TV Globo. ................................................ 27 Figura 3 – Sala HP Contabilidade......................................................................................... 36 Figura 4 – Sala 2 HP Contabilidade. ..................................................................................... 36 Figura 5 – Fórmula para análise de concorrentes. ................................................................. 45 Figura 6 – Orsitec Assessoria Contábil e Empresarial. .......................................................... 46 Figura 7 – Blog Orsitec Assessoria Contábil e Empresarial. ................................................. 46 Figura 8 – Arquivo Contabilidade. ....................................................................................... 47 Figura 9 – Faracon Contabilidade. ........................................................................................ 48 Figura 10 – Painel Semântico Público de Interesse. .............................................................. 50 Figura 11 – Painel Semântico Público de Interesse. .............................................................. 51 Figura 12 – Sitemap Website HP Contabilidade. ................................................................... 52 Figura 13 – Sitemap Intranet HP Contabilidade.................................................................... 53 Figura 14 – Wireframe modelo 1. ......................................................................................... 54 Figura 15 – Wireframe modelo 2. ......................................................................................... 54 Figura 16 – Wireframe modelo 3. ......................................................................................... 55 Figura 17 – Paleta de Cores. ................................................................................................. 56 Figura 18 – Fonte Tahoma, família tipográfica sem-serifa. ................................................... 57 Figura 19 – Fonte Segoe UI, família tipográfica sem-serifa. ................................................. 57 Figura 20 – Geração de alternativas iniciais.......................................................................... 58 Figura 21 – Geração de alternativas iniciais 2. ...................................................................... 58 Figura 22 – Geração de alternativa wireframe escolhida 1. ................................................... 59 Figura 23 – Geração de alternativa wireframe escolhida 2. ................................................... 59 Figura 24 – Geração de alternativa wireframe escolhida 3. ................................................... 60 Figura 25 – Alternativa escolhida. ........................................................................................ 61 Figura 26 – Página Inicial do site HP Contabilidade. ............................................................ 63 Figura 27 – Página Inicial do site HP Contabilidade com painel de acesso restrito aberto. .... 63 Figura 28 – Página Empresa do site HP Contabilidade. ........................................................ 64 Figura 29 – Página Serviços do site HP Contabilidade. ........................................................ 64 Figura 30 – Página Notícias do site HP Contabilidade. ......................................................... 65

Figura 31 – Página Informativo HP do site HP Contabilidade. ............................................. 66 Figura 32 – Página Dúvidas do site HP Contabilidade. ......................................................... 67 Figura 33 – Página Contato do site HP Contabilidade........................................................... 67 Figura 34 – Página Feedback Usuário do site HP Contabilidade. .......................................... 68 Figura 35 – Página Trabalhe Conosco do site HP Contabilidade. .......................................... 68 Figura 36 – Página Links Úteis do site HP Contabilidade. .................................................... 69 Figura 37 – Página Inicial da Intranet HP Contabilidade. ..................................................... 70 Figura 38 – Página Área Contábil da Intranet HP Contabilidade. ......................................... 71 Figura 39 – Página Honorários HP da Intranet HP Contabilidade. ........................................ 71 Figura 40 – Página Nova Solicitação da Intranet HP Contabilidade...................................... 72 Figura 41 – Página Minhas Solicitações da Intranet HP Contabilidade. ................................ 73

LISTA DE GRÁFICOS

Gráfico 1 – Questionário “clientes HP Contabilidade”, questão 1. ........................................ 38 Gráfico 2 – Questionário “clientes HP Contabilidade”, questão 2. ........................................ 38 Gráfico 3 – Questionário “clientes HP Contabilidade”, questão 3. ........................................ 39 Gráfico 4 – Questionário “clientes HP Contabilidade”, questão 4. ........................................ 39 Gráfico 5 – Questionário “clientes HP Contabilidade”, questão 5. ........................................ 40 Gráfico 6 – Questionário “clientes HP Contabilidade”, questão 6. ........................................ 40 Gráfico 7 – Questionário “clientes HP Contabilidade”, questão 7. ........................................ 41 Gráfico 8 – Questionário “clientes HP Contabilidade”, questão 8. ........................................ 42 Gráfico 9 – Questionário “clientes HP Contabilidade”, questão 9. ........................................ 43

LISTA DE TABELAS

Tabela 1 – Requisitos necessårios em um website, avaliados conforme seus atributos definindo o concorrente direto com maior potencial. ............................................................ 48

SUMÁRIO

1 INTRODUÇÃO ............................................................................................................ 13 1.1 PROBLEMATIZAÇÃO .............................................................................................. 14 1.2 OBJETIVOS................................................................................................................ 15 1.2.1 Objetivo Geral ......................................................................................................... 15 1.2.2 Objetivo Específico ................................................................................................. 15 1.3 JUSTIFICATIVA ........................................................................................................ 16 1.4 ESCOPO ..................................................................................................................... 17 1.5 LINHA DE PESQUISA ............................................................................................... 17 1.6 PROCEDIMENTO METODOLÓGICO ...................................................................... 17 2 FUNDAMENTAÇÃO TEÓRICA ............................................................................... 19 2.1 DESIGN DE INTERAÇÃO ......................................................................................... 19 2.1.1 Web Design.............................................................................................................. 20 2.2 USABILIDADE .......................................................................................................... 22 2.2.1 Arquitetura da Informação .................................................................................... 22 2.2.2 Sitemap .................................................................................................................... 23 2.2.3 Estudo do comportamento do usuário ................................................................... 24 2.2.4 Ergonomia ............................................................................................................... 25 2.3 INTERFACE ............................................................................................................... 26 2.3.1 Wireframes .............................................................................................................. 26 2.3.2 Layout...................................................................................................................... 27 2.3.2.1 Cores e legibilidade ................................................................................................ 29 2.3.2.2 Tipografia............................................................................................................... 30 2.4 DESENVOLVIMENTO E LINGUAGENS ................................................................. 31 2.5 REDES SOCIAIS ........................................................................................................ 33 2.6 METODOLOGIA DE PROJETO ................................................................................ 33 3 PESQUISA DE CAMPO .............................................................................................. 35 3.1 EMPRESA .................................................................................................................. 35 3.2 PÚBLICO DE INTERESSE ........................................................................................ 37 3.2.1 Coleta e análise de dados do Questionário aplicado a clientes da HP Contabilidade ..................................................................................................................... 37

3.2.2 Coleta e análise de dados da entrevista aplicada ao sócio fundador da HP contabilidade ...................................................................................................................... 44 3.3 ESTUDO DOS CONCORRENTES ............................................................................. 45 4 PROJETO..................................................................................................................... 49 4.1 REQUISITOS DE PROJETO ...................................................................................... 49 4.2 CONCEITO................................................................................................................. 50 4.3 WEBSITE HP CONTABILIDADE ............................................................................. 51 4.3.1 Webcontext .............................................................................................................. 51 4.3.2 Sitemap .................................................................................................................... 52 4.3.3 Wireframes .............................................................................................................. 53 4.3.4 Paleta de cores ......................................................................................................... 55 4.3.5 Tipografia ................................................................................................................ 56 4.3.6 Estudo das alternativas ........................................................................................... 57 4.3.7 Alternativa escolhida .............................................................................................. 60 4.3.8 Interface e desenvolvimento ................................................................................... 62 4.3.9 Intranet .................................................................................................................... 69 4.3.10 Usabilidade .............................................................................................................. 73 5 CONSIDERAÇÕES FINAIS ....................................................................................... 75 6 ESTUDOS FUTUROS ................................................................................................. 76 REFERÊNCIAS ................................................................................................................. 77 APÊNDICES ...................................................................................................................... 79 APÊNDICE A – QUESTIONÁRIO APLICADO A CLIENTES DA HP CONTABILIDADE ........................................................................................................... 80 APÊNDICE B – MANUAL WEBSITE HP CONTABILIDADE ..................................... 81 APÊNDICE C – TESTE DE USABILIDADE .................................................................. 93

13 1

INTRODUÇÃO

O presente trabalho utiliza os conceitos e teorias do Design, adquiridos durante o curso de design, tendo como objetivo transmitir seriedade, compromisso, organização e potencializar a comunicação de um escritório de contabilidade, localizado em Florianópolis, SC, que atua no mercado da Grande Florianópolis e cidades vizinhas. O maior diferencial para as grandes empresas, além da qualidade dos serviços e atendimento, é a troca de informações na web, tornando este mecanismo dinâmico e instantâneo.

Conforme o crescimento da área de web design, os trabalhos e aplicações comerciais necessitam de estudos aprofundados, ligados a usabilidade, interface e arquitetura da informação. É visível a diferença entre os projetos que foram deficientes e os não deficientes nestas etapas de desenvolvimento. Quando não é estipulada uma linha de raciocínio, não são feitas pesquisas e estudos do comportamento do usuário a aplicação não alcança o sucesso de manter o usuário entretido com o site, ele acaba tendo dificuldade em encontrar as informações de seu interesse. Estes fatores desencadeiam diversos problemas na comunicação através da internet. Desta forma a área de web design tem como objetivo tornar o mundo digital mais organizado, atraente e funcional, disseminando informações e assuntos pertinentes para todos os usuários.

Conforme Dias (2003, p. 28): Um sistema interativo é considerado eficaz quando possibilita que os usuários atinjam seus objetivos. A eficácia é a principal motivação que leva um usuário a utilizar um produto ou sistema. Se um sistema é fácil de usar, fácil de aprender e mesmo agradável ao usuário, mas não consegue atender a objetivos específicos de usuários específicos, ele não será usado, mesmo que seja oferecido gratuitamente.

Além da eficiência do sistema para uma boa usabilidade devemos também considerar a eficiência e a satisfação do usuário.

14 1.1

PROBLEMATIZAÇÃO

O avanço tecnológico, a inclusão digital e a globalização, trouxeram como conseqüências a necessidade de informações facilitada em tempo real, maior competitividade entre as empresas, e a busca de reconhecimento das empresas no mercado de atuação.

Com o avanço da informática, a popularização da internet e a otimização de tempo, a necessidade de obter informações em tempo real tornou-se essencial para uma posição de destaque no mercado. Além das necessidades de divulgação das empresas e serviços, de maior fluxo de informações também se faz necessária a agilidade na disponibilização de documentos, controle de informações e dados da empresa que contrata os serviços oferecidos. Desta forma os escritórios contábeis necessitam de uma adaptação à nova realidade no mundo da web e tecnologias digitais.

Com o passar dos anos a concorrência entre escritórios de contabilidade aumentou e existe a necessidade de inovar no modo de apresentação dos serviços oferecidos. Muitos escritórios deixaram de fazer apenas serviços contábeis tradicionais e passaram oferecer consultoria. A estagnação em prestação de serviços contábeis tradicionais promove o risco de perder espaço no mercado e ser superado pelos seus concorrentes.

Uma grande preocupação com a otimização do tempo é também um ponto chave para questionamentos no prazo de serviços oferecidos. É necessário dispor de um tempo muito grande para explicar exatamente os passos que o cliente deve seguir. Porém esta comunicação de leis e obrigações dos clientes referentes a questões governamentais, muitas vezes é precária. O entendimento total por parte dos clientes de assuntos específicos da área da contabilidade é defasado, muitas vezes os funcionários da empresa necessitam explicar em uma linguagem mais simples e clara, capaz de transparecer o significado de cada lei e documentos necessários para tais atividades contábeis.

Deste modo, como a HP Contabilidade pode melhorar sua comunicação, buscando esclarecer as dúvidas de seus clientes e futuros clientes, transparecer as necessidades e os objetivos de serviços contábeis, transmitindo informações em tempo real, e procurando expandir a médio e longo prazo sua atuação no mercado contábil na região da Grande Florianópolis e do estado de Santa Catarina?

15 1.2

OBJETIVOS

1.2.1 Objetivo Geral

Utilizar os conhecimentos e recursos das áreas de Design Digital e desenvolver o layout e front-end do website, para diferenciar, ressaltar e popularizar a empresa HP Contabilidade assim como banalizar informações necessárias para todos cidadãos.

1.2.2 Objetivo Específico



Conhecer e analisar a empresa e o mercado de trabalho da HP Contabilidade.



Conhecer e analisar os concorrentes diretos e indiretos.



Efetuar pesquisa com clientes e público de interesse.



Desenvolver um website, onde possibilite reconhecimento e agregação de valor a empresa e seus serviços.



Desenvolver uma área de acesso restrito para comunicação entre cliente e empresa.



Desenvolver um layout capaz de transmitir os valores da empresa e tornar as informações relativas à área contábil acessíveis para todos.

16 1.3

JUSTIFICATIVA

O tema escolhido justifica-se pela necessidade de maior esclarecimento dos assuntos da área contábil para o público em geral e pela importância de existir um canal para troca de informações e documentação de uma empresa de contabilidade com seus clientes. A HP Contabilidade é uma empresa experiente deste ramo. Por se tratar de uma prestadora de serviço atuante em um competitivo mercado em expansão, busca-se, com a utilização das ferramentas do design e arquitetura da informação, a valorização da marca, expandindo a comunicação com o seu público de interesse. A aplicação do web design para realização desse projeto agrega valor à empresa, conteúdo para a população que necessita de esclarecimento para diversos assuntos relativos à área da contabilidade e oferece crescimento intelectual ao graduando.

Busca-se alcançar os resultados almejados neste trabalho, com estudos e análises, atendendo as necessidades de comunicação interna e externa da empresa. Segundo Nielsen (2002, p.1): As homepages são os patrimônios mais valiosos do mundo. São investidos milhões de dólares em um espaço com menos de um metro quadrado. O impacto da homepage na retaguarda de uma empresa é muito maior do que as simples medidas de rendimento por comércio eletrônico: a homepage também é a face de sua empresa para o mundo. Cada vez mais, os possíveis clientes examinarão sua presença on-line antes de fazer qualquer negócio com você. – independentemente de a venda real ser fechada on-line.

Com o resultado da análise da área de atuação da empresa, chega-se na problematização, a qual consiste na necessidade de troca de informações instantânea do escritório HP Contabilidade com seu público no mercado competitivo da Grande Florianópolis.

Serão utilizados levantamentos bibliográficos, análise de dados da empresa e concorrentes diretos e indiretos.

17 1.4

ESCOPO

Este projeto pretende compreender as necessidades e a realidade do escritório HP contabilidade como também de seus clientes, a fim de criar estratégias e planejamento de design que irão colaborar para o crescimento da empresa e a disseminação de informações da área contábil.

Localizada na Grande Florianópolis, Santa Catarina, a empresa atende clientes em várias cidades do estado de SC, pretendendo expandir sua área de atuação e dar continuidade a fidelização de seus clientes.

1.5

LINHA DE PESQUISA

O referido projeto possui como sustentação teórica a linha de pesquisa Design para novas mídias e a interatividade, que tem por objetivo principal a interação do homem com o mundo digital e a tecnologia.

A empresa HP Contabilidade é nosso objeto de pesquisa. Observando o mercado onde a empresa atua percebeu-se a necessidade de desenvolver um website para disseminação da marca, e serviços prestados pela empresa, permitindo a troca de informações da área contábil, assim como a fidelização dos clientes e a expansão de atuação no mercado.

1.6

PROCEDIMENTO METODOLÓGICO

A metodologia científica procura tornar a leitura e a compreensão do problema de pesquisa coerente e organizado, apontando regras e proporcionando maior qualidade nos trabalhos científicos.

18 Este trabalho será realizado em duas etapas: Primeira etapa: Pesquisa e revisão bibliográfica, com levantamento dos temas relacionados a este trabalho, conceituados e expostos, sendo julgados de acordo com o aprofundamento necessário.

Segunda etapa: Pesquisa de campo com o público de interesse, entrevista realizada com o sócio da empresa, buscando informações e necessidades do projeto, assim como levantamento de informações e análises de concorrentes diretos e indiretos.

A necessidade do estudo da aplicação científica é a busca de uma resposta inovadora, capaz de eliminar os problemas, segundo Marques (2006, p.33):

Pode-se dizer que a pesquisa é a busca de uma resposta significativa a uma dúvida ou problema. Para que a pesquisa receba a qualificação de pesquisa científica, deve caracterizar-se por meio da efetivação de um processo que, mediante a aplicação da Metodologia Científica e de técnicas adequadas, procura obter dados fidedignos, para conhecer e compreender um dado fenômeno.

19 2

2.1

FUNDAMENTAÇÃO TEÓRICA

DESIGN DE INTERAÇÃO

Existem milhares de produtos interativos em nossa vida, e todos possuem algo em comum, a necessidade de uma boa usabilidade. A importância da usabilidade nesses produtos é grande, pois é ela quem faz a ponte entre produto e usuário, uma vez em defasagem, esta comunicação passa a ser uma grande barreira, gerando incomodo e irritação do usuário.

Grande parte dos produtos do mercado requerem a interação do usuário para a realização de suas tarefas, porém muitos desses produtos parecem não ter sido projetados pensando no usuário em primeiro plano. O design de interação tem como principal objetivo tornar a experiência do usuário agradável, possibilitando-o assimilar a interface e funções de modo rápido, específico e eficaz.

Conforme Preece (2002, p. 23)

Projetar produtos interativos usáveis requer que se leve em conta quem irá utilizá-los e onde serão utilizados. Outra preocupação importante consiste em entender o tipo de atividades que as pessoas estão realizando quando estão interagindo com os produtos.”

O design de interação busca compreender o motivo pelo qual o produto se insere na vida do usuário, seus aspectos emocionais na interação produto e usuário, delimitar as necessidades e propor a solução de problemáticas focadas no usuário. Para tornar o projeto dinâmico e em busca da experiência perfeita são necessárias quatro atividades básicas no desenvolvimento do design de interação, são elas: identificar necessidades e estabelecer requisitos, desenvolver designs alternativos que vão ao encontro desses requisitos, construir versões alternativas de maneira que possam ser transmitidas aos outros e apreciadas, avaliálas e medir sua aceitabilidade. O estudo destas quatro atividades torna o projeto dinâmico, facilmente acessível reconhecendo os pontos chaves a serem trabalhados em busca de soluções práticas para todo o tipo de usuário.

20 Conforme Preece (2002, p. 187): O design de interação envolve o desenvolvimento de um plano alimentado pelo uso que se espera do produto, pelo seu domínio-alvo e por considerações práticas relevantes. Designs alternativos precisam ser gerados, captados e avaliados pelos usuários.”

Ou seja, para estudar a usabilidade de um objeto é necessário estudá-lo em uso, fazer testes e avaliar diferentes possibilidades.

Através da experiência no mundo virtual o usuário mantém uma relação diária com o design de interação, assim como através dos eletrônicos, televisão, telefone, celular, rádio, caixa eletrônico, entre inúmeros outros aparelhos. É através de processos de desenvolvimento focado no usuário que as interfaces destes aparelhos tornam a experiência do usuário facilitada.

Com a internet o usuário possui informações em curto prazo de tempo, possuindo mesmo instruções e dados em tempo real, a fim de suprir suas necessidades de modo facilitado e muitas vezes instantâneo. Segundo Dias (2003, p.29) o sistema de interface “deve ser fácil de aprender de tal forma que o usuário consiga rapidamente explorá-lo e realizar suas tarefas com ele”, proporcionando uma interação sem ruídos.

A internet segundo Almeida (2009, p.09) é uma forte aliada do design para interação. Podemos perceber que com a chegada da era digital a troca de informações e experiências entre usuários e empresa está cada vez mais constante, como o uso de blogs e redes sociais, ressaltando a necessidade de comunicação direta com diversos usuários, prestadores de serviços e informações.

2.1.1 Web Design

O web design é uma extensão da prática do design e uma sub-categoria do design de interação, onde o projeto é a criação de interface para websites e arquivos digitais no ambiente da web. Esta área necessita da multidisciplinaridade, uma vez que o desenvolvimento de projetos para web requer subsídios de diversas áreas técnicas, além do design de interface. O web design envolve projeto de interface, arquitetura da informação, programação, estudo da usabilidade e acessibilidade, entre outros.

21 Uma das maiores preocupações em projetos para web é a usabilidade no planejamento da interface e na construção do projeto. É necessário manter as informações organizadas e trabalhar estilos de cores, tipografias, composição do layout, etc garantindo ao usuário praticidade, ergonomia e uma navegação agradável e intuitiva. Portanto é necessário que todo projeto seja focado no usuário.

Conforme Nielsen (2002, p. 19): Como o objetivo de uma homepage é facilitar a navegação em todo lugar do site, é fundamental que os usuários consigam encontrar sem muito trabalho a área de navegação adequada, distinguir as opções e ter uma noção básica do que existe por trás dos links.

A definição de um conceito é primordial no desenvolvimento de um website. É através dele que inúmeras análises e experimentos são feitos. O objetivo real do website deve ser o espelho do conceito escolhido, ou seja, o projeto deve ser organizado e conter elementos visuais que transpareçam suas intenções e favoreçam a usabilidade. Uma vez alcançado estes fatores o projeto solucionou o problema levantado nas análises e está então, mais perto da experiência perfeita.

Conforme, Memória (2006, p. 10)

Um produto bem projetado envolve muito mais do que apenas um conteúdo de qualidade.Questões como facilidade de uso, desempenho e design gráfico também são importantes. A satisfação subjetiva, a “agradabilidade” tanto estudada por Donald Norman, também faz parte desse todo. O conjunto resultante de todos esses fatores, mais a questão do flow, ou seja, da fluidez e imersão total, tem a capacidade de gerar aquilo que podemos chamar de “experiência perfeita”

Uma página na web não serve somente para informar segundo Nielsen & Tahir (2002, p.08), ela interage com o usuário proporcionando uma experiência de conhecimento e buscas de informações distribuídas em todo o site, além de muitas vezes oferecer serviços online. A principal preocupação no desenvolvimento do website deve ser a interação página e usuário, transmitindo facilidade e objetividade nas ações que estão disponíveis ao usuário sem descuidar da satisfação provocada pela experiência.

22

2.2

USABILIDADE

2.2.1 Arquitetura da Informação

Para realização de um projeto a arquitetura da informação é primordial, pois é através desta organização que o desenvolvimento do projeto proporcionará ao usuário uma leitura dinâmica do conteúdo do website, evitando assim a dificuldade de acesso as informações e desvio de atenção do usuário. É através da arquitetura da informação que são divididos os grupos de informações relacionadas, ou seja, categorias de informações, assim é possível delimitar um grau de importância maior para os assuntos mais acessados do website.

Além de proporcionar uma estrutura limpa, a arquitetura da informação serve para estimar o número de páginas de um site, conteúdo e funcionalidades existentes em cada uma delas.

Conforme Memória (2006, p. 29)

As equipes de arquitetura da informação e design de interface dão ênfase às questões de usabilidade e experiência do usuário. Esses dois grupos também são responsáveis pelo planejamento e execução das avaliações dos produtos.

Para definir todas as funcionalidades do site e compreender o direcionamento do usuário a arquitetura da informação não possui uma regra rápida e rígida, é através da observação e organização das informações juntamente com o foco no usuário, que o estudo apontará diferentes soluções para os problemas identificados já no início do projeto. Desta forma as possibilidades futuras durante a execução e pós-projeto caminham ao encontro de problemas nulos. Segundo Rosenfeld (2006, p.4) “a arquitetura da informação é a combinação dos sistemas de organização, de rotulação, de busca e de navegação dentro de websites”.

Outro benefício da arquitetura da informação segundo Almeida (2009, p.109) é a interação do grupo multidisciplinar do projeto, uma vez que é necessário o envolvimento e

23 entendimento de como o website deve funcionar. É nesta etapa que se torna interessante a participação direta de toda equipe, onde se deve destacar o objetivo primordial para o website, assim como as necessidades reais dos seus usuários, desta forma estipulando todos os objetivos e diferenciais, a arquitetura da informação estará direcionada para uma navegação perfeita e bem estruturada.

O estudo de concorrentes também faz parte desta etapa de trabalho, desta forma pode-se mapear os prós e contras utilizados nos websites dos concorrentes, analisando a amplitude de projeto e envolvimento do usuário.

2.2.2 Sitemap

Com a arquitetura da informação já definida, sua estrutura é transformada em sitemap, ou seja, um mapa com todas as informações separadas em categorias contidas no site. O sitemap é útil para o usuário se localizar facilmente, além ter uma grande importância nas análises de SEO (Search Engine Optimization), é uma visão geral de todo o site.

Conforme Dias (2003, p. 107) A navegação na internet, por exemplo, pode ser facilitada pela apresentação de uma introdução ao assunto tratado, sumários, mapas do site, linguagem familiar ao usuário, ícones com forma e localização consistentes.

Através do sitemap podem-se obter respostas do nível de dificuldade de navegação do usuário no site, é nesta etapa que se pretende fazer ajustes e elaborar um planejamento facilitando a navegação. O caminho que o usuário irá percorrer até chegar a uma determinada página, ou link ou até mesmo a informação desejada, deve ser bem elaborado, evitando que o usuário seja redirecionado para uma página através de vários caminhos, pois isso dificulta a compreensão da trajetória e do ponto de partida no decorrer da permanência no site.

Conforme Krug (2006, p.57):

24 Em um web site, não há esquerda ou direita, para cima ou para baixo, mas o que queremos dizer com para cima ou para baixo é na hierarquia0 para um nível mais geral ou mais específico.

A organização das páginas e do conteúdo de cada página é feito através de níveis, organizados de acordo com a hierarquia das informações, esta divisão auxilia no mapeamento dos conteúdos desta forma é importante dar ênfase a todos os níveis, trabalhando de forma completa a distribuição e organização das páginas (Ver Fig. 1).

Figura 1 – Exemplo de arquitetura e sitemap da equipe TV Globo.

Fonte: Memória, Felipe (2006)

2.2.3 Estudo do comportamento do usuário

É através da análise de comportamento do usuário que se pode perceber as falhas em estruturas da arquitetura da informação e wireframes. Este estudo pode ser realizado através de programas que mapeiam onde o usuário foca mais sua visão, e o caminho traçado enquanto o usuário navega pelo site. Outros estudos que podem ser feitos são através da criação de perfis de usuários, onde é estipulado um ponto de chegada comum, porém com rotas de navegação diferentes, conforme cada perfil estipulado. Para este estudo um determinado número de pessoas faz a simulação do modo de uso do website, com intuito de encontrar a informação estipulada. Isto promove a verificação de usabilidade, pois se todos

25 conseguirem chegar ao mesmo ponto, de forma diferente e sem ruídos de comunicação, foi sanada a problemática no quesito usabilidade.

Conforme Dias (2003, p.67) Seus objetivos específicos variam de acordo com a abordagem de pesquisa. Em pesquisas na área de Usabilidade de interfaces homem-computador, seu objetivo é aprender como os participantes interpretam a realidade, perceber seus conhecimentos, experiências e dificuldades, além de obter indícios do grau de satisfação dos usuários com o sistema em teste.

2.2.4 Ergonomia

Também podemos estudar a usabilidade de um website utilizando os critérios ergonômicos para avaliar a navegação.

A análise da usabilidade pelos critérios ergonômicos de Scapin e Bastien é feita pelos projetistas e ergonomistas e não com o usuário final. Baseia-se na observação dos critérios de: Condução, Carga de Trabalho, Controle Explícito, Adaptabilidade, Gestão de Erros, Consistência, Significado dos Códigos e Compatibilidade.

O questionário Ergolist desenvolvido pelo Labutil da Universidade Federal de Santa Catarina - UFSC, disponível em http://www.labiutil.inf.ufsc.br/ergolist/ oferece uma ferramenta bastante detalhada e útil para esta análise.

26

2.3

INTERFACE

2.3.1 Wireframes

Para aperfeiçoar a navegação do usuário, são feitos estudos de organização dos conteúdos, blocos estruturais com pré-disposição dos elementos visuais e textuais, para posteriormente submeter a testes de comportamento dos usuários. No processo de criação das wireframes, já existe a preocupação de como o usuário irá se comportar com determinada situação de organização de conteúdo, facilitando assim a definição de fatores como alinhamento e caminho da leitura visual durante a permanência na página, importantes para a disposição das informações nas páginas do projeto.

Conforme Memória (2006, p. 30) Wireframes são como uma planta-baixa do site, prevendo cada detalhe e funcionalidade que será utilizada. O nível de complexidade do desenho depende do projeto, que normalmente começa simples e vai ganhando detalhes com o tempo.

Com o desenvolvimento das wireframes, também é possível prever os elementos que necessitam de destaque, avaliando áreas com maior e menor peso visual. A wireframe prevê a estrutura de cada template, facilitando a inserção ou exclusão de determinadas seções do site. É através destes estudos que pode-se constatar se a estrutura elaborada faz sentido antes de qualquer produção gráfica (Ver Fig. 2).

27

Figura 2 – Exemplo wireframe do site da equipe TV Globo.

Fonte: Memória, Felipe (2006)

Não existe uma única regra específica para wireframes. Conforme Lynch & Horton (2004, p.81) pode-se utilizar o estudo para posicionamento dos elementos e definição da tipografia utilizada, porém a maior utilidade das wireframes é prever juntamente o design com a linguagem de montagem do site, constatando os limites e barreiras de projeto.

2.3.2 Layout

Quando se obtém um estudo aprofundado das etapas anteriores, o layout flui de maneira facilitada, pois com o estudo de posicionamento das informações e pré-disposição de elementos textuais e visuais produzidos nos wireframes, o desenvolvimento do layout é focado em transparecer o perfil da empresa, sua área de atuação, público de interesse e diferenciais competitivos

28 Conforme Memória (2006, p. 164)

O design de interface tem de basear-se no público-alvo, nos objetivos do produto e nas principais tarefas. A interface tem de ir direto ao ponto, ser simples, previsível e óbvia, transparente para o usuário. A navegação e os elementos das páginas devem ser consistentes, mantendo o mesmo comportamento ao longo do site, que também deve adotar as convenções da web.

Uma maneira organizada de delimitar os elementos e seus espaçamentos é a utilização de grids, os quais servem para tornar o site agradável, alinhando alguns elementos e prevendo uma quebra desse alinhamento se necessário. É importante manter uma norma de alinhamento dos elementos para que o site não fique bagunçado. Os grids geralmente estão presentes já na etapa das wireframes, porém é necessário manter ou reestruturar estes grids na elaboração do layout.

Segundo Lynch & Horton (2004, p.82):

Uma página entediante composta somente de texto repelirá o olhar do leitor, por parecer-lhe uma massa cinza uniforme e sem indicações óbvias sobre como estão estruturadas as informações.

Conforme a necessidade e o avanço tecnológico, as resoluções dos monitores estão mudando a todo o momento. Com a vinda de monitores de alta capacidade e alta resolução, o grid utilizado popularmente é 960 Grid System, ou seja, com largura de 960 pixels, sendo esta a área útil máxima para desenvolvimento do layout que se ajustará em todas as resoluções.

Existem algumas áreas comuns para todos os sites, como o cabeçalho e o rodapé, explorados de forma a facilitar o entendimento total do site e acesso rápido a dados importantes da empresa, como contato e menu. Estas duas áreas são importantes para a divulgação do conteúdo do site. Mas não devemos pensar que o cabeçalho limita-se no topo do site, e que o rodapé só possui informações clássicas, isto não é uma regra de uso, portanto pode-se ou não manter esse posicionamento e informações.

29 2.3.2.1 Cores e legibilidade

Questões como cores, fontes e posicionamento dos elementos são de grande importância nesta etapa, estes fatores são essenciais no modo em que o usuário fará a leitura do site, focando sua atenção em determinados pontos do layout. Conforme Farina (1990, p.

35) as cores e a visibilidade de certos detalhes dos elementos facilitam a memorização dos mesmos.

As cores representam a imagem da empresa, sensações e significados de cada elemento. Através da cor o usuário consegue distinguir as ações propostas pelo site, como botões dinâmicos de cliques, títulos, textos além das próprias cores das imagens e seus significados e informações. Através da diferenciação das cores e tons podemos facilitar ao usuário entender a navegação pois é possível destacar um botão demonstrando ao usuário determinada região de interação.

Conforme Farina (1990, p.41):

Os estímulos visuais têm características próprias, como tamanho, proximidade, iluminação, cor, e conhecer essas propriedades é de fundamental importância aos que se valem da imagem para transmitir mensagens.

Também é através das cores que podemos incentivar a permanência do usuário no website. O estudo de cores conforme Nielsen (2000, p.125) serve para prever o conforto e legibilidade da página. Cores muito intensas e utilizadas em uma grande área do site transmitem uma sensação de desconforto ao usuário, podendo acarretar problemas de legibilidade e cansaço visual.

Tons mais claros e sóbrios, assim como espaços em branco são recomendados como fundo para partes textuais do site, conforme Gomes (2003), facilitando a leitura do usuário e transmitindo uma sensação se limpeza do layout, pois aumenta o contraste de visualização do site na tela.

30 2.3.2.2 Tipografia

Devido à diferença entre sistemas operacionais (Windows da Microsoft, Macintosh da Apple e Linux) segundo Lynch & Horton (2004, p. 127), é necessária uma atenção a tipografia escolhida, ou seja, a fonte escolhida para ser aplicada ao website. É necessária a escolha de fontes padrão da web, para tornar a navegação mais dinâmica e facilitar o carregamento das informações na página. Existem alguns plugins em que o desenvolvedor pode introduzir o arquivo de fonte nos códigos front-end e o navegador demonstrar corretamente na tela uma fonte que não é padrão no website. Porém estes plugins necessitam ser utilizados com cuidado, em áreas de texto pequenas, pois se utilizado em textos corridos extensos deixam o site mais pesado, correndo o risco de dependendo da conexão, não carregar totalmente de forma rápida, trazendo transtorno e uma visualização diferente do layout planejado da página. Também pode-se utilizar textos em formato de imagem.

Entre as fontes padrão encontradas em todos os sistemas operacionais podemos destacar: 

Times New Roman



Georgia



Verdana



Arial



Trebuchet



Tahoma A tipografia desempenha um papel importante tanto na concepção visual, quanto

na comunicação de informações, através da tipografia o usuário vai ter uma experiência agradável em permanecer no site e fazer a leitura de todo conteúdo da página. É necessário um estudo de hierarquia para comunicar e delimitar cada sessão do site. Além destes requisitos, o alinhamento dos blocos de textos, o uso de margens, estilos de textos, tamanho da fonte, cor, e espaçamento são extremamente importantes para uma fácil navegação entre os conteúdos dispostos na página e em todo o site.

Nielsen & Tahir (2001, p.23) sugerem:

31 Limitar os estilos de fonte e outros atributos de formatação de texto, como tamanhos, cores, etc. na página, porque o texto com design muito pesado pode se desviar do significado das palavras.

2.4

DESENVOLVIMENTO E LINGUAGENS

A definição das linguagens do site é muito importante para a visualização das páginas em diferentes navegadores e para o sistema de atualização de conteúdo. É nesta etapa que se organiza o conteúdo dinâmico, com intuito de facilitar futuras alterações textuais, imagens e informações do banco de dados. As linguagens podem variar de acordo com a necessidade específica de cada conteúdo, porém a linguagem XHTML e CSS é mais utilizada devido a otimização de código, tempo, e facilidade de manutenção. Outras linguagens podem ser aplicadas, como Ajax, JavaScript, ActionScript, JQuery, PHP, entre outras para complementar efeitos, validações e a programação necessária. Cada linguagem possui suas vantagens e desvantagens, por isso é preciso estudar cada componente do conteúdo para fazer a escolha certa de linguagem.

Conforme Alvarez

Se a página a qual estamos pensando ou a que queremos redesenhar, é relativamente pequena e que seus conteúdos são perenes e não previmos pagar por mantê-la, o emprego de páginas dinâmicas pode ficar grande e acabar sendo improdutivo.

Sendo o contrário, se o site é extenso e seus conteúdos mudam rapidamente, nos interessa o automatizar na medida do possível todas as tarefas de tal forma que possamos conduzir sua exploração da melhor forma.

A fim de tornar o mundo da web mais organizado, sentiu-se necessidade de criar a World Wide Web Consortium (W3C), uma organização oficial fundada em 1994 por Tim Berners-Lee. Esta organização faz recomendações de padrões web utilizados na montagem dos sites, que tornam as páginas acessíveis na maioria dos navegadores. Também possibilita acessibilidade para portadores de deficiências visuais. Este padrão pode ou não ser seguido, existe uma validação para estipular se o site está, ou não, nos parâmetros citados pela W3C, mas cada vez é mais recomendado.

32 As normas e possibilidades listadas nos padrões web são modificadas ao longo do tempo, trazendo novas possibilidades de interação para o usuário, tornando a web cada vez mais dinâmica, capaz de suprir e gerar novos negócios na internet.

Devido à quantidade de navegadores (Mozila Firefox, Internet Explorer, Safari, Google Chrome) e o não cumprimento de padrões de desenvolvimento estabelecidos pela W3C pode ser problemática. Amontagem do front-end necessita ser prevista da forma que não resulte em problemas de desordem no momento do carregamento dos elementos na página.

Navegadores mais antigos não possibilitam a visualização de imagens em formato PNG com transparência, como não suportam efeitos em CSS. Utilizando a linguagem XHTM e CSS, padrão recomendado pela W3C, a construção do website trona-se dinâmica e com códigos otimizados, possibilitando uma interação facilitada com as linguagens de programação, como PHP e JavaScript.

Segundo Alves (2008, p. 22):

A HTML não é uma linguagem de programação propriamente dita. Ela é melhor classificada comouma linguagem de formatação de textos ou definição da estrutura de um documento. Assim ela não gera um programa executável, como ocorre com as linguagens de programação.

A linguagem de PHP juntamente com o MySQL são as mais utilizadas para tornar o website funcional, desde a interação com o usuário, à atualização das informações das páginas. O PHP e o MySQL são muito utilizados para a validação de formulários e comunicação direta com o banco de dados, essencial para a construção de grandes portais e sites que possuem o serviço de extranet e intranet.

Segundo Almeida (2009, p. 123): Por plataforma deve-se entender todo o conjunto de definições técnicas quanto a banco de dados, servidores e linguagens de desenvolvimento que permitirão o desenvolvimento do projeto.

33 2.5

REDES SOCIAIS

Atualmente as pessoas procuram uma relação mais direta com as empresas, a fim de conhecer em detalhes, os serviços prestados e a política de qualidade, buscando conhecer os reais valores e a missão das empresas. Esta relação se faz presente nas redes sociais, onde cada usuário poderá se aproximar de marcas e empresas que se identifica. Acontece então uma troca de informações e experiência entre usuário e empresa, possibilitando um maior conhecimento do seu público de interesse.

Segundo a pesquisa do IBGE, a população brasileira chegou a 191,5 milhões de pessoas em julho de 2010, destes, segundo o Ibope, 35% são internautas. A parcela de usuários brasileiros de internet que acessam as redes sociais é alta, somando 58,7 milhões de pessoas.

Pode-se aplicar ações de interação entre clientes, usuários interessados e empresas através de redes sociais como: Twitter, Blogs, Orkut, Facebook e LinkedIn. Promoções e interações entre os usuários são as ações mais praticadas por grandes empresas e artistas, tornando seu publico de interesse em usuários féis.

Conforme Novaes (2010, p. 22):

As redes sociais precisam ser tratadas como o espaço estratégico para criar o vínculo de admiração e respeito, engajar, ter propósitos transparentes, responder as questões da comunidade de forma participativa, acatar opiniões, críticas e sugestões, falar com a mesma autenticidade com todos os participantes, sem dar privilégios ou regalias aos mais fervorosos e lembrar-se todos os dias de que reconhecimento é necessário e faz bem.

2.6

METODOLOGIA DE PROJETO

A metodologia utilizada é segundo Almeida (2009, p.09) que utiliza a pratica de Web Progressiva que consiste em maximizar os benefícios oferecidos em ambas as partes, empresa e cliente. Em outras palavras, trata-se da otimização da demanda, oferecendo o máximo possível de serviços e informação para o usuário, dentro da expectativa de retorno da empresa, obtendo uma visão detalhada da necessidade dos usuários.

34 Partindo desse princípio, o processo detalhado de uma Web progressiva adaptada para este projeto pode ser definida utilizando a metodologia de Moebius citada por Almeida (2009) e consiste em um conjunto de etapas, as quais são estudo de key-elements, objetivos, webcontext, definição de plataformas de aplicação, produção da interface, testes de usabilidade, lançamento, analise de resultados, e encerramento do projeto.

O conjunto de elementos chave é o levantamento dos cinco elementos a serem detalhados: público-alvo, demandas, usuários, produtos e mercado. Através deste levantamento pode-se traçar um perfil e um conceito, organizando todos os objetivos e necessidades para o planejamento da construção do website.

Conforme Almeida (2009, p. 51): É a definição destes elementos-chave que dará à equipe de planejamento todas as linhas gerais para a montagem de escopo. Caberá a ela, então, casá-los em uma estratégia ao mesmo tempo detalhada e abrangente.

Através da listagem dos objetivos e a observação do webcontext, serão ressaltadas as reais necessidades do website, promovendo uma arquitetura da informação detalhada e com o foco no usuário.

Segundo Almeida (2009, p.106) é importante conhecer o contexto do projeto segundo o ponto de vista do usuário. Todas as etapas serão desenvolvidas com foco no usuário.

Conforme Almeida (2009, p.158): Enquanto se vai mapeando os pontos chave e a evolução do projeto, deve-se ir montando e desenvolvendo ações corretivas com intuito de ajustá-los conforme o planejamento inicial.

Com a arquitetura da informação já definida e já estabelecidos os caminhos do projeto assim como o conteúdo de cada página, é estipulada a linguagem utilizada para a montagem do website e a estruturação do layout. Desta forma a etapa de produção já pode ser iniciada, passando por testes na visualização de vários navegadores e de usabilidade estando preparado para o lançamento.

35 3

PESQUISA DE CAMPO

Com intuito de conhecer a empresa e suas necessidades, assim como seus clientes, foi realizada uma pesquisa online (APÊNDICE A), proporcionando ao público de interesse sua manifestação sobre necessidades e hábitos na contabilidade e na internet.

Também foi aplicada uma entrevista com o sócio fundador da empresa HP Contabilidade, listando e analisando pontos positivos e negativos no funcionamento da empresa, assim como no comportamento dos seus clientes.

Além da pesquisa e entrevista, foi feita uma análise dos concorrentes diretos e indiretos da empresa, observando suas oportunidades e fraquezas, estudando atributos visuais e técnicos de seus websites.

3.1

EMPRESA

A HP Contabilidade é uma empresa experiente e em constante crescimento no mercado da área contábil, possui poucos funcionários, porém atende a uma demanda grande de clientes. Competência e responsabilidade são características marcantes da empresa, atuando a 43 anos no mercado da Grande Florianópolis e do estado de Santa Catarina, a empresa adquiriu confiança e grandes clientes. Os serviços e atendimentos prestados pela HP Contabilidade ocorrem em sua sede, localizada no bairro Balneário em Florianópolis.

Em 1968 Humberto Paulo Pacheco dá início à empresa, atendendo os clientes da Grande Florianópolis. A empresa começa a expandir seus serviços e área de atuação, atendendo filiais de grandes empresas localizadas em Joinville, Itajaí e Jaraguá. Em 1998 seu filho Rodrigo Pacheco torna-se o novo sócio da empresa.

Atualmente a HP Contabilidade não possui um espaço próprio, aluga um ambiente com grande área, possuindo quatro amplas salas, para melhor receber seus clientes (Ver Fig 3 e 4). No local há livros da área contábil e de direito utilizados como referência, computadores, mesas de trabalho, cadeiras e uma sala de espera para acomodação do cliente. Os planos para os próximos meses é a aquisição de salas comerciais no bairro Estreito em Florianópolis, localização mais próxima da sede de seus maiores clientes.

36

Figura 3 – Sala HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

Figura 4 – Sala 2 HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

O escritório de contabilidade conta com serviços prestados para pessoa física ou jurídica, como: área fiscal, área trabalhista e previdenciária, área societária e área gerencial.

Através do uso de sistemas desenvolvidos especialmente para suas necessidades, o escritório investe em produtos de alta tecnologia para aprimorar, garantir a segurança de seus serviços e tornar dinâmicas as atividades diárias dos funcionários e emissão de relatórios diversos.

Investe no design através da papelaria, possuindo pastas, cartões de visita, plásticos para documentos, folder e canetas.

37 A empresa possui uma identidade visual, desenvolvida há alguns anos por uma empresa da área de comunicação visual, portanto todo o material desenvolvido segue o padrão da marca.

3.2

PÚBLICO DE INTERESSE

Tornando o usuário e a disseminação de informações como focos do projeto, foi organizado um questionário a fim de conhecer as necessidades do público de interesse e seus hábitos de navegação na internet, levantaram-se questões como idade, sexo, pesquisas na internet, solicitação de documentos através de uma área privada, entre outros. Também foram aplicadas entrevistas com os sócios proprietários da empresa, procurando mapear suas dificuldades diárias em atender os clientes e sistema de suporte para dúvidas, assim como solicitações de documentação.

3.2.1 Coleta e análise de dados do Questionário aplicado a clientes da HP Contabilidade

Buscando conhecer o público de interesse e seus hábitos, foi realizado um questionário online através do site Wufoo, http://www.wufoo.com, disponibilizado na internet e compartilhado através de e-mail com os clientes permanentes da HP Contabilidade, sendo respondido por um total de 24 usuários.

38 Qual sua faixa etária?

Gráfico 1 – Questionário “clientes HP Contabilidade”, questão 1.

Fonte: PACHECO, Vanessa (2010)

Através da análise da faixa etária, 68,0% de respondentes entre 18 e 30 anos, pode-se constatar que os clientes que possuem um maior contato com a contabilidade são públicos jovens, sendo funcionários de empresas, como sócios fundadores, desta forma o produto deverá atender às necessidades dos usuários possuindo um estilo moderno, capaz de atrair novos investidores.

Qual seu sexo?

Gráfico 2 – Questionário “clientes HP Contabilidade”, questão 2.

Fonte: PACHECO, Vanessa (2010)

39

Você utiliza internet diariamente?

Gráfico 3 – Questionário “clientes HP Contabilidade”, questão 3.

Fonte: PACHECO, Vanessa (2010)

Tendo como resultado 100% dos usuários acessando a internet e praticamente o mesmo número de pessoas de ambos os sexos (56% dos homens e 44% das mulheres), o dado demonstra a importância da internet para ambos os sexos, desta forma o projeto deverá trazer novas experiências para os usuários.

Você já sentiu necessidade de buscar informações sobre contabilidade com outras pessoas?

Gráfico 4 – Questionário “clientes HP Contabilidade”, questão 4.

Fonte: PACHECO, Vanessa (2010)

40 Com estes dados é possível constatar, que muitas pessoas pesquisam sobre contabilidade para informar-se sobre determinado assunto, 64% dos respondentes já sentiram necessidade de buscar informações sobre contabilidade com terceiros.

Você sente necessidade de ter acesso aos documentos através da internet em uma área privada, onde só você e o escritório de contabilidade tivessem acesso?

Gráfico 5 – Questionário “clientes HP Contabilidade”, questão 5.

Fonte: PACHECO, Vanessa (2010)

Você solicitaria documentos e informações ao escritório de contabilidade, através de uma área privada?

Gráfico 6 – Questionário “clientes HP Contabilidade”, questão 6.

Fonte: PACHECO, Vanessa (2010)

41 Com 78,9% de usuários que sentem a necessidade de ter acesso a documentos em uma área privada e 100% dos usuários que solicitariam documentos através de uma área privada, pode-se contatar que a empresa necessita facilitar a comunicação e a troca de informações específicas para cada cliente, onde o projeto deverá prever uma área de comunicação direta para solicitação e visualização sobre os serviços prestados pela empresa.

Você pesquisa assuntos relacionados a área de contabilidade em sites de busca, portal do Conselho Regional de Contabilidade (CRC), sites de outras empresas de contabilidade, ou blogs e redes sociais?

Gráfico 7 – Questionário “clientes HP Contabilidade”, questão 7.

Fonte: PACHECO, Vanessa (2010)

Com 76,0% dos usuários efetuando pesquisas sobre contabilidade em sites de busca, demonstra a realidade da falta de referência para pesquisas. Confirmando esta informação apenas 12,0% de usuários pesquisam suas dúvidas no portal do CRC. Desta forma o projeto deverá contemplar uma área onde sejam constantemente atualizadas informações sobre diversos serviços da área contábil, possibilitando a conquista de novos clientes e o destaque no ranking de pesquisas do Google.

42 Suas dúvidas sobre assuntos da área contábil são sanadas de forma rápida e fácil ao efetuar pesquisas na internet?

Gráfico 8 – Questionário “clientes HP Contabilidade”, questão 8.

Fonte: PACHECO, Vanessa (2010)

No que se refere ao tempo de dúvidas sanadas, 52,0% dos usuários possuem dificuldade em encontrar respostas na internet, contra 44,0% de usuários que utilizam de 5minutos a 30 minutos do seu tempo para sanar suas dúvidas. Comparado com a análise do gráfico anterior sobre onde os usuários costumam pesquisar, pode-se constatar que os primeiros sites que aparecem na busca de sites de pesquisa como o Google, são os mais acessados para informações, desta forma um dos maiores objetivos do projeto é conseguir um lugar de destaque no ranking de pesquisas do Google, fazendo uso do Google Adsense, serviço oferecido pelo Google que lista as palavras mais pesquisadas referente o tema.

43 Para você, quais informações são mais relevantes em sites corporativos?

Gráfico 9 – Questionário “clientes HP Contabilidade”, questão 9.

Fonte: PACHECO, Vanessa (2010)

As informações mais importantes para os clientes e interessados em contabilidade são 37,8% dos serviços prestados pela empresa e 33,1% dos formulário e dados de contato.

Este gráfico apresenta uma divisão muito pequena entre 3 opções da pesquisa, 22,2% acreditam que notícias e informativos também são muito importantes. Através destes dados pode-se prever para o projeto uma descrição detalhada dos serviços prestados, e destaque para notícias e informativos, fazendo uso de redes sociais para a disseminação de todas as informações, possibilitando um contato direto entre empresa e cliente.

44 3.2.2 Coleta e análise de dados da entrevista aplicada ao sócio fundador da HP contabilidade

A entrevista com o sócio fundador da empresa, Humberto Paulo Pacheco, ocorreu de maneira informal, proporcionando uma maior liberdade em suas explicações sobre atendimentos ao cliente, dúvidas e suporte.

Com experiência de 43 anos, Humberto P. Pacheco conta que inúmeros clientes possuem dificuldade de entender os processos e as documentações para cada serviço. Desde o primeiro encontro com o cliente, onde são apresentados os serviços e o método de trabalho, as reuniões duram em média 2 a 3 horas, onde são explicados todos os passos que o cliente deve proceder e toda a documentação que ele deverá providenciar.

Humberto conta também que a empresa possui em sua proposta, o acompanhamento de todos os processos burocráticos envolvidos no serviço, portanto o cliente estará sempre ciente do andamento nas emissões de documentos e registros necessários para determinados serviços.

Pode-se perceber a necessidade de um suporte, onde estivessem disponíveis aos clientes e futuros clientes a respostas para dúvidas comuns, como passo a passo para registro de empresas, documentação necessária, questões sobre aposentadoria, declaração do imposto de renda, entre outros. O tempo gasto para explicações ao telefone é enorme, o que causa certo tumulto e acúmulo dos serviços, onde funcionários muitas vezes necessitam fazer hora extra para entregar o material no prazo.

Outro ponto destacado na entrevista foram as solicitações de documentos, os clientes entram em contato através do telefone, ou até mesmo aparecem sem hora marcada para pedir um relatório ou solicitar documentos complexos, para serem entregues na hora ou no mesmo dia.

Humberto conta que sente necessidade da empresa possuir um site, pois com a inclusão digital a tendência para a contratação e a descoberta de novas empresas se dá através de pesquisas na internet. Em conversa, Humberto ressalta-se a presença de jovens no mercado de trabalho, onde muitos possuem seu próprio negócio. Afirma que é difícil uma empresa de grande porte fazer a troca de contratação de serviços da área contábil, pois é uma área onde o cliente adquire a confiança na empresa e nos serviços prestados, portanto é mais rentável direcionar a divulgação e o marketing da empresa para novos empresários, e buscar parcerias

45 como o Sebrae. Também reconhece que é preciso uma interação facilitada com os clientes que atende no estado de SC, proporcionando uma comunicação sem ruídos e com possibilidades de segurança e agregação de valor aos serviços oferecidos pela empresa.

3.3

ESTUDO DOS CONCORRENTES

Serão observadas características relevantes ao projeto, tendo como principal objetivo mapear os pontos fortes e fracos dos concorrentes diretos e indiretos da empresa HP Contabilidade. Para isto serão listados os concorrentes apresentando as principais características do site, e para analisar atributos estéticos, atributos técnicos e redes sociais aplica-se uma tabela comparativa de análise dos concorrentes conforme a metodologia Moebius citada por Almeida (2009, p. 82), utilizando como regra a atribuição de um peso para os requisitos analisados no estudo. O peso é atribuído pelo estrategista, portanto o peso máximo atribuído para este projeto é 3. Após atribuição de pesos para os requisitos a serem avaliados, cada site deverá ser pontuado em uma escala de 1 (péssimo) a 5 (ótimo) , o número 0 serve para representar um item nulo no site (Ver tabela 1).

Após atribuídas as pontuações dos requisitos avaliados, deve-se calcular a pontuação total do site fazendo uso da formula abaixo:

Figura 5 – Fórmula para análise de concorrentes.

Fonte: ALMEIDA, Ricardo (2009, p.82)

A fim de obter um maior conhecimento sobre os concorrentes, procura-se analisar as linhas de estilo e navegação utilizadas em cada website.

O website da empresa Orsitec trabalha com cores sóbrias, deixando o site com um estilo mais corporativo e tecnológico. As áreas de interação do usuário não possuem ícones,

46 porém os botões recebem um destaque no tom mais escuro de cinza, proporcionando ao usuário uma informação de que aquela área possui um link. Pode-se perceber que para acessar a área restrita, o usuário somente irá encontrar os campos de login e senha na página inicial do site (ver Fig 6).

A empresa possui um blog e trabalha com redes sociais, onde são incluídas notícias e informações sobre contabilidade, porém a identidade visual do blog e das redes sociais não condizem com a identidade visual do website (Ver Fig. 7).

Figura 6 – Orsitec Assessoria Contábil e Empresarial.

Fonte: Orsitec Assessoria Contábil e Empresarial (2009)

Figura 7 – Blog Orsitec Assessoria Contábil e Empresarial.

Fonte: Blog Orsitec Assessoria Contábil e Empresarial (2009)

47

Através da mistura de tons azuis, o website Arquivo contabilidade procura trabalhar com linhas mais arredondadas e com efeito de profundidade através da sombra utilizada. A falta de legibilidade no menu atrapalha a leitura, assim como os efeitos utilizados tornam o website pesado. Uma ponto a destacar é a possibilidade de cadastro de currículos, disponibilizando oportunidades para novos talentos e contratação de novos profissionais (Ver Fig 8).

Figura 8 – Arquivo Contabilidade.

Fonte: Arquivo Contabilidade (2009)

O website da empresa Faracon trabalha com as cores verde, branca e cinza, fazendo referência a tecnologia e finanças. A navegação é confusa e a falta de legibilidade de algumas áreas como menu, proporcionam um peso desnecessário para a página (Ver Fig 9). A arquitetura da informação não está clara, muitos ícones e muitas áreas próximas de interação do usuário, dificultando o entendimento rápido de cada ícone, cada link abre o conteúdo em uma nova página do navegador, isso torna a navegação caótica.

48

Figura 9 – Faracon Contabilidade.

Fonte: Faracon Contabilidade (2009)

Tabela 1 – Requisitos necessários em um website, avaliados conforme seus atributos definindo o concorrente direto com maior potencial.

PESO 3 3 3 3 2 3 3 PESO 3 3 2 2 3 2 2 2 PESO 2 3 2 1

ATRIBUTOS ESTÉTICOS Beleza Classe Sofisticação Estilo Tipografia Legibilidade Ícones ATRIBUTOS TÉCNICOS Navegação Tempo de Resposta Mapa do site Performance Área Restrita Setor RH Informativos Links úteis REDES SOCIAIS Facebook Blog Twitter Orkut TOTAL

ORSITEC

ARQUIVO CONTABILIDADE

FARACON

4 4 3 4 5 5 0

2 2 1 2 2 3 1

1 1 1 2 1 1 1

3 4 0 4 3 0 0 0

1 2 0 3 3 2 1 3

2 3 0 3 1 0 2 2

0 2 3 2 2,59

0 0 0 0 1,55

0 0 0 0 1,17

49 Desta forma, pode-se perceber que a empresa Orsitec possui um estilo de website marcante, trabalhando seu diferencial em atributos estéticos e fazendo uso de redes sociais, sendo um concorrente direto com grande potencial.

4

PROJETO

4.1

REQUISITOS DE PROJETO

Analisando os questionários aplicados com clientes, o público de interesse em área contábil, entrevista realizada com o sócio fundador da HP Contabilidade, os seguintes requisitos de projeto foram definidos para o crescimento da empresa, assim como a otimização do tempo dos funcionários e a disseminação das informações: 

Tamanho da resolução: 1024x768;



Prever layout flexível que adapte sua altura de acordo com o conteúdo inserido;



Montagem do front-end deverá ser feita em HTML e CSS, seguindo os padrões sugeridos pela W3C;



Prever local de destaque na página inicial para informativos;



Aplicar palavras-chave nos códigos front-end, buscando boas práticas de SEO a fim de ganhar destaque no ranking de pesquisa do Google;



Proporcionar contraste entre cores de fundo e texto, priorizando a legibilidade e tons da marca da empresa;



Tornar o acesso e as informações referentes a serviços prestados pela empresa de modo mais claro, possibilitando sanar dúvidas em curto tempo;



Criar o layout do website da empresa, transparecendo segurança e modernidade;



Criar o layout do blog e mídias sociais;

50 

Proporcionar aos clientes uma troca rápida de informações através da intranet, tornando-a simples e objetiva;



4.2

Tornar a intranet personalizada para cada cliente;

CONCEITO

A partir da análise das pesquisas e o estudos da empresa, foi construído um painel semântico com o estilo de vida dos clientes, procurando ilustrar situações, vestimentas e comportamento dos usuários.

Figura 10 – Painel Semântico Público de Interesse.

Fonte: Pacheco, Vanessa (2010)

Através da análise dos concorrentes e do comportamento dos clientes, foram definidas palavras-chave, com intuito de caracterizar e demonstrar sensações que se deseja transparecer no projeto.

Palavras-chave: Moderno; Sóbrio; Compartilhamento; Global; Segurança; Dinâmico.

51

Figura 11 – Painel Semântico Público de Interesse.

Fonte: Pacheco, Vanessa (2010)

As imagens demonstram a leveza e a segurança que o website deverá transmitir, através de cores sóbrias, ícones e trabalhos com luz, sombra e transparência pode-se perceber a importância destes elementos que representam o conceito.

4.3

WEBSITE HP CONTABILIDADE

4.3.1 Webcontext

Para manter o usuário satisfeito ao navegar no website e se relacionando com a empresa adequadamente, é necessário um mapeamento das ações de interação do usuário.

52 Potencializando a satisfação do usuário, o website faz uso de componentes dinâmicos, como banners animados, mensagens de feedback, Twitter, Facebook e a própria intranet.

A comunicação direta entre usuários e empresa por meio das redes sociais, torna o website mais visível, ou seja, torna a exposição do conteúdo e do próprio endereço na web mais divulgado, obtendo melhores posições no ranking de pesquisas como o Google.

4.3.2 Sitemap

Buscando-se transmitir grande organização e divisão hierárquica das informações, foi criado um mapa do site, separando as categorias e páginas do website (Ver Fig. 12).

Figura 12 – Sitemap Website HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

Buscando-se visualizar as necessidades de navegação e solicitação de documentos e dúvidas, foi desenvolvido o mapa do site para a intranet, possibilitando a separação das áreas de atuação e documentos específicos (Ver Fig 13).

53

Figura 13 – Sitemap Intranet HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

4.3.3 Wireframes

Através da simulação da organização das informações dispostas na página inicial do site, foram feitos estudos das wireframes, trabalhando os modos de navegação do usuário.

O modelo 1 trabalha uma navegação lateral, prevendo a inclusão de novos itens para o menu. Também possui uma área para banner e chamadas para as sessões notícias e dúvidas (Ver Fig 14).

54

Figura 14 – Wireframe modelo 1.

Fonte: Pacheco, Vanessa (2010)

O modelo 2 trabalha um menu superior, prevendo espaço para banner, trabalhando a disposição das chamadas de páginas internas em blocos, além do acesso restrito para clientes no canto inferior esquerdo da página.

Figura 15 – Wireframe modelo 2.

Fonte: Pacheco, Vanessa (2010)

55 Analisando os modelos de navegação, pode-se constatar que o modelo 3 desempenha melhor apresentação do conteúdo do website, organizando as informações em grandes blocos distintos. O menu e o acesso de clientes na parte superior torna a navegação clara e objetiva, reduzindo os possíveis ruídos de comunicação. Desta forma a opção de wireframe escolhida possui otimização do número de cliques do usuário, assim como um aproveitamento maior da área útil da tela.

Figura 16 – Wireframe modelo 3.

Fonte: Pacheco, Vanessa (2010)

4.3.4 Paleta de cores

Trabalhando o significado, psicologia das cores, suas aplicações e as tonalidades da identidade visual, procurou-se definir uma paleta de cores, baseada na logo da empresa e em questões de legibilidade e estilo do website.

56

Figura 17 – Paleta de Cores.

Fonte: Pacheco, Vanessa (2010)

Optou-se por utilizar as cores verde, azul e cinza em diferentes tonalidades, ressaltando a idéia de independência, estabilidade e modernidade da cor cinza, assim como a sorte, segurança e estabilidade do verde e a calma, honestidade e transparência do azul.

4.3.5 Tipografia

Verificando a necessidade de fontes padrão para web em áreas de grande quantidade de texto, optou-se em utilizar a fonte Tahoma, da família tipográfica sem-serifa, para textos corridos (Ver Fig 18). Considerada como uma das melhores fontes para web, e concebida para projetos digitais, a família de fontes Tahoma torna a leitura confortável, tornando possível a visualização correta do website em diferentes sistemas operacionais e navegadores.

Tornando o website e a intranet diferenciados, utilizou-se uma fonte que não é padrão em todos os navegadores, porém é anexada no código CSS através do plugin FontFace, capaz de utilizar fontes externas que o usuário não tenha instaladas em seu computador. A fonte Segoe UI, da família tipográfica sem-serifa, sendo sucessora da Tahoma, foi utilizada em títulos e subtítulos, destacando certas áreas do website (Ver Fig.19).

57

Figura 18 – Fonte Tahoma, família tipográfica sem-serifa.

Fonte: Wikipédia (2010)

Figura 19 – Fonte Segoe UI, família tipográfica sem-serifa.

Fonte: Wikipédia (2010)

4.3.6 Estudo das alternativas

Iniciando a geração das alternativas, foram desenvolvidos estudos utilizando duas estruturas das wireframes, posteriormente seguiu-se de base a estrutura de wireframe escolhida, onde os posicionamentos dos elementos possuem uma organização de hierarquia da

58 informação. Procurou-se destacar a área do banner, onde a empresa HP Contabilidade solicitou maior interesse e preocupação.

Foram trabalhadas variações de tonalidades da paleta de cores selecionada, utilizou-se linhas retas, trazendo seriedade e racionalidade para o projeto, as sombras utilizadas trazem volume e dimensão para os elementos da página.

Na área destinada ao banner, utilizou-se uma navegação independente, possibilitando o acesso rápido e a inserção de vários banners no mesmo local. Outra preocupação foi manter a área de acesso para clientes visível.

Todas as alternativas utilizam as fontes Tahoma e Segoe-UI, possibilitando o acesso do website em vários sistemas operacionais.

Figura 20 – Geração de alternativas iniciais.

Fonte: Pacheco, Vanessa (2010)

Figura 21 – Geração de alternativas iniciais 2.

Fonte: Pacheco, Vanessa (2010)

59

Figura 22 – Geração de alternativa wireframe escolhida 1.

Fonte: Pacheco, Vanessa (2010)

Figura 23 – Geração de alternativa wireframe escolhida 2.

Fonte: Pacheco, Vanessa (2010)

60

Figura 24 – Geração de alternativa wireframe escolhida 3.

Fonte: Pacheco, Vanessa (2010)

4.3.7 Alternativa escolhida

Após a análise de todas as alternativas, visando legibilidade, conceito de projeto, viabilidade, dinamismo, potencial e estilo, pode-se escolher a alternativa ideal para o projeto (Ver Fig. 25).

61

Figura 25 – Alternativa escolhida.

Fonte: Pacheco, Vanessa (2010)

Analisando todas as alternativas pode-se escolher a mais apropriada para o projeto, a qual se destaca por uma interface moderna, sóbria e dinâmica.

As tonalidades utilizadas destacam as áreas de maior interesse dos usuários, como mantém a interface marcante, procurando enaltecer a marca.

O banner ocupa toda a largura do website, tornando possível a visualização correta e continua da página em monitores com resoluções maiores que 1024x768. Outra funcionalidade é a navegação independente para o banner, onde o usuário poderá visualizar os títulos dos banners antes mesmo de acessá-los, facilitando a procura de assuntos específicos pelos usuários.

O uso de luz e sombras na logo e no menu, possibilitam uma visualização de volume entre os itens do site, remetendo também a importância de cada elemento disposto no site. A divisão das chamadas de destaque tornam o acesso facilitado às áreas mais importantes do site, assim como as informações de contato mais procuradas destacadas no rodapé do site.

O acesso restrito para clientes estará presente em todas as páginas, evitando transtorno para usuário, pois nas demais gerações de alternativas o acesso para clientes aparecia somente na página inicial.

A divisão do menu deu-se através do estudo de itens mais acessados e mais importantes em um website corporativo, desta forma foram dispostos no menu superior os

62 itens de destaque, mais procurados por usuários e clientes. O menu inferior, encontrado no rodapé, possui links para assuntos ligados a área de contato, atendimento e redes sociais.

4.3.8 Interface e desenvolvimento

Após a escolha da alternativa final foram elaboradas todas as telas do website, possibilitando o desenvolvimento do front-end. Para a montagem de todo o site, foram utilizadas as linguagens HTML, CSS, ActionScript 3.0, Jquery e PHP. A tela inicial tem como objetivo destacar áreas de maior acesso, como banner, 43 anos de atuação da empresa HP Contabilidade no mercado de Santa Catarina, notícias e dúvidas freqüentes. Na página inicial o banner e o menu foram desenvolvidos em flash, possibilitando a adição de novos banners via arquivo de XML, facilitando a atualização da área de banners.

As escolhas das imagens e ícones do website foram efetuadas conforme o estilo e conceito do projeto, transmitindo seriedade e preocupação com a imagem da empresa. Linhas retas também foram utilizadas para transparecer a seriedade dos serviços e da área de atuação.

Também foram trabalhadas áreas com luz e sombra, para destacar as informações que necessitam de maior destaque e divulgação, reforçando a hierarquia das informações.

A área de acesso aos clientes possui o desenvolvimento utilizando a linguagem Jquery, capaz de omitir ou mostrar os campos de login conforme solicitação do usuário (Ver Fig 27).

63

Figura 26 – Página Inicial do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

Figura 27 – Página Inicial do site HP Contabilidade com painel de acesso restrito aberto.

Fonte: Pacheco, Vanessa (2010)

64 As páginas internas do site possuem uma estrutura diferenciada, onde os títulos e resumos das páginas são encontrados logo após o menu, facilitando o entendimento de todo o conteúdo disponibilizado na tela.

Figura 28 – Página Empresa do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

Figura 29 – Página Serviços do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

65

A página de notícias possui integração com as mídias sociais, possibilitando o usuário a compartilhar o conteúdo do site com seus amigos de diversas redes sociais, como Twitter e Facebook. Outra integração no sistema de notícias é feita através da programação, onde é compartilhado automaticamente todo conteúdo do site para as redes sociais da HP Contabilidade, ou seja, é feita a divulgação de todos os assuntos tratados na área de notícias do site.

A divisão das notícias é feita através de categorias, possibilitando o usuário a acessar rapidamente todas as notícias da área de seu interesse. Outra grande vantagem desta página é o uso de aplicativos do Google, como Google Adsense, o qual faz uma análise nas informações contidas no website e conforme a atualização constante e a abordagem de assuntos mais procurados no Google, torna o website um dos primeiros resultados no ranking de pesquisa do Google, proporcionando uma maior divulgação da marca.

Figura 30 – Página Notícias do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

66 A página de informativos HP possibilita o usuário de inscrever-se na lista de email marketing da empresa, assim como visualizar os últimos informativos encaminhados por e-mail para clientes e interessados. Além do acesso a informativos o usuário poderá fazer o download da agenda tributária.

Figura 31 – Página Informativo HP do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

A página de dúvidas utiliza linguagem Jquery, tornando o acesso às dúvidas freqüentes mais dinâmicas, através de um painel expansivo, onde o usuário clica sobre a pergunta e o painel se estende mostrando a resposta. Este tipo de navegação torna o site interativo e organizado, evitando que o usuário se perca em meio a tanto conteúdo.

67

Figura 32 – Página Dúvidas do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

A página de contato utiliza um formulário possibilitando o usuário a enviar suas mensagem diretamente do site, sem precisar passar por seu programa de gerenciamento de emails. Outra ferramenta utilizada foi o Google Maps, possibilitando traçar rotas e procurar pontos de referência com relação à sede da HP Contabilidade.

A informação de feedback para o usuário sobre envio da sua mensagem se dá de forma simples e personalizada.

Figura 33 – Página Contato do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

68

Figura 34 – Página Feedback Usuário do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

As páginas, trabalhe conosco e links úteis, utilizam a linguagem Jquery, apresentadas em formato de Facebox, ou seja, pequenas janelas que abrem por cima da página ativa, podendo ser fechadas a qualquer momento.

Figura 35 – Página Trabalhe Conosco do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

69

Figura 36 – Página Links Úteis do site HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

Ao acessar o link atendimento o usuário é direcionado para uma janela de conversa do MSN, onde poderá conversar com o atendente da empresa HP Contabilidade. A ferramenta utilizada está disponível através da Microsoft para uso em websites.

4.3.9 Intranet

Com o desenvolvimento do website pode-se utilizar elementos de estilo e conceito para a aplicação da interface da intranet, onde o cliente terá acesso após fazer o login na área restrita para acesso de clientes.

A interface da intranet tem como principal objetivo, tornar simples e prática a navegação através de categorias disponíveis para cada cliente, onde mantêm-se o uso das mesmas tipografias e cores utilizadas no layout das páginas do website, porém utilizando diferentes tonalidades e ícones para ilustrar e facilitar o entendimento de situações e ações do usuário. O uso de linhas retas também é predominante na interface da intranet, tornando visível um estilo sóbrio e objetivo.

70 A tela inicial da intranet possui uma disposição de informações diferente das páginas do website. O menu apresenta-se na lateral esquerda, possibilitando a inclusão de novos módulos e ações futuras para intranet. Também possui um calendário onde o cliente poderá fazer seu controle de datas e eventos. A área central apresenta um espaço para informativos internos, ou seja, avisos específicos para cada cliente, enquanto a área da direita apresenta o resumo geral da empresa, contento os dados básicos de registro e contato, também prevendo um espaço específico para a logo da empresa.

O rodapé presente em toda intranet utiliza as mesmas informações textuais do website, o cliente tem a possibilidade de acessar o atendimento online, assim como um módulo de ajuda que irá exemplificar através de tutoriais, todas as situações possíveis de interação através da intranet.

O menu superior da intranet trabalha apenas questões de acesso, como configuração de conta e botão de saída da intranet.

Figura 37 – Página Inicial da Intranet HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

As páginas de listagem de documentos das áreas disponíveis para o cliente têm como objetivo tornar a navegação intuitiva, demonstrando dados como data, nome do documento, ação disponível para o usuário e números de downloads efetuados.

O número de downloads efetuados serve como base para controle dos arquivos mais acessados, possibilitando a empresa HP Contabilidade uma análise detalhada das maiores necessidade do cliente.

71

Figura 38 – Página Área Contábil da Intranet HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

Os boletos dos honorários da empresa HP Contabilidade podem ser impressos pelo cliente, através de um painel de controle de seus pagamentos, caso o pagamento do boleto não tenha sido efetuado o sistema avisa que o pagamento ainda está em aberto. Esta categoria também possui informações básicas sobre os documentos relacionados a honorários, como data, nome de documento, ação disponível para o usuário, número de downloads efetuados e status do pagamento. Nesta sessão o número de downloads efetuados é muito importante, o usuário sempre será avisado se já possuir algum registro de download do arquivo, deste modo evitará que o pagamento seja feito mais de uma vez enquanto o boleto não seja descontado e o status do sistema ainda estiver em aberto.

Figura 39 – Página Honorários HP da Intranet HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

72 Como fator primordial na otimização de tempo dos funcionários, a página de solicitações de documentos e de suporte possuem grande importância no sistema. O usuário poderá solicitar novos documentos pré-disponibilizados em uma lista disponibilizada através do sistema, dividida por áreas da contabilidade (Ver Fig. 40).

Além da solicitação de novos documentos o usuário manterá no sistema um histórico de suas solicitações, possibilitando um controle de documentos já solicitados facilitando o acesso a estes documentos posteriormente caso necessite (Ver Fig 41). Esta lista de solicitações servirá como uma maneira do cliente possuir um feedback mais rápido sobre suas necessidades, possibilitando também a otimização do tempo dos funcionários, visto que não irão precisar demandar grande parte do tempo para atender o cliente em seu espaço físico várias vezes ao dia e gastos excessivos de materiais para o escritório, como tinta para impressora, papel sulfite, pastas, e muitas vezes serviços de entrega.

Figura 40 – Página Nova Solicitação da Intranet HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

73

Figura 41 – Página Minhas Solicitações da Intranet HP Contabilidade.

Fonte: Pacheco, Vanessa (2010)

A página de suporte possui o mesmo conceito da página de solicitações, onde o usuário manterá um registro do envio de todas as suas dúvidas e respostas obtidas pela empresa. Este canal será utilizado como grande fonte de informação e conhecimento dos clientes e público de interesse, possibilitando a empresa HP Contabilidade um relatório de necessidades comuns, e possivelmente as mesmas necessidades de empresas que possam vir a tornar - sem seus futuros clientes.

4.3.10 Usabilidade

Foram realizados testes e questionamentos sobre tonalidades das cores do website, legibilidade e estrutura da disposição das informações. Também foram analisados testes da exibição das páginas em diferentes navegadores. Como Internet Explorer, Mozila Firefox, Google Chrome e Safari, todos apresentaram o website de forma correta, pois durante o desenvolvimento front-end foram utilizados os padrões recomendados pela W3C. O resultado foi satisfatório, apresentando uma grande aceitação dos usuários e dos próprios funcionários da empresa HP Contabilidade.

Estão sendo desenvolvidos testes de navegação e acessibilidade com clientes da empresa HP Contabilidade, sendo disponibilizado para os clientes o questionário da LabIUtil, Laboratório de Utilizabilidade da informática da Universidade Federal de Santa Catarina.

74 Um dos clientes da empresa HP Contabilidade respondeu o questionário aplicado às áreas de experiência do usuário, presteza do sistema, agrupamento de informações por localização, feedback para o usuário e compatibilidade. O resultado de todos os testes foi positivo, onde foram respondidas 67 questões, sendo 30 não aplicáveis, 36 questões com resultados apontados como satisfatório e 1 questão que reporta um item que necessitará de ajustes futuramente. Com esta pesquisa pode-se constatar que a usabilidade foi desenvolvida com foco no usuário, para tornar a experiência de navegação mais confortável e intuitiva.

75 5

CONSIDERAÇÕES FINAIS

O presente projeto, por ser realizado em contato direto com toda a equipe de funcionários e sócios da empresa HP Contabilidade, foi extremamente gratificante de realizar.

Por ser uma empresa com grande histórico na atuação do mercado de Santa Catarina, pode-se constatar uma construção de confiança em 43 anos de atuação, assim como o espírito de equipe no desempenho das funções de cada membro da empresa.

Possuindo grande importância para a HP Contabilidade, o projeto realizado tornase necessidade do dia-a-dia da empresa, trazendo grande satisfação dos resultados obtidos em cada etapa de desenvolvimento.

Analisando as problemáticas existentes ocasionadas pela falta de um website e uma intranet, pode-se constatar que o design e a mídia digital possui grande importância entre o relacionamento de empresas e clientes. Desta forma acredita-se ter atingido um resultado satisfatório, proporcionando para empresa a disseminação da sua marca e informações da área da contabilidade.

Possibilitando novos contatos e novas experiências a seus clientes, a empresa agregará valor a sua marca, aliando seu potencial de atuação e permanência no mercado e seus serviços oferecidos através da nova porta de contato com o mundo através da web. É primordial a preocupação com o público de interesse tornando as informações claras e objetivas, deste modo é de extrema necessidade que as empresas de contabilidade tenham essa preocupação em tornar seus websites acessíveis e com uma interface adequada, realizando estudos e aplicações de design em seus materiais.

Portanto, concluiu-se que o projeto, seus objetivos e o objetivo da empresa HP Contabilidade foram finalizados com sucesso, sem esquecer que poderão haver otimizações e melhorias a serem feitas ao longo de seu uso. Um web site se desenvolve permanentemente.

76 6

ESTUDOS FUTUROS

Conforme prazos curtos para planejamento e execução do projeto, foram desenvolvidas interfaces e front-ends com poucas ferramentas dinâmicas para os usuários, podendo haver maiores aplicações de ferramentas e novas áreas de acessos para o site.

Também se tem a idéia de abranger novos módulos na intranet, focando a atenção na experiência e opinião do usuário.

Outra área de possíveis projetos é a integração e alimentação de conteúdo para as redes sociais, disseminando ainda mais informações da área contábil e troca de experiência com outras empresas, assim como desenvolvimento de produtos da empresa HP Contabilidade para a plataforma mobile.

77 REFERÊNCIAS

ALMEIDA, Ricardo. Mirando Resultados 2.0: Uma metodologia para planejamento de projetos digitais. São Paulo: Clube dos Autores, 2009.

ALVAREZ, Miguel Angel. Diferença entre páginas dinâmicas e HTML. Disponível em: <http://www.criarweb.com/artigos/148.php> Acessado em: 20 de agosto de 2010.

ALVES, William Pereira. Crie, anime e publique seu site utilizando Fireworks, Flash, Dreamweaver. São Paulo, Érica 2008.

BAKKEN, S. S. et al. (2005). Manual PHP. Disponível em: <http://www.php.net/manual/pt_BR/intro-whatis.php> Acessado dia 22 de junho de 2009.

DIAS, Cláudia. Usabilidade na WEB: criando portais mais acessíveis. Rio de Janeiro: Alta Books, 2003.

FALLEIROS, Dario Pimentel. O mundo gráfico da informática. São Paulo: Futura, 2003.

FARINA, Modesto. Psicodinâmica das cores em comunicação. 4. ed. São Paulo: E. Blücher, 1990.

GAMBA, Júnior. Computação gráfica para designers: dialogando com as caixinhas de diálogo. Rio de Janeiro: 2AB, 2003.

GOMES, João Filho. Gestalt do Objeto: Sistema de Leitura Visual da Forma. 5 ed. São Paulo: Escrituras, 2003.

KRUG, Steve. Não me faça pensar!: uma abordagem de bom senso à usabilidade na web.

Rio de Janeiro: Alta Books, 2006.

LÉVY, P.; As Tecnologias da Inteligência: O Futuro do Pensamento na Era da Informática; São Paulo: Editora 34, 1993.

LYNCH, Patrick J.; HORTON, Sarah. Guia de estilo da web: princípios básicos para a criação de web sites. Barcelona: GG, 2004.

MARQUES, Heitor Romero; MANFROI, José; CASTILHO, Maria Augusta de; NOAL, Mirian Lange. Metodologia da pesquisa e do Trabalho Científico. Minas Gerais: Editora UCDB, 2006.

MEMÓRIA, Felipe. Design para a internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.

MEMÓRIA, Felipe. Galeria de Projetos: FLICKR. Disponível em: < http://www.flickr.com/photos/fmemoria/archives/date-taken/2006/01/27/> Acessado em: 30 de outubro de 2010.

MORVILLE, P e ROSENFELD, L. Information Architecture for the Word Wide

78 Web. 2.ed. Sebastopol: O'Reilly, 2006.

NIELSEN, Jakob. Projetando Websites. Rio de Janeiro: Campus, 2000.

NIELSEN, J.; MACK, R. L.; Usability Inspection Methods. John Wiley & Sons Inc.; New York, 1994.

NIELSEN, Jakob; TAHIR, Marie. Homepage: usabilidade : 50 websites desconstruídos. São Paulo: Campus, 2002.

NOVAES, Antônio W. #Mídias Sociais: perspectivas, tendências e reflexões. Paper Cliq, 2010.

PREECE, Jenny; ROGERS, Yvonne; SHARP, Helen. Design de interação: além da interação homem-computador. Porto Alegre: Bookman, 2005.

SIEGEL, David. Criando sites arrasadores na web II. Tradução Túlio Camargo Silva. São Paulo: Quark Books, 1998.

VASCONCELOS, Fernando Antônio de. Internet: responsabilidade do provedor pelos danos praticados. Curitiba: Juruá, 2003.

W3C. Padrões para web. Disponível em: <http://www.w3.org/TR/WCAG10-TECHS/> Acessado em: 15 de agosto de 2009.

WIEDEMANN, Julius. Web design: studios 2. Cologne: Taschen, [200-?]

79

APÊNDICES

80 APÊNDICE A – Questionário aplicado a clientes da HP Contabilidade

81 APÊNDICE B – Manual Website HP Contabilidade

82

83

84

85

86

87

88

89

90

91

92

93 APÊNDICE C – Teste de Usabilidade

94

95

96

97