Interfaces Naturais
Transcript of Interfaces Naturais
![Page 1: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/1.jpg)
InterfacesNaturais
![Page 2: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/2.jpg)
Edu Agni é designer especialista em User Experience. Trabalha há treze anos com projetos
nas áreas de design e usabilidade.
![Page 3: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/3.jpg)
![Page 4: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/4.jpg)
![Page 6: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/6.jpg)
![Page 7: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/7.jpg)
![Page 8: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/8.jpg)
![Page 9: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/9.jpg)
![Page 10: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/10.jpg)
O total de pessoas acessando a web através de dispositivos móveis superou o acesso via desktop em 2015.
![Page 11: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/11.jpg)
![Page 12: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/12.jpg)
![Page 13: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/13.jpg)
ProjetandoInterfaces Naturais
![Page 14: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/14.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/15.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/16.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/17.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/18.jpg)
Compreender o contexto de uso
![Page 19: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/19.jpg)
![Page 20: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/20.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/21.jpg)
![Page 22: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/22.jpg)
Contexto de uso Mobile 1. Pouca atenção 2. Tela pequena 3. Conexão lenta 4. Posição dinâmica
![Page 23: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/23.jpg)
![Page 24: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/24.jpg)
![Page 25: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/25.jpg)
![Page 26: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/26.jpg)
![Page 27: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/27.jpg)
![Page 28: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/28.jpg)
![Page 29: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/29.jpg)
![Page 30: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/30.jpg)
![Page 31: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/31.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/32.jpg)
Mais do que tecnologia: entender o contexto é a chave para criar boas experiências.
![Page 33: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/33.jpg)
Princípios Básicos do Design de Interfaces Naturais
![Page 34: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/34.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/35.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/36.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/37.jpg)
< 8mm 10mm 14mm
![Page 38: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/38.jpg)
#sqn
< 8mm 10mm 14mm
![Page 39: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/39.jpg)
Tá tranquilo :)
< 8mm 10mm 14mm
![Page 40: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/40.jpg)
Tá favorável ;)
< 8mm 10mm 14mm
![Page 41: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/41.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/42.jpg)
![Page 43: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/43.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/44.jpg)
![Page 45: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/45.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/46.jpg)
![Page 47: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/47.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/48.jpg)
![Page 49: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/49.jpg)
Quanto mais desafiador for o gesto, menos pessoas serão capazes de (ou desejarão) realizá-lo.6
![Page 50: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/50.jpg)
![Page 51: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/51.jpg)
Ativar ações quando o usuário remover o dedo, e não enquanto toca a tela.7
![Page 52: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/52.jpg)
![Page 53: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/53.jpg)
Reconhecimento (Affordance) Utilize gestos simples e intuitivos para atrair usuários a começar a usar o seu sistema.8
![Page 54: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/54.jpg)
![Page 55: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/55.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/56.jpg)
![Page 57: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/57.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/58.jpg)
![Page 59: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/59.jpg)
![Page 60: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/60.jpg)
Variedade de requisitos Há uma grande variedade de maneiras de realizar um mesmo gesto. Esteja preparado para isso.
11
![Page 61: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/61.jpg)
![Page 62: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/62.jpg)
![Page 63: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/63.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/64.jpg)
![Page 65: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/65.jpg)
![Page 66: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/66.jpg)
![Page 67: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/67.jpg)
![Page 68: Interfaces Naturais](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/68.jpg)
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](https://reader031.fdocumentos.tips/reader031/viewer/2022030315/5882ef811a28ab3f1e8b561f/html5/thumbnails/69.jpg)
Obrigado!@eduagni