Uma visita ao sítio do Museu de Arte Contemporânea da USP (Universidade de São Paulo)

Setembro, 2005

Jorge Marmion


Nas minhas andanças de bicicleta pelo Parque do Ibirapuera, em São Paulo, passei por acaso por trás da Bienal e vi uma cartaz enorme divulgando uma exposição sobre Hiroshima, organizada pelo Museu de Arte Contemporânea da USP (Universidade de São Paulo). Além de informar o horário da exposição, o cartaz divulgava o endereço de um sítio (www.mac.usp.br) que decidi visitar para saber se a exposição era sobre o aniversário do lançamento da bomba atômica naquela cidade ou sobre algum outro assunto.

No dia seguinte, bem cedo, ainda em casa, decide acessar o endereço do museu. Gostaria de compartilhar com nossos(as) leitores(as) minhas conclusões da visita ao sítio, já que há várias situações a partir das quais acredito ser possível discutir certos aspectos de usabilidade.

Ao entrar no endereço divulgado no cartaz, é apresentada uma tela que convida o(a) internauta a visitar um outro endereço (www.macvirtual.com.br). Uma mensagem ("clique para conhecer o novo site do MAC USP", assinalada com 1) teoricamente facilita a tarefa. Clico na tal mensagem e nada acontece. Clico, então, na palavra "clique" e novamente nada acontece. Ao subir o cursor para a área de endereço do browser para digitar manualmente a URL, noto que ao passar o cursor pelo endereço www.macvirtual.com.br aparece um sublinhado. "Eis o link", pensei. Estava certo: cliquei e aí fui direcionado ao novo sítio do MAC. Sói para conferir, retornei a esta página novamente. Desta vez, o texto "Sala de Imprensa", na parte inferior da tela (assinalado com 2) era quase ilegível, devido à falta de contraste com o fundo.

Considerações

  • 1- Se houve uma mudança no endereço do sítio, evite páginas intermediárias, como a que aparece acima. Leve o(a) internauta diretamente à página destino, e informe-o(a) nesta página da mudança de endereço (através de um "layer" ou, no pior dos casos de um "pop-up"). Note que esta informação só é relevante se o endereço inicial vier ser desativado em um futuro próximo. Se o endereço inicial continuará existindo, nenhuma informação é necessária.
  • 2- A mensagem "Clique para .." é confusa. Clique onde? Neste caso deveria ser "Clique no endereço acima ...", ou então "Clique aqui ...", com um "hyperlink" à página destino. Lembre que a audiência, na rede, é altamente diversificada em conhecimento quanto à operação de um computador. Só para me certificar, apresentei a tela aos meus dos filhos (9 e 13 anos), cuja experiência de navegação é bem maior que a minha. Invariavelmente clicaram em "Clique para conhecer". Outrossim: Se você precisa dizer "Clique aqui para ...", provavelmente há algo que pode ser melhorado em sua página. A navegação tem de ser instintiva, até para aqueles com pouca experiência em navegação.
  • 3- Não esqueça, ao projetar seu sítio, que os "hyperlinks" textuais mudam de cor após serem visitados e/ou clicados. Caso você opte por uma determinada cor de fundo, investigue quais as cores que oferecem um contraste adequado e defina estilos apropriados para os diferentes estados dos "hyperlinks".

A página inicial do sítio apresenta o MAC Virtual através de uma descrição -em Português- na parte inferior da página, oferecendo a possibilidade de visualizar essa descrição em Inglês, Espanhol ou Português. Há uma opção, "Entrar no Museu" (assinalada com a seta) que ao ser clicada conduz o(a) internauta à página inicial do museu.

Considerações

A tela inicial oferece duas opções de idiomas (inglês e português) e, adequadamente, o idioma Português é a opção corrente. Há três opções de mídia, em resposta á pergunta "Qual é o seu original?": cartão, CD e Disquete. Cada opção é apresentada através de um botão de dimensões consideráveis, junto a um ícone representativo. Até aí, uma maravilha.

"Eis uma aplicação correta de uma tela touch screen", pensei, enquanto aproximava meu dado ao botão cartão. Toco no botão, e nada acontece. Toco novamente, e mais uma vez nada acontece. Toco no ícone. Nada. Toco freneticamente em diversos locais da tela. Nada. "Não é possível !", penso. Pergunto educadamente para a mocinha que atende no balcão: "Como é que seleciono a opção que eu quero?". "Com o mouse", responde. A resposta foi um balde de água fria nas minhas expectativas. A sensibilidade do mouse não era uma maravilha, mas o tamanho dos botões torna a tarefa de posicionar o ponteiro bastante fácil ("talvez o projetista tenha ouvido falar da Lei de Fitts", pensei).

