UI Demonstration - Context-Based Slide Reveal

TAGS:

Download or edit the free picture UI Demonstration - Context-Based Slide Reveal for GIMP online editor. It is an image that is valid for other graphic or photo editors in OffiDocs such as Inkscape online and OpenOffice Draw online or LibreOffice online by OffiDocs.

These animated GIF's are a User Interface demonstration of context-sensitive overlapping elements. This allows a menu to save space by displaying items only when needed by covering up parts that are not currently needed.

I first saw this concept in the menus of the game, Chrono Trigger. Where it is used in "modal" menus. Making a selection drills-down to reveal more details. Cancelling reverts back to the more general view.

I designed a sprite picker based on this, with two modes. A file selection mode, and a frame-selection mode. Additional animation settings for the current file are revealed by hovering over the "Frozen/Animating" button at the top right.

This concept is useful for any situation where screen-space is limited, or when you don't want to overwhelm the user with more information than they need in that moment. I personally needed a sprite selector like this because I designed my game editor to reserve only a limited amount of screen space for arbitrary editors like these.

Free picture UI Demonstration - Context-Based Slide Reveal integrated with the OffiDocs web apps