3 JQuery Methods for Interactive Menu Effects

3 recent articles show how to get interactive effects on menus, proving that you don’t need Flash for this kind of simple interactivity.

  • Dave Shea’s tutorial in ALA shows how to create interactive menu hover effects using CSS sprites and the JQuery Javascript library. A sprite image is a single graphic with multiple states mapped on the graphic, a technique borrowed from game design, where game characters are shown in different states of action. Shea’s tutorial extends the use of Bauman’s sliding doors sprite method for navigation buttons by adding transitional effects on the graphics.
  • ShopDev reverse-engineers the interactive menus used on Dragon Interactive and shows how to pull it off using JQuery.
  • Bedrich Rios’ demo and tutorial in NETTUTS shows how to create a Moo-tools inspired sidebar navigation menu.


Site Map Usability

Jakob Nielsen's Alertbox reports on their study of sitemaps, observing that among the sites they tested, sitemaps continue to be a useful tool to some people. While their study shows that they are rarely used, they can be simple, inexpensive tools to generate for the users who find value in the sense-making cues that a visual overview provides. Their recommendation is to continue to use them if you already produce them, but keep them static and don't add interactive effects to them.


The what, when and why of wireframes

James Kelway’s article on wireframes in the User Pathways blog summarizes what the different types are, what their purpose is, who the audience for their use are, and how they are typically implemented. There are several nice illustrations in this article for those that need to explain what they are.


Falling Leaves Concept UI for iPhone

Not sure if the user on Vimeo who posted this is THE Woz, but he or she posted this concept user interface for an iPhone menu application that looks very interesting. The video opens with a UI that displays falling media that appear like little square stamps dropping like leaves to a desktop with contacts, photos, videos, etc. on the face of the leaves. The user can apparently pick up one of the pieces, and if it’s a video for example, start playing that video in the UI. Also shows a pretty carousel menu and an awesome looking RGB color mixer for customizing the wallpaper I presume. Very nice ideas here, if only for conceptual purposes.


StickyNote Ninja

This is a very topically focused blog I can appreciate. Kate Rutter of Adaptive Path started, StickyNote Ninja, a site dedicated to using sticky notes for more than just to do reminders.

From her about page, she says “…I’ve been using them in my work, my personal life and as a tool to help companies work faster, more collaboratively, and to make smart decisions that stick. In 2007, I began speaking to groups about these simple, cheap, ubiquitous and powerful tools. This site is a resource for stickynote ninjas everywhere as we journey in our quest for perfection via stickynotes.”

Love it.


OmniGraffle UX Template

I’ve updated the OmniGraffle web design template formerly hosted on my blog at urlgreyhot. The new UX template is now formatted for OmniGraffle Pro version 5.

In this template you’ll find shared layers (masters) for a title page, wireframe, wireframe/storyboard hybrid, simple storyboard, and storyboard with notes. Guides and adherence to a regular grid make it easy to use. The doc is sized so you can work at 100%, and print at 8.5” x 11” or 11” x 17”.

You you can view screenshots and download here at Konigi.