41

One of our clients wants us to build a web application to share information about the magazines he publishes. Each edition of a magazine contains a variable amount of advertisers. These advertisers come from a central pool of advertisers. This pool contains (at the moment) about 150 advertisers. Each edition of a magazine contains a subset (about 70-80) of these advertisers.

Our client wants us to come up with a way for him to add 70-80 advertisers from this list of 150 to an edition of a magazine. It needs to be as fast as possible, as easy as possible and as intuitive as possible.

What would be an ideal solution here? I was thinking about something in the lines of the image below.

  1. List of available advertisers.
  2. List of selected advertisers. Advertisers have a delete button.
  3. Textbox with auto-suggest for advertisers in the list on the left. <Enter> removes the advertiser from the left list and adds it to the right one. Textbox gets cleared and remains focus.

My colleagues suggested drag-and-drop or just one list with a checkbox for each advertiser, but those approaches force the user to do a lot of searching and clicking. With my approach the user can just keep on typing.

Any other suggestions for this situation?

My idea to transfer items between lists

3
  • 2
    i got a side-question, what is this software that appears to be used all over this site that generates these screens?
    – Ayyash
    May 26, 2011 at 6:34
  • 4
    @Ayyash - I've used Balsamiq (balsamiq.com). They have a free web version available. May 26, 2011 at 16:43
  • You should probably clear up the formulation: You have a huge list (150) of items and the user wants to select about half of them. I don't think a selection-list or search is even the right tool for this. The workflow is more likely this: For each item, decide include/exclude
    – Falco
    May 12, 2015 at 12:01

9 Answers 9

37

Your design Kristof is pretty good already. You've nailed very important things like stopping this mouse and keyboard back-and-fourth action - that's gonna ruin the experience. And I'm with you on the drag-and-drop - yuk!

I've just refined your idea a little:

alt text

  • Obviously mouse clicks on the left items will add them to the right.
  • You would want the text filter to be Google Style - ie. multi-word, partial matching. As in the search input "rce bm" would match the third item shown in the diagram. This is easy to do and gives the user a powerful, intuitive way to look for names. Second-rate filtering (like start-of-string) will only frustrate users and put them off from using it again. Since the filtering is so critical to the interface, it better work well.
  • Another way to save time for the user (as someone else suggested) would be to have a partially completed list in the "selected advertisers" side. If you thought that there was a good chance the "top 10 most used" advertisers would be a 70% or greater hit, then might as well dump them in the right hand list on load right? Worst case the user has to delete one or two (1 mouse click each) of the top 10 and the remaining 7 items that they want have saved them searching for them. Tweak the numbers in this idea to relieve the user of more work.

Remember: The more work you can do for the user; to reduce their clicking, looking and searching, the faster, easier and likeable your interface will be.

11
  • 3
    How to you ensure your measure of "most relevant" measures users definition thereof? Alpha sort may be suboptimal, but it's at least predictable.
    – peterchen
    Oct 29, 2010 at 9:30
  • 1
    @peterchen Awesome question. In my humble opinion (and I know a lot of traditionally educated design ppl might not agree), we can learn from the iPhone and Apple a lot here - the key is about making reasonable assumptions that eventuate in decisions made for the user. No one really knew how PageRank worked initially but we didn't need to think about whether it was relevant simply because it was, and the results worked. In this case I think "most recently used" and "most popular" could combine fairly simply to produce what the user wants. Sure test and tweak it, but it's a good start right?
    – cottsak
    Oct 29, 2010 at 10:35
  • 2
    Page Rank is a very interesting example - it works well for hundreds of millions of users. It can't be generalized, though - we typically don't use it to find "the one link", and we definitely don't use it to reliably find all links to match a certain criteria (an common requirement in business processes). Under my assumption - a page rank that doesn't match my needs is worse than any predictable order - even PageRank might not be good enough.
    – peterchen
    Oct 29, 2010 at 13:25
  • 1
    Sounds valid. Perhaps leaving the order as alpha is better then, because it doesn't scare the user as much (is predictable). My solution was intended to provide a little future proofing too - for a initial list longer than 150 items. My suggestion included not having all 150 items in the left hand list which would make a user trying to skip the search filtering, and trying to alpha browse the list impossible - they'd get to the "C" section then run out.
    – cottsak
    Oct 30, 2010 at 2:10
  • 2
    I would look at it this way: Is the user expecting to find a list they don't know (like contacts on a friends iphone) or is the user expecting to know in advance many items on the list? If the latter is true then perhaps having the "most relevant" items at the top (tho not in alpha order) is better because they'll instantly see those names the user recognises and click to add them. If the former is true, then perhaps the "contact list" alpha sort is more appropriate. Great discussion tho!
    – cottsak
    Oct 30, 2010 at 2:19
8

I work for a company that publishes magazines, so I'm a little bit familiar with your domain.

I imagine the list of advertisers doesn't change much from issue to issue, so I would have the advertisers from the previous issue selected by default.

