Aula da disciplina Fundamentos de Webdesign, de Tecnologia e de Inovação, do curso de curso de Especialização em Gestão da Comunicação em Mídias Digitais, do Senac Lapa Scipião, em 25 de novembro de 2017.
2. Homepage (I)
Renato Cruz – Senac2
Identificação e missão do site. De cara, a página
inicial tem de dizer o que é o site e para que ele
serve.
Hierarquia do site. Tem de dar uma indicação
visual do que o site tem para oferecer e como está
organizado.
Pesquisa. A maioria dos sites precisa ter uma
caixa de busca em destaque na página inicial.
Atrações. Como a capa de uma revista, precisar
oferecer dicas do “bom conteúdo” dentro dele.
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio
de Janeiro: Alta Books, 2008.
3. Homepage (II)
Renato Cruz – Senac3
Conteúdo oportuno. A página inicial precisa de algum
conteúdo que seja atualizado frequentemente.
Negócios. Precisa dar espaço para qualquer propaganda,
promoção cruzada ou negócios entre marcas.
Atalhos. As páginas mais procuradas podem merecer
links próprios na primeira página.
Registro. Se o site usar registro, precisa de links para
novos usuários se registrarem e para os antigos
assinarem.
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio de Janeiro:
Alta Books, 2008.
4. Respostas mais importantes
Renato Cruz – Senac4
O que é isto?
O que eu posso fazer aqui?
O que eles têm aqui?
Por que eu deveria estar aqui – e não em outro
lugar?
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio de Janeiro:
Alta Books, 2008.
5. O site da universidade
Renato Cruz – Senac5
Fonte: https://xkcd.com/773/
7. Palavras
Renato Cruz – Senac7
“Toda vez que encontro uma palavra
fora do lugar, ou seja, uma palavra que
poderia ser usada pelos clássicos
espanhóis ou uma palavra usada nas
favelas de Buenos Aires, quer dizer, uma
palavra que é diferente das outras, então
eu a substituo, e uso uma palavra
comum. Lembro que Stevenson escreveu
que, numa página bem escrita, todas as
palavras devem parecer iguais.”
Fonte: Jorge Luis Borges, The Art of Fiction No. 39. In: The
Paris Review, Winter-Spring 1967 No. 40.
8. Webwriting
Renato Cruz – Senac8
É “o conjunto de técnicas que auxiliam na
distribuição de conteúdo em ambientes
digitais”.
É diferente de redação para a web ou
jornalismo online.
Deve facilitar e incentivar a navegação do
usuário por meio de conteúdo relevante e
interessante.
Fonte: Maioli, Lisandra. “Webwriting”. In: Brambilla, Ana. Para entender
as mídias sociais – Volume 2. Salvador: Edições VNI, 2012.
9. Interação
Renato Cruz – Senac9
O webwriter é mais do que um curador
virtual.
Ele precisa saber participar de conversas ou
como iniciar uma.
Além de interessante, o conteúdo deve
incentivar a interação e o engajamento.
O usuário deve se sentir incentivado a
compartilhar, comentar e curtir.
Fonte: Maioli, Lisandra. “Webwriting”. In: Brambilla, Ana. Para entender
as mídias sociais – Volume 2. Salvador: Edições VNI, 2012.
12. Seja breve e conciso
Renato Cruz – Senac12
“Quando acordou, o dinossauro ainda estava lá”
– Augusto Monterroso (1959)
13. Mas há exceções
Renato Cruz – Senac13
A biografia da presidente do Yahoo publicada pela
Business Insider poderia ser um pequeno livro.
14. Leitura em F
Renato Cruz – Senac14
Fonte: Maioli, Lisandra. “Webwriting”. In: Brambilla, Ana. Para entender as mídias sociais
– Volume 2. Salvador: Edições VNI, 2012.
15. Como fazer com os (não) leitores
Renato Cruz – Senac15
Palavras-chave em destaque;
Intertítulos com significado;
Listas;
Uma ideia por parágrafo;
Estilo pirâmide invertida;
Metade do tamanho (ou menos).
Fonte: Nielsen, Jakob. “How users read the web”, Oct. 1 1997. Disponível
em: http://www.nngroup.com/articles/how-users-read-on-the-web/
16. Antes
Renato Cruz – Senac16
“Nebraska is filled with internationally
recognized attractions that draw large crowds of
people every year, without fail. In 1996, some of
the most popular places were Fort Robinson
State Park (355,000 visitors), Scotts Bluff
National Monument (132,166), Arbor Lodge
State Historical Park & Museum (100,000),
Carhenge (86,598), Stuhr Museum of the Prairie
Pioneer (60,002), and Buffalo Bill Ranch State
Historical Park (28,446).”
Fonte: Nielsen, Jakob. “How users read the web”, Oct. 1 1997. Disponível
em: http://www.nngroup.com/articles/how-users-read-on-the-web/
17. Depois
Renato Cruz – Senac17
“In 1996, six of the most-visited places in
Nebraska were:
• Fort Robinson State Park
• Scotts Bluff National Monument
• Arbor Lodge State Historical Park &
Museum
• Carhenge
• Stuhr Museum of the Prairie Pioneer
• Buffalo Bill Ranch State Historical Park”
Fonte: Nielsen, Jakob. “How users read the web”, Oct. 1 1997. Disponível
em: http://www.nngroup.com/articles/how-users-read-on-the-web/
18. Os formatos dos links
Renato Cruz – Senac18
O leitor precisa ter uma ideia de onde vai
parar quando clicar num texto ou imagem.
Links como “clique aqui”, “mais
informações” e “veja também” são ruins.
Software para pessoas com deficiência visual
fazem uma lista de links da página. Se os
links forem “veja também”, a lista fica sem
sentido.
Fonte: Felder, Lynda. Writing for the web: creating compelling web content
using words, pictures and sound. Berkeley: New Riders, 2012.
19. Alguns cuidados
Renato Cruz – Senac19
Produzir material conciso, objetivo e sem
duplo sentido, sem erros de português e com
informações corretas.
Publicar informações completas numa
mesma mensagem e que não gerem falsas
expectativas.
Organizar o conteúdo de forma atraente e que
facilite a navegação sempre considerando o
comportamento do usuário e das plataformas.
Fonte: Maioli, Lisandra. “Webwriting”. In: Brambilla, Ana. Para entender
as mídias sociais – Volume 2. Salvador: Edições VNI, 2012.
20. Mobilidade
Renato Cruz – Senac20
Os princípios básicos da usabilidade nos smartphones são os
mesmos.
As pessoas tendem a fazer as coisas mais rapidamente e a ler ainda
menos em telas pequenas.
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New Riders, 2013.
21. Mobile First
Renato Cruz – Senac21
No lugar de criar primeiro uma versão completa do website, para
depois reduzi-la, você cria a versão móvel com o que considera
essencial para o seu usuário.
Depois, acrescenta conteúdos e funcionalidades para a versão
desktop.
É errado achar que toda vez que o usuário acessa a versão móvel,
ele está realmente em movimento.
Ele pode acessar a versão móvel com tranquilidade, sentado no sofá
da sala à noite.
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New Riders, 2013.
22. Redesenho do site da Wired
Renato Cruz – Senac22
“Com a fundação do site agora sólida, nossas equipes
editorial, de design, de engenharia e de produto
começaram a redesenhá-lo para a tela mais importante
da sua vida – seu smartphone. (…) Escolhemos um
tema baseado em cartões, tanto pela flexibilidade
quanto pela configurabilidade.
Uma vez definindo o design, encontramos maneiras de
expandi-lo para outras telas – desktop, laptop, tablet e
qualquer outro lugar em que você acessa a Wired”
– Scott Dadich, ex-editor da Wired
24. CMS
Renato Cruz – Senac24
Os sistemas de gerenciamento de conteúdo (CMS,
na sigla em inglês) permitem publicar, editar e
modificar conteúdo a partir de uma interface
central.
Eles servem para gerenciar o fluxo de trabalho
num ambiente colaborativo.
São a base de blogs e sites de notícias e compras,
entre outros.
25. Algumas opções
Renato Cruz – Senac25
Drupal Joomla WordPress
• Ferramenta para
desenvolver sites mais
sofisticados, com
sistema avançado de
tags;
• Exige mais
conhecimento técnico do
usuário.
• Tem um nível
intermediário de
complexidade;
• Foi criado como
plataforma de
comunidades.
• É mais simples de usar
que os outros dois
sistemas;
• Nasceu como uma
ferramenta para blogs,
mas evoluiu para outros
tipos de sites.
The Weather Channel
The Beatles
University of Oxford
Leonardo Di Caprio
GE Transportation
Peugeot
TechCrunch
Open.Nasa
The Rolling Stones
26. Como testar
Renato Cruz – Senac26
Não existe usuário médio. Cada usuário é único, com suas
idiossincrasias.
Grupos de foco não são testes de usabilidade.
Testar com um usuário no começo do projeto é melhor que
testar com 50 no final.
Mesmo com pouco dinheiro, é possível verificar a
usabilidade de um site.
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New Riders, 2013.
27. Faça você mesmo - I
Renato Cruz – Senac27
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New Riders, 2013.
28. Faça você mesmo - II
Renato Cruz – Senac28
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New Riders, 2013.
29. Exemplo de tarefas
Renato Cruz – Senac29
Crie uma conta de acesso.
Conecte-se usando uma conta e uma senha
existentes.
Recupere uma senha esquecida.
Recupere um nome de conta esquecido.
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San
Francisco: New Riders, 2013.