Design de Interfaces
21 gostaram2,143 visualizações
O documento discute tendências e práticas em design de interfaces. Aborda conceitos como arquitetura da informação, experiência do usuário, metodologias ágeis e o papel dos designers nestes processos. Também apresenta exemplos de técnicas como personas, mapas de experiência e testes de usabilidade que podem melhorar o design centrado no usuário.
Design de Interfaces
- 1. Design de Interfaces Tendências e práticas Ana Migowski | UFRGS | 2012
- 3. Eu sou... Arquiteta de Informação User experience designer Comunicadora Digital Mestranda em Comunicação e Informação
- 5. Arquitetura de Informação? User Experience Design?
- 6. Web 2.0 (O’Reilly) 2006 Clássica: Contemporânea: “A arquitetura de “A arquitetura de informação envolve o informação design da organização, contemporânea refere-se nomenclatura, ao objetivo navegação e de contemporâneo de sistemas de busca para preencher as lacunas de ajudas as pessoas a estratégia e lapsos no encontrar e manejar informações com processo de design e sucesso”. 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
- 9. Duas escolas de pensamento http://www.uxmatters.com/mt/archives/2012/11/information-architectures-two-schools-of-thought.php
- 10. 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/
- 11. AI + UX Organização, consistência e crescimento ordenado devem ser planejados junto com a estratégia.
- 12. The Elements of User Experience, GARRET, J.J. Disponível em: http://www.jjg.net/elements/pdf/elements_ch02.pdf
- 15. Mas como isso acontece no dia-a-dia?
- 16. Entregáveis de AI e UX 1ª: CONCEPÇÃO 2ª: IMPLEMENTAÇÃO Road Map Casos de uso, Documento de Especificação Brainstorm e Mensagens de Sistema Benchmark Análise Heurística Definição das Métricas de Sucesso Teste de Usabilidade Personas Controle de Qualidade (QA) Modelo conceitual Análise de Acessibilidade Blueprint Recomendações de SEO Ecossistema Focus Group Pesquisa Quantitativa Card Sorting Inventário de Conteúdo 3ª:MONITORAMENTO Análise de Tarefas Teste de Usabilidade Mapa do Site Testes A/B Fluxograma Eye Tracking Wireframes Análise de Métricas Protótipos Navegáveis Análise Quantitativa e Qualitativa (análise Storyboards de interface) Mood Boards Jornada de consumo http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
- 17. O que geralmente se faz? 1ª: CONCEPÇÃO 2ª: IMPLEMENTAÇÃO Road Map Casos de uso, Documento de Especificação Brainstorm e Mensagens de Sistema Benchmark Análise Heurística Definição das Métricas de Sucesso Teste de Usabilidade Personas Controle de Qualidade (QA) Modelo conceitual Análise de Acessibilidade Blueprint Recomendações de SEO Ecossistema Focus Group Pesquisa Quantitativa Card Sorting Inventário de Conteúdo 3ª:MONITORAMENTO Análise de Tarefas Teste de Usabilidade Mapa do Site Testes A/B Fluxograma Eye Tracking Wireframes Análise de Métricas Protótipos Navegáveis Análise Quantitativa e Qualitativa (análise Storyboards de interface) Mood Boards Jornada de consumo http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
- 18. 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.
- 19. Alguns exemplos (e seus impactos na interface)
- 20. Personas Explicitar os diferentes tipos de usuários que podem ter contato com o produto e que necessidades cada um pode ter. Mundo ideal: complementar com análise de métricas profundas e saídas de campo/pesquisas etnográficas. http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
- 23. 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
- 26. 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
- 30. Testes de usabilidade Ajudam a identificar se a forma como o produto foi estruturado permite que o usuário atinja seus objetivos sem frustrações e dificuldades. A culpa não é do usuário. Não adianta fazer apenas depois que o projeto foi entregue e o tempo para melhorias acabar. http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
- 34. Recomendações de SEO SEO gera impactos no design e na estratégia do produto. 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
- 35. 1. Social Media 6. Internal Linking 2. Connect Your Accounts 7. Relevant Content 3. Analytics and Tracking 8. Navigation 4. Keyword Research 9. Guest Posting and Networking 5. Easy Sharing 10. Pay Attention to Usability http://www.eugenoprea.com/top-10-seo-tips-and-tricks/
- 38. Teste A/B Permite 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/
- 41. Análise de Acessibilidade A forma como o conteúdo está estruturado permite que usuários com limitações físico- motoras tenham acesso a ele.
- 43. Mouse Tracking Semelhante ao Eye Tracking, mas mais barato e fácil de fazer. Permite aplicar melhorias constantes ao produto. Software free: IOGraph http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
- 46. Mas precisa de tudo isso?
- 47. 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/
- 48. Como isso acontece dentro de agências e empresas?
- 49. Metodologias usadas hoje Waterfall: Scrum: Modelo de Time e Stakeholders produção participam da concepção e “em cascata”, onde desenvolvimento do cada profissional projeto JUNTOS. realiza sua tarefa e passa para o seguinte.
- 50. Waterfall
- 51. Waterfall Análise de negócios Design Desenvolvimento Teste Publicação
- 52. Scrum http://www.scrumprimer.org/
- 53. Scrum http://www.scrumprimer.org/
- 54. Nos dois casos o AI ou UX designer tem um papel super importante.
- 57. Responsive Web Design http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
- 58. Ciclo de Vida http://neigrando.files.wordpress.com/2011/07/process_design_thinking1.jpg
- 59. Distribuição de conteúdos http://www.jornaldoempreendedor.com.br/wp-content/uploads/2011/02/inmap.jpeg
- 60. LEMBRE-SE SEMPRE VOCÊ NÃO É O USUÁRIO http://www.jornaldoempreendedor.com.br/wp-content/uploads/2011/02/inmap.jpeg
- 61. 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
- 63. Livros
- 64. Para se atualizar arquiteturadeinformacao.com