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've a quick question about combining a mega drop down with a tabular list view. Ideally I'd prefer jut to have the list to pick from but the list also requires sorting. I'm not really sure that this works. You're breaking the selected item (top name in white) from the list below. Am I right in seeing that there's a problem with this? If so are there any alternatives?

We're trying to limit ourselves to a small number of UI components here such as modal windows, tables, accordian menus and menu items.

enter image description here

share|improve this question
2  
Have you got a mockup illustrating this? It does seem rather excessive from your description (having a filterable, sortable table that appears within a mega-dropdown...) but being able to see it (or a mockup of it) would probably help out. –  JonW Apr 24 '13 at 11:18
1  
Yep, see the link below www.pixel-lab.ie/student-list.jpg –  Donal Hanafin Apr 24 '13 at 12:30
1  
2 questions: what do you mean by "breaking the selected item", and what does the hand icon do? –  Koen Lageveen Apr 24 '13 at 17:00
    
breaking the selected item means that there's a table"heading between the items means that you can select and the area that houses the selection (mary reallylongname) the hand icon is only a notifier to draw attention, it doesn't perform any action –  Donal Hanafin Apr 24 '13 at 22:11
add comment

3 Answers 3

I think your problem stems from the fact that you're attempting to get more from this UI element than it's meant to deliver.

Dropdowns are generally for selecting items. Ok, other actions, like search, are often implemented into large mega-menu-style dropdowns, but generally you click/hover and select from a list of items. Once you get into more complex actions, like sorting, you start to run into issues like the one you're having.

You mentioned you have modal windows in your arsenal of elements – I'd go with one of those instead.

share|improve this answer
    
thanks for the feedback, there's too much functionality in there alright. I've tried to push back on the amount of functionality but to no avail so far. I was thinking about a search feature alright but I'm not sure if the user will be able to remember specific names or not. –  Donal Hanafin Apr 26 '13 at 14:12
add comment

The general usage for mega dropdowns is in the context of a navigation menu that is more complex to navigate using different levels of hierarchy compared to a flat structure. The individual items will generally be grouped to allow users to scan quickly and work out where they need to look. If you are using this to select an individual item from a related list/group then it is not really using this design pattern the way it is intended.

In your instance, it looks like you need a special search/find input that can expand to perform more complex sort/filter functions. I suggest providing a standard search input that can do autocomplete based on user input, and then providing filters or sort options as search options that can be configured.

share|improve this answer
add comment

Mega menus, like other fold-out menus, are only meant to offer selection of an item form that menu. You open the menu, select an item, the menu closes again by itself. Clicking outside the menu, or on the button that opened it, closes the menu without selecting an option (or changing the selection).

If you put more functionality in such a fold-out menu, it becomes unclear when the menu will close. When the users' interaction with the menu becomes more complex he also needs to be increasingly careful about not closing the menu by accident.

Menus are 'unstable' like that. What you need for your situation is a widget that is inherently stable, i.e. it doesn't go anywhere until the user tells it to. I would propose creating a menu that sits in the page, between the header and the body, instead of on top of it.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Thanks for the mock up Koen, I've decided to go with either a reduced pull down menu or else a fully featured modal window that dennislees suggested. It's fairly similar to what you've mocked up Thanks for all of your help –  Donal Hanafin Apr 29 '13 at 9:56
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.