3

Hm, I am fininding myself wishing that we had communitywiki

After seeing this question: What is the most common user interface in the world? I thought it would be educational to not limit the discussion by trying to single out the most common, but instead discuss the many common interfaces that we (read: mankind) interact with daily, and how they can be improved.

So, what are the most common UIs/UI components? What are their strengths and weaknesses? How can they be improved?

For example:


Combo Boxes

Combo boxes are abundant through out the web and in desktop software.

Pros: Good for allowing a user to have a list of choices while requiring minimal space when not in use.

Problem: Becomes unwieldy and hard for a user if the list of choices is too long.

Potential Solution: Autocomplete Combo Boxes, using text matching on typed user input to narrow the list of possible choices and enable easier selection.


Obviously I didn't invent the Autocomplete combobox; note that answers don't have to be improvements you invented.

6
  • 2
    Your combo box example would work well as a tag wiki so I added it to the combobox tag info page. Oct 28, 2010 at 17:18
  • 3
    If you think a question should be made community wiki for any other reason than to allow more users to edit the "community-owned" posts, then what you really want is to close the question.
    – Roger Pate
    Oct 29, 2010 at 6:37
  • 3
    The fact that you mention "discuss" and "discussion" in your question suggests to me that this is, in fact, not actually a question, but a discussion. In which case we should ask ourselves whether this is the right place for that.
    – Rahul
    Oct 29, 2010 at 8:00
  • 2
    Sigh, its the 'its not a question' patrol. Oct 29, 2010 at 16:54
  • 2
    @instanceofTom First of all: Nope, and second of all: I was suggesting this for your benefit, not for mine or anyone else's. I figured that pointing out that this might not be the best place to post this might help you, because then you could decide to post it elsewhere (like a forum) and get more meaningful answers. It's up to you to do something with that. If I really didn't think this question was useful here, I would have simply voted to close it.
    – Rahul
    Oct 31, 2010 at 18:15

5 Answers 5

1

I find the Sencha ExtJS samples page to be the best compilation of these kinds of components.

In terms of how to improve them, it's probably way too big of question for a single post. That's a book you are asking for. Maybe ask the question more specifically about a single component?

1

Tables

The answer is given from the point of view of desktop application but may be good also for web applications.

Pros: May contain large amount of data in relatively small area.

Cons: Searching might become impossible if the number of entries is large. Without attractive rendering (icons, colors) the application might look boring. Some of the information might be redundant for some of the users. Data priority is flattened.

How to improve: Provide data organizing methods - sorting (must!), column reordering, on the fly (i.e. while typing) filters. Use icons instead of/along with text where possible, use colors. Provide column selector option. Show only basic columns by default and show the full data in a close but separate place only when an entry is clicked.

1

I often refer to Yahoo! Design Pattern Library for user interface patterns. What I like is that they answer theses relevant questions for each pattern.

  • What Problem Does This Solve?
  • When to Use This Pattern
  • What's the Solution?
  • Why Use This Pattern?
  • Special Cases
  • Accessibility

and I think theses questions have to cross the mind of every UI designer each time they chose an UI component.

1

Don't reinvent the wheel, read here instead: http://www.welie.com/patterns/index.php

0

Scroll bars

Pros:
  • Allow direct navigation to any point in a document/page
  • Allow fine-grained movement
  • Allow fast scrolling through a document/page
  • Indicate length of a document/page
  • Common placement right up against the edge aids usability according to Fitt's law
Cons:
  • Don't work so well for very large documents
  • Less useful since the advent of the scroll wheel
  • Different implementations can cause confusion
How to improve
I consider the scroll bar one of the most usable UI elements: lots of functionality, but generally well-understood. Problems occur if scroll bars are implemented inconsistently (e.g. in some flash applications), though. Maybe a visual element can enhance scrollbars - e.g. a combination of Acrobat thumbnails with the scrollbar.

Not the answer you're looking for? Browse other questions tagged or ask your own question.