The Haunting of Hill House and UX Design
It’s Spooky Season. Pumpkin Spice is in the air. The leaves are falling. Ghouls that go bump in the night will soon have their way on Halloween.
In the spirit of this season, I wanted to discuss something important: Netflix’s The Haunting of Hill House and how it relates to UX Design. I know, the comparisons are extremely obvious, but let me take you on a little journey.
RECOGNITION OVER RECALL
I originally wanted to be a filmmaker, so that’s where the inspiration for this post comes from. A well crafted story is not too terribly different than a well executed UX Design. Film is thoughtfully designed to provide an experience to the user that is unique to that particular story.
Scares. Laughter. Delight. Drama.
They are all emotions a filmmaker is seeking in their given story. How they get there is through the design of the story; the characters with their behaviors, the plot, and the pace at which these componenets interact with one another. Sound familiar?
If I was making a wireframe, the artboard acts as the story. The components and patterns represent characters and their behaviors within this story. The grids and user flow of said wireframe is the plot. These elements dance together, creating an experience for the user.
UX Design is story telling. Or, maybe it’s more accurate to say story telling is UX Design? A proper chicken before the egg.
Mike Flanagan, the writer and director of Hill House, might be an incredible UX Designer by his use of the classic heuristic “recognition over recall”. Essentially this heuristic seeks to communicate what something does in UX by cueing the user in multiple ways. The user can use dedeuctive resoning with the element’s behavior instead of having to recall information. This is a sub-par explanation, and heuristics lean towards gray definitions, but this is the one we will be using as we look at Hill House.
If anyone has watched The Haunting of Hill House then you probably are familiar with the Tall Man. If not, a brief refresher (with no major spoilers): he is a particular ghoul in the titular mansion that floats from room to room stamping his walking stick with a thud to announce his appearance.
Essentially, we hear and thus recognize the tall man before we ever see him. When one of the main characters, Luke at 10 years old, hears this thud outside his room one night, he precariously sneaks out of bed and opens the hall door. He sees the Tall Man for the first time, and we as viewers/users see a few things:
a) His feet do not touch the ground and are not used for walking. He floats several inches above the ground despite his feet, giving the user/viewer a sense of otherworldliness that spirals into disorientation.
b) The Tall Man has a walking stick that he thuds every several feet. While thuds a long way off in a dark house is already eerie, Flanagan purposefully shows us that this ghost uses the walking stick as a way of announcing his coming.
These two elements act as means of recognizing what the Tall Man is, and where he is.
Flanagan is playing on old haunted house tropes by reframing them into meaning different things for this story, for this mock up, if you will. Instead of a ghost with a tendril tail like in cartoons floating above the ground, we see the Tall Man’s feet and it scares us that he chooses to float instead of simply walk like other specters.
A sudden bump in the night isn’t random, it’s a way to track how near or far the Tall Man is in relation to Luke. There is now intentionality and thought behind this trope. The same is true in UX, our chances of creating a new way of navigating or interacting with an application are probably pretty slim. However, the reworking of those existing patterns can give the user something truly special.
On my last client project, my team and I worked with a client who had users dropping off on a particular form that was 4 steps long (4 seperate pages). Upon research, we realized the users didn’t know what was honestly being asked of them and they felt overwhelmed by the visible number of questions per page. These users felt frightened by something truly scarier than any ghost: lack of clarity and cognitive overload.
As our team began trying to figure out creative avenues to solve this problem we realized something remarkably simple: give the users feedback of what they have selected and only show them what they need. Again, if this sounds painfully obvious, often the best solutions are.
The 4 steps helped the user list a property for rent. We took inspiration from the renting side, as other sites like Expedia and Trevlocity would dynamically fill out your reservation form based on your decisions. What if we did the same for users listing property?
A familiar pattern, used in a new way.
With that, we also decided to not overload the user. A simple conditional form, that allowed follow up questions to appear as the user answered, not living permanently on the page to overwhelm them on their journey. Simply hiding information not relevant at the time for the user allowed for a more seamless userflow and a more pleasant experience.
Now, back to the Tall Man.
Once Luke sees the Tall Man, he runs and hides under his bed. We see from Luke’s perspective under the bed, the Tall Man entering the room. He floats around the room, and even takes Luke’s trusty bowler hat (I could go off on how this is a metaphor for Luke being robbed of true adult independence by past trauma but this is about UX and ghosts). All along the way we can hear the clear thud, thud, thud of his walking stick.
At one point, we hear the thud becoming more distant. The Tall Man is leaving. We know this sound and can recognize that Luke is gonna be ok. Luke, like the users/viewers lets out a collective sigh from holding his breath.
But the Tall Man isn’t gone yet. He is at the door to the hall. We see him spin around, his feet never once touching the ground and hear the thud, thud, thud as he crosses the room.
The thuds are closer, more distinct. Luke is frightened, his life is in danger. The Tall Man is almost upon us and there is nothing we can do.
We hear a final thud, far too close for comfort. The Tall Man reaches under the bed. Luke is terrified and so are we.
What Mike Flanagan has done here is create a carefully constructed userflow using familiar elements. He allows users to recognize the sound of the walking stick, the eerie floating of the Tall Man, and the immediate danger that is posing Luke. He identifies these elements, so that when the scene crescendos into chaos, we arrive at fear. Our user journey ends.
Remember, user flows are scarier than you think and you are trying to tell a great story. Great stories don’t have to be original, but they use familiar patterns in new ways. Whether you are creating a ghost or a form, you cannot afford to forget the value of recognition over recall.
Happy Halloween, everyone!
