Use Ability – Blog da Usabilidade

25/08/2008

Análise – www.mercadolivre.com

Filed under: Análises — massardo @ 17:08
Tags:

Em minha primeira análise, resovi escolher o portal de compra e venda mais popular da internet, o Mercado Livre (www.mercadolivre.com). Nos EUA chama-se e-bay (www.e-bay.com), sendo o Mercado Livre o “representante” da e-bay em toda a américa latina. A escolha foi baseada justamente pelo fato de ser um site com um público gigantesco, sendo ainda maior o desafio de encontrar falhas e melhorias a serem feitas.

Sem mais delongas, vamos direto ao que interessa…

Logo de cara, na home do site, percebe-se facilmente a enorme popularidade do site, haja vista que, de modo geral, sites com conteúdo “gratuito” tendem a ganhar dinheiro de outra forma, ou seja, banners publicitários. Neste quesito o Mercado Livre está muito bem servido. Só na página inicial há dois grandes banners e um menor, sendo todos os três animados. Não se pode negar a poluição visual que este excesso de publicidade gera, eu diria que, somados os três, veríamos que quase metade do conteúdo da home é “inútil”.

As setas vermelhas indicam os banners de publicidade da home

As setas vermelhas indicam os banners de publicidade da home

Outro ponto que se observa de início é que não há, em lugar algum, nenhuma explicação do que é o Mercado Livre. É claro que quem acessa este site, provavelmente sabe do que se trata, mas não se pode ignorar os usuários de primeira viagem, que podem ficar perdidos com a falta desta informação. Apenas quando selecionamos uma categoria de produtos é que aparece um botão “O que é o MercadoLivre?”

Os pontos positivos que se destacam na página inicial são frutos da simplicidade da interface. Foram utilizadas poucas cores, os textos são legíveis, as categorias estão corretamente destacadas, além do campo de busca que facilita a vida do usuário que já sabe exatamente o que procura. Destacam-se também as barras laterias colocadas por motivo de resolução de tela (ver artigo anterior), que são muito discretas, as quais muitos usuários nem irão notar. Além disso, o menu fixo no topo faz com que o usuário não se “perca” ao navegar as páginas. O único ponto negativo do menu são os links duplicados “Perguntas” e “Contato”, que apontam para o mesmo endereço, e os dois links “vender”, sendo que um deles pisca em vermelho e azul. Também acredito que seria interessante um botão “home” ou “início”, sendo que nem todos os usuários sabem que é necessário clicar no logo para ir à página inicial.

Um problema grave se encontra ao tentar entrar em contato com o Mercado Livre. O botão “contato” está no menu, bem destacado, porém, quando muitos usuários esperariam encontrar números de telefone e endereços de e-mail, ou um formulário de contato, deparam-se com um enorme arsenal de “ajuda”. Digo “ajuda” não por discordar do termo, até porque ali se encontram muitos artigos interessantes, várias dúvidas podem ser tiradas sem necessidade de entrar em contato com o suporte.

O Portal de contato não possui link direto para o contato "humano"

O Portal de contato não possui link direto para o contato

O que chama a atenção é justamente a falta de um “link” direto para o contato com o suporte. De início, parece que o “portal” de ajuda irá resolver todos os problemas, até porque há muitos tópicos, campo de busca, dúvidas mais frequentes, etc. O usuário vai perdendo a paciância a medida que não encontra ajuda para o que procura, muito menos o “bendito” endereço de e-mail ou telefone. Aos poucos todo o portal de ajuda vai parecendo mais uma enrolação para que você desista de tentar falar com o suporte. Eu só consegui chegar ao formulário de contato através de uma mensagem automática enviada pelo próprio mercado livre. Chega a ser ridículo todo o “procedimento” necessário para se chegar ao formulário de contato. Os passos são os seguintes:

1 – Acessar o Portal de Contato
2 – Clicar em “Termos e Políticas” (?) – (Diferente do “Termos e Condições”)
3 – Selecionar a “política” relacionada à sua dúvida
4 – Selecionar o “termo” relacionada à sua dúvida
5 – Clicar no botão “contactar comunicação com o usuário”
6 – Caso ainda não esteja logado deverá se identificar, caso não seja cadastrado precisará fazê-lo primeiro
7 – Preencher o formulário

