design otimizado para a web
TRANSCRIPT
![Page 1: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/1.jpg)
Design Otimizado para a Web
Usabilidade nos tempos modernos
![Page 2: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/2.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/3.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/4.jpg)
Usabilidade
![Page 5: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/5.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/6.jpg)
Morte do SEO
![Page 7: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/7.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/8.jpg)
Morte do SEO
Otimização para buscadores: Conteúdo Qualidade Estrutura Atualização Links externos (de qualidade!)
![Page 9: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/9.jpg)
Não me faça pensar!
![Page 10: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/10.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/11.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/12.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/13.jpg)
Princípio do K.I.S.S.
![Page 14: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/14.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/15.jpg)
Clean Design
![Page 16: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/16.jpg)
Clean Design
![Page 17: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/17.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/18.jpg)
Clean Design
![Page 19: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/19.jpg)
E quando o cliente é mais exigente?
![Page 20: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/20.jpg)
E quando o cliente é mais exigente? Tá bom... Algumas florzinhas então, vai...
![Page 21: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/21.jpg)
![Page 22: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/22.jpg)
![Page 23: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/23.jpg)
![Page 24: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/24.jpg)
![Page 25: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/25.jpg)
![Page 26: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/26.jpg)
E quando o cliente é mais exigente? Ei, espera... Os sites continuam sendo... Simples!
![Page 27: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/27.jpg)
Responsive Web Design
![Page 28: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/28.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/29.jpg)
User Experience
![Page 30: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/30.jpg)
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](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/31.jpg)
Alguns livros bacanas...
![Page 32: Design otimizado para a web](https://reader036.vdocuments.pub/reader036/viewer/2022062412/5875a27f1a28ab6d198b703b/html5/thumbnails/32.jpg)
Perguntas?