Storytelling is a very old human tradition one that can be traced back thousands of years over all different cultures and languages throughout the world. It is perhaps a cornerstone of human existence to relate and empathize with others. For this reason storytelling is a key part of design and vice versa design is essential to storytelling.
Whether a story is spoken, visual, or written; harnessing the power of emotional connection is imperative to getting an audience to respond to a call to action.
Two of the ways that storytelling can be utilized in design are through user experience and user interface. These are outlined in this article.
Storytelling for User Experience
UX or user experience is the overall experience that a user has when coming to a site and interacting with it. A way for designers to incorporate storytelling here could be a timed visual or a discoverable with narrative elements. Effective storytelling in this area should result in users that are delighted with the effectiveness of the site, and how their needs were predicted and accommodated for.
Storytelling for User Interface
UI includes all the visual elements on a page that a user interacts with while navigating a site. This includes icons, colors, typography, buttons, imagery, and animation. Storytelling in the user interface could be as simple as the white space used between elements to distinguish them, or complex as the copy text about the goals and personality of the company behind it. Effective storytelling in this area should cause users to be satisfied by the visual aesthetics of the page.
Key Elements of a Story
For both user experience and user interface the elements of a good story are the same, as outlined in this article the key elements are:
- Realness/ Believability
- Validity for a universal audience
Including all of these elements into the design of a page seems like a challenging feat however the process can be broken down into 3 parts.
1.) Set-up: and scene setting: this should be an introduction of the user to the values and aesthetic of the site. For example a perfume company who has a mission to give a portion of the profit to charity could include pictures of just the product; however a better set-up would explain the mission statement without words. A picture of the charity/organization that they sponsor would be more effective in setting the scene for their company.
2.) Conflict: This should be the longest part of our users story experience, and creating a design to evoke the correct emotional response is pivotal. For example if the goal of a site is to get their audience to buy something then the design story should include visuals and headings that convince the user of the value of their product. Say a perfume company had in their mission statement that a portion of proceeds goes to charity, then a picture or animation of the charity’s work could be helpful in convincing the audience to buy their product.
3.) Resolution: generally this is the interactive part of the storytelling process. After the emotions evoked by the conflict section the users should want to engage with the page to create a resolution. User interface comes into play here, and designers should include buttons that allow the user to interact with their page at this point in the story. In the example of the perfume company a buy or donate now button would be an appropriate example of creating a resolution.
The Model of drama
Fretag’s pyramid of dramatic structure outlines the rising and falling actions necessary for a compelling story. It is composed of 5 different parts.
1.)The inciting moment introduces the characters, mood, and back story.
2.)The complication should be a force that creates rising tension toward the climax.
3.) The climax should be a turning point for our character, the goal is to change the tides of luck from bad to good in this stage.
4.)Reversal should be shorter than the rise and may contain a final moment of suspense.
5.)Denouement in this part the hero(whether they are good or bad) should meet their end according to Fretag. This part is not essential to design since our hero usually is the user of the page.
Image shows Fretag’s pyramid of dramatic structure From.
The power of a good story
Stories have been proven to trigger powerful emotional responses in the brain. Cortisol the stress hormone will increase during the rising action of the story, but the oxytocin from a satisfying ending should balance out the stress created.
Harnessing these emotional reactions are the key to success for some charitable organizations. For ASPCA they utilize sad music and visuals of dogs to create a rising action in their audience, their desired action comes at the end of the commercial when they ask you to donate to their cause to help said animals.
Similarly stories about the dangers of cigarette use and vaping are told through public health commercials. They utilize shame instead of empathy to paint nicotine in a light that won’t be appealing to younger audiences. Their desired action is to stop kids and adolescents from smoking.
What to do for a good story
As outlined in Jen Massaro’s 5 Tips that will make you a better storyteller, there are some well defined steps to be taken in the pursuit of your best story.
- Understand your main idea: what do you want your audience to remember from your story? Hone in on this aspect, there can be off-shoots of the main idea, but all of these should connect back to your mainpoint.
- Get outside your comfort zone: Don’t let fear discourage or dictate your decisions. Jen asks readers to question if they are truly scared or just uncomfortable. Pushing yourself and your audience outside of this can be very beneficial.
- Become a sculptor: This is maybe a nicer way of saying “kill your darlings”. Do not become overly attached to any part of the story that doesn’t further the main idea, because unless you can tie it back to the main point it probably won’t make the final cut.
- Empathize with your audience: Save your internal monologue for a journal entry, focusing on the universal parts of humanity that a story contains will evoke more empathy in an audience.
- Practice: Storytelling is a nuanced skill that will be unique to each person, practicing this will help define and develop your skill and technique.
A framework to follow
All good stories have a rhythm and pattern that may be unique to them but the bones of a good story can be applied universally. In this article the principles of a good story and the frame they follow is laid out by Niklas Goke. His framework is laid out like this.
It is similar to Fretag’s pyramid, but the further breakdown of each act is helpful to understanding the purpose of each one. Mainly the breakdown of ACT-2 is helpful here. Escalation should be the villain’s crescendo, All is lost should be the hero’s lowest moment, and the breakthrough should be when the hero understands their path.
How to apply this to design?
Using these traditional techniques on the design of a web page seems like a difficult task, but Jesse Weaver in this article analyzes how each of these Acts might look if you are designing a webpage.
- Setting the context: at this stage you need to be explaining why spending time on this site is important, honing down the least amount of information that is necessary to keep your users engaged and on the site.
- Showing the solution: at this stage the audience should be interested enough in the cause of your site to want to help or join. Showing users how to get involved should be contingent on what the goal of the site is.
- Defining success: this act should be parallel to the climax in the dramatic structure. It should provide the user with a sense of satisfaction and resolution. Users should understand that the end of the “story” has come and be encouraged to engage again.
Combining these skills is an advanced move for web designing, but the benefits are worth the while for controlling the emotional impact that your site will have over users invested in the story.