Cue – Gesture Icons

November 23rd, 2011

Cue
PJ recently took another stab at making gesture icons more comprehensible and released Cue under Creative Commons. It’s a proposed system for representing gestures more clearly that makes use of thumb like icons. He explains his motivation for the project in a blog post as well. The icons come in PNG (4 sizes), SVG, Omnigraffle and InDesign formats. Awesome. It’s always great to see explorations in visual language. Thanks PJ!

Here is how he puts it:

These gesture icons act as roadsigns to an app for interaction way-finding. As expected, there has been a significant collection of gesture icon sets that have been made available to fill this need. The current crop of icons succeed in clarity, but they lack the iconic qualities necessary to act as a standard representation of gestures. My goal is to help create a foundational set of icons that are flexible, clear and distilled to a point where they could become a standard visual system to build from – ultimately to be used within apps for when explicit communication is needed.

Credits: PJ Onori

InVision Prototyping Tool

November 11th, 2011


Here comes InVision, a simple click-through prototype building app. The tool itself is pretty light (in a good way) in that you do not design the actual pages in InVision. Instead, the idea is to design your screens in your other weapons of choice (Fireworks, Illustrator, Balsamiq, Photoshop etc.) and then upload them into InVision. Once you upload your GIFs, PNGs, or JPGs, the tool then allows you to create hotspots and link pages together. When creating these hotspots, you also are provided with a very useful ability to save them into templates for easier reusability.

InVision also comes with a few standard collaboration features. You can easily share a full prototype or individual pages through easily accessible links, which then can be commented on by the viewers. You can also invite additional designers if you need multiple people to work on the prototype.

One thing which becomes immediately apparent when using this is that a good amount of effort has also been put into designing the sleek interface. All the little tiny details in terms of interactions and visual design have been fine tuned. As an example, the upload process is quite smooth as files are drag and dropped from your desktop to the web app. Overall, a simple yet clearly focused little application!

Give it a try.

Special Offer: World Usability Day Bundle

November 9th, 2011


Happy World Usability Day from the guys over at Optimal Workshop! An awesome bundle of online usability tools is up for grabs on World Usability Day up until this Thursday, November 10! This year a bunch of User Experience (UX) organizations have put together a basket of complementary training and tools for the World Usability Day Bundle. The bundle is only available for 48 hours and includes an incredible package of UX tools at more than 70% off the usual price.

This year’s World Usability Day Bundle is priced at $1,370 (pretty much the same as last year) and includes more than $5,000 worth of subscriptions. The individual components of the bundle are:

  1. Usability Professionals’ Association: 4 video seminars and a live webinar.
  2. OptimalSort: Remote card sorting.
  3. Treejack: Test and validate your IA.
  4. Loop11: Test the user-experience of any website.
  5. OpenHallway: Record a/v screencasts of user testing sessions.
  6. SnapEngage: Live chat with your site visitors and customers.
  7. ConceptShare: Markup visual designs collaboratively
  8. HotGloo: Rapid collaborative wireframing.

Get It Now

Meaningful Transitions

November 7th, 2011

Meaningful Transitions: Motion Graphics in the User Interface
Johannes Tonollo’s thesis project explores a number of interesting user interface transitions, and how they can be used to create meaning by complementing static UIs. They have been segmented into six categories: Orientation, Spatial Extension, Awaking Controls, Highlight, Feedback and Feedforward. The site has a large number of examples or patterns for each category that are pure inspiration. Interesting stuff! Traditionally, UI designers have been reinforcing meaning by relying on gestalt principles using proximity, alignment, positioning and contrasts. Johannes shows that these could be extended with transitions and the element of time. With CSS animations getting more and more powerful, these transitions don’t seem so far fetched any longer. Thanks Michael (@konigi) for finding this!

Credits: Johannes Tonollo

Axure Fu Master Cheat Sheet

November 3rd, 2011

Axure Fu Master Cheat Sheet
The guys over at WitFlow recently put together an Axure Cheat Sheet (PDF). It comes loaded with a bunch of potentially useful little shortcuts for the Axure masters out there (or shall I say, Axure FU Masters to be). Thanks for compiling & sharing this. :)

Credits: @WitFlow

JustProto 2.0 + 3 Giveaways

October 28th, 2011


JustProto has made some improvements over the last little while as they moved on to version 2.0 of their web based prototyping app. This time around they included a bunch of collaboration features. This means that the tool now allows multiple designers to work on one prototype simultaneously in real time. More so, designers can also create a quick preview links of the prototype that can be shared with the team. What’s interesting and unique though is that the shared prototype also updates instantaneously as users continue to work on it – potentially handy for quick feedback. Furthermore, real time chat as well as comments in the form of tags, sticky notes and pins have also been included.

