PROJETANDO INTERFACES IMERSIVAS
1º UX UAI - BH
Projetando interfaces imersivas
BRUNO CASTRO
UX & UI designer na TakeNet
CURIOSO por natureza
aficionado por FICÇÃO CINTÍFICA
brunocastro linkedbruno
INTRODUÇÃO
IMERSÃO (REALIDADE VIRTUAL), DEFINIÇÃO
“A imersão em realidade virtual é uma percepção de estar fisicamente presente
em um mundo não-físico. Essa percepção acontece através de sistemas de
imagens em VR, sons ou outros estímulos que proporcionam um ambiente
totalmente envolvente.” #sinestesia
4
INTERFACES SCI-FI
PROJETANDO INTERFACES IMERSIVAS
Projetando interfaces imersivas
CONTEXTUALIZAÇÃO
CATÁLOGO FUI*
o primeiro objectivo deste trabalho é coletar e expor
uma compilação de interações gestuais em filmes de
ficção científica, proporcionando um catálogo para
pesquisadores como recurso para discussões futuras.
O segundo objetivo é classificar os dados recolhidos
de acordo com uma série de critérios
*Fantasy User Interface
Sci-Fi Gestures Catalog 

http://www.cin.ufpe.br/~gesturescatalog/
#SAIBAMAIS
7
TODOS PRONTOS?
PROJETANDO INTERFACES IMERSIVAS
DESIGNER DE REALIDADES AUMENTADAS
Como o avanço das tecnologias de realidade
aumentada, Surgirão novas camadas de
informação sobre o mundo físico, sem
separações aparentes. Isto abrirá uma crescente
demanda por designers que podem projetar
experiências intuitivas e envolventes em uma
grande gama de aplicações…
Gavin Kelly

co-fundador e diretor da Artefacto
fonte: FastCo - Most Important Design Jobs Of The Future
INTERESSE NO GOOGLE
Virtual Reality Augmented Reality Oculus Rift Samsung Gear VR Cardboard
fonte:Google trends
10
ROADMAP DO FACEBOOK
fonte:Newsroom Facebook
11
[…]continuar trabalhando na evolução
das interfaces de realidade virtual e
realidade aumentada, que vão permitir
que amigos que não estejam no mesmo
espaço físico possam colaborar como se
estivessem no mesmo local.
Mark Zuckerberg

CEO e fundador do Facebook
Projetando interfaces imersivas
PRIMEIROS PASSOS
PROJETANDO INTERFACES IMERSIVAS
PRIMEIROS PASSOS
FISIOLOGIA
Planejar realidade virtual envolve questões
fisiológicas. Como em simuladores de vôo, VR
tem o potencial de apresentar descasamentos
entre a sensação de movimento físicos e visuais.
Isso pode produzir náuseas, quando seus olhos
captam um movimento, mas seu corpo não.
Designing for Google Cardboard > Physiological considerations

http://www.google.com/design/spec-vr/designing-for-google-cardboard
#SAIBAMAIS
15
‣ Movimento de cabeça
‣ Movimentos do usuário
‣ Velocidade constante
‣ Correspondência com objetos fixos
‣ Alterações de brilho
( ! ) ESTEJA ATENTO
PRIMEIROS PASSOS
Design for all 5 senses - Jinsop Lee

https://www.ted.com/talks/jinsop_lee_design_for_all_5_senses
#SAIBAMAIS
SINESTESIA
Sinestesia (do grego "união" ou "junção" e
"sensação") é a relação de planos sensoriais
diferentes: Por exemplo, o gosto com o cheiro, ou
a visão com o tato. O termo é usado para
descrever uma figura de linguagem e uma série
de fenômenos provocados por uma condição
neurológica.
16
PRIMEIROS PASSOS
FLOW (FLUXO)
Estado mental de operação em
que a pessoa está totalmente
imersa no que está fazendo,
caracterizado por um sentimento
de total envolvimento e sucesso
no processo da atividade. […] as
pessoas praticamente "se tornam
parte da atividade"
Mihaly Csikszentmihalyi sobre o estado de Flow

