Análise de Infográfico Interativo

Eu escolhi o seguinte gráfico para análise:
http://www.newyorker.com/sandbox/business/subway.html


O Infográfico "INEQUALITY AND NEW YORK’S SUBWAY" foi criado pelo The New Yorker para falar sobre a crescente segregação econômica e social em Nova York. Para apresentar essas informações são usados gráficos de ponto, para demonstrar as diferentes rendas que se cruzam nas linhas do metrô da cidade ao longo de uma viagem. Na parte superior existe o nome do lugar onde cada estação, que é representada por um ponto, está localizada e no lado esquerdo estão os valores que representam a renda.

Para chegar ao resultado, o infográfico analisa dados de renda anual e localização dos americanos residentes em Nova York registrados no Censo norte-americano de 2011. Com essas informações é possível fazer uma combinação geral entre quem entra e sai do metrô e a renda média das pessoas que vivem próximas a estação

Desvio padrão das posições do Mouse

O código abaixo calcula o desvio padrão das últimas 200 posições X e Y do mouse e também realiza a suavização dos movimentos de mouse através de um pequeno quadrado.

int ITENS = 200;  
int[] posicaoX = new int[ITENS];  
int[] posicaoY = new int[ITENS];
int interacao; 
int varianciaX = 0;
int varianciaY = 0;


float desvioPX = 0;
float desvioPY = 0;

int relogio;
int intervalo = 1000;
int t = 0;



void setup() {
  size(400, 400);
  relogio = millis();
}

void draw() {  
  background(0);  
  posicaoX[interacao % ITENS] = mouseX;  
  posicaoY[interacao % ITENS] = mouseY;
  rect(mediaX(), mediaY(), 10, 10);  
  interacao++;
  
  if(millis() > relogio + intervalo) {
    relogio = millis();
    t++;  
  }
  
  text("Desvio Padrão X: "+desvioPX+"\nDesvio Padrao Y: "+desvioPY, 120, 20);
  
  if(t%10 == 0) {
    desvioPX = desvioPadraoX();
    desvioPY = desvioPadraoY();
  }
}


int mediaX() {  //cálculo posição X
  int somaX = 0;  
  for (int contador = 0; contador < ITENS; contador++)  
    somaX = somaX + posicaoX[contador];
    
  return int(somaX / ITENS);
}  

int mediaY() {//cálculo media posição Y
  int somaY = 0;  
  for (int contador = 0; contador < ITENS; contador++)  
    somaY = somaY + posicaoY[contador];  
    
  return int(somaY / ITENS);
}

float desvioPadraoX() {// cálculo desvio padrão X
  varianciaX = 0;
  for (int i=0;i<ITENS;i++) {
    varianciaX += (posicaoX[i] - mediaX()) * (posicaoX[i]- mediaX());
  }
  return sqrt(varianciaX/ITENS);
}

float desvioPadraoY() {// cálculo desvio padrão Y
  varianciaY = 0;
  for (int i=0;i<ITENS;i++) {
    varianciaY += (posicaoY[i]-mediaY()) * (posicaoY[i]-mediaY());
  }
  return sqrt(varianciaY/ITENS);
}

Chroma Key

Continuando o assunto de teoria dos conjuntos, nesta aula vimos conceitos básico de chroma key e como criar um aplicação em Processing que cria chroma key e fades usando máscaras.

A tarefa desta aula foi criar uma aplicação de chroma-key com alfa definido
 por variável específica. Para implementar a aplicação  utilizei a mascara para preencher a imagem nova, quando o pixel das máscara fosse preto a nova imagem seria preenchida com pixel correspondente do cenário, quando a máscara fosse branca  a imagem seria preenchida pelo cenário com 100% de alfa somado à imagem do personagem com o alfa definido anteriormente. 

Segue o link para Download

Filtros e Teoria dos Conjuntos

Para introduzir a Teoria dos Conjuntos, foi apresentado a criação de filtros no Processing. Os filtros usados foram canais RGB e CMY, Negativo, tons de cinza e cinza com média ponderada e  por fim brilho. Segue o link para download da aplicação contendo todos os filltros desenvolvidos.

Download

Trabalho 2 - Análise de Interface

Objetivo 

      Realizar a análise visual,  funcional  de uma aplicação implementada em Processing, com destaque para organização e percepção das formas de acordo com as principais leis da Gestalt e os Fatores de Usabilidade em IHC, propostos por Jakob Nielsen.