Additionally, the latest version also now includes a prepackaged range of useful famfam icons as well as an extended set of elements. Another improvement is that now users can create their own custom reusable components – a pretty standard and useful feature.

Along with their new site redesign, the team has also exposed a number of public prototypes examples to give people a better sense of what is possible with their software.

The Giveaway. Yup, you heard it. These guys are giving away 3 One Year Plus Licenses. What do you need to do? Sign up for an account and leave a comment here on this blog of what you think is useful or would do to improve the tool. The JustProto team is eager to hear out some feedback. Myself along with the JustProto team will try to select the three commentators within 7 days.

Update Congrats to Ben, Michael, and Antonio! They have been selected for the giveaway. :)

Proto.io – Mobile App Prototyping

October 13th, 2011


Proto.io is a new UI prototyping tool specifically tailored for mobile and tablet applications. The web based environment allows you to start off by creating a project for either the iPad or the iPhone. After creating a few screens, you typically would expect to be able to link a few pages together with interactivity – and proto.io does just that. It comes prepackaged with actions that are custom to hand held devices. So for example, you can simulate such interactivty as: clicks, taps, tap and holds, as well as swipes. Additionally, transitions such as slides, pops, fades and flips are also supported to make the prototype resemble the real experience more closely. Pretty cool.

Proto.io also comes with other more standard prototyping features. Users can create reusable templates and components into which a bunch of prepackaged and editable elements can be dragged onto. Just to give you a taste, have a look at the Picker Component demo which is fully customizable. Another interesting draggable component includes the HTML Code box that allows users to write custom HTML. The tool also has a useful snappy grid as well as some align to features for those who wish to work at a pixel perfect level. Once the prototype is ready you can of course publish and preview your prototype which works inside a browser as well as real devices.

The team is apparently also working on supporting Android devices in the near future. Rock on. :)

Try it out.

Credits: Alexis Piperides

Responsive Layout Wireframe

September 30th, 2011


As we design for more devices, considerations for more responsive layouts which scale gracefully across varying screen sizes could be gaining in importance. Warren here has shared one such quick wireframe that tries to accommodate just this. It basically shows 3 wires side by side each other with some placeholders as well as how they would all vary across a few predefined screen widths. It’s a pretty straightforward, yet clear way of conveying more flexible layout concepts.

That same week, as I was asking around for a few additional “responsive layout” samples, Martin also pointed me to Media Queries – which is an awesome gallery and collection of layouts that scale beautifully on various screens (it’s actually also a CSS extension recommendation). Have a look.

Credits: Warren Anthony

Special Offer: UX Heroes Software Mini Bundle

September 16th, 2011


The guys over at UXHeroes.com have just put together a software bundle with a few popular tools that could be of interest to people doing wireframing. The bundle includes a 6 months subscription to the following tools: Gliffy Online, HotGloo, and Mocksup. The awesome thing is that you can pay what you want starting with $1. If you choose to pay $40+ or more, you will unlock access to Chalkmark as well.

Sounds like a deal.

Get It Now

ps. This bundle is also a prelude to their main event, the UX Heroes Super Bundle, which will feature even more tools.

3 Ideas For Capturing Feedback

August 16th, 2011

It took a while, but here are some results from what people submitted for the Feedback Note call for samples:

Dedicated Note Spaces


Craig’s preferred method of capturing feedback is on the wireframes themselves within a dedicated notes section. After printing out the full set of wires on a large piece of paper he then takes notes and sketches on top of what is already there. Looking more closely, a lot of the feedback in this particular wireframe is written in a question or task format – as in: “How would the user do this or that”. I think it’s an interesting way of testing the interface with additional sub cases which should be eventually accounted for.

Credits: Craig Kistler

Saving Whiteboards with Evernote


For Anirban, what works is jotting down everything on a whiteboard, and taking it as a snap using the Evernote app. Apparently, with Evernote he can capture the progression of the artifact and then play it out as a sequence as it occurred. In this way, the physical and the virtual can be easily bridged and stored for later.

Credits: Anirban Majumdar

Capturing Sign Off with Checkmarks


When it comes down to my own approach for collecting feedback, I often write all over the wireframes in a different colour on a separate layer. Recently however I’ve began trying to capture sign offs or some form of collective agreement in the wireframes. Sometimes when working with a larger group, team members wish to know and store what has been agreed upon, and what needs additional work. Extending my personal sketching style, I started using two basic circle like symbols of a checkmark as well as a “x” to denote just that. These little symbols I drop throughout the wireframes as needed, and then update a copy of the document in a shared folder (usually Dropbox).

Credits: Jakub Linowski

Thoughts? Comments? Or have other ways of collecting feedback? Please share.