12 Encontro de WebDesign (usabilidade)

  • Published on
    19-May-2015

  • View
    1.997

  • Download
    0

DESCRIPTION

Apresentao sobre usabilidade no 12 Encontro de WebDesign. A partir de cases de sucesso e insucesso, abordamos os principais fundamentos da disciplina.

Transcript

  • 1. Usabilidade Viso e processo para implementar projetos com foco no usurio

2.

  • Por que propusemos tratar do tema Usabilidade neste encontro?
    • Ela foi revisitada?
    • Suas formulaes tericas no 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? 3.

    • 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 comunicao para as mais diversas audincias.
    • E isto aponta que:
      • A disciplina precisa ser considerada no desenvolvimento de projetos com uma ateno jamais vista!

USABILIDADE:de novo esse tema? 4.

    • Vamos ento brevemente recapitular o conceito....

5. http://br.youtube.com/watch?v=sYahB9Ib_SY 6. A capacidade de um sistema interativo oferecer a um usurio em um determinado contexto de operao a realizao de tarefas de maneira eficaz, eficiente e agradvel. A TAL USABILIDADE 7. A capacidade de umsistema interativooferecer a um usurio em um determinado contexto de operao a realizao de tarefas de maneira eficaz, eficiente e agradvel. celulares softwares televiso A maaneta da minha casa A TAL USABILIDADE 8. A capacidade de um sistema interativo oferecera um usurioem um determinado contexto de operao a realizao de tarefas de maneira eficaz, eficiente e agradvel. telespectadores ouvintes internautas Os motoristas A TAL USABILIDADE 9. A capacidade de um sistema interativo oferecer a um usurio em um determinadocontexto de operaoa realizao de tarefas de maneira eficaz, eficiente e agradvel. Hora de ler meus e-mails Acompanhar o sobe e desce da Bolsa de Valores Chegar ao vigsimo andar de elevador A TAL USABILIDADE 10. A capacidade de um sistema interativo oferecer a um usurio em um determinado contexto de operao a realizao de tarefas demaneira eficaz, eficiente e agradvel . Comprei os ingressos com antecedncia pela internet. baba, vai l. Esse mapa do metr no ajuda em nada. E agora, no sei falar japons?! Filho, como eu fao pra esse celular parar de tocar? A TAL USABILIDADE 11.

  • por isso que os profissionais que desenvolvem produtos interativos (e eles esto ao nosso redor a todo instante) precisam ter o foco na necessidade do usurio:
    • Em seu jeito de agir
    • Seus hbitos adquiridos ao longo do tempo
    • A sua herana comportamental
    • O que eles querem/esperam da vida
  • Mas nem sempre nossos usurios so bem cuidados. Por essas e outras, eu digo:
    • O mundo difcil de usar

A TAL USABILIDADE 12.

    • O mundo de quem precisa lavar as mos difcil.

O MUNDO DIFCIL... http://br.youtube.com/watch?v=xdoc4LaTu_Q 13.

    • O mundo de quem quer sair dos lugares difcil.

O MUNDO DIFCIL... http://br.youtube.com/watch?v=66ShiGK21TA 14. O MUNDO DIFCIL...

    • O mundo de quem quer polivitamnicos tambm difcil.

15.

    • O mundo de quem quer comprar TV por assinatura difcil.

O MUNDO DIFCIL... http://br.youtube.com/watch?v=zG3wCr7_DWw 16.

  • Para implementar projetos com foco no interesse do usurio e que leve em considerao boas prticas de usabilidade importante o alinhamento entre 2 profissionais.

ATERRISANDO NA WEB... Os arquitetos de informao Os designers 17. OS ARQUITETOS....

  • Pegam briefings com cliente e entram na dinmica de seus produtos e servios.
  • So responsveis por organizar os contedos.
  • O arquiteto quem veste a fantasia do usurio prevendo seu comportamento de navegao.
  • Ele monta rvores de navegao (info-estruturas), esboos grficos da pgina (wireframes) e fluxogramas de processos.
  • Em seu desktop sempre esto abertos o Visio, o PowerPoint, o Mind Manager.
  • ele quem entrega ao designers pginas que vo precisar ser desenhadas.