Ao clicar "Cartão" aparece uma mensagem no topo da tela -nota 10 para o projetista neste item- que diz: "introduza as informações pessoais utilizando o teclado". Perfeito. Começo a teclar, no teclado, meu nome. Nada. Repito a operação. Nada. Tento -apesar de estar convencido que não ia funcionar- escrever meu nome tocando nas teclas na tela. Nada. "Não é possível que seja o que estou imaginando", peso. Era, sim. Teve de digitar meu nome e meu telefone clicando em cada uma das telas no teclado da tela. "Não, o projetista jamais ouvir falar da Lei de Fitts", pensei enquanto teclava.

Para não estender demais o artigo e cansar o(a) leitor(a), passei com certa facilidade nas demais telas e consegui, finalmente, finalizar meu pedido. Após ler uma mensagem informando que meu pedido tinha sido aceito e que o processamento acabara, fui embora. Retornei uma hora depois para pegar minhas fotos. "Cadê o canhoto?", perguntou a funcionária do balcão. "Não tenho, porque pedi as cópias na máquina", respondi. "Mas o senhor teria de ter pedido um canhoto aqui no balcão após finalizar seu pedido", me informou a funcionária. "Olha, a máquina disse que estava tudo terminado, então fui embora", expliquei. Graças a boa vontade da funcionária meu pedido foi finalmente localizado e obtive as cópias solicitadas.

Considerações

  • Se não houver algum impedimento ou restrição à visita do sítio (exemplo: conteúdo inapropriado para menores de idade), evite telas introdutórias cujo único, senão o principal, objetivo é dizer "Entrar no sítio". Apresente diretamente a página inicial do sítio, oferecendo, em local de fácil visualização, os idiomas em que o sítio pode ser visualizado. Exceção: se é possível visualizar o sítio em alfabetos diferentes (ex: cirílico, japonês, chinês, hebraico, etc.) então sim é recomendável apresentar uma tela inicial, já que o conteúdo em um determinado alfabeto pode ser -e provavelmente será- visualizado em formato incompreensível para visitantes cujo alfabeto primário é diferente daquele.

A página inicial do sítio apresenta, além da possibilidade de visualizar o conteúdo em outros 2 idiomas, algumas opções em área de fácil visualização ("Exposições", "Acervo", etc) que, ao serem clicadas, conduzem às páginas respectivas.

Após vários segundos, descobri que meu filho tinha deixado o volume do computador no máximo, quando começou a tocar uma música cujo ciclo é de 5 segundos (algo como "Tim", "Tom Tom Tom"). Percebi, à direita, a opção "Sound On/Off", e desliguei o som, que depois de 10 segundos torna-se irritante.

Considerações

  • Evite música de fundo repetida a exaustão. É mais: se não houver um excelente motivo, evite de vez a tentação de inserir música de fundo no seu sítio. Se houver algum tema musical associado ao assunto, ofereça a possibilidade de ouvi-lo. Veja um bom exemplo:
  • É assim que deve ser feito: quem quiser, ouve.

  • Se você insere música de fundo, inicie a apresentação do sítio com a música desligada. A música, assim com a cor, pode influenciar o estado espiritual do(a) internauta. Se você acredita que a audição da música refletirá positivamente na experiência do(a) internauta, sugira que o som seja ligado.
  • Sem nenhuma pretensão a uma vaga no clube dos que lutam pela pureza da língua portuguesa, me pergunto: se o idioma corrente da página é Português, então qual a justificativa para uma opção em outro idioma ("Sound On/Off")? Nenhuma, permita-me responder, já que esta opção pode perfeitamente ser apresentada no idioma corrente. Mantenha a coerência lingüística do seu sítio, e principalmente evite a tentação de apresentar termos em "computês".
    Exceção: sítios relacionados ao ensino (ou aprendizagem) de idiomas.

Pensei que o excessivo espaço inutilizado acima da opção "Sound on / off" (à direita, acima das imagens dos quadros) fosse resultado de uma adaptação automática do sítio ao formato 1024, que geralmente uso. Decidi, então, diminuir a resolução para 800 pixels de largura. Para minha surpresa, apareceu à direita uma barra de rolagem, e as opções no rodapé ficaram em segundo plano:

