{"id":10245,"date":"2015-12-01T19:06:27","date_gmt":"2015-12-02T03:06:27","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=10245"},"modified":"2020-10-13T01:00:14","modified_gmt":"2020-10-13T08:00:14","slug":"3-actionable-ux-lessons-from-hollywood","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/3-actionable-ux-lessons-from-hollywood\/","title":{"rendered":"3 Actionable UX Lessons From Hollywood"},"content":{"rendered":"

Is UX and tinsel-town really that different? <\/p>\n

Both are visual mediums with motion, both must connect emotionally with an audience, and both only succeed when the user enters a state of total flow. <\/p>\n

In film, that flow is a suspension of disbelief and complete emotional investment in the characters and story. In UX, that flow is a state of satisfaction in which every action and task feels as fluid as thought. <\/p>\n

While the true superstar of UX is always the user, the practice can still draw a lot of actionable techniques from classic filmmaking. <\/p>\n

Here are a couple UX lessons from Hollywood that apply to everyday design.<\/p>\n

1. Connect Through Visuals<\/h2>\n

For communicating ideas, visuals are a language on their own, and are at times more effective than words (\u201cshow, don\u2019t tell\u201d). Visual communication shoulders some of the responsibility of the text, which allows you to trim the fat and makes the piece less wordy \u2014 whether a site, app, or film. <\/p>\n

Drawing from a century of cinematography (and classic photography before that), here are a couple visual communication tips that apply to UX design: <\/p>\n

Angles<\/h3>\n

In film, the camera angle influences how the subject is interpreted: for example, a high angle (bird\u2019s eye) makes the subject seem small or powerless, while a low angle (worm\u2019s eye) makes it seem larger-than-life and authoritative.\u00a0<\/p>\n

\"image05\"<\/p>\n

Photo credit: <\/i>Citizen Kane<\/i><\/a><\/p>\n

\"image01\"<\/p>\n

Photo credit: <\/i>University of Sydney<\/i><\/a><\/p>\n

Leading Lines<\/h3>\n

As we explained in Web UI Design for the Human Eye: Book I<\/a>, one of the most potent Gestalt principles is the continuity of a life \u2014 if users see a line, their sight will follow it. <\/p>\n

Photographers and filmmakers have known this for years: lines are a direct way to guide the audience to an immediate point of focus.<\/p>\n

\"image03\"<\/p>\n

Photo Credit: <\/i>Titanic<\/i><\/a><\/p>\n

\"image06\"<\/p>\n

Photo Credit: Le Mugs<\/a><\/em><\/p>\n

In the above example from Le Mugs<\/a>, the white line unfolds as users scroll down the page. <\/p>\n

The clever parallax effect entices users to continue scrolling downwards to see where the line takes them. From a business standpoint, the tactic can certainly improve on-page engagement and reduce bounce rates.<\/p>\n

2. Follow Story Structure<\/h2>\n

Of course UX design isn\u2019t as linear as a film. <\/p>\n

Browsing \u00a0site pages can feel more like watching random 15-minute intervals of a movie out of order. But the basics of story structure still apply: beginning, middle, and end. <\/p>\n

Users \u2014 the main character of the site\u2019s story \u2014 may enter the site from anywhere, but they still need to arrive at their destination all the same. The UX designer controls the flow of the journey. <\/p>\n

The Beginning. <\/h3>\n

First, you want to establish all the information your user needs to know, such as main characters and plot. <\/p>\n

For UX design, these equate to what the site\u2019s about (service or product) and the controls to interact with it. You want to set these up as quickly as possible, so use visual communication to showcase this instantly. UI patterns like a simple horizontal top navigation and metaphorical icons (e.g. mailbox = messages or inbox) are instantly recognizable to most users. <\/p>\n

While the obvious place to \u201cset the scene\u201d is the home page, you still need to account for the \u201cshipwrecked survivor\u201d that enters the site from alternative entry points. <\/p>\n

Every page must answer: <\/p>\n