IHC - Cognição e percepção

Olá de volta aos aspectos cognitivos que envolvidos na interação nós vamos agora falar um pouco sobre percepção então a gente diz que a percepção se refere à forma como a informação é adquirida do ambiente pelos nossos sensores né então a gente tem lá os cinco sentidos aqueles conhecidos né esses são os nossos os nossos órgãos sensitivos Então como é que a gente captura uma informação do ambiente e transforma ela numa experiência Então esse é um processo que naturalmente né bem como os demais Ele também é um processo complexo ele envolve a atenção Ele envolve a

linguagem utilizada e ele envolve a nossa memória então A ideia é que eh o o uso de representações que são prontamente perceptíveis é sempre sempre parece ser o mais adequado quando a gente fala em percepção n ou seja se partindo daquela premissa de que menos é mais né então sempre eh visando o minimalismo onde a gente vai apresentar um texto legível ícones fáceis de ler fáceis de distinguir sempre eh focando em facilitar a vida do nosso usuário Então vamos passar alguns eh desses elementos né de de percepção que que nos ajudam então então de novo

a gente vai fazer aqui um um teste né então vou dar uns 10 segundos para vocês e a ideia é a gente usar o contraste de cor e eu peço para que vocês encontrem a palavra Italian no texto a seguir e olhem o tempo que demora meçam aí bom então espero que todo mundo tenha encontrado né o o Itália né então basicamente Deixa eu procurar ele aqui então onde é que tá Itália achei aqui ó essa aqui é a palavra Itália agora a gente vai fazer exatamente o mesmo exercício n porém ao invés de usar

cores de fundo diferente a gente vai usar a ideia de ter bordas mais um espaço em branco entre os os blocos de palavras agora o objetivo vai ser encontrar a palavra french então de novo vamos controlar o tempo né Vamos ver quanto tempo demora pra gente encontar encontrar essa palavra nesse nessa nova nesse novo layout aqui ó então de novo né aqui os dados estão organizados Diferentemente né então e a gente encontra a palavra french eh nesse nesse bloco aqui sobre esse exercício né então um autor conhecido né chamado V em um artigo publicado em

2004 ele descobriu que as pessoas levam menos tempo para encontrar um item quando a informação tá agrupada então usando a as bordas como no segundo exemplo a gente tem mais facilidade de encontrar o que busca do que usando contraste de cor que foi aquela primeira tela primeira tela né então algumas pessoas dizem que usar muito espaço em branco numa página Web prejudica a busca né tornando ela tornando difícil de encontrar a informação vocês concordam com isso que o que usar bastante espaço em em branco dificulta então normalmente é o contrário né a gente aqui tem

Cinco exemplos do mesmo texto né então a pergunta é que horas são e ele tá tá representado aqui em cinco modalidades diferentes então na primeira delas a gente tem eh uma cor de baixo contraste né tá escrito em vermelho no fundo verde aa tem textura Então esse é o pior dos Mundos né no outros dois casos aqui semelhantes com o fundo laranja né então um deles tá escrito em vermelho no fundo laranja o outro no laranja mais claro então a gente precisa fazer um esforço para para para encontrar informação né um pouco menos mas a

gente também enxerga nesse Amarelo a mesma a mesma questão por outro lado onde a gente quando a gente trabalha com Preto no Branco é muito fácil de ler né então o o nosso foco a nossa atenção é chamada diretamente pro texto e a gente consegue descrever facilmente então é legal a gente entender um pouquinho como é que funciona a percepção né então basicamente eh a nossa ideia no nosso mundo ideal né A gente trabalha com dados e quer transformar esses dados em sites né rapidamente muitas vezes isso é difícil né Então a gente trabalha trabalha

com muitos dados que acaba dando tabelas enormes e a gente precisa e informar o usuário sobre sobre esses dados de uma maneira que seja fácil de ele entender né então normalmente um processo que se faz bastante é transformar esses dados em uma representação visual né Então nesse caso a gente vai fazer um mapeamento a gente captura uma quantidade de dados E aí transforma eles numa visualização e aqui a gente tem um sem número de possibilidades diferentes mas a ideia é que ao invés de comunicar o usuário sobre um conjunto de dados a gente mapeia esses