Ou seja, nem um pouco intuitivo, ficando evidente a intenção de dificultar o contato dos usuários. Nunca tinha visto um site onde fosse preciso passar pelos “Termos e Políticas” para se chegar ao formulário de contato. Aliás, foi a primeira vez que vi um site onde “Termos e Políticas” e “Termos e Condições” são coisas totalmente diferentes.

De modo geral, a navegação pelo site é tranquila, tanto para quem busca por um produto específico tanto para quem navega pelas categorias. A listagem dos produtos é bem feita, sendo que a ordem e a forma com que cada produto é exibido varia de acordo com questões comerciais do site (os destaques são pagos). O único inconveniente é o excesso de banners publicitários, presentes em todas as páginas.

A página do produto apresenta recursos muito interessantes. Cada usuário pode personalizar a descrição de seus produtos, desde simples textos até páginas HTML bem formatadas.

Porém esta liberdade tem uma desvantagem: muitos vendedores “exageram” na publicidade dos seus produtos, exagerando tanto no tamanho quanto na quantidade do conteúdo. Não é difícil encontrar anúncios com letras garrafais, sendo necessário rolar a página mais de uma vez para terminar de ler a mesma frase.

Topo da página do produto

Topo da página do produto

No topo, o resumo do produto está bem claro, porém, há um excesso no destaque do valor das parcelas (caso o comprador opte por parcelar), maior até do que o preço total do produto. Além disso, nesta página encontram-se algumas falhas. A primeira é a falta de um campo de busca para as perguntas. Em certos produtos, são feitas centenas de perguntas, sendo que é  provável que sua dúvida já tenha sido respondida. Porém, para isto é necessário abrir todas as perguntas (o que pode ser demorado, dependendo da conexão) e localizar sua dúvida através do mecanismo de busca do navegador. Outro ponto ruim é que o botão “topo”, que faz com que seja exibido o topo da página, ao invés de apenas rolar a página para cima faz com que ela seja recarregada, o que, novamente, é ruim em questão de performance, fazendo o usuário ter de esperar desnecessariamente. Mais uma falha se encontra ao fazer uma pergunta. Ao clicar no botão “fazer uma pergunta ao vendedor” um popup se abre com um campo de texto (se o usuário já estiver logado). Após escrever a mensagem e clicar em “perguntar”, o popup desaparece e a página do produto é recarregada, porém a pergunta recém feita não aparece. Apenas ao recarregar a página mais uma vez (manualmente) é que a nova pergunta aparece. Isso pode deixar o usuário confuso, sem saber se a pergunta foi realmente enviada ou não. O mesmo pode se frustrar ao não ver sua pergunta e abandonar o site, ou reiniciar o processo e refazer a pergunta, fazendo com que ela seja duplicada.

A comunicação (automática) com os usuários é bem feita, a cada pergunta que tenha sido respondida é enviado um e-mail para o usuário, o mesmo ocorre quando se efetua uma compra ou venda.

A parte de vendas também é muito bem feita, as etapas estão descritas (mesmo que de forma breve) já no começo do processo de cadastro do produto. Os formulários de cadastro também são bem claros e intuitivos, havendo um botão de “?” praticamente em todo campo a ser preenchido.

Página de venda de produtos - escolha da categoria

Página de venda de produtos - escolha da categoria

Por fim, pode-se fazer um resumo dos principais pontos observados:

Pontos Positivos:

  • Simplicidade da interface
  • Textos bem destacados e legíveis
  • Menu de categorias
  • Campo de busca de produtos
  • Problema de resolução bem contornado
  • Navegação intuitiva
  • Listagem dos produtos
  • Recursos da página do produto
  • Comunicação automática
  • Processo de cadastro de produtos
  • Ajuda “não-humana”

Pontos Negativos:

  • Excesso de banners publicitários
  • Falta de descrição do site na Home
  • Links repetidos no menu
  • Contato com suporte
  • Excesso de liberdade de personalização da descrição do produto
  • Falta de campo de busca para perguntas
  • Link “Topo” recarrega a página
  • Pergunta só aparece após recarregar a página (apesar de já recarregada automaticamente)
  • Deficientes visuais não são capazes de utilizar o site.

