Monthly Archives: February 2008

Floating Windows Use Examples

Posted on by
4

Floating Windows are used to show user additional information while keeping her in the same web browser window. Why should a website design use floating windows? They…

- Improve usability as they replace pop-up windows,
- Keep context as the additional information is displayed on the same window,
- Save precious space,
- Avoid taking the user to another page,
- Additional information or features are shown instantly

Here I present a collection of websites using floating windows in their website design:

 

Google Mail uses a floating window to let the user change the personal picture. With this approach Google Mail prevent the user of loosing the a pop-up window among other browser windows.

Google Mail Floating Window Example

 

Shopping.com gives online help with a floating window, this a great solution that improves the user experience.

Shopping.com Floating Window Example

 

Best Buy displays a floating window as the user hover with the mouse arrow over the product. It shows additional information about that specific product that placing it in the home page would have made it too busy.

Best Buy Floating Window Example

 

At Mapoot.com, a real estate listings website developed by Design vs Art, we use a floating window to show property pictures without taking the user to another page and without loosing the context (in this case the ad for that particular property).

Mapoot.com Floating Window Example

 

Techcrunch, the famous blog, uses the Snap Shots application to give an advance of a link, as the user hover over that link a floating window appears to show a screen shot of the destination site.

Techcrunch Floating Window Example

 

Google Maps uses floating windows embedded into the map itself to show additional information about, for example, a restaurant or business. Not taking the user to another window has great value as it allows him to "play" and search on the map without loosing the context.

Google Maps Floating Window Example

 

Facebook uses floating windows everywhere. In this example, it displays one when the user wants to add a link to share with a friend.

Facebook Floating Window Example

 

Digg presents a floating window to send messages to friends when the user want to share a story. Also in this example, the floating window gives context, it tells the user "you are sharing just this story".

Digg Floating Window Example

 

Please vote this article if you liked it:

The Browser War and the Microsoft Arrogance

Posted on by
11

OK, somebody does not understand how the internet works. This is not new, but Microsoft is digging his own grave (well, I hope). It makes me so angry to see things like this:

Web Messenger Browser Error

 

So, if users want to use the online version of the MSN Web Messenger, they have to use MS Internet Explorer. This not very user friendly, Microsoft! 

Accessibility Quick Tip 3: Text Equivalents for Multimedia

Posted on by
1

If possible, a text equivalent should be provided for all visual information in a website, like video, music and interactive graphics. There are several reasons why a description text should be included in a website design.

 

- Old browsers might not be able to display some multimedia files

- Some browsers might not have the necessary plugins and the user might not be able to update it (or might not want to)

- Impaired people could have problems interacting with multimedia

- Visually impaired people could need a text version of the multimedia file to be read by web readers

- Not every body has a high speed internet connection to download multimedia files

 

Why should you care?  Improving usability helps everybody surfing your website, not only the impaired ones. Imagine that you trying to teach something through multimedia content, like a video; giving text explanation of what is going on in that video could improve the understanding of the idea you are trying to teach.

 

The BBC makes a good job providing an advance text to tell users what’s in the video. Unfortunately the BBC does not give an explanation about the video itself, if the user is not able to play the video no content would be delivered at all.

BBC Video Example

 

Most Cnet News videos and photo slides have more than decent descriptions of what’s going on there.

Cnet Video Example With Explanation Text

 

An image or video says a lot, but you could add much more value to that if you provide equivalent text for that media. At the end, if the user is able to see that media anyways, the text will increase the understanding of the message you are trying to deliver.