usabilidade para web sites institucionais...explicações e previsões para fenômenos da...
Post on 02-Jan-2021
6 Views
Preview:
TRANSCRIPT
UNIVERSIDADE FEDERAL DE PERNAMBUCO CENTRO ACADÊMICO DO AGRESTE
NÚCLEO DE DESIGN CURSO DE DESIGN
Usabilidade para Web Sites Institucionais
Estudo de caso do web site Estúdio 8bits.
THIAGO BEZERRA REGIS DE CARVALHO
Caruaru, 2016
THIAGO BEZERRA REGIS DE CARVALHO
Usabilidade para Web Sites Institucionais Estudo de caso do web site Estúdio 8bits.
Monografia apresentada, como pré-requisito para a conclusão do curso de Design, da Universidade Federal de Pernambuco, orientada pelo Prof. M. Sc. Fábio Caparica.
Caruaru, 2016
Catalogação na fonte: Bibliotecária – Simone Xavier CRB/4 - 1242
C331u Carvalho, Thiago Bezerra Regis de.
Usabilidade para Web sites institucionais: estudo de caso do web site Estúdio 8bits. / Thiago Bezerra Regis de Carvalho. – 2016.
58f. il. ; 30 cm. Orientador: Fábio Caparica de Luna Monografia (Trabalho de Conclusão de Curso) – Universidade Federal de
Pernambuco, CAA, Design, 2016. Inclui Referências. 1. Usabilidade. 2. Interfaces de usuário (Sistema de computador). 3. Sites da web -
Avaliação. I. Luna, Fábio Caparica de (Orientador). II. Título.
740 CDD (23. ed.) UFPE (CAA 2016-240)
UNIVERSIDADE FEDERAL DE PERNAMBUCO CENTRO ACADÊMICO DO AGRESTE
NÚCLEO DE DESIGN E COMUNICAÇÃO
PARECER DE COMISSÃO EXAMINADORA DE DEFESA DE PROJETO DE GRADUAÇÃO EM DESIGN DE
Thiago Bezerra Regis de Carvalho
“Usabilidade para Web Sites Institucionais:
Estudo de caso do web site Estúdio 8bits
A comissão examinadora, composta pelos membros abaixo , sob a presidência do primeiro, considera o aluno Thiago Bezerra Regis de Carvalho, APROVADO.
Caruaru, 23 de Agosto de 2016
Fábio Caparica de Luna
(SIAPE: 2155032)
Marcela Fernanda de C. G. F. Bezerra
(SIAPE: 1765000)
Marcos Buccini Pio Ribeiro
(SIAPE: 2377598)
Aos meus pais e minha irmã.
Agradeço a meu orientador, Fábio Caparica, pela paciência e a Safira Rosa, que me ajudou de todas
as formas possíveis durante todo o processo.
“A tecnologia deveria trazer mais as nossas vidas do que o desempenho aperfeiçoado de tarefas.”
(DONALD NORMAN)
RESUMO
Este trabalho descreve a pesquisa realizada para avaliar a usabilidade no web site institucional do escritório de design Estúdio 8bits, no intuito de identificar deficiências/problemas e então propor melhorias baseadas em dados coletados junto aos usuários finais. Inicialmente foi construído um referencial teórico abordando a fundamentação do design como interface, usabilidade e design centrado no usuário. Em seguida a investigação foi conduzida através de observações de uso e questionários aplicados com usuários, que opinaram sobre a experiência e satisfação de uso do web site. Os resultados indicaram problemas de usabilidade relacionados com a navegação, falta de interatividade, inconsistência entre elementos da interface e falta de chamadas de ação. A partir destes problemas identificados e com base na fundamentação teórica, foram propostas soluções de design aplicadas e uma interface remodelada.
Palavras-chave
Usabilidade, interface web, design centrado no usuário
ABSTRACT
This paper describes the research conducted to evaluate usability in the institutional web site Studio 8bit design office in order to identify gaps / problems and then propose improvements based on data collected from the end users. a theoretical framework addressing the rationale design as interface, usability and user-centered design was initially built. Then the investigation was conducted through the use of observations and questionnaires with users that say about the experience and website use of satisfaction. The results indicated usability problems related to navigation, lack of interactivity, inconsistency between interface elements and lack of action calls. From these problems identified and based on theoretical foundation, it has been proposed applied design solutions and a redesigned interface. Key-words
Usability, web interface, user centered design
LISTA DE FIGURAS
Figura 1 - Diagrama ontológico do design ................................................................. 15
Figura 2 - Crescimento da internet no Brasil ............................................................. 17
Figura 3 - Número de web sites na internet............................................................... 20
Figura 4 - Ferramenta de monitoramento de acessos (Google Analytics) ................ 27
Figura 5 - Resultados do Google Analytics ............................................................... 30
Figura 6 - Gráfico mensal de páginas / sessão ......................................................... 30
Figura 7 - Gráfico mensal de duração média da sessão ........................................... 31
Figura 8 - Gráfico mensal de taxa de rejeição ........................................................... 32
Figura 9 – Opções de múltipla escolha. .................................................................... 34
Figura 10 - Panorama geral sobre o questionário de clientes ................................... 35
Figura 11 - Complexidade do web site no questionário de clientes........................... 36
Figura 12 - Facilidade em encontrar informações no questionário de clientes .......... 36
Figura 13 - Interface no questionário de clientes ....................................................... 37
Figura 14 - Organização de informações no questionário de clientes ....................... 37
Figura 15 - Panorama geral sobre o questionário de especialistas ........................... 38
Figura 16 - Complexidade do web site no questionário de especialistas .................. 39
Figura 17 - Facilidade em encontrar informações no questionário de especialistas . 39
Figura 18 - Interface no questionário de especialistas .............................................. 40
Figura 19 - Organização de informações no questionário de especialistas .............. 40
Figura 20 - Topo da nova interface ........................................................................... 44
Figura 21 - Apresentação textual da empresa........................................................... 45
Figura 22 - Detalhe de carregamento de vídeo ......................................................... 46
Figura 23 - Área de portfólio ...................................................................................... 47
Figura 24 - Detalhes do portfólio ............................................................................... 48
Figura 25 - Área de clientes e rodapé ....................................................................... 49
Figura 26 - Solução proposta completa ..................................................................... 50
LISTA DE QUADROS
Quadro 1 - Lista de tarefas propostas ....................................................................... 33
Quadro 2 - Questionário para teste de usabilidade ................................................... 34
Quadro 3 - Relação entre problemas e soluções de design ...................................... 42
SUMÁRIO
1. INTRODUÇÃO ...................................................................................................... 13
2. DESIGN................................................................................................................. 15
3. Usabilidade para Web Sites .................................................................................. 16
3.1 Principais problemas de usabilidade. ............................................................... 19
3.2 Recomendações de usabilidade ...................................................................... 21
3.3 Design Centrado no Usuário ............................................................................ 23
4. Avaliações de Usabilidade .................................................................................... 25
4.1 Observação indireta ......................................................................................... 27
4.2 Questionários ................................................................................................... 28
5. Coleta de dados .................................................................................................... 29
5.1 Observação indireta ......................................................................................... 29
5.1.1 Resultados da observação indireta ............................................................ 30
5.2 Aplicação de questionários .............................................................................. 33
5.2.1 Resultados do questionário para clientes .................................................. 35
5.2.2 Questionário para especialistas ................................................................. 38
5.3 Problemas de usabilidade encontrados ........................................................... 41
6. Resultados ............................................................................................................ 42
7. Conclusão ............................................................................................................. 52
REFERÊNCIAS ......................................................................................................... 53
ANEXO 1 ................................................................................................................... 56
APÊNDICE A ............................................................................................................. 57
APÊNDICE B ............................................................................................................. 58
13
1. INTRODUÇÃO
Normalmente associado às áreas técnicas de desenvolvimento de software, o termo
usabilidade se refere às várias interações resultantes do processo de execução de
tarefas de um usuário em um determinado sistema (NIELSEN; LORANGER, 2007).
Baseando-se em aspectos como a facilidade em aprender a utilização do sistema, a
eficiência do mesmo na realização das tarefas desejadas e a satisfação dos usuários
durante o uso (para citar alguns) é possível determinar e classificar a qualidade das
interações entre sistemas e usuários, e essa é a motivação central dos estudos em
usabilidade, dentro da área de Interação Humano-Computador (IHC), possibilitando
não só a identificação de erros e problemas de design, como também levantando
possíveis soluções e abordagens para os mesmos.
Segundo a Association for Computing Machinery Special Interest Group on Computer-
Human Interaction - ACM SIGCHI (1992), a área de IHC abrange a concepção,
avaliação e implementação de sistemas de computador interativos para utilização
humana, e o estudo das principais questões relacionadas a estes sistemas,
apresentando assim o objetivo de fornecer aos pesquisadores e desenvolvedores
explicações e previsões para fenômenos da interação entre usuários sistemas
(FREITAS; DUTRA, 2009).
Dessa forma, fundamentar e estabelecer critérios básicos para a análise de
usabilidade em websites é de fundamental importância, visto a facilidade cada vez
maior em desenvolver tais páginas, muitas vezes não sendo necessário um
conhecimento prévio em desenvolvimento de software, possibilitando que designers
implementem soluções cada vez mais complexas de forma autônoma. Essa
fundamentação não só será parte integrante dos requisitos de projeto que
acompanharão todo o processo de design, como também será revisitada ao final da
implementação na forma de testes com usuários, conduzidos sistematicamente afim
de confirmar a eficiência e eficácia da solução em uma situação de uso real. Também
é importante frisar que testes de usabilidade podem ser aplicados em páginas já
existentes e implementadas. Nesse caso os resultados poderão ser apresentados em
um material descritivo que liste os principais problemas encontrados na utilização do
14
sistema e recomendações baseadas na fundamentação e princípios de usabilidade
em software.
Testes de usabilidade visam levantar dados reais de uso em situações corriqueiras e
cotidianas (FREITAS; DUTRA, 2009). Também é importante garantir que a aplicação
dos testes abranja a maior diversidade de público interessado possível. Nesse estudo,
se tratando em um website corporativo que visa a apresentação de serviços,
portfólios, cultura, missão, visão e valores da empresa para clientes, estudantes e
outros agentes do mercado, se faz necessário aplicar tais teste com indivíduos te
todos esses segmentos, respeitando suas capacidades técnicas e interesses.
Portanto, se estabelece como objetivo geral desse trabalho avaliar a usabilidade do
website do Estúdio 8bits – disponível em http://8bits.cc (ANEXO 1) – afim de
identificar, junto aos públicos-alvo envolvidos, a eficácia e eficiência deste em
apresentar suas informações de forma clara e satisfatória, além de analisar a
satisfação dos usuários e sua experiência nas páginas já publicadas. A partir das
observações feitas (capítulo 5), foram sugeridas alterações (capítulo 6) na interface
do web site (ANEXO 1).
São objetivos específicos:
• Levantar os principais problemas de usabilidade do objeto de estudo;
• Escolher a ferramenta de coleta de dados para o estudo de caso;
• Listar os requisitos que devem ser melhorados no objeto de estudo;
• Apresentar uma nova interface baseada nos resultados da coleta de dados.
Como técnicas de coleta de dados foram aplicados dois questionários, visando
públicos diferentes, onde foram levantadas demandas e dificuldades de clientes e
profissionais do mercado de comunicação, conforme descrito do item 5.2.
Paralelamente, foi realizada uma observação indireta, feita a partir de métricas
analíticas coletadas por intermédio do softwares Google Analytics, afim de fornecer
dados quantitativos relativos ao uso em durante o período de janeiro a maio de 2016.
Apesar de se tratar de uma web site simples e enxuto, os resultados apresentaram
problemas e dificuldades relacionadas à usabilidade e satisfação dos usuários durante
o uso (capítulo 6). Os problemas identificados foram transformados em uma lista que
15
requisitos projetuais para mudanças na interface. A partir dos requisitos foram
levantadas soluções, que por sua vez foram aplicadas e resultaram em novas telas
para o web site, propostas ao fim desse trabalho.
2. DESIGN
Villas-Boas (1999) aponta duas habilitações básicas para o design. De um lado estaria
a programação visual, englobando o design gráfico, de interfaces e informacional,
enquanto do outro lado estaria o projeto de produto, com as suas próprias subdivisões.
Segundo Bonsiepe (1997) a visão do design como pura cosmética é resultante da
tentativa de captar esse fenômeno utilizando categorias inadequadas, propondo
assim, o diagrama ontológico do design (figura 01).
Em vez de atribuir ao design a função de fazer envoltórios bonitos para
produtos e mensagens, podemos usar um esquema mais
esclarecedor: o diagrama ontológico do design (BONSIEPE, 1997).
Figura 1 - Diagrama ontológico do design
Fonte: ilustração do autor (2016) com base em Bonsiepe (1997)
16
Esse diagrama é composto por três pontos principais, o usuário, a ferramenta e a
ação, unidos por uma categoria central, a interface. Desse modo temos:
• Usuário, que tem a necessidade de realizar uma determinada tarefa (ação
efetiva);
• Ferramenta ou artefato de que o usuário precisa para realizar efetivamente uma
função (uma faca, batom ou copo);
• A tarefa ou ação que o usuário quer cumprir.
Tendo esses elementos em mente devemos nos perguntar como uma ferramenta
(tanto na forma de objetos - ação instrumental - quanto informação, no caso de ações
comunicativas) usuários e ações a serem realizadas podem ser acoplados uns aos
outros. A resposta para essa pergunta é: através da interface. Essa não pode ser
considerada uma coisa, mas sim o espaço no qual se estrutura a interação entre corpo
(usuário), ferramenta (objeto ou signo) e ação objetiva, sendo exatamente esse o
domínio central do design (BONSIEPE, 1997).
A interface revela o caráter de ferramenta dos objetos e o conteúdo
comunicativo das informações. A interface transforma objetos em
produtos. A interface transforma sinais em informação interpretável
(BONSIEPE, 1997).
Através do diagrama, pode-se entender que o design resulta a interação entre todas
as suas partes de forma irredutível e não linear [...] (SANT’ANNA, 2013).
3. Usabilidade para Web Sites
A popularização tecnológica que possibilita a grande aderência de pessoas no meio
digital tornou inevitável o contato com plataformas digitais e a interação com máquinas
na forma de software. Essa interação entre pessoas e software é estudada pela área
de IHC (apresentada anteriormente), que visa explicar e difundir as práticas e modelos
mais eficazes e eficientes ao se projetar interfaces de interação por meio do design.
Uma das subáreas da IHC é a usabilidade. Esse termo se refere ao uso de
ferramentas e interfaces de forma qualitativa, ou seja, a qualidade do uso e do que é
17
usado, procurando garantir o funcionamento mais adequado dos sistemas, visando
seus objetivos específicos, de forma a ajudar seus usuários a desempenhar funções.
Conforme visto anteriormente, a interface corresponde ao ponto central responsável
por ligar o produto, físico ou virtual, o usuário e um conjunto de ações ou
funcionalidade. Ela é tanto o meio quanto a ferramenta que fornece os recursos para
a comunicação entre essas três pontas.
Segundo dados do Google (figura 2), em 1992 apenas 0,1% da população brasileira
tinha acesso à internet. Em 2014 esse número já havia crescido para 57,6%.
Figura 2 - Crescimento da internet no Brasil
Fonte: www.google.com.br/publicdata/directory (2015)
Esse crescimento acelerado mudou os paradigmas referentes à usabilidade em
sistemas digitais, antes restritos à softwares executáveis. A alta adesão à internet nos
seus primeiros anos de abertura comercial possibilitou que as empresas passassem,
não só a mostrar suas informações de alta relevância na rede, como também
provessem seus serviços de forma completamente digital e em rede, visto alguns
serviços bancários.
18
Nesse novo cenário, questões de usabilidade em software foram estendidas ao
mundo online. Dessa forma, a usabilidade web preocupa-se com interface desses
sistemas em rede, da forma como são desenvolvidas, como se apresentam e como
desempenham suas funções de forma prática, autoexplicativa, com o máximo de
eficiência e eficácia, sempre visando experiência do usuário.
Tratando-se de eficácia, podemos considerar um web site eficaz quando sua função
estética e prática permitem o usuário atinja seus objetivos. Se consegue ou não
satisfazer as necessidades que motivaram o acesso. Assim, para garantir uma melhor
experiência de uso, o web site deve ser antes de tudo eficaz. A eficiência pode ser
medida por indicadores quantitativos, geralmente referentes ao tempo de acesso ou
número de cliques necessários para realizar uma tarefa ou como os erros, e suas
soluções, são tratados.
A satisfação de uso está diretamente relacionada aos níveis do design apresentados
por Norman (2008), principalmente o comportamental. Esse diz respeito ao uso dos
artefatos.
“O design comportamental diz respeito ao uso. A aparência realmente não importa. O
raciocínio lógico não importa. O desempenho importa.” (NORMAN, 2008, p. 92).
Embora o funcionamento e desempenho sejam os principais pontos referentes à
eficácia e eficiência, o conjunto de todas as funções do design determinam o sucesso
ou fracasso de um artefato, seja material ou imaterial.
Segundo Nielsen (1994), cinco atributos devem ser observados para que uma
interface de web site apresente boa usabilidade. Caso ocorram falhas em alguma
delas, a interface deve ser repensada:
• Facilidade de aprendizado: qualquer web site deve ser projetado de forma a
permitir que seus usuários aprendam sua utilização e possam, em pouco
tempo, atingir um nível de alto desempenho em suas ações. Esse fator
determina, primeiramente, a taxa de rejeição. Também é um fator decisivo para
a continuidade na utilização, visto que não obtendo sucesso em suas tarefas
por inabilidade com o web site, o usuário irá buscar outras formas ou fontes
para essa resolução.
19
• Eficiência: esse ponto está ligado principalmente à produtividade do usuário,
uma vez passada a fase de aprendizado e adaptação ao web site.
• Satisfação: é a avaliação qualitativa referente à utilização do web site. Embora
a satisfação esteja intimamente ligada ao desempenho, fatores estéticos e
simbólicos claramente influenciam esse tópico.
• Facilidade de memorização: muito relacionada ao primeiro atributo (facilidade
de aprendizado), esse diz respeito à facilidade do usuário em realizar ações
após passar um tempo sem utilizar o web site. Deve ser observado como a
eficiência do usuário é afetada a medida que os períodos de uso se tornam
mais espaçados. Como regra geral, web sites mais fáceis de aprender também
são mais fáceis de memorizar, apresentando melhores indicadores após
períodos de não uso.
• Taxas de erros: pode ser considerado um erro qualquer ação que não auxilie o
usuário ou não atinja os objetivos esperados. Web sites com baixas taxas de
erros geram menos transtornos o decorrer da sua utilização e contribuem para
a satisfação e experiência do usuário.
Dessa forma pode-se observar que ao projetar um web site o designer não pode
levar em consideração apenas fatores gráficos ou referentes ao sistema e seu
desenvolvimento, mas principalmente, deve considerar os fatores humanos
envolvidos na sua utilização, tanto inicial quanto a longo prazo. Esses fatores serão
extremamente importantes para o seu sucesso.
3.1 Principais problemas de usabilidade.
Segundo a Internet Live Stats (2015), o número de sites no mundo, até 2014, era de
968,882,453 (figura 3). Esse número deve superar um milhão ao final de 2015. No
entanto, esse grande número traz um problema muito recorrente: a falta de
adequação aos padrões e recomendações de usabilidade.
20
Figura 3 - Número de web sites na internet
Fonte: www.internetlivestats.com/total-number-of-websites (2015)
O principal motivo é a falta de cuidado, pelos agentes responsáveis por projetar e
desenvolver os web sites e outras aplicações web, em conceber designs focados na
facilidade e uso intuitivo, apresentando uma ótima usabilidade (design centrado no
usuário). O usuário e suas necessidades estão no centro do processo criativo, e todas
as funções estéticas, práticas e simbólicas devem se adequar ao seu escopo.
Segundo Nielsen (1994) os problemas de usabilidade mais recorrentes e facilmente
encontrados em web sites são:
• Deficiência na navegação: muitas vezes o web site não possui uma estrutura
de links e menus suficientes para uma boa navegação. Isso ocorre quando
esses links são inexistentes, estão quebrados, ou seja, não levam às páginas
que deveriam, ou estão posicionados na página de uma forma que dificulte sua
localização ou identificação enquanto recurso de navegação.
• Recursos multimídia em excesso: o uso de animações, pop-ups e transições
em excesso podem tirar a atenção do foco principal da grande partes dos web
sites, seu conteúdo. Outros problemas, como erros na escolha das tipografias
e cores utilizadas também podem dificultar a navegação.
• Incompatibilidade: a navegação dos web sites deve ser universal e
preferencialmente adaptável entre sistemas e plataformas. Problemas para a
renderização da página em um determinado navegador (Internet Explorer,
21
Firefox ou Chrome) ou plataforma (Windows, MacOs, iOS ou Android) podem
frustrar usuários e ser muito prejudicial à experiência de uso. Sites responsivos,
ou seja, que se adaptam ao navegador e sistema são os mais recomendados.
• Erros de conteúdo: conforme dito anteriormente, o conteúdo é a peça chave da
maioria dos web sites. No seu desenvolvimento, deve-se atentar para a
estrutura desse, organizando a informação da forma mais inteligível e simples
possível. Dessa forma, além de garantir um bom fluxo de leitura, também se
garante que usuário irá achar de forma fácil e prática as informações que
procura.
• Redundância: repetições e ocorrências das mesmas informações ou links em
áreas distintas do web site podem ocasionar confusão dificultar a facilidade de
memorização e aprendizagem. Informações e links relacionados deve aparecer
sempre agrupados.
• Inconsistência: quando ações semelhantes possuem processos execuções
muito diferentes, o web site pode apresentar problemas de inconsistência. Além
desse estar relacionado aos processos, falta de padrões visuais, como palheta
de cores, tipografias e outro elementos, também acusam o mesmo problema.
Essa falta de padronização visual e de processos dificulta a localização do
usuário dentro do sistema, sua aprendizagem e memorização do mesmo.
• Inadequação de conteúdo: o uso excessivo de vocabulário técnico para o um
público não especialista é um problema encontrado em muitos web sites.
Conforme o conceito de design centrado no usuário, não só o layout ou a
estrutura deve ser pensada de acordo com o usuário final, mas também o
conteúdo, sejam textos institucionais, apresentação de produtos, serviços ou
notícias e artigos.
3.2 Recomendações de usabilidade
Após observar a quantidade de web sites atualmente ativos na internet, fica clara a
alta disponibilidade de páginas e serviços online. Nesse cenário, o usuário encontra
uma vasta gama de opções para efetuar as mesmas ações e satisfazer as mesmas
necessidades. Segundo o Internet Live Stats (2015) o Brasil é o quinto país do mundo
com mais usuários de internet. Para esses usuários a usabilidade de um web site pode
ser determinante para sua continuidade de uso por proporcionar a melhor experiência.
22
Além dos aspectos apresentados anteriormente, existem especificações gerais que
determinam processos para garantir a boa usabilidade em web sites. O W3C (World
Wide Web Consortium), um consórcio de empresas que ratifica e estabelece padrões
para a comunicação, formatação e programação de páginas, aplicativos e
navegadores para a Internet, possui um guia de usabilidade para web sites. Nesse,
algumas características são apresentadas como fundamentais para garantir uma
experiência de uso. Entre elas, as principais são: acessibilidade e eficiência (W3C,
2015).
Acessibilidade diz respeito à capacidade do web site de disponibilizar seu conteúdo
independente do contexto e tecnologias que o usuário possui (NIELSEN, 2000). Além
do contexto tecnológico, para ser considerado acessível, um web site precisa
apresentar de forma eficiente seu conteúdo para usuários com capacidades sensoriais
e funcionais especiais. Por exemplo, web sites devem ser construídos de forma que
usuários com deficiência visual possam acessa-lo através de leitores de tela.
Dessa forma, pode-se entender que a acessibilidade vai além das funções estética e
prática dos web sites, partindo para a democratização do acesso e entrega de
conteúdos para o maior número de usuários possível, possibilitando uma melhor
experiência acima das dificuldades geralmente encontradas por esses (FREITAS;
BENJAMIN, 2004).
Durante a experiência de uso, o feedback do web site para o usuário precisa ser
constante. Deve funcionar de forma sutil, mas sempre presente, desde os efeitos de
rolagem sobre botões, até mensagens de sucesso e erro no envio de informações por
um formulário. Esse feedback constante faz com que o usuário saiba se localizar e
identificar as funções de cada elemento, além de informar sobre o sucesso de suas
ações, garantindo que os objetivos foram cumpridos (NIELSEN, 2000).
Além do feedback, a eficiência de um site pode ser medida pelo conjunto de respostas
que um web site fornece ao usuário. Esse conjunto de respostas também engloba o
tempo de carregamento, por exemplo, que influencia diretamente a experiência de
uso. Web sites que demoram muitos segundo ou até minutos para carregarem suas
informações podem apresentar um índice de rejeição muito elevado. Junto a isso,
deve-se observar o contexto mobile como de grande importância, visto que aparelhos
móveis com acesso a internet como smarthphones e tables contarão muitas vezes
23
apenas com conexões de dados móveis, como as redes 3G, geralmente mais lenta
(W3C, 2015; NIELSEN, 2000).
Nesse contexto, não basta ter um site compatível com as plataforma mais recentes,
mas principalmente ter a eficiência como fator maior importância, visto não as
características e limitações de hardware desses dispositivos, como telas menores,
mas também suas limitações de conexão.
3.3 Design Centrado no Usuário
Além da interface, que age como plataforma, existem recursos que possibilitam o
processo comunicativo. Pode-se referir a este processo como interação e ao conjunto
de regras, que permite ao usuário interagir e realizar tarefas em um sistema, como
modelo de interação. Esse modelo determina as atividades mentais (relações
cognitivas e repertório) e físicas (ações) que o usuário deve desempenhar, além do
conjunto de funcionalidades e protocolos que o software, na forma de um web site,
deve possuir para receber, processar ou interpretar e fornecer feedback aos usuários
(LEITE, 2002).
Esses modelos são determinados pelo tipo de interação, podendo ser representados
por formulários, listas, linhas de comandos ou outras analogias. Em web sites esses
se dão, na maioria das vezes por menus de navegação, botões, formulários de
preenchimento e campos de seleção, além de outros elementos que, muitas vezes,
compõem as páginas, como banners publicitários e mídias incorporadas.
Dessa forma, esses modelos determina o conjunto de regras e funções que ficará
disponível aos usuários e guiam a experiência de uso por meio da interação.
Durante as etapas criativas de construção dos web sites, as atenções e esforços
devem estar direcionados ao usuário. Entender seu contexto, o que almeja, suas
necessidades, dificuldades e limitações, além das suas potencialidades está no centro
o que se define como design centrado no usuário (FERREIRA, 2015).
Dessa forma, uma interface só será considerada como adequada ou bem-sucedida
enquanto der suporte, dentro de contexto, aos objetivos dos usuários a que se
destinam, sempre levando em consideração suas características. Essas
características podem ser obtidas através da aplicação de ferramentas de pesquisa,
24
como grupos focais, questionários e entrevistas. A partir desses dados pode-se
elaborar um modelo de interação com os pontos mais importantes ou de caráter crítico
para os usuários, apresentando uma estrutura lógica de navegação e organização dos
conteúdos (WEB USABILITY CHECKLIST, 2015; RUBIN,1994).
Para RUBIN (1994), os três princípios básicos do Design Centrado no Usuário são:
• O foco deve estar sempre no usuário e na sua tarefa. Isto significa mais do que
identificar e categorizar usuários. O processo implica contato direto entre
usuários e a equipe de design durante todo o período de vida do produto. O
objetivo é coletar informações sobre clientes de modo sistemático e
estruturado.
• A utilização do produto deve ser mensurada empiricamente. A ênfase deve
estar direcionada à coleta de dados comportamentais sobre facilidade de
aprendizado e uso, com usuários reais do produto.
• O produto deve ser desenhado, modificado e testado repetidamente. O
verdadeiro processo determina a possibilidade de repensar o conceito do
projeto, através de testes de modelos conceituais. Não mudanças apenas
cosméticas, mas alterações profundas na própria formulação do produto.
Após o levantamento de dados e prototipagem do web site, novas ferramentas devem
ser aplicadas para conferir, na prática, os resultados do processo. Caso haja falhas
não sanadas ou novas dificuldades apareçam, essas devem ser listadas como novos
requisitos projetuais e o processo criativo deve ser reiniciado.
Como característica intrínseca à interface, o planejamento visual também é parte
importante do planejamento e desenvolvimento de um web site. É importante que o
mesmo se apresente atraente e esteja em conformidade com a identidade visual da
empresa. Apesar dessa importância, o design de interface não possui, sozinho, os
argumentos e características necessárias para manter o usuário. Deve haver um
equilíbrio e integração entre usabilidade, design e interface.
Dessa forma, pode-se verificar a importância da usabilidade desde as primeiras
etapas do processo criativo no desenvolvimento de web sites. Apesar disso, muitas
vezes, encontramos páginas na web que não seguem total ou parcialmente, os
25
princípios apresentados, dificultando ou até impedindo os usuários de realizarem as
ações durante a navegação. Problemas como esses não só afastam os usuários,
causando o insucesso do web site, como também podem causar danos maiores à
imagem das empresas responsáveis.
4. Avaliações de Usabilidade
Visto anteriormente que o design deve estar sempre centrado nas questões dos
usuários, sejam suas capacidades operacionais, experiência prévia, emoção e outros
fatores reflexivos ou aspirações, além da necessidade de se testar repetidamente as
ideias executadas afim de obter validações ou direcionamentos (RUBIN, 1994),
estabelecer diretrizes acerca de como se avaliar projetos de design com usuários reais
se faz necessário para o sucesso efetivo dos artefatos, sejam físicos ou digitais.
Identificar objetivos de usabilidade e da experiência do usuário é
essencial para fazer com que cada produto seja bem-sucedido, e isso
exige entender as necessidades dos usuários. O papel da avaliação é
garantir que esse entendimento ocorra durante todos os estágios de
desenvolvimento do produto (PREECE, 2005, p. 358).
Assim, compreendemos a avaliação como parte integrante do processo de design,
que parte do levantamento de informações, passa pela geração de alternativas e
culmina na configuração de um artefato, físico ou digital.
Há também uma tendência crescente de se observar como as pessoas
interagem com o sistema em seu trabalho, lar ou outros ambientes,
visando a obter um melhor entendimento de como o produto é (ou
será) utilizado em seu ambiente pretendido [...] essa observação
apresenta implicações na maneira como os produtos deveriam ser
projetados (PREECE, 2005, p. 339).
Existem várias técnicas para analisar artefatos e gerar dados que possam comprovar
ou não um bom design, além de fornecer informações relevantes para o seu
aprimoramento. Abaixo são apresentadas cinco categorias de técnicas descritas por
PREECE (2015).
26
• Observar usuários: As técnicas de observação ajudam a levantar
necessidades, levando a novos tipos de produtos, além de avaliar modelos e
protótipos. Essa é a forma mais simples de fazer avaliações de usabilidade, por
sua praticidade, mas interferências devem ser evitadas ao máximo para
garantir a integridade dos dados;
• Solicitar as opiniões dos usuários: Perguntar aos usuários o que eles acham
de um sistema também é uma forma prática de obter feedback sobre o mesmo.
O que os usuários acham do website? Eles conseguem realizar as tarefas que
desejam? Conseguem encontrar as informações que precisam? Acham
bonito? Entrariam novamente? Encontraram alguma dificuldade ao utilizá-lo?
Perguntas como essas podem ser feitas diretamente aos usuários ou público
alvo. Podem ser utilizados e-mails ou formulários on-line para obter dados de
forma mais rápida;
• Solicitar opiniões de especialistas: Essa pode ser a forma mais rápida e barata
de se obter dados sobre a usabilidade de um projeto, embora não seja a técnica
com maior eficácia. Especialistas, guiados por heurística, desempenham
tarefas simulando a execução de usuários normais. Desenvolvedores de
software geralmente utilizam essa técnica nos primeiros estágios de teste e
retornam soluções aprofundadas para os problemas encontrados;
• Testes com usuários: Comumente, a base dos testes de usabilidade consiste
em obter dados sobre o desempenho de usuários em relação a pelo menos
dois designs. Se tratando de artefatos digitais, como websites, esses testes
geralmente são executados em ambientes controlados, como laboratórios de
usabilidade, com usuários típicos realizando tarefas isoladas e muito bem
definidas. É observado o número de tentativas para se realizar uma tarefa, a
quantidade de erros durante a execução e o caminho percorrido pelo usuário
para cumprir os objetivos;
• Modelagem de desempenho das tarefas realizadas por usuários: Existem
modelos pré-definidos de interação homem-computador que podem ser
utilizados para prever relações de usabilidade em estágios iniciais dos projetos
de design, antes da confecção de modelos ou protótipos. Essa técnica pode
ser bem-sucedida em sistemas com funcionalidades limitadas.
27
4.1 Observação indireta
Nos casos em que a observação direta e participativa não for possível, por ser invasiva
ou por impossibilidade das pessoas envolvidas, pode-se utilizar a técnica de
observação indireta para levantamento de dados (PREECE, 2005).
Ferramentas automatizadas podem gerar dados absolutos ou estatísticos de uso de
um web site por maior de do registro de visitas. Ferramentas como o Google Analytics1
podem mapear dados de acessos, tempo médio de permanência de cada usuário e
taxas de cliques e conversões. Algumas, mais poderosas, podem gravar remotamente
as sessões sem que haja necessidade de ações especiais dos usuários, mantendo o
anonimato das identidades pessoais e fornecendo relatórios acerca do
posicionamento do cursor ou áreas de toque na tela. Essas ferramentas exigem um
maior nível técnico para sua implantação, mas em contrapartida fornecem um maior
detalhamento nos relatórios, além de poderem ser executadas sem interferência nas
tarefas do dia-a-dia do usuário.
Figura 4 - Ferramenta de monitoramento de acessos (Google Analytics)
Fonte: http://www.google.com/analytics (2016)
1 Google Analytic é uma ferramenta gratuita que permite a coleta automática de dados de navegação (número de visitas, tempo média de duração das visitas, usuários únicos, origem dos acessos, entre outros) de web sites, aplicativos mobile e outras aplicações digitais. Tais dados podem ser utilizados como parâmetros para fundamentar tomadas de decisões sobre tais aplicações.
28
A partir dos dados coletados, avaliadores podem reconstruir o que aconteceu em e identificam problemas de usabilidade e experiência com o usuário.
4.2 Questionários
“Os questionários constituem uma técnica bem estabelecida de coleta de dados
demográficos e de opiniões de usuários” (PREECE, 2005, p. 420). Apresentando a
vantagem de não precisar reunir os usuários em um local físico para a sua aplicação,
questionários podem conter perguntas abertas ou fechadas e oferecem resultados de
opinião.
Durante a elaboração das perguntas do questionário, devem ser observadas algumas
diretrizes (PREECE, 2005):
• As perguntas devem ser claras e específicas;
• Sempre que possível, faça perguntar fechadas e ofereça várias possibilidades
de resposta;
• Evite perguntas múltiplas e complexas;
• Quando forem utilizadas escalas, certifique-se de que a variação é apropriada
e que não se sobrepõe;
Além das diretrizes apresentadas anteriormente, é importante lembrar que o formado
das respostas deve ser posto de forma a facilitar a aplicação e respostas dos usuários.
Dias (2003) sugere parâmetros sobre o contexto de uso de questionários:
• O procedimento de coleta desse ser subjetivo;
• Os dados devem ser coletados no mundo real;
• Os usuários devem ser a fonte de opinião;
• O nível de satisfação é a medida de usabilidade adotada;
• O sistema avaliado já é um produto em utilização;
• Deve envolver usuários e estar dentro do seu contexto;
29
5. Coleta de dados
Os testes de usabilidade foram focados no principal objetivo do estudo: identificar
problemas de usabilidade no web site do Estúdio 8bits afim de, a partir dos dados
coletados, propor melhoria que torne o mesmo mais eficiente e eficaz na sua
navegação. Na busca desses resultados foram utilizadas as duas ferramentas
apresentadas no capítulo anterior, pautadas pelas diretrizes e recomendadas.
5.1 Observação indireta
Dessa forma, primeiramente foram observados dados estatísticos de uso do web site
estudado no período de janeiro a maio de 2016. Tal coleta foi possível graças à
utilização da ferramenta Google Analytics, implementada no seu desenvolvimento
inicial, que gera dados em massa sobre sua utilização. A relevância dessa observação
se dá pelo fato de apresentar dados reais de uso em um longo período de tempo,
sendo coletado de forma automática e não invasiva, refletindo com grande fidelidade
a realidade de uso o web site. Para os fins desse estudo foram observados três dados:
• Páginas / sessão: apresenta o número médio de páginas visitadas em cada
sessão do web site. Sua relevância se dá pela importância em saber se os
usuários estão encontrando conteúdo de interesse suficiente para navegar pelo
web site e em que quantidade se dá essa navegação;
• Duração média da sessão: apresenta o tempo médio de duração de cada
sessão. Com esse dado é possível identificar quanto tempo os usuários
passam utilizando o web site em cada visita. Apesar de não haver uma regra
que balize um tempo ideal, tempos muito baixos, como poucos segundos,
podem indicar problemas de usabilidade ou conteúdo;
• Taxa de rejeição: apresenta um dado percentual de usuários que fecham o web
site sem realizar nenhuma interação com o mesmo, como navegar pelas
páginas ou clicar em algum botão. Taxas de rejeição altas podem indicar
problemas de usabilidade, como falhas na navegação ou mau planejamento e
apresentação do conteúdo.
30
5.1.1 Resultados da observação indireta
Os resultados da observação dos dados de utilização do web site no período de
janeiro a maio de 2016 apresentaram os seguintes dados, calculados com base no
total de visitas que o mesmo recebeu durante todo o período.
Figura 5 - Resultados do Google Analytics
Fonte: Google Analytics (http://analytics.google.com)
5.1.1.1 Páginas por sessão O valor de páginas / sessão apresenta o valor médio de páginas acessadas em cada
visita do web site. Como mostra o gráfico da Figura 6, essa média se mantém abaixo
do valor de duas páginas por sessão2. Esse dado pode ser interpretado de duas
formar distintas. O baixo índice de páginas por sessão pode se dar por alguma
deficiência do web site em apresentar seu conteúdo de forma interessante para os
usuários, proporcionando interesse em visitar mais páginas e ver mais detalhes.
Apesar dessa percepção, o baixo índice também pode ser um reflexo da simplicidade
da arquitetura da página do objeto de estudo. Caso o usuário encontre na página
inicial as informações que busca de forma satisfatória, pode não haver necessidade
de navegação entre outras páginas. Além do índice médio de todo o período, também
podemos analisar o dado a cada mês:
Figura 6 - Gráfico mensal de páginas / sessão
2 A sessão é o período em que o usuário fica ativamente engajado com o website durante o acesso. De forma geral, a sessão pode ser entendida como um acesso ao website.
31
Fonte: Google Analytics - http://analytics.google.com (2016)
Como mostra o gráfico da Figura 7, a média de páginas acessadas apresenta uma
queda constante a partir do mês de fevereiro, chegando a maio com o índice mais
baixo de todo o período pesquisado. Essa queda constante na métrica pode ser
compreendida como um reflexo natural, já que o web site apresenta apenas conteúdos
estáticos, não possuindo uma área de notícias ou outra de atualização constante,
gerando interesse de navegação entre várias páginas no usuário.
5.1.1.2 Duração média da sessão Apesar de não haver uma forma absoluta de determinar qual o tempo ideal para a
duração das sessões do web site, podemos analisar a progressão desse dado durante
o tempo afim de verificar o comportamento do usuário durante o período de coleta das
informações. Com essa análise podemos determinar o crescimento ou perda de
interesse no conteúdo.
Figura 7 - Gráfico mensal de duração média da sessão
Fonte: Google Analytics - http://analytics.google.com (2016)
Como pode-se observar na Figura 8, a duração média das visitas apresentou um
aumento constante durante grande parte do período de coleta, chegando a mais de
dois minutos por sessão. Apesar desse aumento, verifica-se uma queda vertiginosa
no período entre março e maio, atingindo ao fim o menor índice de todo o período.
Pode-se concluir que a grande queda na duração média das sessões demonstra uma
grande perda de interesse dos usuários em relação ao web site. Tal perda pode refletir
problemas de usabilidade e principalmente problemas no dinamismo dos conteúdos
apresentados.
32
5.1.1.3 Taxa de rejeição A métrica da taxa de rejeição apresenta o percentual de usuário que, após acessar o
web site, encerra a sessão sem realizar nenhum clique na página. Esse dado pode
fornecer pistas sobre como os usuários interagem e consomem o conteúdo do web
site, uma vez que um alto índice de taxa de rejeição pode representar dificuldades
encontradas pelos usuários durante a navegação. Todavia é importante frisar que
caso o usuário encontre as informações que precisa sem a necessidade de cliques,
pode ser observada uma alta taxa de rejeição, não sendo esse um dado
necessariamente negativo.
Pode-se observar na figura 9 a evolução da taxa de rejeição durante todo o período
de coleta desse dado:
Figura 8 - Gráfico mensal de taxa de rejeição
Fonte: Google Analytics - http://analytics.google.com (2016)
Pode-se observar um aumento constante na taxa de rejeição a partir de fevereiro de
2016, tendo apenas uma leve queda entre os últimos meses da coleta. Além do
crescimento constante durante os meses, a taxa de rejeição média do período, como
apresentado anteriormente (Figura 6), superou os 87%, mostrando que grande parte
dos usuários encerra as sessões sem realizar nenhum tipo de interação com o web
site. Tendo em vista a simplicidade que o web site estudado apresenta suas
informações, um ato índice de taxa de rejeição pode ser natural, já que a maioria das
informações pode ser encontrada sem a necessidade de cliques. Junto a isso, a falta
de conteúdos dinâmicos e atualizados pode contribuir para esse alto índice.
33
5.2 Aplicação de questionários
Foram utilizados questionários para medir o índice de satisfação dos usuários finais,
categorizados em dois grupos de público:
• Clientes: composto por clientes da empresa (já usuários do web site),
empresários, diretores de marketing e outros executivos. Segundo dados
capturados pelo Google Analytics, em média 60% dos usuários desse perfil
acessam o web site pelo desktop ou notebook.
• Especialistas: composto por designers, publicitários, programadores e outros
profissionais do mercado criativo ou tecnologia. Aproximadamente 80% dos
usuários desse perfil acessam o web site através de desktops ou notebooks.
Os usuários foram expostos ao web site publicado (ANEXO I). Os questionários foram
divididos em duas partes. Na primeira, foram apresentadas quatro tarefas (Quadro 1)
ligadas às quatro áreas de conteúdo observadas no web site estudado: Apresentação
da empresa, portfólio, apresentação de clientes e área de contato. Foi solicitado aos
usuários que realizassem as tarefas anteriormente e depois respondessem às
questões apresentadas. A segunda parte do questionário consiste 13 perguntas
(Quadro 2) abordando critérios de usabilidade referentes à realização prévia das
tarefas, sendo 12 de múltipla escolha e 1 questão aberta. Esses apresentaram as
mesmas questões para ambos os grupos de público abordados, uma vez que as
questões de usabilidade são as mesmas. A intenção de abordar dois grupos
separadamente foi ter dados específicos de cada um, podendo fazer um comparativo
entre eles. Ao total foram coletadas 22 respostas, sendo 11 de cada grupo de público.
Quadro 1 - Lista de tarefas propostas
Tarefa 01 Encontre as áreas de atuação da empresa e seus serviços.
Tarefa 02 Encontre o portfólio de projetos da empresa, escolha um e veja mais detalhes.
Tarefa 03 Encontre a lista de clientes que a empresa atende.
Tarefa 04 Encontre as informações de contato da empresa e envie um e-mail com a mensagem “Teste de usabilidade” pelo formulário do web site.
Fonte: Autor (2016)
34
Quadro 2 - Questionário para teste de usabilidade
Afirmação 01 Acho que gostaria de usar este site com frequência.
Afirmação 02 Achei o site desnecessariamente complexo.
Afirmação 03 Achei o site fácil de usar.
Afirmação 04 Achei que seria necessário o apoio de um técnico para poder usar este site.
Afirmação 05 Achei este site muito inconsistente.
Afirmação 06 Imagino que a maioria das pessoas aprenderiam a usar este site rapidamente.
Afirmação 07 Eu me senti confortável com este site.
Afirmação 08 Eu preciso aprender um monte de coisas antes de continuar usando este site.
Afirmação 09 Foi fácil encontrar a informação que eu precisava.
Afirmação 10 Eu gostei de usar a interface do site.
Afirmação 11 A interface do site é agradável.
Afirmação 12 A organização de informações na tela do site é clara.
Questão 01 Você tem alguma sugestão para tornar esse site melhor?
Durante a aplicação foram apresentadas 12 afirmações (Quadro 2) referentes à
satisfação dos usuários perante a experiência de utilização e realização das tarefas
propostas. Para cada afirmação foram dadas cinco opções de múltipla escolha,
referente a “Concordo totalmente”, conforme mostra a Figura 5.
Figura 9 – Opções de múltipla escolha.
Fonte: www.docs.google.com (2016)
Tal escala, denominada Escala de Likert, foi escolhida observando-se os parâmetros apresentados por Preece (2005), que sugere a inclusão de uma opção neutra para questionamentos referentes à opinião dos usuários, além de uma progressão lógica de números, onde o menor representa discordância total e o maior, discordância total.
35
5.2.1 Resultados do questionário para clientes
O questionário para clientes apresenta resultados específicos referentes à satisfação
durante a utilização e realização de tarefas no web site. Tais resultados foram obtidos
após a realização das quatro tarefas apresentadas anteriormente.
Figura 10 - Panorama geral sobre o questionário de clientes
Fonte: Autor (2016)
Os dados apresentados na Figura 10 mostram que a maioria dos usuários teve uma
experiência positiva durante a realização das tarefas e utilização do web site. Apenas
2% dos usuários indicaram problemas, como inconsistências e alta complexidade na
navegação. Para entender de forma mais aprofundada a relação de usabilidade que
os usuários tiveram durante a aplicação do questionário foram selecionados quatro
resultados específicos para serem discutidos com mais profundidade. Os resultados
escolhidos refletem de forma geral os resultados totais da pesquisa. As exibições
detalhadas de todos os gráficos das questões individuais do questionário de clientes
são apresentadas no APÊNDICE A.
36
Figura 11 - Complexidade do web site no questionário de clientes
Fonte: Autor (2016)
Como mostra a Figura 11, mais de 80% dos usuários discordam que o web site seja
desnecessariamente complexo. Esse dado reflete a facilidade em aprender a
utilização do mesmo além da facilidade durante o uso.
Figura 12 - Facilidade em encontrar informações no questionário de clientes
Fonte: Autor (2016)
No quesito referente à facilidade em encontrar as informações que buscavam, mais
de 80% dos usuários concordam totalmente que essa tarefa foi fácil. Ainda assim, o
restante dos usuários participantes não relatou problemas graves durante a realização
das tarefas.
37
Figura 13 - Interface no questionário de clientes
Fonte: Autor (2016)
Questionados sobre a interface, mais de 50% dos usuários concordam totalmente que
esta seja agradável. Embora grande parte concorde com esta afirmação,
aproximadamente 45% dos usuários relataram problemas na interface.
Figura 14 - Organização de informações no questionário de clientes
Fonte: Autor (2016)
Sobre a organização das informações do web site, mais de 70% dos usuários
concorda totalmente que seja clara. Embora o alto índice de aprovação, mais de 25%
dos usuários indicou algum tipo de problema nessa organização.
38
Referente às sugestões fornecidas pelos usuários na última pergunta do questionário
(Quadro 2), foi levantada a falta de conteúdo dinâmico, como uma página de notícias
ou blog, que não torna o web site interessante para visitas recorrentes.
Ao fim da análise dos dados percentuais colhidos nos questionários direcionados ao
público-alvo clientes, podemos afirmar que, de forma geral o site apresenta uma boa
usabilidade, atendendo aos critérios estabelecidos anteriormente neste trabalho.
Contudo, uma quantidade expressiva de usuários relatou problemas de usabilidade
em algum nível.
5.2.2 Questionário para especialistas
Assim como o questionário para clientes, o questionário para especialistas foi aplicado
com 11 usuários, visando identificar características da usabilidade do web site
referente a esse público-alvo. Os resultados obtidos são apresentados a seguir:
Figura 15 - Panorama geral sobre o questionário de especialistas
Fonte: Autor (2016)
Os resultados mostram grande similaridade com os apresentados no item anterior,
porém possui uma grande diferença em relação a um ponto em especial, a primeira
39
afirmação do questionário (Quadro 2). Nesse caso, grande parte dos usuários afirmou
não ter interesse em visitar com frequência o web site estudado. Nas demais
questões, os resultados apresentaram grande similaridade. Como na análise do grupo
anterior, serão abordados quatro tópicos, sendo apresentado no APÊNDICE B a
listagem completa de gráficos de resultados do questionário.
Figura 16 - Complexidade do web site no questionário de especialistas
Fonte: Autor (2016)
Questionados sobre a complexidade do web site, mais de 60% dos usuários discorda
totalmente que o mesmo seja desnecessariamente complexo. Embora este número
represente a maioria dos usuários, aproximadamente 35% dos usuários reportaram
problemas de usabilidade relativos à complexidade durante o uso.
Figura 17 - Facilidade em encontrar informações no questionário de especialistas
40
Fonte: Autor (2016)
No quesito referente à facilidade em encontrar as informações que buscavam, mais
de 90% dos usuários concordam totalmente que essa tarefa foi fácil. Ainda assim, o
restante dos usuários participantes não relatou problemas graves durante a realização
das tarefas.
Figura 18 - Interface no questionário de especialistas
Fonte: Autor (2016)
Questionados sobre a interface, mais de 60% dos usuários concordam totalmente que
esta seja agradável. O restante dos usuários relatou poucos problemas em relação à
interface.
Figura 19 - Organização de informações no questionário de especialistas
41
Fonte: Autor (2016)
Sobre a organização das informações do web site, mais de 90% dos usuários
concorda totalmente que seja clara. O restante dos usuários não relatou problemas
graves na organização das informações.
Referente às sugestões fornecidas pelos usuários na última pergunta do questionário
(Quadro 2), foram levantados quatro principais problemas, listados a seguir:
• O menu de navegação do web site não possui elementos interativos que
identifiquem suas áreas;
• O topo do site não possui dinamismo;
• Falta um padrão para os títulos das áreas;
• O portfólio do web site direciona o usuário para páginas de terceiros;
5.3 Problemas de usabilidade encontrados
Após analisar os dados coletados anteriormente, por meio da observação de métricas
analíticas referentes à utilização do web site por vários meses e a aplicação de
questionários de usabilidade visando estabelecer o nível de satisfação de uso do
público-alvo (clientes e especialistas), foram listados os principais problemas de
usabilidade encontrados no web site do Estúdio 8bits, afim que se estabelecer os
parâmetros a serem trabalhados na conclusão desse trabalho. Essa lista é
apresentada a seguir:
• O conteúdo do web site não possui chamadas para ação, o que contribui para
o baixo índice de páginas visitadas por sessão e alta taxa de rejeição;
• O web site não possui um descritivo detalhado da empresa, não apresentando
ao usuário uma quantidade suficiente de informações sobre a mesma;
• O menu de navegação apresenta pouco destaque para a área atual em que o
usuário se encontra, não apresentando um feedback claro ao usuário;
• O web site não possui exibição própria para os detalhes do portfólio, sendo
necessário que o usuário seja redirecionado para outro web site, não
apresentando consistência durante a navegação;
42
• O web site apresenta inconsistências entre os títulos das suas áreas, trazendo
inconsistência à página;
• Falta dinamismo no topo do web site, não apresentando funcionalidades ou
ações de clique que instiguem os usuários a interagir de forma ativa;
• O web site apresenta algumas inconsistências quanto ao padrão cromático
utilizado entre as áreas;
• O efeito de passagem de mouse dos portfólios não convida o usuário à
interação por não apresentar botões e legendas claras;
• A área de clientes do web site não possui nenhuma forma de interatividade.
Os problemas de usabilidade listados acima refletem as carência e dificuldades
observadas durante a coleta de dados e apresentadas anteriormente. Tais problemas
são a síntese das métricas observados e do feedback passado pelos usuários após a
realização das tarefas (Quadro 2).
6. Resultados
Apesar de se tratar um web site enxuto na sua formatação, e julgado de simples
navegação e fácil aprendizado pelos usuários consultados, após o levantamento das
métricas de uso e da aplicação de testes de usabilidade, foram levantados diversos
problemas de usabilidade que refletem os baixos índices de retenção de público e alta
taxa de rejeição apresentadas anteriormente.
A partir da listagem desses problemas foi possível sugerir mudanças pontuais para o
design do web site que visam sua melhor configuração, afim que garantir uma melhor
experiência e maior satisfação de uso. As soluções propostas são apresentadas no
Quadro 3.
Quadro 3 - Relação entre problemas e soluções de design
Problema encontrado Proposta de solução
43
O conteúdo do web site não possui
chamadas para ação, o que contribui para o
baixo índice de páginas visitadas por sessão
e alta taxa de rejeição.
O web site deverá contar com chamadas de
ação “leia mais” e “saiba mais” em áreas
onde os conteúdos são apresentados de
forma resumida, tornando-os mais
convidativos à interação.
O web site não possui um descritivo
detalhado da empresa, não apresentando ao
usuário uma quantidade suficiente de
informações sobre a mesma.
Incluir um descritivo mais detalhado sobre a
empresa, para que os usuários tenham mais
informações relevantes sobre a mesma, de
forma fácil e precisa.
O menu de navegação apresenta pouco
destaque para a área atual em que o usuário
se encontra, não apresentando um feedback
claro ao usuário.
Incluir um destaque maior para a área ativa
no menu de navegação do web site, além de
fornecer um feedback mais claro ao usuários
quando o mouse passar sobre os itens do
mesmo.
O web site não possui exibição própria para
os detalhes do portfólio, sendo necessário
que o usuário seja redirecionado para outro
web site, não apresentando consistência
durante a navegação.
Incluir páginas detalhadas para os itens de
portfólios, evitando que os usuários sejam
redirecionados para outras páginas.
O web site apresenta inconsistências entre
os títulos das suas áreas, trazendo
inconsistência à página.
Unificar a formatação para os títulos das
áreas, visando tornar a interface mais
consistente.
A área de clientes do web site não possui
interatividade ativa.
Incluir controles ou efeitos de rolagem para
a exibição de clientes.
O web site apresenta algumas
inconsistências quanto ao padrão cromático
utilizado entre as áreas;
Definir um padrão cromático para o topo e o
rodapé do web site, apresentando mais
consistência na interface.
O efeito de passagem de mouse dos
portfólios não convida o usuário à interação
por não apresentar botões e legendas
claras.
Acrescentar um efeito de passagem de
mouse para a área de clientes, tornando-a
mais interativa.
Após a definição dos novos requisitos a partir dos problemas de usabilidade
encontrados foram propostas novas telas para a interface do web site.
44
Visando manter a simplicidade da navegação, o fácil aprendizado e a eficiência em se
encontrar informações de forma fácil, as modificações foram propostas mantendo a
construção do web site em uma página única.
Figura 20 - Topo da nova interface
Fonte: Autor (2016)
No recorte acima (Figura 20) pode-se verificar as mudanças propostas para o topo do
site, incluindo o menu de navegação e o banner de destaque. As cores dos itens de
menu inativos foram escurecidas, enquanto o item ativo apresenta brilho máximo na
cor branca, se destacando também em relação à cor de fundo. Para tornar a locação
do usuário dentro do web site mais clara e evitar problemas de navegação, uma
marcação, também branca é apresentada abaixo do item de menu ativo no momento.
O banner de destaque, mantido no topo do web site, apresenta controles para o
carrossel de imagens, trazendo uma opção de interação com a página.
45
Figura 21 - Apresentação textual da empresa
Fonte: Autor (2016)
Segundo o fluxo de navegação, a apresentação textual da empresa agora conta com
um botão de chamada para ação “conheça mais”. Como redundância foi utilizado o
símbolo de play, indicando que uma mídia será carregada. Além de ser um elemento
convidativo à interação por parte do usuário, essa também foi a solução dada para
apresentar de forma mais detalhada informações da empresa. Tocando um vídeo, o
web site mantem a atenção do usuário, entregando mais conteúdo de forma simples
e direta, aumentando positivamente a duração da sessão e diminuindo a taxa de
rejeição. O carregamento da mídia sobrepõe as informações do web site, será
apresentado a seguir.
Além da inclusão do novo botão, os títulos das áreas sofreram alterações, buscando
maior consistência na utilização do web site. A família tipográfica, tamanho e
alinhamento foram unificadas entre todos. O alinhamento, cores e tamanhos dos itens
da área “serviços” também foram alterados, visando um melhor aproveitamento da
página e maior contraste entre os blocos de conteúdo.
46
Figura 22 - Detalhe de carregamento de vídeo
Fonte: Autor (2016)
Conforme mostra a Figura 22, o carregamento da mídia se dá sobrescrevendo as
informações do web site de forma temporária. Esse recurso visa torna-la o único foco
de atenção da página, apresentando maior relevância para os usuários e retendo
acessos por mais tempo.
Os elementos da interface seguem a mesma estética, como pode-se observar nos
botões de chamada para ação, exemplificado anteriormente e os elementos de
controle da mídia. Essa unidade visa proporcionar ao usuário uma experiência de uso
consistente em todas as áreas do web site.
47
Figura 23 - Área de portfólio
Fonte: Autor (2016)
Buscando uma melhor identificação, foi sugerida uma margem entre cada item do
portfólio da empresa. Com isso espera-se que os usuários tenham mais facilidade na
navegação entre os materiais.
No terceiro item do portfólio (Figura 22) também é possível observar a solução
proposta para o efeito de rolagem de mouse sobre um item. Sempre que o mouse
passar sobre um dos itens, as informações resumidas sobre o projeto aparecerão
através de uma transição de opacidade – as informações passarão de opacidade = 0
para opacidade = 90% - com isso ainda será possível visualizar a miniatura abaixo
das informações.
Um botão de chamada para ação também foi incluído visando uma maior
interatividade e apresentando de forma mais clara as possibilidades do usuário,
aumentando a facilidade de aprendizado do web site.
48
Figura 24 - Detalhes do portfólio
Fonte: Autor (2016)
Ao clicar no botão de chama para ação do item de portfólio, o usuário receberá as
informações detalhadas e galeria de imagens sobrescrita na interface do web site
(Figura 23), assim como acontece com o vídeo de apresentação da empresa, visto
anteriormente (Figura 21). A entrega do conteúdo dessa forma visa resolver o
problema de redirecionamento do usuário a páginas externas para visualizar detalhes
do portfólio.
Seguindo o conceito de simplicidade e eficiência que o web site possui, os conteúdos
são apresentados da forma mais clara possível, facilitando o aprendizado da utilização
e tornando a experiência mais simples e confortável.
49
Figura 25 - Área de clientes e rodapé
Fonte: Autor (2016)
A área de clientes foi reformulada com o intuito de apresentar interatividade. A solução
aplicada foi transformar a lista de marcas em um carrossel controlado pelo usuário.
Dessa forma a área aproveita de forma mais eficiente um espaço menor no web site
de forma enxuta e interativa.
O rodapé também foi reformulado para apresentar maior consistência com o resto da
página. A cor de fundo é a mesma utilizada no menu de navegação do web site, assim
como a cor dos textos. O formulário de contato foi colocado no rodapé visando torna-
lo sempre presente para o usuário durante a navegação.
50
Figura 26 - Solução proposta completa
Fonte: Autor (2016)
51
Apesar da exibição em recortes demonstrar de forma clara e detalhada os elementos
da solução proposta, a sua exibição completa (Figura 25) permite que sejam
observados o fluxo de navegação, a consistência entre as áreas do web site e os
novos elementos propostos para solucionar os problemas de usabilidade levantados
ao longo da coleta e análise de dados. Essa exibição também permite uma
comparação fácil entre a solução proposta (Figura 25) e a interface do objeto de
estudo desse trabalho (ANEXO 1).
52
7. Conclusão
Esse trabalho buscou investigar a usabilidade do web site do escritório de design
Estúdio 8bits, afim de identificar problemas a partir dos critérios apresentados e
fundamentos nos primeiros capítulos. Essa investigação se deu por meio da
observação de dados analíticos, capturados através da ferramenta Google Analytics
no período de janeiro a maio de 2016, além da aplicação de questionário para dois
grupos distintos. Os resultados mostraram diversas falhas de usabilidade, além de alta
taxa de rejeição no período, refletindo a pouca interatividade dos elementos do web
site.
A partir dos problemas de usabilidade listados, foram levantadas soluções, aplicadas
a uma nova interface, apresentada como resultado final. Essa solução foi construída
com base nos critérios de usabilidade apresentados nos primeiros capítulos desse
trabalho, assim como nos dados coletados com usuários durante a realização de
tarefas, visando solucionar de forma eficaz os problemas observados anteriormente.
Ao fim da execução desse trabalho, fica evidente a importância da aplicação de testes
de usabilidade com usuários em projetos de design envolvendo a elaboração de web
sites. A experiência de aplicar tais testes em um web site publicado, propondo
melhorias a partir dos resultados encontrados contribui não só academicamente mas
também é de extrema importância para a prática profissional.
Como sugestão para a continuidade desse trabalho, se faz importante a aplicação de
testes de usabilidade na nova solução proposta, afim de confirmar sua eficácia na
resolução dos problemas encontrados. Também é sugerido que o web site integre em
sua estrutura um blog ou página de notícias, visando a inclusão regular de novos
conteúdo, atraindo mais visitantes recorrentes, estimulando usuários da interagir cada
vez mais com a empresa.
53
REFERÊNCIAS
ACM SIGCHI - Association for Computing Machinery Special Interest Group on
Computer- Human Interaction. Curricula for humancomputer interaction. Technical
report, 1992.
AURIGI, A. 2000. Digital city or urban simulator? In: T. ISHIDA e C. ISBISTER (eds.),
Digital cities: experiences, technologies and future perspectives. Berlin, Springer.
DIAS, Cláudia. 2001. Heurísticas para avaliação de usabilidade de portais
corporativos. In: C.
DIAS, Cláudia. Usabilidade na Web: criando portais mais acessíveis. Ed. Alta Books,
Rio de Janeiro, 2003.
DIAS, Métodos de avaliação de usabilidade no contexto de portais corporativos: um
estudo de caso no Senado Federal. Brasília, DF. Dissertação de Mestrado.
Universidade de Brasília - UnB. Acessado em 31.10.2002, disponível em:
http://www.geocities.com/claudiaad/heuristicas_web.html .
FERREIRA S. M. Design de biblioteca virtual centrado no usuário: a abordagem do
Sense-Making para estudos de necessidades e procedimentos de busca e uso da
informação. http://www.scielo.br/scielo.php?pid=S0100-
19651997000200014&script=sci_arttext, acessado em 20/09/2015
FLICK, Uwe. Introdução à pesquisa qualitativa – 3ª Ed. Porto Alegre. Artmed, 2009.
FREITAS R. C., DUTRA M. A. Usabilidade e Interatividade em Sistemas Web para
Cursos Online, 2009.
FREITAS, J.V., BENJAMIN, M.B e PASTOR, S.O. Usabilidade e Acessibilidade para
Portadores de Necessidades Especiais na Web, 2004.
GARRETT, J.J. 2003. The elements of user experience: user-centered design for the
web. Indianapolis, New Riders.
GREEN, Willian. S.; JORDAN, Patrick W. Pleasure with Products: Beyond Usability.
Londres: Taylor & Francis, 2002.
54
HEAD, A. 1999. Design wise: a guide for evaluating the interface design of
information resources. New York, Independent Publisher Group.
INTERNET LIVE STATS, http://www.internetlivestats.com/internet-users-by-country/,
acessado em 16/09/2015.
INTERNET LIVE STATS, http://www.internetlivestats.com/internet-users-by-country/,
acessado em 16/09/2015.
INTERNET LIVE STATS, http://www.internetlivestats.com/total-number-of-websites/,
acessado em 16/09/2015.
LEITE, J.C. Projeto de Interfaces de Usuário, 2002.
LEMOS, A. e MAMEDE, J. e NÓBREGA, R. e PEREIRA, S. e MEIRELLES, L. 2004.
Cidade, tecnologia e interfaces. Análise de interfaces de portais governamentais
brasileiros. Uma proposta metodológica. Revista Fronteiras - estudos midiáticos.
LÖBACH, Bernard. Design Industrial: Bases para a configuração dos produtos
industriais. São Paulo: Editora Blücher, 2001.
NIELSEN J., LORANGER H. Usabilidade na Web: projetando websites com
qualidade. Tradução Edson Furmankiewicz & Carlos Schafranski, Docware
Traduções Técnicas. Rio de Janeiro: Elsevier, 2007.
NIELSEN, J. Projetando Web Sites – Designing Web Usability, Editora Campus,
2000.
NIELSEN, J. Usability Engineering, Morgan Kaufmann, 1994.
NORMAN, Donald A. Design emocional: por que adoramos (ou detestamos) os
objetos do dia-a-dia. Rio de Janeiro: Rocco, 2008.
PREECE, Jennifer. Design de interação: além da interação homem-computador /
Jennifer Preece, Yvonne Rogers e Helen Sharp; trad. Viviane Possamai. Porto
Alegre: Bookman, 2005.
RUBIN, J. Handbook of Usability Testing: How to Plan, Design, and Conduct
Effective Tests, Wiley Technical Communication Library, 1994.
RUBIN, Jeffrey. Handbook of usability testing: how to plan, design, and conduct
effective tests. New York: Wiley Technical Communication Library; J. Wiley, 1994.
55
SANT’ANNA, Hugo Cristo. Design sem Designer. Serra: Edição do autor, 2013.
SCOLARI, Sérgio, Henrique Prado. Design e emoção : um modelo de círculos de
referências de emoções em produtos / Sérgio Henrique Prado Scolari. Bauru, 2008.
SEARS, A. 2000. Introduction: empirical studies of WWW Usability. International
Journal of Human-Computer Interaction.
W3C'S DESIGN PRINCIPLES, www.w3.org/People/Bos/DesignGuide/toc.html,
acessado em 02/10/2015.
WEB USABILITY CHECKLIST,
www.primepointfoundation.org/checklist_printer_version.htm, acessado em
10/11/2015.
56
ANEXO 1
Captura de tela do web site do escritório de design Estúdio 8bits (http://8bits.cc).
57
APÊNDICE A
Resultados individuais de todas as afirmações do questionário de clientes.
58
APÊNDICE B
Resultados individuais de todas as afirmações do questionário de especialistas.
top related