Design de Interfaces

2.132 visualizações

Publicada em

Slides da palestra realizada na disciplina de Design de Interfaces - Fabico/UFRGS, em 11/2012.

Design de Interfaces

  1. 1. Design de InterfacesTendências e práticasAna Migowski | UFRGS | 2012
  2. 2. Eu sou...Arquiteta de InformaçãoUser experience designerComunicadora DigitalMestranda em Comunicaçãoe Informação
  3. 3. Vamos falar sobre:AI,UX,Mobile,Metodologias,Mercado,Tendências,Referências,Cases
  4. 4. Arquitetura de Informação? User Experience Design?
  5. 5. Web 2.0 (O’Reilly) 2006Clássica: Contemporânea:“A arquitetura de “A arquitetura deinformação envolve o informaçãodesign da organização, contemporânea refere-senomenclatura, ao objetivonavegação e de contemporâneo desistemas de busca para preencher as lacunas deajudas as pessoas a estratégia e lapsos noencontrar e manejarinformações com processo de design esucesso”. desenvolvimento.” http://uxmatters.com/mt/archives/2011/09/framing-the-practice-of-information-architecture.php http://www.uxmatters.com/mt/archives/2012/11/information-architectures-two-schools-of-thought.php
  6. 6. Duas escolas de pensamento http://www.uxmatters.com/mt/archives/2012/11/information-architectures-two-schools-of-thought.php
  7. 7. AI x UX User Experience toma a Arquitetura de Informação como sua base e a eleva ao próximo nível. http://www.uxbooth.com/articles/the-difference-between-ia-and-ux-design/
  8. 8. AI + UX Organização, consistência e crescimento ordenado devem ser planejados junto com a estratégia.
  9. 9. The Elements of User Experience, GARRET, J.J. Disponível em: http://www.jjg.net/elements/pdf/elements_ch02.pdf
  10. 10. http://www.poetpainter.com/thoughts/files/Fundamentals-of-Experience-Design-stephenpa.pdf
  11. 11. http://www.methodbrain.com/posters/dsia-ux-design-practice-verticals.pdf
  12. 12. Mas como issoacontece no dia-a-dia?
  13. 13. Entregáveis de AI e UX1ª: CONCEPÇÃO 2ª: IMPLEMENTAÇÃORoad Map Casos de uso, Documento de EspecificaçãoBrainstorm e Mensagens de SistemaBenchmark Análise HeurísticaDefinição das Métricas de Sucesso Teste de UsabilidadePersonas Controle de Qualidade (QA)Modelo conceitual Análise de AcessibilidadeBlueprint Recomendações de SEOEcossistemaFocus GroupPesquisa QuantitativaCard SortingInventário de Conteúdo 3ª:MONITORAMENTOAnálise de Tarefas Teste de UsabilidadeMapa do Site Testes A/BFluxograma Eye TrackingWireframes Análise de MétricasProtótipos Navegáveis Análise Quantitativa e Qualitativa (análiseStoryboards de interface)Mood BoardsJornada de consumo http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
  14. 14. O que geralmente se faz?1ª: CONCEPÇÃO 2ª: IMPLEMENTAÇÃORoad Map Casos de uso, Documento de EspecificaçãoBrainstorm e Mensagens de SistemaBenchmark Análise HeurísticaDefinição das Métricas de Sucesso Teste de UsabilidadePersonas Controle de Qualidade (QA)Modelo conceitual Análise de AcessibilidadeBlueprint Recomendações de SEOEcossistemaFocus GroupPesquisa QuantitativaCard SortingInventário de Conteúdo 3ª:MONITORAMENTOAnálise de Tarefas Teste de UsabilidadeMapa do Site Testes A/BFluxograma Eye TrackingWireframes Análise de MétricasProtótipos Navegáveis Análise Quantitativa e Qualitativa (análiseStoryboards de interface)Mood BoardsJornada de consumo http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
  15. 15. O que se perde com isso?• Oportunidades de entender o público.• Argumentos no momento de propor mudanças/melhorias.• A noção de que nem nós, nem o cliente, é o usuário.
  16. 16. Alguns exemplos(e seus impactos na interface)
  17. 17. PersonasExplicitar os diferentes tipos de usuários quepodem ter contato com o produto e quenecessidades cada um pode ter.Mundo ideal: complementar com análise demétricas profundas e saídas decampo/pesquisas etnográficas. http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
  18. 18. http://www.flickr.com/photos/41787770@N04/3853407019/sizes/l/in/photostream/
  19. 19. http://www.flickr.com/photos/41787770@N04/3853407019/sizes/l/in/photostream/
  20. 20. Ecossistema• Entender o comportamento de pessoas que estão gerenciando informações, compartilhando dados e construindo conhecimento colaborativamente por eles mesmos ou em organizações.• Identificar as tecnologias digitais e analógicas que eles utilizam para compartilhar informações e interagir um com o outro significativamente.• Destacar as informações que essas pessoas compartilham e os valores individuais e coletivos que os motivam. http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
  21. 21. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
  22. 22. Jornada de Consumo Mapa de Experiência• Entender o caminho que diferentes personas percorrem na experiência com a marca.• Entender quais são as necessidades, emoções, problemas, desejos e angústias do consumidor em cada etapa dessa experiência. http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
  23. 23. http://experiencematters.files.wordpress.com/2009/03/legowheel.png
  24. 24. http://wireframes.linowski.ca/wp-content/themes/darwin/images/full149.png
  25. 25. http://nform.com/images/experience_map_social_gamer.jpg
  26. 26. Testes de usabilidadeAjudam a identificar se a forma como oproduto foi estruturado permite que o usuárioatinja seus objetivos sem frustrações edificuldades.A culpa não é do usuário.Não adianta fazer apenas depois que o projetofoi entregue e o tempo para melhorias acabar. http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
  27. 27. http://www.flickr.com/photos/forakerdesign/3657336793/sizes/l/in/photostream/
  28. 28. Recomendações de SEOSEO gera impactos no design e na estratégia doproduto.Preocupações frequentes:O que será o H1?Qual será a estratégia de conteúdo?O Google é bem espertinho!Ser amigo de outros sites é ÓTIMO!Distribuir o conteúdo é REQUISITO! http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
  29. 29. 1. Social Media 6. Internal Linking2. Connect Your Accounts 7. Relevant Content3. Analytics and Tracking 8. Navigation4. Keyword Research 9. Guest Posting and Networking5. Easy Sharing 10. Pay Attention to Usability http://www.eugenoprea.com/top-10-seo-tips-and-tricks/
  30. 30. PRINT DOSOFTWARE
  31. 31. PRINT DOSOFTWARE
  32. 32. Teste A/BPermite tirar aquela dúvida sobre“qual a melhor versão”?Baixo custo e ótimos resultados! http://www.eugenoprea.com/top-10-seo-tips-and-tricks/
  33. 33. http://www.eugenoprea.com/top-10-seo-tips-and-tricks/
  34. 34. Análise de AcessibilidadeA forma como o conteúdo está estruturadopermite que usuários com limitações físico-motoras tenham acesso a ele.
  35. 35. http://www2.planalto.gov.br/acessibilidade
  36. 36. Mouse TrackingSemelhante ao Eye Tracking, mas mais baratoe fácil de fazer.Permite aplicar melhorias constantes aoproduto.Software free: IOGraph http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
  37. 37. http://dottech.org/13865/mousepath-track-your-mouse-cursor-wherever-it-goes/
  38. 38. http://dottech.org/13865/mousepath-track-your-mouse-cursor-wherever-it-goes/
  39. 39. Mas precisa de tudo isso?
  40. 40. LEAN UX Diagram of the iterative design and critique process. Warfel, Todd Zaki. 2009. Prototyping: A Practitioner’s Guide. New York: Rosenfeld Media. Disponível em: http://www.flickr.com/photos/rosenfeldmedia/3978302604/in/photostream/
  41. 41. Como isso acontece dentro de agências e empresas?
  42. 42. Metodologias usadas hojeWaterfall: Scrum:Modelo de Time e Stakeholdersprodução participam da concepção e“em cascata”, onde desenvolvimento docada profissional projeto JUNTOS.realiza sua tarefa epassa para oseguinte.
  43. 43. Waterfall
  44. 44. Waterfall Análise de negócios Design Desenvolvimento Teste Publicação
  45. 45. Scrum http://www.scrumprimer.org/
  46. 46. Scrum http://www.scrumprimer.org/
  47. 47. Nos dois casos o AI ou UX designer tem um papel super importante.
  48. 48. Tendências(ou quase isso)
  49. 49. Mobile Firsthttp://themes.elmastudio.de/nori/2011/12/12/nori-a-mobile-first-wordpress-theme/mobile-first-img-2/XV
  50. 50. Responsive Web Design http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
  51. 51. Ciclo de Vida http://neigrando.files.wordpress.com/2011/07/process_design_thinking1.jpg
  52. 52. Distribuição de conteúdos http://www.jornaldoempreendedor.com.br/wp-content/uploads/2011/02/inmap.jpeg
  53. 53. LEMBRE-SE SEMPREVOCÊ NÃO É O USUÁRIO http://www.jornaldoempreendedor.com.br/wp-content/uploads/2011/02/inmap.jpeg
  54. 54. Design Thinking Não foi sempre assim? (Dan Saffer)http://arquiteturadeinformacao.com/2012/04/09/como-mentir-com-designthinking-palestra-de-dan-saffer-em-dublin/#comments
  55. 55. USA Today Redesign
  56. 56. Livros
  57. 57. Para se atualizar arquiteturadeinformacao.com
  58. 58. Referênciashttp://www.uxbooth.com/articles/the-difference-between-ia-and-ux-design/http://www.uxmatters.com/mt/archives/2012/11/information-architectures-two-schools-of-thought.phphttp://www.flickr.com/photos/lukew/7382551602/sizes/o/in/photostream/http://www.flickr.com/photos/samtherocker/127984267/sizes/l/in/photostream/http://argus-acia.com/strange_connections/strange004.htmlhttp://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.htmlhttp://www.slideshare.net/bilsel/waterfall-vs-agile-approach-scrum-framework-and-best-practices-in-software-developmenthttp://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystemhttp://content.ebscohost.com/pdf25_26/pdf/2011/8HJ/01Jan11/57241116.pdf?T=P&P=AN&K=57241116&S=R&D=aph&EbscoContent=dGJyMMvl7ESeprc4yOvqOLCmr0qeqLBSs6u4TbSWxWXS&ContentCustomer=dGJyMPGssk2xqLJNuePfgeyx44Hyhttp://www.slideshare.net/brandriveninnovation/consumer-journey-mappinghttp://arquiteturadeinformacao.com/tag/consumer-journey/http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/http://www.usefulusability.com/24-usability-testing-tools /
  59. 59. VALEU! @anamigowskianamigo@gmail.com

×