De forma geral, eu avaliaria como muito boa a usabilidade do site do Mercado Livre. As falhas encontradas não chegam a trazer grandes perdas, a não ser por uma delas: o problema de contato com o suporte. Essa falha é muito grave, chega a ser inadmissível um portal do tamanho do Mercado Livre ter um problema dessa magnitude. Muito provavelmente há questões comerciais envolvidas, até porque um centro de suporte humano gera muitos custos, e talvez comercialmente não seja interessante manter um setor que não seja estritamente necessário. Porém, ao meu ver, o setor de contato com o cliente é sim estritamente necessário, é um ponto que gera muita insatisfação por parte dos clientes, haja vista a quantidade de fóruns onde há reclamações a respeito da dificuldade do contato com o Mercado Livre.

Por fim, quero ressaltar o fato de esta análise ter sido feita “a grosso modo”, ou seja, não foi realizada uma análise minuciosa de todas as páginas, nem de todos os links, nem de todos os perfis de usuários, até porque o objetivo das análises feitas neste blog não é prestar consultoria gratuita a nenhum site, e sim mostrar as qualidades e, principalmente, as falhas que são facilmente percebidas, das quais nem os grandes portais estão livres, e que muitas vezes seriam facilmente resolvidas, talvez até trazendo mais retorno para o site do que uma nova e complexa funcionaliade.

PS: Por motivo de otimização na visualização, as imagens desta análise tiveram as barras laterais cortadas, ficando apenas o conteúdo do site.

Felipe Massardo
Consultoria: felipe_massardo@yahoo.com.br

20/08/2008

Resolução de Tela

Filed under: Prática — massardo @ 23:08
Tags:

800×600? 1024×768? Ou será q já dá pra fazer em 1280×960? E as resoluções wide-screen, como ficam?
Essas dúvidas costumam causar muita dor de cabeça a todos os envolvidos com o projeto de interface, especialmente os designers.

Por não causar problemas para os programadores, tanto web quanto desktop, a resolução de tela é um ponto muito pouco discutido nos projetos de desenvolvimento, tratado geralmente apenas como um mero detalhe. O problema é que este “detalhe” tem um papel muito mais importante do que os projetistas de software imaginam, afetando, principalmente, a parte mais interessada: o usuário final.

De modo geral, os usuários não sabem identificar este tipo de problema assim que se defrontam com sites com conteúdo “bagunçado”, ou barras de rolagem que os obrigam a rolar a tela horizontalmente para chegar ao final da linha e rolar no sentido contrário para voltar ao início da próxima linha. Nestes casos o problema é ainda mais grave, haja vista que o usuário, em seu ponto de vista, virá um site mal organizado, ou até mesmo mal feito, sem saber que se trata de um “simples” problema de resolução de tela.

Muitas pessoas têm a mentalidade de que a resolução da tela é problema do usuário, sendo que os desenvolvedores devem criar as telas do tamanho que acharem melhor e colocarem como resolução recomendada, passando o problema para o outro lado… Só que não podemos esquecer que quem está do outro lado geralmente não recebe bem a idéia de que para a aplicação que ele pretende comprar “rodar direito”, será necessário alterar a resolução da tela, possivelmente irá até precisar trocar o monitor, caso a “resolução recomendada” não seja suportada pelo atual.

Apesar de não ser raro encontrar problemas de resolução de tela em aplicações desktop, a grande maioria destes problemas ocorrem em ambientes web. Mas por que isso acontece? Por que não se pode adaptar a aplicação ao vídeo do usuário, como acontece com os jogos, onde há várias opções de resolução onde o usuário seleciona a mais adequada para ele?
No caso dos jogos, a solução é mais simples, uma vez que, proporcionalmente, todos os elementos são afetados da mesma forma, sendo que, ao alterar a resolução da tela para o jogo, todos os elementos irão mudar de tamanho na mesma proporção, fazendo com que não ocorram distorções. Neste caso pode-se fazer uma analogia com o caso das televisões, de forma que não importa se uma TV mede 14 ou 42 polegadas, em ambas a imagem será a mesma, com as mesmas proporções, diferindo apenas pelo tamanho.
O problema dos sites é mais complicado, pois geralmente não se deseja que os elementos aumentem de tamanho conforme a resolução da tela aumenta, ou seja, conforme aumenta o “espaço” na tela. Aqui podemos fazer uma analogia com uma revista impressa. Imaginem que o cliente de uma gráfica solicite que o tamanho da página da sua revista seja aumentado. O problema aqui é que não se pode apenas aumentar todos os elementos na mesma proporção que aumentou o tamanho da página. A fonte dos textos deverá permanecer do mesmo tamanho, talvez as imagens também! O ponto chave deste caso é que o conteúdo não irá mudar de tamanho, ao invés disso haverá espaço para mais conteúdo. Para resolver este problema a única saída é remodelar cada página da revista, obedecendo às novas especificações de tamanho da página. Efeito semelhante se obtém, por exemplo, ao alterar o tamanho da página de um arquivo de texto que já esteja pronto e bem formatado. Provavelmente todo o texto ficará bagunçado, parágrafos quebrados em duas páginas, figuras que caíram para a página seguinte, etc.

