segunda-feira, 15 de junho de 2015

O usuário está bêbado #01

Fala pessoal, finalmente fiz o primeiro vídeo do "O usuário está bêbado".

Se você ainda não conhece o projeto acesse: http://www.localhost8080.com.br/o-usuario-esta-bebado

Mas basicamente bebo muita cerveja e testo sites, apps ou sistemas em uma perspectiva de Usabilidade/UX e depois faço um vídeo e um relatório do que pode ser melhorado.

Segue abaixo o vídeo e o relatório:



Relatório - O usuário está bêbado - #01 - Site bebidaboa.com.br


O site testado foi o www.bebidaboa.com.br que de um modo geral apresenta uma boa usabilidade, inclusive mobile, e como qualquer site ou pessoa, tem pontos a melhorar. São eles:

Homepage

A sua homepage deve dar foco para explicar o que seu site é, o que ele oferece e quais são seus diferenciais.

Uma pessoa ao acessar o seu site, deve nos primeiros segundos identificar que é um site para bar tenders com receitas oficiais e dicas sobre drinks, etc.

Referências:
http://www.nngroup.com/articles/most-violated-homepage-guidelines/

Otimizar imagens

Percebi uma leve demora para a exibição das imagens no site, como o site tem muitas imagens é interessante utilizar uma ferramenta como o www.jpegmini.com para reduzir o tamanho (bytes) das imagens sem perder a qualidade.
Em imagens que sempre terão o mesmo tamanho (que não mudam de tamanho na exibição do celular e de um PC por exemplo) é interessante colocar fixo a largura e altura das imagens.

Referências:
http://browserdiet.com/pt/

Carrossel

Carrossel é um assunto que pode gerar muita discussão, existem vários artigos interessantes sobre isso, mas vou dar duas recomendações simples:
- Deixe o carrossel estático, ele deve ir para o lado apenas se o usuário clicar no botão para trocar de slide.
- Diminua os textos de cada slide do carrossel, seja mais sucinto, talvez apenas o título e imagem.

Motivos:
- O movimento do carrossel sem o comando do usuário pode irritá-lo;
- O usuário não tem tempo suficiente para ler toda a informação antes do carrossel se movimentar;
- Mesmo se for pouca informação, existem pessoas que leem mais devagar, que podem não entender uma palavra, ou por exemplo uma pessoa que não seja brasileira e demore mais tempo para ler um texto simples;
- Prejudica a acessibilidade pois usuários com determinadas deficiências podem ter dificuldade para conseguir pausar o carrossel ou clicar no “Leia Mais”;
- Usuários podem ignorar o carrossel por imaginarem que não conseguirão lê-lo a tempo.

No celular o carrossel não funcionou muito bem, as imagens estão muito grandes, os textos também e a navegação está um pouco confusa.

Referências:
http://www.nngroup.com/articles/auto-forwarding/
http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites/

Esses dois artigos são bem interessantes, o primeiro não fala muito bem de carrossel e o segundo mostra um bom uso dele. A partir deles você obterá outras referências de artigos também.

Analisando o carrossel da amazon.com percebe-se que o carrossel se move automaticamente, porém, duas coisas são interessantes:
- O carrossel passa por todos os slides apenas uma vez, depois ele para no primeiro. Ele não fica se movendo eternamente.
- Os textos em cada slide são bem curtos.

Público alvo

Se o público alvo são apenas bar tenders profissionais, é preciso deixar claro isso logo ao entrar no site, pois um bar tender ao entrar no site pode achar que é só mais um site qualquer de receitas de bebidas, ele precisa perceber nos primeiros segundos ao entrar no site que pode encontrar muito conteúdo interessante ali.

Mas se também tem o interesse em focar em qualquer pessoa que esteja em casa e queira fazer uma bebida diferente, pessoas como:
- Universitários numa festa com amigos;
- Um divorciado de 30 anos que quer beber algo diferente com sua namorada;
- Uma mulher querendo servir uma bebida para as amigas;

