Maria João's profile

Design de Interação

Departamento de Sistemas de Informação
Mestrado Integrado em Engenharia de Gestão de Sistemas de Informação
Design de Interação
Ano letivo 2019/2020
Atividade 1: Signifiers vs Affordances

"Affordances define what actions are possible. Signifiers specify how people discover those possibilities: signifiers are signs, perceptible signals of what can be done." (NORMAN, Don, The Design of Everyday Things: The Psychopathology of Everyday Things, Revised & Expanded Edition, 2013)
Como se pode ver pela imagem acima, verificamos a existência de Affordances, representada pela mesa e pelas cadeiras, e de Signifiers, através das placas indicativas presentes em cada uma das portas.  
Por exemplo na figura seguinte, do lado esquerdo, existem cadeiras, mesas, escadas, que estabelecem uma relação com a pessoa que as vai utilizar, neste caso, dá-nos a indicação de que nos podemos sentar ou subir para um piso superior. Já na imagem do lado direito, através da legenda, identificamos que a construção em "Legos" representa o monumento "Taj Mahal".
Atividade 2: Conceptual Model vs System Image

"A conceptual model is an explanation, usually highly simplified,of how something works. It is the conceptual model that provides true understanding. There are conceptual models formed through experience, training, and instruction. I call the combined information available to us the system image." (NORMAN, Don, The Design of Everyday Things: The Psychopathology of Everyday Things, Revised & Expanded Edition, 2013)
Na figura acima, encontra-se o interior de um automóvel, neste caso de um Opel Corsa, podendo-se verificar a presença de diversos system images, entre os quais, a caixa de velocidades, os pedais e o painel. Por exemplo, através da condução do veículo, torna-se mais fácil para o utilizador entender qual mudança se adequa a cada velocidade, ou se necessita de encher o depósito com combustível, tudo dependendo do conjunto de informação que adquire através da sua experiência ou do seu conhecimento do funcionamento do automóvel.​​​​​​​ Já o conceptual model, é representado pelo manual de instruções que o veículo possui, que indica, detalhadamente, todas as definições e configurações do mesmo.​​​​​​​
Gulf of execution vs Gulf of evaluation
"When people use something, they face two gulfs: the Gulf of Execution, where they try to figure out how it operates, and the Gulf of Evaluation, where they try to figure out what happened. The role of the designer is to help people bridge the two gulfs." (NORMAN, Don, The Design of Everyday Things: The Psychopathology of Everyday Things, Revised & Expanded Edition, 2013)​​​​​​​
A imagem anterior mostra-nos a diferença entre o Gulf of Evaluation e o Gulf of Execution. Tal como referido anteriormente, o Gulf of Evaluation determina se as expectativas do utilizador, relativamente ao objeto, foram superadas ou se foram de encontro ao que foi estipulado inicialmente. Essencialmente, é esperado um Feedback por parte do utilizador. Relativamente ao Gulf of Execution, o mesmo está relacionado com a Discoverability por parte do utilizador, ou seja, o utilizador terá de descobrir como o objeto atua, de forma a que seja possível utilizá-lo.​​​​​​​
Atividade 3: Personas vs Cenários​​​​​​​

Por exemplo, quando imaginamos um comando para a televisão, associamos o comando àquele a que estamos familiarizados, possivelmente o que utilizamos para ver televisão ou para jogar um videojogo. Contudo, se nos pedirem para visualizar um comando para uma criança de 4 anos ou para um reformado de 73 anos, já imaginamos dois comandos totalmente diferentes, uma vez que servirão interesses distintos. A criança de 4 anos prefere, essencialmente, desenhos animados, já o idoso opta por talk-shows, onde o principal objetivo é a discussão de assuntos relacionados com a sociedade. Através da figura seguinte, verificamos as principais diferenças entre os dois comandos.
"A persona is simply a fictional individual created to describe a specific user." (Understanding Your Users, A Practical Guide to User Requirements Methods, Tools, and Techniques)

Pelo exemplo apresentado anteriormente, é possível identificar duas personas: a criança e o reformado, sendo que para cada uma delas, foi criado um comando. Ou seja, dependendo do nosso utilizador e das suas necessidades e características, o nosso produto será desenhado particularmente para atender às necessidades de cada tipo de persona

