Good sources for GUI inspiration

Question

Where do you go when you want to know how other people solved a particular GUI problem? I'm still stuck at the Google Images level, but 99% of the images you find are screenshots from extremely boring UIs that are part of online tutorials.

I know of a few webpages that maintain links to interesting new Web UIs, but is there any collaborative effort for Desktop UIs, preferably platform-agnostic?

Answer 1

For historical reference, check out http://www.guidebookgallery.org/.

Answer 2

A start for UI design inspirations might be UI-Patterns, that keeps a collection of somewhat useful pieces of UI that one can apply to their own design.

From their front page:

It has long been common practice to use recurring solutions to solve common problems. Such solutions are called design patterns; standard reference points for the experienced user interface designer. This website seeks to better the situation for the UI designer, who struggles with the same problems as many other UI designers have struggled with before him.

This site will help you in two ways: You can read insightful design pattern articles or browse through our screenshot collection.

So, you can search for appropriate patterns and see related screenshots and maybe then try the actual software, when possible/if needed, to get a more thorough insight.

Answer 3

From a theoretical point of view, you could read about design heuristics on Jakob Nielsen's site. Concepts to think about are:

• Visibility: making it clear what each element in the UI is used for
• Feedback: making it clear what action has been achieved through each element
• Affordance: Making it clear what can be done with each element
• Simplicity: Make simple common tasks simple to do
• Structure: Structure elements in a meaningful way, e.g. grouping elements that are related with a groupbox
• Consistency: In appearance, positioning, behaviour so it makes it easier to learn and remember
• Tolerance: The ability to prevent errors or recover from them. E.g. greyed out items

For inspiration, this depends if you're a designer or not. If you're not and just want some inspiration that goes beyond the normal set of widgets and (radiobox, checkbox, dropdown list) then you could think of design metaphors, such as Joel's post on metaphors (a bit old now though, Google ui design metaphors for more). Or take some ideas (aka steal) from jQuery's UI and various plugins, and YUI. But you'll still struggle to make it look original and polished without someone with natural design ability.

Answer 4

I'd suggest to try Quince.

It's a big and very well done online repository of UI Patterns (or UX Patterns, as they name them). The patterns are described in a technology-agnostic way, with a lot of desktop GUI (non-Web) examples.

Some features:

• filtering of patterns by various criteria (by user tasks, by tag relation, ...)
• well written descriptions
• all patterns I've looked at come with several examples
• links to external sources

Among the sources Quince cites are two that I'd also like to recommend:

• Jennifer Tidwell's book Designing Interfaces
• the pattern library at welie.com

Answer 5

To get the philosophy behind UI design, I recommend "About Face 2.0". It's a great book to teach you why you should do this instead of that. To get inspiration, nothing is better than copying and adapting from others' solutions. For this, you just need to see a lot of cases.

Answer 6

Just think about what annoys the hell out of you when you use a GUI and try not to implement a GUI that does those annoying things.

For example, having to press 4 buttons to do something when 1 button would be sufficient is annoying ;)