FUI, Animated GIF's, and Zero UI: Engaging Presentations and Artifacts

OblivionFullStatic.png

FUI, Animated GIF's, and Zero UI

Engaging Presentations and Artifacts

A Bit of History

My foray into technology and design began with the advent of the public internet and the introduction of HTML. During my high school days, I recall the revolution of AOL/Compuserve/Prodigy and many households were going online. It was a wild future, access to any information in your home, access to chat, MP3s! And my days were spent collating vast collections of music to play on Winamp, chatting on AOL, and learning how to code in HTML and JAVA. It wasn't my first foray into programming, but it was the most interesting, now I could share my creations with my friends. Thanks Geocities, Angelfire, and Tripod!

Fast forward to college and I was free-lancing web design and development; it was a great way to make some cash outside of selling 'plat' from all my Everquest'ing. But with college wrapping up, I had a decision to make, there was a fork in the road for my career: Development or Design?

I always loved art, a sketchbook as a child was always at my side, but I always wanted to be an engineer of some sort; I loved learning how the world works. So this was a tough decision. Needless to say I moved into development, the jobs were more plentiful and the money was better. But I never lost my love for design, and good design is differentiation.

Move forward another decade or so, and I'm a practicing enterprise architect, digital transformation specialist, etc. My days are less hands-on-keyboard programming, and more presentations, influencing, strategy and artifact creation. And to avoid having stakeholders fall asleep in stand-ups and pitches, I've applied my love for design. Below are some insights, inspirations, tips, and tools I use as an architect to keep the audience engaged. 

I've written about Data Visualization in the past, this article is something a little different: a mix of inspiring aspirations, under utilized tools, surprising resources, and where the future might be going.


Fictional User Interface

A term usually only found in movies or entertainment. FUI is Fictional User Interface or sometimes referred to as Future User Interface, it's the conceptualization of user interfaces typically for sci-fi movies, games, or TV shows. I've found the user interfaces in movies like Iron Man fascinating, and as an architect I've thought "why aren't we interacting with technology in this way"? Well first of all, we don't have holograms, but otherwise we do have the tools to do it now. We have voice assistants, machine learning and AI, we do have instantly responding glass interfaces. So why aren't we there yet? On the hundreds of projects I've led, solutioned, or been a part of; the simple answer is the investment isn't usually there. Leaders want as high an ROI (Return on Investment) as possible; it makes business sense and it props up their own career. But I can't help but think, how much better, useful, and more accessible some of those applications would have been if they were simply just easier to use, more beautiful, and ultimately more engaging.


A Futurists Outlook on the Value of Creativity

As we move forward with cheap compute, storage, and the prevalence of MVP and AGILE, the importance of design cannot be understated. The simple fact is, many enterprises and companies have little uniqueness to offer. Most futurists I've talked to, some in very influential enterprise positions, believe faithfully that the future of jobs will eliminate many functional positions via A.I. and machine learning; and also believe that human roles will be entirely creative or influence based. Having done deep analysis of EA roles and digital transformation efforts keen on eliminating wasteful processes, I would concur with this, even with current technologies and trends. As we continue to progress into an A.I. age, the value of human creativity will become more and more lucrative.

Marketwatch: How job predictions apply to 2016 U.S. employment statistics. Black fields are jobs likely to be automated and white fields are jobs that are likely to remain.

Marketwatch: How job predictions apply to 2016 U.S. employment statistics. Black fields are jobs likely to be automated and white fields are jobs that are likely to remain.


Examples of FUI's in Entertainment

FUI (Fictional User Interfaces) are usually cinematic, a plot device to exemplify that "this is the future" or "this is technologically advanced". In some cases this is badly done such as the "hacking" montages seen in the 90s and 2000's. I particularly find this CSI snippet to be hilarious "I'll create a GUI in Visual Basic, see if I can find an IP address":

 
Hi Reddit! /u/xerohour Fair use claim: -this serves an educational purpose in demonstrating computer illiteracy as it pertains to American Television -the clip is far too short to compete in any way with the original product and its intended use -there is no way that this could be confused with an official broadcast or redistribution by the content creator -the clip is being use non-commercially P.S.
 

