não me faça pensar

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!