Вы находитесь на странице: 1из 170

1

Universidade Estadual Paulista Jlio de Mesquita Filho Faculdade de Arquitetura, Artes e Comunicao Programa de Ps-graduao em Design

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano-computador

Lcia Satiko Nomiso

Bauru, 2010

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

Nomiso, Lcia Satiko. Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humanocomputador / Lcia Satiko Nomiso, 2010. 170 f. :il. Orientador: Luis Carlos Paschoarelli Dissertao (Mestrado) Universidade Estadual Paulista. Faculdade de Arquitetura, Artes e Comunicao, Bauru, 2010 1. Design. 2. Testes de usabilidade. 3. Anlise heurstica. 4. Anlise com usurios. I. Universidade Estadual Paulista. Faculdade de Arquitetura, Artes e Comunicao. II. Ttulo.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

Universidade Estadual Paulista Jlio de Mesquita Filho Faculdade de Arquitetura, Artes e Comunicao Programa de Ps-Graduao em Design

Lcia Satiko Nomiso

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano-computador

Dissertao apresentada ao Programa de Ps-graduao em Design da Universidade Estadual Paulista Jlio de Mesquita Filho, linha de pesquisa Ergonomia, para obteno do ttulo de mestre em Design.

Orientador: Prof. Dr.Luis Carlos Paschoarelli

Bauru, 2010

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

2 Banca examinadora Titulares

______________________________________________ Prof. Dr. Luis Carlos Paschoarelli (orientador) Universidade Estadual Paulista Jlio de Mesquita Filho

______________________________________________ Prof. Dr. Joo Pedro Albino Universidade Estadual Paulista Jlio de Mesquita Filho

______________________________________________ Prof. Dr. Jos Carlos Plcido da Silva Universidade Estadual Paulista Jlio de Mesquita Filho

Suplentes:

______________________________________________ Prof. Dra. Marizilda dos Santos Menezes Universidade Estadual Paulista Jlio de Mesquita Filho

______________________________________________ Prof. Dr. Milton Koji Nakata Universidade Estadual Paulista Jlio de Mesquita Filho

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

Agradecimentos
Agradeo a todos aqueles que, de forma direta ou indireta, contriburam para a realizao desta pesquisa; Especialmente agradeo os membros da banca de defesa, aos suplentes e aos revisores pelas consideraes e correes que permitiram aperfeioar essa pesquisa de mestrado; Agradeo aos professores Joo Pedro Albino, Jos Carlos Plcido da Silva, Marizilda Menezes e Luis Carlos Paschoarelli, sempre muito atenciosos e dispostos a ajudar na pesquisa; Aos funcionrios Helder Gelonezi e Silvio Decimone, sempre muito atenciosos; Aos voluntrios da pesquisa, sem os quais ela no teria sua essncia; Ao meu orientador, Luis Carlos Paschoarelli, que, mais que um orientador, foi definitivamente um amigo que me apoiou nas horas mais decisivas da pesquisa, sempre com palavras sinceras e encorajadoras, mostrando toda sua competncia e sabedoria; Ao meu querido pai Masahiro Nomiso (em memria), maior incentivador dos meus estudos, minha querida me Maria Junko Tanaka Nomiso, que, mesmo sem saber ao certo detalhes da minha pesquisa, encorajou-me e ajudou-me sempre; Aos meus irmos, Marcos Tissato Nomiso, Ceclia Massako Nomiso e Marta Yuriko Nomiso, sempre alegres e prestativos; E, principalmente, ao meu namorado e melhor amigo, Alex Dias Rodrigues, sempre me apoiando em meus estudos e em tudo o que fez e tem feito por mim.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

Resumo
As interfaces de sites institucionais devem basear-se em princpios de usabilidade, cujo propsito garantir a informao de forma segura, eficiente e efetiva s audincias e a seus respectivos usurios. Os princpios tericos sobre recomendaes para o desenvolvimento de sites apresentam-se amplamente disponveis, mas a aplicao destes, verificados com ferramentas especializadas, continuam sendo fundamentais para o alcance da efetiva usabilidade. O presente estudo objetivou testar a ferramenta CMS (Content Management System) durante o desenvolvimento de um site institucional do Programa de Ps-graduao em Design da Universidade Estadual Paulista, visando ao melhoramento de sua usabilidade. Os procedimentos metodolgicos caracterizaram-se por cinco etapas, iniciando-se pela reviso terica e seguindo por aplicaes laboratoriais e de simulaes prticas, as quais se caracterizaram pela evoluo alternada de etapas de anlise, desenvolvimento de prottipo, e reanlise, resultando em um prottipo final. Esses resultados foram considerados satisfatrios, pois foi verificado que a aplicao de ferramentas CMS no desenvolvimento de sites institucionais melhora seus nveis de usabilidade. Entretanto, a principal contribuio do presente estudo est na conquista de novos conhecimentos decorrentes dos experimentos realizados, bem como no incremento dos temas ligados ao design de interfaces, usabilidade e ergonomia informacional, os quais colaboram de forma efetiva para o desenvolvimento do Design Ergonmico. Palavras-chave: Design, testes de usabilidade, anlise heurstica, anlise com usurios, usabilidade de sites, ferramentas CMS, design informacional.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

Abstract
The interfaces of institutional sites must be based on usability principles, whose purpose is to ensure the security, efficient and effective information to audiences and their users. The theoretical principles of recommendations for site development have become widely available, but the implementation of them checked with specialized tools remain be fundamental to the achievement of effective usability. This study aimed to test the CMS tool (Content Management System) during the development of an institutional site of the Graduate Program in Design at the Universidade Estadual Paulista intended to improve its usability. The methodological procedures were characterized by five steps, starting by the review theory and following by laboratory applications and practices simulations, which were characterized by alternating stages of development testing, prototype development, and reanalysis, resulting in a final prototype. These results were considered satisfactory, because it was verified that the use of CMS tools in the development of institutional sites improved their levels of usability. However, the main contribution of this study is to acquire new knowledge resulting from experiments, as well as the increase in issues related to interface design, usability and ergonomic information, which collaborate effectively for the development of Ergonomic Design. Keywords: Design, usability tests, heuristic analysis, users analysis, usability of websites, SGC tools, informational design.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

Lista de Figuras
FIGURA 1- METAS
DA

USABILIDADE

METAS

DECORRENTES DA EXPERINCIA DO USURIO.

ADAPTADO

DE:

PREECE, ROGERS E SHARP, 2005.................................................................................................... 32 FIGURA 2 TESTE


COM

CARD

SORTING.

FONTE:

HTTP://WWW.DCC.UNICAMP.BR/~HANS/MC750/UIDESIGN/CARDSORT.GIF ............................................

40

FIGURA 3 - CARD SORTING ABERTO E CARD SORTING FECHADO. FONTE: UXBLOG.LOCAWEB.COM.BRS ....... 41 FIGURA 4 EXEMPLO DE WIREFRAME. FONTE: HTTP://WEBINSIDER.UOL.COM.BR/IMG/WIREFRAME_02.GIF ... 42 FIGURA 5 ESTRUTURA DA USABILIDADE. FONTE: ISO 9241-11 ................................................................ 45 FIGURA 6 NOVO SITE INSTITUCIONAL DA USP (ACESSADO EM 10 DE OUTUBRO DE 2009) ......................... 70 FIGURA 7 NMERO
DE

USURIO

EM TESTES E QUANTIDADE DE PROBLEMAS ENCONTRADOS. BASEADO EM:

HTTP://WWW.USEIT.COM/ALERTBOX/20000319.HTML ........................................................................

74

FIGURA 8 ESTRUTURA METODOLGICA.................................................................................................. 81 FIGURA 9 SITE INSTITUCIONAL DO PROGRAMA DE PS-GRADUAO EM DESIGN DA UNESP (ACESSADO EM 21 DE OUTUBRO DE 2009) ................................................................................................................ 82 FIGURA 10 PGINA DO GOOGLE INSIGHTS FOR SEARCH, COM 4 TERMOS INSERIDOS PARA PESQUISA ....... 89 FIGURA 11 - PGINA
DO

GOOGLE INSIGHTS

FOR

SEARCH,

COM VISUALIZAO DOS RESULTADOS DO TERMO

SELEO (ACESSADO EM 25 DE OUTUBRO DE 2009) ....................................................................... 90 FIGURA 12 - PGINA


DO

GOOGLE INSIGHTS

FOR

SEARCH,

COM VISUALIZAO DOS RESULTADOS DO TERMO

PROCESSO SELETIVO (ACESSADO EM 25 DE OUTUBRO DE 2009) ..................................................... 91 FIGURA 13 FERRAMENTA CARDSORT .................................................................................................... 92 FIGURA 14 RESULTADO
DA

VALIDAO

DO

CSS

DO

SITE INSTITUCIONAL

DO

PROGRAMA

DE

PS95

GRADUAO DA UNESP (ACESSADO EM 13 DE OUTUBRO DE 2009) ..................................................

FIGURA 15 RESULTADO

DA VALIDAO DO

XHTML

DO

SITE INSTITUCIONAL

DO

PROGRAMA

DE

PS95

GRADUAO DA UNESP (ACESSADO EM 13 DE OUTUBRO DE 2009) ..................................................

FIGURA 16 VALIDADOR DE ACESSIBILIDADE DASILVA (ACESSADO EM 20 DE OUTUBRO DE 2009) ............... 96 FIGURA 17 SITE INSTITUCIONAL
DO

PROGRAMA

DE

PS-GRADUAO

EM

DESIGN

DA

UNESP

COM

MARCAO D CAMINHO REALIZADO PELO LEITOR DE TELAS DOS-VOX ...............................................

97

FIGURA 18 PGINA NO PADRONIZADA................................................................................................... 99 FIGURA 19 ARQUIVO DE EXTENSO NO GRATUITA NO SITE ................................................................... 100

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

7
FIGURA 20 PGINA COM INDICADORES BREADCRUMB E ITEM DE MENU ATIVADO .................................. 100 FIGURA 21 LINK PARA BAIXAR MODELO DE DOCUMENTO (ACESSADO EM 20 DE MAIO DE 2008) ................ 103 FIGURA 22 RECORTE
DO REGULAMENTO DO

PROGRAMA

DE

PS-GRADUAO

EM

DESIGN

DA

UNESP

(ACESSADO EM 20 DE MAIO DE 2008) ............................................................................................. 105 FIGURA 23 - RESULTADOS DO TESTE REALIZADO COM A METODOLOGIA CARD SORTING ............................ 107 FIGURA 24- TELA DA FERRAMENTA MICROSOFT EXPRESSION BLEND+SKETCHFLOW ................................ 110 FIGURA 25- PROTTIPO DO SITE INSTITUCIONAL, CRIADO PARA TESTE EXPLORATRIO............................... 111 FIGURA 26 - RESPOSTAS DA PERGUNTA : QUAL A SUA RELAO COM A PS-GRADUAO? .................... 112 FIGURA 27 - PORCENTAGEM DE USURIOS QUE CONSEGUIRAM REALIZAR A TAREFA 1 ............................... 112 FIGURA 28 - PORCENTAGEM DE USURIOS QUE CONSEGUIRAM REALIZAR A TAREFA 2 ............................... 113 FIGURA 29 PAINEL DE ADMINISTRAO DE ARTIGOS DO JOOMLA! VERSO 1.5 ....................................... 114 FIGURA 30 LINKS EXISTENTES NO SITE (NO VISITADO VISITADO) ........................................................ 115 FIGURA 31 CONTEDO DO SITE COM DESTAQUE E IMAGENS .................................................................. 115 FIGURA 32 BUSCADOR DO SITE E OS RESULTADOS ENCONTRADOS PARA A PALAVRA UNESP ................. 116 FIGURA 33 PGINA EXTENSA QUEBRADA EM VRIAS SUB-PGINAS......................................................... 116 FIGURA 34 MENU VERTICAL E HORIZONTAL DO SITE (EM DESTAQUE) ..................................................... 117 FIGURA 35 VALIDADOR W3C PARA XTML, SEM APRESENTAO DE ERROS NA PGINA INICIAL ............... 118 FIGURA 36 VALIDADOR W3C PARA CSS SEM APRESENTAO DE ERROS NA PGINA INICIAL ................ 118 FIGURA 37 VALIDADOR DE ACESSIBILIDADE DASILVA COM APRESENTAO DE ERROS MENOS RELEVANTE NA
PGINA INICIAL ...............................................................................................................................

119

FIGURA 38 ORDEM DE NAVEGAO DO LEITOR DE TELA (DOS-VOX) ....................................................... 120 FIGURA 39 ATALHOS DE AUXLIO PARA DEFICIENTES VISUAIS, VISVEL APENAS PARA NAVEGAO PELA TECLA
TAB ...............................................................................................................................................

120

FIGURA 40 BREADCRUMB E MENU LATERAL ESQUERDO COM ITEM ATIVADO ............................................ 121 FIGURA 41 CONE NO BOTO PESQUISAR .............................................................................................. 121 FIGURA 42 NAS NOTCIAS FOI INSERIDO IMAGENS ................................................................................. 122 FIGURA 43 PGINA COM DUAS CHAMADAS (RESUMO DO ARTIGO), NA ENTRADA ...................................... 122 FIGURA 44 OPO PARA AUMENTAR O TEXTO DA PGINA ...................................................................... 123 FIGURA 45 INSERO DE PAGINAO, PARA DEIXAR O CONTEDO MENOS DENSO .................................. 123 FIGURA 46 CONTEDO DO SITE COM IMAGENS E MARCAES DE TTULOS E BLOCOS .............................. 124

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

8
FIGURA 47 REDESIGN DO SITE INSTITUCIONAL EM PLATAFORMA JOOMLA! 1.5 ........................................ 125 FIGURA 48 SITE REESTRUTURADO COM ACESSO RESTRITO APENAS PARA USURIOS CADASTRADOS ....... 126 FIGURA 49 PERFIL DOS SUJEITOS INTERESSE EM CURSO DE PS-GRADUAO ..................................... 126 FIGURA 50 PERFIL DOS SUJEITOS USO DA INTERNET .......................................................................... 127 FIGURA 51 RESPOSTAS TAREFA 1........................................................................................................ 127 FIGURA 52 RESPOSTAS DA TAREFA 3 ................................................................................................... 128 FIGURA 53 RESPOSTA DO QUESTIONRIO DE SATISFAO .................................................................... 129 FIGURA 54 PERFIL DOS SUJEITOS INTERESSE NO CURSO DE PS-GRADUAO .................................... 130 FIGURA 55 PERFIL DOS SUJEITOS USO DA INTERNET .......................................................................... 131 FIGURA 56 INFORMAO DO ARTIGO DESTACADO EM TABELA ................................................................ 131 FIGURA 57 RESPOSTAS DA TAREFA 4 ................................................................................................... 132 FIGURA 58 RESPOSTA DO QUESTIONRIO DE SATISFAO .................................................................... 133 FIGURA 59 VERSO FINAL DO PROTTIPO, DESENVOLVIDO EM FERRAMENTA CMS JOOMLA! V.1.5 .......... 134

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

Lista de Tabelas
TABELA 1 VINTE PASES QUE MAIS ACESSAM A INTERNET, FONTE: INTERNET WORLD STATS. .................... 24 TABELA 2 ESTATSTICAS DE USO DE NAVEGADORES FONTE: WWW.W3SCHOOLS.COM ......................... 50 TABELA 3 TAMANHO DE FONTES IDEAIS PARA CADA TIPO DE USURIO. ..................................................... 60 TABELA 4 10 COMBINAES MAIS BEM CLASSIFICADAS. FONTE: FARINA, PEREZ E BASTOS (2006). .... 62 TABELA 5 RESULTADO DA OCORRNCIA DE MESMAS CATEGORIAS NOS SITES INSTITUCIONAIS ANALISADOS 88 TABELA 6 PROBLEMAS DE USABILIDADE DE ALTO IMPACTO ....................................................................... 93 TABELA 7 PROBLEMAS DE USABILIDADE DE MDIO IMPACTO ................................................................... 93 TABELA 8 PROBLEMAS DE USABILIDADE DE BAIXO IMPACTO .................................................................... 94 TABELA 9 TABELA DE MDIAS DOS ERROS E ALERTAS APRESENTADOS ..................................................... 97

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

10

Sumrio
1.
1.1. 1.2.

Introduo ............................................................................................ 19
O Problema ................................................................................................. 21 Questo de Pesquisa ................................................................................. 22

2.
2.1. 2.2. 2.3. 2.4.

Reviso Terica ................................................................................... 23


Pginas web ................................................................................................ 23 Usabilidade ................................................................................................. 24 Problemas de usabilidade que ainda persistem ..................................... 33 Arquitetura de Informao e Navegao.................................................. 37
Mtodo Card Sorting .......................................................................................... 40 Wireframes .......................................................................................................... 41

2.4.1 2.4.2

2.5.

Padres de Qualidade ................................................................................ 44


Normas de Interao Homem-Computador (IHC) ........................................... 44 ISO de Qualidade de Software .......................................................................... 47

2.5.1 2.5.2

2.6. 2.7. 2.8.

W3C ............................................................................................................. 48 Navegadores de Internet e suas Funes................................................ 49 Acessibilidade ............................................................................................ 50


Tecnologias Assistivas ..................................................................................... 54

2.8.1

2.9.

Fatores estticos que potencializam a usabilidade da web ................... 58


Tipografia ............................................................................................................ 59 Cores ................................................................................................................... 61

2.9.1 2.9.2

2.10. Otimizao de sistemas de busca - SEO ................................................. 63


2.10.1 Buscas Internas.................................................................................................. 66

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

11 2.11. Ferramentas SGC ou CMS ......................................................................... 67


2.11.1 Joomla (Ferramenta SGC) ................................................................................. 68

2.12. Sobre os testes de Usabilidade ................................................................ 70


2.12.1 Anlise Heurstica .............................................................................................. 71 2.12.2 Anlise de Observao ...................................................................................... 72 2.12.3 Limitaes dos testes de usabilidade.............................................................. 75 2.12.4 Tipos de testes ................................................................................................... 75 2.12.4.1Teste Exploratrio/Formativo ....................................................................... 75 2.12.4.2Teste de Avaliao/Resumido ..................................................................... 76 2.12.4.3Teste de Validao/Verificao ................................................................... 77 2.12.4.4Teste de Comparao ................................................................................. 78

3. 4.
4.1. 4.2. 4.3. 4.4.

Objetivos da Pesquisa......................................................................... 80 Materiais, Mtodos e Resultados ....................................................... 81


Estrutura Metodolgica ............................................................................. 81 Aspectos ticos.......................................................................................... 82 Objeto de Anlise ....................................................................................... 82 Etapa 2 Anlise do Objeto de Estudo .................................................... 83

4.4.1. Anlise Heurstica .............................................................................................. 83 4.4.1.1.Problemas de usabilidade segundo Nielsen ................................................. 83 4.4.1.2.Recomendaes da W3C ............................................................................. 83 4.4.1.3.Acessibilidade ............................................................................................... 84 4.4.1.4.Princpios Usabilidade de autores citados .................................................... 85 4.4.2. Anlise com Usurios ........................................................................................ 85 4.4.2.1.Avaliao da Arquitetura de Informao ....................................................... 85

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

12
4.4.2.2.Fatores de Design do site Institucional ......................................................... 86 4.4.2.3.Card Sorting .................................................................................................. 86 4.4.3. Anlise dos dados da Etapa 2 .......................................................................... 93 4.4.3.1.Problemas de usabilidade que ainda persistem ........................................... 93 4.4.3.2.No cumprimento das recomendaes da W3C .......................................... 94 4.4.3.3.Problemas com a Acessibilidade do site ...................................................... 96 4.4.3.4.Lista de recomendao dos autores ............................................................. 98 4.4.3.5.Problemas com a Arquitetura da Informao ............................................... 102 4.4.3.6.Problemas com os Fatores de design .......................................................... 105 4.4.3.7.Mtodo Card Sorting ..................................................................................... 106

4.5. 4.6.

Etapa 3 Redesign do Objeto ................................................................. 109 Etapa 4 Testes elaborados durante o processo de redesign............ 110
Teste Formativo/Exploratrio ......................................................................... 110

4.6.1

4.6.1.1.Resultados do Teste Exploratrio/Formativo ................................................ 111 4.6.2 Teste de Avaliao/Resumido ........................................................................ 114

4.6.2.1.Resultados do Teste de Avaliao/Resumido .............................................. 126 4.6.3 Teste de Validao/Verificao....................................................................... 129

4.6.3.1.Resultados do Teste de Validao/Verificao ............................................ 130 4.6.4 Verso final do prottipo desenvolvido na pesquisa................................... 133

5. 6. 7.
7.1. 7.2.

Consideraes Finais ........................................................................ 135 Referncias Bibliogrficas ................................................................ 139 Apndices........................................................................................... 147
Apndice A Anlise Heurstica de Problemas de Usabilidade .......... 147 Apndice B Anlise Heurstica das Recomendaes da W3C .......... 148

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

13 7.3. 7.4. 7.5. 7.6. 7.7. 7.8. 7.9. Apndice C Anlise Heurstica de Acessibilidade ............................. 149 Apndice D Anlise Heurstica dos Princpios de Usabilidade ........ 150 Apndice E Anlise com Usurios sobre AI (graduao) ................. 151 Apndice F Anlise com Usurios sobre AI (ps-graduao) .......... 154 Apndice G Anlise com Usurios sobre os Fatores de Design ...... 157 Apndice H Anlise com Usurios Mtodo Card Sorting .................. 159 Apndice I Teste Exploratrio/Formativo ........................................... 160

7.10. Apndice J Teste de Avaliao/Resumido.......................................... 163 7.11. Apndice K Teste de Validao/Verificao ....................................... 166

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

14

Glossrio
Acessibilidade na web Permitir o acesso web por todos

independentemente do tipo de usurio, situao ou ferramenta.

Arquitetura de informao

Expresso criada por WURMAN (1996), durante a dcada de 1970, sobre a nova disciplina que surgia, com o objetivo de organizar o fluxo da informao para torn-la mais clara e

compreensvel. Blog um site, cuja estrutura permite atualizaes rpidas por meio de artigos que so normalmente organizados em ordem cronolgica inversa. Breadcrumb Recurso de navegao utilizado em pginas da internet para informar o caminho realizado pelo usurio dentro do site. Card Sorting Mtodo que auxilia na organizao e na

estruturao do fluxo da informao de um site. Feedback Informao gerada pelo sistema como resposta a um determinado comando realizado. Flash Ferramenta da empresa Adobe que elabora animaes para uso na web. Guideline Manual de guia, de orientao.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

15 Heurstica Conjunto de mtodos que permitem chegar descoberta ou resoluo de problemas. Hipermdia Informaes disponveis em multimdia: texto, udio, vdeo, animaes etc. HTML Linguagem de marcao utilizada para escrever pginas na web (HyperText Markup Language). ISO Layout Organizao Internacional de Normalizao. Esboo que mostra a distribuio fsica, os tamanhos e os pesos de elementos em

determinado espao. Legibilidade Metadados Qualidade do que legvel. Facilitam o entendimento dos relacionamentos das informaes dos dados. um dicionrio de dados. Software Programa de computador que executa uma

sequncia de instrues. Tags So estruturas de linguagem de marcao que possuem breves instrues. Possui uma marcao de incio e de fim. Tecnologias Assistivas Quaisquer tipos de tecnologias especificamente concebidas incapacidades para ou auxiliar pessoas com a

necessidades

especiais

executarem atividades do cotidiano.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

16 Usabilidade Medida que indica o quanto um produto pode ser usado por usurios especficos para alcanar objetivos especficos. XHTML W3C Extenso da linguagem de marcao HTML. World Wide Web Consortium o principal consrcio de padronizao e de regras para a exibio de contedos para todos os navegadores de internet Website Wikis Pgina hipertextual disponibilizada na internet. Software colaborativo que permite a edio

coletiva dos documentos utilizando um sistema que no necessite de reviso antes da publicao. Wireframe Representao do layout bsico, da organizao e da arquitetura da informao de um site. WWW World Wide Web internet baseada em

hipermdia.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

17

Siglas
AI Anhembi ANSI CERN CHI CMS DCU ESDI- UERJ Arquitetura de Informao Universidade Anhembi Morumbi American National Standards Institute Conseil Europen pour la Recherche Nuclaire Computer-Human interaction Content Managment System Design Centrado no Usurio Escola Superior de Desenho Industrial Universidade do Estado do Rio de Janeiro HCI HMI HTML ICH IE IHC IHM ISO Human-Computer Interaction Human-Machine Interface Hyper Text Markup Language Interao Computador-Humano Internet Explorer Interao Humano-Computador Interface Homem-Mquina International Organization for Standardization

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

18 NCSA PUC-RIO SENAC SEO SERPRO UCD UFPE UFPR UFRGS UNESP UNIRITTER UNISINOS URL W3C WWW National Center for Supercomputing Applications Pontifcia Universidade Catlica do Rio de Janeiro Servio Nacional de Aprendizagem Comercial Search Engine Optmization Servio Federal de Processamento de Dados User-Centered Design Universidade Federal de Pernambuco Universidade Federal do Paran Universidade Federal do Rio Grande do Sul Universidade Estadual Paulista "Jlio de Mesquita Filho" Centro Universitrio Ritter dos Reis Universidade do Vale do Rio dos Sinos Uniform Resource Locator World Wide Web Consortium World Wide Web

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design ergonmico na busca da usabilidade e melhor interao humano computador

