Alberto Raposo Tecgraf, Depto de Informática., PUC-Rio ...webserver2.tecgraf.puc-rio.br/~abraposo/inf2792/... · • Windows – could be scrolled, stretched, overlapped, opened,

3D User Interfaceshttp://www.tecgraf.puc-rio.br/~abraposo/inf2792/

Aula 01 – Introdução

Alberto Raposo

Tecgraf, Depto de Informática.,PUC-Rio - Rio de Janeiro

Aula 01 – Introdução

abraposo@

Tipos de interface

1980s interfaces

Command

WIMP/GUI

1990s interfaces

Advanced graphical (multimedia, virtual reality, information visualization)

Web

Speech (voice)

Pen

Appliance Appliance

2000s interfaces

Mobile

Gesture and touch

Multimodal

Shareable

2010s interfaces

Multi-touch

Game consoles: Wiimote, Kinect (device-free)

Tangible ?

Augmented and mixed reality ?

Wearable ?

Robotic ?

User Experience

• Como o produto se “comporta” e como é usado pelas pessoas no mundo real– Opinião das pessoas sobre o produto e sua satisfação ao

usá-lo, olhá-lo, manuseá-lo, etc.

– “todo produto que é usado por alguém provê uma experiência de usuário: jornais, garrafas de catchup, roupas, experiência de usuário: jornais, garrafas de catchup, roupas, etc.” (Garrett, 2003)

• Não se pode projetar uma experiência de usuário, mas se pode projetar para uma experiência de usuário

User Experience

experiências

aplicações Interaction

Usability, accessibility

aplicações

ferramentas

componentes Hardware devices

APIs, frameworks, etc.

Interaction

Digital < Interfaces > Real

GUI DesktopMetaphor

TUI

Virtual | Real

Real Desktop + Virtual data

Forms3D

Bodylanguage

Command LineGUI

GUI + Visual & Interactions inspiredin physical laws

Multi-touchWIMP

Virtual data Forms

3D

Hybridinterfaces

Interfaces de comandos

• Commands such as abbreviations (e.g., ls) typed in at the prompt to which the system responds (e.g., listing current files)

• Some are hard wired at keyboard, e.g., delete

• Efficient, precise, and fast• Efficient, precise, and fast

• Large overhead to learning set of commands

• Form, name types and structure are key research questions

• Consistency is most important design principle

– e.g., always use first letter of command

WIMP/GUI interfaces

• Xerox Star: first WIMP

• Windows

– could be scrolled, stretched, overlapped, opened, closed, and moved around the screen using themousemouse

• Icons

– represented applications, objects, commands, and tools that were opened when clicked on

• Menus

– offering lists of options that could be scrolled through and selected

• Pointing device

– a mouse controlling the cursor as a point of entry to the windows, menus, and icons on the screen

Digital < Interfaces > Real

GUI DesktopMetaphor

TUI

Virtual | Real

Real Desktop + Virtual data

Forms3D

Bodylanguage

Command LineGUI

GUI + Visual & Interactions inspiredin physical laws

Multi-touchWIMP

Virtual data Forms

3D

Hybridinterfaces

Desktop PC

• Display do computador como representação visual de

uma mesa onde documentos e pastas são organizados

• Vantagem: organização!

Digital < Interfaces > Real

GUI DesktopMetaphor

TUI

Virtual | Real

Real Desktop + Virtual data

Forms3D

Bodylanguage

Command LineGUI

GUI + Visual & Interactions inspiredin physical laws

Multi-touchWIMP

Virtual data Forms

3D

Hybridinterfaces

Leis físicas

Denoue (2003)WebBook - Card(1996) WebForager- Card(1996)

BumpTop (2006)

Digital < Interfaces > Real

GUI DesktopMetaphor

TUI

Virtual | Real

Real Desktop + Virtual data

Forms3D

Bodylanguage

Command LineGUI

GUI + Visual & Interactions inspiredin physical laws

Multi-touchWIMP

Virtual data Forms

3D

Hybridinterfaces

3D interfaces

• Espaço de um único display é pequeno. Se

considerássemos a equivalência a um desktop físico:

• Soluções:

– Múltiplos monitores

– 3D interfaces

3D interfaces

Microsoft’s Task Gallery Windows Vista

3D Desktops

http://www.youtube.com/watch?v=4QokOwvPxrE&feature=related

Digital < Interfaces > Real

GUI DesktopMetaphor

TUI

Virtual | Real

