Selection of multiple items and then selected one as default

Question

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.

Answer 1

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.

Answer 2

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:

Answer 3

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

Answer 4

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?