UNIVERSIDADE FEDERAL DO AMAZONAS

PRO REITORIA DE PESQUISA E PS-GRADUAO DEPARTAMENTO DE APOIO A PESQUISA PROGRAMA INSTITUCIONAL DE INICIAO CIENTFICA

INTERFACES DO SITE INSTITUCIONAL DA UNIVERSIDADE FEDERAL DO AMAZONAS (UFAM)

BOLSISTA: Denis Marques Solano, FAPEAM

MANAUS 2009

UNIVERSIDADE FEDERAL DO AMAZONAS PRO REITORIA DE PESQUISA E PS-GRADUAO DEPARTAMENTO DE APOIO A PESQUISA PROGRAMA INSTITUCIONAL DE INICIAO CIENTFICA

RELATRIO FINAL PIB-SA/0008/2009-2010 INTERFACES DO SITE INSTITUCIONAL DA UNIVERSIDADE FEDERAL DO AMAZONAS (UFAM)

Bolsista: Denis Marques Solano, FAPEAM Orientadora: Dr Luiza Elayne Correa Azevedo

MANAUS 2009

LISTA DE FIGURAS

Figura 1 Processo de comunicao na web ..................................................11 Figura 2 Relao entre disciplinas acadmicas.............................................19 Figura 3 Relao entre disciplinas acadmicas consideradas na pesquisa ..20 Figura 4 Mapa de arquitetura de informao, como tudo est organizado....23 Figura 5 Relao entre modelos de projetos e usurio acadmico................24 Figura 6 Como os usurios vem ..................................................................25 Figura 7 Como os usurios vem ............... ..................................................25 Figura 8 Hierarquia visual do portal da UFAM ...............................................26 Figura 9 Interfaces integrada ao portal ....... ..................................................27 Figura 10 Falha de carregamento ..................................................................28 Figura 11 Falha de carregamento de componente ........................................28

SUMRIO

1 INTRODUO ...............................................................................................04

2 FUNDAMENTAO TERICA ................................................................09

ANLISE DO SITE DA UFAM ..........................................................................19

RESULTADOS ,,,,,,,,,,,,,,,,.................................................................................46

REFERNCIAS.................................................................................................48

CRONOGRAMA................................................................................................50

RESUMO

O contexto informacional da Internet e dos sites possibilita aos seus usurios quase infinitas formas de interao e comunicao ao redor do mundo. O efeito mais comum e constrangedor com a facilidade de acesso a inconsistncia na informao, inviabilidade de navegao o que causa rudo comunicacional e perda motivacional e emocional. Esta pesquisa se props a analisar as interfaces do site institucional da Ufam para se verificar aspectos de Usabilidade, Ergonomia, Semitica, questes culturais e tecnolgicas que permitissem determinar uma interveno eficaz e consistente no mencionado sistema.

Palavras-chave: Interfaces; Site Ufam; Usuabilidade.

INTRODUO

O Design tm demonstrado nas ltimas dcadas sua importncia na aplicabilidade de conceitos em diversos produtos, tornando-se uma ferramenta multidisciplinar. atravs do Design que se pode alcanar um padro de qualidade, onde todas as etapas para esse padro podem ser planejadas, conseguindo assim, agregar valores tecnolgicos dentro de conceitos bsicos da rea de estudos. Aplicando-se o Design na pesquisa para o desenvolvimento conceptual de Tecnologias de Informao e Comunicao TICs - Gomes (2004) afirma ser um fator determinante para se desenvolver a configurao de um dado objeto onde se podem trabalhar conceitos relacionados funo, estrutura, forma, produo e confeco que dependem de recursos humanos, tecnolgicos e mtodos de produo industrial. O objeto de estudo dessa pesquisa consiste em avaliar os graus de comunicao da interface do site institucional da Universidade Federal do Amazonas (www.ufam.edu.br) e propor uma interface otimizada para atender aos preceitos ergonomia, usuabilidade entre outros. O produto/objeto descrito se d pelo meio tecnolgico (Tecnologia Informacional), levando em considerao que o objeto em si transmite informaes (NIEMEYER, 2003), ou seja, h interaes entre a parte que manipula um dado objeto e detm informao e o prprio objeto (site). Quando nos voltamos s interfaces de programas destinados internet, no podemos deixar de nos focar no usurio utilizador e perseguidor de informaes e ou servios. O desenvolvimento tecnolgico e a facilidade ao acesso informao tem tornado a internet um veculo comunicacional de grande eficcia. De acordo com Cybis et al (2007) o meio de interao limitava-se apenas a programadores, que desenvolviam seus prprios aplicativos dentro de suas limitaes, ou melhor, feito sob medida. Quando o sistema ganhou um certo pblico externo, veio a preocupao em tornar esse sistema usvel e amigvel, nascendo o termo usabilidade onde o objeto de estudo passa a ser a interao ou comunicao entre a interface humana e o computador

