Arquitetura de Informação e User Experience #Cpbr7 2014
DESIGN DO DIA A DIA
!1
Bianca BrancaleoneMelina AlvesEx-Atrativa Games, Virgula, MMCafé, iG, iThink, Webgoal.
Ex-UX Líder da Insula e NeogamaBBH, iThink, Razorfish.
Bianca Brancaleone
Melina Alves
+ 30 coworkers
Pesquisadores, Filósofos e Psicólogos
Designers de Interação
Redatores; SEM & SEO
Visual Designers
Arquitetos da Informação
Gerentes de Projetos
Sound and VideoDesigners
Arquitetos e Urbanistas
Infografistas
Designers de estratégias
Nymi by Bionym
play
As pessoas gostam isso?
De que forma elas desejam? Envolve aspectos culturais?
Qual a rotina dessas pessoas? E onde encaixar um sistema?
Quando elas acessam é confortável, emociona, compartilha?
Qual a hierarquia das informações em cada necessidade?
O acesso é simplificado?
…
Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência !● Arquitetura da Informação ● Interação Humano Computador ● Design de Interação ● Usabilidade !
http://www.montparnas.com/articles/what-is-user-experience-design/
2006 October 10th, 2006 by Kimmy Paluch Print-Friendly Version
Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência !● Arquitetura da Informação ● Interação Humano Computador ● Design de Interação ● Usabilidade !
http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/
2008 by DAN SAFFER
Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência !● Arquitetura da Informação ● Interação Humano Computador ● Design de Interação ● Usabilidade ● Visual Design ● Arquitetura ● Engenharia ● Design Industrial ● Criação de Conteúdo ● Engenharia Elétrica ● Engenharia Mecânica !!!
http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/
2008 by DAN SAFFER
Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência !• Arquitetura da Informação • Interação Humano Computador • Design de Interação • Ergonomia • Usabilidade • Visual Design • Arquitetura • Engenharia • Design Industrial • Criação de Conteúdo • Engenharia Elétrica • Engenharia Mecânica • Ciência da Computação !http://www.envis-precisely.com
2009|2013 by DAN SAFFER (redesigned by envis precisely GmbH 2009 | 2013
• UXD é um componente essencial para produção e iniciativas em softwares, porque gera cases de negócio mais efetivos !
• Promove engajamento e experiências interativas entre consumidores e negócio, ou entre os negócios das pessoas e seus sistemas de informação !
• Cuida da maneira como as pessoas trabalham, pensam, e consomem informações !
• Estabelece significados mais ricos e comunicação mais colaborativas !
• Reduz frustrações e cria processos mais intuitivos !
• Distingue produtos, serviços e marcas para que possam ganhar mais competitividade !
• Desenvolve sistemas que possam crescer em escala e se adaptar as mudanças que os usuários precisam e com foco em comportamento
ANDERSON, MCREE, John; WILSON; ROBB Wilson; Effective UI: The Art of Building Great User Experience in Software - O’REILLY - 2010
BENEFÍCIOS DE USER EXPERIENCE DESIGN
ESTAMOS CRIANDO PRODUTOS
UX + COMPORTAMENTO
APRENDIZADO/ COMPORTAMENTO
!RELAÇÃO SÓCIO-CULTURAL
!BANCODE REFERÊNCIAS
“Todos os sites, exposições, filmes, informações para montar sua rede de pesquisa, benchmarkinge banco de ideias”
!!!!!
“...linguagens são reveladoras de nossas marcas e das mudanças que somos capazesde empreender…”
!MELO, Eliana; PRADOS, Rosália; GRARCIA, Wilton: Linguagens, tecnologias, culturas: discursos contemporâneos. Ed.Fatash Editora- 2008 - pg. 11 e 135
!!!!
“Comportamentalismo:Psicologia.”
“Froid:
@melinalves #ficaadica
EXPERIÊNCIA REAL
"20
"21
"22
"23
"24
"25
EXPERIÊNCIA DIGITAL OU INTERATIVA
"27
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"28
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"29
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"30
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"31
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"32
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"33
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"34
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"35
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"36
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"37
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"38
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"39
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"40
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"41
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"42
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"43
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"44
“experiência do usuário está cada vez mais próxima da imersão entre soluções digitais e reais”
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"45
Melina Alves PUC-RS - 2012 #Cpbr - 2014
"46
HISTÓRIAS (informações que as pessoas contam que vem carregadas de ideias) - !VALOR PRÁTICO (notícias que podem ser usadas) !PÚBLICO(“built to show, built to grow”) !EMOCIONAIS (“when we care we share”) !TRIGGERS (top of mind, tip of tongue) !CAPITAL SOCIAL (o que faz as pessoas parecerem melhores)
http://www.maximsherstobitov.com/6-secrets-that-make-people-share/#sthash.q80xypc3.dpuf
USER EXPERIENCE DESIGN ponto de vista da Arquitetura da Informação
Os três círculos da Arquitetura de Informação !● Conteúdo (o que vai usado?) ● Contexto (como vai ser usado?) ● Usuário (por quem vai ser usado?) !
http://semanticstudios.com/publications/semantics/000029.php
Arquitetura da Informação
The User Experience Honeycomb !● Útil ● Desejável ● Acessível ● Confiável ● Encontrável ● Utilizável ● Valioso !
http://semanticstudios.com/publications/semantics/000029.php
Diagrama da Experiência do usuário - Do mais ao menos consciente !● Linguagem escrita ● Design gráfico ● Som ● Movimento ● Design da Informação ● Design da Interface ● Design de Interação ● Programação
by JAKOB NIELSEN 1995 http://www.nngroup.com/articles/ten-usability-heuristics
10 Heurítiscas de Nielsen
Feedback
1 - Visibilidade do status do sistema
O sistema deve sempre manter os usuários informados sobre o que está acontecendo, através de feedback apropriado e dentro de um tempo razoável.
Linguagem adequada
2 - Combinação entre o sistema e o mudo real
O sistema deve falar a linguagem do usuário, com palavras, frases e conceitos familiares ao usuário no lugar de termos orientados ao sistema. Siga convenções do mundo real, fazendo as informações aparecerem em uma ordem natural e lógica.
3 - Controle do usuário e liberdadeUsuários sempre escolhem funções erradas e vão precisar de uma “saída de emergência” claramente marcada para sair do estado indesejado sem maiores problemas. Permita desfazer e refazer.
Usuários não devem ter que se preocupar se palavras diferentes, situações ou ações significam a mesma coisa. Siga as convenções.
4 - Consistência e padrões
5 - Prevenção de erroMelhor que ter boas mensagens de erro é ter um design cuidadoso que previne um problema antes de acontecer. Elimine condições de erro ou os conheça e apresente aos usuários uma opção de confirmação antes dele prosseguir com a ação. !“NESSE MUNDO MOBILE, SOMOS TODOS DALTÔNICOS E SOFREMOS MAL DE PARKINSON”Luli Radfahrer Digital Talks RJ - 2013
6 - Reconhecimento é melhor que lembrança
Objetos, ações e opções devem estar visíveis. !O usuário não deve ter que lembrar informação de uma parte do diálogo em outra parte. !Instruções para o uso do sistema devem estar visíveis ou facilmente recuperáveis sempre que necessário.
Reduza a carga de memória do usuário
Atalhos que não são vistos pelos usuários leigos - podem aumentar a velocidade na interação para usuários experientes. Assim, o sistema pode atender tantos os usuários inexperientes como os experientes.
Permita que os usuários configurem ações frequentes.
7 - Flexibilidade e eficiência no usoAtalhos
Diálogos não devem ter informações irrelevantes ou raramente usados. Cada unidade de informação extra em um diálogo compete com unidades relevantes de informação e diminui a sua visibilidade.
8 - Estética e design minimalista
Mensagens de erro devem ser expressadas em linguagem (sem código) indicando precisamente o problema, e sugerir uma solução construtiva.
9 - Ajude o usuário a reconhecer, diagnosticar e recuperar erros
É melhor que o sistema possa ser usado sem documentação, mas pode ser necessário ter um para oferecer ajuda. Qualquer informação deve ser fácil de procurar, focando na tarefa do usuário, listando passos concretos e sem ser muito extenso.
10 - Ajuda e documentação
USER EXPERIENCE DESIGN ponto de vista Humano _ IHC
usabilitygeek.com
“Um método importante de tornar os sistemas mais fáceis de aprender e usar é torná-los exploráveis, encorajar o usuário a fazer experiências e aprender as possibilidades através de exploração ativa.
É assim que muitas pessoas aprendem a usar utensílios domésticos ou um novo sistema de som, aparelho de televisão ou videogame: apertando os botões enquanto escutam e observam, para ver o que acontece.”
Donald Norman
Out of the box from Vitamins
play
“Em cada estado do sistema, o usuário tem de ver prontamente e ser capaz de fazer todas as ações permissíveis. A visibilidade atua como uma sugestão, recordando ao usuário as possibilidades e convidando à exploração de novas idéias e métodos.”
Convidando a experimentação
“Propiciação real é fornecida pelo
teclado (apertar de teclas), pelo mouse
(clique), pelo monitor touchscreen
(apontar) e etc.”
Affordance
“Propiciação percebida são as dicas visuais exibidas na tela do monitor para que essas ações sejam executadas. !Para Norman, o designer deve se concentrar mais na propiciação percebida do que na real, pois esta está além do seu alcance.”
Affordance para Design de Interação
• visível • fácil de interpretar. • usuários aprendem os efeitos
de cada ação (aprender causa/consequência).
• deve reversível (imediatamente para sistemas)
• deve deixar muito claro o efeito que a ação pretendida
• haver tempo suficiente para cancelar o plano.
• ações difíceis de executar, não exploráveis.
• explorável e passível de descoberta ! NFC Cards - http://vitaminsdesign.com/projects/nfc-cards-
for-samsung
Convidando a experimentação“A imagem de sistema desempenha um papel crítico para possibilitar esse aprendizado.”
1 - Dar sempre feedback pro usuário do que está acontecendo no sistema
2 - Usar sempre linguagem apropriada pro seu público
3 - Liberdade e controle do usuário para ir onde quiser e precisar no sistema
4 - Sistema precisa ter consistência e seguir padrões é sempre recomendado
5 - Previna os erros de acontecerem - veja pontos críticos e trabalhe neles
6 - Reduza a carga de memória do usuário, não crie menus com vários níveis nem esconda funcionalidades
7 - Flexibilidade e eficiência, atalhos (botões configuráveis, atalhos no teclado são ótimos)
8 - Mostrar o que precisa ser mostrado na hora que precisa ser mostrado
9 - Ajude o usuário a resolver caso haja problemas
10 - Crie um sistema tão bom que não precise de documentação (mas como sempre tem que ter, que seja fácil de encontrar o que precisa e que mostre de maneira fácil o que se quer).
Resumão
"70
REFERÊNCIAS E INSPIRAÇÕES
!Propiciação e clicabilidade http://www.usabilidoido.com.br/propiciacao_e_clicabilidade.html
!Corais http://corais.org/knowledge
!Affordances: Clarifying and Evolving a Concept http://www.cs.ubc.ca/~joanna/papers/GI2000_McGrenere_Affordances.pdf
Service Design Tools http://www.servicedesigntools.org/ !Affordances and Design http://www.interaction-design.org/encyclopedia/affordances_and_design.html
Design como linguagem: não basta projetar, tem que parecer projetado? http://www.gonzatto.com/linguagem-design-projetado/
Apresentação: Quanto custa arquitetura da informação? http://www.slideshare.net/bibia1010/quanto-custa-a-arquitetura-da-informao !Livro: The design of everyday things http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107 !Livro: Information Architecture for the World Wide Web http://shop.oreilly.com/product/9781565922822.do
Bianca BrancaleoneMelina Alves
fb.com/bianca.brancaleoneslideshare.com/bibia1010
@melinalves melinaalves.com duxcoworking.com
[email protected]@duxcoworking.com
Obrigada! #Cpbr7
Top Related