Cinematography in User Experience Design(kanze.co)
kanze.co
Cinematography in User Experience Design
https://kanze.co/blog/cinematography-in-user-experience-design
24 comments
Oh god, no. Netflix has started doing this with their AppleTV app. I scroll to a show and am about to read the text about it and suddenly it starts playing video next to it. I now have to scroll fast enough that the previews don't start, and when I need to stop on something, I have to click on it to go into the show, then quickly click on "episodes" so it takes me to the static list of episodes that don't auto-play. I basically avoid using the app unless I know exactly what I'm looking for already. It's useless for browsing now.
I agree that the Netflix experience can be a little annoying - but that's because we keep coming back to that show and navigation over and over.
The way these have been implemented for blog posts is more of a single use situation. That is, you are likely only going to hit this article once and never again.
The small moment you create at the top of your content - whether it be a banner image, video or animation - is pretty non intrusive to the experience imo.
The way these have been implemented for blog posts is more of a single use situation. That is, you are likely only going to hit this article once and never again.
The small moment you create at the top of your content - whether it be a banner image, video or animation - is pretty non intrusive to the experience imo.
As a user / consumer, I definitely very much do not want any of this.
Agreed. My first association is to back when lengthy Flash intros were all the rage. Some of them blew my young mind, but for the ones I remember, I have absolutely no idea whatever site was beyond that intro.swf.
It also reminds me about retail operations increasingly trying to make shopping an "experience", to lure consumers back from online shopping.
It also reminds me about retail operations increasingly trying to make shopping an "experience", to lure consumers back from online shopping.
As a developer I definitely don't either.
I used to be a web developer (still am, sort of) and, while I thought it was stupid and did it grudgingly, I have to admit that this sort of thing beguiled a lot of clients, generated a lot of work and paid a lot of bills.
>this sort of thing beguiled a lot of clients
Yes, exactly. This explains the state of the modern web.
Yes, exactly. This explains the state of the modern web.
Whenever you think you might be getting too carried away with your UX design, it’s best to assume users are arriving to your website or application pissed off with no patience for bullshit, and nothing will calm them until they do exactly what they wanted to do and leave, and the more movies and fancy animations and loading you throw in between them and their goal the more pissed off you’re going to make them. Is that the UX you’re going for?
I think a lot of folks here are suffering from flash PTSD from the early 2000's. I remember those days. I remember when a flash intro was blocking and cumbersome and slow. But I don't feel these animations are giving off the same vibe because:
1. They are non-blocking of both the loading phase and the content area. You can scroll right past them if you don't want to look because they are inline content elements. They are essentially "animated heros".
2. They load fast, actually less then the total size of some full screen hero images because it's a WebGL scene.
3. They are short and quaint - you might spend the same amount of time observing some small details in a hero image or banner.
4. They downscale to mobile without a quality loss.
I think like any other element in design, it's how it's executed... If back in the early 2000's flash was integrated in a less obtrusive way it might have been a better experience.
1. They are non-blocking of both the loading phase and the content area. You can scroll right past them if you don't want to look because they are inline content elements. They are essentially "animated heros".
2. They load fast, actually less then the total size of some full screen hero images because it's a WebGL scene.
3. They are short and quaint - you might spend the same amount of time observing some small details in a hero image or banner.
4. They downscale to mobile without a quality loss.
I think like any other element in design, it's how it's executed... If back in the early 2000's flash was integrated in a less obtrusive way it might have been a better experience.
I appreciate that it's better than flash. I still don't think it is good UX.
Good UX is doing things the user expects when the user wants, and not presuming it is okay to take their attention when you see fit (ahem, popups).
It's almost always a compromise to a websites usability to include autoplaying video (or video alikes). It may even improve conversions, but it's definitely a UX compromise, not an improvement.
No one scrolls through a website and thinks "I sure hope I get interuppted on my way to the action I am trying to complete" even when that action is content discovery.
I did like some of the articles ideas though. I think the role of cinematography is overplayed a little bit, some of the suggestions are just good UX decisions.
Good UX is doing things the user expects when the user wants, and not presuming it is okay to take their attention when you see fit (ahem, popups).
It's almost always a compromise to a websites usability to include autoplaying video (or video alikes). It may even improve conversions, but it's definitely a UX compromise, not an improvement.
No one scrolls through a website and thinks "I sure hope I get interuppted on my way to the action I am trying to complete" even when that action is content discovery.
I did like some of the articles ideas though. I think the role of cinematography is overplayed a little bit, some of the suggestions are just good UX decisions.
I agree mixing any type of animation in a content area is jarring. But what I'm doing here is using the same sort of pattern people are comfortable with on the internet already.
I think every user expects some sort of introductory section at the top of a content area, whether it's just a title and preface or a banner/hero image to set the mood or peak interest.
Also let's not lose sight of the true purpose of the article - it's about a variety of techniques that may have nothing to do with animations and more about storytelling and scene composition of information to lead users into call to actions :)
I think every user expects some sort of introductory section at the top of a content area, whether it's just a title and preface or a banner/hero image to set the mood or peak interest.
Also let's not lose sight of the true purpose of the article - it's about a variety of techniques that may have nothing to do with animations and more about storytelling and scene composition of information to lead users into call to actions :)
Good UX depends on audience and context. Many things are widely shared precisely because they give the user something fun and unexpected.
For people who work with computers all day, being online is more perfunctory, and the pleasure of seeing something fun/different rarely outweighs the annoyance of the interruption or of having to figure out an unconventional UI. But that's not everyone.
For people who work with computers all day, being online is more perfunctory, and the pleasure of seeing something fun/different rarely outweighs the annoyance of the interruption or of having to figure out an unconventional UI. But that's not everyone.
Do you have an example of this sort of thing done well?
All of these seem like the exact ideas every executive thinks sound great then get shut down by literally everyone else... would higher user engagement even increase conversion rates? Probably the opposite. Mobile support? Nope, just alienating mobile users with a worse experience.
Reminds me of the horrors of ridiculous DVD intros you had to suffer before getting to the actual movie, then you had to watch trailers.
As a kid, DVDs and players that would deny the owner the ability to skip or fastforward though trailers/intros/transitions were my first memorable experience with deliberately user-hostile hardware and software design.
It had a profound effect on me, and I still despise that ethos every time I see it.
It had a profound effect on me, and I still despise that ethos every time I see it.
There are a lot of very specific examples of filmmaking techniques for increasing clarity in movies. One that comes to mind is how George Miller uses center-framing to make it easier for audiences to follow the action in Mad Max Fury Road:
https://www.youtube.com/watch?v=CR7ejkmf8Y4
The unique feature of cinema is the cut. While the web has "page transitions", they're used a lot less frequently, if at all. But maybe someone works on a project that involves a lot of page transitions and can steal something from George Miller.
https://www.youtube.com/watch?v=CR7ejkmf8Y4
The unique feature of cinema is the cut. While the web has "page transitions", they're used a lot less frequently, if at all. But maybe someone works on a project that involves a lot of page transitions and can steal something from George Miller.
> give them a taste of the park before throwing prices and dates at them.
That's a gamble. The user might be there for dates and times, not "thrill-seeker cinematography".
The problem with trying to "help the user fall in love with the phone through playful interaction" is that such playful interaction on a website is never good as the "opening shot" or landing page.
Advanced interactive components should be items to invite users to, or left for users to discover. Optional elements of the site, not forced on every person who visits.
The benefit in allowing users to discover the playful interactive element, is exactly that... they discovered it. They weren't tied to a chair, their glazzies clamped open and forced to view your presentation.
Edit - and just a quick suggestion to the designer of this page: https://kanze.co/projects/earn
While there's some nice visuals on the site, you're breaking typography 101 on this page. A line of text should never extend from one side of a wide screen monitor to the other. Most desktop monitors are wide, and reading a sentence that wide is uncomfortable.
This is one of the many reasons I hate the "mobile first" ideology. No device should be "first", if anything, if you need such a catch phrase to bind your designers together in principle, then it should be "accessibility first" or "readability first" and go from there.
That's a gamble. The user might be there for dates and times, not "thrill-seeker cinematography".
The problem with trying to "help the user fall in love with the phone through playful interaction" is that such playful interaction on a website is never good as the "opening shot" or landing page.
Advanced interactive components should be items to invite users to, or left for users to discover. Optional elements of the site, not forced on every person who visits.
The benefit in allowing users to discover the playful interactive element, is exactly that... they discovered it. They weren't tied to a chair, their glazzies clamped open and forced to view your presentation.
Edit - and just a quick suggestion to the designer of this page: https://kanze.co/projects/earn
While there's some nice visuals on the site, you're breaking typography 101 on this page. A line of text should never extend from one side of a wide screen monitor to the other. Most desktop monitors are wide, and reading a sentence that wide is uncomfortable.
This is one of the many reasons I hate the "mobile first" ideology. No device should be "first", if anything, if you need such a catch phrase to bind your designers together in principle, then it should be "accessibility first" or "readability first" and go from there.
Why is BB-8 on every blog post? Seems to me that Lucasfilm would have a problem with this (apparently unattributed) use of their IP.
These animations fall under a non commercial transformative use context so I really doubt LucasFilm would have any issue. I like BB-8 and wanted to give this experimental design a go so animating him in different ways was exciting to me. Maybe the next few articles I'll use Porgs!
Have you talked to your lawyer about that? Fair use is a lot more limited than many people believe, and marketing for a design agency certainly strikes me as commercial use.
To be safe I'll take the animations down for now and reach out to Disney directly - I'm not using the characters to promote my services but to decorate the content area. They are really just a small part of the idea I'm trying to convey in the article.