Another great gesture compilation brought to you by Luke Wroblewski and others. The researched document describes how touch gestures are supported on platforms such as: iPhone OS, Windows 7 Phone, Palm webOS, Android, OSX (trackpad), OSX (Magic Mouse), Microsoft Windows 7, Wacom Bamboo, GestureWorks (Flash) and Microsoft Surface. The compiled document also comes summarized as a downloadable PDF as well as more wireframe friendly formats (PDF, EPS, Omnigraffle).

The guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures.

Credits: Craig Villamor, Dan Willis, Luke Wroblewski, and Jennifer Rhim

Here is an interesting example of a highly abstracted wireframe, labelled as a WireMolecule. Both the position and size of the represented elements within this example no longer represent what the interface will really look like. Instead, the focus has been shifted to showing relationships between elements as denoted by their proximity to each other. The size I also believe represents the importance of each element and not the actual size either (as also seen here and here). Definitely something a little different from a traditional wireframe. Andreas writes:

Traditional wire frames are misleading as they look too much like finished designs. Clients and designers alike run the risk of taking their direction too literally. And yet, despite all this, wire frames are invaluable tools in the start of any website design project.

And defines a WireMolecule as:

A chart giving an overview of relationships between components and features of a website. Wire molecules are developed during the Website Discovery phase and they provide instructions to designers, developers, and clients for how pages will look and behave.

Credits: Andreas Holmer

Some time ago I’ve started a little quick and dirty Javascript and CSS experiment to help indicate more advanced mouse interactions in a visual way. By more advanced interactions I mean showing that things like double clicks, right clicks, and wheel scrolls could be performed on different UI elements. The left click is still perhaps the central mouse interaction that takes centre stage on the desktop, and I’ve seen users struggle to realize when additional interactions are possible. This I think is largely due to a lack of cues. Hence, these little cursor accordances aim to provide additional contextual symbols that float alongside the cursor. The other thing I wanted to achieve with this was to be able to display multiple cues at the same time (let’s say that both a left and a right click is possible on an element). So the code is super rough but here is a start. Basically numerous CSS classes are attached to HTML elements which then cause proper images to be overlaid near the cursor. Thoughts? Potential open source project?

Credits: Jakub Linowski

Just a super quick heads up for a new Experimental category on this blog. The idea is to collect ideas for design documentation, deliverables, and other posts that are seeds for things to come. Maybe it’s an idea you had on how to better communicate through your UX deliverables but have never tried it on a real project? Perhaps it’s a napkin sketch for a new wireframe format, or a new way to represent live data in wireframes. All these potential things could make their way in this open brainstorming like space. I’ll post a few more items in this category in the near future, but would again welcome anyone to contribute if they have emerging ideas of their own. Sounds good?

GestureWorks has released 20 something gesture icons for their Flash and Flex development environment. Although their multitouch library is geared at developers, the icons still look interesting in their own right. A lot of the interactions supported include two handed, as well as multi finger gestures. The downloadable library comes in various formats (PNG, PDF and EPS). Enjoy.

Also, I just created the gestures tag to keep track of all these related posts.

Credits: GestureWorks

Hello. We basically want to peak over your shoulder as you use our software to make it better. We’re doing a few tests this week which should take around 30 minutes each and we’re giving out $30 Amazon gift certificates as a thank you. The test can take place either remotely (in the comfort of your own desk) or we could come and visit if you’re in around Toronto. Interested? Please answer the following questions and email me at usertest@linowski.ca

The questions are as follows (short answers are great):

1. What’s your business name and website address?
2. How many employees are at your company?
3. What’s your title and what do you do?
4. What invoicing method do you use today?
5. How do I get in touch with you (phone, email & city)?
6. When would be a best time for the test this week (time and time zone)?

Please let me know.
Jakub Linowski
usertest@linowski.ca

UPDATED: Thanks to all the people who replied and signed up. The test is now over and I received some awesome feedback. I really appreciate it.