Welcome to article #3 in this three-part mini-series on Top-Down & Bottom-Up designing for interactive streaming and MILEs!
In the last two articles, we explored Top-Down / Bottom-Up design in general; we then expanded this in the context of Interactive Streaming & MILEs.
This third article will be looking at a practical way we can combine both considerations using simple designs to create a cohesive experience. The order of start between Top-Down or Bottom-Up doesn’t matter: either can go first.
You can choose how you want to read this blog post:
- As a normal article;
- As a workbook – you can pause at certain points (indicated by [Pause]); in these cases, try to write down your answer before reading on.
For this exercise, we’ll start with the top-down vision: guests staying at a haunted hotel, with viewers becoming ghosts.
We will pre-fill some factors to help:
- Actors: Controlled by AI, in-world Humans
- Participants: Controlled by Viewers, in-world Ghosts
- Interactivity: Clicking on Screen
- Fixed Camera
Here’s a potential view-screen inspiration for this design:
We will start with the following table (the previous article has all the questions filled in, we will put in the question to answer step-by-step).
| Step | Design |
| Vision (Top-Down) | What is the narrative framing of the experience? What are the participants / what do they represent? |
| Vision Communication to Participants | |
| Enjoyment Testing | |
| Example Mechanic – Passive Presence | |
| Example Mechanic – Interactive Presence |
We then fill in the top-down vision (in bold).
| Step | Design |
| Vision (Top-Down) | Participants are the ghosts of a haunted hotel |
| Vision Communication to Participants | |
| Enjoyment Testing | |
| Example Mechanic – Passive Presence | |
| Example Mechanic – Interactive Presence | A simple mechanic that is self-focused where a viewer can interact with what they are watching |
For Bottom-Up, we want to find a simple interaction that is fun to use given the new technology space.
[Pause]
We’ll go with something very simple – I click on a character and they react to it. With our top-down vision of ghosts haunting, we can note the specific reaction action as a “scare” as well.
| Step | Design |
| Vision (Top-Down) | Participants are the ghosts of a haunted hotel |
| Vision Communication to Participants | |
| Enjoyment Testing | |
| Example Mechanic – Passive Presence | A mechanic where the participant doesn’t need to take action but they have a potential effect on the experience. |
| Example Mechanic – Interactive Presence | I can click to make a character react (ie. scare animation) |
We then continue in one of two directions – either distilling the vision downwards or finding an alternative mechanic focused on watching rather than interaction (highlighting a sit-back over a sit-forward interactivity). We’ll choose to continue here with the alternative example mechanic but either is fine.
[Pause]
The Passive Presence mechanic is simply the ability to see myself as a ghost within the screen. Adding an outline and having the overlay focus on my avatar can symbolize that this is indeed “my avatar”. As a midway point (sit-up), if I decide to click on the screen but not a character, my avatar will move to that direction on the map.
| Step | Design |
| Vision (Top-Down) | Participants are the ghosts of a haunted hotel |
| Vision Communication to Participants | How do I understand the vision visually? What am I seeing on screen that allows me to understand the world? |
| Enjoyment Testing | |
| Example Mechanic – Passive Presence | I have a little avatar that floats around and represents me – I can see the avatar of my ghost floating around. I can click in an empty space to move my avatar. |
| Example Mechanic – Interactive Presence | I can click to make a character react (ie. scare animation) |
Distilling the vision downwards, I want to find a way to communicate my vision of “Participants are the ghosts of a haunted hotel”
[Pause]
One of the easier ways of understanding who I am in the world is to see what other participants are within it. Being able to see them as ghosts communicates that point.
I’ll note it can be tricky to explain that each ghost is a different user – it could be worth having a username over the head of a few of them to communicate this point. As a further trick, you may want to limit the amount of participants displayed on screen.
| Step | Design |
| Vision (Top-Down) | Participants are the ghosts of a haunted hotel |
| Vision Communication to Participants | I can see other participants as ghosts. The human characters in the hotel don’t seem to react to them, except if they appear to them. |
| Enjoyment Testing | What would a participant typically say after taking part (narrative / mechanic)? |
| Example Mechanic – Passive Presence | I have a little avatar that floats around and represents me – I can see the avatar of my ghost floating around. I can click to move my avatar. |
| Example Mechanic – Interactive Presence | I can click to make a character react (ie. scare animation) |
Finally, we arrive at the last point. What simple key phrase would a participant say when they share their experience to another human?
[Pause]
At a vision and mechanical level, they are a ghost that can scare humans.
| Step | Design |
| Vision (Top-Down) | Participants are the ghosts of a haunted hotel |
| Vision Communication to Participants | I can see other participants as ghosts. The human characters in the hotel don’t seem to react to them, except if they appear to them. |
| Enjoyment Testing | “I’m a ghost and can scare humans!” |
| Example Mechanic – Passive Presence | I have a little avatar that floats around and represents me – I can see the avatar of my ghost floating around. I can click to move my avatar. |
| Example Mechanic – Interactive Presence | I can click to make a character react (ie. scare animation) |
And there we are – a simple interactive experience design is prepared!
The above framework is probably sufficient to start building your designs. It’s possible to widen this framework, either making it “taller” or “wider”.
Let’s say we care about checking whether or not the hypothesis on enjoyment is correct. We can add possible checks per step in the context of a playtest or survey.
Example table of this point
| Step | Design | Validating Design |
| Vision (Top-Down) | Participants are the ghosts of a haunted hotel | Do people “grok” what is going on from a 5s video? From a still image? |
| Vision Communication to Participants | I can see other participants as ghosts. The human characters in the hotel don’t seem to react to them, except if they appear to them. | In a 30s video with no interaction, does the user understand what they see? |
| Enjoyment Testing | “I’m a ghost and can scare humans!” | After a playtest, ask users to describe the experience in one sentence. |
| Example Mechanic – Passive Presence | I have a little avatar that floats around and represents me – I can see the avatar of my ghost floating around. I can click to move my avatar. | Does the Sit Back or Sit Up user understand they have an avatar on their screen that represents them? Does a Sit Up user click to move their avatar? |
| Example Mechanic – Interactive Presence | I can click to make a character react (ie. scare animation) | Does the Sit Forward user understand that a click makes the in-world human react? Do they understand the in-world human is an AI character? |
Alternatively, sometimes you want to develop a design further and just have more interim levels for exploration.
An example table of what that would look like:
| Step | Design |
| Vision (Top-Down) | Participants are the ghosts of a haunted hotel |
| Vision Communication to Participants | I can see other participants as ghosts. The human characters in the hotel don’t seem to react to them, except if they appear to them. |
| Communicating Community | When other participants are concentrated in an area, the human characters should react more strongly (action or no action) because they see a tribe of ghosts. |
| Enjoyment Testing | “I’m a ghost and can scare humans!” |
| Mechanic over time | As I stay on the stream, a special meter on the side fills up. If I scare a character, it fills up by a specific amount. |
| Example Mechanic – Passive Presence | I have a little avatar that floats around and represents me – I can see the avatar of my ghost floating around. I can click to move my avatar. |
| Example Mechanic – Interactive Presence | I can click to make a character react (ie. scare animation) |
Of course, you can combine considerations of all of the above and make more complex tables as needed but the base framework is more than sufficient to start looking at a variety of designs and start building!
We hope you enjoyed reading through this design mini-series. If you want to discuss further, please feel free to join our Discord server and get in touch with the Genvid team!