18. OS ARQUITETOS....

  • Um pouco da sua produo:

Infoestrutura Wireframes 19. OS DESIGNERS...

  • So repletos de referncias visuais.
  • Tm o papel de traduzir visualmente as estratgias digitais do cliente, seja em um site, hotsite, campanha.
  • Definem conceitos de imagens, tipologias, texturas e grafismos.
  • Trabalham ora com referncias rgidas de seus clientes (o que muitas vezes gera um certo grau de insatisfao), ora com liberdade total (o job que todos querem!).
  • Na sua mesa, fcil encontrar uma tablet pra desenhar.
  • No desktop, o Photoshop, o Flash, o Ilustrator, s vezes o 3D Studio Max.
  • s vezes, o Second Life!

20. OS DESIGNERS...

  • Um pouco da sua produo:

21.

  • E do encontro entre estes profissionais que nasce as implementaes de Usabilidade. Juntos, eles tm a misso de promover:
    • Facilidade de aprendizado- o usurio rapidamente consegue explorar o sistema e realizar suas tarefas;
    • Eficincia de uso- tendo aprendido a interagir com o sistema, o usurio atinge nveis altos de produtividade na realizao de suas tarefas;
    • Facilidade de memorizao- aps um certo perodo sem utiliz-lo, o usurio no freqente capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele;
    • Baixa taxa de erros- o usurio realiza suas tarefas sem maiores transtornos e capaz de recuperar erros, caso ocorram;
    • Satisfao subjetiva- o usurio considera agradvel interao com o sistema e se sente subjetivamente satisfeito com ele.

O ENCONTRO 22. O ENCONTRO

  • Quando esse encontro traz bons furtos:
  • Comportamento de menus:
  • Uma aplicao para demonstrar que clique vai levar a pgina interna (>>)
  • Na outra aplicao (com marcador) fica demonstrado o comportamento de sub-menu (>)
    • Alm disso o marcador recebe uma diferenciao de indicao
    • E sub-itens apresentados ganham BG escurecido.

23.

  • Quando esse encontro traz bons furtos:
  • Utilizao de ALTs como forma de:
  • Complementar o label disponvel
  • Oferecer uma espcie de preview ao que vai ser encontrado

O ENCONTRO 24.

  • Quando esse encontro traz bons furtos:

Ao digitar uma pgina inexistente dentro de um domnio existente COMPORTAMENTO 1: Pgina de erro do browser. Pouco atrativa! O ENCONTRO 25.

  • Quando esse encontro traz bons furtos:

Ao digitar uma pgina inexistente dentro de um domnio existente COMPORTAMENTO 2: Maior receptividade. Possibilidade de novos caminhos de navegao e interesse. O ENCONTRO 26.

  • Quando esse encontro traz bons furtos:
  • Formas clssicas indicativas de ao:
  • Smbolos de mais e menos.

O ENCONTRO 27.

  • Quando esse encontro traz bons furtos:
  • Mecanismo de paginao:
  • Clara identificao de:
    • pginas existentes (4)
    • Quantidade de itens (214)
    • Botes de prximo e anterior
  • Over no boto uma vez que o usurio faz uma determinada ao.

O ENCONTRO 28. O ENCONTRO

  • Quando esse encontro traz bons furtos:
  • Utilizao de cones:
  • PONTO POSITIVO:
    • Quando as identificaes so de uso popular
  • PONTO NEGATIVO:
    • Ao adotar uma linha visual amparada na criao de cones, e se comea a expandir para a inveno de formas para os mais diversos temas.

