Campus Party_Design do dia a dia #Cpbr7

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

http://www.behance.net/gallery/Eu-Compraria/10149501




































































































































































































































































+ 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

http://www.youtube.com/watch?v=jUO7Qnmc8vE






























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

http://www.montparnas.com/articles/what-is-user-experience-design/

http://www.montparnas.com/articles/what-is-user-experience-design/print/

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 !!!


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

http://www.envis-precisely.com

• 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

EXPERIÊNCIA DIGITAL OU INTERATIVA

"27

Melina Alves PUC-RS - 2012 #Cpbr - 2014

"28


"29


"30


"31


"32


"33


"34


"35


"36


"37


"38


"39


"40


"41


"42


"43


"44

“experiência do usuário está cada vez mais próxima da imersão entre soluções digitais e reais”


"45


"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

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 !



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

http://www.nngroup.com/articles/author/jakob-nielsen/

http://www.nngroup.com/articles/ten-usability-heuristics/

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

http://usabilitygeek.com/user-experience/

“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

http://youtube.com/v/cYfSKGjHBKg






























“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.”

http://vitaminsdesign.com/projects/nfc-cards-for-samsung

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

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

http://www.usabilidoido.com.br/propiciacao_e_clicabilidade.html

http://corais.org/knowledge

http://www.cs.ubc.ca/~joanna/papers/GI2000_McGrenere_Affordances.pdf

http://www.servicedesigntools.org/

http://www.interaction-design.org/encyclopedia/affordances_and_design.html

http://www.gonzatto.com/linguagem-design-projetado/

http://www.slideshare.net/bibia1010/quanto-custa-a-arquitetura-da-informao

http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107

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

http://fb.com/bianca.brancaleone

http://slideshare.com/bibia1010

http://melinaalves.com

http://duxcoworking.com

mailto:[email protected]

mailto:[email protected]

Obrigada! #Cpbr7

Campus Party_Design do dia a dia #Cpbr7

Technology

Transcript of Campus Party_Design do dia a dia #Cpbr7