O Design voltado para web deve ser focado no usurio para que haja menos constrangimento no acionamento, navegao e acesso a informao. O desafio estabelecer critrios de avaliao que atendam ou supram os anseios do usurio, dentro dos conceitos de usabilidade, ergonmicos, semiticos, comunicacional, tecnolgicos e dentre outros. Conforme Wurman (2000), devemos tornar o complexo claro. O processo s possvel tendo as bases do ensino e da pesquisa, onde podemos fazer diagnsticos e intervenes obedecendo aos critrios da prpria linha de pesquisa. No estudo de usabilidade devem-se levar em considerao anlises semiticas (signos e cdigos visuais e relacionamento visual), estudos sensoriais, aspectos psicolgicos (emocionais), formas, critrios ergonmicos, processo de comunicao, relao entre o mundo real e o mundo virtual, hierarquia de informao (fluxo de informao) e a heurstica que consiste em descrever propriedades comuns de interfaces usveis (ROCHA E BARANAUSKAS, 2003). Atravs dos conceitos observados, se pode planejar modelos estruturais de interface (no caso sites), fceis e amigveis para navegao rpida e eficaz, onde o usurio pode alcanar suas metas de interao com determinado sistema. Nesse sentido, a comunicao se d a partir do ambiente onde o meio utilizado a internet e a mensagem, constituda como contedo e o canal de propagao se transforma na prpria interface. A operao torna o tempo de resposta do usurio mais rpido e sem constrangimentos. Segundo Preece (2008) atravs da difuso da internet os projetos bsicos de web continuam semelhantes em certos aspectos. Em meados de 1993 e 1994, possuam caractersticas mpares, e se observava uma guerra entre navegadores. De um lado o Natscape se opondo a outros navegadores e a W3C (World Wide Web Consortium - padres para a criao e a interpretao dos contedos para a Web), desenvolvendo padres HTML (HyperText Markup Language, que significa linguagem de marcao de hipertexto), XHTML (eXtensible Hypertext Markup Language, uma

reformulao da linguagem de marcao HTML, baseada em XML) e CSS (Cascading Style Sheets ou simplesmente CSS). Sob a tica do citado autor havia uma necessidade de se obter mais atravs da internet, pois as linguagens de marcao sozinhas no davam conta da crescente web. Faltavam fontes (tipogrficas), havia inadequaes de pginas web para diferentes formas de resoluo de telas e navegadores. Todos esses fatores acabam se tornando irritante para o usurio. Ainda de acordo com o autor acima os projetistas que at ento projetavam sob medida dentro de seus moldes de conhecimento/interesse sofreram com uma grande quantidade de convenes, a partir do momento de produo e difuso de contedos para internet. Tais mudanas mesmo que restritas a determinada funo de uma pgina web trazia muito benefcio ao usurio. Nos dias atuais temos padres determinantes tanto para o desenvolvimento de aplicativos para internet, quanto para uma linguagem comunicacional difundida em todos os outros meios. Roger (2005) afirma ainda que muitas convenes podem mudar, mas h uma constante: a natureza humana. Mesmo a internet sendo considerada como uma fora social e comercial to radical e causadora de mudanas, ainda no causou uma mutao visvel nas espcies. Krug (2006) salienta: conhecer o usurio (ser humano), uma parte fundamental desse estudo, onde questes simples: Onde estou? Onde devo comear? Onde eles colocaram o...? Quais as coisas mais importantes nesta pgina? Por que eles deram esse nome a isto?, entre outras. Tais pressupostos de Krug so de importncia vital para se detectar a eficincia ou no de um site (no caso o site institucional da UFAM) para que o se consiga de fato fazer essa mediao entre o usurio e a entidade que representada no site por meio da marca da Universidade. Krug (2006) enfatiza que o estudo de conceitos, pois os mesmos permanecero no importando o avano da tecnologia como um agente de mudana e transformao da sociedade.

2. FUNDAMENTAO TERICA 2.1 Tecnologia e contexto social Segundo Breton citado por Lemos (2004) o advento da tecnologia do computador pode ser explicado por trs condies histricas: as condies tcnicas, social e ideolgica. Ainda nesse mesmo contexto a informtica , assim, uma forma de aliar o conhecimento da natureza s formas de funcionamento da sociedade onde se cria a possibilidade de leitura da realidade, traduzida pela linguagem digital, automatizando a informao. Com base na exposio de Breton, para Lemos (2004) os novos meios de comunicao coletam, manipulam, estocam, simulam e transitam os fluxos de informao criando, desse modo, uma nova camada que se sobrepe aos fluxos materiais. O mencionado processo denominado de ciberespao, um espao sem dimenses, um universo de informaes de forma instantnea e reversvel.

No contexto, o processo de comunicao na web fornecido pela (Figura 1) abaixo:

Ambiente social Usurio Web Interface Contedo Resposta/Transformao

Figura 1 Processo de Comunicao na web FONTE: <http://www.slideshare.net/paulocoimbra/apresamazonasdesign>

11

2.2 Ergonomia Segundo a Associao Internacional de Ergonomia (International Ergonomics Association - IEA), a ergonomia, ou human factors & ergonomics (fatores humanos e ergonomia), a disciplina cientfica relacionada ao entendimento das interaes entre seres humanos e outros elementos de um sistema. Tambm a profisso que aplica teoria, princpios, dados e mtodos para projetar a fim de otimizar o bem-estar humano e o desempenho geral de um sistema. Segundo a ABERGO - Associao Brasileira de Ergonomia os domnios de especializao da ergonomia so: fsica, organizacional e cognitiva. A ltima se refere aos modelos mentais tais como percepo, memria, raciocnio e reposta motora. Os tpicos relevantes incluem o estudo da carga mental de trabalho, tomada de deciso, desempenho especializado, interao homem computador, estress e treinamento conforme esses se relacionem aos projetos envolvendo seres humanos e sistemas. Ergonomia: Percepes e processamento de informao

