πŒ†

Overview

  • Create 50 elements that change as they are interacted with
  • Then choose a single action (Click, Scroll, Hover or Resize) and develop a microsite which uses this β€” and only this β€” action to tell a story.

In Project One we built a site in a finite amount of space on the topic of the costs of the internet, but in general, our outcomes focused on communicating to the user without inviting their participation (with some exceptions). Project Two will focus on creating a site that responds to the user in unexpected ways. We will explore how you can use common actions, click, scroll, hover, resize, tap, swipe, in unique ways.

The aforementioned actions largely dominate how we interact with content on the web. They are subconscious and ubiquitous means to an end. Because of this, their use has become overlooked, we know what to expect when we click on a link, scroll down a news feed, or hover on a button. But these expectations do not define the potential that these simple activities possess. For this project you will examine how these actions relate to content, or as content themselves. You will dive deep and analyze each experiential consequence before, during, and after an action and push them towards profound results.

Use this prompt to push your chosen action to do something it would not typically do and you may not know how to do. Do not concern yourself with 'best practices' or how things 'should' work, but experiment with alternatives and stumble upon anomalies. A good project in this sense is not code-heavy and complex but nimble in how it connects simple scripts to create rich and engaging results. Interrogate what makes an interaction feel good, or bad.

Learning Outcomes

  • Increase your familiarity, comfort, and knowledge of foundational actions.
  • Introduce or expand knowledge using javascript to create dynamic experiences.
  • String together a complex, compelling, and engaging experience from a simple act.
  • Challenge and analyse the status-quo of how actions are typically implemented and how they might alternatively be used.
  • Break down sensory barriers to create multi-sensory and spatial experiences.
  • Explore activating unexpected elements on the screen.

Requirements

  • Create a page with 50 elements that respond to user interaction.
  • Develop a microsite showcasing one action (Click, Scroll, Hover or Resize) to create a multi-sensory experience.

References

Examples

Reading

Calendar

Week 1
T  – Kickoff Project
     Share 1 novel interaction findings
     Begin exercise in class
     (walkthrough templates + work time)

TR – Working Day

     Choose 1 interaction and begin your
     interaction journal

Week 2
T  – Present 50 Results Outcomes
     Have your journal done for review    
     Start sketching your micro site

TR – Review refined design proposal for
     Single Action website created in 
     graphic software.
     If you are ahead of schedule,
     start setting up your design
     in code 

Week 3
T  – Working Day / Technical feedback

TH - Final Crit

Project

Step 1

Due Tuesday Oct 15

50 Result Charrette: develop a single page website which documents 50 possible interactions.

Step 2

Due Tuesday Oct 15

Choose 1 of your results from the charrette and with that interaction in mind, journal your uses of that interaction over the weekend. How frequently do you click, or scroll. How often does it surprise you?

You likely shouldn't log every time you experience your interaction, but pay attention and log how frequently you come across it, and any time it deviates from your expectation, or if it never does. Write your feelings and observations down, at least one entry a day until Tuesday, for 4 entries at minimum.

Step 3

Due Thursday Oct 24

Design a microsite focusing on your chosen interaction. Focus on how simple events, and minimal code, can be sequenced together to make a surprising and rich website.

Use your interaction journal as a device for exploring your chosen action, and as potential content for your microsite. What part does your chosen interaction play in how the user responds to this content?

Your final microsite should showcase your chosen interaction in 3 distinct ways. If your interaction is the cause, it should have 3 different effects, does it change in what it does, or how it does it? For instance: A click could rotate something or change it's background, and it could do either of those fast, or slow. How do these permutations relate to your content? How can you create meaning with how the interactions work together?

Grading

  • Your project two grade will be divided equally between the 50 Result Charrette and your microsite.