interfaces naturais

69
Interfaces Naturais

Upload: edu-agni

Post on 14-Apr-2017

814 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Interfaces Naturais

InterfacesNaturais

Page 2: Interfaces Naturais

Edu Agni é designer especialista em User Experience. Trabalha há treze anos com projetos

nas áreas de design e usabilidade.

Page 3: Interfaces Naturais
Page 4: Interfaces Naturais
Page 5: Interfaces Naturais

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

Page 6: Interfaces Naturais
Page 7: Interfaces Naturais
Page 8: Interfaces Naturais
Page 9: Interfaces Naturais
Page 10: Interfaces Naturais

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

Page 11: Interfaces Naturais
Page 12: Interfaces Naturais
Page 13: Interfaces Naturais

ProjetandoInterfaces Naturais

Page 14: Interfaces Naturais

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.

Page 15: Interfaces Naturais

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.

Page 16: Interfaces Naturais

Interface delinha 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

Page 17: Interfaces Naturais

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

Page 18: Interfaces Naturais

Compreender o contexto de uso

Page 19: Interfaces Naturais
Page 20: Interfaces Naturais

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

Page 21: Interfaces Naturais
Page 22: Interfaces Naturais

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

Page 23: Interfaces Naturais
Page 24: Interfaces Naturais
Page 25: Interfaces Naturais
Page 26: Interfaces Naturais
Page 27: Interfaces Naturais
Page 28: Interfaces Naturais
Page 29: Interfaces Naturais
Page 30: Interfaces Naturais
Page 31: Interfaces Naturais

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.

Page 32: Interfaces Naturais

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

Page 33: Interfaces Naturais

Princípios Básicos do Design de Interfaces Naturais

Page 34: Interfaces Naturais

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

Page 35: Interfaces Naturais

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.

Page 36: Interfaces Naturais

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

Page 37: Interfaces Naturais

< 8mm 10mm 14mm

Page 38: Interfaces Naturais

#sqn

< 8mm 10mm 14mm

Page 39: Interfaces Naturais

Tá tranquilo :)

< 8mm 10mm 14mm

Page 40: Interfaces Naturais

Tá favorável ;)

< 8mm 10mm 14mm

Page 41: Interfaces Naturais

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

2

Page 42: Interfaces Naturais
Page 43: Interfaces Naturais

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

Page 44: Interfaces Naturais
Page 45: Interfaces Naturais

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

Page 46: Interfaces Naturais
Page 47: Interfaces Naturais

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

Page 48: Interfaces Naturais
Page 49: Interfaces Naturais

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

Page 50: Interfaces Naturais
Page 51: Interfaces Naturais

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

Page 52: Interfaces Naturais
Page 53: Interfaces Naturais

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

Page 54: Interfaces Naturais
Page 55: Interfaces Naturais

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

Page 56: Interfaces Naturais
Page 57: Interfaces Naturais

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

Page 58: Interfaces Naturais
Page 59: Interfaces Naturais
Page 60: Interfaces Naturais

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

11

Page 61: Interfaces Naturais
Page 62: Interfaces Naturais
Page 63: Interfaces Naturais

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

Page 64: Interfaces Naturais
Page 65: Interfaces Naturais
Page 66: Interfaces Naturais
Page 67: Interfaces Naturais
Page 68: Interfaces Naturais

Brad Frost “Repeat after me: Mobile Users will do anything and everything desktop

users will do, provided it's presented in a usable way.”

Page 69: Interfaces Naturais

Obrigado!@eduagni