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”.

10 Responses to Gestural Navigation in Flex

  1. Oh that is just sweet! Flows great.

  2. Jack Smith says:

    I love it!
    Can you do this sort of thing in Macromedia Flash? Or only using flex with it?

  3. Peter Baird says:

    Certainly you could achieve this in Flash. While the approach would be different (using Flash components rather than Flex), the idea is the same. Simply assign resize functions to a rollover. You might need to do a bit more custom work in Flash to acheive the end result, but that has more do with the the Flash workflow compared to the Flex workflow.

  4. Chris Peters says:

    Your mentioning when to not use a gestural approach makes me think of the Web site http://www.dontclick.it. The site is an interesting experience, but of course it wouldn’t be recommended to do that on a “normal” Web site.

  5. nig says:

    It’s cool, but I’m not too psyched about usability. I know, I’m a stick in the mud, but rollOver isn’t an explicit enough choice for most gestures IMO. For example, for the pane above, try showing exactly half and half by dragging the divider. That explicit choice becomes almost immediately blown away. Still a nice effect though.

  6. Scott Barnes says:

    I like the proposed concept, but the example above needs more detailed look.

    – if you have a list of say 100 items, and the above effect were proposed. You’d need to make sure that when the user does go back to the list, it’s scroll position is adjusted accordingly.

    – if you adjust the VDivideBox, and do the mouseOver, again you would need to respect the users wishes to have that dividebox placed in its position.

    I guess the end result is a cool way to effectively enhance realestate, provided that the users specifications prior to the mouseover are upheld. Along with mouseout procedure or buttons to give the user visual cues (expand/contract)…

  7. Peter Baird says:

    Chris and nig make some good points. Take a look at the revised source and file. I’ve added an if statement that respects the users settings. So, if the user changes the divider location, for example to 50%, then the gestural navigation is turned off.

  8. Chris Peters says:

    Very cool. I think I like it _even better_ now that I’ve seen your revisions.

    This brings up a good point about the usability of your blog comments. Because the “Posted by” line is in a strange place, you thought I said something that I didn’t. The people who came up with the good points were nig and Scott Barnes, not nig and myself. I had to read again myself because I was pretty sure I didn’t say what nig said.

  9. Brian says:

    Question, having trouble getting it to work using percentages. How would you rewrite the code so it would work using percentages? the folling did not work:

    expandList.heightTo=”75%”;
    or
    expandList.heightTo=’75%’;

  10. livesexcam says:

    cool, i love it!