Positioning fixed elements in a user interface is a common practice for such cases when we need to have something visible at all times. Without fixed positioning these elements disappear as a user scrolls.

But what about a case when such floating boxes begin to get in the way (of a top navigation or some copyright text at the bottom). Here is a quick and dirty Javascript & CSS experiment which explores a possible solution. This example shows a semi fixed state of sorts for two particular elements. These two elements (the help and footer box) are fixed for the most part, but are then also switched to absolute positioning above a certain scroll threshold to move out of the way as a user scrolls. In a way then, this behaviour allows such navigation elements to be sticky to the edges of smaller container. The best of two worlds perhaps?

Give it a try and let me know what you think.

>> http://linowski.ca/experiments/03_sticky_floating_nav/

Thinking of how to hide the user interface when not needed, I came up with this little rough experiment. This idea explores two combined interactions. First, a ranged interaction onProximity rule has been written which increases the opacity or transparency of an element the closer the cursor is to it. It also hides the element if the cursor if further away. The assumption here is that if the user is working (moving the mouse) in the central space, he or she does not need items cluttering the interface on the sides at that particular moment.

In order to increase the item’s discoverability, a second rule has been put in place, which after some inactivity of the mouse regenerates the hidden element. This way, the user is reminded subtly that the interface element is available if needed.

>> http://linowski.ca/experiments/02_onProximity/

Advanced interactions such as double left clicks, right clicks, mouse scrolling, and dragging (not visible here) are increasingly useful for enabling richer ways of providing input. These interaction posibilities, as useful as they are, however are often invisible to the user. More so, often multiple interactions (such as a left click and right click) are possible at the same time in a particular place. That’s where traditional cursors break down. This simple experiment, with the help of some CSS and Javascript, aims to provide clearer visual indicators and combat the problems with floating multi layered cursor affordances.

>> http://linowski.ca/experiments/01_cursor_affordances/