dados para uma representação visual gera uma visualização e então transfere essa informação pro meu eh usuário né que vai fazer uma ento inverso do primeiro né onde eu vou agora sim transformar aquilo que eu tô enxergando no Insight que vai me permitir tomar uma decisão e continuar no meu fluxo de interação então a gente diz que a visualização corresponde a formação de um modelo mental dos dados e isso é obtido pela compreensão n daquilo que a gente enxergou na nossa representação visual então a visualização ela é crítica né para que a gente consiga eh dar

suporte ao nosso processo aí de eh de geração de de insights então quando eu tenho uma visualização que é significativa que é clara que me com que converte os dados facilmente eh para para um insite né isso eh me ajuda a a uma tomada de decisão mais rápida o outro processo né como eu tinha mencionado anteriormente é a gente de de saída né fazer essa transferência dos dados diretamente pro usuário tal que a gente o usuário consiga ter um um insite diretamente isso é possível n e e fácil diria que melhor do com a visualização

quando o dado que eu quero transferir é um dado simples por exemplo se eu agora perguntar qual é a temperatura né Como tá Como tá o tempo agora eu assumi que eu tô falando do tempo agora na minha localização mais fácil do que oferecer uma visualização é fornecer o dado diretamente então a gente pode dizer agora tá 24º e um dia ensolarado então o que que eu fiz aqui foi transformar dados em sites isso nesse caso é melhor do que propor uma visualização né então dado de temperatura temperaturas sobretudo essas eh de de clima né

que a gente é eh vê todos os dias a gente é acostumado a gente sabe como é que é quando tá 10 gra a gente sabe como é como tá 25 quando tá 40 né porque são Dados que a nós são muito familiares Então nesse caso não preciso fazer esse mapeamento de dado para uma visualização depois eu consumo a visualização mapei contrário né visualização para para um insite porque o dado é muito simples mas se eu quiser agora entender como é que tá o tempo agora eh numa região como no Brasil inteiro por exemplo se

torna difícil porque daí eu tenho excesso de dados né ten um número muito grande é muito difícil eu escutando ou lendo valores e coordenadas né eu consegui fazer um mapa da realidade nesse casos o melhor seria usar uma uma visualização como essa que é uma visualização que a gente tá muito acostumado né onde se se traça um mapa de calor então aqui eu já sei que as partes mais é vermelhas vermelho mais escuro Cor de Rosa São as partes mais quentes né então eu consigo enxergar onde é que a gente tá Porto Alegre tá aqui

nessa bolinha tem uma região um pouco mais fria aqui para cima né uma região muito mais quente eh em volta então Eh nesse caso onde eu tenho muito dado né acaba sendo melhor né mais fácil de eu eh informar uma pessoa se eu transformar primeiramente os dados numa imagem e aí é o o usuário transforma essa imagem em um conjunto de insights bom então e é importante também a gente entender como é que funciona né esse esse processo aí de a gente captar informação quando se trata de uma informação visual né então basicamente Esse é

um processo em três estágios né onde a gente começa eh pelo pelo estágio um né então o estágio um ele acontece em paralelo então a gente tá vendo bem aqui à esquerda né Nós temos o olho humano depois o que acontece eh os processos envolvidos no no meu processo aí de de captura de de informação e e acontece Como eu disse em três etapas então na primeira as informação as informações elas são captadas pelo pelo olho né pelo pelos nossos olhos e elas são processadas todas elas em paralelo e o objetivo aqui é a gente

conseguir extrair características básicas do ambiente né então quero fazer aquele reconhecimento que é o que a gente faz com quando dá uma passada de olhos em um ambiente no estágio dois então os processos ativos de percepção de padrões eles eles servem né pra gente detectar estruturas segmentar a nossa cena visual em regiões separando as coisas por cores por texturas ou ainda por padrões de movimento e finalmente é no estágio três que as informações são reduzidas só para aqueles objetos que são mantidos na nossa memória de trabalho visual né então isso funciona através de mecanismos de

de atenção e que nos ajudam a formar a base do pensamento visual Então olha só a gente tem três etapas aqui né nesse processo de entendimento onde a primeira delas né Ela é rápido e acontece em paralelo né o segundo me deixa descobre padrões e no terceiro eu vou identificar os meus objetos então parece um pouco lógico e que quanto mais a gente conseguir simplificar esse esse primeiro quanto antes a gente consegir identificar o que precisa menos tempo vai levar n e e de preferência eu devo facilitar bastante o trabalho do meu usuário nesse estágio

