Archive for the 'Pop-ups' Category

Floating Windows Use Examples

February 27th, 2008 Comments(1)

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:

Popularity: 36% [?]

Blog Comment Solutions

December 25th, 2007 Comments(7)

Encouraging users to give you feedback is not that easy, if you are designing a blog you should make the posting procedure as simple as possible. Otherwise many users will get impatient and leave without writing any comment.One example of complicated design could be the SEOmoz blog. The content of this blog is very useful but if you want to post a comment a pop-up is prompted and users are asked to login or register.

SEOmoz blog Register 20071225

Note that the Register button is not visible, users must drug the window (although that might depend on the screen configuration). This adds one more usability flaw to this interface.Then another floating window to post the comment:

SEOmoz blog Window 20071225

Techcrunch, the famous blog, has a much more practical solution for posting comments. I will go for simple solutions, allowing users to post straight away.

Techcrunch Post Comment 20071225

Popularity: 20% [?]

Next Page »