Posts com a Tag ‘usabilidade’

Ergonomia para Humanos e Designers de Interação

quinta-feira, 28 de janeiro de 2010

De algum tempo para cá muitos dos leitores, acredito que a maioria, notou que o foco de dicussão do Mormasso mudou radicalmente. Isso se deve ao fato de que, eu naturalmente, também mudei meu foco de trabalho e interesse. A cada dia que passa me torno muito mais “humano” e isso implica uma série de nova resoluções, preocupações e questionamentos que vão além do mundo mágico da publicidade e das ações de marketing.

Quando digo que estou ficando cada dia mais “humano” tendo sintetizar (não sei se consegui em um primeiro momento) que o foco deste blog mudou. O que interessa a partir de agora são as relações humano-humano e humano-computador. Ainda vou continuar postando ações interessantes em design, publicidade, e marketing, porém o que quero salientar a partir de agora é o papel do ser humano nisso tudo, como ele interage com essas ações e como tentar minimizar ao maximo suas frustrações no meio disso tudo.

E uma boa maneira de criar uma interação humano-computador satisfatória, é dando a enfase no primeiro elemento desta relação. Isso implica em projetar e arquitetar para pessoas, utilizar linguagem e mensagem que as mesmas compreendam em um ambiente que seja acessível as mesmas. E uma etapa crucial desta relação é a ergonomia.

Mas antes de corrigir sua postura ou ajustar sua cadeira na posição ideal ao monitor, devo dizer que não é exatamente DESTA ergonomia que se trata. A medida que as interfaces se tornam cada vez mais tangíveis, a interação com o usuário torna-se mais fisicamente diversa e complexa. Entender e aplicar conceitos antropométricos, cinéticos e de física ergonônica é essencial para design e usabilidade efetivas.

Neste post, fiz o upload de uma apresentação de Dan Saffer onde ele basicamente citava uma série de cuidados ergonômicos aos quais devemos nos ater ao projetar interfaces gestuais interativas. A palestra abaixo é de Rob Tannen e trata do mesmo assunto, porém com um foco um pouco mais abrangente.

O assunto não é dos mais excitantes, mas é altamente recomendável para quem, assim como eu, busca projetar experiências com foco no usuário, ou se preferir, com foco em humanos.

Em seu site Rob criou uma série de posts sobre o assunto iniciando neste. Leitura obrigatória.

Avaliação heurística no site www.redley.com.br

segunda-feira, 25 de janeiro de 2010

Para o trabalho de avaliação heurística da disciplina de ergonomia e usabilidade escolhi o site de comércio eletrônico da marca Redley para avaliar.

Sou um grande admirador da marca, porém nunca havia realizado compras pelo seus site de comércio eletrônico, portanto foi uma experiência duas vezes interessante.

À primeira vista o site me impressionou, pois logo na entrada já oferece duas opções ao usuário: Visitar o site institucional da marca e conhecer a nova coleção ou ir diretamente para a loja virtual. Isso me agradou bastante, pois já conheço a marca e sou um consumidor em potencial do serviço.

A tarefa realizada a seguir é a compra de um item na loja virtual da loja. Fiz a avaliação tendo como base as 10 heurísticas de Nielsen.

Home

home_geral

Pontos positivos.
Escolha entre navegação na loja virtual e site institucional na introdução do site.

Ponto negativo.
O menu produzido em flash pode ser um problema para usuários menos avançados. Sem o complemento instalado, o usuário não consegue visualizar o site institucional ou pelo menos ter acesso a estas duas opções.

Solução Produção de uma versão da página em html

Home Institucional

home_institucional

Pontos positivos. Clean e atrativa. Item compras online em destaque no menu.

Pontos negativos. A escolha da navegação não agrega valor ao usuário, tentendo a confundi-lo. O menu é escondido (é preciso usar a barra de espaço para que o mesmo apareça) e a ajuda fica no rodapé da pagina, inacessível a configurações de tela menores que 768px de altura.
Apesar do item compras online constar no menu, o mesmo não possui over no botão ao se mover o mouse entre as opções masculino e feminino.

Solução Dar mais destaque a estas opções com um over sobre elas durante a seleção.

Home Loja Virtual

home_loja

