Interfaces Naturais
@eduagni
Edu Agni

Designer especialista em User Experience.
Trabalha há treze anos com projetos nas
áreas de arquitetura de inform...
Interfaces Naturais de Usuário
permitem a interação direta do usuário
com a interface e os conteúdos, de modo
que não se p...
linha de comando
• Textual
• Abstrata
• Teclado QWERTY
Interface Gráfica
• Gráfica
• Indireta
• Mouse / Ponteiro
Interface...
Compreender o
contexto de uso
Mobile = smartphones & tablets
https://www.youtube.com/watch?v=6Cf7IL_eZ38
Mobility
Contexto Desktop (Interface Gráfica)
1. Atenção elevada
2.Tela grande e controle mediado
3. Maior precisão, menor imersão
...
Contexto Mobile (Interface Natural)
1. Pouca atenção
2.Tela pequena e manipulação direta
3. Menor precisão, maior imersão
...
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
O que funcionava no desktop, com o usuário
sentado na frente do computador, tem boas
chances de não funcionar nos vários
c...
Mais do que tecnologia: 

entender o contexto é a chave
para criar boas experiências.
Princípios Básicos do Design
de Interfaces Naturais
Dan Saffer se deparou com a seguinte
pergunta no Quora: What are the basic
principles of NUI (Natural User
Interface) Desi...
Projetar para dedos, 

e não para cursores
As áreas de toque precisam ser muito
maiores do que em um desktop:
8-10mm para ...
7mm 10mm 14mm<
#sqn
10mm 14mm7mm<
Tá tranquilo :)
10mm 14mm7mm<
Tá favorável ;)
10mm 14mm7mm<
Lembre-se de

fisiologia e cinesiologia
Não faça com que os usuários
executem tarefas genéricas ou
repetitivas.
2
Sem Braço de Gorila
Os seres humanos não foram
feitos para fazer muitas tarefas
com as mãos para cima por longos
períodos ...
Cobertura da tela
Evite colocar elementos essenciais
abaixo de um controle, de forma
que possa ser encoberto pela
própria ...
Conheça a tecnologia
O tipo de tela sensível ao toque,
sensor ou câmera determina o tipo
de gestos que você pode projetar
...
Quanto mais desafiador for o
gesto, menos pessoas serão
capazes de (ou desejarão)
realizá-lo.
6
Ativar ações quando o usuário
remover o dedo, e não
enquanto toca a tela.
7
Reconhecimento 

(Affordance)
Utilize gestos simples e intuitivos
para atrair usuários a começar a
usar o seu sistema.
8
Evite a ativação de ações de
forma não intencional
Uma variedade de movimentos
diários por parte do usuário pode
acidental...
Gestos e Teclas de comando
Fornecer maneiras fáceis de acessar
a funcionalidade, mas também
fornecer formas avançadas e ág...
Variedade de requisitos
Há uma grande variedade de
maneiras de realizar um mesmo
gesto. Esteja preparado para isso.
11
Determinar a complexidade 

do gesto de acordo com a
complexidade e a frequência 

da tarefa
12
O quanto antes você puder
fazer um protótipo testável
para avaliar com usuários,
faça. E teste.
13
Brad Frost
“Repeat after me: Mobile Users will
do anything and everything
desktop users will do, provided it's
presented i...
Obrigado ;)
slideshare.net/edu_agni
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Próximos SlideShares
Carregando em…5
×

Interfaces Naturais

1.295 visualizações

Publicada em

Palestra sobre Interfaces Naturais, ministrada no evento Mobile Summit, dia 19/11/2016 na UniRitter em Porto Alegre/RS.

