Increasing numbers of websites are developing new types of user interface design, taking advantage of users' increasing levels of Internet-sophistication and faster connections. These new interfaces often allow users to view and manipulate large quantities of data.

The Thinkmap Visual Thesaurus interface, one of the earliest and most innovative user interfaces online

This article will have a look at some of the more interesting user interface design ideas we've come across recently:

• Slider-based filtering


• Fisheye menus


• Treemaps


• Drag-and-drop

The point of this article is not to promote any of these user interface designs, but rather to offer them for the purposes of interest and inspiration.

Although we have yet to run any large-scale usability testing on them, we consider each to have the potential (if used in the appropriate circumstances) to offer interesting possibilities for supporting users in the performance of their tasks.

Here the details:

Slider-based filtering

The user interface design of Amazon's Diamond Search uses click-and-drag sliders to allow users to broaden and narrow a wide range of filtering criteria. The page then automatically updates to show how many results conform to the users' selected criteria.

This can be used to create an intuitive and informative interface, making it easy for users to search through a large data set:

Amazon's diamond search showing 13593 diamonds available for all shapes, prices, carats, cuts, colours and clarities. For each of these criteria sliders can be used to set a range, thereby filtering the search results.

The number of results is displayed on the right hand side of the page. This means that users only need to submit their search when they're happy that the number of search results is sufficiently small.

Users can narrow their search criteria by using the sliders, thereby reducing the number of results that will be displayed:

Amazon's diamond search showing 278 diamonds available for the price range $18,000-$87,000

When users are happy with the search criteria, they simply select the 'See results' button. The great thing about this design is that users will know if there'll be no search results, without having to actually run the search.

Fisheye menus

Fisheye Menus can be very useful in helping users to navigate and select items from a long, ordered list. These menus dynamically change the size of menu items to provide a magnified-focus area around the cursor. This makes it possible to present the entire menu on a single screen without requiring buttons, scrollbars, or hierarchies.

Fisheye menu showing an alphabetical list of the countries of the world. The magnified focus is on the United Kingdom.

Fisheye menus could potentially be a great way of having users easily navigate through a long lists.

Treemaps

Treemaps display rows of data as groups of squares that can be arranged, sized and coloured to graphically reveal underlying data patterns. This user interface design can be used to present complicated data relationships (such as hierarchical relationships).

An example can be found on the Smartmoney web site, where a tool allows visitors to view information on hundreds of stocks at a glance. In the example below, stocks are grouped according to sector and represented in differently-sized rectangles according to their market capitalisation. Colours are used to indicate significant positive (green) and negative (red) price movements.

Further details on a company are available by mousing over their rectangle (e.g. General Electric in the example below).

Treemap representing different sectors for stocks.

Drag-and-drop

This type of user interface designs makes use of users' familiarity with moving elements around (users may have experience of doing this within Microsoft Windows applications, for example). Panic Room's online store allows users to either click a 'button/plus symbol' to add an item to their cart or drag-and-drop the item into it.

To do this is relatively simple. You simply click on the product you want to drag into the basket:

Screenshot from Panicroom, showing three T-shirts and a large shipping cart area at the bottom of the screen. The shopping cart displays the instructions, 'drag any item here to add to your cart'.

Whilst holding down the mouse button, drag the item across the screen and into the basket:

Screenshot from Panicroom, showing a T-shirt being dragged across the screen Screenshot from Panicroom, showing a T-shirt being dragged into the cart area.

Screenshot from Panicroom, showing the T-shirt now successfully placed into the cart area.

Finally, release the mouse button to drop the item into the basket:

Conclusion

Innovative user interface design is key to developing new and improved user interaction online.

The problem with designing a totally unique user interface however is that users may be unable to quickly and easily learn how to interact with it.

If you do develop a totally innovative user interface design, do be sure to carry out usability testing before launching. This way you can check if users can grasp what they need to do and what you need to do to make the interface more intuitive.

Do of course make an effort to visit the site we've mentioned above, as interfaces are made to be interacted with!

Original article written by Tim Fidgeon and entitled "Innovative user interface design" first published July 31 2006 on Webcredible

About the author
Tim Fidgeon is a professional web usability expert working for Webcredible, an industry leading web usability and accessibility consultancy.
Tim Fidgeon is an author, speaker, and consultant on usability and strategy. He's worked with the Internet and usability since the late 1990's and holds a Masters degree in Human-Computer Interaction from University College London. When he's not running Webcredible's web usability training course he can usually be found conducting usability testing. Tim has been involved in several award-winning projects and, just like Robin Good's, he is very passionate about making the Internet a better place for everyone and a diving platform for making the world a better place.