
Cinematography in User Experience Design - kanze_
https://kanze.co/blog/cinematography-in-user-experience-design
======
mwaozen23saoe
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.

~~~
kanze_
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.

------
Joeboy
As a user / consumer, I definitely very much do not want any of this.

~~~
fredley
As a developer I definitely don't either.

~~~
Joeboy
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.

~~~
Isamu
>this sort of thing beguiled a lot of clients

Yes, exactly. This explains the state of the modern web.

------
matte_black
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?

------
kanze_
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.

~~~
ehnto
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.

~~~
kanze_
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 :)

------
danielvinson
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.

------
KevanM
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.

~~~
Crespyl
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.

------
morley
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](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.

------
exodust
> _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](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.

------
edpazu
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.

~~~
kanze_
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!

~~~
skymt
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.

~~~
kanze_
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.

------
carapace
busted w/o js

~~~
Joeboy
Also something's stealing focus so that keyboard navigation doesn't work. We
are probably not the target market though.