Real Desktop + Virtual data

Forms3D

Bodylanguage

Command LineGUI

GUI + Visual & Interactions inspiredin physical laws

Multi-touchWIMP

Virtual data Forms

3D

Hybridinterfaces

Escritoire

• Papéis digitais tratados como reais

– Aparência similar

– Interação similar (caneta rastreada)

Digital < Interfaces > Real

GUI DesktopMetaphor

TUI

Virtual | Real

Real Desktop + Virtual data

Forms3D

Bodylanguage

Command LineGUI

GUI + Visual & Interactions inspiredin physical laws

Multi-touchWIMP

Virtual data Forms

3D

Hybridinterfaces

TUI - Tangible User Interfaces

MetaDESK (1997)

Sensetable (2001)

Digital < Interfaces > Real

GUI DesktopMetaphor

TUI

Virtual | Real

Real Desktop + Virtual data

Forms3D

Bodylanguage

Command LineGUI

GUI + Visual & Interactions inspiredin physical laws

Multi-touchWIMP

Virtual data Forms

3D

Hybridinterfaces

Multi-Touch

Microsoft Surface (2007)

SmartSkin(2002)iP*

Digital < Interfaces > Real

GUI DesktopMetaphor

TUI

Virtual | Real

Real Desktop + Virtual data

Forms3D

Bodylanguage

Command LineGUI

GUI + Visual & Interactions inspiredin physical laws

Multi-touchWIMP

Virtual data Forms

3D

Hybridinterfaces

Interface híbridas

• Diferentes formas de interação em um único

espaço de interação

Butz, et al. (1999)Rekimoto and Saitoh (1999)

Digital < Interfaces > Real

GUI DesktopMetaphor

TUI

Virtual | Real

Real Desktop + Virtual data

Forms3D

Bodylanguage

Command LineGUI

GUI + Visual & Interactions inspiredin physical laws

Multi-touchWIMP

Virtual data Forms

3D

Hybridinterfaces

MS Kinect / Wii U

http://www.youtube.com/watch?v=4e3qaPg_keg

E ainda...

• Mobile + AR

E ainda...

• Haptics / tactile interfaces

E ainda...

• Shareable (interfaces compartilhadas)

Smartboard

E ainda...

• Wearable

E ainda...

• Robotic

Giraffe Video Conferencing Robot

E ainda...

• O que mais inventarem

Alguns contínuos que ajudam a entender

• Milgram & Kishino 1994

Mixed Reality (MR)Mixed Reality (MR)

Virtual

Environment

Real

EnvironmentAugmented

Virtuality (AV)

Augmented

Reality (AR)

Definições

• Realidade Virtual (VR):

– “computer generated interactive tridimensional

environment, into which a person is immersed”

– “immersive and interactive experience based on – “immersive and interactive experience based on

3D graphical images generated in real-time by

computers”

– “a form of post-WIMP

interface”

Definições

• Realidade Virtual:

– Combinação de 4 elementos

• Mundo virtual

– Espaço imaginário geralmentemanifestado através de um meio

• Imersão• Imersão

– Mental

– Física: estímulo sintético de sentidos do corpo

• Feedback sensorial

– Baseado na posição física do usuário

» Geralmente feedback visual, às vezes auditivo e háptico (toque)

• Interatividade

– Capacidade de afetar o mundo virtual

Definições

• Realidade Aumentada (AR):

– Um sistema de AR apresenta as seguintes

caracterísitcas

• combina objetos reais e virtuais em um ambiente real

• opera interativamente, em tempo real• opera interativamente, em tempo real

• registra (alinha) objetos reais e virtuais

Definições

• Virtualidade Aumentada:

– Ambiente Virtual aumentado com elementos do

mundo real

E ainda...

• Realidade diminuída

Alguns contínuos que ajudam a entender

• Molina 2008

Mixed Reality (MR)Mixed Virtuality (MV) Mixed Reality (MR)

Virtual

Environment

Real

EnvironmentAugmented

Virtuality (AV)

Augmented

Reality (AR)

Mixed Virtuality (MV)

Digital

Environment Hybrid 2D/3D

interfaces

Molina´s continuun

Molina´s continuun

Molina´s continuun

Looking Glass [Sun]

Molina´s continuun

E, afinal, o que é 3DUI ?

Definição formal de 3DUI

• 3DUIs geralmente não são chamadas por este

nome, mas por outros termos como, por

exemplo, post-WIMP, non-WIMP, post-PC,

