Sunday, July 28, 2013

SeesawView - a visual feedback for flat view interaction


Touchscreens enable the direct pointing on the screen contents but also take away the haptic feedback of a keyboard or telephone keypad (if it is a smartphone). On smartphones, a common solution is to give a vibrotactile and (a more than desktop computers) visual feedback when users interact with the user interface. For example a button has different states (pressed, released, disabled etc.). With that information the smartphone user interface gives us the visual (and sometimes haptic) feedback that the user interface component (e.g. button) has been interacted with (see figure 1).
Figure 1: A button that gets interacted with and its visual feedback.

However there are components (e.g. images) that do not have states to indicate the visual feedback when interacting with them (e.g. pressing). I call these components flat components, because the do not have a visual "depth" in comparison of the button. A button implements a to-be-pressed metaphor, whereas an image does not. But there are use cases when an image should be interacted with. Examples are zooming, showing in full screen etc. 
This post introduces an android view container that gives visual feedback for these described flat views. 


The SeesawView a simple view container that seesaws a containing view. Here is a simple video showing the seesawView in action.

The code can be downloaded here.

Sidenote: The view only works properly when the childview has an actual interaction set (e.g. setOnClickListener())