Segundo lida (2005) a informao no senso comum, geralmente se confunde com notcias transmitidas pelo jornal, TV ou fala. Num sentido mais amplo, informao pode ser considerada uma transferncia de energia que tenha algum significado em uma dada situao. Assim, uma luz que se acende e apaga, um ponteiro que se move ou uma sirene que toca, transmitem informaes. Como o homem interage continuamente com outras pessoas, mquinas e o ambiente h uma troca contnua de informaes entre esses elementos, nos dois sentidos, ou seja, recebendo e transmitindo informaes.

Iida (2005) afirma: os aspectos sensoriais (percepo e processamento de informao) nos falam da postura do usurio diante do modo em que capta a informao (percepo), armazena (memria) e faz seu uso no trabalho (deciso). Atualmente a eficcia de um trabalho na sua maioria depende mais da percepo humana em reter informaes e tomadas de deciso.

Segundo Iida (2005), a sensao se refere ao processo biolgico de captao de energia ambiental. Essa energia captada por clulas nervosas dos rgos sensoriais, sob forma de luz, calor, presso, movimento, partculas qumicas e assim por diante. Depois de captada convertida em impulsos eletroqumicos, que transmite ao sistema nervoso central, onde pode ou no ser processado.

Percepo est ligada recepo e reconhecimento de uma informao, comparando-a com uma informao anteriormente armazenada na memria. Depende tambm das experincias anteriores e fatores individuais como personalidade, nvel de ateno e expectativas. A mesma sensao pode produzir percepes diferentes em diferentes pessoas, levando-as em diferentes tipos de decises.

2.3. Definies de Usabilidade A usabilidade est relacionada aos estudos de Ergonomia e de Interao Humano-computador. Para Cybis et al (2007) a usabilidade a qualidade que caracteriza o uso dos programas e aplicaes. Assim no uma qualidade intrnseca de um sistema, mas depende de um acordo entre as caractersticas de sua interface e as caractersticas de seus usurios ao buscarem determinado objetivo em determinadas situaes de uso. De acordo com o mencionado autor, o objetivo da usabilidade garantir sistemas e dispositivos adaptveis maneira de como o usurio

pensa, se comporta e trabalha. Usabilidade: Norma ISO 9241 - Ergonomia de software Pela definio da International Organization for Standardization (ISO), usabilidade a medida pela qual um produto pode ser usado por usurios especficos para alcanar objetivos especficos com efetividade, eficincia e satisfao em um contexto de uso especfico (ISO 9241-2002). A referida ISO 9241 conceitua as seguintes categorias abaixo:

13

Medida, entendida como valores resultantes de uma medio e os processos utilizados para se obter aqueles valores; Eficcia, a mesma permite que o usurio alcance os objetivos iniciais de interao, e tanto avaliada em termos de finalizao de uma tarefa quanto tambm em termos de qualidade do resultado obtido; Eficincia se refere quantidade de esforo e recursos necessrios para se chegar a um determinado objetivo. Os desvios realizados pelo usurio durante a interao e a quantidade de erros cometidos pode servir para avaliar o nvel de eficincia do site. A terceira medida de usabilidade, a satisfao, a mais difcil de medir e quantificar, pois est relacionada com fatores subjetivos. De maneira geral, satisfao se refere ao nvel de conforto sentido pelo usurio ao utilizar a interface e alcanar seus objetivos ao navegar no site; Segundo a norma citada acima a usabilidade pode ser especificada ou medida segundo outras perspectivas: Facilidade de aprendizado - o usurio rapidamente consegue explorar o sistema e realizar suas tarefas; Facilidade de memorizao - aps certo perodo sem utiliz-lo, o usurio no freqente capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele; Baixa taxa de erros - o usurio realiza suas tarefas sem maiores transtornos e capaz de recuperar erros, caso ocorram; Medio O conjunto de atributos representando a usabilidade evidencia o esforo necessrio para a utilizao de um software. Da mesma forma considerado o julgamento individual de seu uso atravs de um conjunto implcito ou explcito de usurios (AVOURIS, 2001). Para tanto, os critrios de

medio da caracterstica de usabilidade estabelecidos pela norma ISO 9241 reflete na: Anlise das caractersticas requeridas do produto num contexto de uso especfico; Anlise do processo de interao entre usurio e produto; Anlise da eficincia (agilidade na viabilizao do trabalho), da eficcia (garantia da obteno dos resultados desejados) e da satisfao resultante do uso desse produto.

15

