Class Notes & Exercises

Week 1

Class Note

In today's class, we get a little bit of briefing on what we are going to do in this semester. We just started to get used to this subject and try to understand the purpose of it. 

Week 2

Class Note

Lecture Class

Social Interaction and Community Engagement in Media Installation 

Media installation can foster social interaction and community engagement. In these projects, the most important element is user. It can trigger emotions, creative thinking and past memories. These help to create a space for social interaction where people share their points of views, feelings and engage with each other.

Why do we need user participation and co creation?

- Collaborative Design: User participation helps reflects the relevancy, usefulness, impact and much more perspectives about a product. This helps to refine and improve the product design. 

- Interactive Experience: To create a more engaging experience, user participation in design stage is important too. As they can show and tell from their perspective, what kind of experience they want, need and best present their messages. 

- Sense of Ownership: We need to let users know that we create this product for them, we care about them and their feedback are important.

How to foster a meaningful interaction?

- Provide collaborative/interactive activities 

- Personalized product based on user

- Storytelling, create a sense of community and belonging 

- Well-designed spaces encourage social interaction 

Diverse Audiences 

- It's about inclusivity and how personalized you want to design the space for.

- Should increase the accessibility to allow everyone to enjoy the media installation.

- The design should be cultural appropriate. Our goal is to create social connections which is why respecting each other cultures among the community is important.

- Languages are important as user needs it to understand the context of the media installation. Additionally, familiar language helps to increase a comfortability and familiarity which helps user to connect better. 

- Engage with community by collaboration, it helps with local businesses and it could represents the theme better.

Impact of media installation 

- Conduct survey to understand users

- Gather feedbacks from users 

- Observe user interactions with media installation and with each other 

- Review online feedbacks 

- Do case studies 

Challenges 

- Need to adjust the accessibility according to the space given/chosen

- Need to know the elements of the space like lighting, outdoor or indoor, circulation and etc.

- How do we use the element or overcome some challenges brought by the space or media installation

Class Activity

For this activity, I think of patients with Eczema. It is a quite common disease that we often see but we don't really understand the context and struggle of the patients. I think that a media installation that expose the background story of this disease and patients would be educating to society. The attachment below is my idea for this installation:

Let's Talk About Eczema

Practical & Tutorial Class

We learn about Motion Graphic / Kinetic Typography today. It is an interesting yet simple way to deliver messages or information to target audiences. It instantly gives the information clearly and straightforward, a technique used by all industry for a very long time. There are many classic advertisements like 

Things I learned:

- Typography masking

- Find audio first

- Then import the audio

- Mark the part on the audio clip, which part is more exciting, more calm

- Add text

- Edit

Tutorial on CapCut

Class Activity

We are to create a short kinetic typography video using CapCut to promote a new Taylor's University application. It can be any application but Taylor's University related. Use only simple background like plain black and white, mainly focusing on creating interesting and dynamic kinetic typography. My idea is to create an advertisement to promote a music application designed for Taylor's University students and staff. 

Final product:

Reflection

In this exercise, I learned about the combination of typography and music can bring very impactful advertisement and delivering a message. Even without pictures, by using only words and sound, we can produce a very meaningful and purposeful video. Words can deliver much more than we think. Even though purely words might seem a little bit boring, but that is not the case with kinetic typography. As we make the font moves, changes texture, rotate, size it up and down, these makes the words seem so much fun and interactive. When the words are moving, as a normal human, our attention follow the words. This is why a lot of advertisement use kinetic typography, as moving words catch our attention, we are able to get attracted by the advertisement and understand its content. 

When I was doing this exercise, I first think of what I am going to advertise. The topic should be about our university, so I want to figure out something we don't have yet. This is when the music app pop up in my mind. Even though a music app seems to extra for a university, but this is just a concept, so I just use this idea. A music app needs good music. So, I started it by finding a good audio clip. Then, I develop my idea around this audio. I follow the beat of the music, move the font in wavy form, increase its size when it's needed. I blend the kinetic typography and music as much as I could. This is to achieve a perfect balance and harmony between these two and brings out the energetic and strong vibe for this advertisement. 

The process it's not hard, it is just taking a lot of time, since I need to repeat the process again and again while adding my effect. I found this very fun and interesting as the product slowly formed. I enjoyed every second of it. I hope that this advertisement would bring the vibes to people and deliver its messages well. Thank you for lecturer guidance on this exercise. 

Week 3

Lecture Class

Storytelling Techniques for Evoking Emotional Responses

Why emotional design is important in UX?

- To provide positive emotions and increase satisfaction of users

- To make user relate and engage with our product

- To create strong emotional bond with user and ensure user retention

- To create strong and positive branding

The power of narrative in user experience

Strong narrative creates an immersive and engaging experience for users to fully shift into the world of our product. It also promotes a sense of community and creating a bond within the users and the product. Narrative aids in promoting meaningful interactions. 

Engaging multiple senses to elevate emotional impact

1. Visual

2. Auditory

3. Tactile

4. Olfactory

Crafting authentic and relatable characters

- It takes time to create an emotional-relatable character, as it needs to come from real-life, it needs to be very realistic, it might have flaws, unique characteristics that resonate with users. 

- Character's development is very important as it create a story/hopes/memories or many more effects in our user imagination. It gives an expression. 

Using empathy to drive emotional connections

