More awesome jQuery plug-ins just keep on coming. This time I happen to come across a very handy plug-in called Cloud Zoom that rivals commercial image zoom products already standard for many tier 1 online retailers. It’s lean, mean and is impressively browser compatible.

Other useful features include: adding colored tints over the small image on hover (shown above), placing zoom position inside the smaller image (useful if you want to keep the zoom area from obscuring other content) and the ability to apply a subtle, fuzzy blur over the original while zooming.

Peep and download it here.

This informative piece by Susan Weinschenk of UX Magazine reminded me of the first (and best) thing I learned about designing intuitive user experiences: the principle of designing around the mental model. That is, design your product based on how the user’s thought process works for any given task within said product. That might sound a bit complicated, but let’s break it down with a tangible example used in the aforementioned article.

Imagine that you’ve never seen an iPad, but I’ve just handed one to you and told you that you can read books on it. Before you turn on the iPad, before you use it, you have a model in your head of what reading a book on the iPad will be like. You have assumptions about what the book will look like on the screen, what things you will be able to do, and how you will do them—things like turning a page, or using a bookmark. You have a “mental model” of reading a book on the iPad, even if you’ve never done it before.

Based on this, it’s pretty obvious to design your interface based on what the audience’s (or at least the audience that is going to buy your product) mental mode might be. I like the use of Apple’s iPad as an example to illustrate this point, since they’re generally light years ahead of others when it comes to designing intuitive user experiences. Here’s some more of my favorite, well designed products that put user experience at the forefront:

Acura's dashboard and navigation UI

Yahoo! Fantasy Sports web UI

Citizen watches

Google Analytics

Android mobile platform

Vimeo video uploader web UI

Mail Chimp web UI

Xbox Live UI

I’ve accepted the notion that one of the most influential sources behind the world’s heuristics stems from folk wisdom. That is, direction from “They”, as in “Feed a cold, starve a fever” or “Cure your hangover with a bowl of Menudo” where the true source is never really known or explained. And while folk wisdom is prevalent in my traditional, Mexican-Catholic home (which is indeed it’s own, extraordinary brand of Catholic), I’ve always leaned towards trusting more reliable sources such as 1) evidence from testing/research and 2) experience from specialists.

Considering these sources, to what degree, if any, do we trust in folk wisdom for our designs? This great read from the authorities at UX Magazine offers some insight into the origin of heuristics and suggests that we are indeed relying on a lot of unknowns when it comes to UI/UX design.

The one example given for folk wisdom as a source for design heuristics in the aforementioned article sounded decent, but I’m not buying it. That may be because I’ve always worked with folks who push the notion of ‘acting on data, not intuition‘ and verifying that data before doing things like making changes to process flows or adding UI elements to a page. Here’s my advice to you, designer: No matter how talented you are, or what kind of formal training you’ve had make it a habit to be data driven in your design decisions. Get your hands around A/B testing, eye tracking and conducting focus groups and everything will be okay.

A good newsletter will inform, stir interest and sell. As simple as this concept may seem, many organizations seem to struggle with user engagement and I think it has to do with how easy it is to lose site of the impact a good set aesthetics and proper timing can have.

With timing, let’s consider that most organizations send out their communications on a set schedule. To counter this practice, I often argue that the age old philosophy of saying something when you’ve got something to say should apply to email blasts. Users don’t mind getting messages when there’s something intriguing and timely to look at, but they do care when they get a predictable message that doesn’t offer them anything useful — even worse is when the message has too much, bottled up information seemingly forced into the message since they last heard from you.

That’s not to say we shouldn’t take advantage of calendar events, like holidays and birthdays when sending things out. Piggy backing on special events to make a stronger point or improve engagement on call to actions is a no-brainer. Try to send emails that are interesting, relevant and have timely information while getting the the point across without too many words.

When thinking about the “design” of your newsletter, here are some fundamental principles to keep in mind.

1. Match your brand – Your newsletter design should not be a complete departure from the source website. It should also retain consistent branding so that users are familiar with what they’re looking at. If possible, reference the same CSS file.

2. Make a good first impression – Grab the readers attention with a slick, well-designed header and strong copy to match. If you catch the user off guard, with useful information they’re more likely to take that ever important first scroll down the page.

