Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interfaces Naturais

1,194 views

Published on

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

Published in: Design

Interfaces Naturais

  1. 1. Interfaces
 Naturais
  2. 2. Edu Agni é designer especialista em User Experience. Trabalha há treze anos com projetos nas áreas de design e usabilidade.
  3. 3. http://www.youtube.com/watch?v=ndkIP7ec3O8
  4. 4. O total de pessoas acessando a web através de dispositivos móveis superou o acesso via desktop em 2015.
  5. 5. Projetando
 Interfaces 
 Naturais
  6. 6. 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.
  7. 7. 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.
  8. 8. 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
  9. 9. 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
  10. 10. Compreender o contexto de uso
  11. 11. Contexto de uso Desktop 1. Atenção elevada 2. Tela grande 3. Conexão rápida 4. Posição estática
  12. 12. Contexto de uso Mobile 1. Pouca atenção 2. Tela pequena 3. Conexão lenta 4. Posição dinâmica
  13. 13. 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.
  14. 14. Mais do que tecnologia: 
 entender o contexto é a chave para criar boas experiências.
  15. 15. Princípios Básicos do Design de Interfaces Naturais
  16. 16. 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).
  17. 17. 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.
  18. 18. 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
  19. 19. < 8mm 10mm 14mm
  20. 20. #sqn < 8mm 10mm 14mm
  21. 21. Tá tranquilo :) < 8mm 10mm 14mm
  22. 22. Tá favorável ;) < 8mm 10mm 14mm
  23. 23. Lembre-se de
 fisiologia e cinesiologia Não faça com que os usuários executem tarefas genéricas ou repetitivas. 2
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. Quanto mais desafiador for o gesto, menos pessoas serão capazes de (ou desejarão) realizá-lo.6
  28. 28. Ativar ações quando o usuário remover o dedo, e não enquanto toca a tela.7
  29. 29. Reconhecimento (Affordance) Utilize gestos simples e intuitivos para atrair usuários a começar a usar o seu sistema.8
  30. 30. 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
  31. 31. 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
  32. 32. Variedade de requisitos Há uma grande variedade de maneiras de realizar um mesmo gesto. Esteja preparado para isso. 11
  33. 33. 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
  34. 34. Brad Frost “Repeat after me: Mobile Users will do anything and everything desktop users will do, provided it's presented in a usable way.”
  35. 35. Obrigado! @eduagni

×