SlideShare ist ein Scribd-Unternehmen logo
1 von 63
Downloaden Sie, um offline zu lesen
Interfaces Naturais
@eduagni
Edu Agni

Designer especialista em User Experience.
Trabalha há treze anos com projetos nas
áreas de arquitetura de informação,
usabilidade e design responsivo.
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
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.
linha de comando
• Textual
• Abstrata
• Teclado QWERTY
Interface Gráfica
• Gráfica
• Indireta
• Mouse / Ponteiro
Interface Natural
• Física
• Direta
• Gestual
Compreender o
contexto de uso
Interfaces Naturais
Interfaces Naturais
Mobile = smartphones & tablets
https://www.youtube.com/watch?v=6Cf7IL_eZ38
Mobility
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
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
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
Interfaces Naturais
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.
Mais do que tecnologia: 

entender o contexto é a chave
para criar boas experiências.
Princípios Básicos do Design
de Interfaces Naturais
Dan Saffer se deparou com a seguinte
pergunta no Quora: What are the basic
principles of NUI (Natural User
Interface) Design?
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
7mm 10mm 14mm<
#sqn
10mm 14mm7mm<
Tá tranquilo :)
10mm 14mm7mm<
Tá favorável ;)
10mm 14mm7mm<
Lembre-se de

fisiologia e cinesiologia
Não faça com que os usuários
executem tarefas genéricas ou
repetitivas.
2
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
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
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
Interfaces Naturais
Quanto mais desafiador for o
gesto, menos pessoas serão
capazes de (ou desejarão)
realizá-lo.
6
Interfaces Naturais
Ativar ações quando o usuário
remover o dedo, e não
enquanto toca a tela.
7
Interfaces Naturais
Reconhecimento 

(Affordance)
Utilize gestos simples e intuitivos
para atrair usuários a começar a
usar o seu sistema.
8
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
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
Interfaces Naturais
Interfaces Naturais
Variedade de requisitos
Há uma grande variedade de
maneiras de realizar um mesmo
gesto. Esteja preparado para isso.
11
Interfaces Naturais
Interfaces Naturais
Determinar a complexidade 

do gesto de acordo com a
complexidade e a frequência 

da tarefa
12
Interfaces Naturais
O quanto antes você puder
fazer um protótipo testável
para avaliar com usuários,
faça. E teste.
13
Interfaces Naturais
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.”
Obrigado ;)
slideshare.net/edu_agni

Weitere ähnliche Inhalte

Was ist angesagt?

Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Edu Agni
 
IHM- User Experience
IHM- User ExperienceIHM- User Experience
IHM- User ExperienceRocristina
 
Usabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceUsabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceEdu Agni
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuárioVictor Rubens
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisJane Vita
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digitalMarconi Pacheco
 
Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioEdu Agni
 
Digital Day BH - Microinterações
Digital Day BH - MicrointeraçõesDigital Day BH - Microinterações
Digital Day BH - MicrointeraçõesAnderson Façanha
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores Monica Mesquita
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UXEdu Agni
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UXEdu Agni
 
Usabilidade para sistemas
Usabilidade para sistemasUsabilidade para sistemas
Usabilidade para sistemasanatofol
 
Palestra ux e ui
Palestra ux e uiPalestra ux e ui
Palestra ux e uiDirect Talk
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
 

Was ist angesagt? (20)

Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
 
IHM- User Experience
IHM- User ExperienceIHM- User Experience
IHM- User Experience
 
DevUX
DevUXDevUX
DevUX
 
Ux para desenvolvedores
Ux para desenvolvedoresUx para desenvolvedores
Ux para desenvolvedores
 
Usabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceUsabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerce
 
style guide ui
style guide uistyle guide ui
style guide ui
 
Ux vs Ui
Ux vs UiUx vs Ui
Ux vs Ui
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no Usuário
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
Digital Day BH - Microinterações
Digital Day BH - MicrointeraçõesDigital Day BH - Microinterações
Digital Day BH - Microinterações
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
Experiencia do usuario
Experiencia do usuarioExperiencia do usuario
Experiencia do usuario
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UX
 
