Our website is yesterday’s news!
What is the opposite of news? A search for antonyms isn’t of much help. Whatever, let’s go for yesterday’s news. So this is about Dinahmoe’s OLD website. launched over a year ago, definitely yesterday’s news, a new site is in the works, so why bother?
Ever since I founded Dinahmoe there has been certain principles in user experience design that has been fundamental to me, parts that I think is essential but often forgotten. When we did the design of our website I used it as an experiment to see how they could be implemented.
This article is not so much about the (old) website but rather some of the thinking behind it. For most of you this is probably super boring, so I would recommend you to do something else. Off you go!
…
And for those who stayed, don’t say I didn’t warn you! And here is the link.
UX is not User Experience
First let’s define the term “user experience” since everyone uses the term differently. I don’t mean what is commonly called UX although this happens to be about a website, I mean in the widest sense, the experience of being. Deep!
The user experience depends highly on the user’s expectations, do they expect a utility or to be told a story? A utility should be quick and easy to use and it should solve a problem in the best way possible.
A story is a completely different thing. Take for example a motion picture, although we understand where it all will end we don’t want just the final scene, it is how it got there that is the story. Utility of a more emotional kind.
A website then, utility or story? In this case the user experience design principles were the main star and storytelling is an essential part of this. So more story than utility.
Intellect vs emotions
Information is intellectual, an experience is emotional. If you forget your analytical part of the brain for a second, then you are experiencing, feeling, absorbing. If you break the magic, then you are back, self aware, observing, analytical, critical.
If you want to tell a story, be it a book, a motion picture or in this case a website, you want your audience to forget themselves and just experience. A great story is of course the foundation but it is often the mistakes that brings the audience back to reality.
I am not a wine expert, my skills are more on the consumption side, but I do appreciate great wine when I get the opportunity. I was always curious about wine reviewers, they often talk about “defects”, a great wine doesn’t only have good qualities, it also lacks defects. What a negative way of looking at it I thought, but after having the opportunity to taste some wine totally out of my league, it makes perfect sense, there were no defects in any way. Still, there was a ton of character, not a boring moment.
User experience is like wine. Each little defect is summed up and disturbs the experience. So translating from Chateau Latour ’81 to a website: everything that disturbs the experience is taking the user out of their emotional state, from experiencing to observing, subjective to objective, feeling to thinking.
The first obstacle is …
In the digital world there is always a barrier that we cannot get rid of (a little simplified but a topic for another article) and that is the technology itself. We need to use some kind of technology to interface with whatever we want to do. The moment the technology gets in the way we immediately leave the experiencing mode. Technical flaws and bugs, unintuitive interaction models and functions, loaders and loading time are the most obvious ones, but below I describe some more subtle and not so obvious ones that I wanted to explore.
Designing for story telling
Today almost every site looks like a blog. You can see that the pages are template based, it is just the content that is different. Often when a site is described as beautiful it is not the site they talk about, it is the content. Beautiful images and videos, but the site itself is just a shell. Easy to update. Practical. Utilitarian.
I can’t help but think that this trend was fuelled by the death of Flash. Suddenly creative ideas that were simple to implement became hard or not even feasible. Instead of solving the challenges we collectively decided that the blog was the new black. The rise of video could very well be to cover our need of richer experiences that are no longer (feasible) fashionable. Just a thought 😊.
Designing for storytelling is different from utility. It is about breaking out of the predictable, the templates, and instead surprise and engage, create a rich and rewarding experience.
Normally it is quite easy to understand how a page is constructed, you can clearly see all elements tbat is used, text, images, videos. I wanted to blur those lines, make it not immediately clear where one element starts and another one ends, make them overlap each other — animations, video, image slideshows, texts — all with the goal to make the user forget the individual elements and think about them as a whole.
It might seem totally insignificant but in the same way as defects add up I think the subtle details also add up, bringing you closer to the point where you stop thinking and start experiencing. It creates a whole that is richer than the sum of its parts.
Using video as a design element
GIFs might not be the future of marketing but they for sure grab our attention. Motion make the visuals immediately feel much richer and rewarding, the autoplay behavior of GIFs gives you instant gratification. However, GIFs are ancient and far from ideal because of file size, lack of control and lack of audio, which makes video a far better choice.
But the increased control of video also has a downside. Video is almost always presented in a video player with playback controls and a timeline, which is very familiar to all users. But those innocent playback controls are actually not a good thing if you want to tell a story. The awareness of the player takes focus off the content. Remove the playback controls and the user is much more likely to just experience.
The video controls that designers chosse to add are probably one reason why moving images are not used more as design elements. Remove them and you can replace all static images with videos instead.
So let’s talk about video at 48 frames per second, you know you want to! There was a lot of debate whether 48fps was the future of cinema or a total abomination when the first Hobbit movie was released. The film was used as proof that 48fps posed a serious threat to the cinematic experience. Here is a collection of reviews that totally massacres the Hobbit, great fun to read (unless you are Peter Jackson).
I agree that the Hobbit is a really crappy film, but the main reason is NOT the framerate, it is the lighting and 3D work, it looks awful, like television with characters in front of a green screen. And yes, it looks equally awful in 24fps.
To prove the haters wrong we did the main videos on the site 48fps, also our latest showreel. All source material was in 24fps but converted using Twixtor (some artefacts had to be removed), animated texts and visual effects were done native in 48fps. It looks great and makes all movement much smoother. So it is not the framerate, Peter Jackson messed it up. I am sure James Cameron will succeed in raising the bar, again!
Transitions — the forgotten arrows in the flow chart
There is nothing worse than a positive experience getting interrupted. That screaming child, that crappy skype connection, that too salty fish that destroyed an otherwise perfect experience. It just gives the analytical part of ourselves an excuse to get involved. Unfortunately this is also what stays in the user’s memory.
If you look at an application flow chart there are all these unremarkable arrows that connect the different views or pages. Those arrows explains where you are going next. What they don’t explain is HOW you get there. If you do it the brute force way (which most do) then it is easy, you just reload the whole page.
Reloading the page is equivalent to zapping a TV. There is no way you can stay in the experience, it is like you are switching to a different channel. Think about if music did a hard cut between verse and chorus, or a film director just brute forced the way through the story. In all arts we care about the drama, the flow, the arch, HOW we get from A to B but most websites don’t care.
Seamless. It is probably the word I have repeated most in my digital career. Getting from A to B and enjoying the ride. It’s not the goal that is important, it the journey, right? Always thinking about this, motion pictures are the reference, why should we aim for less if we want to engage?
It comes with a cost though. Thinking about how to make the transitions exactly the way you want them requires some work. You have to go beyond the flat structure of most sites and split the elements into separate layers, more like how you use tracks in e.g. After Effects. In this case there are six layers or more that are controlled and time animated independently.
With a page reload you just place whatever elements you want on the screen, you don’t have to care about where you come from. Creating seamless transitions like we do here means that you must animate each layer from its current state to the new state independently. There are actually three different ways that you can get to each section, each with its own set of elements, animations and timings. Then there is preloading of assets to ensure that we minimize the risk of showing a loader, and deep linking which requires us to swap loading order of sections dynamically. Is it worth all the work? If motion pictures are the reference, what choice do we have 😊 ?
Digital production without coding
Web development can become pretty complex and dinahmoe.com is far more complex than it seems on the surface. There is an exponential relation between code complexity and bugs, any change risks to create unintended consequences.
This is closely connected to the real reason why I founded Dinahmoe. In traditional web development there is a designer and a front end developer. The designer does the design (!) and the front end developer recreates it with code. Then the designer has feedback, there are some rounds back and forth, and then the client has feedback, and the design is changed, and new features are added, and assets are late, and approvals are late. At the end there are 5 devs working 14 hour days just to get it done in time.
This might seem like a tehnical problem but it is actually a creative one. The complexity in the work process makes it vey hard for the designer to realize a creative vision, they own the process up to a certain point, then it is out of their hands. This is not how great art is created. Imagine having a painter just doing the draft and then leave the execution to someone else. Then add the chaotical process that is a trademark of advertizing.
To solve this I created a work process that gives the designer the tools needed to be able to build the design themselves, removing the need to know any html/css/javascript or any other programming language. This makes it possible to skip several steps in the production process completely, and to greatly simplify others. This empowers the expert in a field, the designer who now owns the process from start to end.
99% of dinahmoe.com is built without touching any code at all. Of course there is a lot of magical code under the hood that makes this possible. That is for sure a topic for another article.
Conclusion
I know it is yesterday’s news and I know that yesterday.dinahmoe.com isn’t perfect. But this is an ongoing process, learning by doing. I am 100% convinced that in the same way as we don’t buy crappy FX in films anymore, we are not going to buy crappy digital experiences in the future.
Digital has become a fundamental part of our lives, we spend more than half of our time awake in front of a screen, scary and maybe worrying, but surely inevitable so let’s make the process of production painless and creative, the experiences meaningful and beautiful, and let’s enjoy the ride!
Before you go
Clap 👏 👏 👏 5, 15, 50 times if you enjoyed what you read!
Comment 💬 I’d love to hear what you think!
Follow me Johan Belin here on Medium, or
Subscribe to our newsletter by clicking here