2.5 Engenharia de Usabilidade Para Cybis et al (2007) a engenharia de usabilidade ocupa-se da interface com o usurio, um componente do sistema interativo formado por apresentaes e estruturas de dilogo que lhe conferem um comportamento em funo das entradas do usurio ou de outros agentes externos. Ela apresenta painis com informaes, dados, controle, comandos, mensagens, e por meio dessas apresentaes que a interface solicita e recepciona a entrada de dados, de controles e de comandos do usurio. Sob a perspectiva dos citados autores, o desenvolvedor tem mais chances de sucesso ao construir o ncleo funcional dos programas do que interfaces com o usurio. O sistema tem comportamento definido inicio meio e fim. Cybis et al (2007) diz ainda que o desenvolvedor de interfaces, no possui as tais facilidade, pois o sistema humano x interface constituem um sistema sociotcnico que exige conhecimentos, abordagens, mtodos e ferramentas especficas, ainda em desenvolvimento. Em geral nem os programadores de software nem os designers grficos recebem formao sobre o sistema cognitivo humano, sobre os princpios e as recomendaes ergonmicas ou ainda sobre os mtodos, as tcnicas e as ferramentas de desenvolvimento centrado no usurio e no uso. Para Cybis et al (2007) as iniciativas mais recentes sobre

desenvolvimento da engenharia de usabilidade so, entretanto, de ordem metodolgica. Seu ciclo foi definido como essencialmente evolutivo interativo e baseado no envolvimento do usurio, como no esquema geral sugerido pela norma ISO 13407 Projeto centrado no usurio. Para o referido autor o objetivo avaliar a qualidade das interaes e levar em conta os resultados dessas avaliaes para a construo de novas verses das interfaces. Se implementada desde cedo no desenvolvimento, tal estratgia pode reduzir o risco de falhas conceituais do projeto, garantindo que, a cada ciclo, o sistema responda cada vez melhor s expectativas e necessidades dos usurios em suas tarefas.

2.6 Design de Interao Segundo Preece et al (2008) design de interao se refere aos produtos interativos que fornecem suporte s atividades cotidianas das pessoas, seja no lar ou no trabalho. Design de interao significa criar experincias para dar melhorias maneira como as pessoas trabalham se comunicam e interagem. (PREECE et al, 2008). Nesse sentido, consiste em encontrar maneiras de fornecer suporte s pessoas. Os autores acima relatam que os sistemas de informao constituem uma outra rea preocupada com aplicao de tecnologia de computao em domnios como negcios, sade e educao. Abaixo seguem as categorias estudadas para entendimento global do assunto (Figura 2).

Disciplinas Acadmicas

Prtica em Design

Design Grfico Ergonomia Psicologia/Cincia cognitiva Informtica Engenharia Cincia da computao/Engenharia de software Cincias Sociais(Comunicao, antropologia, sociologia) Fatores Humanos Design de produto Design Artstico Design Industrial

Design de Interao

Industria de filmes Sistema de informao Trabalho cooperativo suportado por computador

Interao homem computador - HCI Engenharia cognitiva

Ergonomia Cognitiva

Figura 2 - Campos interdisciplinares FONTE: Preece et al, (2008)

17

Campos interdisciplinares

Disciplinas Acadmicas

Prtica em Design

Design Grfico Ergonomia Psicologia/Cincia cognitiva Informtica Engenharia Cincia da computao/Engenharia de software Cincias Sociais(Comunicao, antropologia, sociologia) Fatores Humanos Design de produto Design Artstico Design Industrial

Design de Interao

Industria de filmes Sistema de informao Trabalho cooperativo suportado por computador

Interao homem Ergonomia Cognitiva computador - HCIEngenharia cognitiva

Prticas da pesquisa consideradas Prticas de pesquisa no consideradas

Figura 3 Campos Interdisciplinares FONTE: Preece et al (2008).

19

2. ANLISE DAS INTERFACES DO SITE DA UFAM Conforme Cibys et al (2007) a avaliao representa um julgamento de valor sobre as qualidades ergonmicas das Interfaces - Humano - Computador. Essa avaliao realizada por especialistas em ergonomia, com base em sua experincia e competncia no assunto. Os avaliadores se baseiam na heurstica ou em padres de usabilidade gerais, prprios ou desenvolvidos por especialistas na rea, como Jakob Nielsen, Ben Shneiderman, Dominique Scarpin e Christian Bastien. A anlise segue a proposta de Nielsen (1994), onde h dez heursticas ligadas usabilidade: Visibilidade do estado do sistema; Mapeamento entre o sistema e o mundo real; Liberdade e controle ao usurio; Consistncia e padres; Preveno de erros; Reconhecer em vez de relembrar; Flexibilidade e eficincia de uso; Design esttico e minimalista Suporte para o usurio reconhecer, diagnosticar e recuperar erros; Ajuda e documentao

Tais pontos determinaro como o portal da Universidade Federal do Amazonas est situado em relao usabilidade, comunicao, ergonomia e de interao.

1. Visibilidade do estado do sistema Hoje a UFAM conta com um portal que possui um nvel de hierarquia larga e longa, onde h uma grande extenso de links relacionados ao menu. Possui ainda um ndice de navegao profunda, ou seja, o sistema apresenta vrios subsistemas (Figura 4).

Figura 4: Mapa da arquitetura da organizao de informao FONTE: Portal da UFAM - <www.ufam.edu.br>

Segundo a heurstica h necessidade do sistema informar ao usurio sobre a tarefa que ele est realizando. A base para a operao de dez segundos como tempo para manter o usurio focalizado no dilogo com a interface 2. Mapeamento entre o sistema e o mundo real Aqui relacionado ao modelo mental do usurio em relao ao sistema. Vises da realidade intimamente ligadas aos conhecimentos adquiridos pelas

21

pessoas sobre a funo, a estrutura e o funcionamento dos sistemas de acordo com a Figura 5:

Modelo conceitual do sistema

Modelo conceitual do sistema

Projetista Interface Sistema

Usurio

Figura 5 Relaes estabelecidas entre modelos conceituais de projetistas e usurios por meio de uma interface. FONTE: CYBIS (2008).

Exemplo aplicado no portal de como os projetistas criam, a partir das idias de Krug (2006) pode ser visualizado na Figura 6:

Figura 6 Como os projetistas criam FONTE: - Retirado do Portal da UFAM <www.ufam.edu.br>

Exemplo aplicado no portal do que os usurios vem, sob a perspectiva de Krug (2006) pode ser visualizado na Figura 7:

Preciso fazer minha matrcula no portal. Ah! Comunicao ser o link para ajuda?

Figura 7 Como os usurios vem FONTE: KRUG (2006).

23

Aplicando e identificando os modelos mentais percebidos no portal da Ufam so visualizados na Figura 8:

Cabealho e Rodap Menu de Navegao principal Principais notcias Eventos Links Externos Subsistema de email Figura 8 - Hierarquia visual do portal da UFAM. FONTE: Retirado do Portal da UFAM <www.ufam.edu.br>

3. Liberdade e controle ao usurio O usurio possui a liberdade de controla o sistema, cabendo a ele a deciso sobre cancelar ou voltar em uma determinada tarefa. 4. Consistncia e padres O sistema deve possuir padres para comando e aes. No caso do portal da UFAM ela deve apresentar consistncia no dilogo da interface com o usurio atravs de uma mesma formatao, para facilitar tomadas de deciso em relao integridade e a forma de como o sistema utilizado. Exemplo:

Figura 9 - Interfaces integradas ao portal FONTE: Retirada do portal da UFAM <www.ufam.edu.br>

Conforme a (Figura 8) se percebe que o portal da Universidade j possui uma formao, dentro desse universo existem outros subsistemas que no possuem a mesmas caractersticas a no ser o braso da universidade o que leva ao usurio ter que aprender novas formas de navegabilidade aumentando desconforto ou frustrao no sentido de que o usurio se sinta incapaz de realizar uma tarefa, e que, muito provavelmente no seja realizada.

25

5. Preveno de erros

Evitar erros. Prevenir possveis situaes de erros e preparar a interface para que os erros no ocorram. Exemplo:

Figura 10 - Falha de carregamento Fonte: Portal do aluno Retirado de <www.ufam.edu.br>

Figura 11 Falha no carregamento de componentes de menu Fonte: Portal da UFAM<www.ufam.edu.br>

Os itens a seguir sero analisados e aplicados nas prximas etapas do trabalho, seguindo as suas definies, para melhor entendimento da interface e eventuais propostas que viro. 6. Reconhecer em vez de relembrar Diminuir a sobrecarga de memria do usurio, de forma que os elementos ou componentes dialoguem com o usurio lhe permitindo suas escolhas. Sem que a ao precise ser revista mentalmente antes de ser executada. Dialogo do sistema com o usurio. O que se aplica ao nmero de sistemas existentes no portal onde preciso relembrar de cada interface. Ver tpico sobre consistncia e padres. 7. Flexibilidade e eficincia de uso

Utilizao de comandos de atalhos como, por exemplo, utilizar a tecla TAB para navegao de campos em formulrio. Opo de voltar em hipertextos ou duplos cliques no mouse. O sistema precisa ser fcil para leigos e flexveis para usurios avanados.

8. Design esttico e minimalista Os dilogos com o sistema tem de ser simples e precisam ser diretos e naturais, Apresentando informaes pertinentes ao usurio, tendo em vista a interao da compatibilidade do usurio a interface e a execuo da tarefa. 9. Suporte para o usurio reconhecer, diagnosticar e recuperar erros Mensagens de erros amigveis, de modo que no constranja o usurio, sem cdigos, levando o usurio a uma possvel soluo. Ver tpico relacionado a preveno e erros.

27

10. Ajuda e documentao

A interface ideal deveria procurar ser intuitiva de modo que se evitasse utilizar o contedo de ajuda. E ainda deve orientar o usurio no caso de dvida, ser de fcil localizao, bem como oferecer sistema de busca.

Anlise Heurstica do novo portal da Universidade Federal do Amazonas. Segundo Dias (2003), as heursticas basearam-se na experincia prtica de vrios pesquisadores em testes com usurios. Neste trabalho, foram consideradas, em especial, as heursticas de usabilidade para web de forma, funo, metfora, navegao e interface, interao e design visual, com base nas recomendaes bsicas de usabilidade baseadas em Bastien e Scapin (1993), Dul e Weerdmeester (1991), Jordan (1998), Schneiderman (2005) e Nielsen (1994). No portal da Ufam possvel acompanhar notcias referentes instituio, concursos, consultas e acessos de professore, tcnicos e alunos, bem como a comunidade participante da rea extensionista. Com a reformulao do portal ocorrida em Novembro de 2009 se pode observar que todo o acesso realizado na primeira pgina aparece a seguinte informao, veja a Figura 12, Voc ser redirecionado para nosso novo portal da Universidade Federal do Amazonas. Clique aqui para acess-lo

imediatamente. Sob esta perspectiva possvel observar um momento de espera e dependendo da velocidade de conexo a demora pode ser bem maior.

