proposta de melhoria do portal do senac/al, utilizando técnicas de usabilidade e acessibilidade
TRANSCRIPT
0
CENTRO UNIVERSITÁRIO CESMAC
Flávio Oscar Hahn
Proposta de Melhoria do portal do Senac/AL, Utilizando Técnicas de Usabilidade e
Acessibilidade.
MACEIÓ/AL
2013.2
1
Flávio Oscar Hahn
Proposta de Melhoria do portal do SENAC/AL, Utilizando Técnicas de Usabilidade e
Acessibilidade.
Trabalho Final de Graduação apresentado ao Curso de
Análise de Sistemas do Centro Universitário CESMAC,
como requisito final para obtenção do título de Bacharel
em Análise de Sistemas.
Orientador: Jalves Mendonça Nicácio
MACEIÓ/AL
2013.2
2
Flávio Oscar Hahn
Proposta de Melhoria do portal do SENAC/AL, Utilizando Técnicas de Usabilidade e
Acessibilidade.
Trabalho Final de Graduação apresentado ao Curso de
Análise de Sistemas do Centro Universitário CESMAC,
como requisito final para obtenção do título de Bacharel
em Análise de Sistemas.
Aprovada em:
BANCA EXAMINADORA
_______________________________________
Prof.: Jalves Mendonça Nicácio
-Orientador-
_______________________________________
Profª. Me. Lívia Maria Omena da Silva
-Orientadora Metodológica-
3
"Você pode encarar um erro como uma besteira a
ser esquecida, ou como um resultado que aponta
uma nova direção". Steve Jobs
4
AGRADECIMENTOS
Agradeço primeiramente a Deus por permitir que chegasse até aqui, e ter me
acompanhado durante está trajetória, tanto nos momentos bons quanto nos ruins.
A minha esposa Natália Hahn que me apoiou e incentivou desde o primeiro dia desta
jornada, agradeço pela paciência, o carinho e amor que sempre demonstrou mesmo nos
momentos mais difíceis.
A minha filha Maria Luísa que chegou para alegrar minha vida durante o
desenvolvimento desta obra.
Ao meu orientador Jalves Mendonça Nicácio, que desde o primeiro momento aceitou
orientar-me e sempre esteve disposto a ajudar.
A minha mãe e meus irão que mesmo longe sempre me apoiaram e incentivaram em
todos os momentos.
Ao meu sogro e minha sogra que me incentivam e me apoiam, além de estarem
sempre presentes em todos os momentos importantes de minha vida.
A professora Lívia Maria Omena da Silva, por ter paciência e ao mesmo tempo cobrar
mais empenho de minha parte, ao observar que o tempo estava “curto”.
Aos professores Jeyniglis de Gusmão Correia Matos e Gustavo Ferreira Accioli, pelo
aprendizado transmitido e a amizade que surgiu durante o curso.
A todos os professores que participaram desta jornada.
5
RESUMO
A intenção deste trabalho acadêmico é elaborar uma proposta de melhoria no portal do
Senac/AL, abordando padrões de usabilidade e técnicas de acessibilidade em um projeto de
interface centrado no usuário, onde o propósito principal é facilitar o acesso e a forma com
que o usuário final utiliza o portal.
O trabalho apresenta um protótipo desenvolvido através de um estudo de caso, com
diretrizes de usabilidade e técnicas de acessibilidade, validando sua interface com teste de
heurística, a fim de prover um portal limpo, de fácil acesso e voltado para o usuário.
Palavras-chave: Usabilidade, Acessibilidade, Interface.
6
ABSTRACT
The intent of this academic work is to develop a proposal for improving the portal
Senac\AL, addressing standards of usability and accessibility techniques on a project focused
on the user interface where the main purpose is to facilitate access and the way that the end
user uses the portal.
The paper presents a prototype developed through a case study with usability guidelines
and accessibility techniques, validating its interface with heuristic test in order to provide a
clean portal, easily accessible and facing the user.
Keywords: Usability, Accessibility, Interface.
7
LISTA DE FIGURAS
Figura 1 – Tipos de portais relativamente ao contexto ............................................................. 17
Figura 2 - Interface gráfica do Universo Online (UOL) - 1996 ............................................... 18
Figura 3 – Interface gráfica do Universo Online (UOL) – 2013 .............................................. 19
Figura 4 - Estrutura de usabilidade ........................................................................................... 23
Figura 5 - Projeto centrado no usuário ..................................................................................... 24
Figura 6 - População com deficiência no Brasil ....................................................................... 26
Figura 7 – Layout atual do portal do Senac|AL ........................................................................ 33
Figura 8 – Layout principal do protótipo ................................................................................. 34
Figura 9 – topo do protótipo ..................................................................................................... 35
Figura 10 – Menu principal do protótipo ................................................................................. 35
Figura 11 – Menu selecionado do protótipo ............................................................................. 36
Figura 12 – Banner rotativo do protótipo ................................................................................. 36
Figura 13 – Rodapé do protótipo .............................................................................................. 37
Figura 14 – página institucional do protótipo ........................................................................... 38
Figura 15 – Página de cursos de informática do protótipo ....................................................... 38
Figura 16 – Exemplo de pergunta do questionário de satisfação ............................................. 40
Figura 17 – Avaliação com ASES ............................................................................................ 47
8
LISTA DE GRÁFICOS
Gráfico 1 – Facha etária............................................................................................................ 40
Gráfico 2 - Grau de instrução ................................................................................................... 41
Gráfico 3 - Sexo ........................................................................................................................ 41
Gráfico 4 - Quanto tempo utiliza computador .......................................................................... 42
Gráfico 5 - Quantas horas por dia utiliza a internet .................................................................. 42
Gráfico 6 - Layout: sequencia, alinhamento, espaçamento e visualização dos campos na tela43
Gráfico 7 - Utilização: facilidade de navegação, agilidade e praticidade ................................ 43
Gráfico 8 - Conforto, cores, tamanho dos caracteres, entendimento dos comandos/funçõe .... 44
Gráfico 9 - Sexo dos usuários observados ................................................................................ 45
Gráfico 10 - Acesso a computador e internet dos usuários observados ................................... 46
9
LISTA DE QUADROS
Quadro 1- Conjunto integrador de critérios, princípios, regras e heurísticas de ergonomia. ... 21
Quadro 2 - Nível de conformidade entre propriedades. ........................................................... 28
10
LISTA DE ABREVIATURAS E SIGLAS
ABNT Associação Brasileira de Normas Técnicas
ASES Avaliador e Simulador de Acessibilidade de Sítios
CSS Cascading Style Sheets
e-MAG Modelo de Acessibilidade em Governo Eletrônico
e-PWG Padrões Web em Governo Eletrônico
HTML Hyper Text Markup Linguage
IBGE Instituto Brasileiro de Geografia e Estatística
IHC Interface Humano Computador
INRIA Instituto Nacional de Pesquisa em Automação e Informática da França
ISO International Organization for Standardization
MEC Ministério da Educação
NBR Norma Brasileira
PRONATEC Programa Nacional de Acesso ao Ensino Técnico e Emprego
SENAC Serviço Nacional de Aprendizagem Comercial
UOL Universo Online
W3C World Wide Web Consortium
WAI Web Accessibily Initiative
WCAG Web Contente Accessibility Guidelines
11
SUMÁRIO
1 INTRODUÇÃO ..................................................................................................................... 13
1.1 Problemática ....................................................................................................................... 13
1.2 Objetivos ............................................................................................................................. 14
1.3 Relevância da Pesquisa ....................................................................................................... 15
1.4 Metodologia da Pesquisa .................................................................................................... 15
1.5 Organização da Pesquisa .................................................................................................... 16
2 EMBASAMENTO TEÓRICO .............................................................................................. 17
2.1 Portal Web .......................................................................................................................... 17
2.2Interface ............................................................................................................................... 18
2.2.1 Padrões para interface humano computador - IHC ......................................................... 19
2.2.2 Ergonomia ....................................................................................................................... 20
2.3Usabilidade .......................................................................................................................... 21
2.3.1 Engenharia de Usabilidade .............................................................................................. 24
2.3.2 Diretrizes de Usabilidade................................................................................................. 25
2.3.3 Heurística de usabilidade ................................................................................................. 25
2.4 Acessibilidades Web........................................................................................................... 26
2.4.1 Níveis de prioridade e Conformidade .............................................................................. 27
2.4.2 Padrões Web de Acessibilidade ....................................................................................... 28
2.4.3 Diretrizes para acessibilidade Web.................................................................................. 29
3 METODOLOGIA .................................................................................................................. 30
3.1 Técnicas de analise contextual ........................................................................................... 30
3.1.1 Questionário de satisfação ............................................................................................... 31
3.1.2 Observação do usuário..................................................................................................... 31
3.1.3 Testes de acessibilidade ................................................................................................... 31
4 PROTÓTIPO ......................................................................................................................... 32
4.1 Ferramentas utilizadas ........................................................................................................ 32
4.2 Layout Principal ................................................................................................................. 32
4.2.1 Layout Original ............................................................................................................... 33
4.2.2 Layout Principal do Protótipo.......................................................................................... 34
4.2.3 Topo do site ..................................................................................................................... 35
4.2.4 Menus .............................................................................................................................. 35
4.2.5 Banner rotativo ................................................................................................................ 36
4.2.6 Imagens ............................................................................................................................ 37
12
4.2.7 Links ................................................................................................................................ 37
4.2.8 Rodapé ............................................................................................................................. 37
4.2.9 páginas internas ............................................................................................................... 37
4.2.10 Acessibilidade ................................................................................................................ 39
5 TESTES ................................................................................................................................. 39
5.1 Plano de teste ...................................................................................................................... 39
5.2 Questionários de satisfação ................................................................................................ 39
5.2.1 Perfil dos usuários ........................................................................................................... 40
5.2.3 Avaliação do usuário ....................................................................................................... 43
5.3 Observações do usuário ...................................................................................................... 44
5.3.1 Perfil do observador......................................................................................................... 45
5.3.2 Perfil dos usuários observados ........................................................................................ 45
5.3.3 Resultados observados no portal atual ............................................................................ 46
5.3.4 Resultados observados no protótipo ................................................................................ 47
5.4 Testes com ASES ............................................................................................................... 47
6 CONSIDERAÇÕES FINAIS ................................................................................................ 48
APÊNDICE ou ANEXO .......................................................................................................... 51
13
1 INTRODUÇÃO
Com o surgimento de novas tecnologias, nasce também à necessidade de empresas de
pequeno, médio e grande porte acompanharem essas tecnologias para que se mantenham
vivas no mercado. Tais mudanças tecnológicas como Smartphone, Tablets, redes sociais e o
custo do computador em queda, proporcionaram um aumento no uso de internet por diferentes
classes econômicas, deixando clara que a necessidade de interação com estas tecnologias está
cada vez mais presente em nossas vidas.
Pensando nisso, uma instituição de ensino profissionalizante como o Serviço Nacional
de Aprendizagem Comercial – (SENAC, 2012), com a missão “Educar para o trabalho em
atividades de Comércio de Bens, Serviços e Turismo, por meio de ações educacionais de
excelência, contribuindo para o desenvolvimento sustentável da sociedade.”, tem a necessita
de trabalhar com ferramentas que proporcionem ao publico uma interação de forma acessível
e de fácil aprendizado.
A motivação para o desenvolvimento deste projeto encontra-se no substancial aumento
dos incentivos governamentais através de projetos voltados a educação profissional como o
“Programa Nacional de Acesso ao Ensino Técnico e Emprego” – (PRONATEC). Segundo o
Ministério da Educação - MEC (2012):
Além das iniciativas voltadas ao fortalecimento do trabalho das redes de educação
profissional e tecnológica existentes no país, o Pronatec criou a Bolsa-Formação,
por meio da qual serão oferecidos, gratuitamente, cursos técnicos para quem
concluiu o Ensino Médio e para estudantes matriculados no Ensino Médio e cursos
de formação inicial e continuada ou qualificação profissional.
Prevendo um aumento considerável por novos usuários, a necessidade de um projeto de
usabilidade torna-se concreta, de acordo com Nielsen e Loranger (2007), “Uma empresa pode
dobrar a “taxa de conversão” do seu Website (realizando uma venda ou obtendo uma
solicitação de informações sobre um produto por parte de um novo usuário) por meio de um
bom projeto de usabilidade. [...]”.
Por tanto, visando o crescente aumento na busca de informações sobre os cursos
oferecidos na instituição, este projeto apresenta uma proposta de melhoria do portal
al.senac.br, a fim de torná-lo mais funcional, aplicando técnicas de usabilidade e
acessibilidade.
1.1 Problemática
14
O acordo de gratuidade com os serviços nacionais de aprendizagem incentivam e
auxiliam a população a procurar por qualificação.
O Acordo de Gratuidade tem por objetivo ampliar, progressivamente, a aplicação
dos recursos do SENAI, do SENAC, do SESC e do SESI, recebidos da contribuição
compulsória, em cursos técnicos e de formação inicial e continuada ou de
qualificação profissional, em vagas gratuitas destinadas a pessoas de baixa renda,
com prioridade para estudantes e trabalhadores. (MEC, 2012)
Com isso, tornar acessível e de fácil compreensão o portal de uma instituição como o
Senac é de fundamental importância, pois, segundo pesquisa realizada em 2010 pelo Instituto
Brasileiro de Geografia e Estatística - IBGE (2010), “23,9% da população brasileira ocupada,
apresentam algum tipo de deficiência, seja física, sensorial, intelectual e/ou múltipla”.
A acessibilidade ainda é pouco explorada. Sites desenvolvidos com padrões de
acessibilidade tornam-se insignificante perante os mais de três milhões de sites registrados no
Brasil. Segundo Nicácio (2010), “muitas vezes um determinado serviço ou página da Web
poderá estar inacessível a uma pessoa ou grupos de pessoas”. Considerando que atualmente a
sociedade prima pela informação, e faz da web seu principal meio de acesso, permitindo aos
usuários, portadores de necessidades especiais ou não, uma nova forma de se integrar e
participar da sociedade torna-se de primordial importância o desenvolvimento de um portal
limpo e acessível ao publico.
Mencionados os fatos, esta pesquisa aborda duas questões:
A usabilidade pode ajudar nos processos dentro do portal?
Por que desenvolver um portal com acessibilidade?
As hipóteses levantadas nesta pesquisa são:
O uso de avaliações heurísticas permite verificar o grau de usabilidade e auxilia
a criação de um portal de fácil aprendizagem e satisfação subjetiva.
Os padrões de acessibilidade na web possibilitam criar um portal acessível a
todos.
1.2 Objetivos
O objetivo geral deste trabalho é fundamentar a proposta de melhoria do portal
al.senac.br, a fim de definir padrões de usabilidade e acessibilidade tornando-o mais prático e
de fácil acesso.
15
Os objetivos específicos:
Apresentar os conceitos e diretrizes de usabilidade e acessibilidade em portais da
Web.
Realizar um teste inicial com usuários no portal atual, a fim de determinar o grau
de usabilidade e os principais problemas de navegação do portal.
Identificar padrões de desenvolvimento Web com acessibilidade visando à
construção de conteúdo acessível;
Desenvolver um protótipo do portal com padrões de acessibilidade e usabilidade
web a fim de tornar as informações mais perceptíveis.
Desenvolver avaliações heurísticas (testes com o usuário) com o intuito de
definir o grau de usabilidade do portal.
1.3 Relevância da Pesquisa
O perfil dos usuários na Web vem mudando com o passar dos anos, com isso, cresce a
responsabilidade de manter páginas onde usuários sejam capazes de utilizar e encontrar o que
necessitam. Nesse quesito, a usabilidade em Websites possibilita um melhor entendimento e
proporciona uma acessibilidade onde permite que usuários com algum tipo de deficiência
possa desfrutar das informações ali contidas.
Para o usuário comprar um produto é preciso encontra-lo, para Nielsen e Loranger
(2007, p.131, 16), “A capacidade de se movimentar em um Website é extremamente
importante para a usabilidade, mas os principais componentes Buscar e Localizar são
responsáveis por mais de um terço das dificuldades dos usuários que fazem isso”.
Segundo o mesmo autor, “a usabilidade é um atributo de qualidade relacionado à
facilidade do uso de algo”, esta facilidade no uso, sendo aplicada a Web, proporciona um fácil
entendimento dos recursos e processos a serem executados no Website.
A importância deste trabalho encontra-se no fato de que é relevante por permitir a
inclusão social através da acessibilidade e facilitar o uso do portal tornando-o de fácil
compreensão e aprendizagem, podendo ser inclusive aplicado a diversas empresas na área
comercial e/ou educacional.
1.4 Metodologia da Pesquisa
16
A análise de requisitos do protótipo será realizada através de pesquisas, questionários e
testes de usabilidade e testes de acessibilidade com ASES, para identificar as necessidades e o
publico alvo. Com base na análise feita será desenvolvido o fluxograma para a criação de
Storyboards do protótipo.
O protótipo funcionará na plataforma WEB e será desenvolvido com a linguagem de
marcação HTML, XHTML e CSS seguindo os padrões de acessibilidade da W3C e as
recomendações de usabilidade descritas por Nielsen e Cybis.
1.5 Organização da Pesquisa
Além desta introdução, este trabalho contém mais X capítulos, sendo estes:
Capítulo 2 – EMBASAMENTO TEÓRICO: Base técnica para a elaboração do projeto
de pesquisa;
Capítulo 3 – METODOLOGIA: Metodologia utilizada na elaboração do projeto de
pesquisa;
Capítulo 4 – PROTOTIPO: Desenvolvimento do protótipo;
Capítulo 5 – TESTES: Testes de usabilidade e acessibilidade;
Capítulo 6 – CONSIDERAÇÕES FINAIS:
17
2 EMBASAMENTO TEÓRICO
Essa seção contém os conceitos que serão utilizados no projeto, como interface,
usabilidade e acessibilidade em portais Web, avaliações heurísticas e padrões de
desenvolvimento.
2.1 Portal Web
Para Figueiredo (2005, p.8) “A noção de portal leva à ideia de uma entrada principal
que dá acesso a algo. [...]. Na sua forma mais simples, um portal é usado para reunir, num
único endereço, uma quantidade enorme de serviços e informação.” Sobre o mesmo assunto
ressalta Gonsalves (2010, p.219) que: “O papel dos portais deveria ser o de organizar as
informações pertinentes a determinado tema”.
Para Figueiredo (2005, p.9), os portais como vistos na Figura 1 podem ser divididos em
dois tipos, portais públicos e portais corporativos. O mesmo autor ressalta ainda que:
Os portais ditos públicos são sítios Web com propósitos generalistas considerados
como pontos de entrada para outros sítios Web e que incluem inúmeros serviços, em
particular, motores de busca. Os portais corporativos, por sua vez, são sítios Web
internos que funcionam como pontos únicos de acesso e à infraestrutura de serviços
aplicacionais das organizações.
A figura a seguir demonstra num contexto relativo de como são divididos os portais
Web:
Figura 1 – Tipos de portais relativamente ao contexto
Fonte: Figueiredo (2005)
Diante da definição de portal e informações relacionadas à Figura 1, ter um portal
corporativo de fácil aprendizagem e que disponibiliza informações relevantes se de interesse
18
do usuário, capaz de proporcionar uma aproximação maior do publico com a empresa requer
uma interface atrativa e funcional.
2.2Interface
As definições de interface dependerão do seu contexto de uso, segundo o dicionário da
língua portuguesa, tais definições podem ser:
Superfície, plana ou não, que forma um limite comum de dois corpos ou
espaços. [...] Ponto no qual um sistema de computação termina e um outro
começa. [...] Parte de um programa que permite a transmissão de dados para um
outro programa. [...] interface entre um sistema operacional ou programa e o usuário.
Como utiliza gráficos ou ícones para representar funções ou arquivos, dispensa a
digitação dos comandos do sistema, facilitando o controle do software. [...].
Michaelis (1998 – 2009 apud UOL, 2009, grifo do autor)
Para Figueiredo (2005, p.35), “A interface é a camada responsável pela apresentação
dos serviços e conteúdos disponibilizados pelo portal aos utilizadores.”.
Segundo Krug (2008, p18), o principal objetivo em uma interface é que “[...] cada
página seja clara, de forma que apenas olhando-a o usuário comum saiba o que é e como usá-
la.”.
Em um comparativo de interfaces gráficas, a Figura 2 demonstra um exemplo de como
era a primeira interface do portal Universo Online (UOL) com o surgimento dos portais.
Figura 2 - Interface gráfica do Universo Online (UOL) - 1996
Fonte: UOL (2013)
A Figura 3 traz parte da interface gráfica do UOL atual:
19
Figura 3 – Interface gráfica do Universo Online (UOL) – 2013
Fonte: UOL (2013)
Analisando a Figura 2 e Figura 3, percebe-se uma extensa mudança em sua interface,
além do significativo aumento no conteúdo do portal, compreende-se que a estrutura e a
organização encontrada na Figura 3 possui uma interface limpa e de fácil compreensão.
Por fim, fica evidente que a interface é essencial para a comunicação com o usuário,
possibilitando o acesso e a interação com o portal.
2.2.1 Padrões para interface humano computador - IHC
Segundo Cybis (2010, p.104) tornou-se comum o trabalho com padrões, diz ainda que:
20
Trabalhar com padrões é uma prática frequente em muitas áreas das atividades
humanas. Padrões se referem aos problemas mais comuns e as boas soluções para
esses problemas, que são capturadas, compartilhadas e reutilizadas por profissionais
atuando no projeto de diversos tipos de produtos e serviços.
Sobre padrões de interface humano computador, o mesmo autor diz que “são os que
favorecem tanto aos desenvolvedores, proporcionando-lhes eficiência na programação, como
aos usuários, oferecendo-lhes usabilidade nas interações com o sistema”.
Para Heemann (1997, p.27) IHC pode ser definido como:
O estudo do individuo, da tecnologia computacional e os modos como se
influenciam mutuamente, exigindo um entendimento de pelo menos três coisas: a
tecnologia computacional, as pessoas que interagem e o significado de mais
“usável”. Contudo, existe um quarto aspecto que está implícito nessa definição
simples que é o entendimento do trabalho que o individuo tenta realizar usando a
tecnologia.
Portanto trabalhar com bons padrões de IHC possibilitará um bom projeto de interface,
podendo proporcionar um nível de entendimento e satisfação facilitando o uso do portal entre
usuário se aumentando o nível de usabilidade do portal.
2.2.2 Ergonomia
Segundo Gomes Filho (2003, p.17) o objetivo da ergonomia é “[...] sempre a melhor
adequação ou adaptação possível do objeto aos seres vivos em geral. Sobretudo no que diz
respeito à segurança, ao conforto e à eficácia de uso ou de operacionalidade dos objetos, mais
particularmente, nas atividades e tarefas humanas.”.
De acordo com Cybis (2010), desenvolver interfaces ergonômicas, requer conhecer o
usuário, seu jeito de pensar, agir e se comportar durante determinada tarefa. Segundo o
mesmo autor, “As mesmas entradas e saídas dos sistemas podem significar coisas diferentes
para diferentes pessoas [...]”. Desta forma a mesma interface pode ter significados diferentes
para usuários diferentes ou situações diferentes.
De acordo com Bastien e Scapin (1993 apud CYBIS, 2010), oito critérios ergonômicos
com dezoito subcritérios foram apresentados por dois pesquisadores do “Instituto Nacional de
pesquisa em Automação e Informática da França” (INRIA), Dominique Scapin e Christian
Bastien. Visando o aumento da sistematização dos critérios ergonômicos aplicados a
determinados softwares.
Baseado nos critérios ergonômicos de Bastien e Scapin, integrando qualidades definidas
por outros autores, Cybis (2010) define no Quadro 1 os seguintes critérios:
21
Quadro 1- Conjunto integrador de critérios, princípios, regras e heurísticas de ergonomia.
Critérios Ergonomicos Subcritérios Ergonomicos
Condução Qualidade da ajuda e da documentação
Adequação ao aprendizado
Apresentação do estado do sistema
Convite
Agrupamento e distinção por localização
Agrupamento e distinção por formato
Feedback imediato
Carga de trabalho Legibilidade
Brevidade das entradas individuais
Concisão das apresentações individuais
Ações mínimas
Design minimalista e estético
Controle Ações explicitas
Controle do usuário
Adaptabilidade Flaxibilidade
Personalização
Consideração da experiência do usuário
Gestão de erros Proteção de erros
Tolerância aos erros
Qualidade das menssagens de erros
Correção dos erros
Coerência Homogeneidade interna a uma aplicação
Homogeinidade externa a plataforma
Significado dos códigos e
denominações
-
Compatibilidade Compatibilidade com o usuário
Compatibilidade coma atarefa dos
usuários
Compatibilidade coma cultura dos
usuários Fonte: Quadro adaptado de Cybis (2010).
Os critérios ergonômicos apresentados no Quadro 1 descrevem as necessidades em
termo de usabilidade para sítios Web, quanto mais critérios satisfeitos maior será o grau de
usabilidade do portal.
Portanto, é de grande importância definir padrões ergonômicos tornando o sítio de fácil
compreensão e de satisfação subjetiva.
2.3Usabilidade
Tornar um produto eficaz e ao mesmo tempo eficiente garantindo a satisfação do
usuário é, em outras palavras, definir padrões de usabilidade para tal produto. A norma
“International Organization for Standardization” ISO 9241 (ABNT, 2000), define usabilidade
22
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.”.
Segundo o mesmo autor, define como:
Eficácia: Grau de exatidão com o qual os usuários alcançam objetivos
específicos.
Eficiência: Capacidade de realizar ou desenvolver algo demonstrando eficácia;
Satisfação: Atitudes positivas com ausência de desconforto ao utilizar um
produto.
Para Krug (2008, p.5) o verdadeiro significado de usabilidade é “assegurar-se de que
algo funcione bem: que uma pessoa com habilidade e experiência comuns (ou até menos)
possa usar algo [...] para seu propósito desejado sem ficar frustrado com isso.”. Segundo o
mesmo autor ““ Nada importante deve estar a mais de dois cliques de distância” ou “Fale a
língua do usuário” ou mesmo “Seja consistente”.”.
Segundo Cybis (2010, p.16), “Pode-se dizer que a ergonomia está na origem da
usabilidade, pois ela visa proporcionar eficácia e eficiência, além do bem-estar e saúde do
usuário, por meio da adaptação do trabalho ao homem.”. Segundo o mesmo autor “a
usabilidade é a qualidade que caracteriza o uso dos programas e aplicações.”. Desta forma
devemos definir padrões de interface ergonômica em aplicações Web, facilitando seu uso e
trazendo uma maior satisfação e conforto para o usuário.
Nielsen e Loranger (2007, p.16) define usabilidade como:
A usabilidade é um atributo de qualidade relacionado à facilidade do uso de algo.
Mais especificamente refere-se à rapidez com que os usuários podem aprender a
usar alguma coisa, a eficiência deles ao usa-la, o quanto lembram daquilo, seu grau
de propensão a erros e o quanto gostaram de utiliza-la.
Diante disso, a (ABNT, 2000) define um relacionamento entre os objetivos, a eficácia,
eficiência, satisfação e os componentes do contexto de uso, ilustrados na Figura 4.
De acordo com o mesmo autor “uma descrição dos componentes do contexto de uso
incluindo usuários, tarefas, equipamento e ambientes. Esta pode ser uma descrição de um
contexto existente ou uma especificação dos contextos pretendidos.”.
23
Figura 4 - Estrutura de usabilidade
Fonte: ABNT (2000)
De acordo com a Figura 4, os objetivos pretendidos pelo usuário, serão satisfeitos
através do contexto de uso, se obter eficácia, o resultado foi satisfeito, a eficiência e a
satisfação dependerão da facilidade e das atitudes que levou o usuário a atingir seu objetivo.
Para Nielsen (1993), usabilidade pode ser dividida em cinco critérios Básicos:
Intuitividade – O usuário deve produzir algum trabalho de forma satisfatória
mesmo sem experiência, o usuário apresentará facilidade no uso do sistema.
Eficiência – O sistema deve apresentar um nível de produtividade alto e
eficiente.
Memorização – As telas devem ser de fácil memorização mesmo para
usuários ocasionais.
Erro – Os erros devem ser os mais reduzidos possíveis, devem apresentar
soluções simples e erros graves ou sem solução não podem ocorrer;
Satisfação – O sistema deve agradar ao usuário, sejam eles iniciantes ou
avançados, permitindo uma interação agradável.
Portanto, a usabilidade é definida pela facilidade com que o usuário utiliza determinada
ferramenta e a satisfação proporcionada ao atingir objetivos. Para auxiliar a criação de
projetos, a usabilidade conta com a engenharia de usabilidade, diretrizes e heurísticas, que
auxiliam e ajudam a definir o grau de usabilidade de uma ferramenta.
24
2.3.1 Engenharia de Usabilidade
De acordo com Cybis (2010), na criação de um programa ou uma aplicação, o
desenvolvimento de um software se beneficia da engenharia de software, e a interface dispõe
da engenharia de usabilidade. Segundo o mesmo autor, “A engenharia de usabilidade surge
como esforços sistemáticos das empresas e organizações para desenvolver programas de
software interativo com usabilidade.”.
A engenharia de usabilidade nos mostra um caminho em que o usuário é o principal
envolvido como visto na Figura 5. Segundo Cybis (2010, p.20), “Seu ciclo foi definido como
essencialmente evolutivo, interativo e baseado no envolvimento do usuário”.
O ciclo demonstra o desenvolvimento do projeto centrado no usuário.
Figura 5 - Projeto centrado no usuário
Fonte: Figura adaptada de Cybis (2010).
Como apresentado na Figura 5, para traçar um caminho a percorrer em projetos
centrados no usuário, primeiro devem-se identificar as necessidades do projeto, depois de
25
identificadas, deverá ser feita analisar e especificação do contexto de operações, terminando
esta analise será especificada as exigências dos usuários, será produzido soluções de projeto e
avaliações do projeto contra as exigências. Se o sistema satisfaz as exigências dos usuários e
da organização o projeto teve êxito caso contrario o ciclo irá recomeçar até que todas as
exigências tenham sido satisfeitas.
Por fim, de acordo com Cybis (2010) o usuário é quem mais conhece o sistema no
contexto de seu trabalho, sendo fundamental sua integração como membro da equipe do
projeto, tendo um envolvimento informativo, consultivo ou participativo.
2.3.2 Diretrizes de Usabilidade
De acordo com o documento “Padrões Web em Governo Eletrônico” (e-PWG)
(BRASIL, 2010, p.12) “Diretrizes são orientações para o desenvolvimento do sítio tendo
como foco o cidadão.”. Segundo o mesmo autor, “Diretrizes devem ser tomadas como ponto
de partida no desenvolvimento e teste de sítios, nunca como uma receita ou lista de itens a
serem seguidos. Contexto e bom-senso são fundamentais no desenvolvimento de sítios.”.
Segundo Brasil (2010), sete diretrizes foram desenvolvidas para páginas de instituições
públicas no Brasil: Contexto e navegação, Carga de informação, Autonomia, Erros, Desenho,
Redação e Consistência e Familiaridade.
O conceito de cada diretriz assim como suas recomendações pode ser encontrado no
endereço: <http://epwg.governoeletronico.gov.br/cartilha-usabilidade#s2.1>
2.3.3 Heurística de usabilidade
Para Puchkin (1976), atividade heurística é o pensamento criador de uma nova
estratégia, para resolver um problema, que não foi obtida unicamente através de um raciocino
lógico.
Segundo uma nota da W3C (2005), “Heurística é o processo de comparar resultados de
avaliações com resultados esperados”.
Em seu livro, “Usability engineering”, Nielsen (1994 apud CYBIS, 2010) propõe “um
conjunto de dez qualidades de base para qualquer interface, qualidades estas que ele chamou
de heurística de usabilidade”.
As heurísticas de usabilidade determinadas por Nielsen (1993) são: Visibilidade do
estado do sistema, Mapeamento entre o sistema e o mundo real, Liberdade e controle ao
26
usuário, Consistência e padrões, Prevenção de erros, Reconhecer em vez de relembrar,
Flexibilidade e eficiência de uso, Design estático e minimalista, Suporte para o usuário
reconhecer, diagnosticar e recuperar erros e Ajuda e documentação;
Portanto, a usabilidade aplicada em portais possibilita um maior entendimento das
informações contidas na interface, proporcionando a eficácia na execução de uma tarefa com
eficiência e satisfação por parte do usuário.
2.4 Acessibilidades Web
De acordo com a “Cartilha do Censo 2010”, 23,9% dos brasileiros possui algum tipo de
deficiência:
A deficiência é um tema dos direitos humanos e como tal obedece ao principio de
que todo ser humano tem o direito de desfrutar de todas as condições necessárias
para o desenvolvimento de seus talentos e aspirações, sem ser submetido a qualquer
tipo de discriminação (OLIVEIRA, 2012).
A Figura 6 demostra como é feita a divisão dos 23,9% dos brasileiros que possuem
algum tipo de deficiência.
Figura 6 - População com deficiência no Brasil
Fonte: Oliveira (2012).
Promover o acesso ao portal para toda ou ao menos parte dessas pessoas é em outras
palavras possibilitar a inclusão deste publico na sociedade;
Segundo Brasil (2010), a acessibilidade é promover a integração social de pessoal que
demonstrem algum tipo de deficiência. Para definir de uma forma mais aberta acessibilidade,
27
segundo este mesmo autor, “Acessibilidade significa permitir que pessoas com deficiências
ou mobilidade reduzida participem de atividades que incluem o uso de produtos, serviços e
informação, além de permitir o uso destes por todas as parcelas da população”.
De acordo com a ABNT (2004, p.2), através da “Norma Brasileira” - NBR 9050,
acessibilidade é: “Possibilidade e condição de alcance, percepção e entendimento para a
utilização com segurança e autonomia de edificações, espaço, mobiliário, equipamento urbano
e elementos.”.
O deficiente visual e autor de diversas publicações, considerado um dos maiores nomes
no Brasil em acessibilidade Web, Queiroz (2006) afirma que:
[...] o conceito de acessibilidade assumiu dimensão mais ampla. Qualquer tipo de
barreira para qualquer pessoa, mesmo sem deficiências ou apenas com limitações
temporárias, passou a ser relacionado à acessibilidade. [...]. Hoje, na prática,
acessibilidade diz respeito à qualidade ou falta de qualidade de vida para todas as
pessoas.
Segundo o mesmo autor, “Acessibilidade nas páginas da Web significa, antes de mais
nada, termos um acesso regular a essas páginas.”.
De acordo com o W3C, fundado por Tim Berners-Lee, em 1994, que teve como
objetivo estabelecer padrões para a criação e interpretação de conteúdos para a Web. Em maio
de 1999, através de um grupo de trabalho chamado Web Accessibility Initiative (WAI), foi
lançada a primeira versão do documento chamado Web Content Accessibility Guidelines
(WCAG) que descreve padrões e boas práticas no desenvolvimento de conteúdos em sítios na
Internet, tornando-os mais acessível.
Segundo a W3C (1999, p.2) o documento declarado com WCAG diz que:
[...] faz parte de uma série de diretivas de acessibilidade, publicadas pela Iniciativa
para a acessibilidade da Web. Dessa série fazem parte as diretivas para a
acessibilidade de agentes do utilizador [...] e as diretivas para a acessibilidade de
ferramentas de criação de conteúdo [...].
2.4.1 Níveis de prioridade e Conformidade
De acordo com a W3C (1999) prioridade são pontos que os criadores de conteúdo Web
têm, devem ou podem satisfazer por completo, para isso foram definidos três níveis de
prioridade. A conformidade é definida pelo numero de prioridades que foram satisfeitos.
Segundo o mesmo autor, “A satisfação deste tipo de ponto irá melhorar o acesso a
documentos sediados na Web.”.
28
Segundo a W3C (2002), são definidos critérios de sucesso utilizados em testes de
conformidade onde são definidos três níveis de conformidade1, sendo o primeiro “A”, o
segundo “AA” e o terceiro “AAA”. O Quadro 2 demonstra como é feita a divisão por níveis
de conformidade.
Quadro 2 - Nível de conformidade entre propriedades.
Níveis de Conformidade
Nível de conformidade Requisitos para conformidade
“A” Foram satisfeitos todos os requisitos de
verificação de prioridade 1;
“AA” Foram satisfeitos todos os requisitos de
verificação de prioridades 1 e 2;
“AAA” Foram satisfeitos todos os requisitos de
verificação de prioridades 1, 2 e 3; Fonte: Adaptado de W3C (1999).
Desta forma, se faz necessário satisfazer os três níveis de prioridade para alcançar o
nível de conformidade “AAA” determinado pelo W3C (2002).
Segundo Brasil (2011), através do documento intitulado “Modelo de Acessibilidade em
Governos Eletrônicos” - (e-MAG), para desenvolvermos sítios da web com acessibilidade é
necessário seguir três passos: padrões Web, diretrizes ou recomendações de acessibilidade e
realizar a avaliação de acessibilidade.
2.4.2 Padrões Web de Acessibilidade
Segundo Queiroz (2009) “Os Padrões web sempre estão associados ao código da página
web e às recomendações do W3C especificadas para ele.”.
De acordo com Brasil (2011) “Para se criar um ambiente online efetivamente acessível
é necessário, primeiramente, que o código esteja dentro dos padrões Web internacional
definido pelo W3C.”.
Segundo especificações do W3C (1999), definir padrões web, é garantir qualidades
técnicas e editorias, padronizando e obtendo apoio de desenvolvedores através de um
processo projetado para maximizar o uso da linguagem “Hyper Text Markup Linguage”
(HTML) e “Cascading Style Sheets” (CSS), promovendo acessibilidade.
1
Os requisitos para atender os níveis de conformidade podem ser encontrados em:
29
De acordo com Brasil (2011) pode-se conhecer as boas praticas para o desenvolvimento
dos padrões adotados pelo governo brasileiro, através da cartilha e-MAG de codificação
disponível em: <http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG >.
2.4.3 Diretrizes para acessibilidade Web
De acordo com o W3C (1999), as diretrizes de acessibilidade são normas e boas
praticas adotadas por desenvolvedores para o desenvolvimento de sítios eletrônico. De forma
mais especifica, Brasil (2011) diz ainda que “As diretrizes ou recomendações de
acessibilidade explicam como tornar o conteúdo Web acessível a todas as pessoas,
destinando-se aos criadores de conteúdo Web [...] e aos programadores de ferramentas para
criação de conteúdo. [...].”.
Segundo o mesmo autor, “Em nível nacional, o e-MAG é o documento que contém as
diretrizes ou recomendações que norteiam o desenvolvimento de sítios e portais acessíveis.”.
A classificação das recomendações2 de acessibilidade sem determinar prioridades entre elas,
pois todas devem ser seguidas, são: Marcação, Comportamento (DOM),
Conteúdo/Informação, Apresentação/Design, Multimídia, Formulário.
De acordo com o W3C (1999), dentro da WCAG 1.0 foi definido quatorze diretrizes
3para padronizar o conteúdo acessível em sítios da web. As diretrizes determinadas pela W3C
(1999) são: Fornecer alternativas equivalentes ao conteúdo sonoro e visual, Não recorrer
apenas à cor, Utilizar corretamente anotações e folhas de estilo, Indicar claramente qual a
língua utilizada, Criar tabelas passíveis de transformação harmoniosa, Assegurar que as
páginas dotadas de novas tecnologias sejam transformadas harmoniosamente, Assegurar o
controle do utilizador sobre as alterações temporais do conteúdo, Assegurar a acessibilidade
direta de interfaces do utilizador integradas, Pautar a concepção pela independência face a
dispositivos, Utilizar soluções de transição, Utilizar as tecnologias e as diretrizes do W3C,
Fornecer contexto e orientações, Fornecer mecanismos de navegação claros, Assegurar a
clareza e a simplicidade dos documentos.
2
Tais recomendações encontram-se detalhadas no portal: <http://epwg.governoeletronico.gov.br/cartilha-
codificacao#s3>.
3 A definição completa das diretrizes pode ser encontrada no endereço:
<http://www.w3.org/TR/WCAG10/#Guidelines>.
30
Portanto, seguir os padrões Web definidos pela W3C é de fundamental importância para
tornar o portal acessível em diferentes plataformas.
Segundo Nielsen e Loranger (2007) “Para Websites, compatibilidade com varias
plataformas significa a capacidade de trabalhar em diferentes navegadores, não apenas em
diferentes computadores.”.
De acordo com o mesmo autor, a solução para tal problema é a utilização de Layout
Fluido que é definido por ele como “[...] uma página da Web em que janelas são expandidas e
contraídas de modo que essa página sempre tenha exatamente a mesma largura do navegador,
nem mais nem menos.”.
3 METODOLOGIA
Essa seção contem informações acerca da metodologia utilizada para a realização de
técnicas de analise contextual, assim como, o desenvolvimento e a aplicação das avaliações de
acessibilidade e usabilidade, que determinará o publico alvo do portal, e quais pontos
relacionados à usabilidade necessitam de melhorias.
3.1 Técnicas de analise contextual
Para a realização dessa pesquisa serão utilizadas técnicas para definir o grau de
usabilidade e acessibilidade do portal, com o intuito de sugerir melhorias significativas que
agregarão valores aos produtos e serviços fornecidos pelo portal.
Segundo Nielsen (2007), “Algumas questões são tão especificas do seu site que não são
abrangidas em nenhum relatório. Essa é a razão pela qual você sempre precisa conduzir testes
com seus próprios usuários.”.
Entre as diversas técnicas desenvolvidas por pesquisadores de grande prestigio na área
de usabilidade, será utilizado para está pesquisa algumas das técnicas descritas por Cybis
(2010) em seu livro “Ergonomia e Usabilidade”. Sendo: Questionário de satisfação e
Observação do usuário, duas das técnicas apresentadas que serão utilizadas nesta pesquisa.
Para a avaliação de acessibilidade será realizado testes com o software ASES, e em
seguida realizado um teste manual para verificar se o portal está em conformidade com o
checklist disponibilizado pelo portal do governo eletrônico.
31
3.1.1 Questionário de satisfação
Segundo Cybis (2010) este questionário é definido com perguntas e respostas
predefinidas, permitindo um resultado quantitativo acerca das respostas obtidas. A aplicação
de questionários de satisfação aplica-se principalmente em locais com usuários experientes,
formando assim um conjunto de informações relevantes sobre aspectos satisfatórios e
insatisfatórios.
A recomendação definida por Cybis (2010) é a padronização de um questionário que
possibilita a comparação entre sistemas diferentes e/ou versões diferentes de um mesmo
software. Entre os questionários de satisfação mais conhecidos, destaca-se o questionário
ISONORM 9241:104, em alternativa, Medeiros (1999) desenvolveu a versão em português do
questionário.
O questionário será aplicado a funcionários da instituição que utilizam constantemente o
portal, será realizado um levantamento do grau de experiência do usuário para com a internet
e um levantamento dos pontos positivos e negativos do portal, que possuir relevância para
com o projeto.
Para esta pesquisa foi desenvolvido um questionário baseado na versão apresentada por
Medeiros (1999) da ISONORM 9241:10.
3.1.2 Observação do usuário
A técnica de observação do usuário constitui de um pesquisador observando e tomando
notas enquanto o usuário trabalha. É de grande importância o usuário saber que não está
sendo avaliado, pois, a má compreensão poderá interferir no fluxo de seu trabalho e nos
resultados do teste.
O teste será realizado com pessoas que desconhecem ou pouco conhece o portal, através
de tarefas apresentadas em fichas ou cartões. Um observador analisando os processos
realizados pelo usuário e tomando notas de suas ações.
3.1.3 Testes de acessibilidade
Segundo (BRASIL, 2011) “Após a construção do ambiente online de acordo com os
padrões Web e as diretrizes de acessibilidade, é necessário testá-lo para garantir sua
4 Disponível em <http://www.ergo-
online.de/site.aspx?url=html/software/verfahren_zur_beurteilung_der/fragebogen_isonorm_online.htm>
32
acessibilidade. No caso dos padrões Web, há um validador automático disponibilizado pelo
próprio W3C”.
De acordo com a WCAG há a necessidade de avaliar a acessibilidade através de
softwares validadores, de forma mais clara declara que:
A validação da acessibilidade deve ser feita por meio de ferramentas automáticas e
da revisão direta. Os métodos automáticos são geralmente rápidos, mas não são
capazes de identificar todas as vertentes da acessibilidade. A avaliação humana pode
ajudar a garantir a clareza da linguagem e a facilidade da navegação. (W3C, 1999,
p.19)
Segundo o Brasil (2011) o “Avaliador e Simulador de Acessibilidade de Sítios” -
(ASES), uma ferramenta para avaliar acessibilidade através de simulações, torna possível o
uso de acessibilidade em sítios governamentais.
Segundo o mesmo autor “A validação manual é necessária porque nem todos os
problemas de acessibilidade em um sítio são detectados mecanicamente pelos validadores.”.
Para isso utilizamos o Checklist5do “Manual de Acessibilidade – Desenvolvedores”.
Portanto, para garantir a acessibilidade de um produto, a avaliação deverá ser realizada
através de software, para avaliar o código, e manual, para certificar que todos os critérios
foram satisfeitos.
4 PROTÓTIPO
Essa seção contem informações acerca do desenvolvimento do protótipo, ferramentas e
técnicas utilizadas em sua criação.
4.1 Ferramentas utilizadas
Para o desenvolvimento do protótipo foi utilizado o software Adobe Dreanweaver com
as linguagens HTML, XHTML, CSS e JavaScript ;
4.2 Layout Principal
O Layout principal foi desenvolvido baseando-se no Layout original do portal, seguindo
padrões e técnicas de Usabilidade proporcionando um nível de acessibilidade aceito pelos
padrões do e-MAG.
5
O Checklist pode ser encontrado no endereço: <http://www.governoeletronico.gov.br/acoes-e-
projetos/e-MAG/material-de-apoio>.
33
4.2.1 Layout Original
O Layout original possui uma largura fixa de 960px, imagem de topo inteira, dois
menus sendo um vertical e outro horizontal, um banner rotativo desenvolvido em Flash,
campo de noticias e um conjunto de imagens com links para páginas que não são encontradas
nos menus principais. No rodapé encontra-se apenas o ano de desenvolvimento do portal e a
quem pertence os direitos da página, como pode ser visto na Figura 7;
Figura 7 – Layout atual do portal do Senac/AL
Fonte: Senac – Departamento regional de alagoas (2012)
34
4.2.2 Layout Principal do Protótipo
Como visto na Figura 8, o Layout principal do protótipo foi desenvolvido seguindo as
diretrizes de usabilidade de Nielsen e diretrizes do Governo Eletrônico apresentado no
capitulo dois deste documento, estruturando o portal de forma lógica e clara.
Figura 8 – Layout principal do protótipo
Fonte: Propria (2013)
O Layout passou a ter fluidez, onde a largura mínima é de 800px e máxima de 1500px,
com visualização do portal em 97% da tela, possibilitando a navegação em diferentes tipos de
aparelhos e telas. Para o desenvolvimento deste recurso foi utilizado apenas HTML e CSS
como o exemplo definidos pelo código CSS demostrado abaixo.
.conteiner{
width: 97%;
max-width: 1500px;
35
min-width: 800px;
}
4.2.3 Topo do site
O topo foi desenvolvido seguindo padrões de usabilidade e acessibilidade, com o
logotipo da empresa no canto superior esquerdo e um mecanismo de busca no lado direito,
com visto na Figura 9.
Figura 9 – topo do protótipo
Fonte: Propria (2013)
A logo apresentada na Figura 9 foi inseridas diretamente no HTML e codificadas
seguindo padrões de acessibilidade demonstrada no código:
<a href="index.htm"><img src="img/logo.png" alt="logo Senac" /></a>
No trecho de código acima encontramos a inserção da logo detalhada com “alt”, que
segundo Brasil (2011), toda a imagem inserida no HTML deve conter um trecho de texto
explicativo no caso da imagem não poder ser exibida.
4.2.4 Menus
O portal deixou de possuir dois menus para englobar todas as funcionalidades em um
único menu, simplificando sua navegação como visto na Figura 10.
Figura 10 – Menu principal do protótipo
Fonte: Propria (2013)
O menu principal foi desenvolvido com HTML, CSS e JQUERY6 . Que possibilitou o
desenvolvimento de um menu interativo e de fácil compreensão, como visto na Figura 11.
6 Biblioteca JavaScript.
36
Figura 11 – Menu selecionado do protótipo
Fonte: Propria (2013)
Com a navegação do portal subdividida em blocos, a navegação torna-se de fácil
compreensão para o usuário, facilitando seu aprendizado e possibilitando uma satisfação
subjetiva.
4.2.5 Banner rotativo
O Banner rotativo ou carrossel, visto na Figura 12, diferente do portal original que
possui um banner em Flash e obrigatoriamente necessita ter o Flash Play instalado no
navegador, foi desenvolvido em HTML, CSS e JavaScript possibilitando sua execução
independente de softwares instalados no navegador, tornando-o acessível à maioria dos
navegadores atuais.
Figura 12 – Banner rotativo do protótipo
Fonte: Propria (2013)
O Banner está presente antes da dobra, pois representa parte do conteúdo principal da
tela inicial que fará a divulgação dos cursos e os principais eventos da instituição. Cada
37
imagem do Banner possui uma definição e uma caixa de texto que possibilita detalhar através
de um texto, o conteúdo que abrirá com esta imagem.
4.2.6 Imagens
As imagens inseridas no portal seguem padrões de acessibilidade, com texto alternativo
à ser usado no caso da imagem não carregar, como é visto no código <img src="img/2.JPG"
alt="Eventos no Senac" >, onde o atributo “alt” descreve a imagem.
4.2.7 Links
Os links internos seguem os padrões de usabilidade na cor azul e quando selecionados
passam para a cor vermelha.
4.2.8 Rodapé
O rodapé possuir um menu dando acesso as principais páginas do portal, conhecido
como “mapa do site”, que auxilia a navegação dentro do portal.
Possui também os principais telefones da instituição como visto na Figura 13.
Figura 13 – Rodapé do protótipo
Fonte: Propria (2013)
Tais links e opções de contato, tornam-se requisitos básicos de usabilidade, pois facilita
a navegação do usuário e disponibiliza uma forma de entrar em contato da instituição em
todas as páginas do portal.
4.2.9 páginas internas
Como visto na Figura 14 e Figura 15, as páginas internas do portal seguiram um mesmo
padrão, com um menu na lateral esquerda, direcionando par páginas com o mesmo foco de
assunto.
38
Figura 14 – página institucional do protótipo
Fonte: Propria (2013)
Figura 15 – Página de cursos de informática do protótipo
Fonte: Propria (2013)
39
A Figura 15 demonstra a forma como foi feita a distribuição dos cursos, cada um com
suas informações principais e um botão direcionando para outra página, onde está detalhada
campo de atuação, estrutura do curso, carga horária, datas de inicio e termino, turno,
professores e outras informações relevantes a cada cursos específicos.
4.2.10 Acessibilidade
As páginas foram desenvolvidas com um contraste entre pano de fundo e primeiro
plano, com fluidez sem perda de funcionalidade entre 800px e 1500px, as imagens persentes
no HTML estão com à alternativa de texto caso mão seja possível sua visualização no
navegador e as páginas estão divididas em blocos, facilitando a navegação através do teclado.
5 TESTES
Essa seção contem informações referentes ao perfil dos usuários testados e o resultado
dos testes aplicados.
5.1 Plano de teste
Os testes aplicados seguiram duas linhas distintas de usuários, onde o foco principal foi
determinar o quão funcional é o portal e quais pontos necessitam melhorias para garantir a
eficácia, a eficiência e a satisfação do usuário. Deste modo foi realizado um teste através de
questionário de satisfação com funcionários da instituição e testes com observação assistida
do usuário.
5.2 Questionários de satisfação
O questionário de satisfação foi desenvolvido com a ferramenta de formulários
encontrada no Google Drive, e encaminhada para o e-mail coorporativo da instituição, com o
intuito de levantar informações sobre o layout e a forma com que funcionários utilizam o
portal, suas dificuldades em realizar tarefas e sua confiança no portal.
O questionário foi desenvolvido baseando-se na ISONORM 9241:10, sendo adotado
notas de 1 (um) à 7 (sete) por quesito avaliado, como visto na Figura 16.
40
Figura 16 – Exemplo de pergunta do questionário de satisfação
Fonte: Propria (2013)
Onde 1 (um) representa o grau mais difícil, ruim ou confuso, e 7 (sete) representa o grau
mais fácil, bom e claro dos quesitos avaliados.
5.2.1 Perfil dos usuários
O questionário foi aplicado com funcionários da instituição entre 20 e 60 anos, foi
encaminhado para um grupo de pessoas deixando claro que sua participação é sigilosa e não
obrigatória, apenas com o intuito de levantar dados para a pesquisa.
Dos usuários que responderam a pesquisa, 53% têm entre 30 e 40 anos, como visto no
gráfico 1 e 83% possuem ensino superior completo representados no Gráfico 2, sendo 60% do
sexo masculino e 40% do sexo feminino como visto na Gráfico 3.
Gráfico 1 – Facha etária
Fonte: Propria (2013)
0%
40%
53%
7% Facha etária
Até20 anos entre 20 e 30 anos
entre 30 e 40 anos Mais de 40 anos
41
Gráfico 2 - Grau de instrução
Fonte: Propria (2013)
Gráfico 3 - Sexo
Fonte: Propria (2013)
Dos usuários participantes, 90% utilizam computador a mais de três anos e 80%
acessam internet a mais de três anos com vistos nos gráficos 4 e 5.
0%
0% 0% 0%
13%
87%
Grau de instrução
FundamentalIncompleto
Fundamental Completo
Médio Incompleto
Médio Completo
Superior Incompleto
Superior Completo
60%
40%
Sexo
Masculino Feminino
42
Gráfico 4 - Quanto tempo utiliza computador
Fonte: Propria (2013)
Gráfico 5 - Quantas horas por dia utiliza a internet
Fonte: Propria (2013)
Com tais informações torna-se relevante os resultados obtidos no questionário de
satisfação, visto que, os usuários participantes possuem um bom grau de instrução e
experiência considerada relativamente alta no acesso a internet e uso do computador.
0% 10% 0%
90%
Quanto tempo utiliza computador
Atá 1 ano Entre 1 e 2 anos Entre 2 e 3 anos Mais de 3 anos
20%
0% 0%
0%
80%
Quantas horas por dia utiliza a internet
Até 1 hora Entre 1 e 2 horas Entre 2 e 3 horas
Entre 3 e 4 horas Mais de 4 horas
43
5.2.3 Avaliação do usuário
No quesito Layout (sequência, alinhamento, espaçamento e visualização dos campos na
tela), 67% dos usuários deram notas abaixo de 4 (Quatro), levando em consideração que,
quanto menor a nota mais difícil, ruim ou confuso é o quesito, a avaliação do Layout pode ser
considerada no mínimo confusa perante os usuário, como destaca o gráfico 6.
Gráfico 6 - Layout: sequencia, alinhamento, espaçamento e visualização dos campos na tela
Fonte: Propria (2013)
No quesito Utilização (facilidade de navegação, agilidade e praticidade), 73% dos
usuários demostraram um desconforto como visto no Gráfico 7, apresentando notas entre 1
(um ) e 4 (quatro).
Gráfico 7 - Utilização: facilidade de navegação, agilidade e praticidade
Fonte: Propria (2013)
Desta forma evidencia uma insatisfação do usuário ao navegar pelo portal, para Krug
(2008), a regra primordial de usabilidade é “Não me faça pensar”, segundo o mesmo autor, a
facilidade e a praticidade de navegação influencia na permanência do usuário em seu portal.
67%
33%
Layout: sequência, alinhamento, espaçamento e visualização dos campos na tela
Notas até 4
Notas acima de 4
73%
27%
Utilização: facilidade de navegação, agilidade e praticidade
Notas até 4
Notas acima de 4
44
Sobre o conforto do usuário ao utilizar o portal (cores, tamanho dos caracteres,
entendimento dos comandos/funções), 67% dos usuários deram notas até quatro, compreende-
se então que não estão satisfeitos com cores e tamanho dos caracteres e comandos como visto
no Gráfico 8.
Gráfico 8 - Conforto, cores, tamanho dos caracteres, entendimento dos comandos/funções
Fonte: Propria (2013)
Segundo Nielsen e Loranger (2007, pag. 214) “A tipografia e os esquemas de cores
corretos são componentes essenciais de bom design visual [...]”.
Com a avaliação de tais requisitos e os resultados obtidos, fica evidente a insatisfação
do usuário com o portal atual e a necessidade de prover melhorias para facilitar o acesso e
proporcionar um melhor desempenho, buscando sempre a eficácia, eficiência e a satisfação do
usuário.
5.3 Observações do usuário
Segundo Cybis (2010, pag. 220), “Os testes de usabilidade têm como foco de avaliação
a qualidade das interações que se estabelecem entre usuários e o sistema”.
Para a realização dos testes, foram criados cartões com tarefas a serem realizadas no
portal, e aplicados em duas etapas, primeiro foi testado o portal atual, tendo como foco as
informações mais relevantes para os alunos da instituição.
O mesmo teste foi aplicado no protótipo desenvolvido seguindo diretrizes de
usabilidade e acessibilidade, visto no capitulo dois.
67%
33%
Conforto: cores, tamanho dos caracteres, entendimento dos comandos/funções
Notas até 4
Acima de 4
45
Ambos os teste foram aplicador em um computador com processador I7, 6 Giga Bytes
de memória RAM, sistema operacional Windows 7, Navegadores Firefox e Google Chrome
com a ultima versão do Flash Player instalada.
5.3.1 Perfil do observador
O avaliador deve possuir conhecimentos sobre os fundamentos básicos da engenharia de
usabilidade, ser imparcial e não interferir o usuário durante a execução do teste, tomando
notas e memorizando os principais fatos ocorridos durante as tarefas.
5.3.2 Perfil dos usuários observados
Os usuários testados são participantes de alguns dos programas oferecidos pele
Senac/AL, entre os usuários testados, como visto no Gráfico 9, 60% pertence a faixa etária
entre 20 e 40 anos, os outros 40% entre 15 e 20 anos.
Gráfico 9 – Facha etária dos usuários observados
Fonte: Propria (2013)
Como o apresentado no Gráficos 10, 100% dos usuários avaliados tem acesso a
computador e internet a mais de três anos.
60%
40%
Facha etária
Masculino
Feminino
46
Gráfico 10 - Acesso a computador e internet dos usuários observados
Fonte: Propria (2013)
Sendo relevante para a pesquisa sua forma de navegar no portal, e a facilidade
encontrada para atingir os objetivos propostos.
5.3.3 Resultados observados no portal atual
As tendências observadas através dos testes de usabilidade mostram que 80% dos
usuários buscam primeiro as informações nos menus principais. Tarefas na qual se tem a
necessidade de utilizar links que estão presentes apenas após a dobra da página, necessitaram
de um tempo maior para serem realizada.
Os testes também mostraram que links que direcionam para uma imagem ou um arquivo
PDF, onde se encontra informações relevantes para o usuário, não são funcionais, pois,
dependendo da resolução do documento, os usuários testados apresentaram dificuldades
consideráveis na leitura de informações necessárias para a realização da tarefa. Neste mesmo
quesito, observou-se a ausência de informações referentes ao tipo de arquivo e a forma com
que poderá ser acesso, através de download ou no próprio navegador.
Outra questão levantada nos testes foi à ausência de informações para contato na página
“Fale conosco”, como telefone, endereço, e-mail, etc.
Portanto, mediante o resultado dos testes apresentado, se torna evidente a necessidade
de melhorias visando facilitar a forma com que usuários acessam o portal.
100%
Acesso a computador e internet
Mais de três Anos
47
5.3.4 Resultados observados no protótipo
Em testes aplicados no protótipo, percebe-se que as mudanças na página iniciar mostrou
surtir efeitos significativos na navegação. A concentração dos links em apenas um menu
dividido em blocos de acesso, atendeu as necessidades de navegação facilitando o acesso a
todas as páginas do portal.
A implantação de um mecanismo de busca se mostrou eficaz e de grande importância
no portal.
O mapa do site encontrado no rodapé do portal se mostrou de grande ajuda para a
navegação dentro do portal, assim com, menus localizados nas páginas internas do portal,
possibilitando a navegação dentro da mesma área de conteúdo.
A forma com que os cursos ofertados estão disponíveis por área de atuação, assim
como, as informações referentes ao curso estão disponíveis em uma página sobre o curso,
facilitou busca e esclareceu duvidas como área de atuação e os requisitos para ingressar no
curso ofertado.
5.4 Testes com ASES
O teste com ASES foi aplicado na página inicial do portal, levantando diversos avisos
de prioridade um, dois e três, também apresenta erros de prioridade um, dois e três como visto
na Figura.
Figura 17 – Avaliação com ASES
Fonte: Propria (2013)
Os principais avisos e erros a serem solucionados a fim de definir um grau mínimo de
acessibilidade encontrados através do ASES são:
Oferecer contraste mínimo entre plano de fundo e primeiro plano.
Não utilizar apenas cor ou outras características sensoriais para diferenciar
elementos.
Disponibilizar documentos em formatos acessíveis.
Fornecer alternativas em texto para as imagens do sitio.
Assegurar o controle do usuário sobre as alterações temporais do conteúdo.
48
Disponibilizar todas as funções da página via teclado.
Permitir redimensionamento sem perda de funcionalidade.
Dividir grandes blocos de informação.
Atender a estes quesitos aumentará consideravelmente o grau de acessibilidade do
portal.
6 CONSIDERAÇÕES FINAIS
È notável que a criação de um portal sem requisitos de usabilidade e sem se preocupar
com a acessibilidade, possui algum problema, seja na navegação ou na compreensão do
conteúdo, sendo assim, considerar métodos para a implantação de usabilidade e técnicas de
acessibilidade, torna-se útil na criação de portais, e possibilita uma fácil compreensão do
usuário em sua navegação.
Por se tratar de um portal educacional, focado na formação de profissionais, a
usabilidade e a acessibilidade faz com que o usuário com pouca experiência em navegar na
Web, encontre as informações que necessita para ingressar em cursos oferecidos na
instituição, obtendo um aprendizado cognitivo dos recursos oferecidos no portal.
No decorrer da pesquisa percebe-se que para haver usabilidade é necessário ter
acessibilidade, e utilizar diretrizes recomendadas, assim como a heurística, possibilita a
criação de um portal com usabilidade e acessibilidade necessária para a fácil navegação e
compreensão de todos.
Diante das questões levantadas até aqui, pode-se observar que criar um portal acessível
e de fácil entendimento, com seu desenvolvimento centrado no usuário, possibilita uma
melhor compreensão do usuário final. O desenvolvimento do protótipo foi de fundamental
importância, possibilitando avaliações heurísticas e comprovando sua eficiência.
49
REFERÊNCIAS
ABNT. Requisitos Ergonômicos para Trabalho de escritórios com Computadores. Orientação sobre
Usabilidade, Rio de janeiro, 2000.
BRASIL, M. D. P. O. E. G. Padrões Web em Governo Eletrônico. Brasilia: MP, SLTI, 2010.
BRASIL, M. D. P. O. E. G. S. D. L. E. T. D. I. e-MAG - Modelo de Acessibilidade em Governo Eletronico.
Brasília: MP, SLTI, 2011.
CYBIS, W.; BEITOL, A. H.; FAUST, R. Ergonomia e Usabilidade. São Paulo: Novatec, 2010.
FIGUEIREDO, R. M. F. Portais Escolares: Estudo de aceitação de um projeto para um portal Web num
contexto de ensino, 2005. [S.l.]: TCC – Monografia – Dissertação – Tese. Universidade do Minho,
2005.
GESELLSCHAFT ARBEIT UND ERGONOMIE. Fragebogen ISONORM. ergo online, 2013. Disponivel em:
<http://www.ergo-
online.de/site.aspx?url=html/software/verfahren_zur_beurteilung_der/fragebogen_isonorm_online.
htm>. Acesso em: 13 outubro 2013.
GOMES FILHO, J. João. Ergonomia do objeto: sistema técnico de leitura ergonômica. São Paulo:
Escrituras, 2003.
GONSALVES, A. L. Serviço de informação sobre Deficiência: desafios para organização da
informação. São Paulo: [s.n.], 2010.
HEEMANN, V. Avaliação Ergonômica de Interfaces de Bases de Dados por meio de checklists
especializados. [S.l.]: Dissertação submetida à Universidade Federal de Santa catarina - Laboratório
de Utilidades , 1997.
IBGE - INSTITUTO BRASILEIRO DE GEOGRAFIA E ESTATÍSTICA. Sala de Imprensa. IBGE, 29 Junho 2012.
Disponivel em:
<http://saladeimprensa.ibge.gov.br/noticias?view=noticia&id=1&busca=1&idnoticia=2170>. Acesso
em: 11 Outubro 2013.
KRUG, S. Não me faça pensar. Rio de Janeiro: Ata Books, 2008.
MEDEIROS,. ISO 9241: Uma Proposta de Utilização da Norma. Santa Catarina: Universidade Federal
de Santa Catarina - Programa de Pós-Graduação em Engenharia de Produção, 1999.
MINISTERIO DA EDUCAÇÃO - MEC. Objetivos e Iniciativas. PROGRAMA NACIONAL DE ACESSO AO
ENSINO TECNICO E EMPREGO (PRONATEC), 2012. Disponivel em:
<http://pronatec.mec.gov.br/institucional/objetivos-e-iniciativas>. Acesso em: SEIS MAIO 2013.
NICÁCIO, J. M. TÉCNICAS DE ACESSIBILIDADE - CRIANDO UM WEB PARA TODOS. MACEIÓ: EDUFAL,
2010.
NIELSEN, ; LORANGER, H. Usabilidade na Web. [S.l.]: CAMPUS, 2007.
50
NIELSEN, J. Usability Engineering. San Diego : Academic Press, 1993.
OLIVEIRA, L. M. B. Cartilha do Censo 2010. 1ª. ed. Brasilia: SDH-PR/SNPD, 2012.
PRÜMPER, J. Fragebogen ISONORM. ergo online, 2013. Disponivel em: <http://www.ergo-
online.de/site.aspx?url=html/software/verfahren_zur_beurteilung_der/fragebogen_isonorm_online.
htm>. Acesso em: 24 nov. 2013.
PUCHKIN, V. N. Heurística, a ciência do pensamento criador. 2. ed. Rio de Janeiro: Zahar, 1976.
QUEIROZ, A. D. Acessibilidade Web: Tudo tem sua Primeira Vez. Bengala Legal, 2006. Disponivel em:
<http://www.bengalalegal.com/capitulomaq>. Acesso em: 22 Agosto 2013.
QUEIROZ, M. A. D. Padrões Web. Acessibilidade Legal, 2009. Disponivel em:
<http://www.acessibilidadelegal.com/23-padroes-web.php>. Acesso em: 3 Setembro 2013.
UOL. UOL História. Universo Online, 1996 - 2013. Disponivel em:
<http://sobre.uol.com.br/historia/home4_h.jhtm>. Acesso em: 7 Setembro 2013.
W3C. Web Content Accessibility Guidelines (WCAG) 1.0. W3C Recommendation, 1999. Disponivel
em: <http://www.w3.org/TR/WCAG10/>. Acesso em: 13 Julho 2013.
W3C. Inacessibilidade de CAPTCHA. Maujor, 2005. Disponivel em:
<http://maujor.com/w3c/turingtest.html#heuristic>. Acesso em: 10 Agosto 2013.
W3C. Web Content Accessibility Guidelines (WCAG) 2.0. W3C Recommendation, 2008. Disponivel
em: <http://www.w3.org/TR/WCAG20/>. Acesso em: 7 Setembro 2013.
51
ANEXO
52
FORMULÁRIO DE AVALIAÇÃO
Questionário de satisfação aplicado a funcionários da instituição
53
54
55
56
57
FORMULÁRIO DE AVALIAÇÃO
Questionário utilizado no teste com observação do usuário
Acesse www.al.senac.br;
Encontre o telefone da central de atendimento;
Vejam quais foram os últimos cursos oferecidos pelo PRONATEC;
Quais são os cursos de informática que irão iniciar este ano;
Quais documentos são necessários para realizar cadastro na Biblioteca?