Gestural Navigation in Flex

One of the great things about Flex is the “mouseOver” event that pretty much any component, including containers, has available. What this means is that we can trigger almost any event without requiring a mouse click. Why and when would you want to do such a thing? Imagine, for example, a list with details, as shown in the flex application below.


In this example, we’ve got hypothetically limited real estate, where when our focus is on the list, we’d like to see as much of the options as possible, but while our focus is on the details, we’d like to read and view all the details as possible. The different mouse interactions in a user interface that could be used, in order of level of increasing level of effort are:

1. mouseover (rollover button, highlight)
2. click (button)
3. click and hold (scroll arrows)
4. click and drag (scrollbar thumbs, dividers)

Given that this is a list of items, these interactions would be repetitive as the user reads details for each action. We, therefore, would want to minimize the level of effort, and this mouseover example would be an appropriate way to do that.

Why wouldn’t you want to use a gestural approach to events? There are a couple of reasons you wouldn’t want to use a gestural approach. First, if everything is gestural, there’s the risk of many things bouncing around the screen, possibly becoming distracting. The second, larger issue, is one of intention and user expectation. A user click usually signals the users intent to an action or an event. You certainly would not want to trigger an event on rollover that the user did not intend to do. The types of changes that might be appropriate on rollover are subtle state changes. The user should not loose anything from the view without their intent. So, for example, a change of visibility in a viewstack would be less appropriate on rollover.

Finally, a consideration. The size of the target area for a mouseOver action should be larger that the typical target for a click, as it requires more precision. Hover requires a full stop and wait, while click can be a “drive-by” so to speak. So to make hover more accurate, it helps to make the target area larger.┬áIf a user simply wants to drive through a list and view details. Using the arrow keys is also very powerful.

To see the source code for the above example, right click and select “view source code”.