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.
Natural User Interface Design
@eduagni
Edu Agni é consultor especialista em Experiência do
Usuário e criador do UX.BLOG. Possui 12 anos de
experiência nas áreas ...
http://www.youtube.com/watch?v=ndkIP7ec3O8
O número total de pessoas acessando a web
através de dispositivos móveis irá superar o acesso
via desktop em 2015.
http://...
Bem-vindo a 2015, 

o ano em que o mobile
ultrapassa o desktop.
Projetando Interfaces Naturais
Natural User Interface é o termo que utilizamos para
nos referir a uma interface que é efetivamente invisível, e
permanece...
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...
Interface de

linha de comando
• Textual

• Abstrata

• Teclado QWERTY
Interface Gráfica do Usuário
• Gráfica

• Indireta

•...
Interface Gráfica do Usuário Interface Natural do Usuário
1. Controle mediado;

2. Maior precisão, menor
imersão;

3. Aprov...
Compreender o contexto de uso
Contexto de uso Desktop
1. Atenção elevada
2. Tela grande
3. Conexão rápida
4. Posição estática
Contexto de uso Mobile
1. Pouca atenção
2. Tela pequena
3. Conexão lenta
4. Posição dinâmica
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, que é designer de interação e autor dos
livros Designing Devices (2011), Designing Gestural
Interfaces (2008),...
Dan Saffer se deparou com a seguinte pergunta no
Quora: “What are the basic principles of NUI (Natural
User Interface) Des...
Projetar para dedos, e não para cursores
As áreas de toque precisam ser muito maiores
do que em um desktop: 8-10mm para ca...
-7mm 10mm 14mm
#sqn
-7mm 10mm 14mm
De boas
-7mm 10mm 14mm
Mamão