https://www.ted.com/talks/
mihaly_csikszentmihalyi_on_flow
#SAIBAMAIS
‣ Objetivos claros (expectativas e regras são discerníveis).
‣ Concentração e foco (concentração em limitado campo de atenção).
‣ Perda do sentimento de auto-consciência.
‣ Sensação de tempo distorcida.
‣ Feedback direto e imediato.
‣ Equilíbrio entre o nível de habilidade e de desafio.
‣ A sensação de controle pessoal sobre a situação ou a atividade.
‣ A atividade é em si recompensadora, não exigindo esforço algum.
‣ Se tornam parte da atividade
COMPONENTES DO ESTADO DE FLOW
17
PRIMEIROS PASSOS
GOOGLE CARD BOARD
▸ Get CardBoard
▸ Apps
▸ Desenvelopers
▸ JUMP
▸ Manufactures
www.google.com/get/cardboard/
18
PRIMEIROS PASSOS
DESIGNING FOR GOOGLE CARDBOARD
1. Designing for Google Cardboard
▸ A new dimension
▸ Physiological considerations
2. Interactive patterns
▸ Setup
▸ Controls
▸ Feedback
▸ Display reticle
www.google.com/design/spec-vr/
19
PRIMEIROS PASSOS
FACEBOOK360
facebook360.fb.com/learn/
1. Home
2. Learn
▸ Getting Started
▸ Publishing on FB
▸ Surround 360
▸ Cameras
▸ FAQs
▸ Discover
3. Discover
‣ Better Practices
‣ Community Stories
20
PESQUISAS
PROJETANDO INTERFACES IMERSIVAS
IDEO LABS 

HOW WE DID IT: PROTOTYPING IN VIRTUAL REALITY
labs.ideo.com/2016/03/07/how-we-did-it-prototyping-in-virtual-reality/
https://www.artefactgroup.com/work/vr-2020-inclusive-vision-virtual-reality/
ARTEFACT GROUP

VR 2020: A MORE INCLUSIVE VISION FOR VIRTUAL REALITY
https://developer.oculus.com/
blog/the-art-of-presence-and-
immersion-in-the-climb/
OCULUS BLOG

THE ART OF PRESENCE AND
IMMERSION IN THE CLIMB
brunocastro linkedbruno
OBRIGADO,
Dúvidas, falecomigo@brunocastro.me
Mais em: https://goo.gl/Grbn21

Mais conteúdo relacionado

PPTX
CSS Grid Layout na prática
PPTX
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
PPTX
Design e usabilidade - Fundamentos
PPTX
Aula 3 - Fatores Humanos
PDF
Contribuições epistemológicasdo e mbodiment na ergonomia cognitiva
PDF
A imersão na experiência digital
PPT
Aula ilusões de óptica
PPT
Percepção das Tecnologias
CSS Grid Layout na prática
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Design e usabilidade - Fundamentos
Aula 3 - Fatores Humanos
Contribuições epistemológicasdo e mbodiment na ergonomia cognitiva
A imersão na experiência digital
Aula ilusões de óptica
Percepção das Tecnologias

Semelhante a Projetando interfaces imersivas (10)

PDF
Do monitor à caverna digital: experiências de imersão no contexto virtual
PDF
Anim2 Aula01 Percepcao
PPT
Gilbert Cardoso Bouyer Embodiment
PDF
Laiv2009
PDF
Estudos Conceptuais
PDF
2501_Curso de Extensão-Criatividade_Encontro 02.pdf
PDF
Do Modus Operandi ao Modus Vivendi: uma nova percepção de interfaces
PDF
HCI - Conceptual Model
PDF
Caderno Entrever
DOCX
Visibilidade mediática cibercultural: apontamentos sobre a fenomenologia do "...
Do monitor à caverna digital: experiências de imersão no contexto virtual
Anim2 Aula01 Percepcao
Gilbert Cardoso Bouyer Embodiment
Laiv2009
Estudos Conceptuais
2501_Curso de Extensão-Criatividade_Encontro 02.pdf
Do Modus Operandi ao Modus Vivendi: uma nova percepção de interfaces
HCI - Conceptual Model
Caderno Entrever
Visibilidade mediática cibercultural: apontamentos sobre a fenomenologia do "...
Anúncio

