I'm trying to design a web interface in which users pick particular "items" and set one of them as default. The textbox for searching uses autocomplete to find the matching item. I've come up with the following design to allow the user to set the items as default as well as add new items.

Does this make sense from a usability perspective? Should the textbox be on top instead? Do the radio buttons make sense or should it be textual (i.e. "Set as default") or even a combination of both with a tooltip? Should this list scroll if it gets too large or just push other content down?

Additionally, this interface needs to support reordering/deleting items in the list. I was thinking of just dragging the items for reordering. For removing, I was thinking of showing an "X" or "Remove" when an item is hovered over.

If anyone has any better designs for this, I'd greatly appreciate any input.


4 Answers 4


enter image description here

I don't like seeing so many empty radio buttons, show them only on hover. and the selected radio button can be replaced by text 'default'. That way you don't have to explain to anyone what the checked radio button next to 'item 1' denotes. The first added item can be denoted as 'default' to start off.

I would use drag-drop to reorder, make sure you display the 'move' cursor when the user clicks on 'change order'.

If the 'add field' box is on top, then remember you must add the new item at the top (stack). So it becomes: Item 5 Item 1 Item 2

I prefer the field to be on top because the field remains at the same position relative to the header on adding more items.

  • This is basically what I ended up going with. The only change that I made was not having "change order" text but rather using draggable items. Aug 11, 2011 at 17:23

First of please excuse the quality of the mockup :(

I do not know how often said administrators have to change the order or delete items from the list, I would still do it like this:

As stated in the mockup I would design this selection items like tags and highlight them when selected. To mark the default one and √ is introduced (Chaning the label may also be an option).

To prohbit unwanted edits, mixups or linejumps when trying to manipulate one item in the list, I would hide the menu and make it accessible by clicking.

Depending on how visual appealing you want it to be, you could throw out the pen and make the edit menue visible when hovering / double clicking and just use

Here is my mockup in png form:

enter image description here


If you're supporting reordering, how about having the top item always be the default, and then visually distinguishing it?

( ) Choice C  (default)
(o) Choice A
( ) choice B
( ) choice D

This doesn't seem too far away, but what about having the text field either to the left or right of the added items, as opposed to above or below?

I just feel uneasy with a text field moving about as you use it, and that's what will happen with your design. I don't think scrolling will solve this on its own as it introduces other things (like ensuring your items has been added).

Scrolling, in general, will probably depend on the amount of space you have to show your item selector. If you're quite restricted, or this is just one widget on a fairly busy screen, it might make sense to introduce scrolling, but always ensure the most recently added item is shown.

I'd also consider using the Yellow Fade Technique when updating the list of added items.

Are you going to offer the option to remove or re-order items once they've been added, or is that something you plan to include elsewhere?

  • Just an FYI - this is mainly for an administration interface. Yes, I'll be highlighting the newly added items. Yes the option to remove/reorder should also be there (forgot to update the OP). How do you think that could be included in the design? Wouldn't having the textbox to the left/right cause too much whitespace below the textbox? Thanks! Aug 9, 2011 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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