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:

Yesterday at MeYou Health we had an interesting interview with a potential new designer. The conversation included what she thought the difference between art and design were.

It got me thinking about how I perceive them. Here are my thoughts:

Art is an expression of emotion. It’s communication mechanism is feeling. A great artist makes you feel something deep inside or makes you think of the world differently by providing an alternate perspective.

Design is creative problem solving. Taking a stated problem and forming a solution(s). The more elegant the solution, the better the design.

What are your definitions?

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

I’m feeling a little left out of the iphone, ipod, idog phenomenon going on. So I decided to take a look at some common items and see if I can add “i” to it and see how they would look/interact. The first design is a simple thermostat. I’ll take a look at it’s UI and basic functions and see if I can make it into an ithermostat. The first time experience is below. I’ll create some of the additional screens later. Let me know what you think.

Default Interface

Unlocked

There’s a new product on the market called the Programmable Sky Ceiling. It’s intended to “lift your spirits” and provide enjoyment in an otherwise humdrum environment.

But I wonder if you were the kind of person who said: “Hey, why does the ceiling have to be so damn uplifting?” Why not one which reminds me of my own mortality? Maybe I’m the kind of person who wants something like this:

A more and more users upgrade to browsers that support Alpha transparency, there are increased options for designers. A great way to get a visual effect on your images without manipulating the originals is through the use of overlays.

Say you have a picture of John Wayne:

Now this is great but you want it to look a bit older, weathered and aged. If you position an overlay on top of this image that contains some yellowness and some dust and scratches you can get that effect without changing the original.

Here’s the overlay:

What you need to do now is position the overlay over the top of the original picture of the Duke. It’s z-index needs to be higher and it’s position needs to be exactly over the top of the original. See example

Volia! that’s it. New style without changing the original.

I just installed Fire Fox 3 (beta).The first thing I noticed was the change to the forward and back buttons.

All browser buttons are not created equal. The back button gets much more use than the forward button. From Nielsen:

The Back button is the lifeline of the Web user and the second-most used navigation feature (after following hypertext links). Users happily know that they can try anything on the Web and always be saved by a click or two on Back to return them to familiar territory.

Since the back button gets much more use, the designers at Mozilla have grown it in size in comparison to it’s brother the forward button. Allowing for a larger target makes it faster for the user to accomplish their task. (see Fitz Law)

Drag and drop is becoming more common with web applications. While the desktop has had this functionality for a long time and users understand and execute a drag and drop many times daily, there are some affordances to keep in mind.

First the user must know an item is able to be dragged. Without messages like “drag me” the user will interact with an object and look for visual clues that the object can be moved. Some common indicators are: cursor change, highlighting and making the object semi-transparent.

Once the item is being dragged potential targets should also indicated they are willing to accept a dragged item. Targets should announce their acceptance using visual clues like highlighting.

Example A shows drag and drop with these affordances.

Example B shows drag and drop without these affordances.

LinkedIn launched a redesign of their site today. It incorporates a new navigation structure and looks more like a social site that before. Something significant to notice is the tabbed structure which has been replaced with a left navigation. I blogged about how Amazon made this change with their redesign as well.

LinkedIn Before

LinkedIn After

The tab metaphor seems to be going away in contemporary web design. Perhaps because tabbed navigation doesn’t make good usability sense. According to Jakob Nielsen:

Tabs should be used to alternate between views within the same context not to navigate to different areas

Overall I prefer the new design. I think it’s a clean interface that “borrows” layout geography from Facebook (which is good for user’s of both sites but not so much for the Facebook design team)

One think that does seem to bother me though is the shadow on the left navigation

If there is a shadow left and right at the bottom shouldn’t there also be a shadow in the valley?

I recently upgraded to Windows Vista. Something I noticed is it’s use of transparent elements within it’s UI.

Here’s an example of the corner of a Vista window:

Another common Web 2.0 method is the lightbox which is essentially a pop-up using JavaScript but rather than creating a new window within the browser it keeps the user on the same screen. It can be a powerful tool in the user experience design.

In this example the user is able to select a single date and view the details without leaving the page. There is no additional browser windows allowing the user to focus on a singe action. In addition to opening a window the lightbox method “shades” the window below to reduce the level of noise on the screen.