O documento discute a visualização de informação e interação homem-máquina. Apresenta os conceitos de comunicação visual e visualização de dados, destacando a importância de representar informações de forma estruturada e compreensível. Também aborda a evolução das interfaces digitais desde os cartões perfurados até interfaces mais naturais e a realidade aumentada.

1. Visualização de Informação
+ Interacção Homem-Máquina
Realizado
por:
Celso
Alexandre
/
João
Simão
/
Tiago
Valente

2. Perspectiva Geral
COMUNICAÇÃO
VISUAL
&
VISUALIZAÇÃO
DE
INFORMAÇÃO
«
O
que
é?
«
Como
se
relaciona
com
a
informação?
«
Para
que
serve?
INTERACÇÃO
HOMEM-­‐MÁQUINA
«
Em
que
consiste?
«
Qual
a
uUlidade?
«
Exemplos
IMPACTO
E
EVOLUÇÃO
DA
VISUALIZAÇÃO
DE
DADOS
DIGITAIS
«
Os
primórdios
«
As
CLI
«
As
GUI
«
Ambientes
Imersivos
e
NUI
«
O
futuro
EXEMPLOS

3. Visualização de Informação
“
INFORMATION VISUALIZATION PROMISES TO HELP US
SPEED OUR UNDERSTANDING AND ACTION
IN A WORLD OF INCREASING INFORMATION VOLUMES
”
[Card,
2008,
p.
542]

4. Visualização de Informação
“
REPRESENTAÇÃO VISUAL DE QUANTIDADES
SIGNIFICATIVAS DE DADOS ABSTRACTOS,
DE FORMA ESTRUTURADA
”

5. Comunicação Visual
çã o
informa
visual
“
TRANSMISSÃO DE INFORMAÇÃO ATRAVÉS DE UM MEIO
VISUAL: CORES, FORMAS, ORGANIZAÇÃO ESPACIAL ”

6. Informação Digital
“
INFORMAÇÃO REPRESENTADA ATRAVÉS DE BITS
(CONJUNTOS DE 0 E 1) ”
NÃO É INFORMAÇÃO VISUAL
necessário um dispositivo de visualização para efectuar a conversão e.g. LCD

7. ÊNFASE
NOS
DADOS
ORGANIZAÇÃO
E
COMPREENSÃO
VISUAL
IZAÇÃO
DE
DADOS
COMUNICAÇÃO
VISUAL
ÊNFASE
NA
INFORMAÇÃO
VISUAL
VALORIZAÇÃO
ESTÉTICA

8. Utilidade da Comunicação Visual
SIMPLIFICAR
REPRESENTAR
CONDENSAR
REALÇAR
MENOS
DEPENDENTE
MAIS
DO
IDOMA
UNIVERSAL

9. Utilidade da Visualização de Dados
UM EXEMPLO:
TEORIA DOS SEIS GRAUS DE SEPARAÇÃO
qualquer
indivíduo
encontra-­‐se
separado
de
outro
por,
no
máximo,
seis
graus
de
relacionamento
NÃO
SE
ENCONTRA
COMPROVADA!

10. Interacção Homem-Máquina
“
HUMAN-COMPUTER INTERACTION IS A DISCIPLINE CONCERNED
WITH THE DESIGN, EVALUATION AND IMPLEMENTATION OF
INTERACTIVE COMPUTING SYSTEMS FOR HUMAN USE (...)
”
[Hewei,
et
al.,
1992-­‐1996]

11. Interacção Homem-Máquina
“
ESTUDO DA INTERACÇÃO ENTRE
UTILIZADORES E COMPUTADORES ”
ocorre
através
das
interfaces
de
uUlizador
objecUvo:
melhorar
a
user
experience
(UX)

12. Características e Tipos
ALGUMAS CARACTERÍSTICAS/COMPONENTES
Comunicação,
Feedback,
Adaptabilidade
ALGUNS TIPOS
linear,
sobre
objectos,
de
hiperligação

13. Exemplo: CAVE
CAVE AUTOMATIC VIRTUAL ENVIRONMENT
ambiente
de
realidade
imersiva

14. Primórdios da Informação Digital
CARTÕES PERFURADOS
input
e
output:
armazenamento,
visualização
e
interacção
informação
digital
representada
pela
presença
ou
ausência
de
buracos
em
posições
predefinidas
pouco
dispendiosos
mas
perecíveis,
pouco
intuiUvos,
pouco
flexíveis