Figura 12 Espera no carregamento da nova pgina.

29

Inferncia 1 Recomenda-se a retirada de tal informao ou visando estabelecer requisitos relacionados acessibilidade promovendo o uso do sistema por usurios de outros pases incentivaria um melhor acesso para alunos ou professores de intercmbio, alm da possibilidade da escolha escolha de outras interfaces relacionada s diferentes idiomas.

Figura 13 Acesso atravs de novos idiomas

O novo layout do portal da Universidade apresenta os seguintes aspectos (Figura 14). Informaes acumuladas, pouco aproveitamento dos espaos no browser fazem com que haja uma barra de rolagem muito extensa onde as informaes por vezes podem ser perdidas ou ignoradas. Os pontos positivos em relao ao anterior esto relacionados preocupao com o uso de uma tipografia com boa visibilidade e implementao de uma caixa de pesquisa. Em resumo apresenta um aspecto moderno e aparentemente mais limpo. (Figura 14)

Figura 14 Novo layout do Portal da UFAM

31

A distribuio das informaes e construo de um raciocnio de navegao permanece (navegabilidade) ineficiente.

Figura 15 Aspectos da antiga proposta do Portal da UFAM

Atualmente o acesso feito pela homepage principal que possui a identificao do Ministrio da Educao no topo, juntamente com o menu suspenso no canto superior direito. Abaixo se encontra o banner identificando a instituio Ufam.

Figura 16 Pgina principal

33

Recomendao 1

Recomenda-se o estudo de todo o fluxo de navegao, para detectar links e pginas rfs.

Na figura 17 ocorre uso excessivo de efeitos grficos, como no caso o uso da cor do texto em relao ao aspecto figura fundo. No geral os elementos visuais esto dispostos de forma pouco atrativo causando um desconforto visual. correto afirmar que o nome da instituio deve ficar evidente, porm os elementos que a compem concorrem com a figura de fundo. Isto ocorre pelo fato de o banner apresentar em seu elemento textual o nome da instituio sobre um degrade que vai do azul ao branco com a tipologia branca, geraNDO pouco contraste tambm em relao ao elemento da fotografia a rvore.

Figura 17

Recomendao 2 Recomenda-se como na Figura 18 o uso de simplicidade para poder alcanar nosso objetivo: saber identificar a instituio. Sobre o assunto, Nielsen (1994) em suas heursticas, afirma que dez segundos o tempo limite para manter a ateno do usurio focalizado no dilogo. Por outro lado, Krug (2006) diz que a pgina web deve ser evidente e por si s auto-explicativa

Figura - 18

Ambigidade relacionada ao link Webmail na forma escrita e em formato de minibanner (Figura 19). O ltimo s possvel perceber que se trata de um

link quando se passa o mouse em cima. Isto ocorre pelo fato de o minibanner ter caractersticas visuais no familiares com um link. A ambigidade tambm visto no item pesquisa O item de pesquisa restringe o nmero de caracteres para pesquisa, impossibilitando, a procura por algum tema especfico que tenha um nmero maior de caracteres.

Figura 19 Webmail e pesquisa

O item Programa de Visitas parece ser um item parte do minibanner Agende a Sua, pois h um separador de informaes. O item Conhea a UFAM aparenta ser do item NAVI, cujo link no se referencia a algo que d um significado imediato ao usurio. A distribuio das interfaces entre os itens relacionados aqui na figura 20 se apresenta de maneira desordenada, prejudicando a navegao.

Figura 20 Separador de informao dificultam a navegabilidade

Recomendao 3 Recomenda-se a separao das informaes por itens de forma que sejam eliminadas quaisquer dvidas para o usurio. Os objetos devem ser clicveis de acordo com sua hierarquia informacional.

35

Recomendao 4

Figura 21 Pesquisa

O item de pesquisa restringe o nmero de caracteres para pesquisa, o que impossibilita a procura por algum tema especfico que tenha um nmero maior de caracteres.

Recomenda-se o aumento dos nmeros de caracteres para pesquisa, um espaamento entre as informaes e a retirada do item Pesquisa j que a informao dentro do Box junto com a lupa so demais relevantes e habitualmente utilizadas na internet. A utilizao de links como links escritos j que nesse contexto o site apresenta o menu com caractersticas escritas e no como botes possveis de cliques.

Recomendao (Figura 21).

Figura 21 As informaes separadas ajudam em uma navegao mais objetiva.

Na figura 22, o item Notcias possui suas categorias que podem ser separados no sistema de banner rotativo como j foi feito. O acumulo de informao sobrecarrega a pgina tornando a navegao e o visual pouco legvel e pouco interessante para o usurio que enxerga apenas rudos visuais. As aes de carregamento entre pginas bastante demoradas e maantes.

Figura 22 Informaes a serem customizadas

37

Recomendao 5 Recomenda-se como na figura 23 utilizar o sistema de banner separado por abas, onde segundo Nielsen (1994), o usurio teria mais controle sobre o sistema de notcias, permitindo fazer e refazer a ao de consulta sobre determinado assunto. Nesse mesmo aspecto segundo Krug (2006), devemos deixar a hierarquia visual clara em cada pgina, tirando proveito das convenes, dividindo as pginas em reas definidas para que se possa deixar o bvio ser clicado, minimizando a confuso.