19

1. Introduo
Nos ltimos anos, a distribuio da informao digital cresceu de tal modo que a preocupao com a usabilidade em websites no pode ser mais encarada como algo a mais no site, e sim como parte essencial para que este realize sua funo bsica, que o acesso informao. Os estudos sobre recomendaes de usabilidade mostram-se merecedores de grande ateno, visto que auxiliam na utilizao dos websites, eliminando constrangimentos dos usurios. A informao distribuda na web deve ser vista com um bom grau de confiabilidade, porm o seu mau planejamento impossibilita que seus usurios a utilizem como uma fonte segura e de referncia. Esse estudo visa analisar e testar metodologias utilizadas na elaborao de websites que focam na obteno de uma maior usabilidade e, quando possvel, aprimor-las. Nesse sentido, props-se focar na anlise de usabilidade do site Institucional do Programa de Ps-graduao em Design da UNESP, visto que esses modelos de sites exigem um maior grau de usabilidade e acessibilidade. Atualmente, muitos sites possuem um carter apelativo para o visual, no priorizando a informao e tornando-se apenas interessante instantaneamente, sem agregar valor de usabilidade. Pginas web devem ser encaradas como um meio de comunicao e informao sria, que facilitam as necessidades dos usurios. Os estudos em design ergonmico contribuem para uma melhor interao entre homem e computador; e os sites de servios esto cada vez mais presentes no dia a dia, uma vez que transaes bancrias, inscries em concursos ou cursos educacionais so uma realidade cada vez mais presente para o ser humano. Portanto, a qualidade ergonmica em sites necessita de maior ateno, visto que a web um produto muito

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

20 procurado por sujeitos de diversas faixas etrias e, muitas vezes, por portadores de algum tipo de deficincia. Esse estudo inicia-se com uma reviso bibliogrfica que aborda assuntos que influenciam na usabilidade de websites, como: Arquitetura de Informao; Navegao; Padres Internacionais de usabilidade (ISO); Recomendaes da W3C (World Wide Web Consortium), principal consrcio de padronizao e regras para os navegadores de exibio das pginas web; Acessibilidade, que um tema que merece ser estudado e desenvolvido com mais cuidado pelos pesquisadores; Mecanismos de Buscas e Fatores de design que ajudam a potencializar a usabilidade de websites. Foram levantados tambm problemas que persistem e que raramente so corrigidos, mesmo com a conscincia dos desenvolvedores, projetores e designers. Todas essas metodologias foram aplicadas no objeto em estudo, e todos os dados coletados foram avaliados e discutidos. Aps identificao dos problemas de usabilidade, o site foi reprojetado e apresentado em uma nova verso, seguindo as recomendaes de usabilidade e buscando a melhor interao com o usurio final, o que permitiu uma nova avaliao. Para que isso fosse possvel, a pesquisa foi dividida em cinco etapas: 1 Etapa: Realizao da reviso terica; 2 Etapa: Realizao de anlises heursticas e anlises com usurios com o objeto de estudo; 3 Etapa: Reformulao do objeto de estudo, por meio do uso de ferramentas de prototipagem e para construo de sites. As alteraes necessrias referentes usabilidade (coletadas na 2 etapa) foram aplicadas;

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

21 4 Etapa: Trs testes de usabilidade foram aplicados no objeto de estudo reformulado. Os testes foram realizados com usurios potenciais, os problemas coletados em cada teste foram listados e corrigidos antes da realizao do teste seguinte. Essa tentativa de aprimoramento visava ao desenvolvimento de um prottipo final com os tpicos de usabilidade aplicados; 5 Etapa: Consideraes finais.

1.1. O problema
A utilizao de websites passou a ser uma rotina e uma ferramenta cada vez mais constante de trabalho. Sites mal projetados no informam o contedo que o usurio procura e este, por sua vez, cada vez menos tolerante a sites complexos. Portanto, a usabilidade passou a ser uma necessidade, e essa necessidade composta por assuntos que criadores e desenvolvedores de sites precisam ter conhecimento para proporcionar uma navegao na internet mais amigvel ao usurio final. Segundo NIELSEN e LORENGER (2007), os problemas de usabilidade so ponderados e classificados de acordo com sua gravidade, e os resultados mostram que as insatisfaes esto repartidas em vrios elementos que constituem um site, como: recursos de pesquisa, arquitetura da informao, legibilidade da informao, qualidade da informao apresentada, classificao inadequada de categorias, layout no muito rico, fluxo de trabalho confuso, navegao confusa, entre outros problemas merecedores de ateno por parte de projetistas, desenvolvedores e designers. As ferramentas de gerenciamento de contedo, CMSs (Content Managment System), so utilizadas atualmente como um formato base na construo de sites. O uso dessas ferramentas tem crescido devido s preocupaes que apresentam quanto acessibilidade, padronizao de cdigo e facilidade na atualizao de contedos. No presente estudo,

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

22 questiona-se se a utilizao de ferramentas CMS na elaborao de sites pode proporcionar ambientes com princpios de usabilidade satisfatrios.

1.2. Questo de pesquisa


A pesquisa ser baseada no estudo e na anlise de metodologias de avaliao da usabilidade de websites. As metodologias abordam assuntos diferentes, porm que compem a grande rea da usabilidade de pginas web. Sero testadas e aprimoradas as metodologias para a anlise da qualidade da arquitetura de informao e da navegao do site, acessibilidade, mecanismos de busca da informao contida no site, padres de qualidade e outros assuntos que estejam relacionados com a usabilidade em sites. Como websites sobrevivem da alimentao de contedo, para a pesquisa ser analisada uma ferramenta que auxilia na atualizao dos contedos com uma interface mais amigvel ao usurio. Essa ferramenta ameniza problemas da falta de atualizao do contedo de um site que faz com que o usurio se interesse menos pelo site. Acredita-se que com as metodologias e com os testes abordados no presente estudo, os sites possam obter um nvel maior de usabilidade e satisfao do usurio.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

23

2. Reviso terica
2.1. Pginas web
A web surgiu em 1990 com a criao da linguagem HTML (Hyper Text Markup Language), que uma linguagem de marcao utilizada para produzir pginas web e que pode ser interpretada por navegadores (exemplo: Internet Explorer, Firefox, Chrome, Opera, entre outros). Tim Berners Lee, alm de inventar a linguagem HTML, inventou o WWW (World Wide Web), internet baseada em hipermdia no Laboratrio CERN (do francs Conseil Europen pour la Recherche Nuclaire), na Sua (MARTINEZ, 2000). Em 1993, surgiu o primeiro navegador multimdia: o Mosaic, produzido pelo NCSA (National Center for Supercomputing Applications). A partir de ento, a web se supera a cada dia, com novidades tecnolgicas que beneficiam a distribuio da informao de forma instantnea. Segundo dados da Internet World Stats, website internacional que apresenta dados sobre usurios da internet e estatsticas de populao, os 20 pases que mais acessam a internet (Tabela 1) possuem 76,8% de todos os usurios do mundo. interessante analisar que o Brasil se encontra em quinto lugar, com 67.510.400 de usurios e crescimento de 1.250,2% entre os anos 2000 e 2008, representando 4,2% dos usurios de internet no mundo. Uma pgina da web composta por uma srie de ns que, segundo LVY (1997), denomina-se hipertexto, elemento de conexo para outras informaes (textos, imagens, sons etc.). A evoluo da tecnologia da informao e das telecomunicaes permite a busca da informao na rede de forma crescente, independentemente da localizao geogrfica em que ela se encontra. Essa rede cresce de maneira no linear e se liga a vrias outras no lineares. Quando as pginas so mal projetadas, acarretam numa srie de problemas de usabilidade devido a sua sobrecarga informacional, que nem sempre possui uma boa qualidade, dificultando a assimilao e a contextualizao da informao correta.
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

24
TABELA 1- VINTE PASES QUE MAIS ACESSAM A INTERNET. FONTE: INTERNET WORLD STATS Os 20 pases que mais acessam a internet* Pas ou regio China Estados Unidos Japo ndia Brasil Alemanha Reino Unido Frana Rssia Coreia do Sul Espanha Itlia Mxico Turquia Indonsia Canad Ir Vietn Polnia Argentina Populao em 2008 1.330.044.605 304.228.257 127.288.419 1.147.995.898 196.342.587 82.369.548 60.943.912 62.150.775 140.702.094 48.379.392 40.491.051 58.145.321 109.955.400 75.793.836 237.572.355 33.212.696 65.875.223 86.116.559 38.500.696 40.481.998 Usurios at ltima atualizao* * 298.000.000 227.190.989 94.000.000 81.000.000 67.510.400 55.221.183 43.753.600 40.858.353 38.000.000 36.794.800 28.552.604 28.388.926 27.400.000 26.500.000 25.000.000 23.999.500 23.000.000 20.993.374 20.020.362 20.000.000 % da Populao (disseminao) 22,4 % 74,7 % 73,8 % 7,1 % 34,4 % 67 % 71,8 % 65,7 % 27 % 76,1 % 70,5 % 48,8 % 24,9 % 35 % 10,5 % 72,3 % 34,9 % 24,4 % 52 % 49,4 % Crescimento 2000 a 2008 1.244,4 % 138,3 % 99,7 % 1.520 % 1.250,2 % 130,1 % 184,1 % 380,7 % 1.125,8 % 93,3 % 429,9 % 115 % 910,2 % 1.225 % 1.150 % 89,0 % 9.100 % 10.396,7 % 615 % 700 % % de usurios no mundo 18,7 % 14,2 % 5,9 % 5,1 % 4,2 % 3,5 % 2,7 % 2,6 % 2,4 % 2,3 % 1,8 % 1,8 % 1,7 % 1,7 % 1,6 % 1,5 % 1,4 % 1,3 % 1,3 % 1,3 %

NOTAS: *As informaes de usurios mais recentes vm dos dados publicados por Nielsen Online, Unio Internacional de Telecomunicao, relatrios oficiais dos pases e outras fontes de pesquisa fidedignas. ** As estatsticas de usurios da internet no mundo foram atualizadas em 31 de maro de 2009.

Segundo MARTINEZ (2000), a web tornou-se rapidamente um poderoso meio de divulgao de informao. Uma informao publicada em HTML pode ser acessada por pessoas em qualquer parte do mundo e em diferentes plataformas, tais como: PC, Mac, Sun, Silicon Graphics, entre outras existentes.

2.2. Usabilidade
O design de websites orientado para a usabilidade um processo que foca no usurio e que analisa a usabilidade, a qualidade da informao e a interao, acessando ou no o website divulgado na web.
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

25 Para NIELSEN (1993), existe uma confuso nas terminologias para descrever o que amigvel ao usurio, pois dentre as terminologias que existem ou existiam se destacam: ICH (Interao Computador-Humano), que era em ingls CHI (Computer-Human Interaction), a qual foi mudada para IHC (Interao Humano-Computador), do Ingls HCI (Human-Computer Interaction) a diferena entre os termos que, na segunda opo, a palavra humano vinha em primeiro lugar; DCU (Design Centrado no Usurio), do ingls UCD (User-Centered Design); IHM (Interface Homem-Mquina), do ingls MMI (ManMachine Interface); IHM (Interface Humano-Mquina), em ingls HMI (Human-Machine Interface). Portanto, todas essas descries tendem a usar o termo Usabilidade, que o termo aplicado em seus estudos para descrever o que amigvel ao usurio. Independentemente dos termos que sero apresentados no presente estudo, importante ressaltar que o interesse deste a gerao de novos conhecimentos e a discusso dos melhores caminhos para o amadurecimento do assunto usabilidade de websites. NIELSEN (1993) lembra que a usabilidade no uma propriedade nica. A usabilidade possui componentes mltiplos e associada a cinco atributos: Aprendizagem: O sistema deveria ser fcil de aprender e os usurios rapidamente comeariam a realizar suas tarefas quando em contato com ele. A aprendizagem o mais fundamental atributo da usabilidade. Os sistemas deveriam ser fceis de aprender por seus usurios, especialmente nas primeiras experincias de uso. Eficincia: O sistema deveria ser eficiente ao ser usado para que, uma vez aprendido, obter um alto nvel de produtividade. Memorizao: O sistema deveria ser fcil de ser relembrado. Assim, quando o usurio retornasse para o sistema, depois de certo tempo sem utiliz-lo, no teria problemas em aprender novamente ou em executar as tarefas.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

26 Erros: O sistema deveria ter baixo ndice de erros. Assim, os usurios teriam poucos erros durante o uso do sistema e, se acontecesse alguma falha, seria fcil de recuperar. Erros graves no deveriam ocorrer. Satisfao: O sistema deveria ser agradvel de utilizar. Dessa maneira, os usurios ficariam subjetivamente satisfeitos quando o utilizassem e o aceitariam melhor. PREECE, ROGERS e SHARP (2005) tambm possuem uma viso semelhante ao de NIELSEN (1993). Eles definem as seguintes metas de usabilidade: Ser eficaz no uso. Eficcia: O sistema capaz de permitir que as pessoas aprendam bem, realizem seu trabalho de forma eficiente e acessem as informaes de que necessitam. Ser eficiente no uso. Eficincia: Uma vez que os usurios tiverem aprendido como utilizar um sistema para realizar suas tarefas, conseguiro manter um alto nvel de produtividade. Ser seguro no uso. Segurana: O sistema previne os usurios de cometerem erros graves e, se mesmo assim o fizerem, permite que esses erros sejam recuperados facilmente. Ser fcil de aprender. Learnability: Quo fcil e que tempo se leva para (i) iniciar o uso das tarefas fundamentais de um sistema e (ii) aprender o conjunto de operaes necessrias para realizar um grupo mais amplo de tarefas. Ser fcil de lembrar como se usa. Memorability: Que tipos de suporte de interface foram fornecidos com o objetivo de auxiliar os usurios a lembrar como realizar tarefas, especialmente para sistemas e operaes que no so utilizados com muita frequncia.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

27 Para RUBIN e CHISNELL (2008), a usabilidade existe quando o produto ou o servio verdadeiramente usvel. O usurio consegue realizar uma tarefa e sabe qual o caminho para chegar naquilo que deseja, sem obstculos, hesitao ou questionamentos. Para tornar um produto com usabilidade, ele precisa ser: usvel, eficiente, efetivo, satisfatrio, aprendvel e acessvel, pois a acessibilidade e a usabilidade so complementares. A verdadeira usabilidade invisvel. Se algo est funcionando, o desenvolvedor nunca avisado que o produto funciona. Por exemplo, se a temperatura do quarto confortvel, no h reclamaes. Mas o aprimoramento da usabilidade de produtos precisa ser contnuo. Quo usvel o produto? possvel deixar mais usvel para os usurios realizarem as metas? Qual o valor do melhoramento? A maior parte dos profissionais gasta seu tempo eliminando problemas de projeto, tentando minimizar a frustrao dos usurios (RUBIN e CHISNELL, 2008). Para a presente pesquisa, o termo desenvolvedor(es) ser utilizado para determinar qualquer pessoa que esteja envolvida no desenvolvimento do produto/projeto, incluindo designers, programadores, webdesigners, arquitetos de informao e demais profissionais. RUBIN e CHISNELL (2008) apresentam cinco razes para os produtos serem difceis de usar: 1- O desenvolvimento focado para mquina e sistema Durante o planejamento e o desenvolvimento do produto, a importncia/nfase e o foco so mais voltados para o sistema e para a mquina, e no para o usurio final. Existem trs componentes que devemos considerar para qualquer situao de performance do ser humano: o humano, o contexto e a atividade.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

28 Porm, essas preocupaes no costumam incomodar os desenvolvedores, porque existe uma suposio de que, j que os humanos so adaptveis e flexveis, mais fcil deix-los se adaptarem. Desenvolvedores ficam mais confortveis ao trabalharem enganosamente, tornando os ambientes confusos e ambguos existncia humana. Alm disso, contam, na maior parte das vezes, com as habilidades das pessoas para resolverem os problemas tcnicos. Desenvolvedores e designers fazem os produtos e, muitas vezes, testam apenas entre si, sem considerar o usurio final. 2- Os objetivos dos usurios mudam Os usurios de algum tempo atrs tinham pouco conhecimento tcnico de computadores e pouca pacincia para pensarem na hora de adquirir um produto. Os usurios atuais esto mais exigentes e no procuram mais a tecnologia como status, e sim como uma ferramenta que eles possam realmente utilizar. 3- Projetar produtos usveis uma tarefa complexa O princpio da usabilidade ainda no bvio entre os desenvolvedores. Existe uma grande necessidade para entender o que um senso comum no processo de planejamento de produtos mais usveis para os usurios finais. 4- A equipe especialista nem sempre trabalha em um caminho integrado Muitas vezes, o visual, a ajuda do sistema e os manuais so desenvolvidos e elaborados por equipes separadas que se comunicam muito pouco durante o processo de desenvolvimento. Felizmente, algumas empresas iniciaram o desenvolvimento de equipes multidisciplinares para resolverem o problema. 5- Projetar e implementar no a mesma coisa Projetar, nesse caso, est relacionado a como os produtos se relacionam, considerando que a implementao est relacionada a como eles trabalham. A nova
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

29 gerao de programadores de linguagem e a existncia de ferramentas de desenvolvimento automtico de cdigo diminuem o desafio da implementao. Entretanto, com essa mudana, a responsabilidade do projetor aumenta. NIELSEN e LORANGER (2007) informam que os desenvolvedores de pginas web possuem menos de dois minutos para se comunicarem com um usurio potencial. Cada pgina obrigada a justificar o fato de sua importncia quando acessada. Se a pgina no explica rapidamente e de forma clara, o usurio desiste e procura a informao em outro local que fale melhor a sua lngua. A usabilidade a qualidade que caracteriza o uso de um sistema interativo. Ela se refere relao que se estabelece entre usurio, tarefa, interface, equipamento e demais aspectos do ambiente no qual o usurio utiliza o sistema. (CYBIS, BETIOL e FAUST, 2007, p. 23) Segundo CYBIS, BETIOL e FAUST (2007), existem Critrios Ergonmicos principais a serem considerados: Conduo: Nesse contexto, a interface deve aconselhar, orientar, informar e conduzir o usurio na interao com o sistema. Convite: Levar o usurio a realizar determinadas aes. Agrupamento/distino de itens: As informaes devem ser apresentadas de maneira organizada. Legibilidade: Deve estar preocupada com os diferentes tipos de usurios e apresentar as diferenciaes corretas para ocasionar uma leitura mais agradvel. Feedback imediato: Sem o feedback adequado, o usurio pode ter atitudes prejudiciais aos processos em andamento.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

30 Carga de trabalho: Diz respeito a todos os elementos da interface que tm um papel importante na reduo da carga cognitiva e da perspectiva do usurio e no aumento da eficincia do dilogo. Brevidade: Elementos capazes de acelerar as entradas individuais. Densidade informacional: Carga de trabalho perceptivo e cognitivo que o usurio exerce ao se deparar com um site. Controle explcito: Critrio aplicado, em particular, s tarefas longas e sequenciais, nas quais o processamento seja demorado. Aes explcitas do usurio: Quando o processamento pelo computador resulta de aes explcitas dos usurios, estes aprendem e entendem melhor o funcionamento da aplicao; assim, menos erros so observados. Adaptabilidade: necessrio que a interface proponha maneiras distintas de realizar a tarefa. Flexibilidade: A flexibilidade estrutural corresponde s diferentes maneiras colocadas disposio do usurio para a realizao de uma mesma tarefa. Gesto de erros: Mecanismos que permitem evitar ou reduzir a ocorrncia de erros e que favoream sua correo. Proteo contra os erros: A interface protege a interao contra os erros. Homogeneidade/coerncia: O usurio, a cada tela, tenta empregar estratgias de interao; e a interface homognea auxilia em sua interpretao da informao. Significado dos cdigos e denominaes: Refere-se adequao do objeto ou informao apresentada. Se no forem significativos, tendem a ocasionar erros.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

31 Compatibilidade: Ser compatveis independentemente da cultura. Para NIELSEN (2001 apud PREECE, ROGERS e SHARP, 2005), existem dez princpios fundamentais de usabilidade: Visibilidade do status do sistema: O sistema mantm os usurios sempre informados sobre o que est acontecendo, fornecendo um feedback adequado dentro de um tempo razovel. Compatibilidade do sistema com o mundo real: O sistema fala a linguagem do usurio ao utilizar palavras, frases e conceitos familiares a ele, em vez de termos orientados ao sistema. Controle do usurio e liberdade: O sistema fornece maneiras de permitir que os usurios saiam facilmente de lugares inesperados em que se deparam, utilizando sadas de emergncia claramente identificadas. Consistncia e padres: O sistema evita fazer com que os usurios tenham que pensar se palavras, situaes ou aes diferentes significam a mesma coisa. Ajuda os usurios a reconhecer, diagnosticar e recuperar-se de erros: O sistema utiliza linguagem simples para descrever a natureza dos problemas e sugere uma maneira de resolv-los. Preveno de erros: Quando possvel, impede a ocorrncia de erros. Reconhecimento em vez de memorizao: Tornar objetos, aes e opes visveis. Flexibilidade e eficincia de uso: O sistema fornece aceleradores invisveis aos usurios inexperientes, embora permita aos mais experientes realizar tarefas com mais rapidez.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

32 Esttica e design minimalista: O sistema evita o uso de informaes irrelevantes ou raramente necessrias. Ajuda e documentao: O sistema fornece informaes que podem ser facilmente encontradas e auxilia mediante uma srie de passos concretos que podem ser facilmente encontrados e seguidos. Para PREECE, ROGERS e SHARP (2005), as metas de usabilidade (parte interna da Figura 1) so fundamentais para o design de interao. J no crculo externo esto as metas decorrentes da experincia do usurio e que so definidas com menos clareza.

FIGURA 1- METAS DA USABILIDADE E METAS DECORRENTES DA EXPERINCIA DO USURIO. ADAPTADO DE: PREECE, ROGERS E SHARP, 2005

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

33 BASTIEN e SCAPIN (1993) demonstram uma lista de critrios ergonmicos: Conduo: Conduo do usurio na interao com o computador, exibindo mensagens e sons que o ajudem em sua navegao. Carga de trabalho: Preocupao com os elementos expostos na interface, analisando sua carga cognitiva e verificando se ela ajuda ou atrapalha na percepo do usurio. Controle explcito: Quanto controle que os usurios tm sobre o processamento de suas aes no sistema/site, permisso para que o usurio consiga realizar suas preferncias no sistema/site. Adaptabilidade: Capacidade do sistema de reagir conforme o contexto do usurio, utilizando linguagens simples. Gesto de erros: Reduo ou eliminao da ocorrncia de erros; e, quando eles ocorrerem, fornecimento de um caminho rpido para a correo destes. Coerncia: Interfaces so conservadas em contextos idnticos (mantm-se a estrutura a qual o usurio esteja familiarizado) e distintas para contextos diferentes (quando se trata de algo novo e que no queira gerar confuso). Significado dos cdigos e denominaes: Adequao da linguagem entre o objeto ou a informao apresentada ou pedida e sua referncia.

2.3. Problemas de usabilidade que ainda persistem


NIELSEN e LORANGER (2007) realizaram uma lista de estudos de usabilidade entre os anos 1994 a 1999, classificando problemas de usabilidade em pginas web e classificando-os como de Alto, Mdio e Baixo Impacto, detalhados abaixo:

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

34 Alto Impacto: importante que os desenvolvedores prestem ateno ao problema e que o verifiquem meticulosamente, ocasionam falhas em websites. Exemplos: Links que no mudam de cor quando visitados: 74% dos sites utilizam; usurios devem entender onde esto, onde estavam e para onde podem ir. Quebra do boto voltar: Esse boto o segundo recurso mais utilizado na navegao web, sendo necessria sua aplicao adequada. Abertura de novas janelas do navegador: Ao clicar em um link ou boto, os usurios normalmente esperam que uma nova pgina da web aparea no lugar da ltima. Para desfazer suas aes, eles clicam em Voltar, mas se uma nova janela aberta, o usurio no consegue voltar. Janelas pop-up: Os usurios irritam-se com pop-ups e os bloqueiam para que no sejam abertos. Elementos de design que parecem anncios: Os usurios possuem cegueira a banners, ignorando-os. Violando convenes da web: Se um site fornece uma determinada funo que simples, o usurio espera que outro site faa igual. Contedo vago e modismo vazio: O contedo deve ser direto. No utilizar uma linguagem complexa. Contedo denso e texto no escanevel: Pginas cheias de texto pressupem que eles tero um rduo trabalho de leitura. Mdio Impacto: ainda importante que desenvolvedores evitem cometer o equvoco, porm no uma prioridade essencial. Exemplos:

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

35 Flash: A Macromedia Flash era 99% ruim. Hoje alguns problemas de acessibilidade esto sendo resolvidos, mas ainda causam transtornos. Listagens e pesquisas de baixa relevncia: Busca ineficaz, que no traz o resultado esperado. Multimdia e vdeos longos: So aceitveis porque a banda melhorou. A qualidade dos vdeos tambm melhorou, mas aconselhvel que tenham menos de um minuto para manter a ateno do usurio, pois vdeos longos desprendem a ateno. Layouts congelados: O contedo exibido em uma largura fixa,

