#11 The Power of Storytelling in UX
17:25 Share

Hello friends and welcome back to the future of UX podcast. My name is Patricia Reiners and I am a UX designer, innovation designer and strategist from Berlin. So welcome back. Before we get started with the insights that I want to share with you today, I want to tell you a quick story and I think

Yeah, that might be interesting for you as well. So as many of you know, I am working as a freelance designer here in Berlin. So I have my own business. I'm working with different kind of clients. Most of them are based in the innovation XR metaverse area. So a few months ago, I had some kind of like a funny incident with a potential client and

So a potential client called me on my phone and one of the first things he mentioned was that he wants a website that looks like the Apple website. So I was like, yeah, tell me a bit about why do you want that so I can understand your thought process a little bit better.

And then, yeah, he explained it a little bit and talked about, yeah, his love for Apple products and how much he really appreciates the storytelling aspect and that things are really moving and engaging. And yeah, that he just wants the same thing for his product.

super super interesting at that point I didn't even know what he what his product was what his goals are what his visions are so I had no idea and I needed to ask all of that and really make sure that this is the right approach at the end of this podcast I'm going to tell you

what we actually did with his website and how we proceeded. But before we are coming to that, I want to talk a little bit more about storytelling, why this client especially was so excited about the opportunity or the idea to integrate that for his own website or for his business's website. Yeah, really got so excited about it. And in this podcast, I want to talk about

Five things that are important when it comes to storytelling and UX. So the first is, what is storytelling and why is that even so interesting for UX? So why am I in this podcast, which is really focusing on the future and future tech, even talking about storytelling? How does it really align with UX? And then we will talk about scroll and base content, what it is. We will talk about some examples and how this really looks like.

Number three, we will talk about the structure. Number four, we will talk about the interactive part. And number five, we will talk about some pros and cons and how to decide if this approach really makes sense for your product. It could also be an app, right? So this interaction pattern, how does that, if that really makes sense for your product. So let's get started.

with the first and most important question: So what is storytelling? And I guess we all kind of know what storytelling is. It's telling a story. And telling a story through digital products, could be your website, is kind of magical. The reason for it is that telling stories and understanding stories, listening to stories, is something that is very very much rooted in our DNA.

So when our great great ancestors sat around the fire and wanted to talk about information, they shared stories.

Because stories provoke emotions. And everything that provokes emotions makes sure that information isn't forgotten that easily. And this is also a very interesting fact or something that is so important. Just watch a TED talk, watch anything that provokes emotions and you will see that you will remember this talk or this kind of information much, much better than just like basic stories.

information or basic data, right? So every time you provoke information, your user will more likely or your viewer or your listener will more likely remember these kind of facts.

So let's talk about how these kind of long scrolling websites like the Apple website, for example, when they are showing a new product like the new Apple Watch, for example, or the new iPhone, where you or the user decides how the story, yeah, how the story works out just by scrolling. Things are coming from the right to the left. The

iPhone appears, things are happening. So there's some kind of like a movie that you can watch or that you can view and you decide the speed, you decide how it actually evolves just by scrolling. So these kind of long scrolling websites have, I wouldn't say revolutionized, but it's

definitely a new way how to interact with content especially comparing that to like the main basic you know and not so interesting website structure that we are seeing out there on many many many sites or for many brands and the reason for it is that it's just like very usable and users find the content and that it's very easy to test and it's pretty straightforward and the interactive structure is

pretty easy for the user to understand.

And yeah, just by having an infinite page, it doesn't automatically guarantee better user engagement. There are some tricks and some tips to make sure that your website will keep users scrolling further into the depths of its pages. And although keeping important information above the fold, maybe some of you know what this actually means, is still essential. This, you know, especially with scrolling content or to make it

to help users understand that they can scroll makes a little bit more flexible like applied depending on whether you're you know running ads or blog posts or whatever and this is exactly where the interesting difference really lies right like when clicking the user makes an active decision namely like click a button go somewhere but when scrolling the user simply does what he's already doing so the active decision in the case is

wouldn't be stop scrolling, right? So new things are coming so it's very easy to keep the user engaged. And the above the fold argument therefore only applies to a limited extent for websites. And although the main claim and perhaps a teaser can be found on the first page, it does not necessarily contain all the relevant information.

So when do users keep scrolling like on the Apple website or some other examples? By the way, I added some interesting examples here in the podcast notes so you can just check it out and see what works well and get a little bit inspired from that.

So users keep scrolling if the content stays interesting for them. So the more content is, you know, if content is no longer relevant for a user, the more likely they are going to abandon a session,

not scroll any further. So this is very similar to all digital products or basically with everything, right? Like if it's not interesting anymore, most people are going to abandon it. And another reason for the popularity of long scrolling websites is the increasing use of mobile devices. So scrolling is easier, especially on a small screen than just like navigating through a website with buttons and a menu and these kind of things.

So the challenge for designers and marketers is to tell a story with a website and also for mobile. So there are various design options and effects. Examples are animations or parallax scrolling, which is not super crazy fancy, but still interesting and helps the user to keep engaged, right? Like more and that in the moment and the variety of different types of content like text, images, videos,

