Fundamentos do Webdesign, da Tecnologia e da Inovação - 8/12/2018

Fundamentos do webdesign,
da tecnologia e da inovação
8 de dezembro de 2018

Home Page (I)
Renato Cruz - Senac 2
 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.

Home Page (II)
 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.

Respostas mais importantes
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?

O site da universidade
Fonte: https://xkcd.com/773/

Pirâmide invertida
Fonte: Christopher Schwartz / Wikipédia

Palavras
“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
 É “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
 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

A culpa é do estagiário

Seja breve e conciso
“Quando acordou, o dinossauro
ainda estava lá” – Augusto
Monterroso (1959)

Mas há exceções
 A biografia da ex-presidente
do Yahoo publicada pela
Business Insider poderia ser
um pequeno livro.

Como fazer com os (não) leitores
 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
“Nebraska é cheia de atrações internacionalmente reconhecidas,
que atraem grandes multidões todos os anos, sem exceção. Em
1996, alguns dos lugares mais populares foram Fort Robinson
State Park (355.000 visitantes), 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
“Em 1996, os seis lugares mais visitados de Nebraska foram:
• 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/

O formato dos links
 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
 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.

Mobilidade
 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.

Mobile First
 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.

CMS
 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.

Algumas opções
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

Como testar
 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.

Faça você mesmo (I)

Faça você mesmo (II)

Exemplos de tarefas
 Crie uma conta de acesso.
 Conecte-se usando uma conta e uma senha existentes.
 Recupere uma senha esquecida.
 Recupere um nome de conta esquecido.

Fundamentos do Webdesign, da Tecnologia e da Inovação - 8/12/2018

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Fundamentos do Webdesign, da Tecnologia e da Inovação - 8/12/2018

Semelhante a Fundamentos do Webdesign, da Tecnologia e da Inovação - 8/12/2018 (20)

Fundamentos do Webdesign, da Tecnologia e da Inovação - 8/12/2018