Carregado porAna Migowski
Design de Interfaces
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.
![[Palestra UNICAP] UX Design - Projetando Soluções e Experiências](https://cdn.slidesharecdn.com/ss_thumbnails/palestrauxunicap-140909213939-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Design de Interfaces
- 1. Design de Interfaces Tendênciase práticas Ana Migowski | UFRGS | 2012
- 3. Eu sou... Arquiteta deInformação User experience designer Comunicadora Digital Mestranda em Comunicação e Informação
- 4.
- 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 depensamento 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 ofUser Experience, GARRET, J.J. Disponível em: http://www.jjg.net/elements/pdf/elements_ch02.pdf
- 13.
- 14.
- 15. Mas como isso aconteceno dia-a-dia?
- 16. Entregáveis de AIe 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 geralmentese 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 seperde 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 seusimpactos na interface)
- 20. Personas Explicitar os diferentestipos 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
- 21.
- 22.
- 23. Ecossistema • Entender ocomportamento 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
- 25.
- 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
- 27.
- 28.
- 29.
- 30. Testes de usabilidade Ajudama 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
- 31.
- 34. Recomendações de SEO SEOgera 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/
- 36.
- 37.
- 38. Teste A/B Permite tiraraquela dúvida sobre “qual a melhor versão”? Baixo custo e ótimos resultados! http://www.eugenoprea.com/top-10-seo-tips-and-tricks/
- 40.
- 41. Análise de Acessibilidade Aforma como o conteúdo está estruturado permite que usuários com limitações físico- motoras tenham acesso a ele.
- 42.
- 43. Mouse Tracking Semelhante aoEye 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
- 44.
- 45.
- 46. Mas precisa detudo 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 acontecedentro 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.
- 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 casoso AI ou UX designer tem um papel super importante.
- 55.
- 56.
- 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
- 62.
- 63.
- 64. Para se atualizar arquiteturadeinformacao.com
- 65.
- 66.