Programação e Designer para WEB

1

Programação e Designer

WEB

para WEB

Usabilidade

Prof. Rodrigo Rocha

prof.rodrigorocha@yahoo.com

Porque se preocupar com a web

 público extremamente grande

• cada dia cresce mais

 gerador de negócios

 ferramenta de marketing

i

“f

t ” d

it

 maior “ferramenta” de muitas pessoas

2

Sucesso

 Três elementos principais em um website

• nome da empresa, logo

 canto esquerdo superior

• um-click para te levar novamente a homepage principalum click para te levar novamente a homepage principal • pesquisa

 canto direito superior (preferencialmente)

 Muito a dizer em pouco tempo

• tempo gasto lendo informações no site (primeira visita)

 usuários experientes com web 25s  usuários inexperientes 35s

• 30 segundos para dar o recado ??

 que site ele está visitando  benefícios que a empresa oferece

 algo sobre a organização, novidades/lançamentos e novos serviços  suas opções (escolhas) e como obter mais informações sobre elas

• adulto lê em média de 200 a 300 palavras por minuto

Scrolling

3

Páginas internas

 usuário gasta mais tempo lendo as páginas internas do site do que a primeira página

 Cerca de um minuto na página interna

• gasta mais tempo no conteúdo do que na navegação • colocar os links no conteúdo

Encontrando seu site

 88% das pessoas chegam a sites através de buscadores  links em buscadores

• organicos: “naturalmente” indexados • patrocinados: aparecem primeiro na busca

93% d á i t 1º li k d lt d d i

 93% dos usuários entram no 1º link do resultado da pesquisa

4

razões para melhorar

 Se você não “refinar” os termos do site

(usados para achá-lo em pesquisa), o tráfego

irá diminuir

irá diminuir

 Melhores chances de encontrar seu site –

vantagem competitiva

 Melhora a percepção do status da empresa

pelo usuário

Scrolling

 maioria dos usuários tem

“aversão” ao scroll

 estudo

5

Design e usabilidade

 Padrões

• > 80% websites seguem um padrão • usuário espera seguir um padrão

• não se dá ao trabalho de aprender um outro método de navegação quando já está no site

quando já está no site

 Convenção

• 50% à 79% esperam convenções padrões

 ex: botão de pag.inicial, contato, sobre a empresa, etc.

 Confusão

• o usuário não sabe o que esperar

 Razões para padronizar

• o usuário sabe quais características o espera • o usuário sabe quais características o espera • sabe como aparecerão na tela

• sabe onde estas características estão na tela • sabe o que está característica fará

• não precisa ficar em dúvida quanto ao elemento “novo/estranho” • não se perde

• não tem surpresas desagradáveis

Melhorando as informações

 muito texto

•

assusta o usuário

•

não será lido totalmente

•

não será lido totalmente

 3 dicas para melhorar a comunicação

•

Garantir que a descrição dos links e categorias

descrevem realmente o que o usuário irá

encontrar

•

Não usar apelidos ou nomes derivados do

slogan

 Ex: RodrigoHome, RodrigoMail, RodrigoLink

6

Arrumando a cozinha....

 Problemas comuns que deverão ser arrumados

• links não mudam de cor quando são visitados

exceção quando design é orientado a comandos

• falta de funcionalidade voltar

• falta de funcionalidade voltar

botão / link voltar

“sumir” com o voltar do browse

• abertura de novas janelas do browse

interrompe o padrão de navegação polui a tela do usuário

restringe o usuário a voltar em páginas visitadas “desaparece” a tela que o usuário estava interagindo

faz “parecer” que o link não está funcionando (e na verdade a página abriu em outro browse)

exceção

– outros tipos de arquivos ex: pdf

» melhora até para o usuário salvar o documento – quando avisa o usuário que outra janela irá se abrir

Arrumando a cozinha....

 pop-up

• ofensa ao usuário

• é tipo como um grande vilão

7

 elementos do design não “parecem sérios”

• transparece “confusão” da empresa

 violações no padrão www

 violações no padrão www

• regras básicas

 conteúdos vazios e link falhos

• “buracos”

• links errados

links errados

 conteúdo denso e texto cansativo

Impactos da tecnologia

 velocidade baixa  frames

• problemas de bookmark • impressão difícil

• interfere nos “spiders” de buscap

 flash

• encoraja animação

• barra o usuário de escolher seu “caminho”

• muitos controles personalizados (barras, scroll, etc...)

 busca com pouca relevância

• busca com muitos resultados “inúteis”

 Multimídia e vídeos

• impressão de congelamentop g

 layouts fixos

• usuário não gosta de das scroll na horizontal • técnica “pergunte a um adolescente”

 um método de testar tendências e layouts

 incompatibilidade

8

Problemas do webdesigner

 plug-ins e tecnologias de terceiros

• usuário se nega a instalar plug-ins • não forçar o usuário a usar a tecnologia

 interface 3d

interface 3d

• tela é 2d

• mouse é controlado em 2d

 design “enfeitado”

• movimento, luzes piscando, botões animados

 splash screen

• não trazem informações • atrasam os usuários

 scroll automático de texto

• controle horrível para o usuário

 não saber quem está por trás

• processo de registro no site sem saber quem é a empresa • forçar o usuário a se registrar

problemas do webdesigner

 palavras modificadas

• exemplo: 4gu4, macmenu, maclink, macinformações

 conteúdo desatualizado

• impressão de página velhaimpressão de página velha • informações ultrapassadas

 entrar no website inconscientemente

• deverá ser natural o usuário entrar no site • exemplo: extranet, intranet

 pedir informações pessoais em “hora errada”

• Quando você conhece alguém na balada, você pergunta cpf, rg, nome

d ô d f ili ????

da avô, renda familiar ????

 múltiplos sites

• empresas lançam vários sites com nomes diferentes (devido ao serviço prestado). Confunde o usuário.

 páginas órfãs

9

Arrumando pelas falhas

 pesquisar os pontos falhos no seu website

 priorizar

 5 maiores problemas

Pesquisa

 algumas soluções

• adquirir software de busca • criá-lo baseado nos mais

conhecidos e funcionais • melhorar as páginas de seu

site para trabalhar melhor com os mecanismos de busca

 o que o usuário espera

• caixa para digitar • botão escrito “buscar”

• lista de resultados ordenada e • lista de resultados ordenada e

10