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


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?


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?


Vamos então brevemente recapitular o conceito....


http://br.youtube.com/watch?v=sYahB9Ib_SY


“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



celulares

softwares

televisão

A maçaneta da minha casa

A TAL USABILIDADE



telespectadores

ouvintes

internautas

Os motoristas

A TAL USABILIDADE



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



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


É 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


O mundo de quem precisa lavar as mãos é difícil.

O MUNDO É DIFÍCIL...

http://br.youtube.com/watch?v=xdoc4LaTu_Q


O mundo de quem quer sair dos lugares é difícil.


http://br.youtube.com/watch?v=66ShiGK21TA



O mundo de quem quer polivitamínicos também é difícil.


O mundo de quem quer comprar TV por assinatura é difícil.


http://br.youtube.com/watch?v=zG3wCr7_DWw


→ 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


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.


OS ARQUITETOS....

→ Um pouco da sua produção:

Infoestrutura Wireframes


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!


OS DESIGNERS...

→ Um pouco da sua produção:


→ 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


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.


→ 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



Ao digitar uma página inexistente dentro de um domínio existente

COMPORTAMENTO 1:

Página de erro do browser. Pouco atrativa!

O ENCONTRO



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



Formas clássicas indicativas de ação:→ Símbolos de mais e menos.

O ENCONTRO



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



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.



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



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



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



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



Testeiras (headers)→ Além de trazer uma experiência mais agradável em termos visuais, ajuda o usuário a se localizar.

O ENCONTRO



Agrupamento temáticos→ Visando orientar a busca por informações.

O ENCONTRO



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.



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.



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


O DESENCONTRO


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?


O DESENCONTRO

Organização visual→ Para onde ir?


O DESENCONTRO

Scrol→ Dois scrolls verticais?

→ Que confusão é essa?


O DESENCONTRO

Indefinição→ Escolha uma maneira e vá com ela até o fim!


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.


O DESENCONTRO

Perda de navegação→ Depois de selecionar um deles, o usuário perde toda a navegação.


O DESENCONTRO

Visualização→ O Submarino não deixa ordenar por preço.

→ Deixa ordenar por fabricante, por mais vendido, por nome do produto.


O DESENCONTRO

Labels→ “Site index”, neste caso, é o mesmo de “mapa do site”


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.


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.


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


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


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.


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.


CARD SORTING

... para um site


CARD SORTING

... para um aparelho celular da Apple.

http://br.youtube.com/watch?v=RTwfz9x98A8


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.


PARA EVITAR...P

AP

ER

P

RO

TO

TY

PE

4


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


PARA EVITAR...E

YE

T

RA

CK

ING

5


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.


→ 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


OBRIGADO!

↓ Maurício Moreira

↓ [email protected]

↓ [email protected]

12° encontro de webdesign (usabilidade)

Technology