Pontos positivos.
Bem organizada, limpa e confiável. Os itens no menu da direita possuem over, facilitando a leitura das opções, informações sobre segurança do site, trocas e entregas constam na home dando mais confiança ao usuário.

Pontos negativos.
O banner da home é rotativo em flash. A navegação no mesmo é feita através de setas dos lados esquerdo e direito, porém a cor das setas algumas vezes se confunde com a de fundo da imagem, tornando-a imperceptível.
Alguns dos destaques do banner possuem cliques que levam ao item dentro do site, porém o padrão de botão não é seguido em nenhuma outra parte do site.
Em nenhum ponto do site é indicado explicitamente que estou na loja virtual de produtos MASCULINOS. A presença de um link FEMININO sem qualquer identificação abaixo do menu pode confundir a navegação.

Soluções (identificação da página) Consistência na identificação da página mantendo sempre o título da mesma em destaque no topo.

(Banner) Aumentar contraste do elemento seta no banner ou então modificar sua apresentação.

Home da Categoria

home_categoria

Pontos positivos.
A presença de breadcrumb no alto da pagina mais o destaque no banner e o item selecionado no menu e o nome da página ajudam realizar um escaneamento rapido da pagina.

Pontos negativos
A utilização dos filtros deveria facilitar a busca, porém atrapalha pois oferece opções de filtros além do necessário.
A cada modificação no menu dropdown um novo reload é dado na página tornando impossível a aplicação de ao menos 2 filtros de uma única vez.

Soluções Diminuir a quantidade de filtros, deixando-os mais relevantes. Exemplo (menor preço, mais recentes, tamnho M, etc)

Produto em destaque

produto_destaque

Pontos positivos
A pagina possui boa divisão da informação. As visualizações carregam rapido (inclusive o zoom para detalhes da peça)
Botão de ação critica (incluir item na sacola) está com bom destaque e de bom tamanho.
Informações sobre compra casada aparecem na rolagem, aumentando a probalidade de compra de outros itens.

Pontos negativos
Pagina um pouco extensa verticalmente. O botão de compra (incluir na sacola) somente aparece após a rolagem da mesma.

Incluir produto na sacola

produto_destaque2

Ao incluir o produto na sacola, um quadro surge indicando quais os produtos já estão em sua sacola, um subtotal e um link critico para fechar a compra.
Melhoria. Alterar a cor de fundo por uma mais constrastante para dar mais destaque a esta informação.

Solução Aumentar o contraste do box.

Cadastro e validação

cadastro

Antes de efetuar a compra o usuário deve preencher um formulário de cadastro, caso ainda não seja cadastrado no site. Esta tela possui mensagens amigáveis e de fácil entendimento.

Pontos positivos.
Tela de cadastro prioriza o contexto do uso. É bastante rápida e concisa, não pede informações desnecessárias e é bem organizada.
Separa as informações em 3 grupos distintos (Dados de acessso, dados pessoais e endereço de entrega
O label da informação é posicionado acima do campo alinhado a esquerda facilitando o processamento da informação (leitura top-down). Como o cadastro pede simplesmente o necessário, não sendo extenso demais, a probabilidade do usuário completar essa fase e realizar a compra é muito grande.

Carrinho de compras

fechar_compra

Página bem organizada e dinâmica, pode-se alterar a quantidade de itens ou excluir itens facilmente. O botão continuar comprando está bem localizado porém o botão “inciar fechamento” aparece somente após a rolagem.

Pontos negativos.
Botão critico longe da vista do usuário e com label estranho.

Soluções Trazer o botão para mais alto na página e mudar seu label. Exemplo, “ir para o caixa”.

Fechamento

fechar_compra_erro

Ao clicar em iniciar fechamento, novamente meu usuário e senha foram pedidos, (provavelmente porque demorei muito em minha sessão) porém ao tentar utilizar o usário e senha cadastrados tive o desprazer de não conseguir efetuar a compra. Pois o site me redirecionava para uma página de buscas que eu não efetuei.
Em nenhum de meus emails tive algum email resposta de confirmação de cadastro para confirmar meu usuário e senha. Nesse ponto desisti da compra.

Soluções Envio de email ao usuário logo após o cadastro com seus dados de acesso.

Modificar a mensagem de erro de forma a deixá-la coerente com a tarefa que está sendo realizada. Indicar caminhos para recuperação da senha.

De maneira geral o site da marca ofereceu uma boa experiência de uso. Apesar de um problema alta criticidade no momento de finalização da compra que pode ser resolvido de forma simples. Os outros pontos citados por mim na avaliação não são de grande criticidade, mas merecem atenção. Parabéns ao time de designers e programadores que proporcionaram uma boa experiência de uso para um fã da marca, continuem assim :)

