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

1. Interfaces Naturais
@eduagni

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.

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

8. linha de comando
• Textual
• Abstrata
• Teclado QWERTY
Interface Gráfica
• Gráfica
• Indireta
• Mouse / Ponteiro
Interface Natural
• Física
• Direta
• Gestual

9. Compreender o
contexto de uso

12. Mobile = smartphones & tablets

13. https://www.youtube.com/watch?v=6Cf7IL_eZ38

14. Mobility

16. 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

18. 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

19. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

26. 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.

27. Mais do que tecnologia:
entender o contexto é a chave
para criar boas experiências.

28. Princípios Básicos do Design
de Interfaces Naturais

29. Dan Saffer se deparou com a seguinte
pergunta no Quora: What are the basic
principles of NUI (Natural User
Interface) Design?

30. 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

31. 7mm 10mm 14mm<

32. #sqn
10mm 14mm7mm<

33. Tá tranquilo :)
10mm 14mm7mm<

34. Tá favorável ;)
10mm 14mm7mm<

35. Lembre-se de
fisiologia e cinesiologia
Não faça com que os usuários
executem tarefas genéricas ou
repetitivas.
2

37. 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

39. 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

41. 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

43. Quanto mais desafiador for o
gesto, menos pessoas serão
capazes de (ou desejarão)
realizá-lo.
6

45. Ativar ações quando o usuário
remover o dedo, e não
enquanto toca a tela.
7

47. Reconhecimento
(Affordance)
Utilize gestos simples e intuitivos
para atrair usuários a começar a
usar o seu sistema.
8

49. 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

51. 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

54. Variedade de requisitos
Há uma grande variedade de
maneiras de realizar um mesmo
gesto. Esteja preparado para isso.
11

57. Determinar a complexidade
do gesto de acordo com a
complexidade e a frequência
da tarefa
12

59. O quanto antes você puder
fazer um protótipo testável
para avaliar com usuários,
faça. E teste.
13

62. Brad Frost
“Repeat after me: Mobile Users will
do anything and everything
desktop users will do, provided it's
presented in a usable way.”

63. Obrigado ;)
slideshare.net/edu_agni