Visualização de Informação Interacção Homem-Máquina  +

Realizado  por:  Celso  Alexandre  /  João  Simão  /  Tiago  Valente  

Perspectiva Geral

COMUNICAÇÃO  VISUAL  &  VISUALIZAÇÃO  DE  INFORMAÇÃO  

«   O  que  é?   «   Para  que  serve?  «   Como  se  relaciona  com  a  informação?  

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  

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]  

REPRESENTAÇÃO VISUAL DE QUANTIDADES SIGNIFICATIVAS DE DADOS ABSTRACTOS,

DE FORMA ESTRUTURADA

“  

”  

Visualização de Informação

“  

Comunicação Visual

informação    

visual  

”  TRANSMISSÃO DE INFORMAÇÃO ATRAVÉS DE UM MEIO

VISUAL: CORES, FORMAS, ORGANIZAÇÃO ESPACIAL

“  ”  

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

COMUNICAÇÃO   VISUAL  

VISUAL  IZAÇÃO  DE  DADOS  

ÊNFASE  NA  INFORMAÇÃO  VISUAL  VALORIZAÇÃO  ESTÉTICA  

ÊNFASE  NOS  DADOS  ORGANIZAÇÃO  E  COMPREENSÃO  

SIMPLIFICAR   REPRESENTAR   CONDENSAR   REALÇAR  

Utilidade da Comunicação Visual

MENOS  DEPENDENTE  DO  IDOMA  

MAIS  UNIVERSAL  

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!  

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]  

ESTUDO DA INTERACÇÃO ENTRE UTILIZADORES E COMPUTADORES “  

”  ocorre  através  das  interfaces  de  uUlizador  objecUvo:  melhorar  a  user  experience  (UX)  

Interacção Homem-Máquina

Características e Tipos

Comunicação,  Feedback,  Adaptabilidade

ALGUMAS CARACTERÍSTICAS/COMPONENTES

ALGUNS TIPOS linear,  sobre  objectos,  de  hiperligação  

Exemplo: CAVE

CAVE AUTOMATIC VIRTUAL ENVIRONMENT ambiente  de  realidade  imersiva  

CARTÕES PERFURADOS

Primórdios da Informação Digital

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    

SUBSTITUÍDOS

Primórdios da Informação Digital

Fita  magnéUca:  armazenamento  Terminais:  visualização  e  interacção    

q  title  command  line  interface  (cli)  >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    

File Browser!

stuff

homework

letters

NES games

16 bits FTW

awesome

MIDI files

Graphical User Interface (GUI)

EC files

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  

APARECEU PELA PRIMEIRA VEZ NO XEROX ALTO

window,  icon,  menu,  poinUng  device  

PARADIGMA DE INTERACÇÃO HOMEM-MÁQUINA WIMP

Pressupõe  o  uso  de  um  “aparelho  apontador”,  como  o  rato  

Graphical User Interface (GUI)

PRATICAMENTE INVISÍVEL AO UTILIZADOR

Natural User Interface (NUI)

Interacção  e  visualização  tão  naturais  que  a  manipulação  é  semelhante  à  de  objectos  reais  

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

NUI BASEADAS EM AMBIENTES IMERSIVOS Exemplo:  Project  Natal  

NUI E REALIDADE AUMENTADA

sobreposição  de  objectos  virtuais  no  ambiente  xsico,  em  tempo  real  

PERMITEM VISUALIZAR E/OU INTERAGIR COM A INFORMAÇÃO DE FORMA DINÂMICA

Exemplos de Sistemas de Visualização

Microsoft Surface

Wolfram Mathematica

Live from the App Store

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    

+  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  

Fontes: Imagens