Usabilidade para sistemas
Usabilidade para sistemasUsabilidade para sistemas
Usabilidade para sistemas
 
Palestra ux e ui
Palestra ux e uiPalestra ux e ui
Palestra ux e ui
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 

Andere mochten auch

Pesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaPesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaEdu Agni
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEOEdu Agni
 
Jornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceJornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceEdu Agni
 
Design Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalDesign Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalEdu Agni
 
Design Livre - Como o software livre pode influenciar o design de produtos
Design Livre - Como o software livre pode influenciar o design de produtosDesign Livre - Como o software livre pode influenciar o design de produtos
Design Livre - Como o software livre pode influenciar o design de produtosHenrique Monnerat
 
Criando um Hotsite em 30 min. com Gimp!
Criando um Hotsite em 30 min. com Gimp!Criando um Hotsite em 30 min. com Gimp!
Criando um Hotsite em 30 min. com Gimp!Luiz Bruno Vianna
 
Arquitetura da informação
Arquitetura da informação Arquitetura da informação
Arquitetura da informação Leonardo Foletto
 
Pesquisa de Campo em Design de Interação
Pesquisa de Campo em Design de InteraçãoPesquisa de Campo em Design de Interação
Pesquisa de Campo em Design de InteraçãoUTFPR
 
A evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosA evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosEdu Agni
 
Designing Multi-Device Experiences: An Ecosystem Approach
Designing Multi-Device Experiences: An Ecosystem ApproachDesigning Multi-Device Experiences: An Ecosystem Approach
Designing Multi-Device Experiences: An Ecosystem ApproachMichal Levin
 
Pesquisa De Campo
Pesquisa De CampoPesquisa De Campo
Pesquisa De Campoalenezzi
 
Design Emocional
Design EmocionalDesign Emocional
Design EmocionalEdu Agni
 
Gamificando a Experiência Digital
Gamificando a Experiência DigitalGamificando a Experiência Digital
Gamificando a Experiência DigitalEdu Agni
 
Slide da pesquisa de campo
Slide da pesquisa de campoSlide da pesquisa de campo
Slide da pesquisa de campoThais Emanuela
 

Andere mochten auch (19)

Pesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaPesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-Estruturada
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEO
 
Jornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceJornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerce
 
Design Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalDesign Emocional e a Experiência Digital
Design Emocional e a Experiência Digital
 
Design Livre - Como o software livre pode influenciar o design de produtos
Design Livre - Como o software livre pode influenciar o design de produtosDesign Livre - Como o software livre pode influenciar o design de produtos
Design Livre - Como o software livre pode influenciar o design de produtos
 
Apresentação aptana
Apresentação aptanaApresentação aptana
Apresentação aptana
 
Criando um Hotsite em 30 min. com Gimp!
Criando um Hotsite em 30 min. com Gimp!Criando um Hotsite em 30 min. com Gimp!
Criando um Hotsite em 30 min. com Gimp!
 
Software livre
Software livreSoftware livre
Software livre
 
Arquitetura da informação
Arquitetura da informação Arquitetura da informação
Arquitetura da informação
 
Pesquisa de Campo em Design de Interação
Pesquisa de Campo em Design de InteraçãoPesquisa de Campo em Design de Interação
Pesquisa de Campo em Design de Interação
 
A evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosA evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessários
 
Pesquisa de Campo
Pesquisa de CampoPesquisa de Campo
Pesquisa de Campo
 
Designing Multi-Device Experiences: An Ecosystem Approach
Designing Multi-Device Experiences: An Ecosystem ApproachDesigning Multi-Device Experiences: An Ecosystem Approach
Designing Multi-Device Experiences: An Ecosystem Approach
 
