Innovative user interface design

by Paul McCarthy on 1 November 2006

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.

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.

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 website, 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 shpping 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

Finally, release the mouse button to drop the item into the basket: Screenshot from Panicroom, showing the T-shirt now successfully placed into the cart area

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!

Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.

Course basket x

Course

Price per place

Add another courseCheckout

Pay now by credit card or later by invoice (invoice payments only possible if all courses are 3+ weeks in advance)