independentemente da janela em que exibido, gerando barras de rolagem horizontais. Incompatibilidade entre vrias plataformas: Para os navegadores, a mdia que um usurio utilize uma verso anterior at cinco anos depois do lanamento de uma verso nova. Por exemplo, se o IE (Internet Explorer) verso 6 foi lanado em 2001 e o IE verso 7 em 2006, logo 2006 + 5 anos = 2011. Rolagem: Alguns usurios ainda no utilizam a rolagem. URLs complexas: Utilizar de 20 a 50 caracteres para descrever uma URL. No colocar URLs extensas que no contenham nenhum significado para o usurio. Componentes de interface grfica personalizada: Utilizar barra de rolagem padro, pois um design diferente pode desfigurar sua real funo, dificultando o acesso do usurio. Contedo ultrapassado: No utilizar informao antiga como se fosse atual. Recomenda-se atualizar, no mnimo, as pginas mais importantes.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

36 Inconsistncia dentro de um website: Se o site possui sub-sites, mantenha a mesma cara nos demais ou, pelo menos, deixe claro que o usurio est em uma pgina do mesmo local onde iniciou. Solicitaes prematuras de informaes pessoais: Os usurios no gostam de fornecer dados pessoais como RG ou CPF. Vrios sites: No criar diversos sites com vrias arquiteturas de informao distintas. Baixo Impacto: Os desenvolvedores devem lembrar-se de evitar esse tipo de erro em projetos, porm no ocasionam falhas em websites. Exemplos: Tempo de download lento Frames Clicabilidade incerta: O usurio nem sempre sabe onde deve clicar na tela. No criar elementos que possa confundi-lo. Registro: Os usurios no gostam de entrar em sites que necessitem de cadastro para acessarem a informao. Menus suspensos e menus em cascata: Quanto mais complexo o menu, mais complicado de manipul-lo. Plug-ins e tecnologia de ponta: No se deve forar novas tecnologias aos usurios. No exigir que eles instalem plug-ins, porm esse item deixou de ser de alto impacto, pois alguns navegadores j mantm as verses mais atualizadas. Interface 3D com o usurio: Utilize, desde que seja necessrio e til para a aplicao. As interfaces 3D, muitas vezes, so difceis de manipular e de compreender.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

37 Design poludo: Quanto mais detalhes, mais ateno em locais errados o designer vai atrair. Pginas splash: Essas pginas do a impresso de que se cuida mais da imagem que da soluo dos problemas e da informao (pginas com aberturas animadas). Imagens grficas em movimento e texto deslizante: Tiram a ateno do usurio ao contedo. Palavras inventadas: Apenas confundem a compreenso do usurio. No exposio de quem est por trs das informaes: Seu site deve passar confiabilidade e credibilidade. Todos os itens listados, quando recebem a ateno necessria, so fceis e simples de resolver, proporcionando uma qualidade diferenciada no site. A usabilidade, para ser aplicada de uma forma melhor, dividida em reas que estudam uma parte especfica de cada recurso que um site oferece ao usurio. Dentre as reas estudadas, est a Arquitetura da Informao, que est cada vez mais presente na elaborao e no planejamento de sites.

2.4. Arquitetura de informao e navegao


Segundo DUQUE e VIEIRA (2008), um assunto que contribui para a organizao da informao na web a Arquitetura da Informao (AI), expresso criada por Wurman em 1996, durante a dcada de 1970, sobre a nova disciplina que surgia com o objetivo de organizar o fluxo da informao para torn-la mais clara e compreensvel. A estrutura base desse fluxo a parte mais importante da informao que o usurio ter em seu primeiro contato. ROSENFELD e MORVILLE (2002 apud REIS, 2007) apontam que a AI de um site pode ser dividida em quatro grandes sistemas interdependentes, os quais propiciam uma viso geral dos elementos informacionais do site e auxiliam na organizao do contedo:
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

38 1) Sistema de Organizao (Organization System): Define o agrupamento e a categorizao (exemplo: itens de menus verticais e horizontais) de todo o contedo informacional. 2) Sistema de Navegao (Navigation System): Especifica as maneiras de navegar (exemplo: navegar por um menu, por links dentro de uma pgina), de se mover pelo espao informacional e hipertextual. 3) Sistema de Rotulao (Labeling System): Estabelece as formas de

representao e de apresentao da informao, definindo signos para cada elemento informativo. A Rotulao muito utilizada em sites por uso de cones e bullets. 4) Sistema de Busca (Search System): Determina as perguntas que o usurio pode fazer ou palavras que podero ser pesquisadas. Nesse sentido, NIELSEN (2000) sugere que as interfaces de navegao

(ambientes/sites) precisam ajudar os usurios a responder a trs questes: Onde estou? Onde estive? Aonde posso ir? A navegao nada mais que o percurso realizado em um ambiente/site, e quando ela realizada, poucos usurios conhecem seus limites, necessitando a insero de pontos de referncia, como os breadcrumbs. Estes so um caminho de migalhas de pes, que so o caminho anterior da navegao do usurio no site. Dessa forma, o usurio capaz de voltar ao seu ponto de partida ou conseguir enxergar o local em que se encontra no ambiente, auxiliando-o numa navegao mais simples. Uma preocupao na construo da Arquitetura da Informao a semelhana das terminologias que podem confundir o entendimento do usurio. Para IIDA (2005), a Memria de Curta Durao (MCD) de natureza fontica. Enquanto a Memria de Longa Durao (MLD), que possui uma capacidade grande de armazenamento de longo prazo, codifica-se

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

39 pelos aspectos semnticos, ou de contedos. Esta tende a confundir informaes de conceitos semelhantes. Pela pesquisa bibliogrfica apresentada, pode-se observar que a Arquitetura da Informao influi no bom desempenho de um site, visto que muitos problemas ocorrem devido a uma informao posicionada em local imprprio ou nomeada de forma inadequada. Segundo REIS (2007), uma das principais funes da Arquitetura da Informao organizar a informao disponibilizada na interface para diminuir ou eliminar o tempo que o usurio perde no aprendizado da interface. Segundo MORVILLE (1998), o arquiteto de informao: Esclarece a misso e a viso da pgina, balanceando as necessidades da organizao e de seus usurios. Determina qual contedo e funcionalidade o site ir apresentar. Especifica como os usurios iro encontrar a informao por meio da navegao, da rotulao e dos mecanismos de busca. Mapeia como o site ir acomodar seu crescimento ao longo do tempo. Por outro lado, o mesmo autor afirma que os usurios apenas notificaro os arquitetos de informao caso tenham problemas. Quando a informao est bem definida, provavelmente no haver necessidade de notific-los. Segundo MORVILLE (1998), a arquitetura de informao para um site grande e complexo necessita de duas caractersticas: pensar como um usurio e, ao mesmo tempo, pensar como um especialista.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

40 Como essas duas caractersticas no so encontradas em um nico indivduo, arquitetos de informao desenvolveram algumas tcnicas e metodologias para

conseguirem um melhor resultado em seus sites, como o Mtodo Card Sorting.

2.4.1

Mtodo Card Sorting

Nielsen (2004) alerta que o maior desafio para desenvolver websites a criao da arquitetura da informao. Uma metodologia primria o Card Sorting (Figura 2), em que: Escrevem-se os termos principais do site em cartas (pode ser de papel). Misturam-se essas cartas de termos e entregam-se ao usurio. Pede-se que o usurio separe os termos em grupos conforme o que ele achar melhor (pode ser muitas pilhas, assim como podem ser poucas). Um passo opcional a solicitao de sugestes dos usurios para a criao dos termos conforme o que eles acham e que sejam organizados com as demais cartas.

FIGURA 2 TESTE COM CARD SORTING. FONTE: HTTP://WWW.DCC.UNICAMP.BR/~HANS/MC750/UIDESIGN/CARDSORT.GIF

Nielsen (2004) elaborou um experimento com 168 usurios e depois reduziu para 20 usurios, considerando o mesmo mtodo de seleo dos participantes, obtendo resultados similares em vrios itens. Para o mtodo de Card Sorting, o autor no recomenda que seja realizado com apenas 5 usurios, visto que os resultados so de 0,75 de correlao. J com 15 usurios possvel obter 0,90 de correlao, e aps 15 usurios essa correlao
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

41 aumenta muito pouco. Com 30 usurios, o autor obteve 0,98 de correlao, havendo a necessidade de dobrar o nmero de usurios para aumentar 0,08. Em vez de aumentar o nmero de usurios, Nielsen recomenda que se escute o que eles tm a comentar, pois pode ser muito mais enriquecedor que o aumento do nmero de usurios entrevistados. Esse nmero de usurios definido de acordo com a forma de aplicao. No Card Sorting Aberto, o usurio tem total liberdade para escolher onde pode empilhar os termos e inclusive criar novos termos para adaptar sua necessidade. Entretanto, em testes para identificao de problemas, as tarefas so pr-definidas, e o usurio normalmente segue as orientaes. Quanto aplicao, no Card Sorting Aberto (Figura 3 esquerdo), definem-se os termos e os usurios classificam as informaes livremente. Por outro lado, no Card Sorting Fechado (Figura 3 direito), so definidas categorias e itens principais, e os usurios classificam seus subitens/subcategorias. Essa definio antecipada normalmente definida por especialistas.

FIGURA 3 - CARD SORTING ABERTO E CARD SORTING FECHADO. FONTE: UXBLOG.LOCAWEB.COM.BRS

2.4.2

Wireframes

Para simular como a informao ser distribuda e como ela ser apresentada no site, uma tcnica utilizada a elaborao de wireframes. Segundo OLIVEIRA (2008), o wireframe tem a funo de representar esquematicamente todos os elementos que compem a pgina/sistema. Imagens, textos, formulrios, animaes em Flash, mecanismos de busca,

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

42 porm de forma esttica, que muitas vezes no passam uma boa impresso para o cliente. Wireframes utilizam os recursos de layout para deixar a informao mais leve e entendvel.

FIGURA 4 EXEMPLO DE WIREFRAME. FONTE: HTTP://WEBINSIDER.UOL.COM.BR/IMG/WIREFRAME_02.GIF

Segundo

SADDI,

AQUINO

ZILSE

(2008),

wireframe

exerce

algumas

caractersticas fundamentais no processo de criao e desenvolvimento de um site, servindo como base para que o responsvel pela parte grfica do projeto possa iniciar seu trabalho. O wireframe composto pela interface base, com suas interaes e com as devidas nomenclaturas/terminologias aplicadas. Um mesmo site pode ter mais de um wireframe para que seja testado e identificado qual o de melhor utilidade pelo usurio.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

43 De acordo com SADDI, AQUINO e ZILSE (2008), os wireframes devem ser atualizados ao longo do projeto, sempre testados com amostras dos usurios finais. Para OLIVEIRA (2008), no wireframe que se definem a identidade e a marca do produto/empresa. Esse sistema garante que cada pgina tenha uma unidade grfica, padronizada com a presena da marca, do patrocinador e do cliente do site. Ainda de acordo com esse autor, o wireframe apresenta problemas e vantagens: Problemas ao utilizar o wireframe: Fazer o cliente entender que, no wireframe, o que se deve analisar o fluxograma, e no o visual, pois ele no o visual final. Comprometer a criao de designers, que se prendem estrutura, gerando dificuldades inovao. Escalas no so proporcionais (posio dos objetos). Ainda no um processo muito utilizado no desenvolvimento de projetos. Vantagens ao utilizar o wireframe: Apresenta conceitos de usabilidade aplicados. Auxilia no fluxograma da informao. Auxilia nos testes de usabilidade dos projetos. uma documentao do projeto, esclarecendo o que foi feito e o que foi pedido. A importncia da documentao est embasada na necessidade de comunicao com os feedbacks coletados do usurio, a fim de gerar menos problemas de usabilidade depois da construo do site.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

44 Aps observar a importncia da AI e seus mtodos de anlise, possvel considerar como ela favorece uma organizao diferenciada da informao. Entretanto, a AI apenas vlida quando se preocupa e seguem padres e recomendaes internacionais de sistemas informacionais.

2.5. Padres de qualidade


A ISO (International Organization for Standardization Organizao Internacional de Normalizao) tem como objetivo promover o desenvolvimento de normas, testes e certificao, com o intuito de encorajar o comrcio de bens e servios. Essa organizao formada por representantes de 91 pases, cada um representado por um organismo de normas, testes e certificao. Por exemplo, o American National Standards Institute (ANSI) o representante dos Estados Unidos na ISO. O ANSI uma organizao de padres que apoia o desenvolvimento de normas consensuais nos Estados Unidos. No entanto, no desenvolve nem escreve essas normas, mas providencia estruturas e mecanismos, a fim de que grupos industriais ou de produtos se juntem para estabelecer um consenso e desenvolver uma norma.

2.5.1

Normas de interao homem-computador (IHC)

Existem dois padres internacionais que promovem a usabilidade da interao homem-computador (IHC): A ISO 9241-11 alega que a usabilidade ocorre o quanto um produto pode ser usado por usurios especficos para realizao de metas com efetividade, eficincia e satisfao em um especfico contexto do usurio (Figura 5).

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

45

FIGURA 5 ESTRUTURA DA USABILIDADE. FONTE: ISO 9241-11

A ISO 13407 caracterizada pelo envolvimento dos usurios e seu entendimento das tarefas requeridas, da apropriao da funcionalidade entre usurio e tecnologia, da interao da soluo do projeto e da multidisciplinaridade do projeto. Essa norma foi desenvolvida pelo Comit Tcnico (Technical Commitee ISSO/TC 159, Ergonomics, Subcommittee SC 4, Ergonomics of human-system interaction). Uma publicao de Normas Internacionais necessita da aprovao de 75% dos membros da corporao por meio de voto. O modelo ainda explica como alcanar qualidade de uso por meio de atividades de projeto centrado no usurio, para processos de software interativo. As etapas so: entender e especificar o contexto de uso; especificar os requisitos organizacionais e os do usurio; produzir solues de projeto; avaliar projetos em contraste com os requisitos. Os projetos centrados no usurio so sistemas interativos que focam especialmente na elaborao de sistemas usveis. Trata-se de uma atividade multidisciplinar na qual incorpora fatores humanos a conhecimentos ergonmicos e tecnolgicos. A aplicao de

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

46 fatores humanos e ergonmicos interage com sistemas para aumentar efetividade e eficincia, melhora as condies de trabalho e contraria possveis barreiras no uso, na segurana e na performance. As aplicaes ergonmicas valorizam a capacidade e a habilidade, e auxilia nas limitaes e nas necessidades do ser humano. Para CYBIS (2009), as propostas da norma ISO 13407, sobre o ciclo de concepo centrada no usurio, so as seguintes: O desenvolvimento deve ser feito em ciclos de anlise, concepo e testes com usurios; A concepo deve ser rpida, baseada em prototipagem; Em cada ciclo, so realizados testes do prottipo com os usurios; Caso o prottipo no satisfaa as necessidades dos usurios, um novo ciclo de anlise, concepo e testes dever ser realizado; Os prottipos so revisados com base nos resultados dos testes e em novas informaes que se obtenham dos usurios; Tudo deve ser feito com o envolvimento do usurio; A norma prope ainda que a equipe de desenvolvimento seja multidisciplinar. Sistemas centrados no usurio ajudam na motivao da aprendizagem. Os benefcios incluem o aumento de produtividade, a qualidade do trabalho, a reduo do custo no suporte e no treinamento, melhorando a satisfao do usurio. A ISO visa auxiliar os mtodos e a aproximao do usurio com projetos de hardware e software, para identificar e planejar atividades efetivas.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

47

2.5.2

ISO de qualidade de software

A ISO/IEC 9126 traz um modelo que caracteriza a qualidade de software por meio das perspectivas: Qualidade interna, referente s propriedades estticas do cdigo do software; Qualidade externa, relacionada s propriedades dinmicas do cdigo do software quando executado; Qualidade no uso, referente medida na qual o software atende s expectativas do usurio no ambiente de uso. Essas perspectivas tm sido vinculadas ergonomia, a qual est preocupada com fatores no ambiente de uso fsico e social, e influenciam o usurio no alcance de seus objetivos (ou seja, a melhoria da usabilidade dos produtos). Segundo OLHER (2006), todos esses fatores, medidos como eficcia, produtividade e satisfao, determinam o comportamento e o sucesso do usurio frente s suas tarefas, portanto devem ser considerados por meio do processo de software. Medidas de eficcia, produtividade e satisfao so influenciadas no apenas pela facilidade de uso do software, mas tambm pela funcionalidade, confiabilidade e eficincia, alm de hardware apropriado, usurio e tarefa. Nota-se que o relacionamento da qualidade no uso com outras perspectivas dependem do tipo de usurio. Desse modo, especificar ou medir qualidade no uso requer, alm de medidas de eficcia, produtividade e satisfao, alm de detalhes das caractersticas do usurio, de suas tarefas e do contexto de uso. Para alcanar essa perspectiva, mais especificamente em software interativo e focando nos quesitos da qualidade no uso para o usurio final, sugere-se que uma abordagem de projeto centrado no usurio fundamente o processo de software interativo.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

48 As normas de qualidade, como j apresentadas, passaram a ser exigidas e discutidas com mais ateno, visando ao melhoramento da qualidade de sites e de sistemas de interao. O consrcio internacional W3C dita os padres da web que devem ser aplicados por desenvolvedores na construo de sites.

2.6. W3C
A W3C (World Wide Web Consortium) o principal consrcio de padronizao e regras para a exibio de contedos para todos os navegadores de internet (Internet Explore, Mozila Firefox, Opera, Safari, Chrome, entre outros). Seu atual diretor Tim Berners-Lee, que inventou a WWW em 1989. Ela padroniza os formatos ideais de pginas web que devem ser utilizados para facilitar o acesso e o entendimento do usurio final. Os princpios da W3C so: Web para Todos: O valor social da web que permite a comunicao humana, o comrcio e as oportunidades para compartilhar conhecimento. Trata-se de fazer com que esses benefcios fiquem disponveis para todas as pessoas, independentemente da configurao da mquina, do idioma, da cultura, da localizao geogrfica, da habilidade fsica ou mental. Tudo na web: O nmero de diferentes tipos de dispositivos que podem acessar a web tem crescido muito e, para isso, necessrio que o contedo da web esteja padronizado. Web de consumidores e autores: Por muitos anos, a web foi um meio de leitura e de consulta. Hoje, para muitos usurios, por meio de blogs e wikis, a web trouxe mais usurios e autores; as redes sociais trouxeram outras experincias com contedo da web.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

49 Web de dados e servios: Algumas pessoas deduzem a web como um repositrio gigante de dados ligados, enquanto outras consideram como um enorme conjunto de servios que trocam mensagens. As duas vises so complementares e elas podem resolver problemas cada vez mais complexos. Web de confiana: As pessoas agora "se encontram na web" e realizam suas relaes pessoais e comerciais, s vezes, sem nunca se encontrarem pessoalmente. A W3C reconhece essa confiana e mantm pesquisas para possibilitar novos meios de interaes mais complexas em todo o mundo. O consrcio conta atualmente com cerca de 500 membros, cujo objetivo conduzir a web para que atinja seu potencial, por meio de fruns abertos que promovam sua evoluo e asseguram a sua interoperabilidade. O W3C desenvolve padres para a criao e para a interpretao dos contedos para a web. Atualmente, a interpretao da informao depende principalmente de Navegadores de Internet.

2.7. Navegadores de internet e suas funes


Navegadores so capazes de interpretar o cdigo HTML ou XHTML, linguagem de marcao HTML (do ingls Hyper Text Markup Language), ou XHTML (do ingls eXtensible Hypertext Markup Language), uma extenso do HTML. Porm, para que a interpretao seja realizada corretamente, necessrio que desenvolvedores e empresas se preocupem em gerar esse cdigo de forma padronizada. Existe uma grande discusso sobre qual seria o melhor navegador a ser utilizado pelo usurio e qual deles apresenta um melhor desempenho. Segundo ARAGAKI (2005), a partir do ano de 2004, o navegador Internet Explorer, que era praticamente 100% usado pelos usurios, ganhou dois concorrentes: Mozila Firefox e Opera. Em novembro de 2004, o Internet Explorer, que era utilizado por 97% dos usurios, passou a ser utilizado por 87%. O Firefox alcanou 8% e o Opera menos de 1%.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

50 Muitas vezes, os navegadores possuem uma interpretao da linguagem de marcao, diferente das recomendaes exigidas pela W3C. Existem tambm navegadores que interpretam a informao de forma melhor em outros tipos de dispositivos. Por exemplo, o navegador Opera fortemente utilizado em dispositivos mveis como o celular. NIELSEN e LORANGER (2007) informam que as mudanas tecnolgicas influenciam na usabilidade, visto que um navegador que lder de mercado pode rapidamente perder a liderana se um concorrente elaborar uma ferramenta que atenda melhor aos critrios de qualidade padronizados para as pginas da web. O site da W3Schools (site de treinamento focado em tecnologias web) apresenta dados do perfil do usurio (tipo de navegador) que so utilizados para acessar pginas da web (Tabela 2). O Internet Explorer utilizado por 41% dos usurios contra 47,7% do Firefox.
TABELA 2 ESTATSTICAS DE USO DE NAVEGADORES FONTE: WWW.W3SCHOOLS.COM 2009 Maio Abril Maro Fevereiro Janeiro IE7 (Internet Explorer) 21.3 % 23.2 % 24.9 % 25.4 % 25.7 % IE, verso 6 14.5 % 15.4 % 17.0 % 17.4 % 18.5 % IE, verso 8 5.2 % 3.5 % 1.4 % 0.8 % 0.6 % Firefox 47.7 % 47.1 % 46.5 % 46.4 % 45.5 % Google Chrome 5.5 % 4.9 % 4.2 % 4.0 % 3.9 % Safari 3.0 % 3.0 % 3.1 % 3.0 % 3.0 % Opera 2.2 % 2.2 % 2.3 % 2.2 % 2.3 %

2.8. Acessibilidade
A W3C explica formas de boa utilizao da linguagem web HTML e XHTML. Quando a linguagem de marcao utilizada de forma correta, so reduzidas as chances da existncia de barreiras para o acesso informao. As padronizaes so fundamentais para que usurios com algum tipo de deficincia tambm consigam utilizar a web como usurios comuns.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

51 A Lei Nacional n 10.098 (2000) estabelece normas gerais e critrios bsicos para a promoo da acessibilidade das pessoas portadoras de deficincia ou com mobilidade reduzida, e d outras providncias. Art. 2o Para os fins desta Lei so estabelecidas as seguintes definies:
I acessibilidade: possibilidade e condio de alcance para utilizao, com segurana e autonomia, dos espaos, mobilirios e equipamentos urbanos, das edificaes, dos transportes e dos sistemas e meios de comunicao, por pessoa portadora de deficincia ou com mobilidade reduzida (...)

d) barreiras nas comunicaes: qualquer entrave ou obstculo que dificulte ou impossibilite a expresso ou o recebimento de mensagens por intermdio dos meios ou sistemas de comunicao, sejam ou no de massa.

Segundo o Servio Federal de Processamento de Dados, SERPRO, acessibilidade na internet ou acessibilidade na web significa permitir o acesso web por todos, independentemente do tipo de usurio, situao ou ferramenta. So acessveis as pginas que tornam o acesso de um maior nmero de usurios possvel. Esses usurios incluem pessoas que utilizam tecnologias assistivas, pessoas idosas e outras que acessam a web por meio de seus dispositivos mveis. A acessibilidade na web engloba: Sites e aplicaes web: Em que as pessoas podem perceber, compreender, navegar e interagir. Navegadores, players de mdia, plug-ins: Podem ser usados efetivamente por pessoas com deficincias e funcionam bem com tecnologias assistivas utilizadas por algumas pessoas com deficincia para acessar a web. Ferramentas de autoria web e outras tecnologias que envolvem a web: Utilizadas para produo de contedo web e outras funes.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

52 A criao de pginas web com design acessvel beneficia no s pessoas com deficincias, mas tambm pessoas sem deficincia, pois agiliza a busca pela informao. Abaixo so citados alguns problemas que dificultam o acesso s pginas: Conexo discada (conexo lenta); Usurios de dispositivo mvel (celular, PDA). A resoluo de uma tela de celular de aproximadamente 128x160 pixels, ou seja, uma tela reduzida; Acesso sem udio; Acesso em locais com rudo; Acesso em locais pouco iluminados. Tais condies limitam o acesso dessa extensa faixa da populao internet, uma vez que a web normalmente planejada e desenvolvida considerando a ampla faixa da populao considerada ideal, e no a real. De acordo com POLLETO (2009, p.80), Vale ressaltar que a legislao brasileira garante a acessibilidade em seus sites eletrnicos e portais pblicos. O Decreto 5296/04 que regulamenta as Leis 10.098/00 e 10.048/00, no seu artigo 47 torna obrigatria a acessibilidade nos portais e stios eletrnicos da administrao pblica da rede mundial de computadores para o uso das pessoas com necessidades especiais, garantindo-lhes o pleno acesso s informaes disponveis. Tal decreto um pequeno passo rumo efetiva acessibilidade do ciberespao na sua totalidade. Segundo ROMAACH, ARNAO e WARDFORD (2003), os usurios com limitaes no domnio sensorial, como no caso da viso, usam diferentes mtodos para aumentar o tamanho, o contraste ou as caractersticas gerais de visibilidade de informaes da internet. As situaes mais utilizadas so os monitores grandes, as letras de tamanho grande, o alto contraste e a ampliao do software de determinadas zonas do monitor. Alguns desses
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