In other examples, the FUI is extremely complex, and realistically unusable. The Marvel Iron Man series is a cocaphony, holographic UI's that display so much information they would be almost unusable unless you were an genetically designed techno-messiah genius like Tony Stark:

Uploaded by Prop-Art Studios on 2011-08-14.
Uploaded by Varun Teja on 2017-07-27.

But there are quite a few examples of creative FUI's that are believable. My rabbit hole into inspirations for new architectural visualizations led me to well respected creators such as Bradley G. Munkowitz, aka. GMUNK (Oblivion, Tron Legacy) and Jayce Hansen (Star Wars, Iron Man, Avengers, Pixar). There are also companies that specialize in visual CGI effects focused around FUIs, such as SPOV (Dr. Strange, Call of Duty, Life). I particularly found the Oblivion movie FUI's to be usable interpretations, not only are they minimalist but they espouse Ed Tufte's "White, black, grey" aesthetics:

The mighty Joseph Kosinski invited Munkowitz to the GFX party once again, this time for his spring blockbuster feature film OBLIVION™… Predictably, the list of graphic assets to be created was obscene, so munko assembled and led another super team of GFX mercenaries and descended into the lovely confines of Crater Lake Productions to generate the aforementioned fuckload of graphic content… Working with Joseph always brings out the best in Munk and Company, and this time around was certainly no exception… OBLIVION © Universal Pictures, Inc. All Rights Reserved. A more thorough GFX Breakdown at: http://work.gmunk.com/OBLIVION-GFX GFX METHODOLOGY The briefing for the Graphic Language stressed functionality and minimalism while utilizing a bright, unified color palette that would appear equally well on both a dark or bright backdrop… The function was to reflect the modernized sensibilities of the TET Mainframe computer and would assist the characters with the key components of their duties on earth; be it the monitoring of all Vitals on the ground using Vika's Light Table, or the various diagnostics in the air using the Jack's Bubbleship… For good measure, the team also designed and animated all of the HUD UI for the various machines and weaponry in the film cuz they could, establishing a consistent graphic language that rendered all the interfaces with a loverly cohesion rarely seen in them massive-budget Sci-Fi productions... OBLIVION LIGHT TABLE UI One of the most widely seen Graphic elements was Vika's Light Table, which allowed her to guide Jack Harper through his tasks as a Drone repair man in the field of duty… The table itself was built practically, so most of the visuals were captured in-camera, lending a beautiful optical touch to the design ( thx Joe & Claudio )… The table consisted of four screens: A main map that Vika used to monitor the Bubbleship, Drone, and Scav positioning, a Drone Monitor which tracked all their key vitals and fuel status, A Hydro Rig monitor that displayed the collection progress for the large resource gatherers over the ocean, and finally a Weather Screen which showed the Tet's online status and also key vitals of the ever-changing weather systems… A couple extra tasks had the team designing another Map Diagnostic screen on a milky-white breakfast table top and a few key standalone windows that were analyzing Rogue Signal feeds that were key story points in the film... OBLIVION BUBBLESHIP UI Jack's helicopter, a remarkable Daniel Simon creation called the Bubbleship, was Jack's paramount vehicle in the film… The UI appeared as a hologram embedded within the spherical glass cockpit, done to perfection by the lovely folks at Pixomondo, and functioned to assist Jack in his flight and combat duties throughout the film… The team researched a grip of Flight simulator and Helicopter Combat interfaces and sought to modernize the aesthetic while still delivering key functionality that would mimic real-world flight tools... And of course the team didn't want to fuck up Simon's baby with ugly UI, the German wrath was implanted deep within and ultimately, the Bubbleship UI was by far the most researched and pampered graphic task... OBLIVION HUD GFX The team also designed all of the Machinery HUDs and various Gauges in the film, be it the Drone Machine Vision, Jack's Gun HUD, all the Scav equipment and some of Jack's smaller vehicles... The interfaces again stressed functionality over excess, keeping the Greeble under control and communicating key story points throughout the film.. All of these graphic elements were ingested by the VFX Vendors and ultimately integrated seamlessly into the live-action plates; many thanks mighty peoples... OBLVN Light Table UI Credit list Production Facility: Crater Lake Productions Oblivion Director: Joseph Kosinski Oblivion Producer: Steve Gaubs Oblivion Assistant Producer: David Feinblserbr Graphics Design Director: Bradley G Munkowitz Lead Graphic Designers: Bradley G Munkowitz, Jake Sargeant Graphic Designers: Joseph Chanimal, Alexander Perry Lead Graphics Animators: David Lewandowski, Joseph Chanimal Graphics Animator: Alexander Perry OBLVN Bubbleship UI Credit list Graphics Design Director: Bradley G Munkowitz Lead Graphic Designers: Bradley G Munkowitz, Joseph Chanimal Lead Graphics Animator: Navarro Parker Graphics Animator: Joseph Chanimal OBLVN HUD GFX Credit list Graphics Design Director: Bradley G Munkowitz Lead Graphic Designers: Joseph Chanimal, Bradley G Munkowitz Graphic Designer: Alexander Perry Lead Graphics Animators: Navarro Parker, Alexander Perry Graphics Animator: Joseph Chanimal OBLVN Process Montage Credit list Production Facility: Autofuss Design Director: Bradley G Munkowitz Lead Editor: Ian Colon Director of Photography: Ian Colon
Here's a reel of our work for Ender's Game where I contributed a grip of design and animation alongside some of the most talented gents in the industry. To see a more detailed breakdown of my specific work, check out: http://jayse.tv/v2/?portfolio=enders-game ----------------------------- --------- Credits --------- ----------------------------- Ash Thorp Lead Graphics Designer Jayse Hansen Lead Motion Graphics Designer/Animator/3D Ryan Cashman Motion Graphics Concept Animator Navarro Parker Motion Graphics Animator Alasdair Willson Motion Graphics Animator/Reel Title Animation Paul Beaudry/G-creative Lead Motion Graphics Artist Franck Deron Reel Edit Matthew E Butler Digital Domain VFX Supervisor Gladys Tong G-Creative Supervisor Production Designers - Ben Procter and Shawn Haworth. Final compositing by Digital Domain and Goldtooth Creative Music: The Four Seasons / Recomposed by Max Richter (2/4) ©Oddlot Entertainment / ©Summit Entertainment

