In my previous post I looked at some examples of “interactive films/videos”, and tried to see how they worked on a narrative level (while also lightly touching on some mechanics and interface issues here and there). For today, I thought I’d move this along a bit more by using the same examples, and maybe some new ones too, to compare the interface designs of these interactive videos.
After a very brief introduction, the player is taken to the screen where they can select one of six candidates. They are represented by short black and white videos with a colored overlay which indicates which party they belong to. All important text information in the game appears in a consistent place, the black bar at the bottom, so the player doesn’t have to waste time by trying to find something.
After the player has selected a candidate by clicking on their respective little screen, they are taken to the main game area. There are four elements on screen. The main one is the big red button, which is the main interactive part of the site. To emphasize this, it breaks the flat coloring of the rest of the page, and is instead given a faux 3D look by a simple shadow, and an “outer ring”. Users can go back to the menu and select another candidate by clicking on the labeled button in the top right corner, which is also shaped to represent the six little videos appearing on the selection screen. About two-thirds of the browser window is used to display the relevant video. Below that, there is a short description of the topic, and a thin line that acts as a timer. This definitely looks nice, however when playing it’s a bit hard to actually know how much time is left while reading the text/listening to the speech. This is mostly due to the line being fairly thin, and the fact that it horizontally spans the entire window, meaning that when the last few seconds come it’s outside the user’s field of view. Also it goes under the “bullshit button”, which doesn’t help.
Clicking the button, or waiting until the time runs out results in a darker overlay coming up, and the correct answer being displayed on-screen with the same large sans-serif font used everywhere else on the site. And the color scheme also stays the same: red, white, yellow, and grey.
After a candidate’s challenges have been exhausted by the player, they are taken to a results page, which still keeps the same color scheme.
One complaint I have is that in order to access the video controls it’s not enough to hover the mouse to the bottom of the video player, but instead the user has to click a small button in the bottom right corner.
Don’t Look Away
While not the most exciting website design-wise, I’m still bringing this one up, because it exemplifies a layout I’ve seen many other similar sites use. The video is displayed in the entirety of the window, and the tiny logos and social media links are located in several corners of the screen. It makes sense; we want to maximise the space available for the video, so it we just shrink down the legal/social media stuff, we can overlay that in the corners, and be done with it.
Also the high-contrast black and white images work well with the sharpness of the font used, and fits the heavy subject matter.
Coldplay – Ink
This is how the entirety of the video looks like: two objects or characters are highlighted, whenever the mouse hovers over one of them, a circle is drawn on the screen. After clicking on the object, both highlights disappear, along with the circle.
I don’t know if this is something about my screen resolution, but the elements of the timer aren’t aligned properly. The text intersects with the container of the progress bar, and said bar’s height exceeds that of the container. I also don’t think the clearly visible and somewhat harsh texture of the timer works well with the softer art style of the video.
It’s worth noting that in order to sync the video to the music, each choice has a default option which the computer takes if it receives no input from the user. Also, as mentioned last time, clicking on something doesn’t advance the video immediately, as the timer still has to run out. Which is annoying, especially when the highlights are a bit hard to see, like on the footprints in this picture:
This one is the most complex, so this might take a while. Right off the bat, the loading screen establishes the visual style of the interface: the clean and thin lines, the easy to understand and stylized iconography, the dotted lines, and the occasional hint of yellow all make their appearance right at the beginning.
All of this carries into the main menu, and the film itself too, the only difference is the addition of a darkened background image, and the “condensed sans-serif font in a rectangle” motif that’s going to appear quite a few times during the game.
If the site finds saved data from the user’s previous play session, then there is an option to access a chapter-selection screen, which introduces the final reoccurring design element, the diamond shapes. In general, the layout of the UI is fairly airy, which helps focus the attention of anyone looking at it.
As with the Usher song mentioned previously, this site has the same “shrink legal and social stuff down in the corners” thing going on. But both the legal notice and the credits look really nice, as they both follow the stylistic choices the rest of the game uses.
Each “new” mechanic of the game, that isn’t clicking on a thing, is introduced with a screen where failure doesn’t have any consequences. In these cases the screen turns darker than with other interactive segments, and a “Got it” button is put on screen. The three mechanics are: drawing several shapes in a limited time to fill up a progress bar, drawing a quick continuous line that mimics the motions of the main character, and holding the mouse over a moving target area for a certain amount of time. The latter two work perfectly as representations of the actions taking place on the screen, but sadly the first one feels a bit contrived (it’s supposed to represent remembering… somehow).
The transitions between clips work differently on a scene-by-scene basis, although there are only a few ways the video does this. In the “remember!” parts there’s a slowed down loop in the background. When the quick swipes are required either the scene will slow down a bit, or there will be a short loop played quickly both forward and backward, which feels a bit like the game is glitching out. And then there are some moments where the action is basically paused until the player interacts with the game, or the timer runs out.
This one uses the same clean layout as Five Minutes and Don’t Look Away, at least at first. The splash screen is obviously referencing Star Wars with the font, and the yellow color of the “Watch The Film” button.
Most of the other content, however, doesn’t really follow any of the Star Wars aesthetics. This isn’t necessarily a bad thing, but I thought it’d be nice to at least point it out. On the one hand, it makes the film rely less on the SW license, and the films’ reputation, but on the other hand, those movies and the sets used for them, are the only reason this short documentary even exists.
Anyways, the user can open up a chapter selection menu by clicking on the three little white dots in the top right corner. This selection menu is a fairly basic interface that slides in from the right side of the screen, and contains all of the videos, slideshows, and other content this site offers. The colored background images for the video segments offers them a nice distinct appearance, compared to the extra content, which is represented simply by some text and a little icon.
If the user instead wishes to go through the documentary in the intended way, they get to watch the video, where sometimes a “click here!” button appears, which takes them to an extra slideshow, or an interview with someone. This is nice, as it creates optional content, so people can decide how much they are interested in this topic. The timer is clearly visible, but not obtrusive. Making it circular helps users see how much time they have left, since they don’t have to track a moving line across the screen. It is also helpful that all interactive buttons are indicated on the timeline with little yellow boxes, so if you want to go back to something you may have missed, it’s easy to do so.
The slideshow interface is very simple: two arrows on either side, and a slide counter on the top right side of the screen. However, I don’t really understand the presence of the video controls, since at this point there doesn’t seem to be any video playing.
The Q&A section has a nice question selection screen, which lets users ask the person speaking whichever option they want. I actually really like the spacing between the questions, and especially the thin, grey lines separating them.
IKEA: Where Good Days Start
While this video is sadly not available anymore, I grabbed some screenshots from its trailer, which I hope is an accurate representation of the finished version. Anyways, this short marketing film uses a hand-drawn-ish aesthetic for the interface (except the little icons in the top right corner). This works very well with the whole “family is getting ready in the morning” thing the ad is going for.
The playful typeface also fits, although I don’t know what they text actually says. Also worth noting is that pretty much every single interaction in here uses a tailor-made interface that’s appropriate for the situation, but is also consistent with everything else. For example:
This color selection for the towels uses simple circles. And the point here is clearly communicated through the little yellow paint drop, which is good, since the text is in Dutch.
The little animation representing how long a lightbulb lasts. It’s a timeline that feels like it was built from a single line (that’s not true, but there are no breaks between images).
The “whatever this part is, I don’t know how it relates to IKEA” section of the video replicates Messenger texts.
Turning on the different lights in the room with the seven numbered buttons in the middle. Note how each button gets illuminated itself once the light in the room is active.
Honda: The Other Side
This is a very minimalist UI, but it does it’s job perfectly. Push a button, thing happens on screen. No need for complexity.
Until Dawn (game and trailer)
The trailer for Until Dawn is an actual interactive live-action video, although there is only one choice. The ugly white boxes are sadly the default appearance of YouTube annotations, but otherwise the small icons and one (or two) word explanations are a nice way to represent each choice. The outer circle around these icons acts as a timer, after which a default action is taken. The only issue is that clicking on one of these doesn’t move the video to another point, but instead opens up a separate video on YouTube, which takes a while to load, and doesn’t even start full-screen, so it breaks the flow quite a bit.
In the actual game they sadly dropped the little icons, and they only have a few basic ones. The same principles apply however: if there is a time-limit on the choice, then the white circle around the icons starts counting down. Although there are places in the game where choosing neither is considered a valid choice, and instead of defaulting to one of the options, the game advances in a third direction. As for the scene transitions: whenever there is a time limit, the game just keeps going at regular speed until a button is pressed, or the time runs out.
If there is no time limit, then the game has small idle animations to avoid using a static image. Sometimes the character’s hand moves slightly, or his eyes follow the controller’s position, or something along those lines.
Other games also do similar things. Dialogue choices sometimes have a time limit, in which case either there is a default option, like in Alpha Protocol, or the game is scripted in such a way that saying nothing IS an option, like in The Walking Dead. (also worthy of note: the horizontal timer works here because it is positioned close to, and confined to the width of the dialogue choices, meaning the player can easily tell how much time they have left, even if they are reading the text)
In case there is no time limit, the game usually gives players some extra information. In Deus Ex: Human Revolution, the game gives a short description about the person the player is talking to, and when highlighting a choice a text version of what the main character would say if that option is taken is displayed. (Unlike games, such as Fallout 4 or Mass Effect, which only give a very brief description of what each option is, which might be misleading, and that can lead to player frustration)
Well, I don’t know if that made sense. At least I have some material I guess.