Pesquisa de campo alcicleide
Pesquisa de campo alcicleidePesquisa de campo alcicleide
Pesquisa de campo alcicleide
 
Pesquisa De Campo
Pesquisa De CampoPesquisa De Campo
Pesquisa De Campo
 
Pesquisa de campo
Pesquisa de campoPesquisa de campo
Pesquisa de campo
 
Design Emocional
Design EmocionalDesign Emocional
Design Emocional
 
Gamificando a Experiência Digital
Gamificando a Experiência DigitalGamificando a Experiência Digital
Gamificando a Experiência Digital
 
Slide da pesquisa de campo
Slide da pesquisa de campoSlide da pesquisa de campo
Slide da pesquisa de campo
 

Ähnlich wie Interfaces Naturais

Ähnlich wie Interfaces Naturais (20)

Heurísticas de usabilidade
Heurísticas de usabilidadeHeurísticas de usabilidade
Heurísticas de usabilidade
 
Cenários de futuro
Cenários de futuroCenários de futuro
Cenários de futuro
 
Campus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidadeCampus Mobile 2013 - Design e usabilidade
Campus Mobile 2013 - Design e usabilidade
 
Sistemas Exploráveis - Campus Party
Sistemas Exploráveis - Campus PartySistemas Exploráveis - Campus Party
Sistemas Exploráveis - Campus Party
 
Estudos Conceptuais
Estudos ConceptuaisEstudos Conceptuais
Estudos Conceptuais
 
Design de interação
Design de interaçãoDesign de interação
Design de interação
 
Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1
 
9 regras usabilidade
9 regras usabilidade9 regras usabilidade
9 regras usabilidade
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototype
 
Computação Ubíqua e Pervasiva
Computação Ubíqua e PervasivaComputação Ubíqua e Pervasiva
Computação Ubíqua e Pervasiva
 
Addtech - Usabilidade
Addtech - UsabilidadeAddtech - Usabilidade
Addtech - Usabilidade
 
Heurística de Nielsen
Heurística de NielsenHeurística de Nielsen
Heurística de Nielsen
 
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
Heurísticas e vieses: Como utilizar em seus projetos? - UX Café 02
 
Teoria da interactividade
Teoria da interactividadeTeoria da interactividade
Teoria da interactividade
 
Usabilidade
UsabilidadeUsabilidade
Usabilidade
 
Apresentacao
ApresentacaoApresentacao
Apresentacao
 
Artigo ihc1
Artigo ihc1Artigo ihc1
Artigo ihc1
 
Usabilidade
UsabilidadeUsabilidade
Usabilidade
 
Heuristicas De Nielsen
Heuristicas De NielsenHeuristicas De Nielsen
Heuristicas De Nielsen
 
Usabilidade aplicada a dispositivos móveis
Usabilidade aplicada a dispositivos móveisUsabilidade aplicada a dispositivos móveis
Usabilidade aplicada a dispositivos móveis
 

Mehr von Edu Agni

Emancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEmancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEdu Agni
 
Ensino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEnsino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEdu Agni
 
Inovação e User Experience
Inovação e User ExperienceInovação e User Experience
Inovação e User ExperienceEdu Agni
 
UX Maturity
UX MaturityUX Maturity
UX MaturityEdu Agni
 
A imersão na experiência digital
A imersão na experiência digitalA imersão na experiência digital
A imersão na experiência digitalEdu Agni
 
Social interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasSocial interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasEdu Agni
 

Mehr von Edu Agni (6)

Emancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEmancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do Design
 
Ensino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEnsino do design em tempos de quarentena
Ensino do design em tempos de quarentena
 
Inovação e User Experience
Inovação e User ExperienceInovação e User Experience
Inovação e User Experience
 
UX Maturity
UX MaturityUX Maturity
UX Maturity
 
A imersão na experiência digital
A imersão na experiência digitalA imersão na experiência digital
A imersão na experiência digital
 
Social interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasSocial interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoas
 

Interfaces Naturais