1.
Design de Interfaces
Tendências e práticas
Ana Migowski | UFRGS | 2012

2.
Eu sou...
Arquiteta de Informação
User experience designer
Comunicadora Digital
Mestranda em Comunicação
e Informação

3.
Vamos falar sobre:
AI,
UX,
Mobile,
Metodologias,
Mercado,
Tendências,
Referências,
Cases

4.
Arquitetura de Informação?
User Experience Design?

5.
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

6.
Duas escolas de pensamento
http://www.uxmatters.com/mt/archives/2012/11/information-architectures-two-schools-of-thought.php

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.
AI + UX Organização,
consistência e
crescimento
ordenado devem
ser planejados
junto com a
estratégia.

9.
The Elements of User Experience, GARRET, J.J. Disponível em: http://www.jjg.net/elements/pdf/elements_ch02.pdf

10.
http://www.poetpainter.com/thoughts/files/Fundamentals-of-Experience-Design-stephenpa.pdf

11.
http://www.methodbrain.com/posters/dsia-ux-design-practice-verticals.pdf

12.
Mas como isso
acontece no dia-a-dia?

13.
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

14.
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

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.
Alguns exemplos
(e seus impactos na interface)

17.
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

18.
http://www.flickr.com/photos/41787770@N04/3853407019/sizes/l/in/photostream/

19.
http://www.flickr.com/photos/41787770@N04/3853407019/sizes/l/in/photostream/

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.
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem

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.
http://experiencematters.files.wordpress.com/2009/03/legowheel.png

24.
http://wireframes.linowski.ca/wp-content/themes/darwin/images/full149.png

25.
http://nform.com/images/experience_map_social_gamer.jpg

26.
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

27.
http://www.flickr.com/photos/forakerdesign/3657336793/sizes/l/in/photostream/

28.
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

29.
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/

30.
PRINT DO
SOFTWARE

31.
PRINT DO
SOFTWARE

32.
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/

33.
http://www.eugenoprea.com/top-10-seo-tips-and-tricks/

34.
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.

35.
http://www2.planalto.gov.br/acessibilidade

36.
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

37.
http://dottech.org/13865/mousepath-track-your-mouse-cursor-wherever-it-goes/

38.
http://dottech.org/13865/mousepath-track-your-mouse-cursor-wherever-it-goes/

39.
Mas precisa de tudo isso?

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.
Como isso acontece dentro de
agências e empresas?

42.
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.

43.
Waterfall

44.
Waterfall Análise de negócios
Design
Desenvolvimento
Teste
Publicação

45.
Scrum
http://www.scrumprimer.org/

46.
Scrum
http://www.scrumprimer.org/

47.
Nos dois casos o AI ou UX
designer tem um papel
super importante.

48.
Tendências
(ou quase isso)

49.
Mobile First
http://themes.elmastudio.de/nori/2011/12/12/nori-a-mobile-first-wordpress-theme/mobile-first-img-2/XV

50.
Responsive Web Design
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

51.
Ciclo de Vida
http://neigrando.files.wordpress.com/2011/07/process_design_thinking1.jpg

52.
Distribuição de conteúdos
http://www.jornaldoempreendedor.com.br/wp-content/uploads/2011/02/inmap.jpeg

53.
LEMBRE-SE SEMPRE
VOCÊ NÃO É O
USUÁRIO
http://www.jornaldoempreendedor.com.br/wp-content/uploads/2011/02/inmap.jpeg

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.
USA Today Redesign

56.
Livros

57.
Para se atualizar
arquiteturadeinformacao.com

58.
Referências
http://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.php
http://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.html
http://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.html
http://www.slideshare.net/bilsel/waterfall-vs-agile-approach-scrum-framework-and-best-practices-in-software-development
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
http://content.ebscohost.com/pdf25_26/pdf/2011/8HJ/01Jan11/57241116.pdf?T=P&P=AN&K=57241116&S=R&D=aph&EbscoContent=dGJyMMvl7ESeprc
4yOvqOLCmr0qeqLBSs6u4TbSWxWXS&ContentCustomer=dGJyMPGssk2xqLJNuePfgeyx44Hy
http://www.slideshare.net/brandriveninnovation/consumer-journey-mapping
http://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.
VALEU!
@anamigowski
anamigo@gmail.com