︎Back to Interactive & Experience Design

Fall 2021 ︎︎︎ SUNY Purchase ︎︎︎ (DES3090) Interactive & Experience Design

Project: Create an interface

Background

We’ll now be transitioning to talk more directly about interfaces and the visual and conceptual concerns therein. We’ll focus our discussions on screen-based media (apps, websites, etc), but will mention other overlapping areas like industrial design and video games.

To that end, this project is an inflection point; an opportunity explore your interests in that area, extend your interest in the CPX/programming, or just do some wild shit (that satisfies the assignment of course)

Objectives

Conceptually the ideas we are thinking about are what we talked about previously (discoverability and feedback). However you approach the piece, you must consider and be ready to talk about:

how “discoverable” the feedback system is (or isn’t)
how the input is processed or handled (or isn’t)
how the system provides feedback (or doesn’t)

Requirements

Interface has some level of discoverability

The system you create, must consider how the user can discover the underlying mechanics. That is to say in an app, how are buttons differentiated from other text? How do buttons react when hovered over (mouse) or depressed (touch/mouse)? Are links secretly embedded in the source code that lead to the “real project”? Are you the person giving instructions on the system.

Input is able to be processed

The system you create must able to take input form the user, and then do something with it. That may require touch to change to visuals, a question to become an answer, etc. How you do this clearly, obtusely, funnily, professionally, is important. This processing can occur through code, an application like Adobe XD or Figma or Sketch, through you giving instructions and taking questions, or addressing them via a video demonstration or “ad”

Create feedback for input The system must take input from user, process it and then feed it back to the user. This can be through something changing colors, making a sound, answering a question, a 3D model of a genie appearing in your demo video, etc.

Final Submission

Visual record of your piece.
This will depend on your project but if it is interactive make sure that it can be interacted with (ie a website link or a prototype link). If it is performative or a video make sure that the video is accessible from the spreadsheet, or make arrangements to have the piece recorded for/during class.
A diagram of the complete wireframe of your document.

Designed/Typeset documents showing at least three users.

A folder containing all notes, sketches, and earlier iterations.

Considerations

It doesn’t need to “work” ︎︎︎You can make something that works via Adobe XD, you can create a video that demonstrates how the thing you would want to make would work, it can be a performance where you can be the “interface” of sorts. YouThis one is about the idea.
What does “touch” /interactivity mean? ︎︎︎ Think about what interactivity means. Who does “touch” privilege? People who can afford phones? People with hands? How might alternative systems work? Is it about you creating a system you interact with and get “good” at or is it about something you can share with other people or have to teach them?
The design does not need to be “good” ︎︎︎ That is not to say you don’t need to think about it, by “good” I mean that the system does not need to be clear. For example you could create a blog that is completely obscured by ads/a pay wall to demonstrate how hard it is to simply read text on many websites. You might make some part of your app “secret” or harder to discover. Think of something like parrying in Street Fighter III (that is to say you can still enjoy the game without it, but you need this to be an “expert”)
There are no requirements set on the medium ︎︎︎Just reiterating the above, that this one is about the ideas. What are you into right now? What do you want to be into? Are you good at After Effects? Do you want to do UI/UX as a career?
Ideation is important ︎︎︎ This is not only having an idea but generating one.

Rubric

Concept ︎︎︎ 40% ︎︎︎ You have to develop an idea and that idea is able to withstand interrogation when we talk about it (in critique and individually). That does not mean it has to be complex or deep, but that there is a clarity with which you’ve thought about it that is more than “I don’t know it’s some buttons” or “It’s cool”
Execution/craft ︎︎︎ 40% ︎︎︎How you follow through on your idea is important. If you print out paper cards are they trimmed neatly? If you design an app what’s up with the grid in the screenshots? Is the voiceover in your video clear and discernable? On a deeper level, can we get to where you want people to go with how you executed your idea? Does the piece go somewhere else, other than you intended that is more interesting?
Development ︎︎︎ 20% ︎︎︎ What discernable path in thought can I see in this relative to your other work in this class and elsewhere? Is this improved from your other work?

No Shuriken Mode Challenges

(Please note that, doing these do not guarantee a better grade or extra credit by any fixed or demonstrable amount, but if you’re doing or approaching these things, you’re probably doing well. The point is that, like not using shurikens in Shadow Dancer, it is more difficult, and increases your proximity to the material. All this being said don’t hurt yourself and consider your other assignments and mental and physical health. Additionally, if you are not feeling challenged by the class or an assignment, and these suggestions are not sufficient for you, please le me know.)

A deepweb site that steals your credit card information (or a series of creepypasta hoaxed reddit posts/an ARG that purport this site to exist)
A proposal for a social media app that is not spiritually deleterious, has a full map or animation of each of its pages and an accompanying animation that advertises it.
A mockup for a game where you control and explain the rules. The game is electronic but you’ve mocked up every state as cards that can be played in real life. You teach someone else in the class before class starts and you and them manage two concurrent games.

Suggestions/ideas/examples

I don’t have super great documentation of this project, but in the Fall of 2019, someone made this project where he had the numbers for a gift card arranged such that you had to “unscramble” them and then if you figured out the code you could use it to order something. Someone got one of the costumes shown above. In the same class someone else made an XD prototype of an app that they used for their senior project that helped their mother track their pain levels.

Simone Gertz’s “shitty robots”

Synthesizers

I highlight synth interfaces (and related plugins) because they are in an interesting space. Especially older synthesizers had more limitations in how they could “express” an idea visually because of technology of the time. Thus, the relationship between clarity and interfaces is usually a bit more diffuse; that is to say many synths are marketed or defined by their wealth of features rather than how easy they are to understand. That being said, certain synthesizers like the Korg MS-20 pictured above next to it’s VST “equivalent” is a famous synthesizer that influenced design of other synths to an extent that attempting to reinvent the “wheel” of a basic modular synth structure might be

A real Korg MS-20 in the “wild”

A digital reproduction of the Korg MS-20

A guitar pedal from Subdecay called the M3, based on the MS-20.

Digitial plugins often copy these “legacy” designs (or use them because they are more marketable), when there is quite a lot of unexplored room in terms of
design that is largely unexplored.

The Wavetable synth built into Ableton Live

The Vulf Compressor by Goodhertz designed with type from Oh No type company.

Jacolby Satterwhite’s performance work

Paper game prototypes
=

App Demos

Relevant Dates

10/14/2021 ︎︎︎ Introduction

10/21/2021 ︎︎︎ Initial idea check-in

For next week,

This may depend on your project but do the following to the best of your ability:

Enumerate and sketch all the states of your project (will it have a home page, a blog page, a login page), and how all those states will connect with each other. This maybe the parts of a performance, the parts of a synthesizer panel, etc.
Identify and define (at least) 3 possible users or people who will experience your project. You don’t have to tell their life story but you could draw them, find a suitable portrait on this person does not exist.com after you roll the dice for a while. Where it is relevant for your project think about things like, their income, their age, their family, their background, their taste, their values. This will be a way to gauge some decision making for your project.

10/28/2021 ︎︎︎ Progress check-in

11/04/2021 ︎︎︎ Check-in, technical triage

11/11/2021 ︎︎︎Final Check-in

11/18/2021 ︎︎︎ Show & Tell
11/18/2021 ︎︎︎ Response readings/re-stagings

︎Back to Interactive & Experience Design