15. Primórdios da Informação Digital
SUBSTITUÍDOS
Fita
magnéUca:
armazenamento
Terminais:
visualização
e
interacção

16. title
command
line
interface
(cli)
>q
program
halted.
SURGIU COM OS TERMINAIS
teclado
para
introdução
de
dados
primeira
vez
que
um
ecrã
(CRT)
é
usado
para
visualizar
dados
digitais
permite
interagir
em
tempo
real
com
o
computador,
através
de
um
modo
gráfico
limitado
e
baseado
somente
em
texto

17. Graphical User Interface (GUI)
File Browser!
EC files
stuff 16 bits FTW
homework awesome
letters MIDI files
NES games
APARECEU PELA PRIMEIRA VEZ NO XEROX ALTO
permite
ao
uUlizador
interagir
com
o
computador
através
da
manipulação
de
gráficos,
imagens
e
outros
indicadores
visuais
(ícones,
botões,
janelas...),
em
vez
de
apenas
texto

18. Graphical User Interface (GUI)
PARADIGMA DE INTERACÇÃO HOMEM-MÁQUINA WIMP
window,
icon,
menu,
poinUng
device
Pressupõe
o
uso
de
um
“aparelho
apontador”,
como
o
rato

19. Natural User Interface (NUI)
PRATICAMENTE INVISÍVEL AO UTILIZADOR
Interacção
e
visualização
tão
naturais
que
a
manipulação
é
semelhante
à
de
objectos
reais

20. NUI BASEADAS EM TOUCHSCREENS E MULTITOUCH
Exemplo:
10/GUI
-­‐
hip://10gui.com/

21. NUI BASEADAS EM AMBIENTES IMERSIVOS
Exemplo:
Project
Natal

22. NUI E REALIDADE AUMENTADA
sobreposição
de
objectos
virtuais
no
ambiente
xsico,
em
tempo
real

23. Exemplos de Sistemas de Visualização
PERMITEM VISUALIZAR E/OU INTERAGIR COM
A INFORMAÇÃO DE FORMA DINÂMICA

24. Microsoft Surface

25. Wolfram Mathematica

26. Live from the App Store

27. Trabalhos Citados
[Card,
2008]
Card,
S.
(2008).
InformaUon
visualizaUon.
In
A.
Sears,
J.
A.
Jacko,
A.
Sears,
&
J.
A.
Jacko
(Eds.),
The
Human-­‐Computer
Interac9on
Handbook:
Fundamentals,
Evolving
Technologies,
and
Emerging
Applica9ons
(2nd
ed.,
p.
542).
CRC
Press.
[Hewei,
et
al.,
1992-­‐1996]
Hewei,
Baecker,
Card,
Carey,
Gasen,
Mantei,
et
al.
(1992-­‐1996).
Human-­‐Computer
Interac9on.
ObUdo
a
Dezembro
29,
2009,
de
ACM
SIGCHI
Curricula
for
Human-­‐Computer
InteracUon:
hip://old.sigchi.org/cdg/cdg2.html

28. Fontes: Imagens
+
hip://www.flickr.com/photos/dscene/820346821/
©
Markus
Krisetya
+
hip://bhturismo.files.wordpress.com/2008/12/sinalizacao-­‐turisUca-­‐belo-­‐horizonte-­‐
turismo-­‐placa.jpg
+
hip://www.flickr.com/photos/thomashawk/161547780/
©
Thomas
Hawk
+
hip://www.flickr.com/photos/thomashawk/161547780/
©
ntr23
+
hip://www.flickr.com/photos/23941865@N02/3938326087/©
Ian
Smith
+
hip://commons.wikimedia.org/wiki/File:Books_by_maciekSz_(1).jpg
+
hip://www.vdtc.de/images/vdtc-­‐cave-­‐gr.jpg
+
hip://froxen.files.wordpress.com/2009/03/surface2.jpg
+
hip://www.nsf.gov/news/mmg/media/images/visualizaUon1_h.jpg
+
hip://upload.wikimedia.org/wikipedia/commons/1/19/System_3_punch_card.jpg
+
hip://www.operaUongadget.com/images/apple_imac_g5.jpeg
+
hip://media.svennerberg.com/2009/06/layar-­‐app.jpg