29.

  • Quando esse encontro traz bons furtos:
  • Navegao por abas
  • Bastante positivo para facilitar a visualizao de contedos numa mesma pgina.
  • Plataformas desenvolvidas em AJAX permitem que o usurio no carregue a pgina inteira a cada clique.

O ENCONTRO 30.

  • Quando esse encontro traz bons furtos:
  • Consistncia e padres
  • Elementos visuais padronizados ao longo de todo o site, bem como de toda as linhas de produtos da marca corporativa.
    • Menus, Destaques, Brand Image, Padro de links, Marcadores ect
  • Diminui a curva de aprendizagem do usurio
  • Garante experincia positiva de acessos futuros

homepage Ferramentas eltricas Tecnologia automotiva O ENCONTRO 31.

  • Quando esse encontro traz bons furtos:
  • Ttulos e boxes
  • A marca-me em primeiro plano agregando a ela o nome do servio/produto a ser apresentado.
  • Garante uniformidade ao longo de toda a navegao.
  • Para o usurio fica claro o que so os destaques do site.

O ENCONTRO 32.

  • Quando esse encontro traz bons furtos:
  • Identificao por cores
  • Alm do menu identificado por cores, o Globo.com traz seus destaques relacionados s reas tambm na mesma cor.
  • Com o tempo, o usurio se acostuma com o tom de cada rea e se movimenta melhor pelo site.

O ENCONTRO 33.

  • Quando esse encontro traz bons furtos:
  • Testeiras (headers)
  • Alm de trazer uma experincia mais agradvel em termos visuais, ajuda o usurio a se localizar.

O ENCONTRO 34.

  • Quando esse encontro traz bons furtos:
  • Agrupamento temticos
  • Visando orientar a busca por informaes.

O ENCONTRO 35. O ENCONTRO

  • Quando esse encontro traz bons furtos:
  • Busca por Cloud Tags
  • Para o usurio que deseja fazer uma busca de menor foco, ascloud tagspermitem que ele obtenha um overview do que mais popular dentro de um determinado tema.

36. O ENCONTRO

  • Quando esse encontro traz bons furtos:
  • Dashboard
  • Aplicaes de novas tecnologias requerem uma nova curva de aprendizado nova.
  • Uma vez aprendidas, estes novos features s trazem ganhos para os usurios, uma vez que permitem a personalizao de sites.

37.

  • Quando esse encontro traz bons furtos:
  • Google Desktop
  • Os documentos vo sendo apresentados a cada nova letra digitada.
  • Permite fazer relaes que nem mesmo o usurio imaginasse que pudesse ser feita.

O ENCONTRO 38. O DESENCONTRO 39. O DESENCONTRO

  • Agrupamento lgico
  • O Atendimento on-line ao lado do Crdito parcelado? Por que?
  • E essa distncia das aes at o footer?

40. O DESENCONTRO

  • Organizao visual
  • Para onde ir?

41. O DESENCONTRO

  • Scrol
  • Dois scrolls verticais?
  • Que confuso essa?

42. O DESENCONTRO

  • Indefinio
  • Escolha uma maneira e v com ela at o fim!

43. O DESENCONTRO

  • Tela de resposta
  • ao digitar uma palavra-chave na busca e clicar "enter", o usurio v uma resposta sobre login e senha, referente a outro campo de preenchimento.

44. O DESENCONTRO

  • Perda de navegao
  • Depois de selecionar um deles, o usurio perde toda a navegao.

45. O DESENCONTRO

  • Visualizao
  • O Submarino no deixa ordenar por preo.
  • Deixa ordenar por fabricante, por mais vendido, por nome do produto.

46. O DESENCONTRO

  • Labels
  • Site index, neste caso, o mesmo de mapa do site

47. O DESENCONTRO

  • Formulrios
  • o usurio tem que usar a tecla tab ou clicar com o mouse para mudar de campo no preenchimento da data.

