Design vs Art Blog

Archive for the 'Interfaces' Category

Simplicity On The Web: Designing To Hide Features

March 19th, 2008 Comments(13)

Making websites easy to use is something desired and appreciated by users. No wonder why. Computers are becoming more and more powerful but humans not. Accepted or not, human processing power has not been growing as fast as technology -we suppose we improved, at least a little bit, right? right??- For this reason, as designers we should try to keep websites as simple as possible.

Many companies have build successful empires thanks to simplicity of their products: Microsoft in the 90’s, Apple and Google in this decade. Making simple products is a totally viable business model, you don’t have to add more features to improve the value of a product.

Sometimes we have the problem that a feature is not really necessary for all our targeted users but it has to be there for some of them. One of the rules to make websites simple or to make websites look simple is to hide features.

Hiding features is a trick used by many successful companies. Here I show you some example tricks:

Can you see the "customize" link on the embed link? YouTube hides some extra features (and complexity) in this link.

YouTube Design Example A

YouTube Design Example B

AOL is also hiding some extra information and features under those buttons.

AOL Design Example A

AOL Design Example B

Basecamp is simplifying the search results making the search by default for only one project. In this example, Basecamp is not "graphically" hiding a feature, it’s simplifying through functionality.

Ebay is hidding a huge category list under one single button (Categories).

Ebay Usability Example A

Ebay Usability Example B

Facebook simplifies the homepage a great deal hiding some of the applications under the "More" link.

Google is really good at this. Under the "more" link they hide many product offers (Upper left corner). "Advanced Search" and "Preferences" are hiding a lot of complexity and options for the Google search.

AddThis.com builts a successful business simplifying the users and developers life. A simple idea becoming the last shout on social bookmarking…

Grin Example A

Grin B

Can you see the "Listing and payment details" sentence? The "Show" link adds some simplicity to this already busy Ebay product description.

Ebay Design Example C

Ebay Design Example D

iStockphoto hides an extremely powerful search tool under the Advanced Search link.

Istock Usability Example A

Istock Design Example B

Thinkvitamin.com hides extra information under the "All Features" button.

Vitamin Design Exmaple

Can you find the "Page Options" link? Yahoo hides personalization options under it.

Yahoo Design Example A

Yahoo Design Exmple B

These were only a few design example from some mayor websites. I hope you enjoyed!

Popularity: 54% [?]

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.

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