Category Archives: Interface

Jan 19

User Interface Implementations of Faceted Browsing

Over the last couple of years a technique known as faceted browsing has become something of a standard on e-commerce sites.

Faceted browsing allows users to filter data (typically product data) by groups of words that describe them (e.g.: colour, size, style, manufacturer’s name).

Amazon.com were one of the early proponents of faceted browsing and it is now such a common element of any large shopping site that it is more noticeable by its absence than by its inclusion.

This article by Mike Padilla over on Digital Web Magazine gives a clear and concise breakdown of the technique, and offers some great advice on planning faceted browsing for your a site, highlighting best practice and potential pitfalls.

Original article: http://www.digital-web.com/articles/user_interface_implementations_of_faceted_browsing/

Just as it is important to choose the proper knife when slicing-n-dicing vegetables, it is critical to prescribe a suitable user interface to support faceted filtering. Faceted filtering allows you to narrow down a large list of objects to a manageable size by applying flexible combinations of attribute filters in any order.

…

If we define groups of adjectives (facets) that describe objects and allow users to filter with them, we could empower users to manipulate the information space themselves rather than oppressively imposing a fixed structure upon them. Users could flexibly select values across all facets, in any order, to view only those objects that could be described as such.

Selected screen-shots from the article

Placing an item count after each facet value effectively gives users future insight without requiring additional interaction

Placing an item count after each facet value effectively gives users future insight without requiring additional interaction

Original article: http://www.digital-web.com/articles/user_interface_implementations_of_faceted_browsing/

Jan 14

The Rise Of Contextual User Interfaces

The recent boost in popularity of well-designed web-based applications has seen context-driven UIs becoming increasingly common.

This article, taken from the personal blog of AdaptiveBlue Founder/CEO and ReadWriteWeb contributor, Alex Iskold, highlights many of the subtle but important benefits of contextual UIs.

The new interfaces are winning people over because they are based on usage patterns instead of choices. The key thing about new UIs is that they are contextual – presenting the user with minimal components and then changing in reaction to user gestures.

…

It is ironic that it took web UIs so long to discover the elegance and simplicity of context.

Since its dawn, HTML lacked the sophisticated widgets that are present on the desktop and web UIs were always considered more primitive and slow. Contextual, AJAX-based UIs actually seem faster because they do not reveal all possible choices to the user. Instead they focus on surfacing just the bits that are necessary and then surfacing more based on user gestures.

Original article: http://alexiskold.wordpress.com/2008/05/15/the-rise-of-contextual-user-interfaces/

Jan 13

120 Excellent Examples of CSS Horizontal Menu

This is a really useful list of (for the most part) nicely designed, horizontal primary navigation menus (give or take a couple of typos).

Original article from csstea.com here: http://bit.ly/O9Xf

Menu is an important element of website. Menu has to be user-friendly and match the design in order to facilitate navigation. In this list you will find 120 excellent examples of css horizantal menu.

120 Excellent Examples of CSS Horizontal Menu

120 Excellent Examples of CSS Horizontal Menu

Jan 13

10 Useful Web Application Interface Techniques

There’s a great article from Smashing Magazine today which outlines 10 simple interface ideas which contribute hugely to a good user experience. A few of them are common in many well-designed web applications, but there’s a couple of really good ideas in there that perhaps aren’t quite so well known.

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

Summary

1. Interface elements on demand
2. Specialized controls
3. Disable pressed buttons
4. Shadows around modal windows
5. Empty states that tell you what to do
6. Pressed button states
7. Link to the sign-up page from the log-in page
8. Context-sensitive navigation
9. More emphasis on key functions
10. Embedded video

The article itself goes into much more detail about each point, with useful illustrations and screen-shots of these techniques in practice.

Sample screen-shots

Hide or conceal advanced functionality
Hide or conceal advanced functionality

Using empty states to motivate users and animate actions
Using empty states to motivate users and animate actions

More emphasis on key functions
More emphasis on key functions

Original article: http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/

Dec 19

Quiet Structure

This is a really interesting article from 2007 comparing the CNN website design with USA Today‘s site, in terms of page structure, individual component layout, and the amount of visual weight the structural elements add to a page:

http://www.andyrutledge.com/quiet-structure.php

Quiet structure is achieved when you de–emphasize the structural elements; the containing boxes, structural lines, bullets, structural color elements, etc… and bring a rhythmical consistency to the layout. The result is that the content becomes more conspicuous and the overall clarity of presentation is greatly enhanced.

The article makes some great points and uses illustrations to great effect:

http://www.andyrutledge.com/quiet-structure.php

http://www.andyrutledge.com/quiet-structure.php

As a design approach I think the idea of a “quiet structure” is something that would work really well with any content-heavy site.

Dec 19

Web Application Form Design

This site has been around for some time, but Luke’s work is arguably some of the most definitive in the field of web form design, so its always worth re-iterating.

Web Application Form Design
by Luke Wroblewski
http://www.lukew.com/resources/articles/web_forms.html

Here’s a couple of examples of some of his findings:

Vertical labels

Vertical labels

Left-Justified horizontal labels

Left-Justified horizontal labels

His online articles form the basis of a book, available through Rosenfeld Media: Web Form Design: Filling in the Blanks. I heartily recommend it!

Dec 18

Flash Catalyst – new wireframing tool from Adobe

Now this is interesting…

Flash Catalyst (Fc) is a new product from Adobe. It’s still in early beta at the moment but its generating a bit of a buzz.

It aims to be an interactive wireframing and prototyping tool, along the same lines as Axure, with a strong designer/developer workflow built in.

Fc produces swf files instead of HTML files and can either be used to create wireframes from scratch or can import ‘well-formed’ Adobe Photoshop and Illustrator documents, converting their layers into interactive elements within your prototype (it can also export Adobe Flex prototypes if required…)

http://labs.adobe.com/technologies/flashcatalyst/

This is a great demonstration/presentation given at the recent ADOBE MAX 2008 conference:

(Source: http://tv.adobe.com/#vi+f15384v1003 )

I’ll certainly be keeping my eyes peeled for a public beta in the near future!

Dec 18

Primary navigation at the bottom?

I stumbled across this website earlier today and really liked their primary navigation:

http://www.designcommission.com/

Design Commission (DC) are a digital communications company based in Seattle, USA, and as such, you’d expect their site to be something of a showcase for their design and technical skills.

The site has a clean, crisp look and feel with intelligent use of white-space, but what i really like is the primary navigation links at the bottom of the screen.

www.designcommission.com

www.designcommission.com

Its bright and bold (so not easily missed) and has a fixed location so you always know where its going to be.

Some neat z-indexing, coupled with a subtle shadow effect gives the impression that the navigation bar hovers over the content, and the addition of a simple cut-away triangle to denote your current location is a great touch, which compliments the element’s ‘hover’ appearance.

Simple triangular cut-away

Simple triangular cut-away

Summary

By moving this navigation to the bottom of the screen DC have given more prominence to the page content, ensuring you see more information above the fold, while it’s fixed location and highly visible design means you never loose it…

Its a brave move and rejects the convention of having primary navigation either at the top of the page or down the left-hand side, but thanks to the way in which DC have implemented it I think it works really well.