Science Fiction User Interfaces with JavaFX Part 1


Sci-Fi UI Shaped Window created using JavaFX

Can Fictional UIs become a Reality?

Growing up as an 80’s kid I’ve seen my share of science fiction movies that really inspired me to become quite fond of graphical user interfaces (GUIs) especially the idea of trying to make science fiction UIs possible in the real world. In this and a series of blog posts I want to try (attempt) to answer the question “Can Fictional UIs become a Reality?”

Since I am experimenting with different ideas (implementations) of what a sci-fi UI should look and behave  like, I won’t know exactly how many parts this blog series will be. So I hope you will join me in this journey towards the creation of a prototype and API capable of making science fiction UIs a reality. You might be wondering if there is something (UI framework) that already exists.

Shouldn’t we just use UI frameworks that already exist?

If you’re familiar with the excellent post from Jeff Atwood’s 2006 article “This Is What Happens When You Let Developers Create UI“. He talks about how most software developers aren’t really good at creating UIs. Is this really true? While I agree with most of his statements, I still believe anyone with enough passion will figure out a way to achieve their intended goal (within reason of course). As for me, most of my design choices are mainly through trial and error. I think UI design is very much like clothing where designs can be either trendy or classical.

Through the years many designers have made UI frameworks to build UIs that look great and are extremely functional, however they can look rather primitive (IMO) compared to the science fiction UIs that we see in movies today. When going the other direction science fiction UIs may look futuristic, but they don’t exactly map to anything real or functional.

Assuming you’re a developer (with some UI skills) and wishes to build sci-fi UIs the next section I’ll talk about what a sci-fi UI might look like or how it might behave.

Look and Feel Requirements

The following are features a typical science fiction UI window might have:

  • Create any shaped window (for now use line segments)
  • Style the visible shaped frame around the window
  • Create mouse a listener to define areas to resize & move window on the desktop
  • Resize the window using 8 directions (NW, N, NE, E, SE, S, SW, W)
  • Animate window and contents when entering and exiting the desktop (area)
  • Create Clipped region to display content such as video, 3D, Pane

Conclusion

As a kid I remember how my mind was simply blown away when I had seen futuristic and technologically advance civilizations on the big screen. Looking back at old sci-fi movies you will immediately realize how cheesy they were compared to today’s movies.

Hopefully I’ve given you compelling reasons why I would like to create such an API that would enable developers to easily style and create Sci-Fi looking UIs. As a developer/designer I would like to bridge the gap between Sci-Fi UIs and real UIs by listing some general requirements to start things off.

As always feel free to comment and let me know what you think.

Happy coding.:-)

References

Jeff Atwood’s 2006 article “This Is What Happens When You Let Developers Create UI
Chris Noessel on “How Design in Sci-Fi and the Real World Influence Each Other
Carl Dea’s video “JavaFX demo of a Sci-fi UI HUD Window

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s