48. PARA EVITAR... PAPER PROTOTYPE EYE TRACKING CARD SORTING TESTE DE USABILIDADE ANLISE HEURSTICA 1 2 3 4 5

  • Com a profissionalizao da disciplina e a descoberta de sua importncia, o mercado desenvolveu produtos para medir a satisfao do usurio em termos de facilidade de acesso ao site.

49. PARA EVITAR... ANLISE HEURSTICA 1

  • Formuladas em 1993 porJakob Nielsen , este conjunto de descobertas so ainda hoje fundamentais para se identificar falhas de usabilidade.
  • Em geral, este teste feito por especialistas no assunto, e listam uma srie de problemas identificadas em grau de importncia.
      • Construir dilogos simples e naturais
      • Falar a linguagem do usurio
      • Minimizar a necessidade de memorizao do usurio
      • Manter a consistncia
      • Oferecer feedback
      • Identificar claramente as sadas
      • Oferecer atalhos
      • Elaborar boas mensagens de erro
      • Evitar a ocorrncia de erros
      • Prover ajuda e documentao de apoio

50. PARA EVITAR... TESTE DE USABILIDADE 2

  • Podem ser realizados em diversas circunstncias:
      • Teste de usabilidade presencial individual
      • Teste de usabilidade presencial em grupo
      • Teste de usabilidade via telefone
      • Teste de usabilidade via chat

51. PARA EVITAR... TESTE DE USABILIDADE 2

  • Como se d:
      • Entrevistador apresenta cenrio e tarefas.
      • Usurios discutem melhor forma para realizar atividades propostas.
      • Observador faz anotaes e registra comentrios.

52. PARA EVITAR... CARD SORTING 3

  • O processo feito geralmente antes do incio das atividades de Arquitetura de Informao.
  • Os pesquisados so convidados a montarem suas rvores de navegao.
  • Constroem de forma a facilitar o acesso informao desejada.
  • Considerado altamente eficaz na relao custo x benefcio.

53. CARD SORTING

    • ... para um site

54. CARD SORTING

    • ... para um aparelho celular da Apple.

http://br.youtube.com/watch?v=RTwfz9x98A8 55. PARA EVITAR... PAPER PROTOTYPE 4

  • O teste feito ainda em estgio de wireframes.
  • As pginas impressas so submetidas aos usurios, que registram suas opinies sobre a formatao das mesmas.
  • Ou, ainda, possvel disponibilizar a ele elementos de pgina e solicitar que o prprio faa a montagem.

56. PARA EVITAR... PAPER PROTOTYPE 4 57. PARA EVITAR... PAPER PROTOTYPE 4 58. PARA EVITAR... PAPER PROTOTYPE 4 59. PARA EVITAR... EYE TRACKING 5

  • Certamente, o tipo de teste de maior investimento.
  • Mediante tarefas oferecidas ao usurio, ele observa o site com tendo o movimento de seus olhos monitorados.
  • Alta eficincia!
  • Algumas concluses dos estudos (modeloF ):
    • Usurio primeiro l um movimento horizontal, geralmente a parte de contedo superior.
    • Prximo, usurios descem um pouco e lem o segundo movimento horizontal
    • Em seguida, scaneiam o contedo da esquerda em um movimento vertical

60. PARA EVITAR... EYE TRACKING 5 61. PARA EVITAR... EYE TRACKING 5 62. PARA EVITAR... EYE TRACKING 5 63. PARA EVITAR... EYE TRACKING 5 64. PARA EVITAR... EYE TRACKING 5

  • Algumas recomendaes:
    • Usurios no lem seu texto inteiramente palavra-por-palavra . Leitura exaustiva rara!
    • Os dois primeiros pargrafos devem conter informaes mais importantes
    • Tcnica da pirmide invertida : Inicie cabealhos e pargrafos com informaes chaves que conduza usurios a escanear verticalmente o contedo.

65.

  • 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 66.

    • OBRIGADO!
    • Maurcio Moreira
    • [email_address]
    • [email_address]