Exercício: Site de procura e reserva de viagens
Tendo em atenção o desenvolvimento de uma plataforma de procura e reserva de viagens, como caracterizaria as seguintes personas: um estudante de mochila às costas, um casal em busca de um destino para a lua-de-mel e, por último, um casal de reformados? Que funcionalidades seriam relevantes para a definição de cada uma das personas?
Através da imagem à direita, é possível identificar as características associadas a cada persona, por exemplo o casal de reformados tem maior tendência para viagens religiosas e preocupa-se com questões de mobilidade e de fácil acesso. Já o casal que pretende marcar a lua de mel procura um local que seja mais romântico e acolhedor, recaindo sobre lugares mais exóticos. Por fim, o estudante irá ter em conta, principalmente, o orçamento. Além disso, poderá ter interesse em visitar bares ou clubes, visto que, surge a oportunidade de fazer novas amizades e viver novas aventuras. 

Relativamente à figura do lado esquerdo, estão enumeradas algumas funcionalidades relativas a cada persona. No caso do estudante, verificamos que opiniões low cost ou o tipo de alojamento (hostel, apartamento, hotel, etc) são possíveis funcionalidades. Os recém casados irão valorizar se o site incluir um simulador de orçamento. Já os reformados, antes de se deslocarem para qualquer destino, necessitarão de conhecer as condições de acesso e mobilidade, por exemplo. Deste modo, é criado um mapa de funcionalidades, sendo que as funcionalidades vão de encontro às principais necessidades de cada persona.
Atividade 4: Protótipos de Baixa Fidelidade vs Protótipos de Alta Fidelidade

Um Protótipo é considerado um esboço ou rascunho de uma mudança/atualização a um serviço ou solução. Ou seja, é uma amostra de um determinado produto que pode servir como um teste ao mesmo. Assim, existem dois tipos de protótipos, os de baixa fidelidade, mais simples e sem grandes detalhes, e os de alta fidelidade, que apresentam um layout mais atrativo e mais próximo da versão final.​​​​​​​

Exercício: Melhoria de uma aplicação à escolha com os respetivos Protótipos
Considerando o site do TSI@UMinho, quais as propostas que propõe para o melhorar?
Inicialmente, é necessário definir personas e cenários, para que seja possível entender de que forma as funcionalidades do site serão direcionadas.

Deste modo foram definidas duas personas:
1. Aluno que irá frequentar o primeiro ano do curso de MIEGSI, pelo que apresenta gosto pela área de TSI e prefere a informação mais organizada e menos dispersa.
2. Aluno que frequenta o curso de MIEGSI, logo apresenta um conhecimento acerca de alguns conceitos sobre a área de TSI e pretende informar-se, de forma mais detalhada, sobre alguns aspetos do curso.

Por fim, foram criados dois cenários:
1. Aluno que pretende ingressar no curso de MIEGSI, visto que, apresenta interesse pela área de TSI e tenciona saber a oferta educativa do mesmo. 
2. Aluno que já frequenta o curso de MIEGSI, tendo acesso ao site sobre a área de TSI, mas pretende obter mais informações acerca da mesma, assim como, informações relativas ao curso que frequenta e sobre a sua evolução.​​​​​​​

Tendo em atenção as personas e os cenários definidos anteriormente, em seguida apresentam-se as melhorias feitas ao site do TSI@UMinho.
Na figura superior, encontra-se um exemplo de um protótipo de baixa fidelidade, daí a sua simplicidade e sem preocupação com alguns dos elementos associados ao design, como por exemplo, a cor. O seu principal objetivo é definir a interação com o utilizador. Assim, do lado direito encontra-se a imagem do site original e do lado esquerdo as propostas de melhoria do mesmo, a parte superior, para a persona 1 e a parte inferior para a persona 2.

Já na figura inferior, encontra-se um protótipo de alta fidelidade, visto que já possui uma representação mais próxima das melhorias a serem desenvolvidas no site escolhido. A sua conceção foi feita com a ferramenta Adobe XD.
Design de Interação
Published:

Design de Interação

Published:

Creative Fields