Zoo UI Prototype

Here’s a link to the HTML zoo prototype which is planned to be used to demonstrate the UI design but also for user acceptance testing to find out if the UI achieves what users would expect in the zoo environment.


Couple of key notes

  • The display is designed to be on a screen size of 1920 x 1080 or larger. It can be viewed on smaller however the experience would not be considered accurate
  • Please allow a short time for the background video to start working.

UI of Interactive Transparent Displays – Explicit

The Minority report video displayed in a post earlier in the blog showed a good example of an ‘explicit’ display, and how the content on the screen is the main focus for the user.

The key element is the level of transparency on each UI element and how it remains the centre of focus despite the ability to see things beyond the screen.

The video below shows a good example of that level of transparency and how a small level of collaboration can be incorporated into the design.


Iron Man and the Avengers UI also shows in some aspects a good level of transparency in their screens.


The collaboration aspect of the interaction is still somewhat of an enigma, does the user see a reflection or a transparent image of what is being worked on? Does the screen focus on what item or is their the ability to multitask?

As far as the Interacting with the displays are concerned, this can be used similar to a tablet or smart phone touch screen using Gesture UI.

Minority Report Touchscreen

Here’s a basic version of a ‘transparent touchscreen’ just to get some concept ideas going.


Based on the touchscreen display used in the film Minority Report


Considering the film was made in 2002 the idea when it came out was considered futuristic. Now though… seems like the idea is becoming reality, but could it really be used in this format?