Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

selection

share|improve this question
add comment

4 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
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. –  TheCloudlessSky Aug 11 '11 at 17:23
add comment

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

share|improve this answer
add comment

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
share|improve this answer
add comment

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?

share|improve this answer
    
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! –  TheCloudlessSky Aug 9 '11 at 12:20
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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