3. Be consistent – Stick to a strong, well laid out template and keep information in the same location from blast to blast. Open with big news, and place fun, interactive buckets towards the bottom.

4. Keep it clean – Do your best to use few of type faces and keep the number of bordered elements (boxes) to a minimum. Also try to use fewer background images for header backgrounds and use large, readable fonts for said headers. Minimalism may not be your cup of tea, but cutting out unnecessary clip art helps with user engagement.

5. Create good separation – Obvious stuff here: Contrast the type face (bold, large for section headers), contrast with over sizing important visible elements, and contrast buckets (layout) with extra wide outset margins to create lots of white space. Stacked layouts, rather than a columned approach is also a good idea .

I often find inspiration in the sometimes minimalist, sometimes colorfully-bubbly and always cutting edge style found in UI designs from our Asian counterparts. In fact, some of my favorite work comes from the Eico Design firm out of Beijing which consistently impresses me with their inviting, intuitive and downright slick user interfaces.

Click here for even more beautiful examples from the Pacific rim via Woorkup.com. Domo origato, dudes.

Some of my best designs (not speaking subjectively, but based on quantitative interaction metrics) come from spending a fair amount of my time literally drawing out prototypes and use-cases. Yes, with a pencil and paper. It’s easy to think through the functionality of a site in your head and assume you have it all worked out, but it’s never wasted effort to take things one step further. Or two, or three.

By putting pencil to paper, an Interaction Designer will spend more time putting himself in the user mind-set and create a bigger window into understanding the properties of their user’s capabilities. In a sense, it allows you to become an architect that brainstorms then refines countless drafts of his building to ensure all the beams and framing will hold up to the physical traffic, customizations, and decorations that future tenants will bring.

“The application of this understanding to the design, development and deployment of systems and services”  — a.k.a. Human Factor — is all the rage for resume buffers. But as a manager looking to hire a real interaction specialist it’s almost too easy to spot the less talented that claim to be UI/UX experts showing such flawed designs in their portfolio. All of which could have been made far more intuitive and useful had they only spent the time with even an online prototyping/mock-up tool.

In some cases, sketching out website pages and functionality as I envision it has lent itself to providing inspiration for design elements. Take a look at these and you’ll see what I mean. And grab yourself some graph paper, a ruler and a nice no. 2 pencil already.

About a month ago, Ivan took me on as a ‘consultant’ to help get his senior project off the ground. He’s playing the role of a creative director in charge of designing and implementing a new way finding system for his school, the University of the Pacific in Stockton, CA. The portion of the project that I helped out with was giving the school’s website a new look and feel while buffing out the Maps & Directions section so that it taps into the new way finding system and offers users a more useful and engaging experience. Here’s what we came up with:

Index page: Most of the design changes here were to expose important links, set up a consistent top-down navigation style and create clearer CTAs. These, and the other changes you see, give the structure of this site a more intuitive layout that will improve engagement.

Maps – Directions: By default, the Directions page will use GeoIP information to pre-fill the zip code/city information and display the shortest route by car without having the user to initiate the query. I envision this page tapping into the Google maps API which would give users the ability to show turn-by-turn directions and toggle between directions by car, train and bus.

Maps – Interactive: The ‘jump to’ links at the top would highlight that section and the links themselves would tie back into the on-campus visual queues. Below that on the left, we’d allow users to enable the high level nodes and highlight each building therein. We would also provide check boxes to highlight other things like campus landmarks, wifi hot spots, emergency phones, etc.

Maps – Virtual Tours: Tapping into the student body to assist with ‘virtual tours’ is a great way to further engage potential and existing students. It’s also a great way to promote the way finding system through peer communication – I envision the students talking about the different areas of campus while pointing out the kiosks, signage, etc.

Maps – Mobile site: Much like the iPhone’s Map app, the maps section of the Pacific mobile site will enable users to search for specific buildings, landmarks, cross streets, etc. then click the directions button to map a route to said location. When clicking the directions button, the user’s current position (via cell phone triangulation or GPS for GPS enabled mobile devices) will be used by default, but you’ll be able to overwrite the position using an input field.

I had so much fun on this project. I’m honored that Ivan would even consider bringing me in to help and hope my input will be helpful when he makes this whole mess a reality.