- Understanding user needs, we as a designer are here to solve their problems and provides their needs. 

- Conducting user research like interviewing, surveys, observations to understand our users fully.

- User journey mapping helps to clearly show the steps/uses of the products and it helps designer to creates a emotional triggers for user.

- Inclusivity is very important to create emotional values

Incorporating surprises and delight moments

Unexpected rewards, interactive elements and personalized experiences can actually build our credibility, create a bond with our users. It helps to make users feel special and important. 

Evoking emotions through colour and imagery

- Visual cues are usually the first thing users sense 

- It instantly creates an emotional experience 

- By using colour and images correctly and smartly, we can create any emotions or triggers easily

- We use them to create a story/narrative

The role of music and sound design

- Establish a desired atmosphere

- Create a more engaging and immersive experience

- Guide user through the story, makes it understanable

- Trigger user's emotions

Balancing emotional and functional elements

How do we make sure the emotional values and aesthetic values are in the design without compromising each other? And we as a designer must ensure the usability and efficiency of the product to solve the users' needs and problems. A guidance is needed as users need to navigate through the product clearly so we can ensure that our product provides it's help fully. 

Iterating and optimizing for stronger emotions

We need to collect data to analyze and understand user feedback in order to iterate and improve from it. We enhance our product design to make sure it is always the best or better version of itself. 

Class Activity

Class activity submission:

Assignment 1

Assignment brief:

Basically, we need to use projection mapping/performance/any digital installation to tell a story to our target audience. Use front view photo of your chosen area, exp: a building, to create layers and do masking later. Use Adobe Illustrator or other platform to create layers and do masking. We can use online resources to create our content or film it ourselves. 

Week 4

Lecture Class

Cognitive Science for Interactive Design

1. Understanding Human Perception and Cognitive Processing

- Different people have different perception and different ability to process our work

- Sensation: Using 5 senses to receive the information we give, but in this case, mainly about light, sound and touch.

- Perception: Human process the information from sensory and form a perception

- Cognitive Processes: is a higher level of mental activities which required memory, thinking, intention, knowledges and many more. This is a process of human learning, thinking and perceiving. 

2. Sensation and Perception

After human receive the information using 5 senses, our mind started to process the information through cognitive processes and form a perception. 

3. Attention and Memory

Users have limited attention span, focusing on only simple and significant information helps to prevent working memory overload. Design should be familiar, so that user can easily recall with their long-term memory, this makes the thinking process less and user journey smoother. Use chunking information to reduce unnecessary information.

4. Behavioral Psychology and User Decision-Making in Design

- Implement users' motivation and goals to motivate them use our design

- Reduce unnecessary information to reduce thinking process

- Prompt user decision-making with better UI design

- Positive reinforcement helps user to have better UI/UX experience

5. Chunking, Patterns, and the Gestalt Principles

- Chunking: Chunk large information into smaller and significant information group to help with faster and smoother cognitive thinking

- Patterns: Familiar pattern in UI/UX design helps users to interpret the information quicker as they just recall back their memory, users don't need to think all over again

- Gestalt Principles: Human naturally perceive the information in a whole group rather than small different parts, use Gestalt Principles like similarity, continuity, proximity and more to create a full and complete connection of different information. This helps with intuitive understanding and interaction. 

6. Affordances, Signifiers, and Mapping Cognitive Models

Affordances: Properties used to suggest how an object can be used

Signifiers: Types of visual cues/symbols to show affordances

Mapping Cognitive Models: Represents action and it's consequences

7. Interaction Styles and Mental Models

Direct Manipulation: Users interact directly including thinking, using with everything they can sense

Command-Line Interface: Users use text as command to interact with the system

Menu-Driven Interaction: User choose function on provided options, for example, in a menu, to use the system

Natural Language Interaction: Users use voice command to interact and prompt the function of the system

8.  Usability Heuristics

- provide general principles for evaluating any design

- helps to identify potential usability in a system

- Jakob Nielsen's 10 usability heuristics

9. Cognitive Walkthroughs

-  a step-by-step method for evaluating usability

- according to users' feedback, emotions, actions

- to discover potential bad features and suggest for improvement

Exercises

Exercise Submission:

Week 5

Exercise

Exercise submission:

Week 6

Exercise

Exercise submission:

Week 7

Class Notes

Assignment Brief

- related to assignment 1

- select a title for the show

- include an abstract concept

- for example, world war 2 => Fight For Freedom

- why do people want to go to this showcase

- not more than 500 words for reflective essay, post in e-portfolio

- Prototype is about storyboard

Storyboard

- can just insert images

- write description under the images

Exercise

Exercise submission:

Week 8

Independant Learning Week

Week 9

Submission for Assignment 2

Week 10

Class Notes

In today's class, we have an assignment brief about our final assignment. We have to submit a complete, high-quality video for our previous idea in assignment 1 and 2. Basically, we continue to do work on our idea and present it in a complete form. Starting next week, we need to have a consultation session with our lecturer, to discuss our progress. We can do it in online or f2f consultation. 

We then have a small tutorial on how to use HeavyM to create projection mapping by using masking function. I cannot follow the tutorial as I cannot even download this application. Thus, I will learn to use this application after I solved this issue. Lecturer also introduce VEED.IO - AI Video Editor - Fast, Online, Free for us to create content using AI. 

Class Activity: