1
Universidade Estadual de Maringá
Centro de Tecnologia
Departamento de Informática
Curso de Especialização “Desenvolvimento de Sistemas para Web”
Um Modelo Teórico Prático para a Construção de Interfaces para
Websites
Kátia Pereira Gasparello Sforni
Prof. Dr. Dante Alves Medeiros Filho
Orientador
Maringá, 2011
2
Universidade Estadual de Maringá
Centro de Tecnologia
Departamento de Informática
Curso de Especialização “Desenvolvimento de Sistemas para Web”
Kátia Pereira Gasparello Sforni
Um Modelo Teórico Prático para a Construção de Interfaces para
Websites
Trabalho submetido à Universidade Estadual de Maringá
como requisito para obtenção do título de Especialista
em Desenvolvimento de Sistemas para Web.
Orientador: Prof. Dr. Dante Alves Medeiros Filho
Maringá, 2011
3
Universidade Estadual de Maringá
Centro de Tecnologia
Departamento de Informática
Curso de Especialização “Desenvolvimento de Sistemas para Web”
Kátia Pereira Gasparello Sforni
Um Modelo Teórico Prático para a Construção de Interfaces para
Websites
Maringá, 20 de Dezembro de 2011.
Prof. MSc. José Roberto Vasconcelos Ass.:________________________
Prof. MSc. Paulo César Gonçalves Ass.:________________________
Prof. Dr. Dante Alves Medeiros Filho (Orientador) Ass.:________________________
4
Dedico este trabalho aos meus pais,
minha irmã, meu marido e minha
sogra.
5
AGRADECIMENTOS
Primeiramente agradeço a Deus que me deu o dom da vida, e a várias pessoas que
influenciaram diretamente na realização deste trabalho as quais citarei:
A meus pais Nelson e Maria pelo imenso amor, incentivo;
A minha irmã Carina pelas críticas construtivas;
A meu marido Fábio pelo auxílio na realização deste;
A minha sogra Marinez pelo apoio e carinho;
Ao professor Dr. Dante Alves Medeiros Filho por toda atenção, orientação, amizade e
confiança depositada em mim;
A todo corpo docente do DIN - Departamento de Informática da UEM que neste período
compartilhou conhecimento, disponibilizando recursos num aprendizado mais comprometido;
A empresa Microline por ter permitido a realização deste trabalho;
A todos da turma, pela amizade e compartilhamento de conhecimentos;
E a todos pelo incentivo.
6
RESUMO
O presente trabalho realiza um estudo sobre construção de interfaces web utilizando conceitos
práticos e teóricos de usabilidade e ergonomia. Este estudo vale-se de um estudo de caso para
mostrar como alguns conceitos de ergonomia e usabilidade podem melhorar a comunicação
de um website. Neste sentido, foi realizada uma análise de um site existente onde detectou-se
a ausência de critérios mais elaborados para seu desenvolvimento. Com esta análise foi
possível propor um novo website com a utilização de critérios ergonômicos e de usabilidade.
O resultado é ilustrado com a apresentação do novo site.
Palavras-chave: Ergonomia, Modelo, Interface, Usabilidade, Website.
ABSTRACT
This paper conducts a study on building web interfaces using practical and theoretical
concepts of usability and ergonomics. This study draws on a case study to show how some
concepts of ergonomics and usability can improve the communication of a website. In this
sense, we performed an analysis of an existing site where they detected the absence of more
sophisticated the criteria for its development. This analysis was possible to propose a new
website with the use of ergonomic and usability the criteria. The result is illustrated with the
presentation of the new site.
Key Words: Ergonomics, Model, Interface, Usability, Website.
7
LISTA DE FIGURAS
Figura 1 - Arquitetura projetada da informação ................................................................... 16
Figura 2 - Componentes da usabilidade ............................................................................... 18
Figura 3 - Organização da interface muito utilizada na internet .......................................... 20
Figura 4 - Exemplo de wireframe ......................................................................................... 22
Figura 5 - Layout .................................................................................................................. 24
Figura 6 - Home do website em estudo ................................................................................ 29
Figura 7 - Página empresa .................................................................................................... 31
Figura 8 - Página curso ......................................................................................................... 32
Figura 9 - Página detalhes do curso ...................................................................................... 33
Figura 10 - Página serviços .................................................................................................. 34
Figura 11 - Página jogos ....................................................................................................... 35
Figura 12 - Página Fale Conosco .......................................................................................... 36
Figura 13 - Diagrama da arquitetura da informação ............................................................. 42
Figura 14 - Wireframe da página principal ........................................................................... 43
Figura 15 - Paleta de cores ................................................................................................... 44
Figura 16 - Esboço do layout ................................................................................................ 45
8
LISTA DE QUADROS
Quadro 1 - Cronograma de atividades .................................................................................. 38
Quadro 2 - Conteúdo ............................................................................................................ 39
Quadro 3 - Reestruturação das taxonomias .......................................................................... 41
Quadro 4 - Checklist de inspeção de interface para websites ............................................... 47
9
SUMÁRO
INTRODUÇÃO ...................................................................................................................... 11
1 Objetivo Geral................................................................................................................. 12
1.2 Objetivos Específicos .................................................................................................... 12
1.3 Justificativa ................................................................................................................... 12
1.4 Metodologia da pesquisa .............................................................................................. 13
1.4.1 Tipo de estudo ............................................................................................................. 13
1.4.2 Quais procedimentos para coleta e análise dos dados ................................................. 13
1.4.3 Estrutura do trabalho ................................................................................................... 14
2 INTERFACE WEB ............................................................................................................. 15
2.1 Conceituar, pesquisar e organizar conteúdo .............................................................. 15
2.2 Especificações funcionais e esboço da “aparência e sensação” ................................ 19
2.2.1 Diagramas e fluxogramas para tratar da funcionalidade e navegação ......................... 19
2.2.2 Tipografia: legibilidade e estética para realização do esboço das páginas .................. 21
2.3 Produção de imagens gráficas e documentos HTML ................................................ 25
2.4 Criação do protótipo para análise ............................................................................... 26
2.5 Configuração no servidor final, e avaliação novamente. .......................................... 27
3 ESTUDO ORGANIZACIONAL ........................................................................................ 28
3.1 Estrutura atual .............................................................................................................. 28
4 PROPOSTA PARA NOVO WEBSITE ............................................................................. 38
4.1 Cronograma de atividades ........................................................................................... 38
4.1.1 Etapa 1 - Atividade: Conceituar, pesquisar e organizar conteúdo ............................... 39
4.1.2 Etapa 2 - Definição das novas taxonomias .................................................................. 40
4.1.3 Etapa 3 - Diagramas e fluxogramas para tratar da funcionalidade e navegação ......... 41
4.1.4 Etapa 4 - Tipografia: legibilidade e estética para realização do esboço das páginas .. 44
4.1.5 Etapa 5 - Produção de imagens gráficas e documentos HTML ................................... 46
4.1.6 Etapa 6 - Criação do protótipo para análise ................................................................. 46
4.1.7 Etapa 7 - Configuração no servidor final, e avaliação novamente. ............................ 48
5 CONCLUSÕES .................................................................................................................... 49
5.1 Contribuições teóricas .................................................................................................. 49
5.2 Contribuições práticas ................................................................................................. 49
5.3 Limitações do trabalho ................................................................................................. 50
10
5.4 Sugestões para trabalhos futuros ................................................................................ 50
REFERÊNCIAS ..................................................................................................................... 51
ANEXOS ................................................................................................................................. 52
Anexo 1 - Wireframe da página Sobre ................................................................................. 53
Anexo 2 - Wireframe da página Serviços ............................................................................. 54
Anexo 3 - Wireframe da página Cursos ................................................................................ 55
Anexo 4 - Wireframe da página Blog ................................................................................... 56
Anexo 5 - Wireframe da página Contato .............................................................................. 57
Anexo 6 - Wireframe da página Parceiros ............................................................................ 58
Anexo 7 - Layout da página Sobre ....................................................................................... 59
Anexo 8 - Layout da página Serviços ................................................................................... 60
Anexo 9 - Layout da página Cursos ...................................................................................... 61
Anexo 10 - Layout da página Detalhe do Curso ................................................................... 62
Anexo 11 - Layout da página Blog ....................................................................................... 63
Anexo 12 - Layout da página Contato .................................................................................. 64
Anexo 13 - Layout da página Parceiros ................................................................................ 65
APÊNDICE ............................................................................................................................. 66
Apêndice 1 - Checklist de avaliação website ........................................................................ 67
11
INTRODUÇÃO
Atualmente as empresas têm utilizado websites para realizar mais que marketing web estático,
elas estão cada dia mais interagindo com as pessoas, destacando suas redes sociais e até
solicitando a opinião de seus usuários e clientes para determinado serviço ou produto
oferecido. Esta interação é possível, pois além da tecnologia embutida na lógica do sistema, as
interfaces estão cada vez mais bem preparadas para recepção de seus usuários.
Para que a recepção dos usuários seja eficaz, e sua navegação no website seja eficiente, nota-
se a transformação que as interfaces têm apresentado com: conteúdo consistente de textos
curtos e claros; layout arrojado, leve e fácil de entender; sistema de navegação funcional;
imediatez nas informações solicitadas; feedback informativo disponibilizando ambiente em
que o usuário sinta-se no controle com finalidade de atrair visitantes e fazer com que voltem.
Observa-se com isto que as empresas precisam sempre se atualizar frente às novas demandas.
Neste sentido é imperativo que seus serviços web para a satisfação das necessidades de seus
usuários utilizem no desenvolvimento de website conceitos como usabilidade e a ergonomia.
Neste contexto é que surgiu a motivação para a realização deste trabalho que procura mostrar
como estes conceitos podem contribuir no desenvolvimento de páginas web, de forma
significativa para a melhora da interação-humano-computador.
Para ilustrar como estes conceitos podem auxiliar no desenvolvimento dessas aplicações será
realizado um estudo de caso com um site de uma empresa, com o objetivo de elaborar um
website utilizando conceitos e métodos que serão discorridos no embasamento teórico. Assim,
esta pesquisa justifica-se a desenvolver um ambiente web com foco na facilidade de uso,
articulando interesses e expectativas dos envolvidos, maximizando a interação com usuários
com finalidade de promover marketing web em uma escola de cursos profissionalizantes.
Para alcançar a realização deste trabalho no tópico seguinte está o objetivo geral e a relação
dos objetivos específicos.
12
1 Objetivo Geral
Mostrar como os conceitos de usabilidade e ergonomia no desenvolvimento de interfaces web
podem promover um ambiente colaborativo, de fácil interação, de layout claro e sucinto,
contribuindo de maneira expressiva para a melhoria da interação-humano-computador.
1.2 Objetivos Específicos
Para alcançar o objetivo geral, cabe salientar alguns objetivos específicos:
● Destacar a importância que a usabilidade e a ergonomia proporcionam na produção de
interfaces web desenvolvendo um modelo para produção de websites;
● Desenvolver um estudo organizacional de um website existente, destacando sua
estrutura atual;
● Sugerir por meio de um estudo de caso um novo projeto web com base na revisão da
literatura e no estudo organizacional realizado;
● Organizar um plano expresso em cronograma para execução do projeto;
● Executar o cronograma e publicar o mesmo;
1.3 Justificativa
Frente a esta revolução tecnológica que as interfaces bem planejadas possuem de interação
com usuários a necessidade de desenvolver uma aplicação web que de suporte de marketing a
organização em observação, parte do princípio da criação de um modelo que possa conduzir a
produção da interface a fim de oferecer a organização mecanismos de coleta de dados do
fluxo de visitantes e que possua além do design belo de leveza, ter atualizações constantes de
notícias sobre o que acontece de novo na instituição.
A realização de um modelo para construção de interfaces para websites é estudada a partir da
organização de um website de uma instituição de ensino tomado com estudo de caso, a fim de
promover aos alunos e não-alunos acesso a conteúdo de alta qualidade, com atualizações
13
constantes sobre novidades de cursos, promoções, eventos e sorteios intensificando a relação
web com visitantes, com mecanismos sistêmicos que conduzam os visitantes ao
preenchimento de formulário facilitando a entrada, a guarda, o tratamento e a apresentação
das informações dos perfis dos usuários em forma de relatórios na intranet, sendo uma
ferramenta web de fácil acesso e usabilidade.
1.4 Metodologia da pesquisa
A metodologia deste trabalho é apresentada contextualizando e destacando o tipo de estudo
que será empregado e os procedimentos para coleta e análise de dados.
1.4.1 Tipo de estudo
Este trabalho apresenta uma característica descritiva e qualitativa. É descritiva, pois analisa o
ambiente a fim de relacionar as principais características com o objeto estudado para
proporcionar uma nova visão do problema e tornar mais fácil a relação ambiente e objeto que
neste trabalho são respectivamente a empresa, o sistema web e visitantes. È qualitativa, pois
segundo Roesh (1996, p. 117) “o pesquisador qualitativo sai a campo não estruturado,
justamente para captar as perspectivas e interpretações das pessoas”. Assim perante aos fatos
que serão observados este trabalho realizará análise no website existente, a fim de construir
um novo com base na revisão da literatura.
1.4.2 Quais procedimentos para coleta e análise dos dados
Com visualização sistêmica da problemática em questão será utilizada para a coleta e análise
dos dados a observação seguida de análise do website existente para interpretação e
formulação de um novo website. Após a documentação da estrutura atual serão executadas
as seguintes etapas:
1 - Reorganização do conteúdo, e das taxonomias que serão utilizadas + feedback com
cliente.
14
2 – Esboço do wireframe da estrutura da interface + feedback com cliente
3 – Construção do diagrama de navegação a partir das taxonomias + feedback com cliente.
4 - Escolha da Tipografia: legibilidade e estética + feedback com cliente.
5 – Construção do protótipo para análise e avaliação.
6 - Apresentação ao cliente.
7 - Organização dos detalhes finais solicitados.
8 – Teste no servidor final e Publicação.
1.4.3 Estrutura do trabalho
Para um melhor entendimento sobre as etapas ou elementos que compõem este trabalho, a
seguir será detalhado o que será estudado nos próximos capítulos.
O capítulo 2 mostra passo a passo os métodos para construção de interfaces web, também traz
os conceitos de usabilidade, ergonomia, bem como as ferramentas utilizadas para criação do
da arquitetura e layout web, com foco no projeto antes da programação enfatizado a utilização
dos conceitos e documentação para realização de interfaces.
O 3º capítulo traz o estudo organizacional da estrutura atual do website existente, para coleta
de dados seguida de análise e reorganização do conteúdo, com base no levantamento teórico
realizado no 2º capítulo, destacando os dados que serão reutilizados para construção do novo
website.
O 4º capítulo apresenta um cronograma de atividades como um plano de implantação do
modelo proposto da nova interface com wireframes, diagrama de navegação e layout gráfico
das páginas definidos.
Finalmente, no capítulo 5 apresentam-se as conclusões, as contribuições teóricas e práticas, as
limitações encontradas para realização deste trabalho e as sugestões para trabalhos futuros.
15
2 INTERFACE WEB
O design de interface determina a estrutura lógica das páginas web, de como os usuários
visualmente de maneira simples em sua busca encontre as informações que estão disponíveis
espontaneamente. Para que este processo entre usuários e páginas web seja em sua dimensão
“espontâneo” o profissional de design de interface utiliza vários métodos como: dicas visuais,
agrupamento de itens, codificação de cores, ferramentas para navegação, entre outros,
dependendo da natureza e do tamanho do projeto. Porém, para que o design de interface
realize a lógica das páginas web visualmente, primeiramente o conteúdo que será na web
colocado deve ser organizado, procedimento este executado pelo design de informação ou
especialista em arquitetura da informação que organiza e planeja como os usuários encontrão
as informações disponíveis. Nesse sentido, este capítulo apresentara a fundamentação teórica
de um modelo de criação de website, com foco no projeto antes da programação e na
avaliação das interfaces.
2.1 Conceituar, pesquisar e organizar conteúdo
Por se tratar o conteúdo da parte mais importante de um site web, sendo algo para ler ou fazer,
nele deve haver algo de valor para atrair visitantes e fazer com que voltem, assim, o design de
informação realiza a primeira etapa do processo de criação de websites (NIEDERST;
FREITAS, 2002). Para os autores as etapas padrão que compõem o processo de design de
informações são:
● Realizar inventário das informações que serão exibidas no site, que consiste em
realizar uma lista de tudo o que deve ser colocado no site, nesse momento alguns
pontos são importantes como a definição de:
● Traçar estratégias: porque construir um website; o que oferecer; o que os usuários
precisam ver no meu website para que voltem; o que e quem espero atingir. Quais são
os concorrentes.
● Detalhar: será para promoção, marketing, ponto de venda, definir da missão global.
● Conhecer o Público-alvo: obter conhecimentos sobre o público que será atingido com
website é um excelente recurso para saber quais conteúdos colocar para atrair acessos.
16
● Designar responsável pela geração do conteúdo: de maneira consistente de redação
sólida.
● Organizar as informações utilizando estratégias de classificação: existem vários
métodos de classificação: Alfabética: como listas de A a Z; Cronológica: por ordem de
data de acontecimento; Tipo: grupos de informações similares; Hierárquica: divide as
informações em seções; Espacial: informações organizadas geograficamente;
Magnitude: classifica continuamente, como do maior para o menor entre outras. O
método escolhido dependerá do tipo de informações que você possui.
● Formatar a estrutura do site ao cliente: refere-se a fornecer por meio de diagramas,
fluxogramas a lógica de navegação e estrutura das informações, consciente do
orçamento, pessoal e tempo disponível para realização do projeto. Para um melhor
entendimento a figura 1 ilustra a hierarquia das páginas web..
Figura - 1 Arquitetura projetada da informação
Fonte: AMSTEL(2005)
17
Com este exemplo de arquitetura projetada conforme figura 1 é possível visualizar de maneira
rápida e detalhada a quantidade de páginas que farão parte do projeto, como elas estão
distribuídas e que tipo de informação haverá em cada uma delas. A documentação mais
detalhada de todo o conteúdo e funcionalidades de cada uma das páginas também é de
responsabilidade do arquiteto de informações, documentação esta que posteriormente serão
utilizadas pelos designers de interface. (MEMÓRIA, 2006).
Outro aspecto que usualmente é utilizado para organização das informações é a utilização da
usabilidade na web que combina estilo de redação, texto conciso, layout fácil para leitura e
linguagem objetiva:
Os estudos de usabilidade indicam um violento foco no conteúdo por parte dos
usuários. Quando chegam a uma nova página, olham imediatamente para a principal
área do conteúdo da página e buscam títulos e outras indicações do teor da página. Só
mais tarde, caso decidam que o conteúdo não lhes interessa, é que buscarão na área de
navegação da página outras idéias de sites a visitar. O conteúdo vem em primeiro
lugar. (NIELSEN, 2000, p.100)
Ainda na visão de Nielsen (2000), existem três principais diretrizes para escrever na web
utilizando a usabilidade como condição de controle:
● Ser sucinto: com texto objetivo e conciso;
● Escreva tendo em vista a facilidade de leitura: realizar layout fácil de ler, utilizando
textos curtos e listas;
● Use hipertexto para segmentar informação longa em várias páginas: consiste em dar
destaque e ênfase para palavras importantes do texto realçando-as diferentemente dos
outros links existentes, a fim de que estas palavras importantes levem o usuário à outra
página que terá as informações mais detalhadas referente ao assunto.
A norma ISO 9241-11 (2002, p.3) define a usabilidade como: “Medida na qual um produto
pode ser usado por usuários específicos para alcançar objetivos específicos com eficácia,
eficiência e satisfação em um contexto específico de uso.” Para Schuhmacher (2007) a
existência da usabilidade depende de três componentes: o usuário, a interface e a interação-
humano-computador, elementos que estão identificados na figura 2.
18
Figura 2 – Componentes da usabilidade
Fonte: SCHUHMACHER (2007,p. 87)
Estes elementos identificados na figura 2 seguem mais detalhadamente.
● O usuário: Que na fase de pesquisa fora identificado como seu púbico-alvo, sendo
mais fácil nesse momento focar claramente suas necessidades, características e
particularidades.
● Interação-Humano-Computador: Abrange todos os aspectos relacionados com a
interação entre usuários e computadores que acontece por meio da interface. Emerge
da necessidade de estudo dos principais fenômenos ao redor da interação entre
usuários e computadores além do design de interfaces com utilização de avaliações e
implementações de sistemas computacionais interativos para uso partindo das
necessidades, capacidades e preferências dos usuários.
● Interface: É o meio que permite a comunicação entre o usuário e o computador,
transformando as ações dos usuários em entradas, conduzindo as entradas para serem
processadas pelo sistema e apresentando os resultados solicitados.
Com a definição de usabilidade conforme a norma ISO 9241-11 e seus componentes segundo
Schuhmacher verifica-se que trata-se de um conceito que permite que as informações presente
na interface sejam mais intuitivas para usuário. Nesse sentido, adotar a usabilidade desde
início em um projeto web permite: redução de erros e de procedimentos de correção;
diminuição do tempo de construção da interface; redução de custos de treinamento, de
manutenção e de suporte ao usuário e, como resultado, assegura no uso, eficácia, eficiência,
segurança, utilidade, fácil aprendizagem e fácil de lembrar.
19
2.2 Especificações funcionais e esboço da “aparência e sensação”
Segundo Nielsen (2000,p.10) “Se não conseguirem descobrir como usar um website em
aproximadamente um minuto, concluem que não vale a pena gastar seu tempo. E saem.”
Para que isso não ocorra o design de interface determina como a estrutura lógica de um site
aparece visualmente na página e como o usuário chega aquela informação, esta etapa do
projeto envolve como realizar: Diagramas e fluxogramas para tratar da funcionalidade e
navegação e escolha da Tipografia: legibilidade e estética para realização do esboço das
páginas que serão programadas. Manter a distância de confusão visual é a chave para Krug
(2008):
“Os usuários têm tolerâncias variadas a complexidade e distrações. Algumas
pessoas não têm problema com páginas cheias e confusão em segundo plano, mas
muitas sim. Quando você estiver projetando páginas web, é provavelmente uma boa
idéia supor que tudo seja confusão visual até prova em contrário.” (Krug,2008,
p.39).
2.2.1 Diagramas e fluxogramas para tratar da funcionalidade e navegação
Memória (2006, p. 50) define: “A Web é, por essência, um sistema baseado em navegação. É
sua característica mais básica e primordial, que possibilita o acesso a informações de forma
não linear.” Assim, os padrões de navegação quando bem projetados funcionam como
recomendações para que a compreensão das interfaces seja facilitada de modo que: “A
interface navegacional precisa mostrar todas as alternativas disponíveis ao mesmo tempo, de
forma que os usuários possam tomar uma decisão fundamentada com relação à opção que
melhor satisfará às suas necessidades”. (NIELSEN, 2000, p.196). A figura 3 ilustra com
clareza o padrão de posicionamento de certos elementos de interface de websites.
20
Figura 3 – Organização da interface muito utilizada na internet
Fonte: MEMÓRIA (2006, p. 59)
Para Memória segundo seus estudos e avaliações com base em vários pesquisadores da área
de interfaces a figura 3 ilustra o posicionamento mais indicado para os elementos: Marca:
canto superior esquerdo; Busca: parte superior; Navegação global: coluna esquerda;
Beadcrumbs: parte superior e abaixo da marca da empresa; Conteúdo global e contextual: área
central; Navegação de rodapé: parte inferior. Neste contexto percebe-se que a interface e o
sistema de navegação são aliados e funcionam em sincronia para recepção e passeio do
usuário pela aplicação, fornecendo ao usuário onde ele se encontra na aplicação e onde ele
pode ir, de forma Clara: onde as ferramentas de navegação são intuitivas e rapidamente
entendidas; Eficiente: evitando excesso de cliques utilizando atalhos para chegar ao desejado
mais rapidamente; e Consistente: opções de navegação coerentes e disponíveis. (MEMÓRIA,
2006)
A ferramenta de navegação mais comum atualmente é o menu, que geralmente está na parte
superior da página e as vezes ao lado esquerdo ou direito dependendo do design de interface
existente, que, possibilita uma visão do todo da aplicação ao usuário de forma resumida, além
do menu outras duas ferramentas bastante utilizadas são: mapa de site e a função de busca. O
mapa do site fornece ao usuário uma visão detalhada do todo da aplicação e a ferramenta de
21
busca auxilia o usuário a realizar pesquisa da informação desejada dentro ou fora da aplicação
web. (NIEDERST, 2000)
Já em uma aplicação web de comércio eletrônico o mais comum em ferramenta de busca aos
produtos são as categorias e marcas, mas o top do momento sendo comércio eletrônico ou não
tem sido a navegação por nuvem de tags, que é uma nova forma de expor aos visitantes os
itens de conteúdo do website, podendo ser organizado de acordo com os clics dos usuários no
site. Consiste em uma maneira inteligente que as interfaces inovadoras estão utilizando para
melhor sinalização de navegação no meio de uma grande variedade de produtos ou
informações.
2.2.2 Tipografia: legibilidade e estética para realização do esboço das páginas
Adotando como referência a documentação de arquitetura projetada que o design de
informação criou para especificar as informações que vão compor cada página o design de
interface para realização do esboço das páginas web que serão programadas utiliza como base
a logomarca, folders, identidade visual, concorrência e cultura da empresa, buscando
transmitir a mensagem central desejada no projeto, refletindo os atributos da marca e sua
personalidade. Para início da organização destes elementos visuais, o design de interface
projeta com wireframes que segundo Memória (2006):
“são um rascunho de uma tela específica que posiciona a informação e a navegação,
incluindo-se aí agrupamento, ordem e hierarquia do conteúdo. É um esqueleto que
organiza os elementos de interface, sem a interferência do projeto visual”.
(Memória 2006, p. 36)
Amstel (2005) define wireframe como documento que deve servir de referência ao designer
gráfico da página, e passa a seguinte dica: “Wireframe não é para ser bonito é para ser
entendido”. A figura 4 ilustra um caso real de um wireframe criado por Amstel que nos
transmite outra dica: que além de informar ao cliente antes de entrega-los para discusões
explica que se trata de esboço feito para visualização/decisão do posicionamento dos
elementos que vão compor a página, e ainda reforça esta questão escrevendo em cima do
documento: “Este wireframe não define design gráfico, sua função é apresentar elementos que
vão compor a página.”
22
Figura 4 – Exemplo de wireframe
Fonte: AMSTEL(2005)
23
Após a construção dos wireframes prevendo cada detalhe e funcionalidade que será utilizada
em cada página, o próximo passo é definição do design gráfico das páginas: escolha de fonte,
cores, alinhamento dos elementos e hierarquia visual. Nesta fase de construção do esboço
além de se basear na imagem corporativa da empresa e na documentação realizada pelo
design de informação o profissional de design de interface deve ter conhecimento de como
organizar dados Mullet and Sano (1995) descrevem como deve ser este procedimento:
● Elegância e simplicidade: unidade, refinamento, adequação;
● Escala: contraste e proporção: clareza, harmonia, atividade e restrições;
● Organização e estrutura visual: agrupamento, hierarquia, relacionamento e equilíbrio;
● Módulo e programa: foco, flexibilidade e aplicação consistente;
● Imagem e representação: imediatez, generalidade, sistematização e caracterização; e
● Estilo: distinção, integridade, abrangência e adequação;
Estes dados tratam-se da organização formal de elementos visuais, tanto textuais quanto não
textuais que necessitam do arranjo adequado de arte e tecnologia para a transmissão de idéias
com objetivo expressamente comunicacional permitindo que os usuários sempre esteja no
controle disponibilizando atalhos; projeção de diálogos com feedback informativo;
consistência nas informações disponibilizadas, com tratamento de erros; e tornando tudo isso
fácil de usar e lembrar deixando o ambiente intuitivo ao usuário. Shneiderman (1998). A
figura 5 ilustra o layout gráfico da página com base na utilização do wireframe da figura 4.
24
Figura 5 - Layout
Fonte: AMSTEL(2005)
25
Amstel (2005) autor do wireframe (figura 4) utilizado como referência para construção do
layout da figura 5 enfatiza que o wireframe realizado sem definição: de grid de alinhamento;
tamanho de fonte; e tipografia; o designer pode encontrar melhor disposição para os
elementos de acordo com sua criação, sem se sentir engessado com informações já pré-
estabelecidas.
É importante ressaltar que, todas as páginas que vão compor website devem possuir seu
wireframe, pois é com base na estrutura criada no wireframe que será produzido o design
gráfico das páginas. Assim novamente, a documentação é fundamental para que outras
equipes entendam o que foi realizado e continue o trabalho, prevendo que pessoas envolvidas
no projeto podem adoecer ou escolher outra oportunidade de carreira.
Com design gráfico da interface de todas as páginas finalizado com foco: no público-alvo, nos
objetivos do produto e suas principais tarefas, com textos curtos, claros e consistentes, e
navegação óbvia, simples e transparente ao usuário com tratamento de erros. (MEMÓRIA,
2006) O projeto está pronto para ser apresentado ao cliente que e se aprovado passa para fase
da produção de imagens e documentos HTML, caso contrário, é verificada as alterações
solicitadas e apresenta-se novamente ao cliente para aprovação.
2.3 Produção de imagens gráficas e documentos HTML
Somente após a aprovação do layout é que o site entra em processo de produção. Os designers
gráficos das páginas serão transformados para incorporar documentos HTML, assim como, o
conteúdo que também será formatado para adequação de sua visualização na web. Em fim,
nesta etapa do projeto todos os elementos do site devem ser criados e unidos em páginas
HTML. (NIEDERST, 2002)
Para Lynch e Horton (2002) apud Schuhmacher (2007) os elementos que devem estar em
ordem neste momento são: textos editados e corrigidos; especificação do designer gráfico de
todas as páginas; cabeçalhos, logotipos, botões e fundos definidos; ilustrações; fotografias; e
demais elementos que irão compor o website. A finalização desta etapa se dá com diversos
testes em diferentes navegadores e monitores para verificação do comportamento dos
elementos da interface até que tudo se encaixe conforme layout aprovado pelo cliente.
26
2.4 Criação do protótipo para análise
Com exibição das páginas HTML nos mais diversos navegadores, é hora de fazê-las
funcionar. A escolha do banco de dados e da linguagem de programação dependerá do nível
de grandiosidade do projeto e de seus requisitos. Como o foco deste trabalho é “interface
web” não abordaremos mais a fundo esta questão de programação, e sim, de como após as
funcionalidades ativadas nas páginas HTML podem ser analisadas.
Na visão de Schuhmacher (2007. p. 76) protótipos “são modelos funcionais construídos a
partir de especificações preliminares para simular a aparência e a funcionalidade, ainda que de
forma primitiva e incompleta, de um software a ser desenvolvido.” Para Memória (2006.
p.164) “A prototipação é importante não só para apresentações para clientes e diretores, como
também para que as próprias pessoas envolvidas no projeto possam avaliar o funcionamento
da navegação e dos demais elementos do site”.
O Desenvolvimento do presente trabalho utilizará princípios ergonômicos visando atingir
melhor usabilidade. Para tanto será construído um protótipo para análise dos resultados com
objetivo de observação da comunicação visual causada que, deve transmitir a devida
usabilidade visando gerar acessibilidade e comunicabilidade. Segundo Cybis (2007, p.175)
”Enquanto a usabilidade é medida, a ergonomia da interface só pode ser inspecionada e/ou
avaliada a partir de recomendações ou critérios ergonômicos.” Para o autor a avaliação da
ergonomia das interfaces pode ser classificada como: analíticas, heurísticas ou por lista de
verificação.
Avaliações analíticas: são realizadas por projetistas ou especialistas em usabilidade,
que realizam inspeções na realização das tarefas a fim de verificar a complexidade e
estimar o tempo das interações propostas.
Avaliações heurísticas: baseada nos conhecimentos ergonômicos dos avaliadores que
percorrem a interface a fim de diagnosticar os problemas e barreiras que os usuários
podem encontrar durante as interações, ”Entretanto, seus resultados dependem da
competência dos avaliadores e das estratégias de avaliações empregadas.” CYBIS
(2007, p.183).
Inspeções por lista de avaliações: neste tipo de técnica, ao contrário das avaliações
analíticas e heurísticas que são realizadas por profissionais de usabilidade e ergonomia
27
respectivamente, são as qualidades da ferramenta (checklists) que decide o sucesso da
inspeção. Para Cybis deve-se ter muita atenção com qualidade das listas, “Listas mal
elaboradas, que apresentam questões subjetivas e em número insuficiente, podem
levar à produção de resultados duvidosos, pouco uniformes e pouco abrangentes.”
(CYBIS 2007, p.188).
Perante aos critérios de avaliações de interfaces expostos: analíticas, heurísticas e por listas,
neste trabalho será utilizado o método de inspeções por lista, por se tratar de um método que
não demanda profissional específico em usabilidade e ergonomia e por conduzir a avaliação
das interfaces de maneira sistêmica garantindo resultados mais estáveis, pois as
questões/recomendações presente no checklist sempre serão efetivamente verificadas mesmo
quando aplicada por diferentes avaliadores. O apêndice traz o modelo de checlist que será
utilizado para avaliação das interfaces efetivamente.
Ainda na visão de Cybis (2007, p.173) ”É importante salientar que um problema de
usabilidade ocorre durante a interação, atrapalhando o usuário na realização de sua tarefa, mas
tem sua origem em um problema da ergonomia da interface.” E ressalta que, a ergonomia está
na origem da usabilidade, visando proporcionar eficiência e eficácia, além do bem-estar e
saúde do usuário, neste contexto, avaliações ergonômicas das interfaces garantem sistemas
adaptados à maneira que o usuário necessita, utiliza e se satisfaça na interação-humano-
computador.
2.5 Configuração no servidor final, e avaliação novamente.
A etapa final do processo da criação de interfaces para websites é a hospedagem da versão
final do website no servidor, que o tornará disponível para o mundo. “É uma boa ideia fazer
uma rodada final de testes para se certificar que tudo foi transferido com sucesso e de que ás
páginas funcionam adequadamente sob a configuração do servidor final.” (NIEDERST, 2002,
p. 69). A checagem em todas ás páginas, para verificação se todas ás imagens gráficas
aparecem, se os links estão funcionando de maneira correta, se as funcionalidades como o
envio de e-mail está transmitindo a mensagem, é muito importante para garantir os sucesso do
website, enfim, atenção aos detalhes é essencial. (NIEDERST, 2002).
28
3 ESTUDO ORGANIZACIONAL
Este capítulo apresenta o estudo organizacional da estrutura atual do website existente,
verificando layout, taxonomias e conteúdo para coleta de dados seguida de análise e
reorganização do conteúdo, destacando os dados que serão reutilizados para construção do
novo website.
A organização escolhida como estudo de caso para a realização da pesquisa foi a Miroline de
Marialva-PR, criada em 24 de julho de 2000 esta instituição de ensino de cursos
profissionalizantes atualmente possuí cursos nas áreas administrativa, design, informática,
inglês e mecânica de motos. É uma em empresa socialmente responsável, pois desenvolve
programa de incentivo aos estudantes de terceira idade, facilitando o acesso ao ensino de
informática a eles. Além de cursos a Microline ainda realiza venda de computadores e
suprimentos, assistência técnica em hardware e software, soluções técnicas para web e cyber
café.
A pesquisa é de cunho, descritiva e explicativa, por meio de um estudo de caso a partir do
website existente visa à possibilidade de aumentar a abrangência, a facilidade de uso, o design
e o poder de atração do site da Microline.
3.1 Estrutura atual
O website atual possuí seis páginas principais sendo elas: Home, Empresa, Cursos, Serviços,
Jogos e Fale Conosco. Esta etapa é decisiva no processo de reestruturação do website, pois é
neste momento que se conhece, com detalhe, todos os recursos que o website tem para
oferecer, assim como é apresentado o seu conteúdo, sendo necessário ao inspetor a navegação
e exploração de todas as partes que compõem o website a fim de detectar os problemas de
navegação, mensagens, conteúdo, formulários, ferramentas e, através disto, documentar toda a
estrutura do website. A seguir a página Home conforme figura 6:
29
Figura 6 - Home do website em estudo
Na Home é possível verificar conforme a figura 6 há a ausência na imediatez do foco do
website, ou seja, o detalhamento juntamente a logomarca no topo mostrando do que se trata
este portal se é para promoção, marketing, ponto de venda etc. Também nota-se uma área
muito grande destinada aos parceiros, deixando a desejar de conteúdo sobre a empresa em si
ao leitor justamente na home que é a página principal de um website. O banner se tornou o
principal informativo da missão global do website, porém, alguns usuários não possuem
tolerância para aguardar a passagem do banner pausadamente. As notícias, que é o conteúdo
atualizado do dia-a-dia da organização não possuí interação com usuários como atualmente,
em que a página “Blog” do website além de permitir a atualização constante de notícias ainda
permite interação com usuários onde os mesmos além de ver as notícias podem comentá-las e
30
compartilhar as mesmas em redes sociais. E por fim, o rodapé com os direitos autorais
somente, onde poderia haver um menu de navegação com todas as páginas da empresa.
Quanto à tipografia: legibilidade e estética, o layout esta comprometido com as cores
utilizadas, pois causam cansaço aos olhos, por não possuírem contraste e proporção
adequados para proporcionar ao usuário clareza e harmonia na visualização.
A página possuí poucos elementos atrativos aos usuários para que os mesmos tenham
interesse em navegar no restante do website, isto ocorre devido a ausência interatividade
como: campo de busca no website, um clique no banner que o leve a maiores informações
sobre o assunto, elementos de mídia como vídeo de assuntos direcionados ao ensino,
atendimento on-line, redes sociais, filtro de busca de notícias por agrupamento em categorias
e tags e navegação de rodapé. A próxima página a ser analisada é a página empresa.
A página empresa expõe a história da organização, bem como sua visão missão e valores, e
um espaço para a localização da empresa. O conteúdo da missão, visão e valores estão bem
claros e concisos, mas a história necessita de uma revisão ou até reformulação. Segue na
figura 7 o layout da página empresa.
31
Figura 7 – Página empresa
Outro elemento que há em alguns websites atualmente e poderia ser agregado aqui também na
página empresa é toda equipe da organização cada indivíduo com foto, descrição de perfil e
32
contato. A próxima página a ser verificada é a página principal de Cursos que é o foco da
empresa, nela existem nove cursos os quais são lecionados, porém já existem mais dois novos
cursos que ainda não estão nesta página. Também nota-se uma área reservada novamente à
localização da empresa, abaixo conforme a figura 8 segue a página Cursos.
Figura 8 – Página curso
Ao clicar em algum dos cursos que existem na figura 8, o usuário é direcionado aos detalhes
do curso desejado e nesta página o leitor encontra um resumo referente ao que se trata o
curso, a carga horária e as disciplinas ministradas. A seguir na figura 9 a página do curso de
Assistente Administrativo.
33
Figura 9 – Página detalhes do curso
Nesta página de detalhe do curso conforme figura 9, pode-se verificar que verdadeiramente o
foco são os cursos, pois ao lado direito possuí um menu de acesso rápido a todos eles, o que
favorece a navegação do usuário que esta a pesquisa de vários cursos. Já a página de serviços
que é a agregação de atividades que a empresa oferece aos seus clientes possuí apenas a
listagem de:
nossos serviços; e
vendas de.
Conhecendo a empresa e sabendo do potencial que nela existe nota-se a ausência de conteúdo
nesta página, a mesma necessita ser reformulada, encorpando mais este conteúdo existente e
reorganizando-o. Abaixo segue layout da página de serviços conforme figura 10.
34
Figura 10 – Página serviços
A seguir a página Jogos, esta página tem como objetivo a atração de acessos de alunos e não
alunos no website bem como a permanência nele. Ela é a principal interação com usuários
existente neste portal, e possuí várias opções de jogos conforme a figura 11.
35
Figura 11 – Página jogos
36
Verificando o layout da página de jogos conforme a figura 11, a mesma poderia ser mais
explorada, com inserção de uma coluna lateral com acessos a outras áreas do website, e
aprofundando um pouco mais nesta exploração a mesma poderia fazer parte de um acesso
restrito somente a alunos com outras opções além de jogos como: promoções exclusivas,
dicas de estudos e profissões, oportunidades de estágios e empregos e etc. E para finalização a
página a ser examinada é a página Fale Conosco conforme figura 12.
Figura 12 – Página Fale Conosco
Constata-se na página Fale Conosco – figura 12 a presença do formulário de contato com a
organização e novamente uma área destinada à localização da empresa. Esta página também é
37
muito importante para website, pois é por intermédio dela que os usuários podem se
comunicar com a empresa.
As sugestões estão centradas neste terceiro capítulo com avaliação da estrutura atual do
website, com objetivo de torná-lo um ponto facilitador na comunicação entre a Microline e
alunos correntes e alunos potenciais, contribuindo para melhorias no layout do website
tornando-o um portal atrativo, amigável proporcionando interatividade com usuários e
fortalecimento da marca na web. Para que a reestruturação seja realizada se faz necessário à
realização de um cronograma de atividades a serem realizadas até que o novo website fique
pronto, este cronograma e suas atividades serão realizados no próximo capítulo.
38
4 PROPOSTA PARA NOVO WEBSITE
Neste capítulo será apresentada a proposta para novo website, com base no cronograma de
atividades. As etapas de execução do projeto prevista no cronograma têm como objetivo
utilizar as contribuições da usabilidade e ergonomia para o desenvolvimento de websites. Esta
metodologia tem como foco a promoção da imagem da organização na web como um ponto
facilitador de navegação, acessibilidade e permanência dos usuários.
4.1 Cronograma de atividades
O cronograma de atividades é o agendamento de tarefas a serem desenvolvidas em um
determinado tempo para efetivação de um projeto, sendo de fundamental importância para o
controle do projeto. Neste trabalho que ilustra a contribuição da usabilidade e da ergonomia
na construção de websites utilizou-se como referência um estudo do site de uma empresa, o
qual foi analisado no terceiro capítulo, para que neste cronograma sejam listadas as
contribuições para um novo website. O quadro 1 ilustra o cronograma em etapas de atividades
a serem efetuadas.
Cronograma de atividades para realização website
Etapas Atividade Outubro Novembro Dezembro
3ªs 4ªs 1ªs 2ªs 3ªs 4ªs 1ªs 2ªs
1 Conceituar, pesquisar e organizar
conteúdo
2 Definição das novas taxonomias
3
Diagramas e fluxogramas para
tratar da funcionalidade e
navegação
4 Tipografia: legibilidade e estética
5 Produção de imagens gráficas e
documentos HTML
6 Criação do protótipo para análise
7 Configuração no servidor final, e
avaliação novamente.
Quadro 1 – Cronograma de atividades
39
4.1.1 Etapa 1 – Atividade: Conceituar, pesquisar e organizar conteúdo
O conteúdo existente para melhor visualização fora tabulado para melhor visão de todo que
foi aproveitado e reformulado conforme quadro 2 – Conteúdo.
Página Conteúdo Situação Critério
Home
Banner Mantido ok
Notícias Reformulado Destaque
Parceiros Reformulado Localização
Empresa
História Reformulada Forma
Visão Mantida ok
Missão Mantida ok
Valores Mantida ok
Localização Excluída Repetição
Cursos Todos Mantidos ok
Curso / Detalhe
Resumo Mantidos ok
Carga Horária Mantidos ok
Disciplinas Mantidos ok
Serviços
Assistência Técnica Reformulada Forma
Vendas Reformulada Forma
Contato/Localização Excluída Repetição
Jogos Todos Excluído Estratégia
Fale conosco Formulário de contato Mantido ok
Localização Mantido ok
Quadro 2 - Conteúdo
Conforme quadro 2 com a situação de cada conteúdo, a página home manteve o banner, as
notícias ganharam destaque com listagem das ultimas três com título de blog, já os parceiros
perderam espaço na home ficando somente a chamada da página no rodapé. Em pesquisa para
incremento da home acrescentaram-se os elementos: registre-se neste site, assine nosso rss,
campo de busca, chamadas para páginas de cursos, promoções, serviços, vídeo da semana,
atendimento on-line, redes sociais, filtro de busca de notícias por agrupamento em categorias
e tags e navegação de rodapé.
40
Na página empresa somente o conteúdo da história foi reformulado para maior destaque na
página, sendo localização excluída e demais visão, missão e valores mantidos. Em verificação
para incremento da página da empresa o novo elemento “equipe” foi acrescentado, com foto,
descrição de perfil e nome de cada colaborador da empresa.
Já na página principal de Cursos todos foram mantidos, pois os mesmos estão todos sendo
lecionados, e acrescentaram-se mais dois que em pesquisa verificou-se a ausência dos
mesmos no website. Nas páginas com detalhes de cada curso com, descrição, carga horária e
disciplinas todos os conteúdos foram reaproveitados.
A página de serviços ganhou destaque com um resumo de forma geral do que a organização
realiza em: manutenção, vendas e suporte. E a assistência técnica foi agrupada por área de
atuação. E novamente a Localização foi excluída, para que a mesma fique somente na página
de contato.
Em verificação a página jogos foi excluída neste primeiro momento, para que em uma
segunda fase de incremento no website a mesma faça parte de uma área privada somente para
alunos.
E por fim a página fale conosco, mantém o formulário de contato e a localização. Com a
realização deste mapeamento e reformulação de conteúdo a etapa 2 complementa a etapa 1
com reformulação das taxonomias.
4.1.2 Etapa 2 – Definição das novas taxonomias
A estrutura de navegação de um website é sua principal forma de organizar o conteúdo de
cada página existente, bem como sua chamada que deve expressar todo conteúdo existente ali.
Se não for consistente e fácil de utilizar com conteúdo esperado em cada página o usuário
desiste por sua busca. Essa chamada das páginas para Amstel (2005 p.2) é “uma classificação
aplicada a um conjunto de páginas na Web, formando uma hierarquia que pode ser navegada
através de menus”, seguindo esta mesma linha de classificação organizada de fácil acesso é
que foi realizada a reestruturação das taxonomias existentes conforme quadro 3.
41
Taxonomias
Existentes Reestruturação
Home Home
Empresa Sobre
Cursos Cursos
Serviços Serviços
Jogos Blog
Fale Conosco Contato
Quadro 3 – Reestruturação das taxonomias
Conforme quadro 3 somente foram reestruturadas as páginas Empresa para Sobre, Jogos para
Blog e Fale Conosco para Contato, as demais: Home, Cursos, e Serviços permaneceram pois
as mesmas retratam o conteúdo nela existente.
4.1.3 Etapa 3 – Diagramas e fluxogramas para tratar da funcionalidade e navegação
Com a reorganização das taxonomias, o menu esta composto, para visualização universal do
novo website, é necessário a realização do diagrama de arquitetura de informação que é
ilustrado conforme a figura 13, onde pode-se visualizar todas as páginas que farão parte
website, assim como o conteúdo que deve existir em cada uma delas.
42
Figura 13 – Diagrama da arquitetura da informação
As páginas Home, Sobre, Serviços, Cursos, Blog e Contato fazem parte do menu superior
principal, já a página de parceiros onde os links irão para fora do website, está presente
somente no menu inferior juntamente com as outras páginas existentes e por fim a página
Registre-se neste site que também não está no menu principal superior irá situar-se na barra
do topo de website. A figura 14 ilustra o wireframe da página principal.
43
Figura 14 – Wireframe da página principal
A ilustração da página home com possíveis elementos para forma-la realiza-se com intuito de
visualização de preenchimento da página, as outras principais páginas: sobre, serviços, cursos,
blog e contato também possuem wireframe que estão anexos a este trabalho.
44
4.1.4 Etapa 4 – Tipografia: legibilidade e estética para realização do esboço das páginas
Quase todo conteúdo na web é texto e torná-lo atrativo de fácil visualização para que a leitura
seja fluída titula-se legibilidade e estética. A escolha da fonte é geralmente o principal
elemento a ser lembrado quando se fala em legibilidade na web, mas, existem outros
elementos que contribuem para legibilidade como: espaçamento e margem, contraste,
comprimento e alinhamento. A estética no projeto de interface web abrange o conforto visual
que permite a utilização das cores e da arte de acordo com contexto aplicado. Diante destes
elementos que facilitam aos usuários a compreensão do conteúdo na web é que se realiza a
proposta para o esboço das páginas.
Inicialmente a logomarca foi o principal elemento como base em cores, após vários detalhes
em bate-papo com cliente que citou: leveza, slaids na home, layout com formas arredondadas,
cores claras, logomarca no centro. Em estudo de todo contexto, chegou-se a seguinte
definição de fonte e cores:
Fonte do menu principal: Gnuolane Free, para diferenciar da fonte utilizada no
conteúdo do website.
Fonte do conteúdo: Helvetica Neue, Helvetica, Arial, sans-serif, que pelo modelo ser
sem serifa permite melhor visualização de textos no monitor.
A paleta de cores abaixo ilustra as quatro principais cores escolhidas para serem
utilizadas na construção do layout.
Figura 15 – Paleta de cores
Com definição de conteúdo, taxonomias, navegação, elementos que irão compor a página,
fontes e cores o esboço pode ser realizado. A figura 16 ilustra o esboço do layout que foi
aprovado para realização do html conforme etapa 5.
45
Figura 16 - Esboço do layout
46
No esboço aprovado comparado ao seu wireframe inicial apresentado na etapa 3, nota-se que
os elementos foram reorganizados e que suas chamadas também mudaram, isso ocorre devido
a harmonia e equilíbrio que deve existir na disposição dos elementos na web. As demais
páginas, sobre, serviços, cursos, blog e contato tem seu layout anexo a este trabalho.
4.1.5 Etapa 5 – Produção de imagens gráficas e documentos HTML
Com objetivo de transformar todo conteúdo e imagens do layout planejado em páginas html a
etapa 5 do projeto de construção de interface web é o momento em que o programador vincula
tudo o que foi esquematizado em formato de documentos html, ou seja, páginas que são
possíveis de visualização em um navegador de internet. Após, as páginas html, são
conduzidas a etapa 6 de criação do protótipo para análise.
4.1.6 Etapa 6 - Criação do protótipo para análise
Com as páginas html concluídas as funcionalidades são acionadas para que a interface possa
conduzir os usuários a navegar e realizar tarefas, o que torna o projeto nesta fase um
protótipo, assim, neste momento é possível a realização de análise ao modelo do website
proposto com utilização de um checklist de inspeção. As listas de verificação possuem
questões que devem ter como resposta “sim” ou “não”. Nestas questões, as respostas em não
conformidade devem ter sua justificativa. O quadro 4 ilustra o checklist.
47
Checklist - Inspeção de interface website
Acessibilidade Avaliação Comentários
1. O tempo de carregamento do site é razoável sim
2. Contraste do texto/fundo é adequado sim
3. Tamanho da fonte / espaçamento é fácil de ler sim
4. Flash & plug-ins são usados com moderação sim
5. Imagens têm tags ALT apropriado sim
6. Site tem página personalizada - não encontrada/404 sim
Identidade
7. Logotipo da empresa é de forma destacada sim
8. Tagline(slogan descritivo) faz propósito empresa clara sim
9. Home-page é digerível em 5 segundos sim
10. Caminho claro para informações sobre a empresa sim
11. Caminho claro para informações de contato sim
Navegação
12. A principal navegação é facilmente identificável sim
13. Rótulos de navegação são claras e concisas sim
14. Número de botões / links é razoável sim
15. Logotipo da empresa está ligada à home-page sim
16. Ligações são consistentes e fáceis de identificar sim
17. Pesquisa no site é de fácil acesso sim
Conteúdo
18. Títulos principais são claros e descritivos sim
19. Conteúdo crítico está acima da "dobra" sim
20. Estilos e cores são consistentes sim
21. Ênfase (negrito, etc) é usado com moderação sim
22. Anúncios e pop-ups são discretos não Não se aplica
23. Página principal é concisa e explicativa sim
24. URLs são significativos e de fácil utilização sim
25. Títulos de páginas HTML são explicativas sim
Quadro 4 – Checklist de inspeção de interface para websites
Fonte: MEYERS (2009)
A ferramenta de avaliação de interface utilizada no protótipo evidencia as variáveis de
verificação de: acessibilidade, identidade, navegação e conteúdo relacionados aos
procedimentos de interação do usuário com website, que identificam o cumprimento para as
tarefas de interação. A questão 22 que possuí “não” como resposta e comentário de que “não
se aplica”, no protótipo em avaliação não possuí anúncios e pop-ups em sua estrutura.
48
Com a realização da inspeção da interface via checklist é possível perceber como é de fácil
aplicação e entendimento a desenvolvedores não especialistas em avaliação ou interações,
além, das contribuições incorporadas pela integração da ferramenta no “modelo de construção
de interfaces para websites” que permite auxiliar na implementação de qualquer tipo de
website.
4.1.7 Etapa 7 - Configuração no servidor final, e avaliação novamente.
A configuração no servidor final é necessária para que o website se torne acessível para o
mundo. Avaliar o website novamente aplicando o checklist utilizado na etapa 6 é certificar-se
de que tudo esteja em conformidade para que seja possível o lançamento. A realização desta
etapa não foi aplicada no protótipo criado para a efetivação do “modelo de construção de
interfaces para websites ”, procedimento que será realizado após o término deste estudo.
49
5 CONCLUSÕES
A realização deste trabalho pode ser tomada como um guia para construção de interfaces web,
que em conjunto com um checklist de análise, pode dar suporte efetivo a desenvolvedores de
websites. Neste contexto este capítulo apresenta a conclusão deste trabalho com as seguintes
etapas:
Contribuições teóricas;
Contribuições práticas;
Limitações do trabalho e
Sugestões para trabalhos futuros.
5.1 Contribuições teóricas
A realização teórica deste trabalho proporcionou um aprofundamento na revisão da literatura
sobre o tema em questão “como conceitos de usabilidade e ergonomia podem contribuir no
desenvolvimento de interfaces web”, onde foi possível entender como a construção e
avaliação de interfaces utilizando como base conceitos de ergonomia e usabilidade é relevante
no produto final. Nesse sentido o sistema de avaliação funciona como retroalimentação para o
desenvolvimento de interfaces.
5.2 Contribuições práticas
Do ponto de vista prático, o novo modelo web proposto neste trabalho contribuiu em um
melhoramento no layout, na disposição das notícias em formato de blog, na interação com
usuários que poderão comentar e discutir no blog, no cadastro de usuários no site que permite
a organização saber o perfil de seus assinantes, e que possibilitará efetividade no marketing
web, em forma de mailing aos assinantes. O que ilustra que a utilização de critérios
ergonômicos pode facilitar e melhorar o desenvolvimento de aplicações web.
50
5.3 Limitações do trabalho
Na aplicação do modelo proposto, este trabalho se limitou a realizar um guia teórico prático
para a construção de interface web que focou a sua solução somente na análise da interface,
não se estendendo a outras áreas como programação. Outro fator limitante deste trabalho foi à
impossibilidade da aplicabilidade e acompanhamento dos primeiros acessos reais para
apresentação neste estudo.
5.4 Sugestões para trabalhos futuros
O website desenvolvido, proposto como solução de marketing web e para guarda das
informações dos perfis dos assinantes, pode ser ampliado com a disponibilização de seus
produtos em e-commerce; realização de uma área restrita a alunos com novidades em:
promoções exclusivas, dicas de estudos e profissões, oportunidades de estágios e empregos e
etc; E ainda pode ser realizados testes com usuários para comprovação da melhora da
interação.
51
REFERÊNCIAS
AMSTEL, Frederick Van. Quanto mais simples o Wireframe, melhor. Usabilidoido, 2005.
Disponível em <http://usabilidoido.com.br/quanto_mais_simples_o_wireframe_melhor.html>
Acesso em: 17 mai. 2011.
AMSTEL, Frederick Van. Uma proposta semiótica para a avaliação de estruturas
de navegação. Usabilidoido, 2005. Disponível em
<http://usabilidoido.com.br/uma_proposta_semiotica_para_a_avaliacao_de_estruturas_de_na
vegacao.html> Acesso em: 02 nov. 2011.
ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. NBR 9241: Requisitos
Ergonômicos para Trabalho de Escritórios com Computadores: Parte 11 – Orientações sobre
Usabilidade. Rio de Janeiro, 2002.
CYBIS, Walter; BETIOL, Adriana Holtz; FAUST, Richard. Ergonomia e usabilidade:
conhecimento, métodos e aplicações. São Paulo: Novatec, 2007.
KRUG, Steve. Não me faça pensar!: uma abordagem do bom senso à usabilidade na WEB.
São Paulo: Alta Books, 2008.
MEMÓRIA, Felipe. Design para a internet: projetando a experiência perfeita. Rio de
Janeiro: Elsevier, 2006.
MEYERS, Dr. Peter J. 25 Pontos - Checklist de usabilidade site. User Effect 2009.
Disponível em: <http://www.usereffect.com/topic/25-point-website-usability-checklist>
Acesso em: 15 nov. 2011.
MULLET, K; SANO, D. Designing visual de interfaces: communication oriented
techniques, New Jersey, SunSoft Press, 1995.
NIEDERST, Jennifer; FREITAS, Rejane. Aprenda Web design. Rio de Janeiro: Ciência
Moderna, 2002.
NIELSEN, Jacob. Projetando Websites. Rio de Janeiro: Campus, 2000.
PREECE, Jennifer; ROGERS, Yvonne; POSSAMAI, Viviane; SHARP, Helen. Design de
interação: além da interação homem-computador. Porto Alegre: Bookman, 2005.
ROESCH, Sylvia Maria Azevedo. Projetos de estágios de curso de Administração: guia
para pesquisas, projetos, estágios e trabalhos de conclusão de curso. São Paulo: Atlas, 1996.
SCHNEIDERMAN, B. (1998) Design the User Interface - 3rd Edition. Reading, Mass.:
Addison-Wesley.
SCHUHMACHER, Vera Niedersberg. Comunicação visual para web I: livro didático. 3 ed.
rev.Palhoça: UnisulVirtual, 2007.
52
ANEXOS
53
Anexo 1 - Wireframe da página Sobre
54
Anexo 2 - Wireframe da página Serviços
55
Anexo 3 - Wireframe da página Cursos
56
Anexo 4 - Wireframe da página Blog
57
Anexo 5- Wireframe da página Contato
58
Anexo 6 - Wireframe da página Parceiros
59
Anexo 7 – Layout da página Sobre
60
Anexo 8 – Layout da página Serviços
61
Anexo 9 – Layout da página Cursos
62
Anexo 10 – Layout da página Detalhe do Curso
63
Anexo 11 – Layout da página Blog
64
Anexo 12 – Layout da página Contato
65
Anexo 13 – Layout da página Parceiros
66
APÊNDICE
67
Apêndice 1 – Checklist de avaliação website