A saída mais comum para este tipo de problema é construir o site em uma resolução mínima, na qual todo o espaço da tela seja ocupado. Alterando-se para resoluções maiores não há problemas de visualização, pois os elementos não alteram de tamanho, apenas barras verticais são inseridas nos espaços “vazios” que sobram.

Site com resolução mínima de 1024x768 acessado por um monitor com resolução 1680x1050

De certa forma este problema foi agravado pela chegada dos monitores wide-screen, sendo que, nestes monitores, os espaços vazios na tela são ainda maiores, fazendo com que muitos usuários fiquem insatisfeitos por ter um monitor (mais caro) que tenha apenas um pedaço da tela utilizado. Este pensamento pode acabar forçando um aumento na resolução mínima na qual o site é construído. Porém, não é assim tão simples, pois, ao aumentar esta resolução mínima, os usuários que não puderem acompanhar este aumento serão prejudicados, provavelmente pelas desagradáveis barras de rolagem horizontais.

O ideal seria construir um site para cada possível resolução de tela, assim todos os usuários ficariam contentes e este tipo de problema não iria mais ocorrer. Obviamente esta solução é totalmente inviável, principalmente devido ao dinamismo que os sites têm atualmente, não haveria tempo nem recursos suficientes para tal.

Creio que a melhor saída para este tipo de problema seria aquela citada anteriormente, ou seja, fixar uma resolução mínima e adicionar as barras laterais para resoluções maiores. Também não é tão simples definir qual será esta resolução, uma vez que o público alvo do site ou aplicação deve ser bastante estudado, sendo que a resolução de tela média pode variar de acordo com o perfil de cada grupo de usuários. Vale lembrar que este estudo deve ser feito regularmente, uma vez que a evolução tecnológica também atinge os monitores, sendo que os usuários de forma geral tendem a adquirir monitores maiores e melhores (wide-screen), fazendo com que o perfil de certos grupos possa mudar com o passar do tempo.

Felipe Massardo
Consultoria: felipe_massardo@yahoo.com.br

13/08/2008

Mapas Mentais

Filed under: Teoria — massardo @ 23:08
Tags:

Um dos principais aspectos a serem considerados no momento da concepção de uma interface é o “mapa mental” de seus usuários. Este mapa é composto por toda a experiência acumulada pelos usuários, em todos os tipos de sistemas computacionais. Por exemplo, ao se pensar na inteface de um novo editor de textos, deve-se levar em consideração que provavelmente os usuários deste novo sistema já tem alguma ou muita experiência com outros sistemas similares. Isso torna-se extremamente relevante, podendo até mudar totalmente o rumo do projeto (de interface) que se tinha imaginado anteriormente. Neste caso, seria natural imaginar que, ao acessar o novo editor de textos, o usuário terá a expectativa de encontrar o layout de uma página em branco, com algumas barras de ferramentas, opções de formatação de tipo e tamanho de fonte, talvez uma barra de status e assim por diante. Pode ser muito desagradável para o usuário encontrar algo totalmente diferente do que ele espera, algo divergente do que seu mapa mental sugere.

