O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
2016
RAFAEL OLI
ENGRENAGENS
DA MEMÓRIA
EVENTO
7 de Abril 2016
Olá
QUE CRIA
TRECOS
DESDE
2006
SOU UM
DESIGNER
DE PRODUTO
DE SAMPA
Art Direction
Print Design
Branding
Vector Illustration
Soc...
Criar e melhorar a usabilidade
de dashboards financeiras com
alto nível de abstração
DESAFIO
HCI (Human-Computer Interaction)
Área de pesquisa que estuda,
através de psicologia cognitiva, como
seres humanos interage...
lOadIng
PsiColOgiA
FucKinG
CogNitIva?
VisH mAriA
tio nielsen tio norman
VALEU
MANOS
O ser humano possui
várias funções cognitivas
MEMÓRIA
ATENÇÃO
LINGUAGEM
PERCEPÇÃO
EXECUTIVAS
MEMÓRIA
NOSSA MEMÓRIA É LIMITADA,
E ISSO NÃO É NOVIDADE PRA NINGUÉM
O que você almoçou ontem?
contornar
limitações
potencializar
habilidades&
ENGRENAGENS
DA MEMÓRIA
Memória Sensorial
Memória de Curto Prazo
Memória de Longo Prazo
codificação da informação 2-5 milissegundos
retenção da in...
MEMÓRIA
SENSORIAL
ATIVAÇÃO
INFORMAÇÃO
VISUAL ABSTRATA
MEMÓRIA DE
LONGO PRAZO
MEMÓRIA DE
CURTO PRAZO
DESCARTE
1
2
3
codific...
MEMÓRIA
SENSORIAL
ATIVAÇÃO
INFORMAÇÃO
VISUAL ABSTRATA
MEMÓRIA DE
LONGO PRAZO
MEMÓRIA DE
CURTO PRAZO
DESCARTE
1 codificação...
MEMÓRIA
SENSORIAL
ATIVAÇÃO
INFORMAÇÃO
VISUAL ABSTRATA
MEMÓRIA DE
LONGO PRAZO
MEMÓRIA DE
CURTO PRAZO
DESCARTE
1 codificação...
MEMÓRIA
SENSORIAL
ATIVAÇÃO
MEMÓRIA DE
LONGO PRAZO
MEMÓRIA DE
CURTO PRAZO
DESCARTE
1 codificação
2-5 milissegundos
2 retenç...
MEMÓRIA
SENSORIAL
ATIVAÇÃO
MEMÓRIA DE
LONGO PRAZO
MEMÓRIA DE
CURTO PRAZO
DESCARTE
1 codificação
2-5 milissegundos
2 retenç...
MEMÓRIA
SENSORIAL
MEMÓRIA
SENSORIAL
identificar
padrões
A informação visual do objeto
torna óbvia sua utilização
AFFORDANCE
Esse elemento é interativo?
Como devo interagir?
O que...
IMPRIMIR
MEMÓRIA
SENSORIAL
interação
resultadoelemento
MEMÓRIA
SENSORIAL
RECORDAR
VS
RECONHECER
MEMÓRIA
SENSORIAL
Quem é esse tiozinho?
MEMÓRIA
SENSORIAL
Quem é esse tiozinho?
MEMÓRIA
SENSORIAL
Walt DisneyA Albert EinsteinB Charles DarwinC
RECONHECERRECORDAR
é ativar lembranças pontuais
em busca da informação correta
é confirmar se a informação
fornecida está ...
MEMÓRIA
SENSORIAL
RECORDAR RECONHECER
CHARLES
DARWIN
I lOve
PigAs
PERFIL
MEMÓRIA
SENSORIAL
PERFIL
ÍCONE
sentido
LEGENDA
sentido
PERFIL
RETÂNGULO
affordance
+ +
MEMÓRIA
SENSORIAL
SENHA |
ÍCONE
sentido
RETÂNGULO
affordance
+ + SENHA
LEGENDA
sentido
MEMÓRIA
SENSORIAL
MEMÓRIA DE
CURTO PRAZO
MEMÓRIA DE
CURTO PRAZO
15 a 30 segundos
sÓ 15 a 30
sEguNdOs?
NosSa RafÃo
MEMÓRIA DE
CURTO PRAZO
MEMÓRIA DE
CURTO PRAZO
♥♥
MEMÓRIA DE
CURTO PRAZO
♥♥
MEMÓRIA DE
CURTO PRAZO
FEEDBACK
INSTANTÂNEO
ações
prévias
comportamento
do sistema
e
MEMÓRIA DE
CURTO PRAZO
1 2 3 4 5
SENSAÇÃO DE PROGRESSÃO
MEMÓRIA DE
CURTO PRAZO
UPLOAD
INTERAÇÃO
GATILHO
50%
FEEDBACK
PROCESSAMENTO
UI.PNG
FEEDBACK
CONFIRMAÇÃO
MEMÓRIA DE
CURTO PRAZO
50%
CARREGANDO
feed de notícias
MEMÓRIA DE
LONGO PRAZO
MEMÓRIA DE
LONGO PRAZO
ATIVAÇÃO
MEMÓRIA DE
LONGO PRAZO
CONTEXTO
Informação visual presente no foco de atenção.
RECÊNCIA
Quão recentemente esse padrão de l...
MEMÓRIA DE
LONGO PRAZO
ARQUIVOS
Clique no arquivo para baixar
ARQUIVO.PNG
ARQUIVO.MP3
REFEIÇÃO
Escolha o tipo de comida
PI...
MEMÓRIA DE
LONGO PRAZO
Utilize o teclado
para navegar
Use o backspace
para apagar itens
Clique e arraste
para ordenar
MEMÓRIA DE
LONGO PRAZO
Digite o nome da música ou banda|
ÚLTIMAS PESQUISAS
Less than jake 2 minutos
Blink 182 4 horas
The ...
RecApi
TulAndO
rApiDão
MEMÓRIA
SENSORIAL
ATIVAÇÃO
MEMÓRIA DE
LONGO PRAZO
MEMÓRIA DE
CURTO PRAZO
MEMÓRIA
SENSORIAL
MEMÓRIA DE
LONGO PRAZO
MEMÓRIA ...
Por hojE É
SÓ PesSoaL
MUITO OBRIGADO
“INTRODUÇÃO À
INTERFACES HEURÍSTICAS”
https://goo.gl/yPQes9
BLOG DE AI
arquiteturadeinformacao.com
MEDIUM
@...
São Paulo Dribbble Meetup - Engrenagens da Memória
São Paulo Dribbble Meetup - Engrenagens da Memória
São Paulo Dribbble Meetup - Engrenagens da Memória
Próximos SlideShares
Carregando em…5
×

São Paulo Dribbble Meetup - Engrenagens da Memória

1.115 visualizações

Publicada em

No primeiro São Paulo Dribbble Meetup, falei um pouco sobre HCI aplicado e em como contornar as limitações da memória pelo viés da UI.

Publicada em: Design
  • Seja o primeiro a comentar

São Paulo Dribbble Meetup - Engrenagens da Memória

  1. 1. 2016 RAFAEL OLI ENGRENAGENS DA MEMÓRIA
  2. 2. EVENTO 7 de Abril 2016
  3. 3. Olá
  4. 4. QUE CRIA TRECOS DESDE 2006 SOU UM DESIGNER DE PRODUTO DE SAMPA Art Direction Print Design Branding Vector Illustration Social Media Content Digital Painting Packaging User Interface Design User Experience Research Customer Experience Information Architecture User flows User journeys Usability RA FAEL OLI BLOG DE AI arquiteturadeinformacao.com BEHANCE @rafaeloli MEDIUM @rafaoli LINKEDIN @rafaeloli DRIBBBLE @rafaeloli
  5. 5. Criar e melhorar a usabilidade de dashboards financeiras com alto nível de abstração DESAFIO
  6. 6. HCI (Human-Computer Interaction) Área de pesquisa que estuda, através de psicologia cognitiva, como seres humanos interagem com máquinas
  7. 7. lOadIng
  8. 8. PsiColOgiA FucKinG CogNitIva? VisH mAriA
  9. 9. tio nielsen tio norman VALEU MANOS
  10. 10. O ser humano possui várias funções cognitivas MEMÓRIA ATENÇÃO LINGUAGEM PERCEPÇÃO EXECUTIVAS
  11. 11. MEMÓRIA
  12. 12. NOSSA MEMÓRIA É LIMITADA, E ISSO NÃO É NOVIDADE PRA NINGUÉM
  13. 13. O que você almoçou ontem?
  14. 14. contornar limitações potencializar habilidades&
  15. 15. ENGRENAGENS DA MEMÓRIA
  16. 16. Memória Sensorial Memória de Curto Prazo Memória de Longo Prazo codificação da informação 2-5 milissegundos retenção da informação 15-30 segundos armazenamento da informação indefinido
  17. 17. MEMÓRIA SENSORIAL ATIVAÇÃO INFORMAÇÃO VISUAL ABSTRATA MEMÓRIA DE LONGO PRAZO MEMÓRIA DE CURTO PRAZO DESCARTE 1 2 3 codificação 2-5 milissegundos retenção 15-30 segundos armazenamento indefinido
  18. 18. MEMÓRIA SENSORIAL ATIVAÇÃO INFORMAÇÃO VISUAL ABSTRATA MEMÓRIA DE LONGO PRAZO MEMÓRIA DE CURTO PRAZO DESCARTE 1 codificação 2-5 milissegundos 2 retenção 15-30 segundos 3 armazenamento indefinido
  19. 19. MEMÓRIA SENSORIAL ATIVAÇÃO INFORMAÇÃO VISUAL ABSTRATA MEMÓRIA DE LONGO PRAZO MEMÓRIA DE CURTO PRAZO DESCARTE 1 codificação 2-5 milissegundos 2 retenção 15-30 segundos 3 armazenamento indefinido
  20. 20. MEMÓRIA SENSORIAL ATIVAÇÃO MEMÓRIA DE LONGO PRAZO MEMÓRIA DE CURTO PRAZO DESCARTE 1 codificação 2-5 milissegundos 2 retenção 15-30 segundos 3 armazenamento indefinido INFORMAÇÃO VISUAL ABSTRATA
  21. 21. MEMÓRIA SENSORIAL ATIVAÇÃO MEMÓRIA DE LONGO PRAZO MEMÓRIA DE CURTO PRAZO DESCARTE 1 codificação 2-5 milissegundos 2 retenção 15-30 segundos 3 armazenamento indefinido INFORMAÇÃO VISUAL ABSTRATA
  22. 22. MEMÓRIA SENSORIAL
  23. 23. MEMÓRIA SENSORIAL identificar padrões
  24. 24. A informação visual do objeto torna óbvia sua utilização AFFORDANCE Esse elemento é interativo? Como devo interagir? O que acontecerá se eu interagir? MEMÓRIA SENSORIAL
  25. 25. IMPRIMIR MEMÓRIA SENSORIAL interação resultadoelemento
  26. 26. MEMÓRIA SENSORIAL
  27. 27. RECORDAR VS RECONHECER MEMÓRIA SENSORIAL
  28. 28. Quem é esse tiozinho? MEMÓRIA SENSORIAL
  29. 29. Quem é esse tiozinho? MEMÓRIA SENSORIAL Walt DisneyA Albert EinsteinB Charles DarwinC
  30. 30. RECONHECERRECORDAR é ativar lembranças pontuais em busca da informação correta é confirmar se a informação fornecida está correta MEMÓRIA SENSORIAL
  31. 31. MEMÓRIA SENSORIAL RECORDAR RECONHECER CHARLES DARWIN
  32. 32. I lOve PigAs
  33. 33. PERFIL MEMÓRIA SENSORIAL
  34. 34. PERFIL ÍCONE sentido LEGENDA sentido PERFIL RETÂNGULO affordance + + MEMÓRIA SENSORIAL
  35. 35. SENHA | ÍCONE sentido RETÂNGULO affordance + + SENHA LEGENDA sentido MEMÓRIA SENSORIAL
  36. 36. MEMÓRIA DE CURTO PRAZO
  37. 37. MEMÓRIA DE CURTO PRAZO 15 a 30 segundos
  38. 38. sÓ 15 a 30 sEguNdOs? NosSa RafÃo MEMÓRIA DE CURTO PRAZO
  39. 39. MEMÓRIA DE CURTO PRAZO
  40. 40. ♥♥ MEMÓRIA DE CURTO PRAZO ♥♥
  41. 41. MEMÓRIA DE CURTO PRAZO FEEDBACK INSTANTÂNEO ações prévias comportamento do sistema e
  42. 42. MEMÓRIA DE CURTO PRAZO 1 2 3 4 5 SENSAÇÃO DE PROGRESSÃO
  43. 43. MEMÓRIA DE CURTO PRAZO UPLOAD INTERAÇÃO GATILHO 50% FEEDBACK PROCESSAMENTO UI.PNG FEEDBACK CONFIRMAÇÃO
  44. 44. MEMÓRIA DE CURTO PRAZO 50% CARREGANDO feed de notícias
  45. 45. MEMÓRIA DE LONGO PRAZO
  46. 46. MEMÓRIA DE LONGO PRAZO ATIVAÇÃO
  47. 47. MEMÓRIA DE LONGO PRAZO CONTEXTO Informação visual presente no foco de atenção. RECÊNCIA Quão recentemente esse padrão de lembranças foi utilizado.. PRÁTICA Quantas vezes esse padrão de lembranças foi ativado no passado. Influenciadores na ATIVAÇÃO
  48. 48. MEMÓRIA DE LONGO PRAZO ARQUIVOS Clique no arquivo para baixar ARQUIVO.PNG ARQUIVO.MP3 REFEIÇÃO Escolha o tipo de comida PIZZA FRANGO BATATA
  49. 49. MEMÓRIA DE LONGO PRAZO Utilize o teclado para navegar Use o backspace para apagar itens Clique e arraste para ordenar
  50. 50. MEMÓRIA DE LONGO PRAZO Digite o nome da música ou banda| ÚLTIMAS PESQUISAS Less than jake 2 minutos Blink 182 4 horas The story so far 2 dias New found glory 1 semana Ver histórico de pesquisas
  51. 51. RecApi TulAndO rApiDão
  52. 52. MEMÓRIA SENSORIAL ATIVAÇÃO MEMÓRIA DE LONGO PRAZO MEMÓRIA DE CURTO PRAZO MEMÓRIA SENSORIAL MEMÓRIA DE LONGO PRAZO MEMÓRIA DE CURTO PRAZO -reconhecer > recordar -ensinedentrodocontextopresente -retéminfopornomáx30segundos -affordanceativando2ou3memórias -indicarcomointeragireoquevaiacontecer -tireproveitodarecência -faciliteaprática -feedbackcomportamentodosistema -feedbacksequênciadepassos
  53. 53. Por hojE É SÓ PesSoaL
  54. 54. MUITO OBRIGADO “INTRODUÇÃO À INTERFACES HEURÍSTICAS” https://goo.gl/yPQes9 BLOG DE AI arquiteturadeinformacao.com MEDIUM @rafaoli LINKEDIN @rafaeloli BEHANCE @rafaeloli DRIBBBLE @rafaeloli

×