Design de InterfacesTendências e práticasAna Migowski | UFRGS | 2012
Eu sou...Arquiteta de InformaçãoUser experience designerComunicadora DigitalMestranda em Comunicaçãoe Informação
Vamos falar sobre:AI,UX,Mobile,Metodologias,Mercado,Tendências,Referências,Cases
Arquitetura de Informação? User Experience Design?
Web 2.0            (O’Reilly)               2006Clássica:                                              Contemporânea:“A ar...
Duas escolas de pensamento        http://www.uxmatters.com/mt/archives/2012/11/information-architectures-two-schools-of-th...
AI   x UX   User Experience            toma a            Arquitetura de            Informação como            sua base e a...
AI   + UX   Organização,            consistência e            crescimento            ordenado devem            ser planeja...
The Elements of User Experience, GARRET, J.J. Disponível em: http://www.jjg.net/elements/pdf/elements_ch02.pdf
http://www.poetpainter.com/thoughts/files/Fundamentals-of-Experience-Design-stephenpa.pdf
http://www.methodbrain.com/posters/dsia-ux-design-practice-verticals.pdf
Mas como issoacontece no dia-a-dia?
Entregáveis de AI e UX1ª: CONCEPÇÃO                       2ª: IMPLEMENTAÇÃORoad Map                            Casos de us...
O que geralmente se faz?1ª: CONCEPÇÃO                       2ª: IMPLEMENTAÇÃORoad Map                            Casos de ...
O que se perde com isso?• Oportunidades de entender o público.• Argumentos no momento de propor  mudanças/melhorias.• A no...
Alguns exemplos(e seus impactos na interface)
PersonasExplicitar os diferentes tipos de usuários quepodem ter contato com o produto e quenecessidades cada um pode ter.M...
http://www.flickr.com/photos/41787770@N04/3853407019/sizes/l/in/photostream/
http://www.flickr.com/photos/41787770@N04/3853407019/sizes/l/in/photostream/
Ecossistema• Entender o comportamento de pessoas que estão  gerenciando informações, compartilhando dados e  construindo c...
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
Jornada de Consumo          Mapa de Experiência• Entender o caminho que diferentes personas  percorrem na experiência com ...
http://experiencematters.files.wordpress.com/2009/03/legowheel.png
http://wireframes.linowski.ca/wp-content/themes/darwin/images/full149.png
http://nform.com/images/experience_map_social_gamer.jpg
Testes de usabilidadeAjudam a identificar se a forma como oproduto foi estruturado permite que o usuárioatinja seus objeti...
http://www.flickr.com/photos/forakerdesign/3657336793/sizes/l/in/photostream/
Recomendações de SEOSEO gera impactos no design e na estratégia doproduto.Preocupações frequentes:O que será o H1?Qual ser...
1. Social Media             6. Internal Linking2. Connect Your Accounts    7. Relevant Content3. Analytics and Tracking   ...
PRINT DOSOFTWARE
PRINT DOSOFTWARE
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/
Análise de AcessibilidadeA forma como o conteúdo está estruturadopermite que usuários com limitações físico-motoras tenham...
http://www2.planalto.gov.br/acessibilidade
Mouse TrackingSemelhante ao Eye Tracking, mas mais baratoe fácil de fazer.Permite aplicar melhorias constantes aoproduto.S...
http://dottech.org/13865/mousepath-track-your-mouse-cursor-wherever-it-goes/
http://dottech.org/13865/mousepath-track-your-mouse-cursor-wherever-it-goes/
Mas precisa de tudo isso?
LEAN UX                         Diagram of the iterative design and critique process. Warfel, Todd Zaki. 2009.            ...
Como isso acontece dentro de   agências e empresas?
Metodologias usadas hojeWaterfall:             Scrum:Modelo de              Time e Stakeholdersprodução               part...
Waterfall
Waterfall   Análise de negócios                  Design             Desenvolvimento                   Teste               ...
Scrum        http://www.scrumprimer.org/
Scrum        http://www.scrumprimer.org/
Nos dois casos o AI ou UX designer tem um papel   super importante.
Tendências(ou quase isso)
Mobile Firsthttp://themes.elmastudio.de/nori/2011/12/12/nori-a-mobile-first-wordpress-theme/mobile-first-img-2/XV
Responsive Web Design             http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
Ciclo de Vida      http://neigrando.files.wordpress.com/2011/07/process_design_thinking1.jpg
Distribuição de conteúdos          http://www.jornaldoempreendedor.com.br/wp-content/uploads/2011/02/inmap.jpeg
LEMBRE-SE SEMPREVOCÊ NÃO É O  USUÁRIO          http://www.jornaldoempreendedor.com.br/wp-content/uploads/2011/02/inmap.jpeg
Design Thinking                            Não foi sempre assim?                                 (Dan Saffer)http://arquit...
USA Today Redesign
Livros
Para se atualizar      arquiteturadeinformacao.com
Referênciashttp://www.uxbooth.com/articles/the-difference-between-ia-and-ux-design/http://www.uxmatters.com/mt/archives/20...
VALEU!  @anamigowskianamigo@gmail.com
Design de Interfaces
Design de Interfaces
Design de Interfaces
Design de Interfaces
Design de Interfaces
Design de Interfaces
Design de Interfaces
Próximos SlideShares
Carregando em…5
×

Design de Interfaces

2.257 visualizações

Publicada em

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

  • Seja o primeiro a comentar

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

×