Value Proposition

It's clear that as a practicing technologists, whether an architect or someone in digital transformation, the time commitment to something as complex as the above Hollywood FUI's would possibly be a complete waste of time. The reason I say possibly is that I've consistently run into technology projects and programs that equal or surpass the funding of these Hollywood blockbusters; it's always irked me in some way why we don't take more time to visualize in a more dynamic and entertaining way the concepts, architecture, or data to be more compelling and engaging. But can we perhaps achieve some semblance of this in cheaper, easier, and more time efficient manners?


Animated GIFs

Pivotal CEO Rob Mee opens SpringOne Platform 2017, and Onsi Fakhouri, Pivotal's Senior Vice President of Cloud R&D, gives an overview of what's new for Pivotal Cloud Foundry 2.0

Yeah, you read the correctly. Why and how would an animated GIF be useful in an enterprise or business setting? Five years ago I would have considered this preposterous, but now most anyone has been thoroughly exposed to meme's or GIF's in some manner, from old to young. If it's an accepted norm in today's culture, surely we can leverage this for use in business and enterprise. It's a trending technique to utilize animation, simple slides, and humor to present to a wide audience. A good example would be the talented Onsi Fakhouri, SVP Cloud R&D at Pivotal Labs, an engaging evangelist that uses simple Keynote animations, emojis, and other tools to keep his audience engaged but also entertained. A far cry from the FUI's exemplified above, but a good example of how animation and simplicity can communicate complex concepts.

 