Último (16)

PDF
introdução ao design gráfico 101 explicação detalhes
PPTX
Frontend : conceitos e aplicações- 01.pptx
PPTX
UhujuuuujuivvuvuvuvvAULA-SAUDE-DA-MULHER.pptx
PPTX
CUBISMO, o ensino de artes no ensino médio.pptx
PPTX
Plano cartesiano_ coordenadas no 1º quadrante.pptx
PDF
-Esbocos-no-evangelho-de-lucas.pdfffffffff
PDF
inteligenciacompetitiva-contextualizao-1.pdf
PDF
Metodologia projetual na construção de Ilustrações
PPTX
donsespirituais-estudodomingo-250530161307-cdc825db.pptx
PDF
12ª edição do Fórum Nacional de Design para Revestimentos Cerâmicos
PPTX
introduobblica-121003071240-phpapp02.pptx
PDF
Inflamação Aguda.pdfassasasasasasasasssassa
PDF
molde do jake de hora de aventura feito por IA
PDF
Exemplo de organograma de ecrã 2025-04-13 à(s) 21.23.42.pdf
PDF
Fitogeografia_.pdfSSSSSDGEIGARFsksososkdkid
PPTX
Chamada oral geo.pptx_Chamada oral feita PPT
introdução ao design gráfico 101 explicação detalhes
Frontend : conceitos e aplicações- 01.pptx
UhujuuuujuivvuvuvuvvAULA-SAUDE-DA-MULHER.pptx
CUBISMO, o ensino de artes no ensino médio.pptx
Plano cartesiano_ coordenadas no 1º quadrante.pptx
-Esbocos-no-evangelho-de-lucas.pdfffffffff
inteligenciacompetitiva-contextualizao-1.pdf
Metodologia projetual na construção de Ilustrações
donsespirituais-estudodomingo-250530161307-cdc825db.pptx
12ª edição do Fórum Nacional de Design para Revestimentos Cerâmicos
introduobblica-121003071240-phpapp02.pptx
Inflamação Aguda.pdfassasasasasasasasssassa
molde do jake de hora de aventura feito por IA
Exemplo de organograma de ecrã 2025-04-13 à(s) 21.23.42.pdf
Fitogeografia_.pdfSSSSSDGEIGARFsksososkdkid
Chamada oral geo.pptx_Chamada oral feita PPT
Anúncio

