http://bit.ly/9cVNgF

(scroll along a few times…)

A link went around the office this morning about a Dabbleboard, an online white-board tool.

While the tool itself is nothing out of the ordinary, comments were made about the way they have integrated mouse gestures into the application.

For example, drawing the first part of an oval will cause the app to draw a complete oval, thus negating the need to keep going to the toolbar and selecting the “draw oval” tool.

Doing this:

Draws this:

Neat, huh?

So, gestures: are they the future?

For more experienced users, or in instances where users have been trained to use a system they can certainly boost productivity, but I’d be very wary about unleashing them on the general public, where they may fall into the hands of novice users.

For example, I have “active screen corners” set up on my Macbook: when I move the cursor to the top-right of my screen it reveals the desktop, the bottom-left shows all active windows and the bottom-right shows the dashboard in all it’s widgety glory.

Configuring active screen corners:

Showing all active windows:

I find this setup allows me to navigate through my open applications and my dashboard widgets quickly and easily. I’ve been using that setup for so long it actually feels restrictive when I’m on a computer that doesn’t run like that. It’s become instinctive. For me.

However, when my wife tries to use my laptop she gets herself into a bit of a muddle with it: windows whizz around & disappear seemingly at random and she doesn’t understand why it’s happening. She used to think she had done something wring, or worse that she had “broken it”, but after explaining to her what’s happening and why, she now asks me “how can you work like that?”.

The gestures are a very personal preference, and while they make perfect sense to me, for her they create make the user experience a frustrating one, and longer sessions usually result in her proclaiming how much she hates Macs.

It’s a fine line between a feature that aids productivity and one that is unpredictable, unintuitive or so twitchy it just gets in the way.

For experienced or trained users, gestures can be a great productivity enhancement, just make sure they’re appropriate for your users, that it’s obvious they’re enabled and that their effects are clearly sign-posted!

And having said all that, I admit I’ve never quite got my head around Opera’s mouse gestures. They’re weird, and it feels like they fight against the natural shortcuts within the O/S.

Maybe I need a training course in how to use them?

This article, taken from the personal blog of AdaptiveBlue Founder/CEO and ReadWriteWeb contributor, Alex Iskold, highlights many of the subtle but important benefits of contextual UIs.

The new interfaces are winning people over because they are based on usage patterns instead of choices. The key thing about new UIs is that they are contextual – presenting the user with minimal components and then changing in reaction to user gestures.

…

It is ironic that it took web UIs so long to discover the elegance and simplicity of context.

Since its dawn, HTML lacked the sophisticated widgets that are present on the desktop and web UIs were always considered more primitive and slow. Contextual, AJAX-based UIs actually seem faster because they do not reveal all possible choices to the user. Instead they focus on surfacing just the bits that are necessary and then surfacing more based on user gestures.

Original article: http://alexiskold.wordpress.com/2008/05/15/the-rise-of-contextual-user-interfaces/

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

Summary

1. Interface elements on demand
2. Specialized controls
3. Disable pressed buttons
4. Shadows around modal windows
5. Empty states that tell you what to do
6. Pressed button states
7. Link to the sign-up page from the log-in page
8. Context-sensitive navigation
9. More emphasis on key functions
10. Embedded video

The article itself goes into much more detail about each point, with useful illustrations and screen-shots of these techniques in practice.

Sample screen-shots

Hide or conceal advanced functionality

Using empty states to motivate users and animate actions

More emphasis on key functions

Original article: http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/