um aqui porque ele acontece ele usa paralelismo para algumas coisas então para ilustrar esse esse processo eh eu queria puxar essa imagem aí né todo mundo já brincou de onde está o hly alguma vez na vida e e o processo da gente entender Onde tá o hly de fazer a busca né Eh como eu disse ele é um processo que acontece eh na primeira fase né que a fase que a gente chama ali de pré atenção onde eu vou olhar pra imagem como um todo e vou tentar encontrar né de primeira o que eu tô

buscando Então esse campo visual ele é processado em paralelo né inicialmente e eu conto com a sorte de encontrar o que eu o que eu tô buscando diretamente quando a gente não encontra rapidamente Aí sim a gente começa um processo sequencial né de varrer a imagem Pedacinho por pedacinho em busca do que do nosso foco né daquilo que a gente tá procurando Então quais são as propriedades do campo de visão aqui né O que que nos ajuda nesse processo então Lembrando que essa essa brincadeira né de de onde está o hly ela pretende fazer o

contrário Então quando numa interface tudo que a gente busca é encontrar mais rapidamente o O que eu o que eu tô buscando né deixar as coisas o mais claras possível o que a gente tá vendo aqui é um contra Exemplo né como esconder aquilo que que eu tô procurando porque essa é a ideia do jogo bom então eh é a gente começa né com o primeiro conceito importante aqui o conceito de campo de visão né a gente noss o nosso campo de visão ele varia née pode ser um campo de visão bem aberto onde com

a minha visão periférica eu enxergo o que tá nas nas bordas da minha visão né mas e e depois eu tenho a parte do foco que é o que tá na na linha dos meus olhos então uma questão interessante aqui é que o nosso campo de de divão eh eles ele é mais estreito ou mais largo né Isso depende eh da densidade dos dados quando eu tenho uma imagem que é muito densa como o exemplo dessa dessa imagem aqui e o meu campo de visão fica Muito estreito então de 1 a 4 graus então basicamente

eu preciso fechar a visão E aí Mirando nos diversos pedaços dessa imagem até encontrar o que eu quero não é a nossa primeira tentativa né A primeira tentativa é olhar para tudo de uma forma eh larga mas não encontrando a gente então Estreita o campo de visão e procura pedaço a Pedaço em imagens que tem menos objetos como essa imagem de baixo aqui por exemplo então fica mais fácil a gente já olha com uma tranquilidade maior e nesse caso aqui o campo de visão ele fica mais largo podendo chegar a 15 graus então aqui a

gente tem uma uma imagem né que mostrando o a face humana o lugar para onde ele tá olhando e como é que a nossa visão ela funciona tá então eh o tamanho do campo de visão ele varia de acordo com o nosso nível de stress em situações onde a gente tá sobrecarregado os objetos que estão na periferia eles são menos perceptíveis então a gente diminui Ou seja a gente tá diminuindo o campo de visão né então ã isso que a gente chama de Tunnel Vision né então é assim a gente consegue facilmente lembrar de situações

em que passou por isso né o stress aqui ele pode ser eh de certa forma eh comparado a uma situação onde eu tô muito concentrado em alguma coisa então eu preciso encontrar tenho pressa para encontrar aquilo Nessas horas a gente foca naquilo que tá fazendo e para de enxergar as coisas eh que estão acontecendo próximos de nós né porque a gente tá super concentrado em alguma coisa né isso isso acontece toda hora com todo mundo e é justamente isso o nível de stress faz a gente reduzir o campo de visão se eu tô numa situação

mais tranquila onde eu tenho mais tempo ou onde mesmo aquilo que eu tô olhando tem uma eh densidade menor isso vai isso gera um relaxamento e o relaxamento abre no nosso campo de visão bom então a pergunta que a gente tem que fazer aqui né É como é que a gente melhora ou ainda como é que a gente acelera esse processo de percepção então a gente já viu que cena muito densa faz a gente diminuir o nosso campo de visão eu gasto mais tempo para para encontrar as coisas quando tenho uma situação mais relaxada de

