Aula da disciplina Fundamentos de Webdesign, de Tecnologia e de Inovação, do curso de Especialização em Gestão da Comunicação em Mídias Digitais do Centro Universitário Senac, em 27 de março de 2017.
2. O que é usabilidade?
Renato Cruz – Senac2
“A usabilidade é um atributo de qualidade
relacionado à facilidade de uso de algo. Mais
especificamente, refere-se à rapidez com que os
usuários podem aprender a usar alguma coisa, a
eficiência deles ao usá-la, o quanto lembram
daquilo, seu grau de propensão a erros e o quanto
gostam de utilizá-la. Se as pessoas não puderem ou
não conseguirem utilizar um recurso, ele pode muito
bem não existir.”
Fonte: NIELSEN, Jakob; LORANGER, Hoa. Usabilidade na web: projetando web sites com qualidade. São Paulo:
Saraiva, 2011
3. The Homer
Renato Cruz – Senac3
Fonte: Os Simpsons, “Oh Brother, Where Art Thou?”, Temporada 2, Episódio 15, 16 fev. 1991.
4. Qual é a coisa mais importante?
Renato Cruz – Senac4
“Não me faça pensar!”
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio de Janeiro: Alta
Books, 2008.
7. Obviedades
Renato Cruz – Senac7
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.
8. Perguntas a serem evitadas
Renato Cruz – Senac8
Onde estou?
Onde devo começar?
Onde eles colocaram o ______?
Quais as coisas mais importantes nessa página?
Por que eles deram este nome a isto?
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio de Janeiro: Alta
Books, 2008.
9. As pessoas não leem as páginas
Renato Cruz – Senac9
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.
10. Hierarquia visual clara
Renato Cruz – Senac10
Muito importante
Um pouco menos importante
Nem um pouco importante
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio de Janeiro: Alta
Books, 2008.
11. Sem medo das convenções
Renato Cruz – Senac11
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.
12. Convenções
Renato Cruz – Senac12
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.
13. Não exagere nas opções
Renato Cruz – Senac13
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.
14. Opções mais simples
Renato Cruz – Senac14
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.
15. Tipos de usuários
Renato Cruz – Senac15
Algumas pessoas (usuários “dominados pelas
pesquisas”) quase sempre procuram as caixas
de busca assim que entram em um site.
Outras pessoas (usuários “dominados por
links”) quase sempre navegarão primeiro,
pesquisando apenas quando não tiverem mais
prováveis links para clicar ou quando já
estiverem suficientemente frustradas com o
site.
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio de Janeiro: Alta
Books, 2008.
16. Como funciona a navegação
Renato Cruz – Senac16
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.
17. Nomes de páginas
Renato Cruz – Senac17
Todas as páginas precisam de um nome. Da mesma forma que
cada esquina deve ter uma placa, cada página deve ter um nome.
O nome precisa estar no lugar certo. Na hierarquia visual da
página, o nome deve englobar todo o conteúdo único desta página.
O nome precisa ter destaque. A combinação de posição, tamanho,
cor e tipo de letra deve dizer “Este é o cabeçalho da página inteira”.
O nome precisa ser equivalente ao clicado. Se eu clicar num link
ou botão que diga “Purê de batatas”, o site me levará a uma página
chamada “Purê de batatas”.
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio de Janeiro: Alta Books, 2008.
18. Você está aqui
Renato Cruz – Senac18
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.
20. Abas
Renato Cruz – Senac20
São autoevidentes. Ninguém olha para elas e diz: “O que será que
elas fazem?”
São difíceis de não serem vistas. Não é tão incomum o usuário
deixar de perceber uma barra de botões no topo da página. As barras
dificilmente são confundidas com outra coisa que não seja
navegação.
São agradáveis. Se feitas de forma correta, podem adicionar um
acabamento e servir a um propósito útil.
Sugerem um espaço físico. Criam a ilusão de que a aba ativa se
move fisicamente para a frente.
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio de Janeiro: Alta Books, 2008.
21. Teste do porta-malas
Renato Cruz – Senac21
Que site é este? (Identificação do site)
Em qual página estou? (Nome da página)
Quais são as principais seções desta página? (Seções)
Quais são as minhas opções neste nível? (Navegação
local)
Onde eu estou no esquema das coisas? (Indicadores
“Você está aqui”)
Como eu posso fazer uma pesquisa?
Fonte: KRUG, Steve. Não me faça pensar: uma abordagem de bom senso da usabilidade na web. Rio de Janeiro:
Alta Books, 2008.
22. Homepage (I)
Renato Cruz – Senac22
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.
23. Homepage (II)
Renato Cruz – Senac23
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.
24. Respostas mais importantes
Renato Cruz – Senac24
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.
25. O site da universidade
Renato Cruz – Senac25
Fonte: https://xkcd.com/773/
27. Palavras
Renato Cruz – Senac27
“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.
28. Webwriting
Renato Cruz – Senac28
É “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.
29. Interação
Renato Cruz – Senac29
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.
32. Seja breve e conciso
Renato Cruz – Senac32
“Quando acordou, o dinossauro ainda estava lá”
– Augusto Monterroso (1959)
33. Mas há exceções
Renato Cruz – Senac33
A biografia da presidente do Yahoo publicada pela
Business Insider poderia ser um pequeno livro.
34. Leitura em F
Renato Cruz – Senac34
Fonte: Maioli, Lisandra. “Webwriting”. In: Brambilla, Ana. Para entender as mídias sociais
– Volume 2. Salvador: Edições VNI, 2012.
35. Como fazer com os (não) leitores
Renato Cruz – Senac35
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/
36. Antes
Renato Cruz – Senac36
“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/
37. Depois
Renato Cruz – Senac37
“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/
38. Os formatos dos links
Renato Cruz – Senac38
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.