even gifs make long scrolling attractive especially when you really tell the story and prepare different kind of content so not just text that comes or images but you really work with hierarchies for example

Another thing that is so interesting when you go a little bit deeper into the psychology of human nature

Users really like the feeling of being in control. People really like the feeling of being in control. So for long scrolling, it really gives users a sense of control. And this is extremely important for user satisfaction. So a user can navigate through long scrolling pages at their own pace, draw on relevant content and continue scrolling faster on less relevant content. But they don't really need to do a lot of decisions, right?

They can just scroll and see what's coming and then decide. But they don't need to actively decide to click on a button, for example. So parallax scrolling and animations can also be partially in control by the user giving them a sense of control here as well. And at the same time, scrolling keeps the user really focused on the topic instead of clicking back and forth.

And clicking on a link always means a delay. If the page loads too slow, there is a relatively high risk that the user will abort the process altogether. So this is not the case with long scrolling. Okay, let's talk about the structure. So one challenge is to really structure content in a meaningful way.

For all web, for all digital projects, I think we all know that, but especially for long scrolling websites. So from a CEO, so really zero search engine optimization point of view, there are also some aspects to consider when structuring long scrolling pages. In theory, they would only need a single page.

But this only makes sense in a few cases. A horizontal navigation bar with the most important categories on your website is usually more useful. Yeah, or the other challenge for with really long scrolling pages is to really determine which length is optimal for the user. So too much content overwhelms the user and

it can result in a really poor user experience. So it is difficult to give general tips here because it obviously depends on the industry, on your user group and how the structure really makes sense. In that case, my recommendation is already to test it out and really see what works. And you can prototype these things so easily with actually many kind of

design program. So basically I would say almost every design program is able to or you can use any design program to prototype it. So let's talk about the interactive part which I think is also pretty interesting because especially when it comes to animations and hovering you know which have been around for

much much longer than scrolling but the effects are very popular right so if you hover over something and something happens for example i'm seeing that a lot in the car or e-commerce sector that when you hover with your mouse over an image or the car for example that things are really changing and give you some kind of like a preview of what's coming when you click on that image

So these interactive elements keep the website visitor busy and at the same time mean a little, you know, mental break from the website visitor. Also, some good examples are in the show notes, so make sure to check it out.

And when we are talking about the parallax effect, I haven't actually explained that in the beginning, but most of you probably know it. It's that you scroll and you have some kind of like two layers, something in the background, something in the front, and they have different speed levels. So they are not, you scroll and something in the background changes with another speed. I hope I explained it well.

So in the beginning it was mostly popular in classic video games but soon became popular in the web design world. So the parallax effect uses different backgrounds moving at different speeds. And the result is some kind of like a fake 3D effect but it still looks pretty cool. And initially the term parallaxis comes from the Greek and means change.

And I also have some examples in the show notes. Make sure to check it out. So let's sum this up. We talked about what is storytelling, why is this so important. The thing that is very important to keep in mind is storytelling.

Storytelling provokes emotions. It keeps people engaged. And especially for UX it's pretty interesting, especially when it comes to scrolling, because the user doesn't need to do any decisions. There's just one task that he needs to do, not decide on clicking that button, then clicking here and looking for something to really find what's coming. No, there's just one task: scroll down and watch what's happening.

And the user looks on everything that's like moving and interacting. So the user is keeping, is engaged. Maybe this concept even provokes emotions so that the user really gets interesting, interested in certain parts of the product or in the storytelling and wants to really dig deeper because he's so engaged in the product. So super, super interesting to keep that in mind if you really want to tell a story.

But conclusion and my recommendation is really make sure if this is aligned with your brand story and what you really want to bring across. So in the case of, you know, the client that I told you in the beginning, we actually decided after some analysis, after some research and after a little bit of like restructuring of the strategy that some kind of like an Apple website approach,

doesn't really work in that case, we decided to animate certain parts of the website in a very different way because we really wanted to keep that focus on a really different level and the storytelling wasn't really the perfect or the ideal solution for that case.

Because although it can be a really cool and supportive element for your products, you know, like it's the interactive storytelling, you have low drop-up rates, which is super nice, and increased intention, they are the cons that you really need to keep in mind. So there are for sure some SEO challenges, which is a very important topic, especially for startups, so we need to keep that in mind.

Some things are a little bit more difficult to measure, right? Because if users are really clicking on content to go or to come or to get to a place where they want to be, it's very easy to measure. And the content setup is much more difficult and also the prototyping is much more difficult.

and also cross browser testing is a little bit more difficult so you just need to make sure that things are really working out because if anything doesn't really work how it should be the whole story is ruined so like i said in the case of my client we decided to yeah to go with another approach um but still use some storytelling some hover effects some animations for different part of the website

So let me know how you like or what you think about the storytelling approach, why you think it might be interesting or maybe the challenges that you see, maybe on different products or web pages. Feel free to send them to me. And don't forget to share this episode with someone if you think it would be helpful. Thank you so much for listening and hear you in the future.