Virtual Reality (VR), Virtual Environments

(VE), Augmented Reality (AR), interactive 3D (VE), Augmented Reality (AR), interactive 3D

graphics, ou simplesmente 3-D.

• Todos esses termos estão relacionados ao uso

de tecnologia 3D como uma interface entre o

usuário e o computador, como entrada, saída,

ou ambos.

Definição formal de 3DUI

• 3D como entrada

– Mouse 3D

– Rastreamento

• Cabeça

• Mãos• Mãos

• Movimentos, gestos

– Mapeamento de 3D em dispositivos 2D

• 3D como saída

– Virtual environments

– Estereoscopia

– AR

Definição formal de 3DUI

• Uma definição formal para 3DUI

…a human-computer interface in which the

language used by the user to introduce commands

and information into the computer, and/or the

language used by the computer to present language used by the computer to present

information to the user, are based on the physical

space and its three dimensions.

• Cobre as várias maneiras em que 3DUI pode aparecer

em diferentes tipos de aplicações.

Refinando um pouquinho mais

• Interação 3D: Interação Humano-Computador em que as tarefas do usuário ocorrem em um contexto espacial 3D– Dispositivos de entrada 3D

– Dispositivos de entrada 2D com mapeamento direto para 3D3D

• 3DUI: UI que envolve Interação 3D

• Técnica de interação 3D: método (hardware ou software) que permite ao usuário realizar uma tarefa numa 3DUI

Curso CHI 2008 (D. Bowman et al.) http://people.cs.vt.edu/~bowman/3dui.org/CHI_2008.html

Por que 3D UI é útil?

• Reforça sentimento de imersão

• Usa habilidades naturais do usuário

• Baixa distância cognitiva entre ação e visualização �permite montar modelos mentais complexos

• Problema: o que “funciona” atualmente são interações 3D bem simples: walkthroughs, games, etc. Interações 3D mais complexas (design imersivo, visualização científica, etc) ainda têm muitas limitações de usabilidade

Por que 3DUI demorou tanto?

Fonte: S. Feiner, course notes: http://monet.cs.columbia.edu/courses/csw4172/

BRETAM: Modelo de Evolução da Tecnologia

ko

wn

led

ge

time

B. R. Gaines. Modeling and forecasting the information sciences.Information Sciences: an International Journal, 57-58: 3-22. 1991.

BRETAM: Modelo de Evolução da Tecnologia

VR

AR

BRETAM: VR

1960’s

1970’s-1980’s

1980’s – 1990’s

1990’s – 2000’s

Now

1990’s – 2000’s

BRETAM: AR

1970’s

1980’s – 1990’s

Now

Trabalho para turma 2009.1

• Assim como foi feito para VR e AR, “desenhar” o

modelo BRETAM para o desenvolvimento de 3DUIs,

indicando em que fase nos encontramos hoje e como

os exemplos históricos se encaixam nas fases

anteriores do BRETAM anteriores do BRETAM

– Refs sobre BRETAM

• http://pages.cpsc.ucalgary.ca/~gaines/reports/MFIT/InfSci/index.ht

ml

• B. R. Gaines. Modeling and forecasting the information sciences.

Information Sciences: an International Journal, 57-58: 3-22. 1991.

Multi Touch

1982: Flexible Machine Interface

2007~

1990’s~2000’s

http://www.billbuxton.com/multitouchOverview.html

3DUI no modelo BRETAM3DUI no modelo BRETAM

Rodrigo Veiga

Diversos estágiosDiversos estágios

• 3DUI pode ser encontrada em diversos

estágios do BRETAM, principalmente em:

– Research

– Product Innovation– Product Innovation

– Product Line

– Low-Cost Products

– Depende do tipo de interface que estamos tratando

3DUI 3DUI -- ResearchResearch

• Variação de dispositivos

• “Finger Tracks”

3DUI 3DUI –– Product InnovationProduct Innovation

• Entrevistas por “holograma” (usadas pela

CNN)

• Sonda usada em marte• Sonda usada em marte

• Wearable

3DUI 3DUI –– Product LinesProduct Lines

• MS Surface Table

• Captura de movimentos 3d

(para jogos de simulação)

• Wii

• Wii Fit?

3DUI 3DUI –– Low Cost ProductsLow Cost Products

• Multitouch em celulares

• Utilização de acelerômetro para detectar

posiçõesposições

• “Fliperamas” 3D (luta, futebol, etc)