O que pode gerar discussões é definir até que ponto essa divergência é prejudicial. Será que todos os editores de texto criados serão mal recebidos caso não sejam iguais aos já utilizados? Evidentemente, a resposta é não. Particularmente, não vejo problema algum em softwares que possuem exatamente as mesmas funcionalidades serem apresentados aos usuários exatamente da mesma maneira. Seria um risco totalmente desnecessário se, ao criar um editor semelhante ao MS Word, fosse criada uma interface totalmente diferente, estranha aos usuários do produto da Microsoft. Ao invés disso, creio que seria muito mais relevante dedicar-se a melhorar tudo que no produto já existente se encontra falho.

Com as “indústrias” de software trabalhando a pleno vapor, atualmente passamos por um período de concorrência acirrada, principalmente nos chamados softwares de “prateleira”, aqueles sistemas que não são desenvolvidos para um cliente específico, mas para um certo perfil de clientes. Nestes sistemas, muitas vezes há uma preocupação exagerada em que estes se pareçam idênticos aos concorrentes, talvez numa intenção de fazer que o cliente não perceba a diferença e acabe optando pelo produto por outros motivos que não o software em si, tais como preço, suporte, etc. No meu ver isso é uma demonstração clara de falta de confiança no produto, agindo assim a empresa atesta que o software não é melhor que o concorrente, que no máximo conseguiu deixá-lo parecido. Sinceramente não vejo sentido algum em desenvolver um software nestas condições.

Uma curiosidade que vejo em relação aos mapas mentais acontece na eterna briga de sistemas operacionais, principalmente entre Windows e Linux. Você já parou pra pensar por que, para o usuário leigo e até mesmo para muitos profissionais da computação, é tão difícil usar o sistema do pingüim, mesmo sabendo de todas as suas vantagens? É muito simples! A causa disso é o mapa mental que o uso exclusivo do sistema windows criou. Para a maioria das pessoas não é “natural” um desktop sem o “botão iniciar”, sem o ícone “meu computador”, sem o “windows explorer”. Não é natural Instalar programas sem dar duplo clique no “.exe”, desinstalar através do painel de controle, etc. Além disso o usuário em geral é preguiçoso e contrário a mudanças, dificilmente vê motivação para “perder tempo”  aprendendo uma forma diferente de fazer exatamente a mesma coisa.

Uma experiência muito interessante que tive com os mapas mentais ocorreu há uns 2 anos, quando eu ainda trabalhava em um laboratório da universidade. Certo dia um colega que havia desenvolvido um software para uma grande multinacional adentra no laboratório furioso, dizendo que os usuários deste sistema haviam reclamado do software.  O desapontamento dele se justificou quando explicou o motivo da reclamação. Todas as complexas funcionalidades do sistema estavam perfeitas, nenhum bug encontrado, exceto um. Os usuários reclamaram que não havia a tradicional “ajuda” nas telas do sistema, requisito que estava nas especificações do projeto. Porém, este colega jurava que em todas as telas a ajuda tinha sido implementada. Fiquei curioso e pedi para testar o software. Para a minha surpresa, realmente não havia nenhuma sinalização de ajuda em nenhuma das telas. Vendo minha dificuldade, o colega explicou que a ajuda estava sim em todas as telas, bastava pressionar a tecla “F1″. Para ele, todo usuário de computador deveria saber que a tecla F1 é o atalho para a tela de ajuda. Porém, ele não levou em consideração o mapa mental que os usuários tinham em relação a programas de computador.

Em sites situações parecidas também ocorrem. Muitos usuários têm dificuldade ao preencher formulários, principalmente aqueles que não possuem nenhuma ajuda ou dica. No CPF devo colocar os pontos e o traço? e no CEP? Qual o formato da data de nascimento? Muitos destes questionamentos podem aparecer para pessoas que não estão acostumadas com este tipo de interação.

Problemas ainda mais sérios podem ser encontrados em sistemas em que usuários possuem os mais variados níveis de conhecimento computacional, como é o caso da urna eletrônica. É um sistema extremamente simples, mas nem por isso pôde ser feito de qualquer jeito. Vale lembrar que no Brasil até analfabetos podem votar. Daí optou-se por colocar apenas textos estritamente necessários, botões coloridos e teclado semelhante à calculadoras e telefones, ou seja, tomou-se como base o mapa mental mais básico que uma pessoa deve ter para conseguir operar um aparelho eletrônico.