com açúcar
-7mm 10mm 14mm
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, em
frente de seus c...
Cobertura da tela
Dedos estão ligados a uma palma, que pode
cobrir a tela enquanto você está tentando fazer
um gesto. Evit...
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 (como botões, controles
deslizantes, itens...
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
Tarefas simples e frequentemente ...
Não dá pra pegar seu site desktop, jogar no
mobile e achar que a experiência vai ser boa.
Brad Frost
“Repeat after me: Mobile Users will do
anything and everything desktop users will do,
provided it's presented i...
http://www.uxdesign.blog.br/design-de-interfaces/natural-
user-interface/
http://www.eweek.com/c/a/Mobile-and-Wireless/Mob...
Obrigado!
@eduagni
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Natural User Interface Design
Próximos SlideShares
Carregando em…5
×

Natural User Interface Design

Bate-papo realizado no FrontUX Meetup no dia 22 de setembro de 2015. http://frontux.com/

  • Seja o primeiro a comentar

Natural User Interface Design

  1. 1. Natural User Interface Design @eduagni
  2. 2. Edu Agni é consultor especialista em Experiência do Usuário e criador do UX.BLOG. Possui 12 anos de experiência nas áreas de design e usabilidade.
  3. 3. http://www.youtube.com/watch?v=ndkIP7ec3O8
  4. 4. O número total de pessoas acessando a web através de dispositivos móveis irá superar o acesso via desktop em 2015. http://www.eweek.com/c/a/Mobile-and-Wireless/Mobile-Internet-Usage-to-Top-Wireline-Surfing-by-2015-IDC-Report-617848
  5. 5. Bem-vindo a 2015, 
 o ano em que o mobile ultrapassa o desktop.
  6. 6. Projetando Interfaces Naturais
  7. 7. Natural User Interface é o termo que utilizamos para nos referir a uma interface que é efetivamente invisível, e permanece invisível conforme o usuário aprende continuamente interações cada vez mais complexas.
  8. 8. 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.
  9. 9. Interface de
 linha de comando • Textual • Abstrata • Teclado QWERTY Interface Gráfica do Usuário • Gráfica • Indireta • Mouse / Ponteiro Interface Natural do Usuário • Física • Direta • Gestual Projetando Interfaces Naturais
  10. 10. Interface Gráfica do Usuário Interface Natural do Usuário 1. Controle mediado; 2. Maior precisão, menor imersão; 3. Aproveita a familiaridade e experiência computacional; 4. Associações emocionais com o trabalho; 5. Perfeito para produtividade e eficiência nas tarefas; 6. A interface é visível e gráfica. 1. Manipulação direta; 2. Menor precisão, maior imersão; 3. Aproveita as suposições do usuário e conclusões lógicas; 4. Associações emocionais com o entretenimento; 5. Perfeito para tarefas sociais e colaborativas; 6. A interface é física e invisível. Projetando Interfaces Naturais
  11. 11. Compreender o contexto de uso
  12. 12. Contexto de uso Desktop 1. Atenção elevada 2. Tela grande 3. Conexão rápida 4. Posição estática
  13. 13. Contexto de uso Mobile 1. Pouca atenção 2. Tela pequena 3. Conexão lenta 4. Posição dinâmica
  14. 14. 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.
  15. 15. Mais do que tecnologia: 
 entender o contexto é a chave para criar boas experiências.
  16. 16. Princípios Básicos do Design de Interfaces Naturais
  17. 17. Dan Saffer, que é designer de interação e autor dos livros Designing Devices (2011), Designing Gestural Interfaces (2008), Designing for Interaction (2006, 2009) e Microinteractions (2013).
  18. 18. Dan Saffer se deparou com a seguinte pergunta no Quora: “What are the basic principles of NUI (Natural User Interface) Design?“. A resposta dele para essa pergunta foi uma lista com doze princípios.
  19. 19. 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
  20. 20. -7mm 10mm 14mm
  21. 21. #sqn -7mm 10mm 14mm
  22. 22. De boas -7mm 10mm 14mm
  23. 23. Mamão
 com açúcar -7mm 10mm 14mm
  24. 24. Lembre-se de fisiologia e cinesiologia Não faça com que os usuários executem tarefas genéricas ou repetitivas.2
  25. 25. Sem Braço de Gorila Os seres humanos não foram feitos para fazer muitas tarefas com as mãos para cima, em frente de seus corpos, por longos períodos de tempo (Minority Report que me desculpe). 3
  26. 26. Cobertura da tela Dedos estão ligados a uma palma, que pode cobrir a tela enquanto você está tentando fazer um gesto. Evite colocar elementos essenciais como rótulos abaixo de um controle, de forma que possa ser encoberto pela própria mão do usuário. Coloque itens como menus na parte inferior da tela, para evitar este fenômeno. 4
  27. 27. 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
  28. 28. Quanto mais desafiador for o gesto, menos pessoas serão capazes de (ou desejarão) realizá-lo.6
  29. 29. Ativar ações quando o usuário remover o dedo, e não enquanto toca a tela. 7
  30. 30. Reconhecimento (Affordance) Utilize gestos simples e intuitivos para atrair usuários a começar a usar o seu sistema.8
  31. 31. 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
  32. 32. Gestos e Teclas de comando Fornecer maneiras fáceis de acessar a funcionalidade (como botões, controles deslizantes, itens de menu, etc.), mas também fornecer formas avançadas e ágeis de gestos aprendidos como atalhos. 10
  33. 33. Variedade de requisitos Há uma grande variedade de maneiras de realizar um mesmo gesto. Esteja preparado para isso. 11
  34. 34. Determinar a complexidade do gesto de acordo com a complexidade e a frequência da tarefa Tarefas simples e frequentemente utilizadas devem ter gestos igualmente simples para executá-las. 12
  35. 35. Não dá pra pegar seu site desktop, jogar no mobile e achar que a experiência vai ser boa.
  36. 36. Brad Frost “Repeat after me: Mobile Users will do anything and everything desktop users will do, provided it's presented in a usable way.”
  37. 37. http://www.uxdesign.blog.br/design-de-interfaces/natural- user-interface/ http://www.eweek.com/c/a/Mobile-and-Wireless/Mobile- Internet-Usage-to-Top-Wireline-Surfing-by-2015-IDC- Report-617848 https://vimeo.com/4420794 https://www.thinkwithgoogle.com/ http://www.uxmatters.com/mt/archives/2013/02/how-do- users-really-hold-mobile-devices.php Algumas referencias
  38. 38. Obrigado! @eduagni

×