At MeYou Health we’ve send out a lot of email as part of our Daily Challenge. One of the things we struggle with is design constancy from browser to browser and with images turned on and off. While our emails are far from perfect, we’re learning and always trying to improve the experience. Here are a few tips we’ve discovered:

• Try to design without images first and only add images to enhance the design
• Never rely on images to convey the main message of your email.
• Use background colors to effectively design your email
• Use old school <table> HTML to code your email. No body likes this but it’s your best shot at getting something that is recognizable.
• Use table borders to create horizontal and vertical lines.
• Be conscious of how you use your “alt” tag

Here is an example of a Hewlett-Packard email rendered in Gmail with images turned off:

Hewlett-Packard email newsletter with images turned off

Hewlett-Packard  email with images turned on:

HP email with images turned on:

At work as part of the employee planning and performance initiative, we have these things called GAOs. It’s an acronym. For what I have no clue. It’s basic goal setting and tracking. Every review period I put the same goal. Goal: Establish myself as a world class interaction designer.

I keep that goal there to remind me there is a lot to learn. There are a bunch of great designers out there who could put me to shame in their respective design category. I like to set the bar high even though it means I’ll either jump right through it (or sometimes under it). I expect my manager to keep my feet to the fire and grade me fairly based on how they think I’m progressing.

Sometimes it’s the humility of failing miserably, sometimes it’s the reward of getting it right but for me it’s the learning along the way that makes me a better designer. So far I don’t think I’ve quite reached the peak but I’ll keep climbing.

What motivates you?

“There is only one boss. The customer. And he can fire everybody in the company from the chairman on down, simply by spending his money somewhere else.”

-Sam Walton

I love the simplicity of this quote. It cuts through all the B.S. and puts every employee on watch. The customer/user has the power to decide your company’s destiny. If you’re not out there listening to them, understanding what they want and building products and services to meet their needs, they will fire you. And they won’t feel a bit of remorse about it.

Use visual hierarchy as a method to guide the user. It should show relationships and priorities between elements on the page. If communicated well, it should be clear to the user what the preferred course of action should be. Without visual hierarchy the user is left trying to decide what information is more important. Not all hierarchy is based on size. Here are some other methods to indicate to the user what is most important.

Focus:. The layout indicates where users need to look first.

Flow: The eye flows smoothly and naturally by a clear path through the surface, finding user interface (UI) elements in the order appropriate for their use.

Grouping:. Logically related UI elements have a clear visual relationship. Related items are grouped together; unrelated items are separate.

Emphasis:. UI elements are emphasized based on their relative importance.

Alignment: The UI elements have coordinated placement, so they are easy to scan and appear orderly.

The folks at Balsamiq provided me with a no strings attached license for an honest review of their software.

Balsamiq is a tool for creating wireframes. It’s an Adobe Air application that loads fast (providing you already have Air installed). I installed it on a Friday morning and decided to see how quickly I could learn to use it. Since I wanted to test it’s complexity and flex it’s capacity, I chose a complex interface randomly from the web. The Expedia.com last minute deals page had a lot going on (probably more than it should) and would be a good test. Below is a screen capture of the original:

Getting started was fairly easy. Not a ton of menus and I’m familiar with most design applications. I got started drawing the big objects, browser window, columns etc. Which turns out to be helpful since the application supports layering. I didn’t need much “bring to front” type of editing. After about 35 minutes I completed the wireframe.

Some tools I’ve used previously to wireframe/paper prototype include: Quark, Illustrator, Photoshop, Fireworks, HTML and pencil on paper. Balsamiq felt much faster since many of the interface elements were already created (dropdowns, chekboxes, tables etc.) Only the things you’d find in an interface. Very simple.

Pros:

The interface is simple and easy to use. It uses many of the design application standards so it’s quick to get started. The sketched look of the wireframe ensures no one will mistake it for a “mock” or visual design. The focus of wireframes is to indicate structure not style. This tool does that extremely well. You can easily export your designs as PNG files for easy sharing or printing.

Cons:(Some of these may be “newbie” type problems since I’ve only had the application for a few days.)

