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.

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.
linha de comando
• Textual
• Abstrata
• Teclado QWERTY
Interface Gráfica
• Gráfica
• Indireta
• Mouse / Ponteiro
Interface Natural
• Física
• Direta
• Gestual

5.
Compreender o
contexto de uso

6.
Mobile = smartphones & tablets

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

8.
Mobility

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.
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.
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

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.
Mais do que tecnologia:
entender o contexto é a chave
para criar boas experiências.

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

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

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

18.
#sqn
10mm 14mm7mm<

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

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

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

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.
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.
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.
Quanto mais desafiador for o
gesto, menos pessoas serão
capazes de (ou desejarão)
realizá-lo.
6

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

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

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.
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.
Variedade de requisitos
Há uma grande variedade de
maneiras de realizar um mesmo
gesto. Esteja preparado para isso.
11

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

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

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.
Obrigado ;)
slideshare.net/edu_agni