53 recursos, que auxiliam na visibilidade da informao, esto sendo implementados diretamente em sistemas operacionais utilizados pelos computadores. Os problemas mais comuns e graves para o acesso s pginas normalmente esto relacionados viso. Segundo FARINA, PEREZ e BASTOS (2006), algumas pessoas possuem a retina totalmente insensvel a cor, possuindo uma viso apenas em branco e preto ou em tons de cinza. Uma viso cromtica normal diferencia a mescla das trs quantidades de luz: claro-escuro, vermelho-verde e amarelo-azul. Indivduos com percepo anmala das cores tm as seguintes anomalias: Protanomalia: a percepo anmala do vermelho; Deuteranomalia: a percepo anmala do verde; Tritanomalia: a percepo anmala do azul. O daltonismo, que uma anomalia hereditria, no tem uma definio correta, visto que os tipos podem variar de uma confuso entre as cores vermelho, laranja, amarelo e verde, ou quase igual, porm com menos confuso. O daltonismo ocorre normalmente nos homens, 95% dos casos, e somam mundialmente 10% de toda a populao masculina. Segundo dados atuais da OMS (Organizao Mundial da Sade) existem aproximadamente 314 milhes de deficientes visuais em todo o mundo, dentre os quais 45 milhes so cegos e 135 milhes apresentam algum tipo de baixa viso. A grande maioria dos casos de cegueira, 87%, est presente nos pases em desenvolvimento, incluindo o Brasil. Os problemas visuais ocorrem mais na populao idosa, e a populao feminina corre mais risco em todas as idades. O nmero de cegos por infeco tem reduzido, e os casos de cegueira esto crescendo em relao idade.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

54 O nmero de deficientes visuais no Brasil pode ser considerado elevado. Segundo o IBGE (2000), Instituto Brasileiro de Geografia e Estatstica, no Censo de 2000, foram contabilizados 148.000 indivduos completamente cegos. Por outro lado, pessoas que declararam ter algum tipo de dificuldade para enxergar totalizaram 16 milhes, sendo que foram estimados que mais 2 milhes possuam baixa viso. Segundo a OMS, as principais causas de cegueira no Brasil acontecem em decorrncia de: catarata (40%), glaucoma (15%), retinopatia diabtica (7%), cegueira na infncia (6,4%) e degenerao macular relacionada idade (5%). Segundo ROMAACH, ARNAO e WARDFORD (2003), a W3C prope que a acessibilidade na web representa o quanto uma pessoa com alguma inabilidade percebe, entende, navega e interage nesse ambiente. A acessibilidade na web tambm contribui para o acesso de pessoas idosas, as quais tm suas habilidades prejudicadas no decorrer dos anos. A usabilidade tambm se aplica quando a acessibilidade de indivduos com deficincia visual almejada e, nesse sentido, as tecnologias assistivas precisam ser estudadas e conhecidas pelos desenvolvedores de sites.

2.8.1 Tecnologias assistivas


As tecnologias assistivas so quaisquer tipos de tecnologias, especificamente concebidas para auxiliar pessoas com incapacidades ou necessidades especiais a executarem atividades do cotidiano, tais como: cadeira de rodas, mquinas de leituras ou prteses. No uso da web, so comuns: hardwares, perifricos e programas especiais que facilitam a navegao na internet. Ferramentas de auxlio aos deficientes visuais e uma boa arquitetura da informao influem no bom desempenho de acesso a um site, visto que muitos problemas ocorrem devido a uma informao posicionada em local imprprio ou nomeada de forma inadequada.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

55 Para ROMAACH, ARNAO e WARDFORD (2003), existem casos em que o usurio, para navegar pelos menus com as setas do cursor, passa por um processo penoso, portanto conveniente colocar teclas de acelerao ou de atalhos. Isso muito til para os usurios com problemas de manipulao ou de viso, porque muitas vezes eles necessitam realizar vrias tentativas at acertar a opo desejada. importante o alto nvel de usabilidade, pois segundo NIELSEN e LORANGER (2007), o usurio pode deixar o site quando sente falta de clareza e de confiana, ou no consegue respostas satisfatrias para suas dvidas. Alguns softwares de leituras de telas disponibilizados no mercado apenas funcionam desde que o hipertexto esteja bem desenvolvido e padronizado conforme os padres especificados pela W3C. Dessa maneira, acessibilidade nas pginas da web significa, antes de tudo, ter acesso regular a essas pginas. Isso pode ser analisado a partir do prprio computador utilizado e seus perifricos comuns, como mouse, teclado, monitor e udio. Nesse sentido, necessrio um sistema operacional no computador com acesso internet. Em seguida, preciso os programas para acesso internet, como os navegadores (Internet Explorer, Firefox, Opera, Chrome, entre outros), e tudo isso integrado aos leitores de telas, que so um dos tipos de tecnologias assistivas existentes para facilitar o acesso de deficientes visuais. Leitores de tela Os leitores de tela interpretam a informao das pginas que esto escritas em formato HTML ou XHTML, realizando uma leitura com voz do computador. Quando essas pginas esto bem estruturadas, o leitor consegue atingir um bom desempenho. Porm, quando o formato HTML ou XHTML no segue os padres exigidos pela W3C ou os navegadores disponveis no esto padronizados, a leitura pode ser prejudicada.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

56 Leitores de telas mais populares no Brasil: JAWS: o leitor de telas de maior nmero de vendas no mundo, com aproximadamente 80 mil usurios registrados, funcionando em sistema operacional Windows. DOSVOX: O DOS-VOX foi desenvolvido pelo Ncleo de Computao Eletrnica da Universidade Federal do Rio de Janeiro (UFRJ), iniciando-se em 1993. Nos ltimos anos, vem se dedicando criao de um sistema de computao destinado a atender os deficientes visuais. O sistema operacional DOS-VOX permite que pessoas cegas utilizem um microcomputador comum (PC) para desempenhar uma srie de tarefas, adquirindo, assim, um nvel alto de independncia no estudo e no trabalho. VIRTUAL VISION: Foi desenvolvido em 1997 a partir de pesquisas da MicroPower (empresa brasileira especializada em desenvolvimento de software). O leitor capaz de funcionar sobre os aplicativos mais comuns utilizados na maior parte dos computadores (funciona em Sistema Operacional Windows e possui compatibilidade com Word, Excel, Internet Explorer, Outlook, MSN, Skype, entre outras ferramentas). Ele distribudo gratuitamente para clientes portadores de deficincia visual. NVDA: O NVDA (NonVisual Desktop Access) foi desenvolvido em 2006 pelo jovem australiano Michael Curran, que cursava o segundo ano de bacharelado em Cincia da Computao. No satisfeito com o leitor de telas que comprara para uso prprio (ele era um usurio cego), passou a dedicar-se no projeto de desenvolvimento de seu prprio leitor de telas, abandonando a faculdade. Entretanto, para que o funcionamento desses leitores tenha sucesso com usurios portadores de alguma deficincia visual, necessrio que a linguagem de marcao HTML e XHTML siga as recomendaes internacionais. Segundo a W3C, os componentes fundamentais para o acesso das pessoas com algum tipo de deficincia so:

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

57 Contedo: Precisa estar bem estruturado e apresentado de forma clara, e possuir informaes naturais, como imagens, textos e sons. Navegadores: Precisam estar equipados com os plug-ins, agentes necessrios para o funcionamento. Tecnologia Assistiva: Leitores de telas, teclados alternativos. Experincia do Usurio: Adaptar e realizar estratgias para o uso da web. Desenvolvedores: Inclui designers, programadores e o prprio usurio. Ferramentas de criao: Softwares que criam sites. Ferramentas de avaliao: Validadores do cdigo HTML, CSS, entre outros. Alm dos indivduos com deficincias visuais, outras deficincias podem dificultar o acesso ao contedo na web, como: As diferenas culturais; Diferenas pessoais; Limitaes sensoriais, psicolgicas e cognitivas; Idade; Problemas na audio, entendimento e funo motora. A W3C com a WCAG 1.0 (Web Content Accessibility Guidelines ou Recomendaes de Acessibilidade do Contedo da Web) classificam as prioridades de acessibilidade de uma pgina web em trs nveis de prioridade (1, 2 e 3). Para cada prioridade, existem regras a serem cumpridas, para que o site seja mais bem interpretado pelos navegadores e estejam preparados para receber usurios com algum tipo de deficincia.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

58 As recomendaes so referentes ao cdigo inserido em cada pgina, as quais os desenvolvedores precisam ter conhecimento antes de iniciar a produo. Segundo VANDERHEIDEN et. al. (1999 apud GUNDERSON, 2008), um dos principais papis que o software de navegao, os navegadores, pode desempenhar no desenvolvimento do acesso do contedo da web fornecer uma maneira para que os desenvolvedores de pginas web consigam testar as funcionalidades que auxiliam os usurios deficientes. Atualmente, alguns dos testes so facilitados por meio de validadores de cdigo HTML. Esses validadores podem ser encontrados no prprio site da W3C:

http://validator.w3.org/ ou em uma verso em lngua portuguesa, o validador daSilva, disponvel no endereo: http://www.dasilva.org.br/. Os validadores apontam os locais no cdigo onde os erros ocorrem e ainda exibem um relatrio, facilitando a correo na elaborao de contedos mais acessveis pelos desenvolvedores. Eliminados os problemas com a estrutura e o acesso dos sites, existem fatores estticos que potencializam a usabilidade de um site, tornando-o mais atraente e motivador de uso.

2.9. Fatores estticos que potencializam a usabilidade da web


Segundo NORMAN (2008 apud MEURER e SZABLUK, 2009), pesquisas realizadas no Japo e em Israel apontaram para o fato de os usurios considerarem produtos com preocupao visual mais fceis de serem usados do que seus similares menos interessantes.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

59 Entre alguns fatores estticos, possvel listar os mais impactantes na elaborao de sites, como a tipografia, que ajuda na legibilidade, e as cores, que, alm de passar certa harmonia ao site, colabora tambm com a legibilidade dos contedos.

2.9.1

Tipografia

Segundo NIEMEYER (2006), existem critrios ergonmicos de usabilidade no tipo (tipografia), so eles: Legibilidade: o atributo dos caracteres alfanumricos que possibilita a cada um deles ser identificvel dos outros. Isso depende de algumas caractersticas, como a espessura da haste e a forma do caractere. A legibilidade tambm afetada por fatores ambientais, como: o nvel de iluminao, o grau de contraste entre letra e fundo, e o nvel de fadiga visual do leitor. Leiturabilidade: a qualidade que torna possvel o reconhecimento do contedo da informao em um suporte, quando ele representado por caracteres alfanumricos em grupamentos com significao, como palavras, frases ou texto corrido. influenciada pelo espaamento dos caracteres, do espaamento das linhas, do comprimento da linha e das margens, SANDERS e MCCORMICK (1993 apud NIEMEYER, 2006). Pregnncia: a qualidade de um caractere ou smbolo que faz com que ele seja visvel separadamente do seu entorno, SANDERS e MCCORMICK (1993 apud NIEMEYER, 2006). Fontes: As fontes vetoriais definem o contorno de seus caracteres pela combinao de linhas e arcos (Glifos), registrados sob uma frmula matemtica. Intervenes na aplicao de tipos: Espao entre letras e espaamento (spacing).

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

60 Na tipografia digital, os programas de editorao de texto possuem um comando prdeterminado de espacejamento para os elementos das fontes. H tambm outros comandos de ajuste de espaamento de letras que visam ao aprimoramento do design na tipografia. Kerning: o ajustamento de espaos horizontais. Uma das formas de reconhecer a qualidade de uma fonte digital justamente a flexibilidade de seu kerning de acordo com o corpo utilizado. Tracking: o controle do espao mdio entre os caracteres num bloco de texto. Espao entre linhas (leading): Determina a distncia entre a linha de base de uma linha do texto linha da base seguinte. A entrelinha garante uma tima condio de leitura para qualquer tamanho de tipo, corresponde a 125 % do tamanho do tipo. Capitular: uma forma de dar nfase ao incio de um captulo ou de uma seo do texto pelo aumento do corpo da letra Inicial do primeiro pargrafo. Versalete: uma forma de composio na qual todos os caracteres ficam em caixa alta, sendo que aqueles que correspondem s minsculas passam a ter altura da altura-X do corpo nominal. Endentao e recuo: o espao em branco no incio de pargrafo, que na mquina datilgrafa era determinado por meio de tabulao. A endentao mais comum esquerda, na primeira linha do pargrafo. Segundo pesquisas de NIELSEN e LORANGER (2007), os tamanhos de texto recomendveis so apresentados na Tabela 3.
TABELA 3: TAMANHO DE FONTES IDEAIS PARA CADA TIPO DE USURIO Tipo de pblico Pblico Geral Idosos & pessoas com deficincias visuais Crianas e outros leitores iniciantes Adolescentes e adultos Tamanho em pontos (pt) 10 - 12 12 - 14 10 - 12 10 - 12

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

61

Para SHAIKH (2005), o estudo mostrou que, ao testar nmero de caracteres de 35, 55, 75 e 95 com 20 estudantes, descobriu-se que a quantidade de 95 caracteres apresentou uma melhor eficincia de leitura. Outra pesquisa realizada por SHAIKH (2007) examinou 11 tipos de tipografias e selecionou trs. Foram construdos trs sites com o mesmo formato e contedom, com as trs fontes diferentes. Os resultados foram que a fonte Calibri teve uma alta legibilidade, a fonte Courier New mdia e a fonte Curlz, baixa. NIELSEN e LORANGER (2007) lembram que nem todas as fontes so criadas para serem utilizadas na web, necessrio escolher aquelas que so suportadas pelo computador e interpretadas corretamente pelos navegadores. Entre uma fonte com serifa e sem serifa, foi descoberto em estudos que fontes com serifa so timas quando usada na impresso de jornais ou revistas, porm essa mesma regra no se aplica para sites, visto que a serifa, quando aplicada na tela de computador, pode ficar serrilhada na visualizao devido limitao de equipamento. O que ocorre que telas possuem de 80 a 100 pontos por polegada (dpi), quando em uma revista a impresso alcana uma qualidade de 3000 dpi. possvel que, com avanos tecnolgicos, essa qualidade seja atingida tambm nas telas, porm enquanto isso no ocorre, necessrio escolher fontes que sejam mais bem visualizadas.

2.9.2

Cores

Segundo FARINA, PEREZ e BASTOS (2006), quando um ttulo, marca ou informao so realizados em cores, necessrio verificar a cor de fundo, para que ele tenha o contraste necessrio para se tornar legvel. Alguns contrastes sugeridos so: preto sobre amarelo, verde ou azul; o vermelho sobre amarelo ou branco; branco sobre azul ou preto; e o amarelo sobre o preto.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

62 A Tabela 4 demonstra dez combinaes mais bem classificadas da legibilidade das cores, segundo FARINA, PEREZ e BASTOS (2006).
TABELA 4: 10 COMBINAES MAIS BEM CLASSIFICADAS. FONTE: FARINA, PEREZ E BASTOS (2006). Classificao 1 2 3 4 5 6 7 8 9 10 Cor da letra Preta Amarela Verde Vermelha Preta Branca Azul Branco Branca Verde Cor do fundo Amarela Preta Branca Branca Branca Azul Amarela Preta Preta Amarela

Para o autor, as cores influenciam o ser humano, que intervm em sua vida tanto em carter fisiolgico como psicolgico. As cores criam alegria, tristeza, exaltao, depresso, atividade, passividade, calor, frio, equilbrio, desequilbrio, entre outros efeitos. Cada cor possui uma vibrao determinada em nossos sentidos. Na comunicao visual, a cor exerce trs papis: impressionar, expressar e contribuir. KANDINSKY (1969 apud FARINA, PEREZ e BASTOS, 2006) afirma que a cor exerce uma influncia direta. A cor o toque, o olho, o martelo que faz vibrar a alma, o instrumento de mil cordas (FARINA et al., 2006, p.13). Segundo NIELSEN e LORANGER (2007), quando possvel, deve-se utilizar combinaes de cores pretas ou brancas, ou utilize cores que variam muito em sua intensidade. Para verificar se possuem essa variao, sugere-se que as visualize nas escalas de cinza. As cores vermelho e verde possuem as mesmas escalas e se tornam impossveis de identificao para usurios daltnicos. PEDROSA e TOUTAIN (2004) afirmam que a cor, sendo utilizada

indiscriminadamente, pode ter um efeito negativo ou prejudicar na concentrao do usurio,


Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

63 desviando a ateno em relao s informaes das pginas web. A aplicao incorreta das cores em interfaces pode aumentar significativamente o tempo de resposta do usurio. Os sentidos provocados pela cor variam, como o caso da cor branca que signo de paz e harmonia no Brasil e, para outros povos, porm, significa tristeza e morte no Oriente, particularmente na ndia. Para PEDROSA e TOUTAIN (2004), a cor no somente uma propriedade esttica em sua aplicabilidade em sites, mas exerce um poder cognitivo, uma ferramenta que deve ser utilizada para identificar os elementos que devem atrair ateno, interagindo melhor com o usurio.

2.10.

Otimizao de sistemas de busca - SEO

LEDFORD (2008) define o SEO (Search Engine Optmization) como uma coleo de estratgias que melhoram a posio de um website, no resultado de buscas, quando realizadas por um usurio por meio de palavras e frases. Quando sua informao no aparece entre as primeiras trs pginas, torna-se invisvel, pois os usurios no chegam at ela. O SEO deve ser um dos elementos mais importantes na sua estratgia de internet (NIELSEN e LORANGER, 2007, p. 160). Para a usabilidade, a busca externa e interna so ferramentas sobre as quais os usurios criam muitas expectativas. NIELSEN e LORANGER (2007) informam que a busca um dos elementos mais importantes do design de um site. Em uma pesquisa realizada pelos autores de 25 sites analisados, 19 apresentavam sistemas de busca utilizados pelos usurios. importante tambm fornecer boas categorias, para que o usurio se interesse em explorar mais o seu site.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

64 As buscas externas e internas funcionam, muitas vezes, de forma diferente, visto que a externa realizada normalmente por um mecanismo de busca j existente, e a interna elaborada pelo desenvolvedor, o que mais simples. Segundo NIELSEN e LORANGER (2007), existem trs tcnicas bem intencionadas para o SEO: SEO lingustica; SEO arquitetnica e a reputao da SEO. SEO lingustica No SEO lingustica, necessrio realizar uma investigao de palavras-chave, descobrindo as que os usurios normalmente utilizam em suas buscas. O portal Yahoo oferece uma ferramenta na qual o usurio insere um termo, e o prprio portal sugere outros termos relacionados. Ele tambm fornece a frequncia com que os usurios pesquisaram cada um dos termos sugeridos no ltimo ms. J o portal Google oferece uma ferramenta para anunciantes com palavras-chave, as quais so baseadas no texto que o anunciante escreveu e relacionam-se com as palavras que os usurios mais pesquisaram. NIELSEN e LORANGER (2007), ainda, sugerem que, para encontrar a melhor terminologia que um usurio utiliza, importante responder aos problemas delas e, a partir das respostas, encontrar as palavras-chave certas. SEO arquitetnica composta por dois componentes: indexao das pginas e estrutura adequada de links . A indexao refere-se localizao, guarda o caminho em que a informao est, seja ela de forma textual ou em cdigo. J a estrutura de links se refere catalogao, em que

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

65 cada item separado por importncia, tipo, tema. A estruturao possvel por meio de mtodo card sorting. Reputao do SEO importante saber que as principais funes dos sites de busca so localizar, indexar e classificar contedo na internet, e disponibilizar um mecanismo de busca para que seus usurios sejam capazes de localizar informaes especficas dentro do seu site exposto na internet. Todos os principais portais de busca (Google, Yahoo etc.) so capazes de indexar diferentes tipos de arquivos dentro de pginas HTML, tais como imagens (JPEG, GIF, PNG etc.), msicas (MP3 etc.), arquivos no formato PDF, entre outros. Atualmente, essa capacidade para indexar e classificar se restringe em arquivos no formato HTML, texto puro, XML, PDF e at mesmo documentos Microsoft Word. Junto a esses arquivos possvel inserir meta informaes (metadados), que so as informaes que descrevem o arquivo que est sendo publicado na internet. Esse tipo de informao utilizado para arquivos menos conhecidos e para os que no so reconhecidos pelos buscadores. Na busca de informaes mais confiveis, importante que essa meta informao seja cadastrada de forma correta. Assim, os buscadores podem localizar as informaes com facilidade e imprimir na tela do usurio de forma mais organizada e descrita. Em geral, o posicionamento de um site influenciado e definido pelos seguintes aspectos: Quantidade e qualidade do contedo das pginas; Popularidade na web, nmero de visitas ou de outros sites que recomendam esse site;
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

66 Navegabilidade e estrutura dos links internos; Layout (webdesign) e programao voltada aos webstandards (conjunto de padres na internet, fornecidos pela W3C); Meta informaes (incluindo ttulo e descrio) que descrevam precisamente e corretamente o contedo de uma pgina. Os usurios normalmente no reformulam suas pesquisas, 83% dos usurios das pesquisas realizadas por NIELSEN e LORANGER (2007) contentaram-se com uma nica consulta, 17% apenas tentaram uma segunda consulta. Um trabalho de otimizao de sistemas de pesquisa (SEO) realizado em longo prazo, antes de comear a construo do site e depois de aplicado, leva pelo menos trs meses para mostrar os resultados, pois o tempo que os portais de busca tomam para catalogar as informaes do seu site.

2.10.1

Buscas internas

Segundo NIELSEN e LORANGER (2007), o desenvolvedor precisa de um sistema de busca interno, caso tenha mais que cem pginas. Sites com cem a mil pginas exigem um sistema de pesquisa simples. Em pesquisa do autor, os sistemas de busca internos obtiveram apenas 33% de sucesso. Esse no sucesso no deveria acontecer, visto que os sites normalmente so elaborados pelos mesmos desenvolvedores, equipes ou empresas. Resultar em uma busca de sucesso um dever, pois se entende que a equipe que o desenvolve deve conhecer o contedo interno do site. Segundo NIELSEN e LORANGER (2007), a mdia de caracteres em uma caixa de busca de 18 caracteres para buscas na web, o ideal que seja de no mximo 27 caracteres, pois encoraja o usurio a realizar consultas mais longas e atende 90% das consultas, segundo o autor essa mdia aplicvel para buscas externas e internas.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

67 Ainda em recomendao do autor, necessrio que o buscador esteja na pgina principal e permanea nas demais pginas visitadas. Os usurios normalmente recorrem ao recurso quando esto perdidos ou desistiram de navegar pelo site. Como no possvel prever quando esse fato acontecer, sempre disponibilize o buscador em um local visvel. A lista de resultados das buscas deve ser linear e, preferivelmente, localizar-se na parte superior do site. Todo o resultado da pesquisa deve iniciar com um ttulo clicvel para que o usurio rapidamente leia a informao e possa entrar no contedo. Recomenda-se que logo aps o ttulo aparea duas ou trs linhas de descrio, porm nem sempre sejam lidas pela maioria dos usurio.

2.11.

Ferramentas SGC ou CMS

As ferramentas SGC so normalmente distribudas gratuitamente e possuem seu cdigo aberto para que desenvolvedores ou empresas aprimorem e voltem a compartilhar seus resultados na rede. Muitos sites apresentam problemas de atualizao de contedo, pois um processo que necessita de uma pessoa com conhecimento tcnico. A utilizao dessa ferramenta serve para que esse processo de atualizao seja mais simples, permitindo ao prprio responsvel pelo contedo do site realizar suas alteraes. Segundo MILLARCH (2005), um Sistema de Gerenciamento de Contedo (SGC) ou, em ingls, CMS Content Management System, tem como objetivo estruturar e facilitar a criao, a administrao, a distribuio, a publicao e a disponibilidade da informao. Esse autor ainda comenta que alguns sites se tornam um grande problema quando crescem e constantemente necessitam de atualizaes, utilizando ferramentas como: Adobe Dreamweaver, Microsoft Expression Web ou outro editor para inserir novos contedos. Os sites, muitas vezes, so construdos por empresas das quais o cliente fica dependente para realizar atualizaes. Essas empresas demoram ao atualizar os contedos e fornecem pouca autonomia, o que gera queixas de clientes.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

68 A usabilidade, a acessibilidade e a SEO so os itens usados para descrevem uma alta qualidade de pginas web. As trs qualidades precisam estar ligadas no website. Quando essa relao existe, o website torna-se um cdigo vlido para a W3C. Segundo Rahmel (2007), o SGC possibilita a administrao de seu contedo e layout por um pequeno grupo de pessoas, que podem administrar o website por meio de cadastro na rea de administrao do SGC.

2.11.1

Joomla (Ferramenta SGC)

