Simple and intuitive image-based navigation

September 30, 2010

My fiancé has been hard at work setting up her online business, selling vintage knitting and crochet patterns.  She has hundreds of patterns that the customer can browse.  The original catalog UI was basically just a huge hierarchy of categories, such as Knitting/Women/Dresses.  We tossed around a few ideas, and landed on something much more user friendly.  Instead of presenting lists of words, we decided instead to show pictures.  She rolled up her sleeves, learned some HTML and Javascript, and made it happen.  The result is very cool and much more user-friendly.  I will definitely use this approach in other UIs that I build in the future.

If you want to check it out, go here: http://shop.princessofpatterns.com/pages/catalog

Sorry if this post seems like a thinly disguised plug.  I’m just very excited about this, and proud that my cohort in crime is turning into a developer!

If you know anybody who is interested in knitting or crochet, please pass the link along.  🙂


Article about UX design for multi-touch systems

April 6, 2009

An article by Joel Eden, a colleague of mine at Infragistics, was recently published in Dr. Dobb’s. The article is called ‘Designing for Multi-Touch, Multi-User and Gesture-Based Systems‘.   It touches on the very interesting topic of how to design good user experiences for the next generation of multi-touch systems, such as Microsoft Surface applications.  This is something that I have been wondering about, so I was thrilled to discover this article.  It is very well written and explains the subject matter in a clear, understandable way.  For example, here’s an excerpt that I find very thought provoking…

If gestures are already so much a part of our cognitive processing then in some ways, the growing excitement around gesture-based systems is a sign that software systems are finally catching up to how we already think and behave, rather than really representing an innovative way of interacting with information.

You can read the article here: http://www.ddj.com/architect/216402697


Slick Silverlight Content Navigation Design

March 10, 2009

In the recent past, I worked quite a  bit on a new Samples Browser application for the Infragistics Silverlight Data Visualization product.  This post is not intended to be a plug for the product, but I want to point out the application’s UI navigation design.  I can’t take credit for dreaming this one up (props to Grant for that), but I implemented most of it and added some goodness to the design along the way. Naturally, I didn’t do any of the visual design work — which should be obvious, considering how good this thing looks! 😀

When you first load the application up, it looks like this (click on the following images to see them at full size):

home1

This screen allows you to either check out some “showcase samples” or to view demos for each of the four controls in the product, which are represented by “boxes” toward the bottom.  Also notice the start of a breadcrumb trail toward the top, which currently only has an item in it for “Home.”  Now suppose you were to click on the XamWebMap box down below.  An animated transition would bring you to this screen…

xamwebmap

Each item in the list represents a sample for the XamWebMap control, and even has a thumbnail image next to it.  Since there are currently ten samples available for XamWebMap, and this view only shows eight items at a time, you can click the arrow button on the right side to slide the other samples into view…

xamwebmap2

Notice that the breadcrumb trail above now contains the selected control as the next item in the list, in this case “XamWebMap.”  If we were to select one of the map samples, the breadcrumb trail would then contain the selected sample in view, like this…

united states sample

Now here’s where it gets really cool.  The breadcrumb trail also provides dropdown lists to make it easier to jump to the exact content you are interested in, if sliding from sample to sample isn’t what you want to do.  Here’s what happens when you click on the breadcrumb item for the selected sample…

select a sample

You could also click on the middle breadcrumb item’s dropdown indicator to get a list of the available controls, and then see a tiled view of that control’s samples.  Pretty slick, eh?!  As you can probably tell, I’m really proud of how this app turned out.  8)

One more point of interest is that you can view the XAML and C# code for each sample.  When you’re viewing a sample, click on the “CODE” icon in the top right corner of the sample and the sample will perform a 3D flip to reveal the XAML/Code view…

XAML/Code View

While this wasn’t a trivial user interface to implement with Silverlight 2, it wasn’t that hard.  I think it provides an excellent user experience, especially because of the smooth transitions from content to content, and the ability to either browse or navigate directly to something.

If you want to check this application out, here’s the link:

http://labs.infragistics.com/silverlightdv/2009.1/