Merge pull request #39 from midhunhk/ux-in-movies

Ux in movies post

_posts/2023-12-30-year-2023-in-review.md

@@ -4,12 +4,10 @@ title: Year 2023 in Review
 description: The yearly review of notable learnings from the year
 category: Personal
 comments: true
-featured: /public/images/2023/12/30/xmas_vibes.png
-featured_alt_text: House that is lighted up for Christmas in Bowmanville
+featured: /public/images/2023/12/30/otf-50-workouts.jpg
+featured_alt_text: Posing for a photo at the OTF studio in Whitby with coach Liam
 featured_hero: true
-hero_content_align: right
-hero_link: https://www.youtube.com/watch?v=IJkz39oqTwE
-hero_link_text: Christmas Lights Drive About
+hero_height: is-large
 summary: It's that time of the year for the year in review.
 tags: [year-in-review]
 ---
@@ -24,3 +22,4 @@ Here is my year 2023 in review, as is tradition come December.
 * Polished and published a [css library](https://github.com/ae-app-labs/spork-css) project onto npm in an Alpha stage
 * Signed up for some [fitness](https://www.orangetheory.com/en-ca) to stay in shape, not getting any younger
 * Watched [152+](https://letterboxd.com/midhunhk/films/diary/for/2023/) movies or documentaries, up from last year (128)
+

_posts/2024-01-01-ux-in-movies-part-1.md

@@ -0,0 +1,56 @@
+---
+layout: post
+title: UX in Movies Part 1
+category: Learning
+comments: true 
+featured: /public/images/2024/01/01/interface-hero.jpg
+featured_alt_text: A photo of a computer screen showing the dashboard of an application.
+featured_hero: true
+hero_darken: true
+summary: Part 1 of a series exploring the effective use of UX interfaces in Movies, mainly Dashboards.
+tags: [movies, ux, dashboard]
+---
+## UX Inspiration
+Last year I watched a Malayalam film named [Keedam](https://www.imdb.com/title/tt15943910/) (<abbr title="translation">transl.</abbr> Pest). Directed by `Rahul Riji Nair`, the film follows a cybersecurity expert taking on some criminals using technology and her skills.
+
+More than anything what captivated me was the clean and simple user interface of an application that is depicted, and is shown in many of the scenes in the film. 
+
+Given that this application is a central part of the plot, we can see that a lot of attention as given to it, so that a common person who has maybe used a mobile phone would be able to understand this in the context of the film. It even looks like a complete application, with most of the features being used by the characters.
+
+I was able to recrate the interface in Figma (shown below), albeit with some modifications (e.g; darker background for the top bar to separate from the content, some improved spacing etc)
+
+![Interface from the film 'Keedam (2022)'](/public/images/2024/01/01/ux-interface.png) 
+*A recreated UX interface from the film 'Keedam (2022)'*
+
+What we see most of the time is a Dashboard, although the same items are always available as a side menu. It appears that once a user / phone number is selected, the relevant details are displayed in distinct colorful boxes at the top. And certain actions that can be taken displayed like cards below it. By looking at the way the application is interacted with, it actually looks more like an Angular or React web app. 
+
+## Dashboards in UX
+
+After the first post on this topic, I got a chance to discuss these ideas with a fellow professional UX Designer and he was of the opinion that in most of the cases we see some sort of Dashboard interfaces shown in movies. Be it some tool that the protagonists use or a team using a dashboard for easy information lookup or monitoring.
+
+![Some UX screens showing Dashboard interfaces from Behance](/public/images/2024/01/01/ux-dashboards.jpg) 
+*Source: <a href="https://www.behance.net/search/projects?search=dashboards&tracking_source=typeahead_nav_direct">Behance.net</a>*
+
+## Dashboards in Sci-Fi Films
+
+Another example is from the film [The Cloverfield Paradox](https://www.imdb.com/title/tt2548396/), which is a Sci-Fi movie happening on a space ship. Although the interface is more complicated than the earlier example, I think they highlight the key elements where the audience needs to concetrate. For example, the title and the status of some ventiation systems in the screenshot below.
+
+![A screenshot from the movie 'The Cloverfield Paradox (2018)'](/public/images/2024/01/01/the-cloverfield-paradox-02.png)
+*This screenshot is used under the doctrine of 'fair use' for commentary. The use of this material is intended for example in an analysis article and does not infringe upon the copyright of 'Bad Robot Productions'. All trademarks and copyrights are the property of their respective owners.*
+
+Dashboards can be used to visualize data in a way that is easily digestible for the audience. It could be tracking the progress of a task, monitoring vital signs, or showcasing real-time events, dashboards provide a visual representation that enhances the audience's understanding.
+
+In the below screenshot, there is a simple progress bar overlay which shows a visual progress of copying some data.
+
+![A screenshot from the movie 'The Cloverfield Paradox (2018)'](/public/images/2024/01/01/the-cloverfield-paradox-01.png)
+*This screenshot is used under the doctrine of 'fair use' for commentary. The use of this material is intended for example in an analysis article and does not infringe upon the copyright of 'Bad Robot Productions'. All trademarks and copyrights are the property of their respective owners.*
+
+Although the entire UI is complicated, the text `Copying Data` and a moving progress bar are prominent and conveys the action to the auidence. Conventionally such a dialog box would have a `Cancel` button atleast, but they have even ommitted anything considered extra for the context.
+
+## Conclusion
+Including dashboards in movies can be a powerful narrative tool to convey information, build suspense, and engage the audience. In some cases, they can be story telling devices that communicate critical plot elements. 
+
+In Addition, a well-designed dashboard not only serves its functional purpose but also adds an aesthetic layer to the film, making it visually appealing and memorable.
+
+## References
+References are linked inline within the article.

assets/css/custom.css

@@ -10,7 +10,7 @@
 .post-tag{ margin-bottom: 1em; }
 .post-title{ color: #1371DD; font-size: 1.9rem !important; font-weight:bold; line-height: 1.2;}
 .post-date{ display: inline;}
-.post-content img{ margin: 1.5em auto; }
+.post-content img{ margin: 1em auto; }
 .post-content div div.is-8 p:first-child img{ margin-top: 0px !important;}
 .is-serif-font{font-family: 'Merriweather'}
 /* Some Colorful backgrounds for the header*/
@@ -82,6 +82,14 @@
     margin: 25px 0;
 }
 
+p em {
+    display: block-inline;
+    font-size: .8em;
+    background-color: #eaeaea;
+    padding: .5em;
+    border-radius: .5em;
+}
+
 iframe{
     width: 93vw;
     height: calc(93vw/1.77);