PROJETANDO INTERFACES IMERSIVAS
1º UX UAI - BH
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
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
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

Projetando interfaces imersivas

  • 1.
  • 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
  • 5.
  • 7.
    CONTEXTUALIZAÇÃO CATÁLOGO FUI* o primeiroobjectivo 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
  • 8.
  • 9.
    DESIGNER DE REALIDADESAUMENTADAS 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 VirtualReality Augmented Reality Oculus Rift Samsung Gear VR Cardboard fonte:Google trends 10
  • 11.
  • 12.
    […]continuar trabalhando naevoluçã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
  • 14.
  • 15.
    PRIMEIROS PASSOS FISIOLOGIA Planejar realidadevirtual 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 forall 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) Estadomental 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 CARDBOARD ▸ Get CardBoard ▸ Apps ▸ Desenvelopers ▸ JUMP ▸ Manufactures www.google.com/get/cardboard/ 18
  • 19.
    PRIMEIROS PASSOS DESIGNING FORGOOGLE 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
  • 21.
  • 22.
    IDEO LABS 
 HOWWE 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
  • 23.