usabilidade na web

Iuri Raiol

iuriraiol@gmail.com

On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.

(Jakob Nielsen)

Tradução livre:

Em uma página web média, os usuários tem tempo

de ler até 28% das palavras em uma visita média; e

é ainda mais provável que seja 20%.

(Jakob Nielsen)

Os usuários leem as páginas da esquerda para a direita e continuam em um padrão em forma de “F”

Ou seja, eles só “passam um olho”.

Link: youtu.be/3Qg80qTfzgU

O padrão ISO 9241 define usabilidade como:

“effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.”

Tradução livre:

“efetividade, eficiência e satisfação com os quais usuários específicos alcançam objetivos específicos em um ambiente particular.”

Pouco texto Muitos Formulários

Devemos então melhorar a

usabilidade de nossos

formulários

Relação: formulários estabelecem um relacionamento

entre o usuário e o sistema.

Conversação: formulários estabelecem um diálogo entre o

usuário e o sistema.

Aparência: pela aparência dos formulários é estabelecida

uma relação e uma conversa com o usuário.

Devem ser baseados em

confiança.

Possuem um objetivo.

O nome do formulário deve ter

um propósito.

Conhecer o usuário.

Linguagem apropriada.

Mudanças de comportamento

repentinas são ruins.

Perguntas fora do escopo.

Deve ser uma conversa e não

um interrogatório.

Organize os tópicos!

Agrupe as informações

relacionadas.

Um tópico por vez.

Crie pausas naturais.

Remova as distrações.

Chris Hemsworth Brigitte Bardot

1 – Rótulos (Labels)

2 – Campos de Input

3 – Ações

4 – Ajuda

5 – Mensagens

6 - Validação

x

Palavras ou frases?

Maiúsculo ou minúsculo?

“Dois pontos” (:)

Alinhamento

Uso dos campos com a finalidade certa.

Cuidado com a customização dos inputs.

Restrição de formato de entrada (máscaras)

Distinção dos campos obrigatórios e opcionais.

%

Ações de botões primárias e secundárias (Ex:

primária: salvar, secundária: voltar).

Convenções de nome (“Confirmar envio” seria

melhor que “Ok”).

Texto de ajuda somente quando necessário

Mostrar ao usuário que ele pode pedir ajuda!

Validação nos campos somente quando for necessário.

Opções pré-selecionadas devem ser utilizadas. (Ex: país)

A ideia é não concluir e sim começar a aplicar a usabilidade!

~Fim~

Facebook: @aitproeg

NIELSEN, Jakob. How Little Do Users Read? Disponível em: <http://www.nngroup.com/articles/how-little-do-users-read/>

Design Blog. 5 vídeos de usabilidade que você deve assistir. Disponível em: <http://design.blog.br/web-design/5-videos-de-usabilidade-que-voce-deve-assistir>

MIFSUD, Justin. An Extensive Guide To Web Form Usability. Disponível em: <http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/>

GUBE, Jacob. 7 Best Practices for Improving Your Website's Usability. Disponível em: <http://mashable.com/2011/09/12/website-usability-tips/>

ABNT. Requisitos Ergonômicos para Trabalho de Escritórios com Computadores. Baseada na ISSO 9241-11,1998. Disponível em: <http://www.inf.ufsc.br/~cybis/pg2003/iso9241-11F2.pdf>

Imagens. Google. Disponível em: <www.google.com.br>

Imagens. Pattern Tap. Disponível em: <www.patterntap.com>