Overview
In Project 1 we created meaning in our content by utilizing behaviors that the browser provides to us, namely linking, but we are free to use the verbs of interaction (clicks, hovers, scrolls) for whatever purposes we can think of. In fact, we already experience many ways computer inputs are mapped to different actions across the web, games, and tools we use every day, often without giving it much thought.
Project 2 will focus on creating a site that responds to the user in an unexpected way. We will explore those common verbs, click, scroll, hover, resize, tap, swipe, etc as the 'content' of our projects.
We know what to expect when we click on a link, scroll down a news feed, or hover on a button. But we can uncouple the physical action of pressing a key or swiping on a track pad from their default digital reactions. We will be critical of what these actions mean, what they're good at, what they aren't, and push them into new or unusual spaces.
Your final outcome will be a website that utilizes a single interaction and draws attention to it. Will your site be satisfying or confusing, smooth or abstruse. Is there a 'right' way to use it, or does any action result in the interface responding in some way? Focus on the 'interaction feel' of your site.
Learning Outcomes
- Increase your familiarity, comfort, and knowledge of foundational actions.
- Introduce Javascript.
- Challenge and analyze the status-quo of how actions are typically implemented and how they might alternatively be used.
Requirements
- Develop a microsite showcasing one action (Click, Scroll, Hover, Resize, etc) to create a multi-sensory experience.
Grading
Your project grade will reflect the quality of your design and concept, as well as the execution of your final zine.
Calendar
Week 7
M - Intro Project 2
TH ---
Discuss examples of unusual or satisfying interactions
Complete Step 1 in Class
Week 8
M - Step 2 Due
TH - Step 3 Due
Week 9
M - Work Day
TH - Work Day
Week 10
M - Final Crit
Project
Step 0
Due Thursday March 6
Find three examples of unusual or satisfying interactions online, on an app, or somewhere else digital. What do you like about them, or what annoys you about them. How do they subvert the expectations of what that action normally does?
Step 1
Completed in Class, Thursday March 6
Choose 2 fundamental computer interactions, think less computer functions and more physical actions you take to perform an interaction (ie, scroll, click, right click, hitting a key, holding a key down, key combos, typing, dragging, hovering, pinching, long pressing, using an analog stick or the webcam or a mic, etc) and make lists of 10 examples of things those interactions can do or are used for.
For instance, clicking selects, follows links, activates buttons, swings a tool in Minecraft, etc.
Step 2
Due Monday March 10
Choose one of your interactions and think about why it is used as it is, why is it suited to those actions. What feedback does using that action generally give to a user? Given what it is commonly used for, how can you push it in unexpected ways?
Do you want to make an example of the interaction in its purest most satisfying form, or take it out of its element and make it do something unexpected or disconcerting?
Complete 3 sketches of an interaction showcase for your chosen action, at least one affirming the interaction, and one subverting it. Focus on the interaction as the 'content', focus on the interaction itself. In your sketches, consider how the site will react to the user interacting with it first and foremost.
We will review these in class and choose one to proceed with.
Step 3
Due Thursday March 13
Select one of your sketches to move forward with. Complete two different hi-fidelity designs for how your site and interaction might look and behave for that concept.
Consider type, color, illustration, and how they might draw the user to interact with your site in the manner you intend in order to have the experience you want them to have.
We'll review these in class.
Step 4
Due Thursday March 31
Build out your design into a microsite featuring your interaction. Pay particular attention to the 'interaction feel' of your final outcome.
Viewings / Readings
Inspiration
- RafaΓ©l Rozendaal (2012 and earlier especially)
- the worst volume sliders in the world
- yehwan yen on instagram
- bubblespop
- Mac Mouse Tutorial
- p5js showcase
- thehtml.review