Publicada em: Design
0 comentários
7 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.295
No SlideShare
0
A partir de incorporações
0
Número de incorporações
0
Ações
Compartilhamentos
0
Downloads
28
Comentários
0
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Interfaces Naturais

  1. 1. Interfaces Naturais @eduagni
  2. 2. Edu Agni
 Designer especialista em User Experience. Trabalha há treze anos com projetos nas áreas de arquitetura de informação, usabilidade e design responsivo.
  3. 3. Interfaces Naturais de Usuário permitem a interação direta do usuário com a interface e os conteúdos, de modo que não se percebe a tecnologia.
  4. 4. linha de comando • Textual • Abstrata • Teclado QWERTY Interface Gráfica • Gráfica • Indireta • Mouse / Ponteiro Interface Natural • Física • Direta • Gestual
  5. 5. Compreender o contexto de uso
  6. 6. Mobile = smartphones & tablets
  7. 7. https://www.youtube.com/watch?v=6Cf7IL_eZ38
  8. 8. Mobility
  9. 9. Contexto Desktop (Interface Gráfica) 1. Atenção elevada 2.Tela grande e controle mediado 3. Maior precisão, menor imersão 4. Produtividade e eficiência nas tarefas 5. Conexão rápida 6. Posição estática
  10. 10. Contexto Mobile (Interface Natural) 1. Pouca atenção 2.Tela pequena e manipulação direta 3. Menor precisão, maior imersão 4.Tarefas sociais e colaborativas 3. Conexão lenta 4. Posição dinâmica
  11. 11. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  12. 12. O que funcionava no desktop, com o usuário sentado na frente do computador, tem boas chances de não funcionar nos vários contextos que o mobile oferece.
  13. 13. Mais do que tecnologia: 
 entender o contexto é a chave para criar boas experiências.
  14. 14. Princípios Básicos do Design de Interfaces Naturais
  15. 15. Dan Saffer se deparou com a seguinte pergunta no Quora: What are the basic principles of NUI (Natural User Interface) Design?
  16. 16. Projetar para dedos, 
 e não para cursores As áreas de toque precisam ser muito maiores do que em um desktop: 8-10mm para canetas, e 10-14mm para as pontas dos dedos. 1
  17. 17. 7mm 10mm 14mm<
  18. 18. #sqn 10mm 14mm7mm<
  19. 19. Tá tranquilo :) 10mm 14mm7mm<
  20. 20. Tá favorável ;) 10mm 14mm7mm<
  21. 21. Lembre-se de
 fisiologia e cinesiologia Não faça com que os usuários executem tarefas genéricas ou repetitivas. 2
  22. 22. Sem Braço de Gorila Os seres humanos não foram feitos para fazer muitas tarefas com as mãos para cima por longos períodos de tempo. 3
  23. 23. Cobertura da tela Evite colocar elementos essenciais abaixo de um controle, de forma que possa ser encoberto pela própria mão do usuário. 4
  24. 24. Conheça a tecnologia O tipo de tela sensível ao toque, sensor ou câmera determina o tipo de gestos que você pode projetar para a interação. 5
  25. 25. Quanto mais desafiador for o gesto, menos pessoas serão capazes de (ou desejarão) realizá-lo. 6
  26. 26. Ativar ações quando o usuário remover o dedo, e não enquanto toca a tela. 7
  27. 27. Reconhecimento 
 (Affordance) Utilize gestos simples e intuitivos para atrair usuários a começar a usar o seu sistema. 8
  28. 28. Evite a ativação de ações de forma não intencional Uma variedade de movimentos diários por parte do usuário pode acidentalmente acionar o sistema. Tente evitar isso. 9
  29. 29. Gestos e Teclas de comando Fornecer maneiras fáceis de acessar a funcionalidade, mas também fornecer formas avançadas e ágeis de gestos aprendidos como atalhos. 10
  30. 30. Variedade de requisitos Há uma grande variedade de maneiras de realizar um mesmo gesto. Esteja preparado para isso. 11
  31. 31. Determinar a complexidade 
 do gesto de acordo com a complexidade e a frequência 
 da tarefa 12
  32. 32. O quanto antes você puder fazer um protótipo testável para avaliar com usuários, faça. E teste. 13
  33. 33. Brad Frost “Repeat after me: Mobile Users will do anything and everything desktop users will do, provided it's presented in a usable way.”
  34. 34. Obrigado ;) slideshare.net/edu_agni

×