Figura 23 - Customizao das informaes

O item em questo conforme a figura 24 representa o menu geral do portal, que de forma inteligente dividida em cores que destacam seu contedo e por fim ajudam ao usurio a definir do que se trata cada item de menu. Porm um item hierarquizado de forma extensa e ainda confusa mesmo com o uso de cores. Os acessos a cada item por vezes nos levam a uma escolha o que torna essa parte de navegao por vezes frustrante. Na (Figura 24) quando se clica no item Portal do aluno deseja-se deslocar diretamente ao portal para efetuar o login ou verificar notcias relacionadas aos alunos, mas o que acontece que o usurio direcionado para uma outra pgina para da sim clicar e ter acesso ao portal do aluno. Quanto maior o nmero de passos mais frustrante se torna a navegao, fatores tcnicos tambm influenciam nesses aspectos como por exemplo a lentido dos servidores, o tempo limite que cada usurio possui para acesso a internet atravs dos laboratrios.

Figura 24 Navegao pouco objetiva

Com a extenso da navegao mais comum o erro de ambigidade, as informaes dispostas se por vezes se tornam repetidas diante do nmero de informao dispostas no portal, o constrangimento aqui ocorre pelo fato de se clicar em um link e sempre ser direcionado a mesma pgina por vezes sem conseguir chegar ao objetivo esperado. Recomendao 6 Recomenda-se mais objetividade quanto navegao, e um melhor estudo quanto a navegabilidade e hierarquizao do sistema. Quanto mais objetivo for o sistema melhor ser utilizado o que aumenta a satisfao do usurio. Nielsen (1994), afirma que se deve falar a mesma lngua o tempo todo, e nunca se deve identificar uma mesma ao com cones ou palavras diferentes, facilitando a identificao do usurio, reconhecer ao invs de lembrar para evitar acionar a memria do usurio o tempo inteiro, permitindo que a interface em seu dilogo com o usurio oferea ajuda contextual, e informaes capazes de orientar as aes do usurio. Atravs do estudo, foi possvel eliminar ambigidades e a partir deste ponto elaborar uma estrutura de navegao mais objetiva.

39

Figura 25 Viso da hierarquia de navegao do portal da UFAM

Figura 26 Rodap do portal

O Rodap apresenta em sua base os links e marcas referentes a outras instituies, visveis somente para quem busca essas informaes que na maioria das vezes podem passar despercebidos pelo fato do item ser minimalista. Outro fator que deve ser considerado a extenso vertical do portal, quanto a itens desconsiderados que podem ser melhor observado pelo usurio caso o sistema apresente uma melhor customizao. (Figura 26) Recomendao 7 Recomenda-se o uso do manual de cada marca para verificao do item de reduo mxima onde pode ser considerado o estudo sobre a aplicao na marca para web.

41

Com base no estudo aqui desenvolvido foi possvel sugerir modificaes para uma melhor eficcia de uso do sistema, contudo devem-se levar em considerao alguns aspectos importantes relacionados acessibilidade, clareza visual, lgica visual, facilidade de uso e contedos relevantes como usabilidade, ergonomia, comunicao mais eficaz entre o sistema e o usurio. Uma das etapas fundamental deste estudo a elaborao de uma proposta onde se possa para melhor aplicar os conhecimentos aqui elaborados. Nesse sentido buscou-se estruturar o seguinte:

Figura 27 Controle do usurio quanto ao acesso a outros idiomas

Customizao do sistema para uma melhor eficcia de na navegao viso geral.

Figura 28 Viso geral do sistema

43

Como resultado da customizao, criou-se um novo dialogo junto com a hierarquizao do menu principal. Um destaque maior para o item eventos aumentando o controle do usurio em relao ao sistema (Figura 29, item 3.0). reas do portal definidas por cores e a implementao do item vdeo e a sugesto de uso de um canal no youtube para a TV UFAM.

1.0

2.0 3.0

4.0

5.0

6.0

7.0
Figura 29 reas do portal bem definidos

1.0 Banner principal 2.0 Menu principal juntamente com o item de pesquisa 3.0 Sistema de banner rotativo com as suas subcategorias 4.0 rea de eventos 5.0 rea de destaque

6.0 rea de vdeo Aqui relacionando e valorizando a TV UFAM juntamente nas redes sociais para um maior envolvimento com esse novo tipo de mdia. 7.0 Rodap Mais claro e boa pregnncia em sua forma. Visibilidade do sistema no browser

Figura 31 - Comportamento no browser

45

Itens considerados apontando o melhoramento da experincia do usurio. Acesso pgina principal, email e ao mapa do site. A criao da seta indica em qual nvel do site o usurio est navegando (Figura 31).

Figura 31 Aspectos minimalistas

Resultados
A presente etapa deste trabalho consta como j realizado no cronograma de atividades as pesquisas bibliogrficas, que at o momento satisfatrio; e a anlise

das referentes interfaces do site institucional da Universidade Federal do Amazonas dentro do contexto levantado na pesquisa foi considerada o seguinte: Conceito comunicacional entre seres humanos, formas reais aplicada a conceitos virtuais e suas correlaes; Conceito comunicacional homem x computador, forma de dilogo, interao entrada e sada de dados, conceito de comunicao web; Conceitos ergonmicos ligados satisfao do usurio, usabilidade atrelado facilidade de uso e interao aspectos ligados a comunicao e interao humana, bem como a analise das interfaces nesse ponto aplicando os conceitos absorvidos e embasado para o resultado parcial. Com a nova interface o portal da Universidade ainda apresenta

