Palestra ministrada no dia 13 de maio de 2016 na trilha de UX Design da The Developer's Conference em Florianópolis.

1. Interfaces
Naturais

2. Edu Agni é designer especialista em User
Experience. Trabalha há treze anos com projetos
nas áreas de design e usabilidade.

5. http://www.youtube.com/watch?v=ndkIP7ec3O8

10. O total de pessoas acessando a web
através de dispositivos móveis superou
o acesso via desktop em 2015.

13. Projetando
Interfaces
Naturais

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

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

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

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

18. Compreender o
contexto de uso

20. Contexto de uso Desktop
1. Atenção elevada
2. Tela grande
3. Conexão rápida
4. Posição estática

22. Contexto de uso Mobile
1. Pouca atenção
2. Tela pequena
3. Conexão lenta
4. Posição dinâmica

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

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

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

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

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

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

37. < 8mm 10mm 14mm

38. #sqn
< 8mm 10mm 14mm

39. Tá tranquilo :)
< 8mm 10mm 14mm

40. Tá favorável ;)
< 8mm 10mm 14mm

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

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

45. 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. Coloque itens como
menus na parte inferior da tela, para
evitar este fenômeno.
4

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

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

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

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

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

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

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

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

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

69. Obrigado!
@eduagni