Since you only have 150 advertisers, and about half of them will be selected, I wouldn't bother with a search. I would start with a simple checkbox list and see how well that works. Make sure the items that are selected are visually distinct (e.g. make them bold) so it's easy to scan.

0
6

My first post, so please be gentle and I'll do the same :-)

While there are some good ideas here, I don't think any of them quite meet the requirements of the original poster:

"Our client wants us to come up with a way for him to add 70-80 advertisers from this list of 150" - Kristof Claes.

I certainly agree with many of the nifty ideas in which users would be able to filter results and add them to the Selected Advertisers list, we still need a way to bulk add approximately 70 advertisers to the selection. While the filtering ideas are quite good, it would merely lead to an application much like any e-mail application where the user is specifying the recipients in the "to" field. Imagine having to add 70 recipients by hand!

Ideally, we would not want the following workflow:

  1. Type of phrase to search on
  2. (Results appear)
  3. Use either presses enter for the auto-completed item or selects one or more items from the appearing list
  4. Repeat steps 1 to 3 until approximately 70 advertisers have been added

I see some fine posts here from many people who really know their stuff, but I think some have gone perhaps a off topic and are somewhat focused on implementation technologies rather than the psychology of good "user interface design".

My final thought to this thread is – perhaps some sort of mechanism to add "groups" to the selection as this would certainly reduce repeating the same workflow 70 times. Some software that I have seen will pick advertisers in a "round robin" approach. Certainly this could help to some of the selection; in addition, you could have predefined groups that you may always want added, perhaps a list of your top paying advertisers or advertisements for products that are "new".

And now for something slightly off topic...

Matty, I see you mentioned Apple and in particular the iPhone -

...we can learn from the iPhone ...key is about making reasonable assumptions that eventuate in decisions made for the user...

Not quite sure which you mean by that after our talk the other day. Not only are touch devices , perhaps less usable, but Apple generally has a history of making software that makes you wonder what they really think of their user base. A prime example – if you wish to rename your iPad device, first you will need to connect it to a computer that in addition has iTunes software. Why on earth I cannot simply go into the General settings of the iPad is anyone's guess.

The best user interfaces are of the style – "inductive user interface design", as opposed to – "deductive user interface design" or in other words – "trial and error". Touch devices fall into the latter category. Let me explain:

If anything touch devices made popular by Apple as in the iTouch, iPhone, and now the iPad have if anything thrown software usability back into the Stone Age of "deductive user interfaces". Like a very badly designed glyph on a button , leaving the user to think – "my goodness, what does that mean?", staring at the screen of a touch device, it is not immediately apparent that using two fingers allows the user to zoom in or out; or my favourite – that holding your finger down and an icon for two seconds or so puts the device into "delete mode".

In the same way that a badly designed icon falls into the category of – "I don't know what that means, but after I use it for the first time, I'll usually remember what it does", many touch devices fall into the category of deductive user interfaces because the user must deduce what the program can actually do by "playing with it" therefore reducing its immediate usability.

Keep up the fine work!

MickyD's Random Thoughts

2
  • re question: I guess this "groups" thing could potentially work much better than selecting individual items - conceded that the repeating of a "filter, then add" approach, 70 times, would be tiresome. Groups may not be ideal tho- as per my lengthy comments under my answer, if the user will be looking for names then i think the filter-add approach is best. However, if the user does not know the names she wants to add from the outset then a "groups" solution might work better - but then each Advertiser item would need the additional meta to facilitate that grouping/contextual selection process.
    – cottsak
    Nov 1, 2010 at 3:01
  • re inductive/deductive: I tend to agree with most of your reasoning except: While it's true that a ground-breaking interface like "touch" demands new learning, like any interface that becomes standard, standard conventions will arise. Sure the "touch-and-hold to Copy" on the iPhone is not obvious at first, but once learnt, it becomes immensely powerful, as with many of the other input conventions. I don't think this is a fair comparison to the question at hand as "touch" is so game-changing. My answer to this question uses established conventions which makes it fairly inductive IMHO.
    – cottsak
    Nov 1, 2010 at 3:09
4

