I'm contemplating a widget with quite a number of options, which will make for a lengthy widget form. To improve the user experience with this form, I'd like to divide it into sections. I don't feel like re-inventing the wheel, so what are some examples of widgets that have fairly complex forms (especially those which are divided into multiple sections) all the while remaining usable and easy to parse visually?

I should add that I'm looking for examples that could be considered "best practices", not messy kitchen sink forms that are difficult to use. I realize this is probably subjective.

Thanks for your input!

  • Added a bounty because so far there are no answers that show Best Practices, a high degree of usability, or design solutions that are accepted by the community as being the way to go. – Tom Auger Jun 8 '11 at 13:47
  • No idea on best practices, but why not just put in some javascript tabs? – Otto Jun 8 '11 at 17:06
  • I think it's all depends on how many options you have. For me anything more than ten controls I'd looking into having some kind of expandable/collapsible control for the extras. – Azizur Rahman Jun 14 '11 at 15:48
  • @ Azizur, good point. – Tom Auger Jun 14 '11 at 15:54
  • Thanks to all who contributed, though I had rather hoped more people would get involved (I suppose a larger bounty might have done the trick - alas for my failing rep). I ended up selecting the Thickbox alternative, simply because in the end it provided the most options for keeping each section "light" and "to the point" while still accommodating a nearly unlimited number of options if necessary. Thanks again to everyone and happy 'Pressing – Tom Auger Jun 15 '11 at 12:03

How about native Thickbox with the native jQuery tabs for example:

the widget it self is simple and only has a link enter image description here

but one you click on it the thickbox pops up and shows all of the options grouped by tabs:

enter image description here

let me know what you think I'll fetch the code for you.

  • Interesting, thanks for this B. I was really hoping to see what can be done within the native widget dialog though, rather than resorting to a jQuery overlay. This is a great option though and one I'll keep in mind. Thanks for that! – Tom Auger Jun 9 '11 at 17:49
  • The thing is that everthing here Is native , and all scripts used here are built-in. – Bainternet Jun 9 '11 at 18:26
  • i think this not so great - its not the default UI of WP and the tabs not inside the UI of WP. The best way is to use the defaults of WP UI, but current she have not the best possibilities for an complex UI on widget options. Shure, but pure html and no inside styles is the best way for usefull in furure and not so much updates in the markup. And so it is a little bid better to use the example of the Widget Query Posts, Rarst answer - wordpress.stackexchange.com/questions/17093/… – bueltge Jun 13 '11 at 17:02
  • 2
    jquery, thickbox, etc certainly are the default UI of WP, just not the default UI of the widgets. Given that the original question is dealing with deficiencies of the standard widget UI, I think this is an elegant solution that still feels like WordPress. – Dan Gayle Jun 14 '11 at 19:15

Query Posts has most complex widget form that I know of. It is quite crowded, but still usable as for me.

Query Posts widget's form

Are you looking for something specific (in that case you should share some details on amount of types and controls widget will need to have) or really just generic info? If latter this would probably be better as community wiki.

  • Thanks Rarst. You're probably right about moving the post. The example you show definitely hits the mark for complexity! But its usability is quite low, and does exactly what I was hoping to avoid - there are no logical groupings of sections, no dividers, no headers. In short, it's just a kitchen sink of controls etc. I don't think this represents what I would consider "best practices" at all. – Tom Auger May 15 '11 at 18:29
  • I use that plugin as well, and it's scary beyond belief for anyone who doesn't already know how to use wp_query. As one of the most powerful widgets available, it's usability could use some significant improvement. – Dan Gayle Jun 14 '11 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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