A Rice Studios criou um cdigo fechado nomeado como Mambo, em 2000. Em 2002, ele foi renomeado para Mambo Open Source, que tambm passou a ser referenciado como Mambo OS ou MOS. Em 2003, o Mambo OS foi oficialmente liberado na comunidade de cdigo aberto. Logo ele foi bem aceito e obteve um grande nmero de adeptos, KENNARD (2007). Pouco tempo depois, a Fundao Mambo criou um grupo consistindo principalmente de desenvolvedores do Cdigo Aberto Mambo. Esse grupo criou o Joomla! (verso 1.0) em 2005 que, para RAHMEL (2007), possua poucas diferenas do Mambo na verso 4.5.2.3, e cujas extenses eram compatveis para ambos, Mambo e Joomla!. O grupo criou o projeto Joomla!, protegido pela GPL e 100% cdigo aberto. Em 2007, foi lanado o Joomla! 1.5, no qual foram introduzidas novas classes e implementado um framework compreensivo. Essas alteraes acabaram reduzindo a compatibilidade entre o Joomla! e o Mambo. Joomla! um cdigo aberto de Gerenciamento de Sistemas de Contedo, totalmente aberto e mantido por colaboradores online do mudo todo. Um template do Joomla! no um website, a parte bsica para a criao de um website real. Segundo RAHMEL (2007), o SGC Joomla! promove uma interface de fcil utilizao para construo e manuteno de um website. Essas aplicaes esto sendo nomeadas por especialistas da web 2.0, e no mais classificadas como web 1.0, visto que os websites
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

69 eram administrados manualmente e que suas interaes eram mnimas. A web 2.0 definida pela administrao automatizada, pela comunicao intransitiva e transitiva, pelas comunidades virtuais e pelas interaes dinmicas. O Joomla! no uma ferramenta esttica, ou seja, o administrador pode criar o contedo dinamicamente. Essa forma dinmica evita problemas, como contratao de profissionais qualificados para dar manuteno diria. Com essa ferramenta, o prprio usurio elabora a postagem da informao. O autor ainda comenta que o Joomla! teve seu estouro em 2005 para desenvolvedores de website, e que tinha mais de 45 mil usurios registrados, com centenas de publicaes por dia em fruns e informaes compartilhadas, entre outros meios de comunicao. Para o autor, os desenvolvedores necessitam dessa ferramenta pelos seguintes motivos: Possibilita alterao de cdigo e estilos existentes (CSS) dos templates; Permite o processo de criao de um novo template, inserindo detalhes precisos do layout; Permite a insero de novos mdulos; Suporta vrias lnguas e existem tradues prontas; Possui extenses como enquete, galerias de fotos, classificao de artigos; Possui interface que segue requisitos da WCAG (Web Content Accessibility Guidelines guia para elaborar contedos acessveis para a web). O Joomla! utiliza o CSS, que simples e considerada uma tcnica mais eficiente de criar layouts, segundo a W3C. com o CSS que webdesigners realizam suas customizaes em layouts.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

70 Hoje as aplicaes Open Source (Softwares livres) so utilizadas em massa pelo governo, como: Finlndia, Cabo Verde e Brasil. Em Cabo Verde e no Brasil, o Open Source escolhido foi o Joomla!. Existem outras ferramentas que desempenham as mesmas funes, como o Wordpress ou Drupal (outras ferramentas CMS). Cada ferramenta possui uma forma de customizao e de gerenciamento mais interessante, dependendo da exigncia do desenvolvedor. Alguns exemplos citados de websites desenvolvidos na ferramenta Joomla! so: website da Receita Federal, da Universidade de So Paulo e do Ministrio da Educao. O novo site da USP, reestruturado na ferramenta Joomla! pela Fbrica Livre foi referenciado mundialmente, pela sua melhoria e apresentao de satisfao do usurio.

FIGURA 6 NOVO SITE INSTITUCIONAL DA USP (ACESSADO EM 10 DE OUTUBRO DE 2009)

2.12.

Sobre os testes de usabilidade

Para RUBIN e CHISNELL (2008), os testes de usabilidade servem para diminuir ou eliminar a frustrao do usurio. Quando essa frustrao eliminada, ela ocasiona tambm um relacionamento positivo da organizao e dos usurios, aumenta a qualidade do produto
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

71 que a organizao oferece, mostra que a preocupao da organizao com os usurios de alta importncia e proporciona ao usurio um produto mais eficiente, usvel, eficaz e satisfatrio. Os benefcios para as organizaes tambm ocorrem devido reduo de gastos de atendimento ao consumidor. A organizao cria um padro de qualidade, estabelece uma fidelidade do usurio, torna-se mais competitiva, destaca-se diante das demais e diminui os riscos nas organizaes, devido ao produto que possui qualidade superior s demais.

2.12.1

Anlise heurstica

Quando no possvel a realizao de testes de usabilidade em campo, alguns mtodos, como a avaliao heurstica, so utilizados. Segundo NIELSEN (1994), uma avaliao heurstica composta por um pequeno nmero de avaliadores que examinam a interface baseando-se em princpios de usabilidade. De acordo com PREECE, ROGERS e SHARP (2005), Os princpios do design, quando usados na prtica, normalmente so chamados de heurstica. Esse termo enfatiza que algo deve ser feito com esses princpios, quando aplicados a um dado problema (p. 48). Avaliaes heursticas, realizadas por Nielsen e por outros especialistas, constituda por um conjunto de princpios de usabilidade conhecidos como heursticas (mencionados e listados no tpico 10 Princpios fundamentais de usabilidade). Essas heursticas so capazes de avaliar elementos da interface, como: navegao, legibilidade, contedos, menus, ajudas on-line entre outros elementos de suma importncia para a usabilidade na web. Essa lista de dez princpios foi derivada de uma anlise de 249 problemas de usabilidade. Por meio de um guia de usabilidade, profissionais da rea conseguem filtrar boa parte dos erros e elimin-los.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

72 Segundo PREECE, ROGERS e SHARP (2005), utilizando um conjunto de heursticas, especialistas da rea anotam os problemas. Embora o nmero de especialistas possa ser maior, a evidncia emprica sugere que cinco avaliadores identificam cerca de 75% dos problemas de usabilidade. Na realizao da avaliao heurstica, existem trs estgios: 1) Estgio breve e preliminar: quando se diz aos especialistas o que se deve fazer, tomando como base um roteiro. Cada especialista deve receber a mesma orientao. 2) Perodo de avaliao: em que cada especialista passa de uma a duas horas inspecionando o site, utilizando as heursticas como guia. Caso seja um site em funcionamento, necessrio passar algumas tarefas especficas para focar na explorao. 3) Resultados: especialistas renem-se a fim de discutir os problemas e prioriz-los. Para ADLER e STREUBEL (2009), a avaliao heurstica localiza menos problemas que a pesquisa por observao de usurios. So tambm os usurios que conseguem indicar quais os melhores caminhos a tomar para a soluo do problema. Na avaliao heurstica,foi possvel localizar detalhes, porm que necessitavam de menos ateno que os problemas encontrados pelos usurios. Muitos profissionais perdem tempo corrigindo erros que so menos importantes. Mas conclui-se que ambos os mtodos para avaliao de usabilidade so interessantes para encontrar as armadilhas das pginas web. Entretanto, sugerem-se que as avaliaes heursticas ocorram antes das pesquisas por observao (ADLER e STREUBEL, 2009).

2.12.2

Anlise de observao

Para PREECE, ROGERS e SHARP (2005), testes com usurios so uma forma aplicada de experimentao, para testar a usabilidade do produto pela populao pretendida de usurios. Nessa anlise, registra-se o tempo, passam-se tarefas especficas e registram-

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

73 se o nmero e os tipos de erros que os usurios cometem. necessria uma documentao rigorosa do processo para que os desenvolvedores possam reproduzir os erros. Segundo TOGNAZZINI apud PREECE, ROGERS e SHARP (2005), existem cinco boas razes para investir em testes com usurios: 1- Os problemas com produtos so alterados antes de seu lanamento; 2- A equipe de desenvolvimento concentra-se em problemas reais e no naqueles imaginados pela equipe; 3- Os engenheiros codificam, em vez de debater; 4- O tempo para que o produto entre no mercado (seja aceito pelo consumidor) menor; 5- Na entrega de uma verso, no h necessidade de preocupao se a verso funcionar ou apenas funcionar em uma nova verso. Para RUBIN e CHISNELL (2008), recomendvel que, por condio, por atividade avaliada (ex.: anlise de tipografia, anlise de navegao etc.), sejam necessrio, em mdia, de 10 a 12 participantes, para que se obtenha uma amostra razovel (80% dos problemas de usabilidade). Porm, para obter resultados significantes de um produto, que provavelmente tenha mais de uma atividade avaliada, so necessrios 40 participantes ou mais. Porm, o autor informa que, caso queira identificar at 80% dos problemas, pode ser utilizado um nmero de 4 a 5 participantes. Para NIELSEN e LANDAUER (2000), o nmero de problemas de usabilidade pode ser encontrado com a seguinte funo: N(1-(1-L)n) n = nmero de usurios

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

74 Onde N o nmero total de problemas de usabilidade, L a proporo de problemas de usabilidade descobertos com um nico usurio. O valor normal de L de 31%, valor obtido depois de um grande nmero de projetos estudados. Colocando o valor de L = 31%, os autores, obtiveram o seguinte resultado:

FIGURA 7 NMERO DE USURIO EM TESTES E QUANTIDADE DE PROBLEMAS ENCONTRADOS. BASEADO EM: HTTP://WWW.USEIT.COM/ALERTBOX/20000319.HTML

Pela leitura do grfico, possvel identificar que, para o apontamento de 100% dos problemas, so necessrios aproximadamente 15 participantes. O perfil varia dependendo do que se pretende avaliar. Caso necessite de usurios experientes, necessrio identificar o seu perfil. Segundo CHEVALIER e KICKA (2007), usurios que acessam a internet de uma a oito horas por dia so considerados usurios experientes. Caso o usurio de sua pesquisa necessariamente precise ter outras caractersticas, necessrio levantar os dados do perfil e realizar questionrios para a seleo de usurios potenciais (questes sobre o perfil do usurio) ou entrevistas. Segundo PREECE, ROGERS e SHARP (2005), as pessoas j esto familiarizadas com os questionrios, que so questes projetadas a fim de obter informaes especficas das pessoas. Essas questes so elaboradas em diversos formatos, tais como: respostas

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

75 como SIM/NO, conjunto de respostas preestabelecidas, respostas com comentrios e respostas mais longas. Esses questionrios podem ser elaborados em formato digital e enviados por e-mail, disponibilizados em algum website ou at mesmo impressos.

2.12.3

Limitaes dos testes de usabilidade

Para RUBIN e CHISNELL (2008), o teste sempre ser uma situao artificial de uso do produto, ele no prova que um produto funciona ou no. Os participantes convidados para a pesquisa raramente so os usurios representativos da populao, os testes nem sempre so a melhor tcnica para avaliar. Entretanto, quando os testes so bem elaborados e aplicados, eles proporcionam um ciclo de reciclagem que so altamente eficazes para solucionar parte dos problemas.

2.12.4

Tipos de testes

RUBIN e CHISNELL (2008) abordam trs tipos de testes para serem aplicados: exploratrio (ou formativo), avaliao (ou resumo) e validao (ou verificao).

2.12.4.1 Teste exploratrio/formativo


Aplicado enquanto o produto estiver em estgio preliminar (prototipagem) ou sendo definido ou desenvolvido o objetivo do teste, que avaliar a efetividade do conceito preliminar do projeto. Nesse estgio, as atividades comuns exigidas do usurio so: auxiliar nas metas das tarefas, compreender o fluxo de trabalho, permitir que o usurio navegue de tela por tela. Esse tipo de teste costuma responder as seguintes questes: O que os usurios pensam sobre o produto? As funcionalidades bsicas tm valor para o usurio? O usurio consegue realizar uma navegao com sucesso, sem erros?
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

76 Quanto fcil a utilizao do produto comparando-se com experincias anteriores? Quais funcionalidades so fceis de entender e quais delas necessitam de uma documentao ou ajuda para utilizao? Quanto organizada est a informao para os usurios inexperientes e experientes? Esse tipo de teste aplicvel para prottipos, que simulem o produto. Para site de internet, esses prottipos so os wireframes, que representam o layout bsico (30 a 40% de suas funcionalidades), a organizao e a arquitetura das informaes e das funcionalidades. Os tipos de perguntas que devem ser respondidas durante o teste so: Quais as piores e as melhores caractersticas das interfaces apresentadas? Qual a principal dificuldade que o usurio teria com as interfaces? Qual das interfaces posteriormente mostradas ter um grande potencial para os usurios? Para quais funes so necessrios documentao, ajuda, suporte ou algum tipo de instruo mais detalhada?

2.12.4.2 Teste de avaliao/resumo


o teste mais comum e utilizado, pois avalia o produto aps ser estabelecido e no meio de seu desenvolvimento. Tem como objetivo avaliar quo eficientes so o produto e os conceitos implementados. Preferivelmente, explora a intuitividade do produto, avaliando sua performance em atividades reais e identificando itens especficos, como a deficincia da usabilidade. Normalmente, aplicado por meio da performance do usurio na realizao de determinadas tarefas, em que o usurio comenta as telas, as pginas, entre outros itens do produto. O moderador acompanha a interao do usurio com o produto .
Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

77 Quando se aplica o teste, o produto j possui de 60 a 80% de suas funcionalidades, j aplicadas s reas de ajudas devidas. Principais objetivos do teste: Confirmar se o produto est adequado com os processos de trabalho do usurio; Expor todas as principais deficincias causadas nas tarefas mais comuns; Checar se existe assistncia apropriada, mensagens adequadas, central de ajuda para as dvidas mais frequentes; Verificar se as terminologias esto claras e se existem reas que necessitam de maior explicao; Verificar se os participantes ainda possuem dvidas e quais so elas.

2.12.4.3 Teste de validao/verificao


aplicado quando o produto j se encontra mais estvel e j passou pelo ciclo de desenvolvimento. um teste muito mais aproximado do verdadeiro produto, diferente do teste de exploratrio e do teste de avaliao. Seu objetivo avaliar como o produto est diante dos padres existente e avaliar seu desempenho, assim como testar e fazer comparaes com outros produtos similares existentes. Os participantes realizam alguns testes com pouca interao do moderador, pois nesse ponto o produto j est em sua verso quase final. Esse teste levanta dados quantitativos importantes, pois as dificuldades levantadas sero provavelmente as mesmas dos usurios finais. Verificar se existe pelo menos 70% de satisfao dos usurios entrevistados (uma satisfao de 100% no real; nos anos de 1960, a NASA descobriu que, para obter um

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

78 teste com 100% de satisfao, ele custaria 50 vezes mais que um teste de 95% de satisfao). Aplicadas todas as funcionalidades com seus devidos tpicos de ajuda, o teste deve ter como objetivos: Identificar algumas tarefas ou reas que contenham risco de possveis bugs (ex.: botes que no funcionam); Identificar problemas de usabilidade que devem ser consertados antes do lanamento e verificar quais deles sero documentados para serem resolvidos em um prximo lanamento.

2.12.4.4 Teste de comparao


No est associado a uma especfica parte do processo de produo do produto. Esse teste pode mostrar a efetividade de elementos individuais, como: quais tipos de botes so mais interessantes para os usurios ou os tipos de formulrios. Esse teste pode ser efetuado em conjunto aos trs diferentes tipos de testes j citados: teste exploratrio, teste de avaliao e teste de validao. O teste de comparao efetuado com mais dois produtos que estejam no mesmo ramo de atuao e que possuam solues de design diferentes. O teste tem como objetivo estabelecer quais dos layouts o mais fcil de interagir. Essa aplicao ou alterao pelo melhor design pode alterar anos de desenvolvimento, documentao e planejamento, porm essencial para o bom design. No teste, os participantes escolhem quais dos layouts o mais interessante para eles e, se possvel, com suas devidas justificativas. RUBIN e CHISNELL (2008) tambm alertam sobre a importncia na definio do plano de teste que define todas as atividades que sero elaboradas durante o teste. Serve como

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

79 principal veculo de comunicao, define e implica nos recursos requeridos, mantm o foco do teste. As partes de um plano de teste so: Proposta, objetivos e metas do teste; Questes da pesquisa; Caractersticas dos participantes; Mtodo (escolha do tipo de teste); Lista de tarefas a serem efetuadas; Ambiente de teste, equipamento e logstica; Funo do moderador do teste; Dados coletados e medidas de avaliao; Relatrio e apresentao do contedo.

Etapa 1 Reviso Terica Recomendaes para elaborao de websites - Tipos de testes existentes

80

3. Objetivos da pesquisa
Objetivo principal O objetivo deste estudo apresentar metodologias existentes para o melhoramento da usabilidade de sites, sugerindo o uso de ferramentas existentes e procedimentos adequados para o desenvolvimento das interfaces de sites, que contribuem expressivamente para as reas de conhecimentos que envolvem a ergonomia e o design informacional. Objetivos especficos Analisar as metodologias existentes para avaliar a usabilidade do Site Institucional do Programa de Ps-graduao em Design da Unesp, campus Bauru

(www.faac.unesp.br/posgraduacao/design/); Aplicar no site institucional testes de usabilidade; Utilizar o site institucional como referncia para a aplicao dos testes de usabilidade, verificando o sucesso ou no sucesso das aplicaes; Com os resultados obtidos, propor/criar um site com a usabilidade

verificada/corrigida.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

81

4. Materiais, mtodos e resultados


Considerando a particularidade do presente estudo em seguir procedimentos alternados de avaliao, redesign e reavaliao, sero apresentados os materiais e os mtodos de cada etapa metodolgica (Figura 8), seguidos diretamente dos respectivos resultados apresentados neste estudo.

4.1. Estrutura metodolgica

FIGURA 8 ESTRUTURA METODOLGICA


Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

82

4.2. Aspectos ticos


Este estudo caracterizou-se por uma abordagem experimental/laboratorial, com a participao de usurios de internet, casustica da anlise. Nesse sentido, foram estabelecidos os procedimentos de recrutamento e de aplicao Termos de Consentimento (Apndice E, F, G, I, J e K), o que procura atender a Norma ERG-BR 1002, do cdigo de Deontologia do Ergonomista Certificado (ABERGO, 2003).

4.3. Objeto de anlise