No outro extremo estão os softwares mais complexos, voltados para profissionais especializados. Por mais experientes que sejam estes usuários, ainda assim problemas de usabilidade envolvendo mapas mentais podem aparecer. O que acontece muitas vezes é que, ao saber que os usuários serão profissionais experientes, ocorre um desleixo justamente na interface, voltando-se todas as atenções para as funcionalidades do sistema. Não são raros os sistemas extremamente completos, que fazem simplesmente tudo que o usuário imagina, sendo deixados de lado em favor de sistemas muito mais simples, porém mais fáceis de utilizar.

Os maiores desafios certamente estão nos softwares inovadores, aqueles que não possuem um concorrente como referência. Nestes casos os estudos devem ser mais profundos, devido ao fato de que o usuário não tem nenhum mapa mental para este tipo de software, porém o mapa mental que ele possui para outros tipos de sistemas irá influenciar na aprovação ou não deste novo software. Por exemplo, se a microsoft disponibilizar um novo software no seu pacote office, é provável que os novos usuários esperem que ao menos o menu “arquivo” no topo, com a opção “sair” esteja presente.

No meu ponto de vista, os mapas mentais são responsáveis por aqueles detalhes que costumam fazer toda a diferença no sucesso de um software ou site. É curioso como detalhes tão simples, tais como a posição dos botões “Confirmar” e “Cancelar” podem fazer diferença. É muito comum usuários (provavelmente por pressa) clicarem sem ler as caixas de texto, pelo simples fato de que o botão de confirmação é “sempre” o da esquerda, e o de cancelamento o da direita (ou seria o contrário!?). Você pode ter ficado em dúvida agora, mas certamente ao se deparar com a próxima janela de confirmação você irá escolher corretamente, desde que o software utilizado siga este “padrão”.

Felipe Massardo
Consultoria: felipe_massardo@yahoo.com.br

Apresentação do Blog

Filed under: Geral — massardo @ 02:08
Tags: , ,

Não é de hoje que a usabilidade tem um papel essencial na vida das pessoas. No mundo tecnológico em que vivemos, sua presença é ainda mais evidente. Se pergutarmos a qualquer pessoa “O que é usabilidade?” muito provavelmente não ouviremos resposta ou talvez alguma tentativa de dedução sugerida pela raíz da palavra.

A maioria das pessoas – leigas ou não – dificilmente se dá conta de que a usabilidade sempre esteve presente em suas vidas, até mesmo antes de da era “computacional” em que vivemos. Creio que até mesmo pessoas “do ramo” explicariam usabilidade apenas como a facilidade (ou dificuldade) de se utilizar um programa de computador, ou de navegar em um site, sem se dar conta de que aplicamos este conceito 24h por dia, 7 dias por semana.

Mas por que tamanha abrangência no conceito de usabilidade? Muito simples. Particularmente, vejo a usabilidade não apenas como IHC (interação homem computador) , mas relacionada a simplesmente tudo que “usamos”. isto inclui desde os programas de computadores mais complexos até nossa escova de dentes!? Você por acaso já parou pra pensar por que o cabo de sua escova tem aquelas ondulações no cabo que quando pegamos os dedos encaixam perfeitamente? Antigamente não era assim, a escova era toda reta, sem aquele “pegador” no cabo… Isso até o dia em que alguém percebeu que a usabilidade da escova poderia melhorar, ou seja, seria possível tornar melhor a tarefa executada por seu usuário. Esta é a essência, é disso que este blog trata.

O objetivo não é cobrir todo o vasto universo da usabilidade, até porque, em muitos campos, ela já está extremamente explorada, como no exemplo da escova de dentes. A idéia é cobrir a área onde a usabilidade ainda está engatinhando, tentando dar os primeiros passos: sites e sistemas computacionais.

É muito raro encontrar pessoas e empresas de tecnologia que não considerem a usabilidade como “perfumaria”…  Infelizmente, ainda não é raro encontrar empresas onde até mesmo a engenharia de software como um todo é tratada como perda de tempo.

Neste blog serão postados regularmente artigos relacionados à usabilidade em geral, análises de sites e softwares, curiosidades, dicas e tudo mais que for relevante a respeito deste vasto campo da computação ainda por ser desbravado.

Fique a vontade para postar comentários, dicas, críticas e sugestões!

Felipe Massardo

Tema: Rubric. Blog no WordPress.com.

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.