12° Encontro de WebDesign (usabilidade)
-
Upload
maumoreira -
Category
Technology
-
view
2.002 -
download
0
description
Transcript of 12° Encontro de WebDesign (usabilidade)
Usabilidade: visão e processo para implementar projetos com foco no usuário
UsabilidadeVisão e processo para implementar projetos com foco no usuário
Usabilidade: visão e processo para implementar projetos com foco no usuário
Por que propusemos tratar do tema Usabilidade neste encontro?
→ Ela foi revisitada?
→ Suas formulações teóricas não fazem mais sentido?
→ Descobrimos que Jakob Nielsen é um estudioso ultrapassado?
→ A web 2.0 implodiu os principais conceitos da disciplina?
USABILIDADE: de novo esse tema?
Usabilidade: visão e processo para implementar projetos com foco no usuário
NADA DISSO JUSTIFICA!
→ O motivo que nos traz aqui para falar um pouco mais sobre o tema é o fato de a Internet ser considerada, cada vez mais, um ambiente de relacionamento e comunicação para as mais diversas audiências.
→ E isto aponta que:
↓ A disciplina precisa ser considerada no desenvolvimento de projetos com uma atenção jamais vista!
USABILIDADE: de novo esse tema?
Usabilidade: visão e processo para implementar projetos com foco no usuário
Vamos então brevemente recapitular o conceito....
Usabilidade: visão e processo para implementar projetos com foco no usuário
http://br.youtube.com/watch?v=sYahB9Ib_SY
Usabilidade: visão e processo para implementar projetos com foco no usuário
“A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.”
A TAL USABILIDADE
Usabilidade: visão e processo para implementar projetos com foco no usuário
“A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.”
celulares
softwares
televisão
A maçaneta da minha casa
A TAL USABILIDADE
Usabilidade: visão e processo para implementar projetos com foco no usuário
“A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.”
telespectadores
ouvintes
internautas
Os motoristas
A TAL USABILIDADE
Usabilidade: visão e processo para implementar projetos com foco no usuário
“A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.”
Hora de ler meus e-mails Acompanhar o
sobe e desce da Bolsa de Valores
Chegar ao vigésimo andar de elevador
A TAL USABILIDADE
Usabilidade: visão e processo para implementar projetos com foco no usuário
“A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.”
Comprei os ingressos com antecedência pela internet. É baba, vai lá.
Esse mapa do metrô não ajuda em nada. E agora, não sei falar japonês?!
Filho, como eu faço pra esse celular parar de tocar?
A TAL USABILIDADE
Usabilidade: visão e processo para implementar projetos com foco no usuário
É por isso que os profissionais que desenvolvem produtos interativos (e eles estão ao nosso redor a todo instante) precisam ter o foco na necessidade do usuário:
→ Em seu jeito de agir
→ Seus hábitos adquiridos ao longo do tempo
→ A sua herança comportamental
→ O que eles querem/esperam da vida
Mas nem sempre nossos “usuários” são bem cuidados. Por essas e outras, eu digo:
→ O mundo é difícil de usar
A TAL USABILIDADE
Usabilidade: visão e processo para implementar projetos com foco no usuário
O mundo de quem precisa lavar as mãos é difícil.
O MUNDO É DIFÍCIL...
http://br.youtube.com/watch?v=xdoc4LaTu_Q
Usabilidade: visão e processo para implementar projetos com foco no usuário
O mundo de quem quer sair dos lugares é difícil.
O MUNDO É DIFÍCIL...
http://br.youtube.com/watch?v=66ShiGK21TA
Usabilidade: visão e processo para implementar projetos com foco no usuário
O MUNDO É DIFÍCIL...
O mundo de quem quer polivitamínicos também é difícil.
Usabilidade: visão e processo para implementar projetos com foco no usuário
O mundo de quem quer comprar TV por assinatura é difícil.
O MUNDO É DIFÍCIL...
http://br.youtube.com/watch?v=zG3wCr7_DWw
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Para implementar projetos com foco no interesse do usuário e que leve em consideração boas práticas de usabilidade é importante o alinhamento entre 2 profissionais.
ATERRISANDO NA WEB...
Os arquitetos de informação Os designers
Usabilidade: visão e processo para implementar projetos com foco no usuário
OS ARQUITETOS....
→ Pegam briefings com cliente e entram na dinâmica de seus produtos e serviços.
→ São responsáveis por organizar os conteúdos.
→ O arquiteto é quem veste a fantasia do usuário prevendo seu comportamento de navegação.
→ Ele monta árvores de navegação (info-estruturas), esboços gráficos da página (wireframes) e fluxogramas de processos.
→ Em seu desktop sempre estão abertos o Visio, o PowerPoint, o Mind Manager.
→ É ele quem entrega ao designers páginas que vão precisar ser desenhadas.
Usabilidade: visão e processo para implementar projetos com foco no usuário
OS ARQUITETOS....
→ Um pouco da sua produção:
Infoestrutura Wireframes
Usabilidade: visão e processo para implementar projetos com foco no usuário
OS DESIGNERS...
→ São repletos de referências visuais.
→ Têm o papel de traduzir visualmente as estratégias digitais do cliente, seja em um site, hotsite, campanha.
→ Definem conceitos de imagens, tipologias, texturas e grafismos.
→ Trabalham ora com referências rígidas de seus clientes (o que muitas vezes gera um certo grau de insatisfação), ora com liberdade total (o job que todos querem!).
→ Na sua mesa, é fácil encontrar uma tablet pra desenhar.
→ No desktop, o Photoshop, o Flash, o Ilustrator, às vezes o 3D Studio Max.
→ Às vezes, o Second Life!
Usabilidade: visão e processo para implementar projetos com foco no usuário
OS DESIGNERS...
→ Um pouco da sua produção:
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ E é do encontro entre estes profissionais que nasce as implementações de Usabilidade. Juntos, eles têm a missão de promover:
↓ Facilidade de aprendizado - o usuário rapidamente consegue explorar o sistema e realizar suas tarefas;
↓ Eficiência de uso - tendo aprendido a interagir com o sistema, o usuário atinge níveis altos de produtividade na realização de suas tarefas;
↓ Facilidade de memorização - após um certo período sem utilizá-lo, o usuário não freqüente é capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele;
↓ Baixa taxa de erros - o usuário realiza suas tarefas sem maiores transtornos e é capaz de recuperar erros, caso ocorram;
↓ Satisfação subjetiva - o usuário considera agradável à interação com o sistema e se sente subjetivamente satisfeito com ele.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
O ENCONTRO→ Quando esse encontro traz bons furtos:
Comportamento de menus:→ Uma aplicação para demonstrar que clique vai levar a página interna (>>)
→ Na outra aplicação (com marcador) fica demonstrado o comportamento de sub-menu (>)
→ Além disso o marcador recebe uma diferenciação de indicação
→ E sub-itens apresentados ganham BG escurecido.
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Utilização de ALT’s como forma de:→ Complementar o label disponível
→ Oferecer uma espécie de preview ao que vai ser encontrado
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Ao digitar uma página inexistente dentro de um domínio existente
COMPORTAMENTO 1:
Página de erro do browser. Pouco atrativa!
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Ao digitar uma página inexistente dentro de um domínio existente
COMPORTAMENTO 2:
Maior receptividade. Possibilidade de novos caminhos de navegação e interesse.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Formas clássicas indicativas de ação:→ Símbolos de mais e menos.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Mecanismo de paginação:→ Clara identificação de:
→ páginas existentes (4)
→ Quantidade de itens (214)
→ Botões de próximo e anterior
→ “Over” no botão uma vez que o usuário faz uma determinada ação.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
O ENCONTRO→ Quando esse encontro traz bons furtos:
Utilização de ícones:→ PONTO POSITIVO:
→ Quando as identificações são de uso popular
→ PONTO NEGATIVO:
→ Ao adotar uma linha visual amparada na criação de ícones, e se começa a expandir para a invenção de formas para os mais diversos temas.
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Navegação por abas→ Bastante positivo para facilitar a visualização de conteúdos numa mesma página.
→ Plataformas desenvolvidas em AJAX permitem que o usuário não carregue a página inteira a cada clique.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Consistência e padrões→ Elementos visuais padronizados ao longo de todo o site, bem como de toda as linhas de produtos da marca corporativa.
↓ Menus, Destaques, Brand Image, Padrão de links, Marcadores ect
→ Diminui a curva de aprendizagem do usuário
→ Garante experiência positiva de acessos futuros
homepage
Ferramentas elétricas
Tecnologia automotiva
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Títulos e boxes→ A marca-mãe em primeiro plano agregando a ela o nome do serviço/produto a ser apresentado.
→ Garante uniformidade ao longo de toda a navegação.
→ Para o usuário fica “claro” o que são os destaques do site.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Identificação por cores→ Além do menu identificado por cores, o Globo.com traz seus destaques relacionados às áreas também na mesma cor.
→ Com o tempo, o usuário se acostuma com o tom de cada área e se movimenta melhor pelo site.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Testeiras (headers)→ Além de trazer uma experiência mais agradável em termos visuais, ajuda o usuário a se localizar.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Agrupamento temáticos→ Visando orientar a busca por informações.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
O ENCONTRO→ Quando esse encontro traz bons furtos:
Busca por Cloud Tags→ Para o usuário que deseja fazer uma busca de menor foco, as cloud tags permitem que ele obtenha um overview do que é mais popular dentro de um determinado tema.
Usabilidade: visão e processo para implementar projetos com foco no usuário
O ENCONTRO→ Quando esse encontro traz bons furtos:
Dashboard→ Aplicações de novas tecnologias requerem uma nova curva de aprendizado nova.
→ Uma vez aprendidas, estes novos features só trazem ganhos para os usuários, uma vez que permitem a personalização de sites.
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ Quando esse encontro traz bons furtos:
Google Desktop→ Os documentos vão sendo apresentados a cada nova letra digitada.
→ Permite fazer relações que nem mesmo o usuário imaginasse que pudesse ser feita.
O ENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Agrupamento lógico→O Atendimento on-line ao lado do Crédito parcelado? Por que?
→E essa distância das ações até o footer?
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Organização visual→ Para onde ir?
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Scrol→ Dois scrolls verticais?
→ Que confusão é essa?
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Indefinição→ Escolha uma maneira e vá com ela até o fim!
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Tela de resposta→ ao digitar uma palavra-chave na busca e clicar "enter", o usuário vê uma resposta sobre login e senha, referente a outro campo de preenchimento.
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Perda de navegação→ Depois de selecionar um deles, o usuário perde toda a navegação.
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Visualização→ O Submarino não deixa ordenar por preço.
→ Deixa ordenar por fabricante, por mais vendido, por nome do produto.
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Labels→ “Site index”, neste caso, é o mesmo de “mapa do site”
Usabilidade: visão e processo para implementar projetos com foco no usuário
O DESENCONTRO
Formulários→ o usuário tem que usar a tecla tab ou clicar com o mouse para mudar de campo no preenchimento da data.
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...
PA
PE
R
PR
OT
OT
YP
E
EY
E
TR
AC
KIN
G
CA
RD
S
OR
TIN
G
TE
ST
E D
E
US
AB
ILID
AD
E
AN
ÁL
ISE
H
EU
RÍS
TIC
A
1 2 3 4 5
→ Com a profissionalização da disciplina e a descoberta de sua importância, o mercado desenvolveu produtos para medir a satisfação do usuário em termos de facilidade de acesso ao site.
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...A
NÁ
LIS
E
HE
UR
ÍST
ICA
1
→ Formuladas em 1993 por Jakob Nielsen, este conjunto de descobertas são ainda hoje fundamentais para se identificar falhas de usabilidade.
→ Em geral, este teste é feito por especialistas no assunto, e listam uma série de problemas identificadas em grau de importância.
↓ Construir diálogos simples e naturais
↓ Falar a linguagem do usuário
↓ Minimizar a necessidade de memorização do usuário
↓ Manter a consistência
↓ Oferecer feedback
↓ Identificar claramente as “saídas”
↓ Oferecer atalhos
↓ Elaborar boas mensagens de erro
↓ Evitar a ocorrência de erros
↓ Prover ajuda e documentação de apoio
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...T
ES
TE
DE
U
SA
BIL
IDA
DE
2
→ Podem ser realizados em diversas circunstâncias:
↓Teste de usabilidade presencial individual
↓Teste de usabilidade presencial em grupo
↓Teste de usabilidade via telefone
↓Teste de usabilidade via chat
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...T
ES
TE
DE
U
SA
BIL
IDA
DE
2
→ Como se dá:
↓ Entrevistador apresenta cenário e tarefas.
↓ Usuários discutem melhor forma para realizar atividades propostas.
↓ Observador faz anotações e registra comentários.
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...C
AR
D
SO
RT
ING
3
→ O processo é feito geralmente antes do início das atividades de Arquitetura de Informação.
→ Os pesquisados são convidados a montarem suas árvores de navegação.
→ Constroem de forma a facilitar o acesso à informação desejada.
→ Considerado altamente eficaz na relação custo x benefício.
Usabilidade: visão e processo para implementar projetos com foco no usuário
CARD SORTING
... para um site
Usabilidade: visão e processo para implementar projetos com foco no usuário
CARD SORTING
... para um aparelho celular da Apple.
http://br.youtube.com/watch?v=RTwfz9x98A8
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...P
AP
ER
P
RO
TO
TY
PE
4
→ O teste é feito ainda em estágio de wireframes.
→ As páginas impressas são submetidas aos usuários, que registram suas opiniões sobre a formatação das mesmas.
→ Ou, ainda, é possível disponibilizar a ele “elementos de página” e solicitar que o próprio faça a montagem.
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...P
AP
ER
P
RO
TO
TY
PE
4
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...P
AP
ER
P
RO
TO
TY
PE
4
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...P
AP
ER
P
RO
TO
TY
PE
4
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...E
YE
T
RA
CK
ING
5
→ Certamente, o tipo de teste de maior investimento.
→ Mediante tarefas oferecidas ao usuário, ele observa o site com tendo o movimento de seus olhos monitorados.
→ Alta eficiência!
→ Algumas conclusões dos estudos (modelo F):
↓ Usuário primeiro lê um movimento horizontal, geralmente a parte de conteúdo superior.
↓ Próximo, usuários descem um pouco e lêem o segundo movimento horizontal
↓ Em seguida, scaneiam o conteúdo da esquerda em um movimento vertical
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...E
YE
T
RA
CK
ING
5
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...E
YE
T
RA
CK
ING
5
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...E
YE
T
RA
CK
ING
5
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...E
YE
T
RA
CK
ING
5
Usabilidade: visão e processo para implementar projetos com foco no usuário
PARA EVITAR...E
YE
T
RA
CK
ING
5
→ Algumas recomendações:
↓ Usuários não lêem seu texto inteiramente palavra-por-palavra. Leitura exaustiva é rara!
↓ Os dois primeiros parágrafos devem conter informações mais importantes
↓ Técnica da pirâmide invertida: Inicie cabeçalhos e parágrafos com informações chaves que conduza usuários a escanear verticalmente o conteúdo.
Usabilidade: visão e processo para implementar projetos com foco no usuário
→ http://www.guilhermo.com/
→ http://tadificil.wordpress.com/
→ http://www.dontclick.it/
→ http://www.usability.com.br/usabilidade.html
→ http://www.usabilidoido.com.br/
→ http://www.boxesandarrows.com/
ALGUNS LINKS
Usabilidade: visão e processo para implementar projetos com foco no usuário
OBRIGADO!
↓ Maurício Moreira