Utilizou-se como objeto de anlise o Site Institucional do Programa de Ps-graduao em Design da Unesp (http://www.faac.unesp.br/posgraduacao/design/), considerando a necessidade de democratizao das intenes do programa de ps-graduao finalizado com recursos pblicos.

FIGURA 9 SITE INSTITUCIONAL DO PROGRAMA DE PS-GRADUAO EM DESIGN DA UNESP (ACESSADO EM 21 DE OUTUBRO DE 2009)

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

83

4.4. Etapa 2 Anlise do objeto de estudo


4.4.1. Anlise heurstica

Para as avaliaes heursticas, foram convidados dois profissionais com atuao na rea de usabilidade para realizao dos testes. As opinies da avaliao do objeto de estudo foram coletadas separadamente ou.em grupo. A mdia de atuao do profissional da rea da web era de cinco anos, com 2,5 anos de experincia em avaliao de usabilidade de websites/sistemas. O nmero de profissionais deve-se pela disponibilidade do profissional no acompanhamento dos processos ao longo de dois anos de estudo, no possibilitando o recrutamento de um nmero maior.

4.4.1.1.

Problemas de usabilidade segundo Nielsen

Baseando-se na lista de problemas que ainda persistem em sites, segundo NIELSEN e LORANGER (2007), foi realizado um formulrio preliminar para identificao dos problemas iniciais (Apndice A). Nele, o avaliador seguia cada item e marcava se o problema ocorria ou no no site. Essa primeira avaliao no incio da pesquisa ajudou para analisar o grau de problemas de usabilidade que o objeto possua. A lista foi formulada com problemas de usabilidade com classificao de alto impacto, mdio impacto e baixo impacto. Para essa avaliao, os dados coletados foram analisados em grupo pelos avaliadores.

4.4.1.2.

Recomendaes da W3C

Por meio do uso de ferramentas gratuitas e disponveis pela W3C, o site institucional foi avaliado em suas principais pginas. O intuito no era demonstrar todos os erro, e sim identificar os erros mais comuns que ocorriam. Para a avaliao do CSS do website, foi utilizada a ferramenta CSS Validation Service (http://jigsaw.w3.org/css-validator/), a ferramenta de validao analisa a qualidade do cdigo, validando as folhas de estilo em cascata (CSS). As folhas de estilo determinam os formatos de textos das pginas web e o validador verifica se ele possui problemas de cdigo, auxiliando a correo de
Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

84 desenvolvedores. Para a avaliao do XHTML, utiliza-se a ferramenta Markup Validadtion Service (http://validator.w3.org/). Ambas seguem as recomendaes da W3C, permitindo que os navegadores consigam interpretar e exibir as pginas corretamente. Para a avaliao, a W3C prope que os websites possam ser acessados em diferentes dispositivos e diferentes navegadores. Assim, foi criada uma tabela para verificar em quais tipos de navegador o atual site institucional funciona sem erros e em quais validadores eles no apresentavam erros (Apndice B), esses dados foram preenchidos e analisados em grupo pelos avaliadores convidados.

4.4.1.3.

Acessibilidade

Utilizando o leitor de telas gratuito (DOS-VOX), foi realizada a leitura da Pgina Inicial do programa para identificao de problemas tpicos de acessibilidade de prioridade 1 segundo a WCAG, como: ausncia de textos alternativos nas imagens, problemas na ordem da navegao e recursos que servem como aceleradores na busca da informao (Apndice C). Foi selecionado o leitor de telas DOS-VOX, pela clareza da leitura (portugus brasileiro claro), distribuio gratuita, por ser desenvolvido no prprio pas e pela popularidade e recomendao que instituies do pas fazem sobre a ferramenta. O avaliador foi orientado sobre a utilizao da ferramenta de leitura e sobre uma ferramenta que gravava o percurso que os leitores de telas realizavam (Camtasio Studio 6.0). Foi gravada a imagem do percurso do mouse e do udio, demonstrada posteriormente em imagem com o mapeamento do caminho realizado pelo leitor. Aps a anlise do avaliador, utilizou-se a ferramenta gratuita daSilva, disponvel na internet, que, ao ler o cdigo da pgina, identifica problemas de acessibilidade do site seguindo os padres recomendados pela W3C (verso - WCAG 1.0). No foram avaliadas todas as pginas do site, pois normalmente os erros se repetiam de uma pgina para outra.

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

85 Aps a anlise dos avaliadores, foram listadas as quantidades de erros e alertas das pginas avaliadas.

4.4.1.4.

Princpios de usabilidade de autores citados

Baseado na Reviso Bibliogrfica sobre princpios de usabilidade de diferentes autores, foi elaborada uma lista de princpios de usabilidade para o estudo. Essa lista foi criada com o intuito de gerar uma lista de recomendaes que todos os websites deveriam apresentar. A lista foi baseada nos autores: NIELSEN (2001), CYBIS (2007), PREECE, ROGERS e SHARP (2005), e BASTIEN e SCAPIN (1993) (Apndice D). Aps a formulao da lista, os avaliadores analisaram o site em conjunto, verificando a existncia dos erros e realizando os comentrios para cada problema apresentado.

4.4.2.
4.4.2.1.

Anlise com usurios


Avaliao da arquitetura de informao

A avaliao foi realizada com usurios interessados em ingressar em um curso de ps-graduao e com alunos regulares do programa, que foram recrutados antes da realizao do teste por meio de entrevista (abordagem no campus da universidade). O teste avaliou a arquitetura de informao e a navegao do site. Para identificao de problemas de usabilidade, os sujeitos analisaram inicialmente o site e realizaram trs tarefas. Essas tarefas eram simples e, possivelmente, seriam realizadas pelo usurio, caso fosse um aluno regular ou estivesse prestando o processo seletivo de ingresso (Apndices E e F). Os formulrios/questionrios do teste tambm se encontram disponveis no endereo: https://creator.zoho.com/lucynomiso/, o teste foi realizado em laboratrio, onde foi gravada a imagem do percurso do mouse realizado pelos sujeitos. O questionrio foi aplicado no meio on-line e as respostas enviadas e gravadas pelo mesmo meio. Foi utilizada a ferramenta

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

86 Zoho Creator na coleta de dados, pois permite a criao de formulrios e coleta de dados de forma on-line, facilitando a organizao e o acesso dos dados coletados.

4.4.2.2.

Fatores de design do site institucional

Para verificar a qualidade dos fatores de design, como tipografia, cores, elementos de design do site, foi elaborado um questionrio de satisfao quanto aos elementos do layout. Como os sites institucionais da Unesp possuam o mesmo layout para os diferentes cursos, foram recrutados alunos do curso de graduao em Cincias da Computao e Sistemas de Informao. Antes da aplicao do questionrio, todos os sujeitos receberam uma palestra de boas prticas de usabilidade e de reconhecimento de recursos que auxiliam na usabilidade, assim como recursos que atrapalham. A durao dessa palestra foi de uma hora e meia e estava baseada nos princpios de usabilidade dos autores da reviso terica. Os usurios observaram a pgina inicial do site institucional e responderam as perguntas do questionrio (Apndice G). A rea de atuao dos sujeitos foi considerada um fator importante para a anlise, pois pginas web muitas vezes so desenvolvidas por profissionais graduados na rea de Computao, e poucos deles tm conhecimento sobre princpios de usabilidade. A palestra ministrada para os sujeitos encontra-se disponvel no endereo: http://www.compartilhe.net/Palestras-Cursos/Palestra_10Jornada_web.pdf.

4.4.2.3.

Card sorting

Segundo REIS (2007), a organizao da informao apenas uma orientao ao arquiteto de informao. Em um projeto, a deciso de qual esquema utilizar precisa ser validada com o usurio final do site. Uma tcnica sugerida NIELSEN (2004) a realizao de testes de card sorting com o pblico-alvo do site a ser avaliado. Para elaborar o teste de card sorting, foram identificados os principais termos utilizados em sites de ps-graduao em design, por meio de um teste comparativo. Foram avaliados dez sites de ps-graduao em design:

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

87 UNESPBauru (Universidade Estadual Paulista "Jlio de Mesquita Filho")

http://www.faac.unesp.br/posgraduacao/design/ UFPE (Universidade Federal de Pernambuco) http://www.ufpe.br/design/pos.html UFPR (Universidade Federal do Paran) http://www.design.ufpr.br/mestrado/ ESDIUERJ (Escola Superior de Desenho Industrial Universidade do Estado do Rio de Janeiro) http://www.esdi.uerj.br/pos-graduacao/index.html#mestrado PUC-RIO (Pontifcia Universidade Catlica do Rio de Janeiro) http://www.pucrio.br/ensinopesq/ccpg/progart.html UFRGS (Universidade Federal do Rio Grande do Sul) http://www.pgdesign.ufrgs.br/ UNISINOS (Universidade do Vale do Rio dos Sinos)

http://www.unisinos.br/ppg/design/ UNIRITTER (Centro Universitrio Ritter dos Reis)

http://www.uniritter.edu.br/pos_graduacao/design/mestrado/index.php ANHEMBI (Universidade Anhembi Morumbi) http://www.anhembi.br/mestradodesign/ SENAC (Servio Nacional de Aprendizagem Comercial)

http://www.anhembi.br/mestradodesign/ A mdia de categorias encontradas foi de 10,1 em cada site, sendo que o site com mais categorias possua 21 categorias, e o site com menos, uma nica categoria. As categorias que foram citadas pelo menos uma vez totalizaram 31 itens, sendo que, desses 31 itens, alguns sites utilizavam uma mesma terminologia (ex.: categoria apresentao apareceu nos dez sites avaliados). Categorias que foram citadas apenas uma vez foram desconsideradas, restando 22 categorias (Tabela 5).

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

88 Das 22 categorias classificadas, algumas apresentaram, para diferentes categorias, terminologias muito prximas (ex.: Seleo, Ingresso no Programa, Processo Seletivo, Processo de Seleo).
TABELA 5 - RESULTADO DA OCORRNCIA DE MESMAS CATEGORIAS NOS SITES INSTITUCIONAIS ANALISADOS UNESP UFPE UFPR UERJ PUC-RIO UFRGS UNISINOS UNIRITTER ANHEMBI SENAC

Categorias

Apresentao, histrico, mestrado em design Corpo docente/docentes, professores Infraestrutura, laboratrios Informaes, perguntas frequentes Links Eventos Pgina inicial, home Artigos, produo cientfica, publicaes Dissertaes, dissertaes defendidas Linhas de pesquisa, rea de concentrao Objetivos Estrutura curricular, estrutura do curso Ementa, grade curricular, disciplinas Fale conosco, contato Seleo, ingresso no programa, seletivo, processo de seleo Novidades, notcias Bolsas e financiamento, bolsas Capes, recursos Projetos de pesquisa Requisitos para requerimentos obteno de ttulo, auxlio financeiro, processo linha de pesquisa,

X X

x x x

x x x

x x

x x x

xx x x

x x

x x

x x x x x x

x x x x x x x xx x x x x x x x x x x x x x x x x x xx x xx x x x x x x x x x x

X X X X

xxx

xx

x x

xxx

Atividades previstas, atividades programa, calendrio, agenda Documentos Corpo discente, alunos Regulamento

do xx X X X x

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

89 Utilizando a ferramenta gratuita Google Insights for Search, que indica qual termo mais procurado na internet pelos usurios, foi selecionada qual entre as terminologias semelhantes poderia ser a mais usual. Na ferramenta, quando posicionado o mouse no percurso da linha (Figura 10), possvel identificar o ms e o ano do dado. Os dados mostram que, em julho de 2009, o nmero de busca do termo seleo obteve a pontuao 16 (volume de pesquisa de 0 a 100), visto que, em junho de 2006, o termo obteve seu maior pico, pontuao 100. Foi possvel identificar que, na procura pelos usurios, o termo seleo (linha azul) o mais procurado quando comparado aos outros trs termos.

FIGURA 10 PGINA DO GOOGLE INSIGHTS FOR SEARCH, COM 4 TERMOS INSERIDOS PARA PESQUISA

Selecionado apenas o termo seleo e exibido os dados de forma mais detalhada, possvel perceber que o 100 foi obtido quando usurios buscaram pelo termo composto seleo brasileira, assim, o termo seleo talvez no seja o melhor termo para indicar uma seleo de alunos para o programa de mestrado. seleo tambm aparece relacionada com Recrutamento e seleo. Nem sempre os usurios realizam suas pesquisas inserindo no campo de busca uma nica palavra. Para realizao de busca em um processo de
Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

90 seleo da ps-graduao, os usurios talvez estejam mais acostumados a inserir duas ou mais palavras.

FIGURA 11 - PGINA DO GOOGLE INSIGHTS FOR SEARCH, COM VISUALIZAO DOS RESULTADOS DO TERMO SELEO (ACESSADO EM 25 DE OUTUBRO DE 2009)

O termo processo seletivo pode ser considerado um termo mais adequado, visto que, nos resultados (Figura 12), a busca pelo termo est relacionada diretamente com o processo seletivo de um determinado curso. Na coluna Rising searchs, os termos processo seletivo, 2009, 2008, 2007, 2006 aparecem com um breakout, que significa uma ao que tem uma grande procura do nada; no caso do Brasil, o fato ocorre devido aos processos seletivos para o ingresso a cursos de graduao e ps-graduao, visto que o calendrio escolar no Brasil influencia diretamente nos perodos.

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

91

FIGURA 12 - PGINA DO GOOGLE INSIGHTS FOR SEARCH, COM VISUALIZAO DOS RESULTADOS DO TERMO PROCESSO SELETIVO (ACESSADO EM 25 DE OUTUBRO DE 2009)

Todas as demais categorias com mais de um termo foram avaliadas pela ferramenta e, em alguns casos, como Apresentao, Histrico e mestrado em Design, considerou-se que os termos estavam relacionados em uma grande rea, mas que no tinham significados semelhantes. Outras categorias foram consideradas como um subitem da categoria apresentao pelos avaliadores. Depois de analisados os termos, foram selecionados como itens de categorias: Apresentao; Linhas de pesquisa; Estrutura curricular; Processo seletivo; Auxlio discente;

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

92 Corpo docente; Corpo discente; Produo cientfica; Agenda/calendrio; Contatos. Demais termos foram retirados de categorias para serem subcategorias. Foi utilizada a ferramenta CardSort, gratuita e distribuda na internet, que auxiliou na elaborao do CardSort Fechado (Figura 13), a ser organizado posteriormente pelos sujeitos convidados a participar do teste.

FIGURA 13 FERRAMENTA CARDSORT

O CardSort uma ferramenta que permite a definio de categorias e a insero de at cem itens, criado um arquivo base (Apndice H). Nesse teste, os usurios organizavam os termos conforme sua cognio dos termos.

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

93

4.4.3.

Anlise dos dados da etapa 2

4.4.3.1. Problemas de usabilidade que ainda persistem


NOMISO (2009) identificou problemas de usabilidade que NIELSEN e LORANGER (2007) classificam como problemas que ainda persistem ao longo do tempo. Esses problemas totalizam 32: 8 deles so de alto impacto, 12 de mdio impacto e 12 de baixo impacto. Os resultados so pontuados com S = existe no site, N = No existe, NP = no foi possvel analisar, e so representados nas tabelas 6, 7 e 8. As verses de navegadores utilizadas no teste foram: Internet Explorer e Firefox, que so os navegadores mais utilizados.
TABELA 6 - PROBLEMAS DE USABILIDADE DE ALTO IMPACTO Alto Impacto Tipo de Navegador Problema Apresentado Links que no mudam de cor quando S visitados Quebra do boto Voltar Abertura de novas janelas de navegador Janelas de pop-up Violao das convenes da web Contedo vago e modismo vazio Contedo denso e texto no escanevel N N N N N S S N N N N N N S Unesp Bauru Internet Explorer Firefox

Elementos de design que parecem anncio N

TABELA 7 - PROBLEMAS DE USABILIDADE DE MDIO IMPACTO Mdio Impacto Tipo de Navegador Problema Apresentado Flash Listagens e pesquisas de baixa relevncia Multimdia e vdeos longos Layouts congelados Incompatibilidade entre vrias plataformas Rolagem URLs complexas N NP NP N NP S N N NP NP N NP S N Unesp Bauru Internet Explorer Firefox

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

94

Componentes personalizada

de

interface

grfica

N N S

N N S N N

Contedo ultrapassado Inconsistncia dentro de um website

Solicitaes prematuras de informaes N pessoais Vrios sites N

TABELA 8 - PROBLEMAS DE USABILIDADE DE BAIXO IMPACTO Baixo Impacto Tipo de Navegador Problema Apresentado Tempo de download lento Frames Clicabilidade incerta Registro Menus suspensos e menus em cascata Plug-ins e tecnologia de ponta Interface 3D com o usurio Design poludo Pginas splash S N N N S N N N N S N N N S N N N N N N N Unesp Bauru Internet Explorer Firefox

Imagens grficas em movimento e texto N deslizante Palavras inventadas N Falta de exposio de quem est por trs N das informaes

O Site Institucional apresentou problemas de usabilidade que devem ser corrigidos, principalmente referentes ao alto impacto usabilidade. Executando-se uma anlise mais profunda e especfica, provvel que mais problemas impactantes sejam levantados. Essa inspeo teve carter preliminar para identificao de problemas de usabilidade.

4.4.3.2. No cumprimento das recomendaes da W3C


Quando utilizada a ferramenta de validao de CSS da W3C, apenas a pgina inicial do site apresentou 8 erros e 113 alertas/avisos.

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

95

FIGURA 14 RESULTADO DA VALIDAO DO CSS DO SITE INSTITUCIONAL DO PROGRAMA DE PSGRADUAO DA UNESP (ACESSADO EM 13 DE OUTUBRO DE 2009)

Quando utilizada a validao em HTML/XHTML, foram apresentados 21 erros na pgina inicial do site.

FIGURA 15 RESULTADO DA VALIDAO DO XHTML DO SITE INSTITUCIONAL DO PROGRAMA DE PSGRADUAO DA UNESP (ACESSADO EM 13 DE OUTUBRO DE 2009)

Em anlise heurstica, outras reas do site foram avaliadas, como: Linhas de Pesquisa, Grupos de Pesquisa, Processo Seletivo, Agenda/Calendrio, Corpo Discente e Corpo Docente, totalizando sete pginas do site.

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

96 Para a validao do CSS, foram encontradas uma mdia de 6,6 erros e 53,7 avisos por pgina. J na validao do HTML/XHTML, foram encontrados 27,2 erros e 28,8 avisos por pgina. Ao realizar testes com diferentes navegadores, o site no apresentou erros nas verses mais novas dos navegadores. Com a utilizao da ferramenta IETester, que simula verses do Internet Explorer (6.0 e 7.0), foi possvel testar a ferramenta e verificar que esta no apresentava erros em verses de navegadores mais antigos.

4.4.3.3. Problemas com a acessibilidade do site


Para a deteco dos problemas de acessibilidade, foram realizados dois testes, um deles foi realizado por meio de uma ferramenta on-line, o daSilva

(http://www.dasilva.org.br/); o segundo teste, por meio do uso de uma ferramenta de leitura de telas o DOS-VOX.

FIGURA 16 VALIDADOR DE ACESSIBILIDADE DASILVA (ACESSADO EM 20 DE OUTUBRO DE 2009)

A ferramenta daSilva segue as recomendaes da WCAG 1.0 (Recomendaes de Acessibilidade do Contedo da Web). Quando aplicada na pgina inicial do site institucional,

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

97 apresentou 10 erros de prioridade 1, 29 erros de prioridade 2 e 1 erro de prioridade 3. Fora os erros apresentados, foram listados outros 177 avisos/alertas. Depois de analisadas sete pginas principais do site, foram encontradas as mdias:
TABELA 9 - TABELA DE MDIAS DOS ERROS E ALERTAS APRESENTADOS Mdia de erros e alertas por prioridade Prioridade 1 Erros Avisos 9,6 27,4 Prioridade 2 Erros Avisos 32,6 99,8 Prioridade 3 Erros Avisos 1 87,2 Pginas avaliadas 7

Os erros apresentados eram normalmente relacionados ausncia de insero de um texto alternativo para as imagens, ou insero de tamanho das fontes com valores absolutos. Foi mapeado o caminho do leitor de telas, por meio de sequncia numrica:

FIGURA 17 SITE INSTITUCIONAL DO PROGRAMA DE PS-GRADUAO EM DESIGN DA UNESP COM MARCAO D CAMINHO REALIZADO PELO LEITOR DE TELAS DOS-VOX
Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

98

Por meio da tecla TAB, utilizada para navegar entre os vnculos da tela, no foi possvel ler o contedo do site, o leitor percorreu pelos vnculos nas 33 posies (como mostra a Figura 17) e retornou para a posio de nmero 1. No caminho percorrido pelo leitor, a posio de nmero 3 (Figura 17) no leu texto algum, indicando que o site no segue as regras bsicas de acessibilidade recomendadas pela W3C. J na posio 13 (item de menu Calendrio), o leitor no conseguiu ler os subitens. Na posio 28, existe algum erro de cdigo, que faz com que o leitor interprete que existe uma posio nesse ponto quando no existe nenhuma informao. O recurso de Mapa do Site (posio de nmero 5), no mostrou o mapa do site institucional de ps-graduao em design, mas o mapa do site principal da FAAC (Faculdade de Arquitetura, Artes e Comunicao). O site institucional apresentou erros de leituras dos itens, porm o problema que mais chamou a ateno foi a impossibilidade de acessar/ler o contedo principal da pgina.

4.4.3.4. Lista de recomendao dos autores


Para cada item da lista, os avaliadores colocaram um nvel de satisfao de 1 a 5, em que 1 indicava a menor satisfao e o 5 a maior satisfao. Os avaliadores tambm fizeram comentrios de cada princpio de usabilidade. A nota mdia de satisfao nos 21 itens listados foi de 2,28, o que mostra que, entre os itens de recomendaes dos autores da reviso terica, poucas so as recomendaes seguidas pelo site do programa. Dos comentrios dos avaliadores, a carga informacional por pgina foi um problema discutido em mais de um item listado, outros problemas que merecem ateno foram: no existncia de indicadores de localizao (breadcrumbs e itens de menus ativados quando

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

99 clicados, distino de links visitados e no visitados), pouca utilizao de recursos grficos para instigar a explorao pelo usurio e falta de atualizao do contedo.

Princpio 1- Visibilidade do status do sistema

Descrio O sistema mantm os usurios sempre informados sobre o que est acontecendo, fornecendo um feedback adequado, dentro de um tempo razovel. Comentrios do avaliador: No existem indicaes no site mostrando o local que o usurio se encontra, como o breadcrumb.

Nvel satisfao (1) (X) (3) (4) (5)

de

2- Compatibilidade do sistema com o mundo real

O sistema fala a linguagem do usurio utilizando palavras, frases e conceitos familiares a ele, em vez de termos orientados ao sistema. Comentrios do avaliador: Est direcionado ao pblico-alvo.

(1) (2) (3) (4) (X)

3- Controle do usurio e liberdade

Fornece maneiras de permitir que os usurios saiam facilmente dos lugares inesperados em que se encontram, utilizando sadas de emergncia claramente identificadas. Comentrios do avaliador: Como existe pouca visibilidade de status do sistema, o usurio tem dificuldades em retornar para uma pgina que acabou de ler. O voltar apenas est habilitado no prprio browser.

(1) (X) (3) (4) (5)

4- Consistncia e padres

Evita fazer com que os usurios tenham que pensar se palavras, situaes ou aes diferentes significam a mesma coisa. Comentrios do avaliador: Durante a navegao, os PDFs com informaes so abertos no prprio site, tirando toda a padronizao da pgina (Figura 18).

(1) (X) (3) (4) (5)

FIGURA 18 PGINA NO PADRONIZADA 5- Ajuda os usurios a reconhecer, diagnosticar e recuperar-se de erros Utiliza linguagem simples para descrever a natureza do problema e sugere uma maneira de resolv-lo? (1) (2) (X) (4) (5)

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

100
Comentrios do avaliador: Site fornece arquivos de formato no gratuito, no fornecendo outra opo de visualizao (Figura 19).

FIGURA 19 ARQUIVO DE EXTENSO NO GRATUITA


NO SITE

6- Preveno de erros

Onde possvel, impede a ocorrncia de erros. Comentrios do avaliador: Muitos termos similares no site, confundindo qual a informao correta e o local no site correto para localizar a informao.

(X) (2) (3) (4) (5)

7- Reconhecimento em vez de memorizao

Tornar objetos, aes e opes visveis. Comentrios do avaliador: O site muito uniforme, no utilizando recursos grficos (imagens, cones) que facilitem a memorizao do usurio. Fornece aceleradores invisveis aos usurios inexperientes, os quais, no entanto, permitem aos mais experientes realizar tarefas com mais rapidez. Comentrios do avaliador: O site no possui indicadores como o breadcrumb ou menu habilitado no assunto (Figura 20).

(1) (X) (3) (4) (5)

8- Flexibilidade e eficincia de uso

(1) (X) (3) (4) (5)

FIGURA 20 PGINA COM INDICADORES


BREADCRUMB E ITEM DE MENU ATIVADO

9- Esttica e design minimalista

Evita o uso de informaes irrelevantes ou raramente necessrias. Comentrios do avaliador: O site possui informaes antigas, como o calendrio de 2009 e eventos acadmicos datados de 2007.

(1) (X) (3) (4) (5)

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

101

10Ajuda e Documentao

Fornece informaes que podem ser facilmente encontradas e ajuda mediante uma srie de passos concretos que podem ser facilmente encontrados e seguidos. Comentrios do avaliador: A pgina no possui um FAQ com as dvidas mais frequentes dos alunos e professores.

(X) (2) (3) (4) (5)

11Ser fcil de aprender.

Quo fcil e que tempo se leva para (i) iniciar o uso das tarefas fundamentais de um sistema e (ii) aprender o conjunto de operaes necessrias para realizar um conjunto mais amplo de tarefas. Comentrios do avaliador: Para o sistema de matrcula, o site possui um manual do discente e orientador que orienta no uso do sistema. Demais reas do site so fceis de aprender, porm a organizao da informao no est muito clara.

(1) (2) (3) (X) (5)

12-

Convite

Levar o usurio a realizar determinadas aes. Comentrios do avaliador: Site pouco convidativo, no possui busca, as informaes muitas vezes esto desatualizadas, sugesto seria apresentar pequenas notcias dos docentes e discentes do programa.

(1) (X) (3) (4) (5)

13Agrupamento/ distino de itens

As informaes so apresentadas de maneira organizada. Comentrios do avaliador: As informaes esto pouco organizadas, o que confunde o entendimento do usurio.

(X) (2) (3) (4) (5)

14-

Legibilidade

Deve estar preocupada com os diferentes tipos de usurios e apresentar as diferenciaes corretas para ocasionar uma leitura mais agradvel. Comentrios do avaliador: O site est em tamanho de fonte legvel, porm, para alguns usurios, a possibilidade de aumentar a fonte, assim como diminu-la, necessria. As grandes reas (topo, menu) esto bem destacadas.

(1) (X) (3) (4) (5)

15A carga de trabalho

Diz respeito a todos os elementos da interface que tm um papel importante na reduo da carga cognitiva e perceptiva do usurio e no aumento da eficincia do dilogo. Comentrios do avaliador: O site bem limpo, facilitando a identificao, porm a informao de cada pgina densa, provocando problemas no dilogo.

(1) (2) (X) (4) (5)

16Densidade informacional

Carga de trabalho perceptivo e cognitivo que o usurio exerce ao deparar com o seu site.

(X) (2) (3) (4) (5)

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

102
Comentrios do avaliador: Os textos so muito extensos o que passa para o usurio uma leitura rdua, em que diminuiu a eficincia do dilogo. 17A adaptabilidade necessrio que a interface proponha maneiras distintas de realizar a tarefa. Comentrios do avaliador: Para realizao das tarefas, no existe maneiras distintas, normalmente o usurio precisa ir por um nico caminho. Um buscador ajudaria na busca da informao. 18A compatibilidade Ser compatveis independentes da cultura. Comentrios do avaliador: Como o programa no oferece vagas para alunos estrangeiros, no h necessidade de outro idioma ou de adaptaes culturais. Porm, como o programa de importncia para o pas e os discentes participam de congressos internacionais, talvez seria necessria a traduo para o espanhol e o ingls. 19Deixar bvio o que pode ser clicado 20Esteticamente aprecivel Comentrios do avaliador: No so utilizados os recursos de links no visitados e visitados. Comentrios do avaliador: Esteticamente, o layout limpo. Porm o site necessita de reas de destaque que instiguem que o usurio se interesse mais pelo contedo do site. Interfaces so conservadas em contextos idnticos (mantm-se a estrutura com a qual o usurio esteja familiarizado) e diferentes para contextos distintos (quando se trata de algo novo e que no queira gerar confuso). Comentrios do avaliador: A maior parte do contedo do site possui contexto idntico, porm em algumas pginas o contexto diferente, como j mencionado no item 4 da avaliao. (1) (X) (3) (4) (5) (1) (2) (X) (4) (5) (1) (X) (3) (4) (5)

(1) (2) (X) (4) (5)

21-

Coerncia

(1) (2) (X) (4) (5)

4.4.3.5. Problemas com a arquitetura da informao


Participaram do estudo alunos da graduao em Design e alunos da ps-graduao em Design, totalizando 31 sujeitos. O primeiro grupo de 24 alunos da graduao (15 do gnero masculino e 9 do gnero feminino), com idade mdia de 20,08 anos (d.p. 1,10). O segundo grupo de 7 alunos da ps-graduao (1 do gnero masculino e 6 do gnero

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

103 feminino), com idade mdia de 27,57 anos (d.p. 3,82), caracterizando grupos coesos e representativos da populao de usurios. O primeiro grupo era composto por alunos interessados em ingressar num programa de ps-graduao. Foram elaboradas trs tarefas bsicas e necessrias para que o aluno possa participar do processo seletivo: linhas de pesquisa do programa (tarefa 1), modelo de documento padro para elaborar sua pesquisa e entregar na inscrio (tarefa 2) e agenda do ano com as datas do processo seletivo para aluno regular (tarefa 3). Os resultados do primeiro grupo foram: a tarefa 1 teve 45,8% de respostas corretas contra 41,7% de respostas erradas e 12,5% no encontraram a resposta; a tarefa 2 obteve uma porcentagem de 62,5% (15 participantes), que no encontraram a resposta, 4 responderam errado (16,7%), e apenas 5 responderam corretamente (20,8%). A mdia de tempo para execuo da tarefa foi de 4,48 minutos, o que mostrou ser um resultado preocupante. A tarefa 2 ainda apresentou um problema de terminologia, visto que alguns termos de significados parecidos apareciam mais de uma vez em locais diferentes. Alm do problema de termos semelhantes, o link para baixar o modelo de documento encontrava-se escondido no longo texto (Figura 21).

FIGURA 21 LINK PARA BAIXAR MODELO DE DOCUMENTO (ACESSADO EM 20 DE MAIO DE 2008)

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

104 A tarefa 3 tambm se mostrou problemtica, visto que 50% dos usurios no encontraram a resposta, 37,5% encontraram a resposta correta contra 12,5% que responderam errado. O segundo grupo realizou tarefas relacionadas s atividades que os alunos desenvolvem no incio do programa, como: conhecimento das linhas de pesquisa do programa e grupos de pesquisa existentes (tarefa 1); modelo de documento para realizao de estgio de docncia, que conta como atividade extra-curricular no programa (tarefa 2) e o conceito para que o aluno seja aprovado em sua qualificao (tarefa 3). A tarefa 1 atingiu um resultado timo, sem erros de navegao do usurio e sem respostas incorretas. A tarefa 2 ocasionou alguns problemas ao realizar o download do arquivo, visto que o navegador de internet, Firefox, possui uma forma diferente de salvamento dos arquivos do site para um disco local. Nas anlises, esse fator atrapalhou a execuo da tarefa, visto que os alunos se confundiam com o procedimento exigido desse tipo de navegador. Na tarefa 3, quatro participantes acharam a informao correta (57%) e os outros trs erraram (43%) ao buscarem pela informao. A tarefa 3 exigiu o maior tempo de busca, visto que a resposta da questo estava no meio de um longo texto (regulamento do programa), que no continha nenhuma figura que proporciona o filtro da informao de forma mais clara e intuitiva, o texto estava apresentado em bloco, no proporcionando uma leitura escanevel.

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

105
FIGURA 22 RECORTE DO REGULAMENTO DO PROGRAMA DE PS-GRADUAO EM DESIGN DA UNESP (ACESSADO EM 20 DE MAIO DE 2008)

4.4.3.6. Problemas com os fatores de design


Os sujeitos foram convidados a participar de uma avaliao de satisfao de fatores de design, aps palestra ministrada pelo autor de uma hora e meia sobre recomendaes de usabilidade, segundo reviso terica da pesquisa (acessibilidade, recomendaes da W3C, entre outros). Do grupo abordado, 90% eram do gnero masculino, contra 10% do gnero feminino, foram avaliados 20 indivduos com idade mdia de 21,6 anos. Os sujeitos eram alunos do curso de graduao de Cincias da Computao (45%) e Sistemas de Informao (55%). Para o teste, foram considerados usurios potenciais, uma vez que haviam recebido treinamento por meio de palestra, e fazem parte dos profissionais desenvolvedores de websites. A mdia desses indivduos de atuao na rea era de 2,65 anos, sendo que 65% deles nunca haviam participado de um teste de usabilidade, contra 35% que j haviam participado. Dos 20 participantes, 70% gostariam de realizar uma ps-graduao. Abaixo esto as notas de satisfao (variavam de 1 a 10) para alguns fatores de design, questionados na avaliao: Navegao da pgina: nota 6,3; Tipografia utilizada nas pginas: nota 6,85; Layout geral do site: nota 7,25; Distribuio dos elementos dentro do website: nota 6,9; Cores utilizadas: nota 8,25. Na avaliao, o sujeito precisava indicar uma palavra que descrevesse o website; o que o usurio mais gostou no site e o que ele menos gostou. Para a pergunta sobre qual
Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

106 palavra descreveria o website, a palavra simples foi citada sete vezes, seguida das palavras: claro/limpo, prtico e organizado. Os fatores que mais agradaram o usurio foram: cor (citada por 40% dos sujeitos), Design (10%), logo (10%), topo (10%), os outros 30% se classificaram em outras. Os fatores que influenciaram ao usurio a no gostar do site foram: o menu com muitos itens/links (40%), contedo denso e no escanevel (30%), rodap (10%), e outros 20%. Quando questionado o que poderia ser alterado no site, os resultados foram: 55% mudariam a quantidade de itens do menu vertical e as terminologias que esto repetidas, 25% melhorariam a distribuio da informao no contedo principal separando o contedos em blocos para facilitar a leitura do usurio. Alguns usurios (15%) sugeriram por tirar os links do rodap e inseri-los em outro local com mais destaque. Uma resposta interessante coletada na pesquisa era que o site precisaria ser refeito por completo, visto que o website pertencia a um programa de design, precisaria ter um website com os princpios de usabilidade melhor aplicados.

4.4.3.7. Mtodo Card Sorting


Para o teste, foram convidados 15 usurios potenciais, 6 do gnero feminino e 9 do gnero masculino. Todos os sujeitos tinham interesse no ingresso em um curso de psgraduao ou j estavam cursando algum curso. Os sujeitos utilizaram a ferramenta CardSort para organizao das categorias e subcategorais, no card sorting fechado desenvolvido para a anlise. A mdia gasta para a realizao do teste foi de 17,4 minutos por pessoa. Alm das categorias existentes, a ferramenta CardSort permitia a existncias de categorias e subcategorias em branco. Aproveitando o recurso existente no final do teste, foi questionado em entrevista se o participante gostaria de sugerir novas categorias e subcategorias. A classificao das categorias e subcategorias est representada na Figura 23.

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

107

FIGURA 23 - RESULTADOS DO TESTE REALIZADO COM A METODOLOGIA CARD SORTING

As categorias foram relacionadas com as subcategorias: Apresentao: Histrico, laboratrios, objetivos e parcerias; Linhas de Pesquisa: Grupos de pesquisa e projeto de pesquisa; Estrutura Curricular: Disciplinas; Processo Seletivo: Admisso/matrcula, alunos aprovados, prova proficincia e requisitos; Corpo Discente: Alunos especiais e alunos regulares; Agenda/Calendrio: Datas de defesas, eventos e prazos; Contatos: Telefones teis; Produo Cientfica: Artigos publicados; Documentos: Formulrios e modelos. Nessa classificao, foram consideradas subcategorias na mesma categoria, indicadas pelo menos por 8 usurios (mais que 50%).

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

108 Os dados coletados mostram que a categoria Corpo Docente e Auxlio Discente no obtiveram subcategorias atribudas a ela, porm essa no atribuio no indica que as categorias no so importantes. Os participantes avaliados mostraram-se um pouco confusos quanto ao nome da categoria Auxlio Discente e alguns sugeriram trocar pelo seguinte termo: Bolsas, visto que apesar de no abranger todo o significado do termo auxlio, o termo demonstrou ser mais intuitivo e simples. Uma nova subcategoria foi sugerida para a Corpo Docente, chamada Lista de Professores, em que estariam acompanhados dos respectivos currculos lattes. Dos 15 usurios que realizaram o teste, 8 solicitaram que o currculo lattes dos docentes estivessem em destaque. Outras subcategorias foram classificadas de forma confusa como Avaliao Capes, que demonstraria a qualidade de ensino do curso, porm alguns usurios classificaram na categoria Auxlio Discente em que a subcategoria Bolsas Capes se encontrava. Aps discusso com os avaliadores, as outras subcategorias foram classificadas como so mostradas a seguir: Apresentao: Avaliao Capes; Corpo Discente: Resumo de projetos; Auxlio Discente: Bolsa Capes e outras bolsas; Produo Cientfica: Dissertaes defendidas; Contatos: Links teis; Processo Seletivo: Regulamento.

Etapa 2 Anlise do Objeto de Estudo Anlise Heurstica Anlise com usurios

109

4.5. Etapa 3 Redesign do objeto


Com os dados coletados das anlises heursticas e das anlises com usurios, foi possvel identificar problemas de usabilidade em diversos pontos, como arquitetura da informao, navegao, segmento de normas e leis, acessibilidade, fatores de design e desatualizao do contedo da pgina. Nesse sentido, foi reformulado o site institucional na tentativa de adequ-lo s leis nacionais exigidas, assim como proporcionar um maior conforto ao usurio final quando estivesse acessando o site institucional do programa. A reformulao foi adequada aos poucos, visto que, inicialmente, foi priorizada a Arquitetura de Informao, que era um problema mais visvel no site, seguidos das normas de qualidade (recomendaes da W3C, acessibilidade, fatores de design etc.). Conforme recomendaes de RUBIN e CHISNELL (2008), aps a reestruturao, foram planejados: teste formativo/exploratrio, teste de avaliao/resumo e teste de validao/verificao, que eram realizados com testes comparativos quando necessrios na avaliao.

Etapa 3 Redesign Objeto considerando dados coletados da Etapa 2

110

4.6. Etapa 4 Testes elaborados durante o processo de redesign


4.6.1 Teste Formativo/exploratrio

Aps a definio das categorias e subcategorias, foi elaborado um prottipo, similar a um wireframe, porm com nvel de interao maior, que a ferramenta de construo de prottipos fornecia. O Prottipo foi elaborado na ferramenta Microsoft Expresssion Blend + SketchFlow, verso Trial (Figura 24), que uma ferramenta para elaborao de prottipos e fluxos de informao de sites e sistemas.

FIGURA 24- TELA DA FERRAMENTA MICROSOFT EXPRESSION BLEND+SKETCHFLOW

A partir dessa ferramenta, foi possvel esboar as posies dos elementos principais do site, assim como sugerir alteraes para melhorar os destaques das informaes do site.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

111

FIGURA 25- PROTTIPO DO SITE INSTITUCIONAL, CRIADO PARA TESTE EXPLORATRIO

O prottipo foi disponibilizado no endereo: http://www.compartilhe.net/mestrado/. Para o teste, foram convidados sujeitos interessados em realizar uma ps-graduao, que estivessem realizando ou que j tivessem realizado. Foi aplicado um questionrio com suas devidas instrues (Apndice I), que esto disponibilizadas no endereo: https://creator.zoho.com/lucynomiso/teste-exploratorio-

formativo/. O teste formativo/exploratrio foi aplicado com um teste comparativo, visto que o sujeito fazia sua anlise observando os dois objetos: o site institucional oficial e o prottipo. Foi utilizado o teste exploratrio/formativo, pois facilita a identificao de problemas j no incio do desenvolvimento do projeto, e sua correo torna mais simples de ser aplicado.

4.6.1.1.

Resultados do teste exploratrio/formativo

Foram abordados 11 sujeitos, com idade mdia de 29,09 anos, 54,5% do gnero feminino, 45,5% do gnero masculino. O teste foi realizado em formulrio on-line disponvel no endereo: http://www.compartilhe.net/mestrado/. Na figura 26, apresentada a relao dos sujeitos com a ps-graduao.
Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

112

FIGURA 26 - RESPOSTAS DA PERGUNTA : QUAL A SUA RELAO COM A PS-GRADUAO?

Os sujeitos analisados eram usurios experientes com internet, visto que 54,5% deles navegam na internet mais que 8 horas por dia, e os demais 45,5% navegam entre 1 hora a 8 horas por dia. Para a pesquisa, foi solicitada a realizao de duas tarefas que, em pesquisa realizada em 2008, apresentaram problemas ao serem executadas. A tarefa 1 solicitava que o sujeito encontrasse o Modelo de Plano de Pesquisa (necessrio para inscrever-se no processo seletivo). Para essa tarefa, o prottipo mostrouse menos eficiente que o site oficial. Ao analisar o site oficial, foi possvel verificar que o local onde o modelo se encontrava em teste no ano anterior era diferente ao do ano de 2009. Essa reestruturao do site oficial foi considerada o motivo do insucesso no prottipo.

FIGURA 27 - PORCENTAGEM DE USURIOS QUE CONSEGUIRAM REALIZAR A TAREFA 1

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

113 O insucesso do resultado tambm pode ser esperado, pois a quantidade de funcionalidades aplicadas no prottipo era de 30 a 40%. Foi considerado pelo autor que o teste comparativo no fosse interessante de ser aplicado com o teste exploratrio/formativo. Para a tarefa 2, era necessrio encontrar requisitos para a obteno do ttulo de mestre (necessrio para alunos que acabaram de ingressar no programa). Para essa tarefa, o prottipo obteve uma porcentagem superior de sucesso pelos sujeitos.

FIGURA 28 - PORCENTAGEM DE USURIOS QUE CONSEGUIRAM REALIZAR A TAREFA 2

Quando analisada a satisfao geral do site institucional e do prottipo, o site institucional obteve uma nota 4,82 (entre uma escala de 0 a 10), e o prottipo 7,91, o que mostra um melhor grau de satisfao aps reestruturar a arquitetura de informao do site. Em respostas abertas, sobre a pergunta: Quais funcionalidades devem ser melhoradas no prottipo, as respostas focaram mais nas funcionalidades no aplicadas, como: falta de links para os contedos, falta de acabamento nas cores do site, falta de identificao do site institucional (sobre o que ele ?), entre outras sugestes vlidas e que sero implementadas no prottipo de teste de validao, que possui de 70 a 80% das funcionalidades aplicadas. Em Contatos, foi sugerida a insero de e-mails para contato que vlido, visto que no era uma informao planejada na reformulao. No questionrio, os usurios apontaram o item de que mais gostaram no prottipo e o de que menos gostaram. O item mais interessante, segundo os sujeitos, foram: a organizao (menos itens nos menus) e melhor destaque no contedo principal. Porm,
Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

114 como o prottipo ainda estava com poucas funes aplicadas, os sujeitos tiveram dificuldade de entender como seria o resto da navegao, visto que os contedos internos estavam incompletos e pouco descritivos. Esse problema, que atrapalhou a anlise de satisfao do site, foi solucionado pelo prottipo seguinte que j estava desenvolvido com a ferramenta CMS escolhido para a reformulao (Joomla! verso1.5), como mostra a figura abaixo:

FIGURA 29 PAINEL DE ADMINISTRAO DE ARTIGOS DO JOOMLA! VERSO 1.5

A escolha da ferramenta CMS Joomla! deve-se facilidade e ao acesso ferramenta, uma vez que o autor da pesquisa j possua conhecimento dela. Entretanto, importante ressaltar que outras ferramentas, como o Wordpress e Drupal, so capazes de realizar as mesmas funes, porm no era vivel para o presente estudo.

4.6.2

Teste de avaliao/resumo

O teste de avaliao ou resumo uma continuao do teste formativo/exploratrio. Aps a coleta de dados, foi feita a indicao dos usurios sobre itens do site que poderiam ser melhorados. Foi reformulado o site institucional utilizando-se o Joomla!, ferramenta

CMS escolhida para a realizao da pesquisa e utilizada por outros sites, como j mencionados na pesquisa.
Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

115 Para a reformulao, todas as informaes coletadas na pesquisa foram

consideradas. Nela, foram inseridas entre 70% a 80% das funcionalidades do site, visto que essa porcentagem era a exigida para realizao de um teste de avaliao ou resumo. Das funcionalidades inseridas para o teste, foram considerados problemas listados anteriormente nas anlises heursticas e nas anlises com usurios, assim como no teste formativo/exploratrio realizado para verificao da navegao do site, listadas a seguir: Problemas de usabilidade que ainda persistem Os links que no mudavam de cor quando visitados foram corrigidos (Figura 30).

FIGURA 30 LINKS EXISTENTES NO SITE (NO VISITADO VISITADO)

O contedo das pginas foi reorganizado para que ficasse mais escanevel, foram inseridos textos destacados e imagens para que a leitura ficasse mais clara para o usurio.

FIGURA 31 CONTEDO DO SITE COM DESTAQUE E IMAGENS

Listagem e pesquisas de baixa relevncia Anteriormente, o site no apresentava um buscador de contedo, o problema foi solucionado com a insero do mdulo de busca (Figura 32).

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

116

FIGURA 32 BUSCADOR DO SITE E OS RESULTADOS ENCONTRADOS PARA A PALAVRA UNESP

Rolagem Textos muito extensos foram quebrados, para que no deixassem o site muito extenso e com extensas rolagens na pgina.

FIGURA 33 PGINA EXTENSA QUEBRADA EM VRIAS SUB-PGINAS.

Inconsistncia dentro do site O site apresentava dois links de Home que enviavam para pginas distintas: pgina inicial da Faculdade de Arquitetura, Artes e Comunicao, e a outra para a pgina inicial do Programa de Ps-graduao. Isso ocasiona problemas de navegao. O problema foi solucionado, redirecionando o link apenas para a pgina inicial do programa de Psgraduao.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

117 Tempo de download lento Por meio de boas prticas da utilizao do HTML/XTHML, possvel que a pgina carregue com mais rapidez e em blocos, o que possibilita que o usurio navegue em partes do site antes mesmo de ela carregar totalmente. Menus suspensos e menus em cascata O problema era bem agravante no site e, em testes, foi identificado que os usurios no gostavam desse tipo de menu. Por meio da reestruturao da informao, foi elaborado um menu vertical e horizontal (Figura 34).

FIGURA 34 MENU VERTICAL E HORIZONTAL DO SITE (EM DESTAQUE)

No cumprimento das recomendaes W3C O Joomla! um CMS que gera o cdigo da pgina conforme as regras da W3C. Na pgina inicial do site antigo, foram detectado 21 erros. Quando desenvolvida a pgina inicial no CMS, o validador no apresentou nenhum erro (Figura 35). Como o site possua contedo restrito, no foi possvel analisar outras pginas, visto que o validador apenas acessava pginas pblicas.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

118

FIGURA 35 VALIDADOR W3C PARA XTML, SEM APRESENTAO DE ERROS NA PGINA INICIAL

A validao do CSS da pgina antiga no site era de 8 erros e 113 avisos. Para o site reestruturado, nenhum erro e nenhum aviso foram identificados, porm, como a pgina no possua acesso pblico, no foi possvel avaliar contedos internos.

FIGURA 36 VALIDADOR W3C PARA CSS SEM APRESENTAO DE ERROS NA PGINA INICIAL

Problemas de acessibilidade do site Para o validador de acessibilidade daSilva, foram encontrados, em nvel de prioridade 1, conforme as regras do WCAG, 10 erros e 24 avisos; para prioridade 2, 29 erros e 79 avisos; para a prioridade 3, 1 erro e 69 avisos na antiga pgina.
Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

119

FIGURA 37 VALIDADOR DE ACESSIBILIDADE DASILVA COM APRESENTAO DE ERROS MENOS RELEVANTE


NA PGINA INICIAL

Na reestruturao pelo CMS Joomla!, o nmero de erros diminuiu (Figura 37), porm no foi possvel obter uma pgina inteira sem erros, visto que o site utiliza recursos que no possuem regras de padronizao, como os scripts em javascript. Assim, foi considerado que, apesar de no eliminar todos os erros, obteve-se uma melhoria satisfatria, visto que os erros de prioridade 1, 4 erros, no prejudicavam a leitura de um usurio com problemas que no fossem tcnicos, visto que o erro ocorria quando o navegador no suportava scrpits. Foi verificado o novo caminho do leitor de telas no site reestruturado (Figura 38), alm da insero de um caminho adequado. Foram inseridos atalhos (Figura 39), para que o usurio possa pular diretamente para o contedo principal, funcionalidade que visvel apenas para usurios que utilizam o recurso de Tecla TAB para navegao. Com a reformulao, o site passou a ser mais acessvel e gil para usurios com algum tipo de deficincia.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

120

FIGURA 38 ORDEM DE NAVEGAO DO LEITOR DE TELA (DOS-VOX)

FIGURA 39 ATALHOS DE AUXLIO PARA DEFICIENTES VISUAIS, VISVEL APENAS PARA NAVEGAO PELA
TECLA TAB

Lista de recomendaes dos autores a) Visibilidade de status do sistema implementado por meio de breadcrumb; no menu lateral esquerdo, o item de menu ficava ativado.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

121

FIGURA 40 BREADCRUMB E MENU LATERAL ESQUERDO COM ITEM ATIVADO

b) Controle do usurio e liberdade alterao do tamanho do texto, caso fosse mais agradvel para o usurio. c) Ajuda para os usurios reconhecerem, diagnosticarem e recuperarem-se de erros o breadcrumb foi inserido, o boto voltar do navegador funcionava e o menu ativado foi desenvolvido para que o usurio se localizasse com mais facilidade dentro da pgina. d) Preveno de erros foi elaborada uma reformulao densa da arquitetura de informao do site, foi realizada sua reestruturao, pois o antigo site apresentou problemas devido m organizao da informao que ocasionava confuso na busca da informao. e) Reconhecimento, em vez de memorizao a insero de cones nos recursos (boto pesquisar) facilitou o reconhecimento, assim como as imagens nas pginas.