Considerações

  • A adaptação automática do sítio ao formato físico da tela é sempre bem-vinda. A falta de adaptação a determinado formato -especialmente se este é o formato que a maioria usa- é indesejável. Planeje suas telas para o formato 800x600. Se houver necessidade que o conteúdo se estenda a mais de uma página física (suponha, na tela acima, um texto explicativo abaixo da escultura) então apresente as opções na parte inicialmente visível (com a óbvia exceção da opção "Topo da página"). Você pode repetir as opções no rodapé da página (e isto é altamente recomendável) mas não apresentá-las somente no rodapé (como acontece neste caso).

Observe também que a apresentação dos "hyperlinks" é heterogênea, o que não é recomendável. Qual o motivo para apresentar "Exposições", "Acervo" e outras desta forma:

e "Notícias", "Agenda", etc. de outra forma, e em outro lugar (e ainda num local com visibilidade comprometida) da página ? Note, também, que a esfera à esquerda da opção "Exposições" tem uma sutil diferença com as outras. Ao passar o cursor sobre as opções, a opção corrente é diferenciada com uma esfera sutilmente diferente das demais.

Considerações

  • Apresente as diversas opções da página em formato homogêneo. Se houver muitas opções, e for possível agrupá-las segundo critérios específicos, use um menu ou apresente caixas ("boxes") separadas.
  • É recomendável, especialmente se há aglutinamento de opções, diferenciar a opção corrente das demais. A diferenciação pode ser feita pela mudança da fonte, do tamanho da fonte, cor, contraste ou de uma imagem associada à opção (como neste caso).
  • Por último, e não há qualquer regra, deixemos bem claro, geralmente prefiro que as imagens associadas às opções tenham, no máximo, a altura do texto da opção respectiva. Observe como neste caso uma diminuição no tamanho das esferas aumenta a visibilidade das opções:

Nas opções que possibilitam a visualização do conteúdo em outros idiomas, a opção do idioma corrente aparece diferenciada (ponto positivo), mas as opções de outros idiomas oferecem um contraste inadequado. Perceba o contraste entre "Museu Universitário" e o fundo (excelente), ou o do "Museu de Arte ... " e o fundo (muito bom), e entre "English" ou "Español" e o fundo respectivo (pobre).

"O que será a opção Informações Gerais", me perguntei. Cliquei várias vezes e nada. Só após clica aqui, clica lá, clica aculá, apareceu um menu (assinalado, na figura abaixo, com 2) com várias opções. Finalmente descobri -após recarregar a página várias vezes- que o menu só é ativado após a carga da música de fundo, que apesar da minha conexão banda larga demora alguns segundos para carregar.

Notei também que ao movimentar o cursor perto do menu, este se contrai e expande de uma forma bem esquisita.

Na parte inferior da página, há mais opções: posicionando o cursor sobre "Museu Experimental" (canto inferior esquerdo, assinalado com 1) descobre-se que é um "hyperlink" que leva à página desse museu; mesmo acontece com "Museu Lúdico", no canto interior direito. Na última linha, há três opções ("Notícias", "Agenda" e "Imprensa"). Ao passar o cursor sobre qualquer uma dessas opções abre um menu (assinalado com 3) cujo conteúdo, invariavelmente, está restrito a três linhas com a mensagem "(leia mais)". Clicando em qualquer uma dessas opções chega-se a uma página inexistente. Uma vez aberto este menu, fica aberto até ser substituído pelo menu de uma das outras opções, ou até recarregar ou retornar à página.

É interessante destacar que ao passar o mouse sobre a opção "Museu Experimental" o menu (assinalado com 2) é apresentado. O mesmo não acontece ao passar o cursor sobre a opção Museu Lúdico.

Considerações

  • Novamente, me pergunto: qual o motivo de "Catálogo Virtual" ou "Eventos" estarem no menu, e "Acervo" ou "Exposições" explicitamente apresentadas na tela? A resposta pode até ser óbvia para quem projetou o sítio, mas isso é totalmente irrelevante: a resposta tem de ser óbvia para quem navega no sítio.
  • Não ofereça opções que levam a páginas inexistentes. Também não ofereça opções que levam a páginas em construção. Em último caso, apresenta a opção com uma mensagem apropriada (exemplo: "Mapa do sítio (em construção)") sem qualquer vínculo a outra página.
  • O menu não deveria ser expandido ao passar o cursor sobre "Museu Experimental", já que não há qualquer relação entre a ação final (ir à página ou sítio do Museu Experimental) e qualquer uma das opções apresentadas no menu. Entretanto, se houvesse qualquer relação e fosse relevante expandir o menu, a mesma ação deveria ser executada ao passar o cursor sobre a opção "Museu Lúdico".
  • O menu "Notícias" (ou o de qualquer uma das opções vizinhas) deveria ser fechado assim que o cursor abandona a área do "hyperlink".

