Design otimizado para a web

32
Design Otimizado para a Web Usabilidade nos tempos modernos

Transcript of Design otimizado para a web

Page 1: Design otimizado para a web

Design Otimizado para a Web

Usabilidade nos tempos modernos

Page 2: Design otimizado para a web

Elisiane Geisler

Formada em Análise e Desenvolvimento de Sistemas

Especialista SharePoint na KeepIT Certificação 70-480 (Programming in HTML5

with JavaScript and CSS3)

E-mail para contato: [email protected]

Page 3: Design otimizado para a web

Sobre o que vamos tratar hoje Usabilidade Morte do SEO Não me faça pensar! Princípio do K.I.S.S. Clean Design E quando o cliente é mais exigente? Bem vindo ao mundo moderno! Responsive Web

Design User Experience Alguns livros bacanas

Page 4: Design otimizado para a web

Usabilidade

Page 5: Design otimizado para a web

Usabilidade De acordo com a ISO 9241-11 a Usabilidade é “A

capacidade de um produto ser usado por usuários específicos para atingir objetivos específicos com eficácia, eficiência e satisfação em um contexto específico de uso.”

Eficácia – A melhor forma de alcançar o resultado... Eficiência – Com poucos recursos... Satisfação – E com conforto e aceitabilidade do produto.

Page 6: Design otimizado para a web

Morte do SEO

Page 7: Design otimizado para a web

Morte do SEO Atualizações no motor de busca do Google: Panda (fev 2011): Sites com conteúdo de baixa

qualidade, focado em palavra-chave. Pinguim (abril 2012, maio 2013): Sites que abusam

de técnicas de netlinking.

Page 8: Design otimizado para a web

Morte do SEO

Otimização para buscadores: Conteúdo Qualidade Estrutura Atualização Links externos (de qualidade!)

Page 9: Design otimizado para a web

Não me faça pensar!

Page 10: Design otimizado para a web

Não me faça pensar! Livro de Steve Krug, lançado em 2008

Usuário não quer pensar! Nós não lemos a página da Web, nós a exploramos Não fazemos as melhores escolhas, usamos a

técnica do “satisfiência” Não adivinhamos como as coisas funcionam.

Fazemos de qualquer jeito.

Page 11: Design otimizado para a web

Não me faça pensar! Dicas básicas

Criar uma hierarquia visual clara em cada página; Fazer uso das convenções; Dividir as páginas em áreas bem definidas; Deixar óbvio o que é clicável; Diminuir a poluição visual. Considere que tudo é

poluição.

Page 12: Design otimizado para a web

Não me faça pensar! Usuário não se importa em dar vários cliques.

Desde que saiba para onde está indo e o que está fazendo.

Conversa fiada deve morrer. Instruções devem morrer.

O site tem que permitir que se encontre facilmente algo: Utilizando o campo de busca; Clicando nos links.

Page 13: Design otimizado para a web

Princípio do K.I.S.S.

Page 14: Design otimizado para a web

Teoria do K.I.S.S. Criado por Kelly Johnson (1910-1990) O time do Sr. Johnson era responsável pelo time de

engenheiros que tinham a tarefa de criar jatos que deveriam ser reparados por mecânicos “em geral” sob condições de combate e com poucas ferramentas.

Simplicidade é a palavra de ordem!

Page 15: Design otimizado para a web

Clean Design

Page 16: Design otimizado para a web

Clean Design

Page 17: Design otimizado para a web

Clean Design Quanto mais limpo o visual e quanto melhor

distribuído ele for, melhor a experiência do usuário Tendência atual da web, anda casada com o design

responsivo (falaremos adiante!)

...Sem muita florzinha, ok?

Page 18: Design otimizado para a web

Clean Design

Page 19: Design otimizado para a web

E quando o cliente é mais exigente?

Page 20: Design otimizado para a web

E quando o cliente é mais exigente? Tá bom... Algumas florzinhas então, vai...

Page 21: Design otimizado para a web
Page 22: Design otimizado para a web
Page 23: Design otimizado para a web
Page 24: Design otimizado para a web
Page 25: Design otimizado para a web
Page 26: Design otimizado para a web

E quando o cliente é mais exigente? Ei, espera... Os sites continuam sendo... Simples!

Page 27: Design otimizado para a web

Responsive Web Design

Page 28: Design otimizado para a web

Responsive Web Design O adeus ao conceito de versão “mobile”; Sites que se adaptam a qualquer dispositivo; Nada de unidades absolutas (pixels); Grids flexíveis, imagens flexíveis; CSS3: Media Queries;

O site tem que ser leve! O site tem que ser rápido!

Page 29: Design otimizado para a web

User Experience

Page 30: Design otimizado para a web

User Experience A ISO 9241-210 define a experiência do usuário

como “as percepções e reações de uma pessoa que resultam do uso ou utilização prevista de um produto, sistema ou serviço.”

Isso inclui: Emoções; Crenças; Preferências; Percepções; Respostas físicas e psicológicas; Comportamentos e realizações; Etc.

Page 31: Design otimizado para a web

Alguns livros bacanas...

Page 32: Design otimizado para a web

Perguntas?