Fundamentos de webdesign,
tecnologia e ubiquidade
8 de abril de 2015
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
The Homer
Renato Cruz – Senac3
Fonte: Os Simpsons, “Oh Brother, Where Art Thou?”, Temporada 2, Episódio 15, 16 fev. 1991.
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.
Google
Renato Cruz – Senac5
Google Wave
Renato Cruz – Senac6
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.
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.
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.
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.
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.
Pirâmide invertida
Renato Cruz – Senac12
Fonte: Christopher Schwartz / Wikipédia
Palavras
Renato Cruz – Senac13
“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.
Webwriting
Renato Cruz – Senac14
 É “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.
Interação
Renato Cruz – Senac15
 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.
Notícia vira meme
Renato Cruz – Senac16
A culpa é do estagiário
Renato Cruz – Senac17
Seja breve e conciso
Renato Cruz – Senac18
“Quando acordou, o dinossauro ainda estava lá”
– Augusto Monterroso (1959)
Mas há exceções
Renato Cruz – Senac19
A biografia da presidente do Yahoo publicada pela
Business Insider poderia ser um pequeno livro.
Leitura em F
Renato Cruz – Senac20
Fonte: Maioli, Lisandra. “Webwriting”. In: Brambilla, Ana. Para entender as mídias sociais
– Volume 2. Salvador: Edições VNI, 2012.
Como fazer com os (não) leitores
Renato Cruz – Senac21
 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/
Antes
Renato Cruz – Senac22
“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/
Depois
Renato Cruz – Senac23
“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/
Os formatos dos links
Renato Cruz – Senac24
 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.
Alguns cuidados
Renato Cruz – Senac25
 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.

Fundamentos de webdesing, tecnologia e ubiquidade - 8/4/15

  • 1.
    Fundamentos de webdesign, tecnologiae ubiquidade 8 de abril de 2015
  • 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 é acoisa 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.
  • 5.
  • 6.
  • 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 seremevitadas 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ãoleem 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 RenatoCruz – 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 dasconvençõ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.
    Pirâmide invertida Renato Cruz– Senac12 Fonte: Christopher Schwartz / Wikipédia
  • 13.
    Palavras Renato Cruz –Senac13 “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.
  • 14.
    Webwriting Renato Cruz –Senac14  É “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.
  • 15.
    Interação Renato Cruz –Senac15  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.
  • 16.
    Notícia vira meme RenatoCruz – Senac16
  • 17.
    A culpa édo estagiário Renato Cruz – Senac17
  • 18.
    Seja breve econciso Renato Cruz – Senac18 “Quando acordou, o dinossauro ainda estava lá” – Augusto Monterroso (1959)
  • 19.
    Mas há exceções RenatoCruz – Senac19 A biografia da presidente do Yahoo publicada pela Business Insider poderia ser um pequeno livro.
  • 20.
    Leitura em F RenatoCruz – Senac20 Fonte: Maioli, Lisandra. “Webwriting”. In: Brambilla, Ana. Para entender as mídias sociais – Volume 2. Salvador: Edições VNI, 2012.
  • 21.
    Como fazer comos (não) leitores Renato Cruz – Senac21  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/
  • 22.
    Antes Renato Cruz –Senac22 “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/
  • 23.
    Depois Renato Cruz –Senac23 “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/
  • 24.
    Os formatos doslinks Renato Cruz – Senac24  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.
  • 25.
    Alguns cuidados Renato Cruz– Senac25  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.