Ao movimentar o cursor sobre as opções do menu, uma mensagem é apresentada à direita explicando qual a finalidade da opção corrente:

Considerações

  • Isto é muito positivo: evita que o(a) internauta tenha de abrir a página para saber qual o conteúdo da mesma.
  • Para demonstrar ao mundo suas ambições literárias, crie um "blog" pessoal. No sítio, use frases diretas, sem quaisquer malabarismos lingüísticos. No exemplo acima, uma frase mais direta seria "Apresenta, de maneira rápida, toda a estrutura do site" (isso sem questionar a validade do "de maneira rápida").

Percorrendo as páginas do sítio, cheguei a uma que pode até ser artisticamente a máxima expressão da criatividade humana (quem sou eu para julgar?) mas analisada sob a ótica da usabilidade deixa muito a desejar:

A cor do fundo escolhido oferece um contraste inadequado com a cor da fonte, tornando a leitura uma tarefa das mais ingratas. Só os "hyperlinks" oferecem um relativo contraste (mas observe a letra "D" em "Dada", à direita, na penúltima linha). Ao clicar nos "hyperlinks" o(a) internauta é conduzido(a) a páginas inexistentes.

Considerações

  • Cuidado com o contraste ! Uma escolha inadequada dificultará a leitura do texto, podendo até impossibilitar de vez a leitura.
  • Não esqueça que há uma percentagem de internautas que apresentam alguma deficiência na visualização de cores. Quantos(as) não conseguirão ler o título, "Expressionismo", facilmente?

Considerações finais

A publicação de sítios parcialmente construídos requer atenção redobrada. Só publique se a maior parte do sítio estiver pronta, e deixe claro, logo de cara, que certas seções do sítio ainda estão em desenvolvimento.

Pior que "link" que leva a página em construção, é "link" que leva a página inexistente. Em vez de misturar "links" funcionalmente ativos com aqueles que levam a páginas em construção, crie uma seção no sítio na qual o(a) internauta possa saber quais as mudanças planejadas, as opções a serem implementadas nas próximas publicações, e as datas prováveis destas.

E, por último, convença-se: se você é o(a) projetista do sítio, é irrelevante qual sua cor predileta, ou qual o estilo musical que mais lhe agrada. O que realmente interessa é que o(a) internauta tenha uma experiência positiva ao navegar no sítio: encontra o que quer, rápida e facilmente.

Minha visita a este sítio valeu pelos assuntos aqui abordados. Quanto ao objetivo inicial -obter informações quanto a exposição sobre Hiroshima- foi frustrante: nada há sobre o assunto.


Gostaríamos de ouvir sua opinião sobre este artigo.

Conteúdo

Utlilidade


Entre em contato com o(a) autor(a) deste artigo

Convide um amigo ou colega para ler este artigo

Imprima este artigo


Topo da página

(c) 2003-2006 IBRAU - Instituto Brasileiro de Amigabilidade e Usabilidade. Todos os direitos reservados.

(c) 2006 IBRAU - Instituto Brasileiro de Amigabilidade e Usabilidade. Todos os direitos reservados.

Fale com o(a) colunista.

Você gostou do artigo Análise da usabilidade de uma aplica o de registro de sorteio?

A seguir os dados são opcionais

Deseja enviar uma mensagem a Jorge Marmion?

Seu nome:

E-mail

A produção do site não comercializará o endereço de e-mail acima, nem enviará correspondência indesejada

Preencha os dados abaixo e enviaremos à pessoa que você indicar um e-mail convidando-a a visitar o site e ler este artigo.

Seus dados:

Seu nome:

E-mail

Os dados da(s) pessoa(s) que você quer convidar:

Seu nome:

E-mail

Caso deseje convidar mais de uma pessoa, digite os endereços de e-mail separados por vírgula, sem espaços em branco
(exemplo: joão@uol.com.br,pedro@aol.com)

Caso deseje, envie uma mensagem junto com o convite

A produção do site não comercializará nenhum dos endereços de e-mail acima informados nem enviará correspondência indesejada aos mesmos.