inconsistncias no que diz respeito comunicao das interfaces, caracterizando assim baixa hierarquia visual em relao a outros sistemas que fazem parte do portal e conseqentemente prejudicando sua prpria arquitetura. Vale ressaltar ainda que a nova proposta no contempla o estudo de todo o sistema, as alteraes foram realizadas somente nas pginas ligadas intrinsecamente ao portal, que nesse ponto implicou em outras formas de constrangimentos, como falta de objetividade, ambigidade, acessibilidade. O acmulo informativo na pgina inicial continua sendo um problema em relao carga cognitiva relacionado ao usurio. O sistema melhorou em relao ao feeback quanto a localizao do usurio dentro do portal e ao acrscimo da opo de pesquisa, esta porm limitada ao nmero de caracteres provando ser pouco eficiente quanto pesquisa por ttulos longos. Demonstrou-se pouco eficiente quanto s palavras escolhidas como links. Como resultado desta nova anlise foi possvel elaborar uma interface que venha suprir as inadequaes descritas neste relatrio. Tendo como base a heurstica de Nielsen e a pesquisa realizada sobre as disposies dos elementos em uma homepage. Foi levada em considerao a aplicao de noes de navegao de James Kalbach (2009), cujo o trabalho influencio na nova proposta. Cabe ressaltar que os resultados apresentados no esgotam a possibilidade de outras interpretaes que possam ratificar ou negar esta anlise, porm, o estudo realizado tem fortes referencias que comprovam tais inconsistncias. Recomenda-se, contudo se realizada uma interveno, faz-se necessrio um estudo mais aprofundado, neste ponto levando em considerao o uso de literaturas que condizem as prticas de Design e Usabilidade o que possibilitar a testes com usurios no que diz respeito interface do portal e seus subsistemas. Atualmente esses subsistemas apresentam linguagem prpria e por vezes inconstante, pois, so sistemas adquiridos

47

pela instituio, desenvolvidas por outras empresas que pelo desconhecimento ou falta da prtica de pesquisa no se preocuparam com o dilogo prontamente desenvolvido no portal no relacionando assim suas interfaces com o usurio.

REFERNCIAS
CYBIS, W. A, Betiol, A.H. & Faust, R. Ergonomia e Usabilidade Conhecimentos: Mtodos e Aplicaes . Novatec Editora, 2007 CHIAVENATO, Adalberto. Gesto de pessoas: O novo papel dos recursos humanos nas organizaes. Rio de Janeiro: Campus, 2005
MAGALHES, ARMINDO FREITAS, A. A Psicologia das Emoes: O Fascnio do Rosto Humano. Porto: Edies Universidade Fernando Pessoa, 2007.

GOMES FILHO, J. Ergonomia do Objeto: Sistema de Leitura Ergonmica. So Paulo, 2004. GORDON, E MAGGIE GORDON. Guia Completo do Design Grfico Digital. So Paulo: Livro e livros Editora, 2003 IIDA, ITIRO. Ergonomia Projeto e Produo. So Paulo: Edgard Blucher Editora, 2005. ISO (1999). ISO 13407: Human-centred design processes for interactive systems. Gnve: International Organization for Standardization. Retirado de: http://zonecours.hec.ca/documents/A2007-1-1395534.NormeISO13407.pdf ISO (1997). ISO 9241-11: Ergonomic requirements for office work with visual display terminals (VDTs). Part 11 Guidelines for specifying and measuring usability. Gnve: International Organization for Standardization.Retirado de: http://www.eihms.surrey.ac.uk/robens/erg/methods%20module/ISO_924111.pdf KRUG, STEVE. No me faa pensar: Uma Abordagem de Bom Senso Usabilidade na Internet. Rio de Janeiro, Alta Books Editora, 2006. LEMOS, ANDR. Cybercultura Tecnologia e vida social na cultura contempornea. Editora Sulina, Porto Alegre, 2004. NIEMEYER, Lucy. Elementos da semitica aplicados ao design. Rio de Janeiro, 2AB Editora, 2003. NIELSEN, J.; TAHIR MARIE. Homepage Usability desconstructed. EUA , New Riders Editora, 2002. 50 Websites

PREECES, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de Interao; alm da interao homem. Porto Alegre. Bookman Editora, 2008.

49

ROCHA, H. V. da, BARANAUSKAS. Design e Avaliao de Interfaces Humano Computador. Campinas, NIED/UNICAMP, 2003. WURMAN, Paul Saul. Information Anxiety 2 Pearson Education Editora, 2000.

CRONOGRAMA

Descrio

AGO 2009

SET

OUT

NOV

DEZ

JAN 2010

FEV

MAR

ABR

MAI

JUN

JUL

AGO

Estudo do Referencial Terico Coleta de dados 1a Anlise do objeto

Apresent. Oral Elaborao do relatrio parcial Entrega do relatrio semestral Cadastro online do Resumo 2a Anlise do objeto Entrega online do Relatrio Final Apresent. final para o Congresso

Realizados

Previstos

Em andamento