Review Embed Widgets Usability

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
jtsnow's picture

My project is going great and is nearly complete, but one concern I have is the user interface. I am looking for ways to improve it. My project allows widgets to be created from Drupal content such as nodes, blocks, or views. Content must first be added as a "widget source" before it can be embedded in a widget. Widgets can be embedded in various formats such as IFrames and Google Gadgets, with more to come.

I have implemented the following features while editing a widget:
-Dynamic user interface using AHAH.
-Live preview of changes made to widget.
-Draggable table to re-order widget tabs.
-Views arguments can be input through UI. Some use autocomplete.

I welcome any suggestions or critiques of the current interface.

You may login to the demo site to test my project: http://deviable.com/widgets/

I am also planning to implement an interface where end-users (non-admins) can create their own widgets. Not as many settings will be available, so this interface will be more simple. If anyone has any suggestions for that interface, please let me know!

Thanks for your help!

John Snow

Comments

REALLY cool. Some comments.

dmitrig01's picture

I'll put these in whatever order, simply numbered so you can refer to them alter

  1. The "tab" adding should be ajaxy
  2. The "tab" removing should also be ajaxy
  3. IMHO The concept of tabs is flawed - I know it's a bit late to be saying this, but I think they should be sources placed within the widgets, arranged in tabs, in a panel, in a list or some other way.
  4. Are the sources pluggable with a hook or something?
  5. Are the "themes" pluggable? Do they come from currently enabled themes on the site? How does this work with color.module?
  6. The google gadgets configuration fieldset is mis-placed
  7. This could really benefit from being split out into tabs, and the add widget form could be multi-step
  8. Why is admin/build/embed-widgets/sources/add not admin/build/embed-widgets/sources-add
  9. "Allow users to add this source as a tab when customizing their widgets." <-- why would you not select this?
  10. IFrame should be iFrame or iframe
  11. For the colors on the widget form, could you have a farbtastic picker?
  12. On the list page, it could look nicer - how about removing the description column and replacing it with something like [title] <div class="description">[description]</div>
  13. On http://deviable.com/widgets/admin/build/embed-widgets/10/view, why do I see add source, add widget, and list tabs? that's a big usability flaw
  14. Under the view tab, you should have a subtab for each widget type

So, that's it for now, maybe I'll think up a few later.

Thanks for the suggestions.

jtsnow's picture

Thanks for the suggestions. I've thought of several of them already and I'll comment...

  1. I agree, but could not get this to work since the table the "tab" would be added too is draggable and sometimes contains autocomplete form elements. Adding a tab "ajaxily" to the table breaks the dragging and autocomplete features.
  2. Same.
  3. This can be easily solved. The current iFrame module simply themes the each source as a tab. It's just a matter of creating a template to arrange them as a panel, list, or whatever instead of as tabs.
  4. Yes.
  5. The themes do come from the currently enabled themes. No integration with color.module yet.
  6. I agree. All configuration options for add-on widget format modules are placed there. Put on to-do list.
  7. I agree. Working on a multi-step widget creation wizard right now.
  8. I haven't seen any best practice either way. Does it matter?
  9. An admin may wish to create a widget using certain sources that he does not want users to be able to use in their own widgets. OR a module may create sources using hook_widget(). Those sources may be primarily for that module's use in its widgets. It would probably be more useful to be able to select which roles can use the source.
  10. Ok.
  11. Yes. Just haven't gotten there yet.
  12. Put on to-do list.
  13. Put on to-do list.
  14. Put on to-do list.

No probs

dmitrig01's picture

for 1 and 2, you can just reload the whole draggable area as well. It should Just Work
3 - Glad to see it's possible, but can you implement a few samples?
5 - hmm, maybe can you create a hook_widget_themes? could it be possible to enable some themes but not make them show up in the list (with some config page?)
8 - you should do it how I said :-)

Also, where can I find API docs?

+1

rpfilomeno's picture

guys please add to the project issue queue please :D