Fundamentos Webdesign Tecnologia Inovação

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

William Gibson
Renato Cruz - Senac 2
“O futuro já está aqui – só não está
muito bem distribuído”

Nas residências brasileiras
33.2%
40.5%
46.2%
69.2%
93.3%
97.1%
Telefone fixo
PC conectado
PC
Rádio
Celular
TV
Fonte: IBGE

Acesso à internet
35%
42%
44% 46%
49%
51%
55%
58%
65%
67%
2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
Fonte: IBGE/Cetic.br/Teleco

Tipos de acesos em casa
64%
25%
1%
10%
Fixo
Móvel
Discado
Não sabe
Fonte: Cetic.br

Celular por tecnologia
11%
26%
54%
9%
2G
3G
4G
Term. Dados
Fonte: Anatel/Teleco

O que é usabilidade
“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
Fonte: Os Simpsons, “Oh Brother, Where Art Thou?”, Temporada 2, Episódio 15, 16 fev. 1991.

Design como fracasso
Fonte: PETROSKI, Henry. The evolution of useful things. New York: Vintage Books, 1992, Loc. 529.
“(...) requisitos de design estão
sempre em conflito e, dessa forma,
não podem ser conciliados: todos
projetos de objetos são fracassados
de alguma maneira, seja por
desrespeitarem um ou outro
requisito ou por serem uma
transigência, o que sempre implica
num grau de fracasso.”

Erros milkshake

Qual é a coisa mais importante?
“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 Wave

Perguntas a serem evitadas
 Onde estou?
 Por onde devo começar?
 Onde eles colocaram o ______?
 Quais as coisas mais importantes nesta página?
 Por que eles deram este nome a isto?

Obviedades
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.

As pessoas não leem as páginas
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New
Riders, 2013.

Leitura em F
Fonte: Maioli, Lisandra. “Webwriting”. In: Brambilla, Ana. Para entender as mídias sociais – Volume 2. Salvador: Edições
VNI, 2012.

Hierarquia visual clara
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
Fonte: KRUG, Steve. Don't Make Me
Think, Revisited: A Common Sense
Approach to Web Usability. San
Francisco: New Riders, 2013.

Convenções
Fonte: KRUG, Steve. Don't
Make Me Think, Revisited: A
Common Sense Approach to
Web Usability. San Francisco:
New Riders, 2013.

Não exagere nas opções
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New Riders, 2013.

Opções mais simples

Tipos de usuários
 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.

Como funciona a navegação

Nomes de páginas
 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 da 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”.

Você está aqui

Migalhas de pão

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

Teste do porta-malas
 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?

Fundamentos Webdesign Tecnologia Inovação

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Fundamentos Webdesign Tecnologia Inovação

Semelhante a Fundamentos Webdesign Tecnologia Inovação (20)

Fundamentos Webdesign Tecnologia Inovação