Some of the constructs allow for font/text resizing while others do not. I would like to determine font size for all elements. Also it wasn’t clear to me how or if I could add my own elements to the application or if there was a community of users contributing to the app. Grouping shortcut made sense [Ctrl + G] where ungroup [Ctrl + Shift + G]. I’d prefer [Ctrl + U] (Quark Standard).

Overall, I was quite pleased with Balsamiq and would recommend (and have) this tool for any designer who wireframes as part of their day to day activities.

I was using Outlook the other day and something caught my eye. The email notification in the lower right corner when I get new email. I’ve been using Twitter for well over a year and have tried a few different applications. Most of them send some notice to the screen when you get a new Tweet. Since Twitter is gaining users buy the boatload I imagine Microsoft, Google and the like have been trying to integrate the simple idea into their applications.

Now, let’s say for argument’s sake, the 140 Character thing is the key to all of this hype. Not too short, not too long. What would Microsoft need to do to mimic this behavior? Simple, just extend the character count in the notification. It currently only allows 80 characters.

Here’s what it would look like with a little visual change and a new category I’m calling “Announcements”. These could be company announcements, group announcements (“Cake in the 2nd floor kitchen for Bob”). Imagine if you could avoid all those kinds of emails from your inbox?

Here’s how I imagine it would look:

And all these little Announcements could be placed in outlook under their own category in Outlook so you can manage, search etc.

Oh and if that doesn’t work, you can always follow me on Twitter

I came across this site today. I count 84 links before the first paragraph ends. Ever wonder why you should hire an IA? Here’s the reason:

My skills as a User Experience Designer/ Interaction Designer from 1996-2008

If you’re like me, over the last few weeks you attended a few holiday parties. As online invitation sites start to replace traditional mail invites, I thought I’d take a look at a local start-up mypunchpowl.com.

Over the next several posts I’ll provide my opinions on the first time experience. From first engagement to sending out invites.

Mypunchbowl.com Home Page

Call to action

The homepage should have one focus which is draw the user into some kind of activity. Most analytics show this is where sites lose the majority of their traffic. It is crucial to engage the user with a label that has value to them. This home page has “Create free account” as the call to action. If you’re like me, that sounds like you’ve just tasked me with some work. I read that and say: “great, I’ll need to type in a bunch of fields on a form before I start.”

Recommendation:
Instead the label should read “Start planning your event” or “Send online invitations now”. Definitely something to test but it needs to express value to the user, not the site or the system.

Below the fold

The rest of the page has a lot of information. There are testimonials, planning advice, birthday party advice, learn more links, location maps, reasons to celebrate, send e-cards, and a message from the CEO. Some of these may be important when educating the return user but just server to slow the first time experience with visual noise.

Recommendation:
Reduce the total amount of information below the call to action. Focus only on what is going to convince the user to respond to the call to action.

It’s important to know whether a user is a new user or return user. The value proposition is different for them. The use of cookies and dynamic homepages are a great way to segment this traffic.

As a User Experience designer I’m responsible for providing design specifications to engineers. Sometimes the design problems are easy but more often they are complex and difficult to visualize. As designers we’ve latched onto some tools to help us communicate our ideas to our stakeholders. We use wireframes, mock-ups, omnigraffle/visio UML diagrams, comics, Powerpoint and a few other techniques to convey what we mean.

Here’s the problem: If you’re using a different tool, and designing without input from users then you are doomed to fail, or at least have a major communication breakdown eventually.

Have you ever read a book and watched a movie made from that book? Remember back to how different it was in your mind than how it was interpreted on screen. There are hundreds of pages with fantastic descriptions and still the interpretation can be so far off from person to person. That’s why it’s critical to get ideas into a working state as quickly as possible.

It allows the user to soak in the idea and start concentrating on the details. What if it did this? How does that work? Where do we collect this data? All important questions to be answered early. The user can’t start asking those questions unless they can interact with the interface, play with things and exploring. That’s where they prototype comes in.

Learn to design quickly, allow for full uninhibited feedback then iterate. That will give you the best chance at a successful, usable product.