A zoomable interface that uses two levels of access to a collection of text and image files. One level is for grouping, rearranging, and sequencing (slide show) files. The second level is for examination of content, with pan and zoom. There are navigation tools to allow orientation.
This is a demonstration or prototype version only, and was the result of research into interfaces, particularly ZUIs (Zoomable User Interfaces) and, from a content angle, non-linear narrative. See also on request the dissertations on Interface Design and Non-linear Narrative.
Level One (zoomed out)
This is the initial level, and shows small versions of the content (or indicative icons)
Controls: there is a set of controls at the top of the screen, a radar at top left, and a help text area that can be hidden if the user doesn't want it. The image title or help also appear in a top text line. The help is context (position) controlled.
Grouping by dragging
Item/images can be selected and deselected (colour spots are added onscreen), in various independent or overlapping groups, this allows automatic 'stacking' (grouping) of images
Images can be shown/hidden (faded out) to remove them from the scene
Control panel at top (can be hidden), with Radar
Level Two (zoomed in)
A double click leads to a zoomed in level, with scaling to zoom in more, or zoom out
Pan action when the user moves the cursor towards the edge of the screen, which allows the user to move to other content that is offscreen
Radar has a red dot showing which image was double clicked - the 'entry point' for orientation
Green 'scope' box that shows where the user has moved to by panning the screen.
These two features allow location within the zoomed in area
Scale feature to allow more zooming (magnification) or less (shrinking). There is also a reset scale feature to get back to the original scale
Initial zoom scale and controls:
Radar - red start point, green location scope
Help - Hide/Show
Scale - zoom in/out/reset
Increased zoom scale:
In more detail: Grouping (Level One, zoomed out):
There is different functionality at each level. Level One is for seeing all of the content items, and grouping them. This can be achieved by:
dragging the small images around the screen
using the colour spot feature to add a spot (red, green or blue, or combinations) to the images. These can then be automatically grouped or 'stacked' by the system
saving and naming of screen arrangements
randomise, which moves the images around - useful for stimulating unexpected connections, and for use in the Calm as a Dead Clam example (see below), to make a letter game
sequencing, which does a slide show of the images, arranged according to their position from top left to bottom right of the screen, in 70 pixel rows. The sequencing can also be colour spot selected - so some images could have a red spot added, then only these used in the sequence (note this is a new feature and is only on the 'Calm as a Dead Clam' example)
Colour spots (Level One, zoomed out)
These are the least obvious feature. By using the Shift, Ctrl and Alt keys on the bottom left of the computer keyboard, whilst pressing the mouse button on an image, a colour spot can be added to the image (red, green and blue respectively). Then there are controls to allow stacking of colours (including combinations), and also a Show/Hide control that fades out any coloured images.
From the Calm as a Dead Clam example:
Red spots added (to all the vowels) with Shift + mouse press - also note a red tick in box at top left (small):
Red spots stacked:
Red spots faded - note the red tick has turned to a red cross to indicate hidden images (faded). This is also the clickable switch toggle area to show or hide (fade) the images:
The zoomed photographic and plan images above are from the Architect version - this is a portfolio of images and notes from a recent job in Malaysia. It shows how the software could be used for presentations. It is envisaged that the work would be presented to the client, who could then examine and group the images into a more specific arrangement. The software could be 'left behind' with the client as a reference (although this is not often done by architects due to liability and intellectual copyright issues). It could be used by designers or anyone 'pitching' for a job. Since images can be zoomed, anything of interest to a prospective client can be examined in more detail than others.
There is also Calm as a Dead Clam.
This does not use smaller images at Level One, but icons, which are letters. These letters jump to short pieces of text from various stories that have been published over the years. This is an attempt to fuse a letter game approach to making up words and phrases at Level One, with a 'hyper-fictional' non-narrative approach to reading the various texts when zoomed in at Level Two.
Rather than invent a new text, and chop it up into paragraphs for use on Level Two, I used paragraphs from old stories. Since they were all written by me, there may (or may not) be some narrative sense to be made of their proximity when read in Level Two.
Zoomed out within Level Two to see the position of other texts:
There is also a Sequencer (top left in controls) which does a slide show of the texts. This is a bit clunky but always returns to Level One. It can be used to slide show colour spotted images - so some images could be spotted green, then only these sequenced. The grey control is for the left-over images if colour spotting is used.
This is an educational example using pictures of birds, frogs, cats and fish. Informative text is shown when zoomed in. This can be used by teachers to set information search projects, as well as testing grouping knowledge.