This is the second article in a three part series on patterns and principles for RIA design.
- Standard Screen Patterns: 12 patterns w/100 examples
- Essential Controls: 30 controls for RIA design and development
- Components for Commonly Requested Features: 15 patterns and examples
Every designer has a set of controls they rely on to communicate an effective UI. This is my library of essential controls.
Unfortunately, no single RIA framework offers all 30 of these. So I included a checklist of which frameworks provide each control. If you have an addition or correction, please e-mail me, and I will post an updated framework/control matrix.
The frameworks reviewed include: Flex, Laszlo, Silverlight and 12 Ajax frameworks and toolkits: ExtJS, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, SproutCore, LivePipeUI,IT Mill, Backbase.
01. Auto Suggest
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight.
02. Carousel (variation as Coverflow)
Supported by: YUI, Prototype/script.aculo.us, JQuery, ITMill, Backbase, iCarousel
Supported by: Flex, Prototype/script.aculo.us, JQuery, MooTools, RadControls for Silverlight
03. Charts & Graphs
Supported by: Flex, Laszlo, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery (SWF/Chart), MooTools, MochaUI, Backbase, SilverLight, AnyChart, Dundas, JPowered, JFreeChart, OpenFlashCharts, Flot, Plotr, PlotKit, WebFX, AjaxMcGraph, Measure Map.
04. Collapsible Panels (accordion, disclosure triangles, slide drawer)
Supported by: Flex, Laszlo, ExtJs (called panels), Dojo, Google Web Toolkit (disclosure panel), Prototype/script.aculo.us (accordion), JQuery, MooTools (accordion), MochaUI (split pane), SproutCore (split pane), IT Mill, Backbase (accordion), RadControls for Silverlight (PanelBar and Sliding Panel).
05. Combobox (select multiple, alternate list box UI, editable)
Supported by: Alternate Listbox UI, LivePipeUI
Supported by: Flex, Laszlo, ExtJs, Prototype/script.aculo.us, JQuery, MooTools (MUI.ComboBox), IT Mill, Backbase, RadControls for Silverlight.
06. Date Picker/Calendar (select range, date/time combination)
Supported by: Flex, Laszlo, ExtJS, Dojo, YUI, JQuery, Scal built on Prototype, MooTools, MochUI, IT Mill, Backbase, Silverlight, dhtmlxCalendar, keyboard accessible calendar, more examples on Woork
07. Dialogs (modal, light weight, lightbox)
Modal dialog Mint offers a modal for adding an account
Supported by: Flex(modal), Laszlo (modal and modeless), ExtJs (modal), Dojo (modal and lightbox), YUI( listed under Containers: Modal and Overlay), Prototype/script.aculo.us, JQuery (modal, modeless, lightbox) , SproutCore (has a really nice example of each under ‘panes’), MooTools, MochaUI, LivePipe UI, IT Mill, Backbase (modal and modeless window), Silverlight (modal and lightbox).
08. Docking
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, Backbase, Silverlight.
09. Drag & Drop Manager
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, Backbase, Silverlight.
10. Dynamic Filter
Dynamic column filtering Dynamic filtering can be implemented at the column level providing advanced filtering capabilities
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, JQuery, IT Mill, Backbase, Silverlight, Open Rico
11. Feedback/ Status
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, IT Mill, Backbase, Silverlight
12. Fisheye/ Spotlight
Apply this concept to a dense chart or map for a truly useful feature.
Supported by: Flex, ExtJs (spotlight), Dojo , Prototype/script.aculo.us, JQuery, MooTools, MochaUI, Silverlight
13. Gauges (and other visual progress or status indicators)
Gauges provide a concise visual summary in heads-up-display or other goal directed designs
Supported by: Flex (various plug-ins and Flex Charting), ExtJs (combined with GWT), Dojo, Google Web Toolkit, Prototype/script.aculo.us, JQuery (SWF/Gauge), MooTools, MochaUI, Silverlight, AnyChart, Dundas
14. Help Tip/ Quick Tip
More than just a tooltip, these are fully formatted messages typically presented in a modeless dialog.
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI (use overlay container), Google Web Toolkit (use popup panel), Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI (use window control), IT Mill, Backbase, Silverlight
15. Hot Keys
Supported by: Flex, Laszlo, Mochui, LivePipe UI, IT Mill, Backbase, Silverlight
16. Hover Action
Supported by: Flex, Laszlo, ExtJs, YUI, JQuery, MooTools, MochaUI, Backbase, Silverlight, good post by Bill on hover actions and missed moments
17. Hover Detail
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI (overlay), Prototype/script.aculo.us, JQuery, MooTools (smart hover box), IT Mill, Silverlight
18. Inline Edit
Supported by: Flex (only in the grid), Laszlo (only in the grid), ExtJs, Dojo, YUI, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase (only in the grid), Silverlight (only in the grid)
19. Progress Indicator/ Loading
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, IT Mill, Backbase, Silverlight
20. Rating
Supported by: ExtJs extension, Dojo widget, Starbox for Prototype/script.aculo.us, JQuery, MooTools , MochaUI
21. Record Locator/ Paginator
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, Backbase, Silverlight
22. Slider
Supported by: Flex, Laszlo, ExtJs, Dojo, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase, RadControls for Silverlight
23. Scoped Search
Supported by: custom css and js code, example at Janko at warp speed, RadControls for Silverlight
24. Sparklines
Supported by: Nuby on Rails, Any Chart, JQuery plugin, Flex , and two more ones for Flex at Microcharts and Birdeye, Google API, Visifire for Silverlight
25. Table/ Data Grid ( scrolling, editable, grouped)
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Backbase, Silverlight
26. Toolbar
Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, Backbase, RadControls for Silverlight
27. Vertical Browser
Supported by: custom code of multiple list boxes
28. View Toggle (buttons, button bar)
Supported by: Flex, Laszlo, Dojo, YUI, JQuery, MooTools, MochaUI, Backbase, Silverlight
29. WYSIWYG Editor/ Rich Text Editor
Supported by: Flex, Laszlo, Dojo, YUI, Google Web Toolkit, JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight
30. Zoom
Supported by: Flex, Laszlo, ExtJs (spotlight), Prototype/script.aculo.us (zOOm), JQuery, MooTools (Joomla), MochaUI, Silverlight (silverZoom)
Bonus- Desktop Style Container
A desktop style container isn’t actually a control, but frequently required when developing enterprise software and productivity web applications. Many of the frameworks that offer this feature include built in windows management, split panels, and fluid layout.
Supported by: Flex, Laszlo, ExtJs, YUI, JQuery, MochaUI, Backbase, SproutCore, Silverlight
Send me any corrections and/or additions, and I will upload an updated control/framework matrix.
Thanks to Joonas Lehtinen of IT Mill, Ryan Johnson of LivePipe, and Peter Svensson who is a Dojo expert, and Darren James, co-author of Ajax in Action.
Update* Cody Lindley at jQuery provided a
Very nice work, im starting on Flex and this is very useful. I need to know how to get all this components in one way. If you have them, can you help me sending me a link of a tutorial or some to use them?
Thanks! and good work!
Nice article !
WHAT about internal frames ?
or that you put in containers category ?
This is too awesome for words. I would French-kiss my sister for a set of these in an OmniGraffle stencil.
We are very excited about SproutCore and would like to build a complex web application using SproutCore. Our goal is to build an advanced “Thick” client browser based product to deliver a “desktop-like” User experience. Can you recommend a strong development group who has experience with SproutCore to help us create it or could you recommend someone to act as a consultant to help us select the right offshore development team and define the requirements correctly?
KT
For #22, I’ve been trying to find a toolkit that has the dual sliders for specifying a range. All the ones I’ve found are single sliders. Can you point me to a dual slider version like innography?
B.Z.- JQuery has a dual slider:
http://jqueryui.com/demos/slider/#range
thanks for sharing all these examples. a great resource you have here.
@theresaneil,
Thanks for that link… the jQuery control is definitely a dual slider. The slider I’m looking for needs to also allow you to click and drag from the middle. So let’s say you set the range from 50 to 150, you could slide it up from the middle and it would move both ends, say up to 70 to 170 simultaneously.
@B.Z.,
Sounds like a scrollbar
Lovely designs,
¿Where can we get them to start using?
😉
How can I get these tools?
Would love to see this list updated for 2010.
Glad you asked! It is coming up on UXBooth in the next week or so. The list now numbers 43! I don’t think I actually started using 13 new controls, just paid closer attention to what I’m using and what I have seen in the most recent web apps.
Would it be possible to include a matrix in the 2010 version?
Features on one axis, Ajax Products on the other.
The 2010 version is out at UXBooth http://bit.ly/cG0WB7
and the matrix is available as a pdf
COOL!, very useful and nice examples. I´m flex developer and looking for any samples, do you recommend any other?
greatigns..
I don’t understand what use have this list if it doesn’t have links to the controls examples, or anything like that
It is primarily for designers to raise awareness of “rich” UI controls, ones that have emerged as Ajax, Flex and other RIA technologies have emerged.
I provided an update last year on UX Booth with a matrix of the 25+ RIA frameworks/technologies showing which controls each supports and links to examples:
http://www.uxbooth.com/blog/essential-controls-for-web-applications/