Aplicação Selecionada 

       A aplicação analisada foi o RGB Color Visualization (disponivel em http://openprocessing.org/sketch/121628). O programa é uma espécie de calculadora de cores que utiliza o padrão RGB. Ela é dividida em quatro áreas, sendo que cada uma das três primeiras  conta com 8 canais que podem ser ligados(1) ou desligados(0) pelo usuário, formando uma cor com 8 bits(1 byte) , e na  área final o usuário pode visualizar a junção dos 24 bits, resultando em uma nova cor. Na parte inferior de cada setor é mostrado a representação da cor em valor binário e hexadecimal. 

Conceituando a Gestalt

       Primeiramente apresentarei um breve resumo sobre a Gestalt em seguida alguma das suas leis e como elas estão presentes, ou não, na aplicação selecionada. 

       A Gestalt não possui uma tradução certa para o português, o termo que mais se aproximaria de uma tradução seria “forma ou percepção”. Independente de traduções, a Gestalt compreende um conceito de significação de formas, cores, texturas entre outras variáveis de maneira auto-organizada pelo cérebro, com o intuito de criar uma significação lógica para os conhecimentos do individuo.  

      Segundo Max Wertheimer, um dos principais pensadores 

gestaltistas: “A 'fórmula' fundamental da teoria da Gestalt pode ser expressada da seguinte forma,” escreveu . “Existem conjuntos, o comportamento dos quais não são determinados por seus elementos individuais, mas onde o processo da parte são determinadas pela natureza intrínseca do todo. É o objetivo da Gestalt de determinar a natureza de tais conjuntos”

      Resumindo: o inteiro é interpretado por nós, de forma diferente que a soma de todas as partes que o compõe. 

Aplicação das leis da Gestalt

      Talvez a principal lei da Gestalt, a Unidade tem que passar a sensação que todos os objetos que compõem um todo estão unidos de forma significante e compreensível. De certa forma essa lei é utilizada na aplicação, eu diria até extrapolada, porque sinto falta de uma maior interação entre as cores que o programa representa e as formas que a interface a apresenta. Acho estranho uma aplicação que tem como objetivo a visualização de cores, usar apenas tons de cinza, preto branco. 

      A lei da Semelhança dita que objetos similares se agruparão entre si. Acredito que a RGB Visualization  aplica essa lei de uma forma muito confusa, a interface parece um amontoado de caixas e textos, já  que tudo que  é mostrado na tela é muito igual, em certos momentos  fica complicado diferenciar a qual elemento cada texto se refere, mesmo com a existência do nome de cada cor, um olhar descuidado confunde o usuário. Uma boa forma de solucionar este problema seria usar cores para diferenciar cada seção da tela, seja nos textos, nas cores das caixas  ou usando uma borda colorida para separar cada área. 

       O uso da lei da Proximidade junto com a semelhança acaba complementando desorganização da interface. Os elementos estão dispostos próximos uns dos outros isso acaba agravando o  efeito que já mencionei anteriormente. Nesse caso o aumento  da margem entre cada área resolveria o problema facilmente. 

       A Continuidade está presente quando os objetos estão dispostos em uma sequencia logica para o observador, fazendo com que o usuário perceba uma consistência na aplicação, o que a interface permite que ele realize em uma área, se repete claramente nas demais áreas que a mesma ação pode ser realizada. (De acordo com o que pesquisei essa lei é está mais relacionada a linhas, sequência de pontos, etc, mas acredito que faz sentido definí-la da forma que usei no exemplo.) 

       Por fim, a Pregnância, esta lei se relaciona diretamente a simplicidade das formas, é a capacidade de uma interface ser mais o compreensível possível e de ser mais facilmente assimilada pelo usuário. Na minha opinião aplicação se utiliza dessa lei de forma adequada, ao uso o RGB Visualization pela primeira vez, percebi quase que imediatamente o que a interface me permitia fazer e isso se repetiu  nas demais vezes que a utilizei. 

Jakob Nielsen e fatores de Usabilidade

    Jakob Nielsen é um consultor de usabilidade Web. Ele possui um PH.D. em Interação Humano-Computador. Um de seus principais trabalhos foram as 10 heurísticas que criou para avaliar sistemas interativos, porém o foco dessa análise será os fatores de usabilidade propostos por Nielsen em 1993.

    Nielsen define o critério de usabilidade como um conjunto de fatores que qualificam quão bem uma pessoa pode interagir com um sistema interativo. Esses critérios são relacionados com a facilidade e o esforço necessários para os usuários aprenderem e utilizarem um sistema. Desse modo, a usabilidade endereça principalmente a capacidade cognitiva, perceptiva e motora dos usuários empregada durante a interação. Os fatores de usabilidade por ele considerados são:

• facilidade de aprendizado(learnability);
• facilidade de recordação (memorability);
• eficiência(efficiency);
• segurança no uso(safety);
• satisfação do usuário(satisfaction).     

A facilidade de aprendizado se refere ao tempo e esforço necessários para que o usuário aprenda a utilizar o sistema com certo nível desempenho. Acredito que para aprender a usa a aplicação escolhida de forma completa, são necessários alguns conhecimentos prévios, como características do padrão RGB, número binários, isso atrapalharia uma pessoa que está usando pela primeira vez. 

A facilidade de recordação diz respeito ao esforço cognitivo do usuário necessário para lembrar como interagir com a  interface. A simplicidade e  a repetição de ações faz com que a aplicação tenha a capacidade de ser memorizada facilmente. 

A eficiência de um sistema está relacionada ao tempo necessário para a conclusão de uma atividade com apoio computacional. Acredito que o RGB Visualization falha nesse fator, apesar de permitir que objetivo seja cumprido, a repetição de ações aumenta o tempo que o usuário gasta com a aplicação e desestimula o a interação.

A segurança se refere ao grau de proteção contra erros ou condições desfavoráveis que a interface de um sistema oferece. Na minha opinião não há como avaliar este fator, a aplicação é bem simples, e quando a utilizei não vi brechas para erros do usuário.

A satisfação é o fator de usabilidade com a avaliação mais subjetiva, expressa o efeito do uso do sistema sobre as emoções e sentimentos do usuário. A aplicação satisfaz o usuário, mas poderia permitir de alguma forma que o usuário aprenda os conceitos de cor que ela usa.


ReferênciasBARBOSA, Simone; SILVA Bruno. Interação Humano-Computador.São Paulo. Elsevier. p. 26-31.

http://www.portaleducacao.com.br/psicologia/artigos/48836/gestalt-definicao-e-as-sete-leis-basicas

http://chocoladesign.com/o-que-e-gestalt

Questão 3 Prova

int largTela = 500;
int altTela = 500;

void setup(){
  size(largTela,altTela);
}


int origemX = largTela/2;
int origemY = altTela/2;
int raio = 150;

float hip;
float catAdj;
float catOp;

float hipPeq;
float catAdjPeq;
float catOpPeq;


int largRect = 500;
int altRect = 50;


void draw(){
  background(255);
  
  
  fill(255);
  ellipse(origemX, origemY, 2*raio , 2*raio);
  
  
  hip = distanciaPP(origemX, origemY, mouseX, mouseY);
  catAdj = mouseX - origemX;
  catOp = mouseY - origemY;
  
  hipPeq = raio;
  catAdjPeq = catAdj * hipPeq / hip;
  catOpPeq = catOp * hipPeq / hip;
  
  
  
  line(origemX, origemY, origemX+catAdjPeq, origemY+catOpPeq );
  
  float angulo = degrees(asin(catOpPeq/hipPeq));
  
  if(angulo<0)
  angulo=-angulo;
  if(mouseX<origemX)
  angulo = 90+(90-angulo);
  if(mouseY<origemY)
  angulo = 180+(180-angulo);
  
  println(angulo);

  fill(255);
  rect(0,0,largRect,altRect);
  fill(0);
  rect((largRect-altRect)*angulo/360,0,altRect,altRect);
}


float distanciaPP(int x1, int y1, int x2, int y2){
  return(sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
}

Colisão com círculos

A tarefa da aula foi criar diversos círculos com centros em pontos aleatórios 

da tela e mudar suas cores caso o mouse se encontre sobre os mesmos

void setup(){
  size(500,500);
}

void draw(){
  background(255);

  criaBola(250,250,30);
  criaBola(120,400,60);
  criaBola(20,40,100);
  criaBola(300,50,10);
  criaBola(370,350,77);

}

void criaBola(int posX, int posY, int raio){
  if(distanciaPP(posX,posY,mouseX,mouseY) <= raio)
    fill(0);
  else
    fill(255);
    
  ellipse(posX, posY, 2*raio, 2*raio);  
}

float distanciaPP(int x1, int y1,int x2, int y2){
  return(sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
}