I've found that drawing on the wealth of animated gifs available from talented creators, we can bridge the gap between intense cinematic FUI's and simple yet time consuming Keynote animations. In most cases, these are simply practice exercises by professional animators, in some cases they works of art. Some examples I've used below (apologies for no source or creator information, a reverse image search via Google can provide).

Database Indexing

Database Indexing

Cloud Elasticity

Cloud Elasticity

GitHub

GitHub

Application Layers

Application Layers

Microservices

Microservices

Data streaming packets

Data streaming packets

LIDAR

LIDAR

Load Balancing and Routing

Load Balancing and Routing

Other animated gif's can be used as focal points, attracting the audiences or users attention to a critical point. A few examples I've used in the past below:

Developer Isolation

Developer Isolation

Error

Error

Legacy Hardware

Legacy Hardware


My Pinterest board for useful or captivating animated gif's (click through to open)

My Pinterest board for useful or captivating animated gif's (click through to open)

Where can you get GIF's like these? I've found Pinterest of all places to be a useful resource. Pinterest suggests 'pins' based on what you've saved in the past, so it's a good idea to capitalize on these algorithms continually get a good drip feed as they percolate through the internet and social networks. If you find one similar to the concept you are trying to express, clicking on it and scrolling down will show suggestions of similar GIF's. My own board can be found here.


Tools

But what happens when you find that almost perfect animated GIF. It just so happens the internet is rife with animated gif's, and thus there are a lot of tools that can be used to edit, reverse, and crop them in whatever way that may suit your needs. I've found EzGif one of the simplest tools to use in this scenario at https://ezgif.com/.

 

The professional FUI designers use a mixture of tools, usually requiring an art degree and thousands of hours of practice; as described in Jayse Hansen's bio: 

Main arsenal: Illustrator>Photoshop>Cinema 4d>After Effects etc.
— Jayse Hansen

PowerPoint and Keynote Animations

The most common business related communication tools are PowerPoint and Keynote. These easy to use presentation tools from Microsoft and Apple are rarely used to their full potential. One of the most useful and overlooked tool in these applications are the Animation Tools. As a practicing architect I've produced a large number of "Architecture Roadmap" artifacts, showing the evolution of an IT ecosystem from current to target to communicate the strategy and plans for a particular group. Through experience I've found that most of my time presenting these road-maps consist of lines such as "as you can see, X is retired, and Y has replaced it". I've wished I could animate the transformation, showing clearly the evolution; fortunately PowerPoint and Keynote allow complete animation of shapes, and you can now do this proficiently without fuss. One thing to keep in mind however is to still separate the evolutions as to remain printer friendly. Some quick tutorials below:

 
How to apply animations to objects in your Keynote presentation.
This is a very basic how-to about animating shapes in MS PowerPoint 2013
 

If you look at the history of computing, starting with the jacquard loom in 1801, humans have always had to interact with machines in a really abstract, complex way.
— Andy Goodman, Fjord

ZERO UI

A newer buzzword, Zero UI, was coined back in 2015 by Andy Goodman, group director of Fjord; a think-tank from Accenture. The concept is readily apparent with today's voice assistants and IoT devices; devices that primarily interact with the user through speech or sensors. I imagine we'll eventually start to see architecture and IT systems interact with professionals in similar context. I've written about "The Case for A.I. in E.A." previously, why not extend this A.I. to purely voice interactions via Zero UI?

Screens are surely not disappearing anytime soon, the amount of data we can process visually as human beings is not something to be tossed aside. But we can always do a little better, engage our audience a little more, make things more exciting; why not?

Jesse Myer

Enterprise Architect, Driver, Foodie, Traveler, Gamer

http://www.jessemyer.com
Previous
Previous

Storytelling for Architects, Tips from Unfamiliar Places

Next
Next

Minimum Viable Product in Hollywood: Case Study and Correlation to Any Enterprise