menos stress com menos densidade de objetos é mais fácil de eu encontrar o que eu tô procurando né então a gente tem algumas primitivas de percepção né que nos ajudam a a dar foco em algumas coisas né então eu aí com isso eu consigo ah trabalhar a questão dos do efeito da da atenção geral e mesmo dos efeitos de de divisão do campo de visão né onde a gente faz uma uma segmentação aí bom então a relevância da da visão de de baixo nível né ela ela acontece em quatro momentos né na pré atensão na

identificação de símbolos na segmentação da cena e no movimento Então vamos olhar um por um então na pré atenção pré atensão é a fase onde eu faço uma busca visual rápida né então é 10 milissegundos por item né Isso é a medição de rapidez aqui de velocidade e aí nesse processo de pré atensão eu consigo distinguir símbolos de uma forma muito rápida né então a pretensão ela é baseada em atributos visuais simples né onde eu tenho sei lá ou é o cor ou é a cor ou é o movimento né ou enfim coisas que são

verdadeiramente simples Eu reconheci Faces por exemplo As Faces não são elementos de pré atenção né reconhecer uma Face exige um processamento um pouco mais rebuscado né do que eu simplesmente identificar coisas como como cores então rapidamente ao olhar para essas bolinhas eu enxergo dois grupos né as verdes e as vermelhas bom então e a gente também n o que que a gente tá vendo aqui a segmentação por características primitivas se eu então olhem rapidamente e pra próxima imagem aqui então a pergunta é quantas áreas estampadas você enxerga dentro do retângulo cinza a ideia aqui é

que a resposta fosse muito rápida né e ao olhar muito rapidamente para esse esse quadro a gente enxerga três grupos diferentes né então esse que fica pra esquerda aqui do meu meu ponteiro né Eh o outro que fica aqui no na região do meio e o da direita onde eu tenho essas essas bolinhas né na prática se a gente for olhar com mais atenção a gente vai ver que não são três eh áreas Diferentes né a gente tem cinco então nessa primeira eu tenho uma textura que é um monte de letra T nessa segunda região

é o ela é a mesma né porém de ponta cabeça e aí depois aqui eu tenho duas outras que também são parecidas Então a primeira a terceira textura aqui elas são as letras T na diagonal depois a letra L na diagonal também então eu usei como pré atenção a questão da da posição diagonal aqui da posição vertical aqui e o outro fato de ser em bolinhas ou seja bem diferente então aqui deu pra gente perceber rapidamente né O que que é qual é a diferença de pré atenção para atenção uma outra questão tá então mais

um exercício teste aqui então ao olhar pra próxima figura contem Eh quantos dígitos três tem nessa sequência bom então a gente tem lá né vamos olhar a gente Olha numa numa primeira é um monte de número então eu tem que de alguma forma segmentar isso eu achei um três aqui um dois um [Música] dois 3 minha busca eu encontrei três um aqui um aqui e outro aqui se a gente tivesse mostrado dessa forma teria sido muito mais fácil né e eu tava errada Inclusive tem quatro números três né então o que que que que a

gente fez aqui a cor é um elemento de pré atenção já tínhamos falado nisso antes né então eu quando eu pintei de vermelho todos os três eu fiz ele saltar os olhos então rapidamente numa única olhada Eu varro os olhos por tudo e aí eu tenho baixa densidade dos elementos vermelhos então rapidamente eu consigo encontrar esses quatro números que eu tô procurando né E esse é o processo que a gente deve fazer quando para quando a gente tá interessado né em ajudar o usuário em uma interface bom a gente também pode usar como diferenciação para

para texturas a orientação e o tamanho Então nesse caso aí eu tenho uma textura onde eu tenho diferentes orientações tá tudo do mesmo tamanho né Ah e eu tá escrito Texture né num fundo que é praticamente igual né tem só orientação de textura que é diferente bem difícil de eu reparar né Então esse é um caso em que a pré atenção não tá sendo usada nesse exemplo de baixo a gente variou não só eh a a a orientação mas também o tamanho e aí ficou bem mais fácil da gente entender o que que a gente