FIGURA 41 CONE NO BOTO PESQUISAR

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

122

FIGURA 42 NAS NOTCIAS FOI INSERIDO IMAGENS

f) Flexibilidade e eficincia de uso foram inseridos no site aceleradores invisveis, como breadcrumbs e item de menu ativo. Outro recurso utilizado foi a chamada do artigo (com breve resumo do contedo), antes de mostrar todo o artigo.

FIGURA 43 PGINA COM DUAS CHAMADAS (RESUMO DO ARTIGO), NA ENTRADA

g) Esttica e design minimalista foram removidas do site informaes irrelevantes, como contedos antigos.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

123 h) Ajuda e documentao FAQ (perguntas frequentes) um recurso que se encaixa ao objeto e que foi inserido no Teste de Validao. i) Convite o site passou a ter mais figuras que ilustrasse o assunto abordado, as informaes foram reestruturadas, visando facilitar a navegao. j) Agrupamento/distino de itens a organizao foi realizada por meio da reestruturao da arquitetura de informao k) Legibilidade a insero de recurso que aumentasse as fonts do site facilitou a leitura, e a font do texto escolhida foi uma font padro para a web sem serifa.

FIGURA 44 OPO PARA AUMENTAR O TEXTO DA PGINA

l) Carga de trabalho pginas com o contedo denso foram quebradas para melhorar a cognio dentro do site.

FIGURA 45 INSERO DE PAGINAO, PARA DEIXAR O CONTEDO MENOS DENSO

m) Densidade informacional pginas densas foram amenizadas, com marcaes de ttulos, insero de textos em negrito e outros recursos para texto.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

124

FIGURA 46 CONTEDO DO SITE COM IMAGENS E MARCAES DE TTULOS E BLOCOS

n) Adaptabilidade foi inserido o recurso de pesquisa e a mesma informao poderia ser encontrada em dois caminhos facilitando a busca pela informao. o) Compatibilidade insero de outras lnguas no foi realizada, apesar de ser muito importante, mas a estrutura seguiu a padronizao encontrada em sites da internet (localizao de menu, pesquisar, contedo em destaque etc.). p) Deixar bvio o que pode ser clicado links com cursor em formato de mo, utilizando-se de recurso de mouse over (quando o mouse posicionado em cima do link, fica com linha marcada). q) Esteticamente aprecivel o layout atual do site

