interfaces naturais

63
Interfaces Naturais @eduagni

Upload: edu-agni

Post on 21-Jan-2017

1.004 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Interfaces Naturais

Interfaces Naturais@eduagni

Page 2: Interfaces Naturais

Edu AgniDesigner especialista em User Experience. Trabalha há treze anos com projetos nas

áreas de arquitetura de informação, usabilidade e design responsivo.

Page 3: Interfaces Naturais
Page 4: Interfaces Naturais
Page 5: Interfaces Naturais
Page 6: Interfaces Naturais
Page 7: 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 8: Interfaces Naturais

linha de comando

• Textual

• Abstrata

• Teclado QWERTY

Interface Gráfica• Gráfica

• Indireta

• Mouse / Ponteiro

Interface Natural• Física • Direta

• Gestual

Page 9: Interfaces Naturais

Compreender o contexto de uso

Page 10: Interfaces Naturais
Page 11: Interfaces Naturais
Page 12: Interfaces Naturais

Mobile = smartphones & tablets

Page 13: Interfaces Naturais

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

Page 14: Interfaces Naturais

Mobility

Page 15: Interfaces Naturais
Page 16: Interfaces Naturais

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

Page 17: Interfaces Naturais
Page 18: Interfaces Naturais

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

Page 19: Interfaces Naturais

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

Page 20: Interfaces Naturais
Page 21: Interfaces Naturais
Page 22: Interfaces Naturais
Page 23: Interfaces Naturais
Page 24: Interfaces Naturais
Page 25: Interfaces Naturais
Page 26: 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 27: Interfaces Naturais

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

Page 28: Interfaces Naturais

Princípios Básicos do Design de Interfaces Naturais

Page 29: Interfaces Naturais

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

Page 30: 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 31: Interfaces Naturais

7mm 10mm 14mm<

Page 32: Interfaces Naturais

#sqn

10mm 14mm7mm<

Page 33: Interfaces Naturais

Tá tranquilo :)

10mm 14mm7mm<

Page 34: Interfaces Naturais

Tá favorável ;)

10mm 14mm7mm<

Page 35: Interfaces Naturais

Lembre-se defisiologia e cinesiologia

Não faça com que os usuários executem tarefas genéricas ou repetitivas.

2

Page 36: Interfaces Naturais
Page 37: Interfaces Naturais

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

Page 38: Interfaces Naturais
Page 39: 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.

4

Page 40: Interfaces Naturais
Page 41: 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 42: Interfaces Naturais
Page 43: Interfaces Naturais

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

6

Page 44: Interfaces Naturais
Page 45: Interfaces Naturais

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

7

Page 46: Interfaces Naturais
Page 47: Interfaces Naturais

Reconhecimento (Affordance)

Utilize gestos simples e intuitivos para atrair usuários a começar a usar o seu sistema.

8

Page 48: Interfaces Naturais
Page 49: 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 50: Interfaces Naturais
Page 51: Interfaces Naturais

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

Page 52: Interfaces Naturais
Page 53: Interfaces Naturais
Page 54: Interfaces Naturais

Variedade de requisitos

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

11

Page 55: Interfaces Naturais
Page 56: Interfaces Naturais
Page 57: Interfaces Naturais

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

12

Page 58: Interfaces Naturais
Page 59: Interfaces Naturais

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

13

Page 60: Interfaces Naturais
Page 61: Interfaces Naturais
Page 62: 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 63: Interfaces Naturais

Obrigado ;)slideshare.net/edu_agni