tá tá tá buscando né que existe uma diferença entre uma textura e a outra então o que que a gente tá olhando aqui são alguns exemplos de como chamar a atenção das pessoas né naquela primeira fase do daquele primeiro estágio né do processo de percepção então Eh A ideia é a gente entender Quais são os mecanismos de pré atenção que vão nos ajudar a enxergar rapidamente eh O que que eu quero que que o usuário veja né então nessa imagem a gente tem um exemplo muito claro de de pré atensão né basicamente uma das bolinhas

é verde eu tô usando a cor para chamar atenção porque eu quero Então vamos passar pro próximo exemplo nesse exemplo a gente usou um outro elemento de pré tensão que foi o movimento Então esta bolinha daqui ela apareceu né ela não tava aqui mas ela apareceu nesse exemplo a gente tem o tamanho todas elas são pequenas menos uma que é grande então rapidamente a gente consegue descobrir quem é é a grande então eu tô diferenciando o objeto dos demais mais e quando a gente chega aqui bom essa imagem não foi tão fácil quanto as outras

né aqui eh os conjuntos eles eles não são percebidos em pré atenção Então isso que a gente consegue ver eu tenho as verdes e as vermelhas mas aí eu tenho as pequenas e as grandes né e assim não não é óbvio o o tempo que a gente gasta para perceber né Essa essa distinção ele é um tempo maior do que o que a gente gastou nos nos outros exercícios até agora né Ou seja a divisão em conjuntos é alguma coisa não é algo que acontece naquele primeiro estádio da percepção Ou seja a gente não consegue

fazer com com pré atenção então Quais são as regras aqui importantes pra gente entender sobre pré atenção então primeiro que ela deve ser usada a gente deve usar uma dimensão então ou eu uso a cor ou eu uso a forma né e na forma eu posso variar orientação e tamanho né a gente já viu exemplos aqui onde variando só orientação não foi Claro mas se eu variar orientação e o tamanho Sim a gente também usou o movimento como um um elemento de pré tensão né E a gente tem ainda a a profundidade então não viu

nenhum exemplo de profundidade aqui né mas aquela aquela ideia do sombreamento que a gente faz com botões virtuais né onde claramente a gente consegue entender qual é o botão que parece que tá apertado aquele tá sobrado de um jeito diferente dos outros né Então essa é é a ideia aqui então quando a gente vai eh se o que a gente quer é realçar um objeto para que o usuário Veja com facilidade então A ideia é que a gente Us uma característica de cada vez ou cor ou forma ou movimento ou profundidade aqui de novo a

gente tem alguns exemplos né então a gente tem um exemplo de texto em bold com textura depois usando cor usando o sublinhado né ah eu posso usar uma Fly box para chamar atenção então assim a gente chamou rapidamente né eu posso usar fazer alguma coisa piscar momentaneamente Então aqui tem um caso de de piscar e também a gente pode usar o movimento o movimento indica a necessidade de de uma resposta né então aqui um exemplo de movimento bom como é que funciona então as conjugações para pré atenção então tem coisas que a gente pode colocar

eh em paralelo né então por exemplo eu posso trabalhar com a cor e com aeroscopia eu posso trabalhar com cor e movimento eu posso trabalhar com cor e posição ou eu posso trabalhar com a forma e com a posição então em geral a gente vai usar uma localização espacial E algum outro aspecto de e de forma né ao mesmo tempo então em relação às regras de design relacionadas à percepção eh era mais ou menos isso que o que a gente tinha para ver né a gente tem aqui alguns exemplos onde eu tô usando Eh ícones

representações gráficas que remetam a um significado né então aqui o fato de usar Cor e o sombreamento nos remete a um objeto que tá eh um objeto que que tem um Highlight né o botão Save A gente entende que esse é é o defo Né em detrimento do cancel ah sons e saída de voz que sejam claros e compreensíveis rapidamente também eh nos ajudam né uma regra aqui de de pretensão E que nos ajuda com o processo perceptivo texto legível que esteja bem destacado do fundo a gente entendeu que mos onde eu tenho cores semelhantes

com do texto ou tenho texturas vai me dar um resultado ruim a questão do feedback tátil né ser que seja facilmente interpretável também né então eu eu dá pra pessoa sensação do tato também me ajuda nesse processo de percepção então assim a gente cobriu né Essas essas questões eh de pré atenção que estão envolvidas eh no processo cognitivo Então esse foi o nosso objetivo nessa aula aqui