(http://www.faac.unesp.br/posgraduacao/design/) foi considerado agradvel em pesquisa realizada pelo autor, no necessitando de grandes alteraes, apenas pequenas adaptaes para os novos recursos inseridos no site. r) Coerncia recursos novos inseridos, mantiveram-se harmnicos no site.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

125 Arquitetura de informao do site A arquitetura da informao do site foi alterada por meio da aplicao de card sorting e da utilizao de ferramentas para reorganizao da informao. Essa reorganizao foi testada na elaborao do teste formativo/exploratrio, por meio do prottipo criado e testado. Fatores de design do site Em uma pesquisa de opinio realizada pelo autor sobre os elementos de design do site, a nota geral do layout foi de 7,25, considerada uma nota satisfatria. Porm, itens do site foram considerados no muito satisfatrios, como o menu lateral que continha muitos itens e o contedo que era denso e no escanevel. Para esses itens, o autor fez sugestes que, durante o teste de avaliao, foram apreciadas pelos usurios. O questionrio do teste de avaliao foi baseado na realizao de trs tarefas, e um questionrio de satisfao foi feito aps a realizao das tarefas (Apndice J).

FIGURA 47 REDESIGN DO SITE INSTITUCIONAL EM PLATAFORMA JOOMLA! 1.5

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

126 O site reestruturado foi disponibilizado no endereo:

www.compartilhe.net/MestradoUnesp. Ele tinha o seu contedo restrito (Figura 48), possibilitando apenas que usurios com login e senha participassem da pesquisa, esses dados foram distribudos com o questionrio.

FIGURA 48 SITE REESTRUTURADO COM ACESSO RESTRITO APENAS PARA USURIOS CADASTRADOS

4.6.2.1.

Resultados do teste de avaliao/resumo

Foram abordados 16 sujeitos, com idade mdia de 24,6 anos, 31% do gnero feminino, 69% do gnero masculino. Os sujeitos apresentavam relao com os programas de ps-graduao, como mostra a Figura 49.

FIGURA 49 PERFIL DOS SUJEITOS INTERESSE EM CURSO DE PS-GRADUAO

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

127

teste

foi

realizado

em

formulrio

on-line,

disponvel

no

endereo:

https://creator.zoho.com/lucynomiso/teste-avalia-o-resumido/. Foi levantada a experincia de uso de internet dos sujeitos avaliados, mostrando que eram usurios considerados experientes.

FIGURA 50 PERFIL DOS SUJEITOS USO DA INTERNET

Para o teste de avaliao, foi solicitada a realizao de trs tarefas e de um questionrio de satisfao. As tarefas foram selecionadas em reas que o pesquisador ainda considerava problemticas e que a arquitetura de informao ainda no estava corretamente aplicada. A tarefa 1 perguntava a durao mxima de uma bolsa CAPES, oferecida pelo programa. A resposta encontrava-se no corpo de um artigo, no item de menu Auxlio Discente.

FIGURA 51 RESPOSTAS TAREFA 1

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

128 Para a tarefa, 31% dos sujeitos no encontraram a resposta correta. O artigo era o mesmo encontrado no site oficial do programa. No questionrio de satisfao, foi sugerida pelos sujeitos a insero da chamada do artigo, em que fosse inserido o resumo do artigo. A tarefa 2 foi mal formulada e gerou interpretao ambgua. Como a tarefa gerou conflitos, foi desconsiderada para a pesquisa. A tarefa 3 solicitava que o aluno indicasse, entre as alternativas, quais professores faziam parte do programa de ps-graduao. Foram inseridos nomes semelhantes para verificar o nvel de ateno dos usurios ao lerem o contedo de pginas.

FIGURA 52 RESPOSTAS DA TAREFA 3

O resultado dessa tarefa foi interessante, visto que, dos 16 sujeitos, apenas 2 encontraram a resposta exata. O problema pode ter ocorrido, pois todas as demais perguntas comportavam uma nica resposta. A tarefa 3 possibilitava resposta mltiplas. Posteriormente, no questionrio de satisfao, o usurio indicou a dificuldade em encontrar as respostas, como demonstra a figura 53.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

129

FIGURA 53 RESPOSTA DO QUESTIONRIO DE SATISFAO

O teste de avaliao focou em tarefas que exigiam um grau de ateno maior dos sujeitos, ocasionando um nmero menor de acertos. A nota para a arquitetura de informao do site foi de 6,5, e para o layout do site, a nota foi de 8,38 (escala de 0 a 10). Em respostas abertas, os sujeitos comentaram que a rea Documentos no tinha relao com a informao sobre Requisitos para obteno do ttulo de mestre (referente tarefa 2, desconsiderada na pesquisa), a sugesto foi considerada vlida, visto que, na reformulao, essa informao foi mantida na mesma estrutura do site oficial, pois foi considerada na pesquisa a necessidade da criao de uma rea Informaes para Alunos, para armazenar informaes teis que fossem interessantes ao discente. No menu horizontal, foi levantado o problema de falta de destaque e no funcionamento correto em algumas pginas. Para a falta de destaque, foram inseridos cones e o problema de funcionamento foi corrigido para o teste de validao.

4.6.3

Teste de validao/verificao

No teste de validao/verificao, foram reunidas as informaes coletadas no teste de avaliao/resumo, para finalizao do prottipo final com 90% a 100% de suas funcionalidades aplicadas. Problemas de estrutura foram revisados e aplicados para o teste de validao.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

130 Aps as revises, foi elaborado um novo teste com quatro tarefas e um questionrio de satisfao final, realizado aps o trmino de realizao das quatro tarefas indicadas (Apndice K).

4.6.3.1.

Resultados do Teste de validao/verificao

No teste de validao, foram abordados 14 sujeitos, 21% do gnero feminino e 79% do gnero masculino, idade mdia de 25 anos (d.p. 2,32), todos eles relacionados com o programa de ps-graduao pela seguinte classificao: pretendiam realizar uma psgraduao, estavam realizando ou j haviam concludo (Figura 54).

FIGURA 54 PERFIL DOS SUJEITOS INTERESSE NO CURSO DE PS-GRADUAO

Foi

utilizado

um

formulrio

on-line

disponvel O

no formulrio

endereo: on-line

https://creator.zoho.com/lucynomiso/teste-validacao-verificacao/.

facilitou a coleta da informao e gerou um ambiente bem prximo do real, em que o usurio realizava as tarefas do questionrio paralelamente a outras de suas atividades pessoais, sem que ficasse sujeito a um ambiente fechado onde no se sentisse confortvel e pressionado para a realizao das tarefas. O formulrio foi dividido em dados pessoais, para que fosse possvel identificar se ele poderia ser considerado como usurio potencial ou no. Foi atribuda a realizao de quatro tarefas e um questionrio de satisfao no final, que fazia comparao entre o site oficial do programa e o site reformulado na pesquisa.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

131 Os usurios eram experientes e possuam um bom tempo de navegao em pginas da web, como mostrado a seguir:

FIGURA 55 PERFIL DOS SUJEITOS USO DA INTERNET

A tarefa 1 solicitava que o usurio respondesse quando o curso de Doutorado em Design foi aprovado pela Capes. No site oficial, essa informao estava localizada dentro de um contedo sem destaque, e no site reformulado foi colocado em forma de tabela com o intuito que tivesse mais destaque e que fosse exibido em forma de cronograma (Figura 56). Para a tarefa, todos os usurios conseguiram encontrar a resposta correta (100% de acerto).

FIGURA 56 INFORMAO DO ARTIGO DESTACADO EM TABELA

A tarefa 2 solicitava que o usurio encontrasse o docente responsvel pela disciplina: Design de Moda, Aspectos Tecnolgicos. 14% dos usurios no encontraram a resposta (2 indivduos), contra 86% dos usurios que acertaram (12 indivduos).
Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

132 A tarefa 3 solicitava que o usurio respondesse quantos crditos em disciplinas obrigatrias um discente do mestrado deveria ter at sua qualificao. No teste de avaliao, essa informao era disponibilizada dentro da rea de Documentos, no mesmo local do site oficial, gerando dvidas por parte do usurio. Assim, para o teste de validao, a informao foi removida e duplicada em duas reas relacionadas: Informaes para Alunos e Corpo Discente. Nessa tarefa, apenas um indivduo no encontrou a resposta correta (7%), contra 93% que acertaram. A tarefa 4 solicitava que o usurio encontrasse o prazo mximo do indeferimento da inscrio. A resposta dessa tarefa estava localizada em documento PDF que deveria ser aberto pelo navegador, aps o usurio clicar em um link dentro da pgina. No site oficial, esse arquivo substitua a pgina; j no site reformulado, esse arquivo era aberto em uma nova janela/aba. Assim, o usurio poderia continuar sua navegao dentro da pgina. No site oficial, a informao sobre a data mxima de liberao de alunos indeferidos no existia, apenas a lista dos que foram indeferidos. Para a tarefa, 86% dos usurios encontraram a resposta, contra 14% que no conseguiram localizar a resposta.

FIGURA 57 RESPOSTAS DA TAREFA 4

No questionrio de satisfao, os usurios responderam qual era o nvel de dificuldade para encontrar as respostas no site reformulado.

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

133

FIGURA 58 RESPOSTA DO QUESTIONRIO DE SATISFAO

Os usurios admitiram ter dificuldades para encontrar a resposta (57% dos usurios). O grau de satisfao, quanto organizao da informao, foi de 7,3. A satisfao, quanto ao visual/layout do site, foi de 7,5 (escala de 0 a 10 para ambas as questes). O grau de satisfao mnima nesse tipo de teste, segundo RUBIN e CHISNELL (2008), de 70%, visto que uma satisfao de 100% no real. Foi realizado um teste de comparao no final, em que o usurio comparava o site oficial com o site reformulado. Ao perguntar o grau de satisfao entre o antes e o depois, (site oficial e site reformulado), o site reformulado obteve 6,9 (escala de 0 a 10).

4.6.4

Verso final do prottipo desenvolvido na pesquisa

O prottipo final, aps realizao dos testes de usabilidade e desenvolvido conforme os princpios de usabilidade, foi disponibilizado no endereo:

http://www.compartilhe.net/MestradoUnesp, mas com acesso restrito por login e senha. Essa preocupao foi necessria, visto que o site reformulado poderia gerar problemas, caso disponibilizasse informaes que pudessem confundir o usurio final (Figura 59).

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

134

FIGURA 59 VERSO FINAL DO PROTTIPO, DESENVOLVIDO EM FERRAMENTA CMS JOOMLA! V.1.5

Etapa 4 Testes elaborados durante o processo de redesign Teste Exploratrio Teste de Avaliao Teste de Validao

135

5. Consideraes finais
A usabilidade de sites institucionais fator preponderante para que estes cumpram seus objetivos bsicos: informar de modo seguro, eficiente e efetivo as audincias e seus respectivos usurios. A base terica sobre recomendaes de design ergonmico informacional mostrado nos dias atuais, mas a aplicao dos requisitos projetuais em prottipos e os testes com ferramentas especializadas, continuam sendo etapas imprescindveis para alcanar a efetiva usabilidade desses sites. O presente estudo baseou-se no questionamento sobre o uso de ferramentas especficas na elaborao de sites e a possibilidade de gerao de ambientes virtuais com usabilidade satisfatria. Para tal, props-se testar uma dessas ferramentas disponveis (CMS), visando ao melhoramento da usabilidade do site institucional do Programa de Psgraduao em Design da UNESP; alm de verificar sua contribuio para as reas de conhecimentos que envolvem o design ergonmico informacional. Os procedimentos adotados caracterizaram cinco etapas metodolgicas, sendo a primeira de reviso terica e as demais de aplicao laboratorial. Essas etapas prticas, por sua vez, caracterizaram-se pelo controle satisfatrio das variveis envolvidas, o que garantiu resultados expressivos para a evoluo alternada de etapas de anlise, desenvolvimento de prottipos, e reanlise, proporcionando um prottipo final. Particularmente, quanto a esse prottipo final, pode-se considerar que, aps abordagens com um total de 109 sujeitos durante a pesquisa, foi possvel analisar as respostas e solucionar problemas de usabilidade, pouco aplicados no site oficial, assim como a diminuio de conflitos pelos usurios quanto localizao da informao no objeto de estudo. Todos os sujeitos participantes contriburam essencialmente para uma melhor reestruturao do objeto de estudo e so igualmente responsveis pelo sucesso de um prottipo mais funcional e amigvel. Certamente, a participao de usurios em estudos

Etapa 5 Consideraes Finais

136 dessa natureza faze o diferencial para o mapeamento e a soluo dos problemas de mais complexa resoluo. Outro aspecto a ser destacado que a utilizao da ferramenta CMS Joomla! no desenvolvimento de sites foi fundamental para o alcance da efetiva usabilidade no prottipo final, visto que proporcionou a estrutura base validada conforme recomendaes da W3C; e garantiu atender as normas de qualidade necessrias. Existem outras ferramentas CMS, talvez at melhores, como o Drupal e o Wordpress, porm a ferramenta CMS selecionada para o estudo foi o Joomla!, pois se apresentou mais amigvel em seu layout de administrao, facilitando que usurios sem conhecimento tcnico conseguissem facilmente utiliz-lo. Outro fator da escolha foi que o autor tambm possua anteriormente um conhecimento tcnico da ferramenta, que auxiliou na velocidade de desenvolvimento do prottipo final. Alm das ferramentas CMS, outras ferramentas auxiliaram no desenvolvimento das metodologias como aceleradores, tornando os testes mais eficientes na coleta de dados, de documentao e de organizao das informaes coletadas na pesquisa, entre outros procedimentos. Na presente pesquisa, foi realizado um estudo terico de vrios tpicos que auxiliam no desenvolvimento de websites mais usveis. Toda a reviso auxiliou na construo de um prottipo que estivesse preocupado com a usabilidade do usurio final. Logo aps cada etapa finalizada da produo do prottipo, foram feitos testes por meio de anlise heurstica e anlise com usurios, que auxiliaram na eliminao contnua de possveis erros de usabilidade. A reviso, aplicao e testes provaram que possvel desenvolver websites com um maior grau de satisfao pelos usurios, como foi mostrado nos dados coletados.

Etapa 5 Consideraes Finais

137 Por outro lado, reconhece-se tambm que o presente estudo apresenta, ainda, algumas restries e limitaes, visto que os testes foram, na maior parte dos casos, aplicados por meio on-line e que talvez tenham sido prejudicados, comparando-se com laboratrios prprios para os testes de usabilidade. Por outro lado, foi possvel observar que o sujeito, ao realizar as avaliaes em seu ambiente normal de navegao na internet, mostrou-se mais tranquilo e seguro para responder s questes apresentadas e expor livremente seu ponto crtico quanto sua viso do prottipo elaborado. Esse fator pode ser considerado positivo, mesmo quando foi observado que os usurios so mais desatentos quando realizam os testes em seu ambiente normal de trabalho, do que quando so convidados a sarem para um laboratrio monitorado, os quais se sentem mais pressionados e obrigados a realizarem as tarefas prescritas na avaliao. Nesse sentido, com o conhecimento global alcanado, podemos apresentar algumas recomendaes, como: - Os estudos na rea de usabilidade de site institucionais sempre devem considerar usurios potenciais ou efetivos; - Os testes de usabilidade devem ser um requisito para o desenvolvimento do design de sites institucionais; - De todos os tpicos avaliados, a arquitetura de informao, quando corrigida, apresentou melhoria expressiva no site; - Os estudos dessa natureza devem evoluir em seus procedimentos e ferramentas, assim como a tecnologia da informao evolui no contexto mundial. Por fim, apesar da ampla reviso terica apresentada, dos criteriosos materiais, dos mtodos aplicados e da ateno especial ao design da nova interface especialmente no que tange os aspectos de usabilidade pode-se afirmar, com segurana, que a principal contribuio do presente estudo est focado na possibilidade afirmativa de aplicao de

Etapa 5 Consideraes Finais

138 ferramentas CMS no melhoramento da usabilidade de sites institucionais. Alm disso, destaca-se, ainda, a conquista de novos conhecimentos decorrentes da experincia laboratorial desenvolvida no presente estudo, bem como a contribuio cientfica em incrementar os temas ligados ao design de interfaces, usabilidade e ergonomia informacional, os quais contribuem de forma efetiva para o desenvolvimento do Design Ergonmico, gerando novos conhecimentos e discutindo os melhores caminhos para o amadurecimento do assunto usabilidade de websites.

Etapa 5 Consideraes Finais

139

6. Referncias bibliogrficas
ABERGO. Norma ERG BR 1002 Cdigo de Deontologia do Ergonomista Certificado. Disponvel em: <http://www.abergo.org.br/>. Acesso em: 16/9/2009. ABNT, Ergonomic requirements for office work with visual display terminals (VDTs) Part 11: Guidance on usability, ISO 9241-11:1998(E), 1998. ADLER, I.K. STREUBEL, M. Usability inspections by 'experts'. Anais do 4 CIDI, Congresso Internacional de Design da Informao, 2009. ARAGAKI, B. UOL Tecnologia: Uma comparao entre Internet Explorer, Firefox e Opera. 2005. Disponvel em: <http://tecnologia.uol.com.br/especiais/ultnot/2005/06/22/

ult2888u46.jhtm>. Acesso em: 10/5/2009. BASTIEN, C.; SCAPIN, D. Ergonomic Criteria for the Evaluation of Human Computer Interfaces. INRIA, 1993. Disponvel em: <

http://www.webmaestro.gouv.qc.ca/publications/archives/webeducation19982004/2000-11/criteres.pdf>. Acesso em: 15/6/2009. CERN, European Organization for Nuclear Research. Disponvel em:

<http://public.web.cern.ch/Public/Welcome.html>. Acesso em: 14/6/2009. CHEVALIER, A; KICKA, M. Web designers and web users: Influence of the ergonomic quality of the web site on the information search. International Journal of HumanComputer Studies, n 64, p. 1031-1048, jun. 2006. CYBIS, W: Engenharia de Usabilidade ISO 13407 Human-Centered Design. Disponvel em: <http://www.inf.ufsc.br/~cybis/pg2003/Engenharia_Usabilidade.ppt>. Acesso em: 11/5/2009.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

140 ________. Desenvolvimento gil e engenharia de usabilidade. Disponvel em:

<http://imasters.uol.com.br/artigo/12299/usabilidade/desenvolvimento_agil_e_engenha ria_de_usabilidade/>. Acesso em: 13/6/2009. CYBIS, W., BETIOL, A.; FAUST, R., Ergonomia e Usabilidade, Conhecimentos, Mtodos e Aplicaes. Editora Novatec, 2007. DOSVOX- Projeto DOS-VOX. Disponvel em: <http://intervox.nce.ufrj.br/dosvox/>. Acesso em 15/9/2009. DUQUE, L.A., VIERA, A. F.G. Organizao da informao na web: interfaces para o trabalho colaborativo, Anais do ENANCIB, 2008. FABRICA LIVRE. Case: USP Universidade de So Paulo. Disponvel em:

<http://www.fabricalivre.com.br/clientes/case-usp-joomla>. Acesso em 10/10/2009. FARINA, M., PEREZ, C., BASTOS, D. Psicodinmica das cores em Comunicao. 5 edio revista e ampliada. ISBN: 987-85-212-0399-5, So Paulo: Edgard Blcher, 2006. GOOGLE Google Insights para Pesquisa. Disponvel em:

<http://www.google.com/insights/search>. Acesso em: 10/6/2009. Governo de Cabo Verde. Cabo Verde referenciado como exemplo da utilizao de Open Source. Disponvel em:

<http://www.governo.cv/index.php?option=com_content&task=view&id=1041>. Acesso em: 10/10/2009. GUNDERSON, J. Desktop Browsers. Web Accessibility- A foundation for Resource. Springer-Verlag London Limited, 2008. DOI: 10.1007/978-1-84800-050-6. IIDA, I. Ergonomia - projeto e produo. 2 edio. So Paulo Ed. Edgar Blcher Ltda, 2005.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

141 INTERNET WORLD STATS: Usage and Population Statistics. Disponvel em:

<http://www.internetworldstats.com/>. Acesso em: 14/6/2009. IBGE Instituto Brasileiro de Geografia e Estatstica, 2000. Disponvel em:

<http://www.ibge.gov.br/home/estatistica/populacao/censo2000/populacao/censo2000 _populacao.pdf>. Acesso em: 10/5/2009. ISO 9241-11, Ergonomic requirements for office work with visual display terminals (VDTs) Part 11: Guidance on usability, First Edtion, 1998. ISO 13407, Human-centred design processes for interactive systems, First Edtion, 1999. JAWS JAWS for Windows Screen Reading Software. Disponvel Acesso em:< em:

http://www.freedomscientific.com/products/fs/jaws-product-page.asp>. 10/6/2009.

KENNARD, J. Mastering Joomla! 1.5 Extension and Framework Development, The Professionals Guide to Programming Joomla! Packt Publishing Ltd., ISBN 978-184719-282-0, 2007. LEDFORD, J.L., SEO Search Engine Optimization Bible. Wiley Publishing, Inc. Indianapolis, Indiana. ISBN: 978-470-175000-2, 2008 LVY, P. As Tecnologias da Inteligncia. So Paulo. Editora 34, 1997. LEI NACIONAL N 10.098. Estabelece normas gerais e critrios bsicos para a promoo da acessibilidade das pessoas portadoras de deficincia ou com mobilidade reduzida, e d outras providncias, 2000. Disponvel Acesso em: em:

<http://www3.dataprev.gov.br/SISLEX/paginas/42/2000/10098.htm>. 20/6/2009.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

142 MARTINEZ, M. L. Usabilidade no design grfico de web sites, 2000. Disponvel em: <http://www.lsi.usp.br/~martinez/works/_artigos/martinez00a.pdf>. 10/5/2009. MEURER, H.,SZABLUK, D. Projeto e: metodologia projetual para ambientes dgito-virtuais, Anais do 4 CIDI, Congresso Internacional de Design da Informao, 2009 MILLARCH, F. O que CMS e porque voc precisa de um. Disponvel em: <http://webinsider.uol.com.br/index.php/2005/06/08/o-que-e-cms-e-porque-voceprecisa-de-um/>. Acesso em: 17/5/2009. MORVILLE, P. Information Architecture on the World Wide Web. O'Reilly & Associates, Inc. First Edition, 1998. NBR 9241-11, Requisitos Ergonmicos para Trabalho de Escritrios com Computadores Parte 11 Orientaes sobre Usabilidade, 2000. NIELSEN, J; LORANGER, H. Usabilidade na web: Projetando websites com qualidade. Traduo Edson Furmankiewicz e Carlos Schafranski. So Paulo: Campus, 2007. NIELSEN, J., LANDAUER, T. K. Why You Only Need to Test with 5 Users, 2000. Disponvel em: <http://www.useit.com/alertbox/20000319.html>. Acesso em: 13/6/2009 NIELSEN, J. Usability Engineering. ISBN: 1-12-518406-9. Morgan Kaufmann, 1993. ________. Heuristic Evaluation. In Nielsen, J and Mack, R.L., editors, Usability Inspection Methods. John Wiley and Sons, Inc. 1994. ________. Card Sorting: How Many Users to Test, 2004. Disponvel Acesso em:

em:<http://www.useit.com/alertbox/20040719.html>. Acesso em: 13/6/2009. ________. Usability 101: Introduction to Usability. ISSN 1548-5552. Disponvel em: <http://www.useit.com/alertbox/20030825.html >. Acesso em: 13/6/2009.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

143 ________. Projetando websites. Traduo: Ana Gibson. Rio de Janeiro. Campus, 2000. NIEMEYER, L. Tipografia: Uma apresentao. 4 edio. Rio de Janeiro. Ed. 2AB, 2006. NOMISO, L. S. A importncia da arquitetura da informao na busca de contedos confiveis: um estudo de caso, 2008, Santo Amaro. Anais do 8 Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, Santo Amaro: SENAC, 2008. NVDA - NonVisual Desktop Access. Disponvel em: <http://www.nvda-project.org/>. Acesso em: 10/6/2009. OLHER, M. Perspectiva da Qualidade no Uso de Software Interativo. Disponvel em: <http://www.fgp.com.br/site/default.asp?Pagina=3853582908.4633474687.550511844 0.5321614492.5092234557.5275738505&textoCod=30>. Acesso em: 04/6/2009. OLIVEIRA, L. Wireframe, documento cada vez mais importante . Disponvel em: <http://webinsider.uol.com.br/index.php/2003/12/09/wireframe-documento-cada-vezmais-importante/>. Acesso em: 15/9/ 2009. PEDROSA, T. M. C., TOUTAIN, L. B., O uso das cores como informao em interfaces digitais. Artigo apresentado no Encontro Nacional de Ensino e Pesquisa em Informao, 2004. Disponvel em: <http://www.cinform.ufba.br/vi_anais/docs/

TaisPedrosaLidiaToutain.pdf>. Acesso em: 17/5/2009. POLETTO, C. Sociabilidade Virtual para deficientes Visuais: Verdade ou Utopia?. Monografia (Curso de Especializao Latu Sensu) - Instituto Federal de Educao, Cincia e Tecnologia de Mato Grosso, 2009. 80p. Portal da RENAPI - Rede de Pesquisa e Inovao em Tecnologias Digitais . Manuais Desenvolvimento Web Acessvel. Disponvel em:

<http://www.renapi.org/acessibilidade/manuais/desenvolvimento-web-acessivel>. Acesso em: 11/10/2009.


Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

144 ________. Manuais Tecnologia Assistiva. Disponvel em: Acesso < em:

http://www.renapi.org/acessibilidade/manuais/tecnologia-assistiva>, 11/10/2009.

PREECE, J.; ROGERS, Y.; SHARP, H. Design de Interao: alm da interao homemcomputador. Trad. Viviane Possamai Porto Alegre: Bookman, 2005. Programas Livres. Governo finlands recomenda a utilizao de software livre na administrao pblica. Disponvel em:

<http://www.programaslivres.net/2009/03/17/governo-finlandes-recomenda-autilizacao-de-software-livre-na-administracao-publica/>. Acesso em: 10/10/2009. RAHMEL, D. Professional Joomla, Wiley Publishing, Inc., Indianapolis, Indiana, 2007. ISBN: 978-0-470-13394-1 REDISH, J. Breaking Up Large Documents for the Web - Part 1, 2007. Disponvel em: <http://www.uie.com/articles/breaking_down_documents/>. Acesso em: 12/10/2009. REIS, G. A. dos. Centrando a Arquitetura de Informao no usurio. Dissertao (Mestrado em Cincia da Informao). So Paulo: Universidade de So Paulo, 2007. Disponvel em: <http://www.guilhermo.com/mestrado>. Acesso em: 17/6/2009. ROMAACH, J., ARNAO, A. C., WARDFORD, C. F. Ministrio da Educao Departamento de Educao Bsica. Normas de Acessibilidade na Informtica, ISBN: 972-742-189-X, 2003. RUBIN, J. CHISNELL, D. Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests, Second Edition, ISBN: 978-0-470-18548-3. Wiley Publishing, Inc, 2008. SADDI, A. AQUINO, F. ZILSE, R. Tecnologia na Web edio 55. Wireframe. Disponvel em: <http://www.revistawebdesign.com.br/downloads/43/2.pdf>. Acesso em: 16/8/2009.
Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

145 SCAPIN, D.L. BASTIEN, J.M.C. Inspection do ergonomique Workshop d'interfaces 96. et Critres em:

Ergonomiques,

1996.

Anais

Disponvel

<http://www.labiutil.inf.ufsc.br/scapin0.html>. Acesso em: 20/9/2009. SERPRO, Software Livre. Disponvel em: <http://www.serpro.gov.br/tecnologia/softwarelivre>. Acesso em: 13/6/2009. SHAIKH, D. The Effect of Website Typeface Appropriateness on the Perception of a Company's Ethos. Usability News, Volume 9 Issue 2, 2007. _______. The Effects of Line Length on Reading Online News. Usability News, Volume 7 Issue 2, 2005. VIRTUAL VISION Incluso digital para deficientes visuais. Disponvel em:

<http://www.virtualvision.com.br/>. Acesso em: 10/6/2009. W3C: Web Accessibility Initiative (WAI). Disponvel em: <http://www.w3.org/WAI/>. Acesso em: 22/5/2009. ______. Conformance. Disponvel em: <http://www.w3.org/TR/WAI-

WEBCONTENT/#Conformance> Acesso em: 16/5/2006. ______. Directivas para a acessibilidade do contedo da Web - 1.0 . Disponvel em:<http://www.utad.pt/wai/wai-pageauth.html>. Acesso em: 18/10/2009. ______. Policies relating to web accessibility. Disponvel em: http://www.w3.org./WAI/Policy. Acesso em: jul 2009. ______. WCAG 2.0. Disponvel em <http://www.w3.org/TR/WCAG/>. Acesso em: 10/7/2009. ______. Web content accessibility guidelines 1.0. Disponvel em:

http://www.w3.org/TR/1999/WAI-WEBCONTENT. Acesso em: 10/7/2009.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

146 W3Schools. Web Statistics and Trends. Disponvel em:

<http://www.w3schools.com/browsers/browsers_stats.asp>. Acesso em: 13/7/2009.

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

147

7. Apndices
7.1. Apndice A Anlise Heurstica de Problemas de Usabilidade

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

148

7.2. Apndice B Anlise Heurstica das Recomendaes da W3C

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

149

7.3. Apndice C Anlise Heurstica de Acessibilidade

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

150

7.4. Apndice D Anlise Heurstica dos Princpios de Usabilidade

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

151

7.5. Apndice E Anlise com Usurios sobre AI (graduao)

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

152

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

153

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

154

7.6. Apndice F Anlise com Usurios sobre AI (psgraduao)

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

155

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

156

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

157

7.7. Apndice G Anlise com Usurios sobre os Fatores de Design

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

158

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

159

7.8. Apndice H Anlise com Usurios Mtodo Card Sorting

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

160

7.9. Apndice I Teste Exploratrio/Formativo

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

161

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

162

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

163

7.10.

Apndice J Teste de Avaliao/Resumido

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

164

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

165

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

166

7.11.

Apndice K Teste de Validao/Verificao

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

167

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

168

Anlise, aplicao e otimizao de metodologias para elaborao de websites: O Design Ergonmico na busca da usabilidade e melhor interao humano computador

Вам также может понравиться