O poder dos testes de usabilidade na experiência de uso de produtos e sistemas online

quinta-feira, 14 de janeiro de 2010

Ando estudando bastante sobre as várias disciplinas, etapas e processos que tratam de um bom Design de Interação. Uma delas, que inicialmente achava uma chatisse (e a primeira vista realmente o é), mas que agora estou aprendendo a amar são os testes de usabilidade.

Diversas vezes ouvi designers e diretores de arte web falando mal de testes de usabilidade e Arquitetura de Informação por achar que os mesmos “dificultam” ou “tiram a graça”  do trabalho. Como se criar uma experiência de uso de uma ferramenta na web não devesse passar pelo crivo do personagem principal da história, o usuário. Bobagem!

Ter em mãos resultados que comprovam, ou desaprovam, determinados caminhos no trabalho online é importantíssimo. Nos faz aprender mais sobre nosso público e sobre noss papel dentro deste universo.

O vídeo abaixo é antigo, uma raridade gravada em fita VHS, recentemente “upado” para o Youtube. Se trata de um teste de usabilidade realizado pela Corel (sim, a própria)  afim de testar duas ferramentas de um software destinado a construção de páginas. No teste o objetivo é construir um site com três páginas utilizando o método Wizard (um passo-a-passo) e o método Template.

O áudio é em inglês e não está muito bom, porém no final é possível entender muito bem o objetivo e a importância dos testes de usabilidade. Melhor ainda é perceber o quanto nossas opiniões, como profissionais na área, muitas vezes distorcem a realidade sobre o que é realmente bom para o usuário.

Toque é o novo clique

quinta-feira, 3 de dezembro de 2009

Esse é o título desta palestra (Taps is the New Click) de Dan Saffer, autor do livro Designing for Interaction: Creating Smart Applications and Clever Devices, referência na área de design de interação e experiência interativas. Dan também faz parte do emeritus board da Adaptive Path, uma empresa especializada em Experience Design, UX e Design de interação. Ou seja, ele sabe o que está falando.

Nessa palestra ele mostra de forma prática quais são so cuidados que se deve tomar ao projetar artefatos interativos que tenham como base da interação, o toque e reconhecimento gestual. Um apanhado de todo o conteúdo que vem estudando e colocando em prática desde 2006 quando surgiram os primeiros surfaces e iphones. Uma verdadeira aula de ergonomia, vale muito a pena

NYC IxDA - Tap is the New Click - Dan Saffer from Interaction Design Association on Vimeo.

Minimizando complexidade em Interfaces para o usuário

quarta-feira, 7 de outubro de 2009

Não, este não é um blog morto. Peço desculpas ao pessoal que acessa o Mormasso Blog com alguma frequência, mas é que o mundo da voltas que as vezes nos jogam um pouco para fora dos trilhos.
Estou atualizando o blog na medida do possível, mas encontrei no Twitter uma ferramenta mais dinâmica para compartilhar minhas idéias. Portanto se você possui uma conta no site de microblogging, siga-me. Se você for uma pessoa com updates interessantes, eu te sigo :P

Mas entrando direto no assunto, achei esse artigo super bacana no site da Smashing Magazine. O artigo chamado Minimizing Complexity in User Interfaces (Minimizando complexidade em interfaces de usuário) traz algumas boas dicas para programação visual de sistemas.

Uma trecho logo no início do artigo faz pensar bastante. Traduzida do inglês para meu português de fundo de quintal é algo do tipo:

“Clean. Fácil de Usar. User-friendly. Intuitivo. Este é o mantra proclamado por muitos, porém frequentemente não é cumprido. O problema: Complexidade. Como a forma de se lidar com a complexidade ajudar ou destruir uma aplicação. Um interface complexa pode desorientar o usuario em um caso leve e até alienar completamente em casos extremos.”

O texto segue com algumas dicas bem interessantes e praticas como, manter espaços em brancos, cortar aplicações desnecessárias entre vários outros. Vale uma boa passa de olhos.