The entire list of advertisers should have filtering on top of it (basically putting your "3" on top of your "1" and have "3" dynamically effect "1"'s content):

  • Search (on the fly narrows down the list)
  • Groups ("Last Used", "Fashion", "Electronics", etc.)

Note - if your search is powerful enough, you can use just one control hence searching for "fashion" would return all the advertisers that have "fashion" in their name, or that have been tagged as belonging to the "fashion" category.
The "Last Used" can be a check box.

Main benefit:
Narrowing down the list on the fly allows you to select all the relevant items together and move them.

Example: You type "electronics", get a list of all the electronics related advertisers, you select them all (with the mouse, ctrl+A or whatever other method) and immediately move them to the right list.

2
  • Thanks for the input Dan. Just a few remarks though. Only the name of the advertisers will be shown, so I don't think the client will need to select and transfer multiple advertisers at once. Also, with your approach they will have to move their hand between keyboard and mouse while adding the advertisers. Oct 12, 2010 at 11:24
  • Good idea. If the "groups" thing could be refined it might be the killer solution for this interface. #MickyD
    – cottsak
    Nov 1, 2010 at 2:11
3

I have to agree with Micky Duncan : I think searching/grouping/filtering are not at all suited for this task.

You don't want to search and select a few items from a big list. You want to select about half of all items on the list. If the user has to select half of the items, the user will want to make sure he has selected all candidates and not missed anyone. So the workflow is more akin to the following:

Imagine you have the List of 150 advertisers on paper. You would go through the list from top to bottom and decide for each one "do I want this advertiser?" And then give it a tick or a strike-through and at the end you are sure you have evaluated all of them.

So the Design should be like this:

Selector mockup

The focus is on the top item in the middle list and the user can use arrow keys left and right to either discard the item, or put it into the selected list. So he can rapidly work through the whole list by pressing left or right depending on the advertiser and is sure he has given each one some thought and not missed any.

3

I have this UI that might be relevant.

It could be useful if the advertisers were somehow organized in categories, and the user knew in which category is each one.

It's a mouse-only UI, requiring a single click per advertiser.

It can be operated with the keyboard, but the menu closes and has to be expanded again for each selection. This can be fixed by not closing the menu on Enter.

2
1

Looks like your solution is a pretty good one. I'd remove the left list as it doesn't really add any information (it's just a long list, and it's going to be hard to tell that something just evaporated from it after pressing Enter) and just offer a search field with autocomplete (although there should be a dropdown from that field so users can still see what options are available) and add a big "Add advertiser to list" button in case your user(s) don't know to press Enter.

Get this to working prototype stage ASAP (using mock data) and then demo it with your client and have them run through it. Getting their feedback as soon as possible is critical since they'll be the ones using it frequently and therefore they need to feel comfortable with it.

4
  • I think the list does serve a purpose: a reminder of the advertiser's names that can be selected. Without it, you would have to start typing from memory and hope that the search algorithm is forgiving enough with regard to matching the name of an advertiser (not just "starts with") and possibly even forgiving on typo's. Unless users always know exactly which advertisers to enter (like from a piece of paper or e-mail), at least provide a drop down selection list from the search box just like GMail's "To" field does. Oct 12, 2010 at 11:12
  • @Marjan yeah, I had assumed that the autocomplete search would double as a dropdown - essentially the way the Google Chrome omnibar works now, or Gmail's to field as you say.
    – Rahul
    Oct 12, 2010 at 11:18
  • Thanks for the input Rahul. Marjan is right though, I have added the list on left with a purpose: to allow the user to look at the remaining advertisers. This could be useful in "Am I forgetting someone" scenarios I believe. Oct 12, 2010 at 11:29
  • Updated my answer to reflect what I meant more closely. :)
    – Rahul
    Oct 12, 2010 at 11:36
0

I agree with the points raised by MickyD and Patrick. It all depends on how the selection of advertisers are made. Will the client use the UI to select the advertisers that should be in a specific issue or does the client already have a list with the advertisers in the specific issue. I don't think filtering is the best solution in either case.

If the client uses the UI to select the advertisers it should work much better to just present one list with a checked/unchecked state. As Patrick wrote it is good idea to make the selected state stand out. It is also possible to make the unselected state appear lighter rather than just bolding the selected state. The client moves in the list using key up/key down and checking/unchecking using space (or a similar key).

If the client has a list with the advertisers appearing in the specific issue the first approach should be to check if that list could be received in digital form and automatically imported. If that is not possible perhaps the list is sorted in some way and then UI should sort the advertisers in the same way.

The third option is that either the client looks through the issue searching for advertisers or he has a list that is unsorted. In this case it makes sense to have a filter function.

The point is that without knowing the goal and the circumstances surrounding the task it can be really hard to provide a good solution.

0

I would use two lists, and two buttons. The user can mark single elements in the left list with a mouse click, double click will move the element to the right list.

He can shift-click,click mark a range, and with the [ > ] button transfer all marked elements to the right. With Ctrl a single element can be switched from marked to unmarked state and back again.

Ctrl-a would mark all elements. All is known from other program interfaces.

Alphabetic sorted elements would make it easy to find an entry, the first character could be used as a hotkey to navigate to that entry, if scrolling is neccessary.

> afoo                    ifoo
bfoo                      jfoo
cfoo                      kfoo
> dfoo                    lfoo
> efoo                    mfoo
> ffoo                    
gfoo
hfoo
          [ < ]    [ > ]  

{a,d,e,f}foo is now marked on the left. With [ > ] the user moves them to the right.

Such interfaces are pretty fast, easy to use, and easy to understand. Maybe you can add tooltiptext or name the buttons 'move to List of selected items' and 'remove from List of selected items.'.

After moving to another List, this list has to be resorted.

Your Answer

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

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