usabilidade
origens da usabilidade . 1980
02 . 38
usabilidade = user-friendly
as áreas da psicologia e da ergonomia passam a usar o termo usabilidade como substituto da expressão “user-friendly” (amigável em português), uma vez que máquinas são ferramentas feitas para servir e não para “serem amigas”;
um conjunto de atributos de software relacionado ao esforço necessário para seu uso e para o julgamento individual de tal uso por determinado conjunto de usuários.
fácil de usar . satisfação do usuário
UsaBILidaDE
1. agradabilidade interação estética ou sensitiva entre o produto e o usuário (psicológico);
2. capacidade de entendimento permitir a compreensão direta da informação, por meio de palavras/mensagem, menus, ícones, botões, etc;
3. efetividade atingir os objetivos propostos;
4. facilidade realizar a tarefa no menor tempo predeterminado;
5. flexibilidade limitar a variação de tarefas, além daquelas inicialmente especificadas;
6. habilidade capacidade cognitiva e sonhecimento de informática;
7. necessidade atender aquilo de que realmente o usuário precisa, ter utilidade;
8. satisfação atingir as metas ergonômicas previamente definidas a partir do perfil do usuário.
A não-preocupação com a usabilidade durante o desenvolvimento do projeto, pode acabar resultando em mais trabalho, implicando em aumento de tempo e,
conseqüentemente, em aumento de custos para a empresa. A usabilidade deve estar presente em todas as etapas de desenvolvimento do produto; desde sua
criação até a produção final.
célula-alvo: usabilidade X interface X usuário Schnaider (2006)
Doug Englebart (inventor do mouse) estabelece seu laboratório de pesquisas, Augmentation Research Center,
no Stanford Research Institute (SRI).
Muito dos trabalhos iniciais sobre interfaces gráficas, hipertexto, e interfaces colaborativas foram ali conduzidas.
1963 06 . 38
Primeiro computador pessoal, desenvolvido no Xerox Palo Alto Research Center (PARC)
o primeiro sistema comercial com um editor WYSIWYG, mouse, e interface gráfica.
1973 07 . 38
Interfaces de manipulação direta são apresentadas comercialmente; Xerox Star em 1981 Apple Lisa em 1982
Apple Macintosh 1984 1981
08 . 38
Tim Berners-Lee desenvolve a World Wide Web (WWW) 1991 09 . 38
Interfaces de manipulação direta são apresentadas comercialmente; Xerox Star em 1981 Apple Lisa em 1982
Apple Macintosh 1984 1981
10 . 38
a internet explode em crescimento;
a web é a segunda forma mais popular de acessarmos a internet (a primeira é o e-mail), e é ainda a interface mais utilizada nos dias de hoje.
as empresas entendem rapidamente seu potencial e passam a enxergar a web como uma questão de marketing; uma peça de comunicação!
...hoje em dia ninguém pergunta mais... você tem e-mail?
a pergunta é:
qual é o seu e-mail?
Tim Berners-Lee torna-se diretor do World Wide Web Consortium 1991
x
11 . 38
Donald Norman cunha o termo "user experience” 1993 12 . 38
a internet explode em crescimento;
numa primeira instância, a interface tem que ser aprendida pelo usuário;
o usuário deve adquirir confiança e segurança para entender como será feita a navegação pelo site.
a informação deve ser organizada e apresentada de forma que
o usuário possa rapidamente localizar aquilo que procura!
uSUáRIo IntERfACe 13 . 38
estilos de concepção WebSIteS
o desenho da interface tem como objetivo apresentar o conteúdo do website ao público, criando uma empatia e estimulando a navegação através de metáforas, espaço em tela, forma, cor ou qualquer outro elemento que possa garantir esta navegação.
a interface é a maneira pela qual o usuário navega pelo conteúdo de uma apresentação multimídia interativa.
a informação deve ser organizada e apresentada de forma que o usuário possa rapidamente localizar aquilo que procura!
14 . 38
scroll ou paginação? WebSIteS
jakob nielsen | 1995 “rolagens agora são permitidas”
felipe memória | 2006 “eu acredito em scroll”
tim berners-lee | 1991 inventor da web
15 . 38
se o usuário tiver que scrollar muito ele sai! WebSIteS
deve-se decidir nas etapas preliminares!
usuários mais velhos tendem a rolar a página mais lentamente do que os usuários mais novos;
algumas tarefas que requerem dos usuários recordar onde as informações são encontradas em uma página podem se beneficiar da paginação, enquanto muitas tarefas da leitura se beneficiarem do rolamento;
dica conteúdo principal disponível sem a necessidade de rolagem!
16 . 38
scroll ou paginação?
Fonte: http://www.zenpper.com.br
Fonte: Hotsite Programa Conquista Contax
WebSIteS 17 . 38
scroll ou paginação?
se os designers forem incapazes de se decidir entre a paginação e o rolamento, é melhor fornecer páginas mais curtas do que uma ou duas páginas mais longas!
quando o rolamento é usado, o website deve permitir o rolamento o mais rápido possível;
use páginas de rolamento para compreensão da leitura, mas cuidado com o uso do rolamento horizontal!
WebSIteS 18 . 38
rolagem horizontal WebSIteS X 19 . 38
links WebSIteS
evite sugestões enganadoras para clicar: assegure-se de que os itens não clicáveis não tenham as características que sugerem que são clicáveis;
os símbolos geralmente devem ser combinados com ao menos uma outra característica que sugira a clicabilidade; ex.: efeito rollover
prefira texto para os links, são melhores que as imagens; “dá pra clicar nessa imagem?” não me faça pensar.. (Krug, Steve)
20 . 38
links
dica
deve-se escolher tons que contrastem com o fundo da página e evitar cores que possam ser confundidas com o padrão azul e roxo dos links da internet.
jakob nielsen “links não visitados devem ser inconfundivelmente azuis e links visitados devem ser inconfundivelmente vermelhos ou roxos”
WebSIteS 21 . 38
links WebSIteS 22 . 38
conteúdo WebSIteS
use palavras familiares use palavras que freqüentemente são vistas e ouvidas;
se o conteúdo não fornecer a informação requisitada pelo usuário, o website terá pouco valor mesmo sendo fácil de usar;
se o conteúdo for difícil de entender; o usuário sai!
portanto... ao preparar o conteúdo para um website, evite o uso de palavras difíceis!
se as siglas e as abreviaturas precisarem ser usadas, assegure se de que sejam compreendidas claramente pelos usuários típicos e definidos na página.
23 . 38
dicas para TEXTO WebSIteS
não use para corpo de texto letra maior que 14 pts nem menor que 10;
não configure grandes quantidades de texto em negrito, itálico e maiúsculas;
evite linhas de texto longas, que atravessem toda a janela do browser;
use colunas (na tela linhas curtas são melhores do que linhas longas);
assegure-se do contraste entre letra e fundo: texto preto em fundo branco é o melhor!
use um tipo de letra sem serifa: a verdana é uma das mais usadas;
existem fontes que são instaladas em ambos os sistemas – mac e windows – que você deve usar em suas páginas web e ter a certeza de que ambas as plataformas exibirão como você espera: arial, arial black, comic sans, courier new, impact,
times nem roman, verdana e webdings!
textos justificados ficam mal espacejados e com uma hifenização excessiva, necessitando de um ajuste manual: evite!
24 . 38
3|30
Harmonia Visual
usuário
dica
se um site for difícil de usar, o usuário sai.
se a homepage não for clara o suficiente para mostrar o que a empresa oferece e o que é possível fazer, o usuário sai.
se o usuário se perder, ele também sai.
se demorar pra carregar: sai, sai e sai.
felipe memória “na web, a usabilidade é uma característica necessária para a sobrevivência; é uma mídia em que o usuário tem que ter um comportamento ativo”
UsaBILidADe 26 . 38
resoluções 800x600 1024x768 1280x1024 WebSIteS
1280x1024
1024x768 800x600
Espaço sobrando
Conteúdo especial
Conteúdo principal
27 . 38
resolução x área útil WebSIteS
resolução 800 x 600 área útil aproximada = 778 x 410 limite (3 páginas) = 778 x 1230
resolução 1024 x 768 área útil aproximada = 947 x 512 limite (3 páginas) = 947 x 1536
resolução 1280 x 1024 área útil aproximada = 1020 x 595 limite (3 páginas) = 1020 x 1785
28 . 38
medidas para impressão WebSIteS
para impressão em A4, no máximo (width x height)
paisagem 965 x 670 px
retrato 670 x 965 px
29 . 38
a primeira impressão é a que fica! HomEPaGE
a homepage é a página de entrada do seu site;
é sua única chance de causar uma boa impressão!
as interfaces de navegação precisam ajudar a responder as três perguntas fundamentais dos usuários
“onde estou?” “onde estive?” “onde posso ir?”
30 . 38
crie uma impressão positiva do seu site HomEPaGE
convide os usuários a conhecerem mais profundamente sua estrutura HomEPaGE
comunique a finalidade do website HomEPaGE
oferece chamadas para os itens mais importantes do site HomEPaGE
metáfora visual e pouca quantidade de texto HomEPaGE
HomEPaGE a homepage é uma seção do site
HomEPaGE oferece o serviço essencial do site
usar ou não usar? INntRODuçÃO
tenha a certeza que o usuário dará valor!
encare a introdução como um teaser, um instrumento para estimular a curiosidade do usuário sobre o conteúdo do site;
não ofereça informações concretas na intro, ela serve para gerar curiosidade;
uma boa intro deve durar no máximo 10 segundos;
ofereça a opção de pular a introdução sempre!
ofereça a opção de não ver a introdução no próximo acesso!
38 . 38