Projetando interfaces imersivas

  • 3. BRUNO CASTRO UX & UI designer na TakeNet CURIOSO por natureza aficionado por FICÇÃO CINTÍFICA brunocastro linkedbruno
  • 4. INTRODUÇÃO IMERSÃO (REALIDADE VIRTUAL), DEFINIÇÃO “A imersão em realidade virtual é uma percepção de estar fisicamente presente em um mundo não-físico. Essa percepção acontece através de sistemas de imagens em VR, sons ou outros estímulos que proporcionam um ambiente totalmente envolvente.” #sinestesia 4
  • 7. CONTEXTUALIZAÇÃO CATÁLOGO FUI* o primeiro objectivo deste trabalho é coletar e expor uma compilação de interações gestuais em filmes de ficção científica, proporcionando um catálogo para pesquisadores como recurso para discussões futuras. O segundo objetivo é classificar os dados recolhidos de acordo com uma série de critérios *Fantasy User Interface Sci-Fi Gestures Catalog 
 http://www.cin.ufpe.br/~gesturescatalog/ #SAIBAMAIS 7
  • 9. DESIGNER DE REALIDADES AUMENTADAS Como o avanço das tecnologias de realidade aumentada, Surgirão novas camadas de informação sobre o mundo físico, sem separações aparentes. Isto abrirá uma crescente demanda por designers que podem projetar experiências intuitivas e envolventes em uma grande gama de aplicações… Gavin Kelly
 co-fundador e diretor da Artefacto fonte: FastCo - Most Important Design Jobs Of The Future
  • 10. INTERESSE NO GOOGLE Virtual Reality Augmented Reality Oculus Rift Samsung Gear VR Cardboard fonte:Google trends 10
  • 12. […]continuar trabalhando na evolução das interfaces de realidade virtual e realidade aumentada, que vão permitir que amigos que não estejam no mesmo espaço físico possam colaborar como se estivessem no mesmo local. Mark Zuckerberg
 CEO e fundador do Facebook
  • 15. PRIMEIROS PASSOS FISIOLOGIA Planejar realidade virtual envolve questões fisiológicas. Como em simuladores de vôo, VR tem o potencial de apresentar descasamentos entre a sensação de movimento físicos e visuais. Isso pode produzir náuseas, quando seus olhos captam um movimento, mas seu corpo não. Designing for Google Cardboard > Physiological considerations
 http://www.google.com/design/spec-vr/designing-for-google-cardboard #SAIBAMAIS 15 ‣ Movimento de cabeça ‣ Movimentos do usuário ‣ Velocidade constante ‣ Correspondência com objetos fixos ‣ Alterações de brilho ( ! ) ESTEJA ATENTO
  • 16. PRIMEIROS PASSOS Design for all 5 senses - Jinsop Lee
 https://www.ted.com/talks/jinsop_lee_design_for_all_5_senses #SAIBAMAIS SINESTESIA Sinestesia (do grego "união" ou "junção" e "sensação") é a relação de planos sensoriais diferentes: Por exemplo, o gosto com o cheiro, ou a visão com o tato. O termo é usado para descrever uma figura de linguagem e uma série de fenômenos provocados por uma condição neurológica. 16
  • 17. PRIMEIROS PASSOS FLOW (FLUXO) Estado mental de operação em que a pessoa está totalmente imersa no que está fazendo, caracterizado por um sentimento de total envolvimento e sucesso no processo da atividade. […] as pessoas praticamente "se tornam parte da atividade" Mihaly Csikszentmihalyi sobre o estado de Flow
 https://www.ted.com/talks/ mihaly_csikszentmihalyi_on_flow #SAIBAMAIS ‣ Objetivos claros (expectativas e regras são discerníveis). ‣ Concentração e foco (concentração em limitado campo de atenção). ‣ Perda do sentimento de auto-consciência. ‣ Sensação de tempo distorcida. ‣ Feedback direto e imediato. ‣ Equilíbrio entre o nível de habilidade e de desafio. ‣ A sensação de controle pessoal sobre a situação ou a atividade. ‣ A atividade é em si recompensadora, não exigindo esforço algum. ‣ Se tornam parte da atividade COMPONENTES DO ESTADO DE FLOW 17
  • 18. PRIMEIROS PASSOS GOOGLE CARD BOARD ▸ Get CardBoard ▸ Apps ▸ Desenvelopers ▸ JUMP ▸ Manufactures www.google.com/get/cardboard/ 18
  • 19. PRIMEIROS PASSOS DESIGNING FOR GOOGLE CARDBOARD 1. Designing for Google Cardboard ▸ A new dimension ▸ Physiological considerations 2. Interactive patterns ▸ Setup ▸ Controls ▸ Feedback ▸ Display reticle www.google.com/design/spec-vr/ 19
  • 20. PRIMEIROS PASSOS FACEBOOK360 facebook360.fb.com/learn/ 1. Home 2. Learn ▸ Getting Started ▸ Publishing on FB ▸ Surround 360 ▸ Cameras ▸ FAQs ▸ Discover 3. Discover ‣ Better Practices ‣ Community Stories 20
  • 22. IDEO LABS 
 HOW WE DID IT: PROTOTYPING IN VIRTUAL REALITY labs.ideo.com/2016/03/07/how-we-did-it-prototyping-in-virtual-reality/ https://www.artefactgroup.com/work/vr-2020-inclusive-vision-virtual-reality/ ARTEFACT GROUP
 VR 2020: A MORE INCLUSIVE VISION FOR VIRTUAL REALITY https://developer.oculus.com/ blog/the-art-of-presence-and- immersion-in-the-climb/ OCULUS BLOG
 THE ART OF PRESENCE AND IMMERSION IN THE CLIMB