Design vs Art Blog » Pop-ups

Floating Windows Use Examples

Alexis Brion — Wed, 27 Feb 2008 05:27:25 +0000

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.

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

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.

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).

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.

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.

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

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".

Please vote this article if you liked it:

Blog Comment Solutions

Alexis Brion — Tue, 25 Dec 2007 12:47:37 +0000

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.

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:

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.

Pop-ups Are Bad For Usability, Example

Alexis Brion — Thu, 13 Dec 2007 05:58:31 +0000

Everybody hates pop-ups. This time I have a bad usability example of Amazon.com, in contrary to Tesco yesterday’s article about how to avoid pop-ups to show product pictures to users.

When you click on the product picture on the product description page, Amazon splashes a pop-up window with a bigger picture.

Why this is bad? Amazon’s target is everybody, they are a super store, so it could be that many of it’s users don’t know much about computers. One example I can imagine is that many users have pop-up blockers but they don’t know they have it, so they they will never see the pictures.

That means that many users will not get all the information they need to decide.

Sometimes you have to use pop-ups, but try to avoid them if you can. On yesterday’s article you can see how this could have been avoided by Amazon.

How to Place Product Pictures Without Pop-Ups

Alexis Brion — Wed, 12 Dec 2007 05:58:15 +0000

Tesco, the British retailer, developed a nice solution to show users product pictures avoiding the use of pop-up windows.

Pop-up windows are a big usability issue, they confuse users and they negatively affects impaired people. Think that some people just don’t notice the pop-up windows, some close them straight away and some don’t know how to close them.

Tesco placed a “View more images” link on the product description, when clicked, the user is taken to the pictures page.

Then, in the pictures page they placed a very visible “Back to product” link. I think this solution is a very good one and help users easily navigate pictures. This is a nice usability pattern to keep in mind.