Consistência e padrões em interfaces digitais

4,023 views

Published on

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em http://www.eduardobrandao.com/aulas/design-telas/consistencia-e-padroes-em-interfaces-digitais/

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,023
On SlideShare
0
From Embeds
0
Number of Embeds
239
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Consistência e padrões em interfaces digitais

  1. 1. consistência epadrões eminterfaces digitaisEduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e imagens deste documento só é permitida para fins não comerciais,sendo obrigatória a citação da fonte.
  2. 2. O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da Pontifícia Universidade Católica do Rio de Janeiro
  3. 3. consistência e padrõesSem a adoção de padrões de designrazoáveis e coerentes, os usuáriossofrerão de confusão, produtividadereduzida e oportunidade perdida parabeneficiarem-se dos recursos deinformação.Se os usuários encontrarem maisconfusão do que informações úteis,ninguém se beneficiará disso.
  4. 4. consistência e padrõesO sucesso da organização da informaçãoserá determinado por sua eficiência emsatisfazer as expectativas dos usuários.Uma organização lógica permite que osusuários façam suposições corretassobre onde encontrar o que desejam.
  5. 5. consistência e padrõesMétodos coerentes de exibição dainformação lhes permitirá transferir oconhecimento das interfaces familiarespara as telas que não conhecem.Uma estrutura que não seja nem lógicanem previsível irá confundir os usuários,frustrando-os por causa da dificuldade empercorrê-la.
  6. 6. consistência e padrõesLogo, é recomendável que cada tela sigaas convenções de navegação e de layoutdas interfaces mais conhecidas, pois osusuários já estão acostumados com estespadrões.
  7. 7. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton consistência e padrões As vantagens da coerência nosTelas incoerentes do site de padrões de design de interfaces uma mesma instituição são imediatamente óbvias em uma abordagem centrada no usuário e transcendem claramente aos interesses particulares de departamentos, grupos e indivíduos que participam do projeto de desenvolvimento da interface. A falta de padrão é visualmente desagradável para os usuários, além de gerar confusão. As telas parecem um conjunto de páginas remendadas (algumas bem projetadas, outras desastrosas), como meras partes de um sistema que não funciona.
  8. 8. * Fonte: artigo "Usabilidade de interfaces e arquitetura da informação: navegação estrutural", de Felipe Memória“ As pessoas gastam mais tempo em ‘outros’ sites, por isso, tudo que for uma convenção e utilizado na maioria destes ‘outros’ sites será fixado de forma muito forte em suas mentes. ”
  9. 9. consistência e padrõesSeria muito bom se a grande maioria dasinterfaces apresentasse umaconsistência, como por exemplo, aencontrada em programas utilizados naplataforma Windows (que seguiu oexemplo das interfaces do Macintosh).
  10. 10. consistência e padrõesNesses programas, uma série de padrõessão constantemente repetidos, como ositens “File”, “Edit”, “View” e “Window”das barras superiores dos programas, ouatalhos para “copy” (ctrl+c) e“paste” (ctrl+v).
  11. 11. consistência e padrõesEssa consistência facilita o aprendizado eutilização, poupando tempo precioso dosusuários.Se cada software tivesse sua linguagemprópria, as dificuldades seriam muitomaiores.
  12. 12. consistência e padrões
  13. 13. consistência e padrões
  14. 14. consistência e padrões
  15. 15. consistência e padrões
  16. 16. consistência e padrõesCom a padronização do projeto, osusuários entenderão as mensagens commais facilidade.Na internet, por exemplo, essapadronização não existe.Mas, passados alguns anos, certasconvenções já são utilizadas erespeitadas.
  17. 17. * Fonte: artigo "Usabilidade de interfaces e arquitetura da informação: navegação estrutural", de Felipe Memória consistência e padrões busca marca navegação global navegação conteúdo global e contextual local navegação redundante Exemplo de padrão de interface muito utilizado na internet.
  18. 18. exemplo:padrão dos sites daglobo.com
  19. 19. padrão dos sites da globo.com
  20. 20. padrão dos sites da globo.com
  21. 21. padrão dos sites da globo.com
  22. 22. padrão dos sites da globo.com
  23. 23. padrão dos sites da globo.com
  24. 24. exemplo:padrão dos sites daglobosat
  25. 25. padrão dos sites da globosat
  26. 26. padrão dos sites da globosat
  27. 27. padrão dos sites da globosat
  28. 28. padrão dos sites da globosat
  29. 29. padrão dos sites da globosat
  30. 30. padrão dos sites da globosat
  31. 31. padrão dos sites da globosat
  32. 32. padrão dos sites da globosat
  33. 33. padrão dos sites da globosat
  34. 34. exemplo:padrão dos elementosdos sites da globosat
  35. 35. padrão dos elementos dos sites da globosatSite do programa Nós 3. Site da série House.
  36. 36. padrão dos elementos dos sites da globosatSite do programa Nós 3. Site da série House.
  37. 37. padrão dos elementos dos sites da globosatSite do programa A Eliminação. Site da série Heroes.
  38. 38. consistência e padrões em interfaces digitais: referências bibliográficas
  39. 39. referências bibliográficas: livros
  40. 40. referências bibliográficas: livros •  Guia de estilos da web: princípios básicos de design para a criação de web sites Patrick J. Lynch Sarah Horton
  41. 41. referências bibliográficas: artigos
  42. 42. referências bibliográficas: artigos•  Usabilidade de interfaces e arquitetura da informação: navegação•  estrutural•  Felipe Memória•  2º Congresso Internacional de Ergonomia e Usabilidade, Design de Interfaces e Interação Homem-•  Computador (2003)
  43. 43. consistência e padrões em interfaces digitais:sobre o professor
  44. 44. sobre o professor Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da equipe de UX (User eXperience) na área de novas mídias da Globosat, onde desenvolve projetos de sites e aplicativos (smartphones, tablets, smart-TVs, set-top boxes, consoles de games, etc.) para canais de televisão como GNT, SporTV, Multishow, Viva, Gloob, Telecine, Universal Channel, GloboNews, Canal Brasil, MegaPix, SyFy, Futura, PremiereFC, Combate, Sexy-Hot, Off, Muu, Philos, entre outros. É professor em cursos de pós-graduação, em disciplinas correlatas a arquitetura de informação, design de interfaces, usabilidade, interação humano-computador e metodologia de pesquisa. Participa do comitê organizador e do comitê técnico científico de congressos internacionais nas áreas de ergonomia, usabilidade, design de interfaces e interação humano-computador. Trabalhou como arquiteto de informação na Globo.com e como designer de interfaces nas empresas Agência Click, Starmedia, Cadê?, MTEC Informática e Rio Datacentro. Atuou em projetos para Amil, Banco do Brasil, Brasil Telecom, Oi, Petrobras, White Martins, Fundação Planetário, Museu Villa-Lobos, Projeto Portinari, Plaza Shopping Niterói, Pinto de Almeida Engenharia, Decta Engenharia, Programa das Nações Unidas para o Desenvolvimento e Programa de Despoluição da Baía de Guanabara. Publicou diversos trabalhos (entre capítulos de livros, monografias, dissertações e artigos em congressos), concluiu 7 orientações e 38 co-orientações de monografias de alunos de pós-graduação lato sensu e participou de 44 bancas examinadoras em cursos de pós-graduação lato sensu. TITULAÇÃO: mestre em interação humano-computador, especialista em ergonomia e usabilidade e bacharel em desenho industrial, nas habilitações de comunicação visual e projeto de produto.
  45. 45. fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com

×