Então você tem que pensar que essas pessoas não conhecem de bebida, então elas tem poucos ingredientes em casa por exemplo e não conhecem determinados termos.
É necessário melhorar os filtros e menus (isso até para bar tenders profissionais vai ajudar).
Outra coisa: Eu não encontrei o campo "Tipo de Medida" no meu primeiro teste para poder trocar para "Caseira". E mesmo na medida caseira, eu não sei quanto é 30 ml, talvez pensar em uma forma de facilitar isso.

No início do site poderia aparecer uma pergunta como "Quem é você?"
-Trabalho como bar tender ou estou estudando isso
-Quero aprender como fazer uma bebida legal em casa
E com base nessa pergunta você poderia alterar o site oferecendo uma experiência diferente para cada perfil.

Mas talvez você veja que não valeria o esforço, que o seu foco é bar tender e quem está estudando isso.
Às vezes uma pequena seção para quem não sabe nada poder estudar um pouco e ter o conhecimento base para navegar no site chamaria bastante atenção, talvez até mais do que preparar todo o site para quem não conhece muito do assunto.

Notícias

Colocar um link para algo relacionado dentro do site logo nos primeiros parágrafos da notícia funciona muito bem.

Seção “Destaque”

Retirar a seção de "destaque", pois:
-Parece que você está vendendo algo
-Parece spam, se você tiver como analisar, perceberá que quase ninguém clica
-Quanto mais informação na tela, maior a carga de trabalho

Referências:
www.nngroup.com/articles/banner-blindness-old-and-new-findings
Para um melhor entendimento, recomendo a leitura do artigo do Jacob Nielsen sobre “Banner Blindness” onde ele fala que usuários quase nunca olham para qualquer coisa que pareça um anúncio. Nessa imagem também mostrada no vídeo mostra que os usuários raramente olham para os anúncios:


Formulário de cadastro

O formulário está muito grande e isso dificulta que as pessoas cheguem até o fim, elas pode desistir de continuar o cadastro ao ver que o formulário é extenso ou desistir no meio caso qualquer coisa a distraia.

Campos como "Apelido", "Sexo", "Data de nascimento", "foto", todos os campos de endereço e números de telefone talvez não sejam necessários no primeiro cadastro. Possibilite o preenchimento desses dados em um outro momento.
Talvez retirar o campo "Profissão" e seguir a ideia do "Sou Bartender Profissional" e exibir 3 campos para seleção:
- Sou bartender profissional
- Quero ser um bartender
- Gosto de apreciar boas bebidas

Retire a seção de "Bebidas mais acessadas" do lado do formulário, isso pode distrair o usuário, além de que se o usuário clicar ali, ele sairá do cadastro sem finalizar o preenchimento.

Mobile

Não fiz uma análise muito aprofundada do mobile, apesar de ser muito importante, mas posso dar três dicas:
- Imagem do logo ocupa boa parte da tela, diminuir imagem ou talvez retirar;
- Carrossel dificultou a navegação, talvez para mobile exibir as notícias de outra forma, ou simplificar o carrossel.
- O menu é um pouco difícil de clicar, principalmente para quem tem o dedo mais gordinho como o Homer Simpson


Conclusão

Foi um prazer testar esse site e mais legal ainda ver que essas dicas estão sendo colocadas em prática.
O site oferece uma boa usabilidade, mas como qualquer site tem pontos a serem melhorados.
Eu recomendaria esse site a um amigo bartender e também para amigos que queiram fazer alguma bebida especial. Eu mesmo me tornarei usuário assíduo deste site.

Um grande abraço ao meu amigo Marcelo, o primeiro cliente do "O usuário está bêbado", todo sucesso do mundo e muitos usuários satisfeitos na sua vida!

Valeu galera!
Adriano Schmidt

terça-feira, 9 de junho de 2015

O usuário está bêbado

Fala pessoal,



Se um bêbado conseguir, a chance de outras pessoas conseguirem também é alta!

Eu e um monte de cervejas vamos testar isso pra você e dar inúmeras dicas de como melhorar a UX e a Usabilidade do seu site, app ou sistema.

Esse é meu novo projeto.

Deem uma olhada: www.localhost8080.com.br/o-usuario-esta-bebado/
Essa é página no face: https://www.facebook.com/ousuarioestabebado

Vídeo:



Vaaaleu!!!
Adriano Schmidt