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.

There’s so much information out there on the web sometimes it’s difficult to find just the right level of intake versus filtering. I’m a bit of a visualization junkie. I’m a trained graphic designer turned web designer turned UX designer. I found by combining several technologies it helps me reach the right information.

1. First I search for visualization on del.icio.us

2. Second, I grab the RSS feed from the executed search:

3. Third I add the feed to my Bloglines account

4. Fourth I scan the results…

There are usually about 100-200 new results per day. I scan the list looking for a high number of users who have tagged sites with the term “visualization”.

Here’s an example I found the other day which is great graphic design and information display. It informs in an entertaining way. There are loads of these gems out there. I’s just a matter of being able to find them.

Vampire Energy

You’re hip, cool and into the now. You’ve just purchased a new MacBook Pro, you’ve got your fancy white ear buds in and you’re finally cool. Well… because Apple is cool right?

Be the Apple of everyone’s eyes in thes comfortable eye-catching T-shirts.

If you’ve been living anywhere but under a rock you’ve been surrounded by the press and the candidates giving you their best pitch for why they want to be president. I’ve decided to evaluate their main campaign web sites and decide who gets the best score for: information architecture, usability and graphic design. All categories are rated 1-10.

All reviews were done the day after the Iowa Caucus

Hillary wins the website review with 24 points.

Interesting observations: First all these sites placed the “contribute” link in the upper right corner. Very good location for findability but also where the mental model of the shopping cart ($$) is, coincidental? Second, each site has way too much information. If they are trying to attract the media for an audience then this is great. But if you’re trying to sway an undecided voter they should be more concise with the information. Last, a few of the sites were guilty of “scroll block” this is usually caused by a horizontal line (or image or text) to span the entire page leading the user to think they have reached the bottom.