Melhoria do portal do Senac AL com usabilidade e acessibilidade

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 SenacAL, 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
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
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
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
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
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
Figura 15 – Página de cursos de informática do protótipo

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
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
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
Gráfico 3 - Sexo
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
Fundamental
Incompleto
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
Gráfico 5 - Quantas horas por dia utiliza a internet
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
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
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
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
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
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
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.

52
FORMULÁRIO DE AVALIAÇÃO
Questionário de satisfação aplicado a funcionários da instituição

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?

Melhoria do portal do Senac AL com usabilidade e acessibilidade

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Melhoria do portal do Senac AL com usabilidade e acessibilidade

Ähnlich wie Melhoria do portal do Senac AL com usabilidade e acessibilidade (20)

Melhoria do portal do Senac AL com usabilidade e acessibilidade