não me faça pensar
DESCRIPTION
Introdução básica de usabilidade, visando sistemas Web. Apresentação realizada na empresa Mobiltec.TRANSCRIPT
Não me faça pensar
Aprenda!
Aprenda!
• O usuário não é BURRO!
Aprenda!
• O usuário não é BURRO!
•VOCÊ que não sabe dizer o que ele tem que fazer!
Quem é a tal usabilidade ou aquela UX??
• Usabilidade: É a facilidade com que se emprega uma ferramenta ou objeto, a fim de realizar uma tarefa específica e importante.
• User Experience: Envolve os sentimentos de uma pessoa em relação à utilização de um determinado produto, sistema ou serviço.
Um mundo além do código
Conceitos básicos
• Nada importante deve estar a mais de dois cliques de distância;
• Fale a língua do usuário;
• E a principal lei: NÃO ME FAÇA PENSAR.
Não me faça pensar??
• O usuário não pode perder nenhum segundo pensando na ação que ele deve fazer.
• O usuário deve ser capaz de entender o que é e como usar sem desprender esforço.
Não me faça pensar??
Formato de Leitura de página
Estudos dizem:
Não lemos as páginas
Crie uma arquitetura visual clara
Crie uma arquitetura visual clara
Faça o obvio!
Faça o obvio! (Exemplo)
Estrutura planejada
Deixe claro onde o usuário está!
Deixe claro onde o usuário está!
Migalhas de Pão
Arquitetura de Informação
• Errado
• Correto
Teste A/B
• Como funciona:
• Resultados:
Usuário prefere não ler, imagens podem falar por você
Não de a chance do usuário desistir
Faça o simples, faça ele agir por impulso
Faça o simples, faça ele agir por impulso
A cada campo você corre o risco de perder uma conversão
Não tire a ação do usuário
E eu desenvolvedor no que preciso pensar?
E eu desenvolvedor no que preciso pensar?
Facilite a vida do usuário
Tempo de resposta
Renderizando na Web e no Mobile
Front-end, dicas rápidas!
• HTMLPlaneje a estrutura, não sai fazendo div de qualquer jeito;
Cuidado espaço em branco também aumenta o KB.
• JavaScriptCarregue no final da página;
Minifique.
• CSSSimplifique coletores;
Minifique.
Estilos no topo, scripts no rodapé
Usa HTML5? Experimente o async!
<script src="example.js"></script>
A página aguarda o script terminar de carregar antes de continuar sua renderização e sua execução é feita imediatamente após
<script async src="example.js"></script>
O download do script é feito de forma assíncrona enquanto o processo de renderização da página continua a ser feito.
Combine vários arquivos css em um só
Outra boa prática para organização e manutenção é separar seu estilo em diversos arquivos.
<link rel="stylesheet" href="structure.css" media="all"><link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all"><link rel="stylesheet" href="plugin.css" media="all">
Porém, é preciso realizar uma requisição HTTP para cada um dos arquivos e sabemos que o navegador não consegue lidar com muitos downloads paralelos.
<link rel="stylesheet" href="main.css" media="all">
Use css sprites
Gzip• Comprime os dados no servidor antes de enviar via rede para o navegador do usuário, que
descomprime na hora que recebe. É como zipar um arquivo antes de mandar pra alguém, o tamanho final fica bem menor.
Referência Front-end
gtmetrix.com / yslow.org
Obrigado!