30 Essential Controls

By Theresa Neil

As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section.

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.

30_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.

ria_frameworks

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

auto_recomend

Google’s Auto-Complete

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)

carousel_ex

Carousel Prototype carousel widget

Supported by: YUI, Prototype/script.aculo.us, JQuery, ITMill, Backbase, iCarousel

coverflow_ex1

Coverflow MediaEvent Service’s Slideflow

Supported by: Flex, Prototype/script.aculo.us, JQuery, MooTools, RadControls for Silverlight

03. Charts & Graphs

graphchart_wesabe

Charts Advanced charting features like hover details, drill down, rolling windows, toggle views…

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)

collapsible_accordion

Accordion Mutually exclusive collapsible panels showing status

disclosure_arrows_mint

Disclosure arrows Mint.com uses disclosure arrows for summarizing and displaying accounts

collapsible_sliding_fluxiom

Sliding panel Fluxiom uses a sliding panel instead of a dialog to show the selected photo’s details

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)

combobox_multiselect_livepipe1

Select multiple LivePipe UI’s control takes less space and is easier to scan than an ocean of checkboxes

combobox_multiselect_ex1

Alternate listbox UI Best alternative for multi select in small spaces, clearly displays all selections, and provides an easy way to edit

Supported by: Alternate Listbox UI, LivePipeUI

combobox_editable1

Editable combobox Editable combobox allows for lookup and/or text entry

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)

datepicker_jquery

Advanced calendar Select a range, discontinuous dates, or exclude a certain day

date_time_picker_ex3

Date/time picker Select a date and time in a single control

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)

dialog_modal1

Modal dialog Mint offers a modal for adding an account

dialog_modeless

Modeless dialog Google Maps provides a modeless dialog for getting directions

dialog_lightbox_jquery

Lightbox JQuery provides a lightbox plugin, a modal dialog that blacks out the parent screen

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

ria_frameworks

Dockable menu Campaign Manager by eyeblaster offers a pinned/unpinned menu for navigating between campaigns

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

drag_drop_extjsdrag_drop_extjs_drop

Drag and drop ExtJS photo organizer demo

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_filter_flex

Dynamic table filtering Flex offers a filter feature that dynamically filters the results while the user types, demo

dynamic_filter_rico 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

ria_frameworks

Feedback Gmail status message

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

fisheye_alpslab

Fisheye Apslab Fish-eye Lense

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)

gauge_citibank ria_frameworks

Gauge Thermometer gauge in RadControls for Silverlight

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

help_tip1

Quick Tip Picnik engages new users with some helpful advice

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

ria_frameworks

Hot keys Balsamiq Mockups has hot keys for frequent actions

Supported by: Flex, Laszlo, Mochui, LivePipe UI, IT Mill, Backbase, Silverlight

16. Hover Action

ria_frameworks

Hover action Instead of cluttering the screen with redundant actions, Basecamp reveals the edit and delete actions onHover

Supported by: Flex, Laszlo, ExtJs, YUI, JQuery, MooTools, MochaUI, Backbase, Silverlight, good post by Bill on hover actions and missed moments

17. Hover Detail

ria_frameworks

Hover detail Netflix hover details

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI (overlay), Prototype/script.aculo.us, JQuery, MooTools (smart hover box), IT Mill, Silverlight

18. Inline Edit

inline_edit_flickr

Inline edit Instead of showing form fields in pages that are usually read (not edited), Flickr provides inline editing

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

loading_picnik

Progress indicator Picnik loading indicator

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

rating_graffletopia

Star rating Graffletopia offers one-click star ratings for shared stencils

Supported by: ExtJs extension, Dojo widget, Starbox for Prototype/script.aculo.us, JQuery, MooTools , MochaUI

21. Record Locator/ Paginator

record_locator_lls

Record locator Like the control in PDF Viewer, the record locator lets you navigate through records in a dataset or skip to a specific record by name

paginator_yahoo

Paginator Typically used for paging through tables, screens, or other result sets

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, Backbase, Silverlight

22. Slider

slider_innography

Slider Innography provides sliders in their quick filter for refining results displayed on a chart

Supported by: Flex, Laszlo, ExtJs, Dojo, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase, RadControls for Silverlight

23. Scoped Search

scoped_search_vimeo

Scoped search Like iTunes, allows for the optional selection of a category before entering free form search text, example from Vimeo’s help page

Supported by: custom css and js code, example at Janko at warp speed, RadControls for Silverlight

24. Sparklines

sparklines_retailmenot_goodcouponsparklines_google_analytics

Sparklines Great way to show the “shape” or trend of data is a small space, examples from RetailMeNot.com and Google Analytics. Created by Edward Tufte.

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)

table_scrolling_extjs1

Scrolling table Endless scrolling, no paging, just like a desktop app, example from ExtJS

table_cell_editing_blist1

Editable table Blist offers inline cell editing in their products. Best practice, highlight the selected row, and only display an editor in the selected cell. Don’t forget to accomodate keyboard navigation.

table_grouping1

Tree table Grouping by row, displays as a tree table, example from ExtJS

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Backbase, Silverlight

26. Toolbar

toolbar_sugarsynctoolbar_flickr1

Toolbar Provide actions in proximity to the object, examples from SugarSync and Flickr

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, Backbase, RadControls for Silverlight

27. Vertical Browser

vertical_browser_apple

Vertical browser Apple’s vertical browser for exploring Dashboard widgets

Supported by: custom code of multiple list boxes

28. View Toggle (buttons, button bar)

view_toggle2

Toggle buttons Separate buttons for switching between graph and grid views Campaign Manager by eyeblaster

view_toggle_paypal

Toggle button bar Single button bar for capturing binary choices

Supported by: Flex, Laszlo, Dojo, YUI, JQuery, MooTools, MochaUI, Backbase, Silverlight

29. WYSIWYG Editor/ Rich Text Editor

wysiwyg_wordpress

Rich text editor WordPress offers a a WYSIWYG editor for blogging

Supported by: Flex, Laszlo, Dojo, YUI, Google Web Toolkit, JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight

30. Zoom

zoom_jqzoom

Zoom Zoom in on a certain spot, example from jQZoom

Supported by: Flex, Laszlo, ExtJs (spotlight), Prototype/script.aculo.us (zOOm), JQuery, MooTools (Joomla), MochaUI, Silverlight (silverZoom)

Bonus- Desktop Style Container

desktop_container_otherinbox

Desktop style app OtherInbox built with SproutCore

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 comprehensive list with links to code for jQuery support for all 30 controls.

121 Comments

  1. Wzorce projektowe « Everyday things in use Said,

    January 28, 2009 @ 8:19 am

    [...] for Rich Interaction“ AKTUALIZACJA Kolejny wpis o wzorcach projektowych tym razem o kontrolkach. Otagowano z:design patterns wzorce projektowe RIA « Dilbert na początek [...]

  2. Bert Lamb » links for 2009-01-29 Said,

    January 29, 2009 @ 1:03 am

    [...] 30 Essential Controls (tags: design web controls ajax gui ui) [...]

  3. WidGet Blog » Blog Archive » 30 Essential Controls Said,

    January 29, 2009 @ 2:36 am

    [...] original here: 30 Essential Controls Tags: 01-auto-suggest, 18-inline-edit, Amazon, announcement, Apple, apple widgets, editable, [...]

  4. GeekyCoder Said,

    January 29, 2009 @ 5:52 am

    That is very nicely summarized !
    thx…

  5. DotNetShoutout Said,

    January 29, 2009 @ 10:44 am

    30 Essential Controls…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  6. Dylan Said,

    January 29, 2009 @ 10:48 am

    Excellent article and resource, thanks for putting this together!

    For what it is worth, Dojo either has support or third-party demos for Coverflow, ComboBox HotKeys, HoverAction, ScopedSearch, Sparkline, VerticalBorwser, and Desktop style containers.

    Let me know if you would like links to examples of these features.

  7. Matt Wilson Said,

    January 29, 2009 @ 11:11 am

    Beautiful list of controls.

  8. billwscott Said,

    January 29, 2009 @ 4:56 pm

    @Dylan. Yes, feel free to post the links as that would be definitely helpful.

  9. Theresa Said,

    January 30, 2009 @ 7:32 am

    These guys took the list of 30 controls and pulled in examples of each from the JQuery framework. It would be a great resource if each framework/toolkit did the same :o )

    http://coliss.com/articles/build-websites/operation/design/ui-essential-controls-for-ria.html

  10. Dew Drop - January 30, 2009 | Alvin Ashcraft's Morning Dew Said,

    January 30, 2009 @ 8:46 am

    [...] 30 Essential Controls (Theresa Neil) – Tools for RIA development [...]

  11. Chris Griffith Said,

    January 30, 2009 @ 11:15 am

    The Carousel control is available to Flex via Yahoo!’s Astra Components (http://developer.yahoo.com/flash/astra-flash/carousel/) . Although a Flash Component, it can be integrated into a Flex based application with little issue.

  12. Alex Calara Said,

    January 30, 2009 @ 11:50 am

    jQuery does indeed support Alternate listbox UI, there’s a plugin:

    http://code.google.com/p/jquery-asmselect/

  13. Timothy Said,

    January 30, 2009 @ 12:14 pm

    Awesome list! Love that all the different JS frameworks are covered.

  14. Brandon Granger Said,

    January 30, 2009 @ 7:08 pm

    Awesome article.

  15. Lachlan Said,

    January 30, 2009 @ 7:13 pm

    Quite interesting. Though it may be more helpful if you combined all of your findings into a table, for each navigation.

  16. links for 2009-01-30 « Mandarine Said,

    January 30, 2009 @ 8:06 pm

    [...] 30 Essential Controls (tags: form usability webdesign inspiration) [...]

  17. Bill Scott Said,

    January 30, 2009 @ 10:25 pm

    @Lachlan,

    Absolutely. If I am not mistaken, Theresa is working on that in an upcoming article.

  18. Balaji Said,

    January 30, 2009 @ 11:26 pm

    A very nice collection Theresa,

    May I know from where you got to know that Flex supports ZoomTo (Zoom in on a certain spot) option ?
    Could you please share me that links ?

    Thank you.
    Regards
    Balaji

  19. Dhaval shah Said,

    January 31, 2009 @ 7:15 am

    Great !!

    Thanks a Lot for sharing this!!

  20. links for 2009-01-31 | Visualrinse | Design and Development by Chad Udell Said,

    January 31, 2009 @ 3:04 pm

    [...] del.icio.us 30 Essential Controls for Web Interfaces Shades of Gray: Wireframes as Thinking Device 22 Most Used Free Fonts By Professional Designers [...]

  21. Speedlinking 19 [25 a 31 de Janeiro] Said,

    February 1, 2009 @ 11:02 am

    [...] 30 Essential Controls [Design Web [...]

  22. Janko Said,

    February 2, 2009 @ 2:49 am

    Great list, thanks for including my tutorial

  23. Bohdan Said,

    February 4, 2009 @ 1:25 am

    Well, I wouldn’t say the support of some particular control is an important part of the UI framework. What is more important for me is the support for creating new ones and extending existing ones, and especially combining them together in a natural painless manner. And this is hardly supported by many of the frameworks.

    What I find even more “fascinating” that already for years there is no innovation in UI development. All of the controls are old an heary, except probably some “cool” animation added, scratched by all the frameworks from old and heary OS’es. I barely see any research/improvement towards the effectiveness, usability and user friendliness, which is a shame of course…

  24. Ajaxian » Designing Web Interfaces with Bill Scott and Theresa Neil Said,

    February 4, 2009 @ 3:05 am

    [...] are some really interesting posts on the site, such as 30 Essential Controls. Theresa has been pinging the major frameworks and will be posting a matrix of coverage by the [...]

  25. RCarter Said,

    February 4, 2009 @ 3:41 am

    Great list!
    Why not considering ZK?

  26. Aaron Peters Said,

    February 4, 2009 @ 5:00 am

    Very nice, thanks a lot.

    (adding to Delicious)

  27. Ajax Girl » Blog Archive » Designing Web Interfaces with Bill Scott and Theresa Neil Said,

    February 4, 2009 @ 5:27 am

    [...] are some really interesting posts on the site, such as 30 Essential Controls. Theresa has been pinging the major frameworks and will be posting a matrix of coverage by the [...]

  28. My Bad Attitude » Ajaxian » Designing Web Interfaces with Bill Scott and Theresa Neil Said,

    February 4, 2009 @ 6:05 am

    [...] Also check out http://designingwebinterfaces.com/essential_controls [...]

  29. Designing Web Interfaces | The OSM Blog Said,

    February 4, 2009 @ 6:47 am

    [...] from the book by the same name. It’s written by Bill Scott and Theresa Neil. The website is a treasure trove of information that is well worth subscribing to. The slideshow below is based [...]

  30. Vinicius Said,

    February 4, 2009 @ 8:09 am

    Congratulations. Great job!
    Thanks a lot for your research!

  31. Theresa Neil Said,

    February 4, 2009 @ 9:25 am

    ZK looks like a great framework. I had never heard of it. Check out their demo. http://zkoss.org/

  32. Theresa Neil Said,

    February 4, 2009 @ 9:31 am

    All I can find is the Pan/Zoom option:
    http://www.adobe.com/devnet/flex/samples/fig_panzoom/

    You can double click on the spot you wish to zoom in on, or use the zoom slider.

  33. slabounty Said,

    February 4, 2009 @ 9:42 am

    Once again, well done. This is a great list, thanks for putting it together.

  34. jason olmsted Said,

    February 4, 2009 @ 10:10 am

    Correction for
    07. Dialogs (modal, light weight, lightbox)

    Flex offers modal and modeless dialog boxes. From the Flex docs, http://livedocs.adobe.com/flex/3/langref/, for the PopUpManager class, addPopUp() method:

    public static function addPopUp(window:IFlexDisplayObject, parent:DisplayObject, modal:Boolean = false, childList:String = null):void

    Modeless is actually the default behavior.

  35. Nick Said,

    February 4, 2009 @ 12:01 pm

    Great article, thanks for compiling this!

    BTW, some of the hyperlinks are not valid URLs, including the links on items #16, #17 (the URI is mangled a bit)

  36. BarelyBlogging » Blog Archive » links for 2009-02-04 Said,

    February 4, 2009 @ 4:09 pm

    [...] 30 Essential Controls (tags: design ui webdesign patterns designpatterns) [...]

  37. Mark Said,

    February 4, 2009 @ 5:55 pm

    You missed my favorite framework: ZK :-(

  38. Brian Said,

    February 4, 2009 @ 7:11 pm

    Great list! I would like to add a couple things tho, you missed one of my favorite grids, FlexiGrid (jQuery plugin). You also listed wordPress as using a WYSIWYG editor, it uses TinyMCE which is not part of any jscript library.

  39. Viaweb Blog » 30 Essential Controls Said,

    February 5, 2009 @ 1:49 am

    [...] implementation throughout many of the websites that most of use regularly: read it all on http://designingwebinterfaces.com/essential_controls. Posted on February 5, 2009 [...]

  40. N GowriSankar Said,

    February 5, 2009 @ 2:10 am

    Handy reference, no doubt !!! Thanks a ton for sharing..

  41. Rakesh Said,

    February 5, 2009 @ 1:16 pm

    Great article! really helpful.

  42. Sean Nieuwoudt Said,

    February 6, 2009 @ 12:06 am

    Extjs is the toughest thing I’ve ever had a to learn.

    I WILL NEVER use it out of my own free will again.

    Thanks for the post though.

  43. Antonio Said,

    February 6, 2009 @ 12:44 am

    Very nice,
    ottimo post.

    Ciao Italia

  44. Designing Rich Web Interfaces | Overall | Fritz Thomas Said,

    February 6, 2009 @ 2:27 am

    [...] ajax) There is also a Web Site about the new book: http://designingwebinterfaces.com with a little comparison of the essential controls needed in an web application and which JS Librarys have implemented it so far and [...]

  45. Jared Jurkiewicz Said,

    February 6, 2009 @ 7:56 am

    Good article, but it has some comparison errors in it. When looking over it, I noticed that it failed to indicate Dojo has support for some of those features:

    ComboBox has been supported in dojo since 0.4. It currently has several varients of this sort of widget. See:

    http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/_autoComplete.html?testWidget=dijit.form.ComboBox
    http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/_autoComplete.html?testWidget=dijit.form.FilteringSelect
    http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_MultiSelect.html

    Also, Carousel … Dojo has one as well, its just called ThumbnailPicker:
    http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/image/tests/test_ThumbnailPicker.html

    Sparklines. Dojo has this too in charting. It has been there since 1.1.
    http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_sparklines.html

  46. Ennuyer.net » Blog Archive » 2009-02-07- Today’s Ruby/Rails Reading Said,

    February 6, 2009 @ 4:29 pm

    [...] 30 Essential Controls [...]

  47. Theresa Neil Said,

    February 6, 2009 @ 7:19 pm

    Hi, Thanks for letting us know. I’ll make sure to correct it in the control/framework matrix we’ll post in the next couple of weeks.

  48. Goni Said,

    February 6, 2009 @ 9:13 pm

    能给我发一份么
    cuiyan1986713@163.com
    谢谢~~:)

  49. Designing Web Interfaces with Bill Scott and Theresa Neil | Guilda Blog Said,

    February 7, 2009 @ 3:13 am

    [...] are some really interesting posts on the site, such as 30 Essential Controls. Theresa has been pinging the major frameworks and will be posting a matrix of coverage by the [...]

  50. Emir Said,

    February 7, 2009 @ 1:19 pm

    How about some links to those controls ?

  51. cssrain Said,

    February 9, 2009 @ 2:13 am

    woo,very nice.

  52. Oluwasogo Said,

    February 9, 2009 @ 3:39 am

    Jquery is obviously the king……. Hail the king….lol

  53. Max Design - standards based web design, development and training » Some links for light reading (10/2/09) Said,

    February 10, 2009 @ 11:04 am

    [...] 30 Essential Controls [...]

  54. Kevin Said,

    February 11, 2009 @ 10:58 am

    Here is a spreadsheet comparison of the different controls.

    http://spreadsheets.google.com/pub?key=pBfVAoH8Id5gUtOJARpxmfA

  55. Josh Said,

    February 11, 2009 @ 6:37 pm

    YUI does support sliders:

    http://developer.yahoo.com/yui/slider/

  56. links for 2009-02-12 | The World According to Buchs Said,

    February 12, 2009 @ 1:33 pm

    [...] 30 Essential Controls (tags: ui design patterns) [...]

  57. Constructive Visual Said,

    February 18, 2009 @ 3:50 am

    Thanks, this article was really helpful developing the interface for my website.

  58. Methink.com - Ruby on Rails Web Development & Consulting: UI Design Patterns « Said,

    February 18, 2009 @ 5:41 pm

    [...]   - 30 Essential Controls [...]

  59. links for 2009-01-31 | Iona.LABS Said,

    February 19, 2009 @ 8:28 am

    [...] 30 Essential Controls for Web Interfaces Here is a great list of controls/patterns for designing web interfaces for RIA or other web apps. (tags: webdesign reference UI patterns) See the original post here at Visualrinse | Design and Development by Chad Udell [...]

  60. Web Design Interfaces | Herbert Mühlburger's Weblog Said,

    February 23, 2009 @ 12:48 am

    [...] have found two great posts on web design interfaces. The first one deales with 30 essential controls used in web interfaces. The second one descirbes 15 common components used in web user interface [...]

  61. 웹사이트에서 사용되는 30개의 필수 컨트롤들 | 웹 개발자 아빠의 이야기 Said,

    February 25, 2009 @ 4:08 pm

    [...] “30 Essential Controls” 이곳에 웹사이트에서 사용되는 30개의 필수 컨트롤들에 대해 자세히 설명해 주고 있는것을 발견했습니다. 영어로 되어 있지만 상당히 좋은 정보입니다. 다양한 JavaScript 라이브러리들과 Flex, Silverlight 등 웹에서 사용되는 대부분의 클라이언트 환경에대해 정리가 되어 있습니다. [...]

  62. Webbdesigner Said,

    February 28, 2009 @ 9:04 am

    Thank you for this thorough summary of web application controls, especially the checklist for framework support became a must-have!

  63. 6 Tips for a Great Flex UX: Part 3 Said,

    March 3, 2009 @ 1:30 pm

    [...] and even easier to get comfortable using the product because it uses a standard screen patterns and common controls. Every detail has been accounted for. Notice the visual design that makes it clear that the tasks [...]

  64. 30 controlli javascript essenziali | sastgroup.com Said,

    March 16, 2009 @ 5:07 am

    [...] http://designingwebinterfaces.com/essential_controls [...]

  65. 30 controlli javascript essenziali Said,

    March 16, 2009 @ 4:12 pm

    [...] Link http://designingwebinterfaces.com/essential_controls [...]

  66. OtherWebGuy Said,

    March 23, 2009 @ 4:27 am

    For 02. Carousel, there is a very nice script called SlideItMoo that implements a carousel-style image list using MooTools. I realize that MooTools is already listed under the “Coverflow” portion of that entry, but it should probably be listed under the “Carousel” portion, as well. Here’s a link. I am currently working on implementing this on my own site.
    http://www.php-help.ro/mootools-12-javascript-examples/slideitmoo-v11-image-slider/

    Thanks for the great list. It would be nice to find links to tutorials or scripts that actually implement these controls, but I suppose that’s a post for another day. Thank you.

  67. This is Tyler Fitch » Blog Archive » links for 2009-03-31 Said,

    March 31, 2009 @ 10:30 pm

    [...] 30 Essential Controls (tags: webdesign design ui gui reference interface WEB webdev ajax javascript jquery) [...]

  68. 6 Tips for a Great Flex UX: Part 4 « Theresaneil’s Weblog Said,

    April 22, 2009 @ 9:58 am

    [...] 3 includes a wide range of controls. Unfortunately, it doesn’t have all of the Essential Controls I use for RIA design. But fortunately, talented and industrious Flex developers have created [...]

  69. Bhishma Said,

    April 25, 2009 @ 3:51 am

    “02. Carousel (variation as Coverflow)” is supported by Java FX:

    http://www.javafx.com/samples/Carousel/index.html
    http://www.javafx.com/samples/DisplayShelf/index.html

    Thx.

  70. links for 2009-04-29 « My Weblog Said,

    April 29, 2009 @ 8:05 pm

    [...] 30 Essential Controls (tags: usability design) Possibly related posts: (automatically generated)What I bookmarked todayDaily Bookmarks 04/24/2008Most detailed pictures of earth, ever !! Comments (0) [...]

  71. Tagz | "30 Essential Controls" | Comments Said,

    May 16, 2009 @ 8:57 am

    [...] [upmod] [downmod] 30 Essential Controls (designingwebinterfaces.com) 2 points posted 3 months, 1 week ago by SixSixSix tags design [...]

  72. YUI提供的RIA控件 « Kejun’s Blog Said,

    June 1, 2009 @ 6:55 am

    [...] Bill Scott和Theresa Neil的这本书Design Web Interfaces: Principles and Patterns for Rich Interactions定义了Web界面上交互应用的设计原则和模式,这对设计师、产品经理和前端工程师都有重要的参考意义。Theresa Neil列出了30个最基本控件。像系统控件一样,这些控件可以称之为RIA控件。 [...]

  73. 30 Essential Controls | Simone D'Amico Said,

    June 5, 2009 @ 3:08 pm

    [...] 30 Essential Controls posted under jQuery, javascript Post correlati: 70 New, Useful AJAX And JavaScript Techniques [...]

  74. 40+ Helpful Resources On User Interface Design Patterns | Developer's Toolbox | Smashing Magazine Said,

    June 15, 2009 @ 3:05 pm

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  75. 40+ Helpful Resources On User Interface Design Patterns Said,

    June 15, 2009 @ 3:37 pm

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  76. Wordpress Blog Services - 40+ Helpful Resources On User Interface Design Patterns Said,

    June 15, 2009 @ 4:12 pm

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  77. Video | ClickLogin Web Design Said,

    June 15, 2009 @ 5:43 pm

    [...] 30 Essential Controls This essay is the contention upon design patterns concerned in the origination of RIA’s. It talks about critical user controls which concentration designers can take value of to obviously imply actions which they’re means to perform when interfacing with an application. [...]

  78. Catalogo de controles UI(ui design patterns) « Jorge Dieguez Blog Said,

    June 15, 2009 @ 9:55 pm

    [...] 30 Essential Controlshttp://designingwebinterfaces.com/essential_controls [...]

  79. Catalogo de controles UI(ui design patterns) - Jorge Dieguez Blog Said,

    June 15, 2009 @ 9:56 pm

    [...] 30 Essential Controls http://designingwebinterfaces.com/essential_controls Posted: 16/6/2009 7:56 por Jorge Dieguez | con no comments Archivado en: Diseño Grafico,Diseño Grafico,UI Deja tu comentario [...]

  80. 40+ Helpful Resources On User Interface Design Patterns - Myfreepedia.com Said,

    June 15, 2009 @ 10:10 pm

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  81. 40+ Helpful Resources On User Interface Design Patterns | Programming Blog Said,

    June 16, 2009 @ 3:12 pm

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  82. 30 современных элементов управления | Usability.by Said,

    June 21, 2009 @ 9:01 pm

    [...] Неил собрала библиотеку из 30 современных и популярных элементов управления и указала в каком фреймворке можно найти их [...]

  83. Larry Kyrala Said,

    June 29, 2009 @ 9:09 am

    I made a visualization of your list comparing the various frameworks. Feel free to improve the data. http://manyeyes.alphaworks.ibm.com/manyeyes/visualizations/comparison-of-the-number-of-essentia (this was intentionally truncated by manyeyes, sorry)

  84. Bill Scott Said,

    June 29, 2009 @ 10:20 pm

    Larry. That’s cool! Thanks for sharing.

  85. XanelaWeb » Controles Web Said,

    July 3, 2009 @ 12:19 pm

    [...] http://designingwebinterfaces.com/essential_controls Comparte este artículo: [...]

  86. 30 Essential Controls Said,

    August 2, 2009 @ 3:48 pm

    [...] Go here to see the original: 30 Essential Controls [...]

  87. Twitter Trackbacks for 30 Essential Controls [designingwebinterfaces.com] on Topsy.com Said,

    August 30, 2009 @ 9:09 am

    [...] 30 Essential Controls designingwebinterfaces.com/essential_controls – view page – cached how to treat Herpes labialis online order clomid drugstore women’s health buy acyclovir online pet meds online free avi download movies hdtv torrent — From the page [...]

  88. 50 Most Usable RIAs - Partytow Said,

    September 8, 2009 @ 4:40 pm

    [...] The information architecture of this RIA is rock solid- everything falls into place from there. You have to sign up for the demo and play with this to really experience how nice it is. Notice the attention to detail at every level: blank state screens, great copy, color coded navigation, rich controls. [...]

  89. Websites with Flex Components « NIM ReFLEXtions Said,

    October 15, 2009 @ 4:55 am

    [...] Essential Controls [...]

  90. Anparasu Said,

    October 27, 2009 @ 3:17 am

    Thanks for the list

  91. Damien Boucquey Said,

    December 1, 2009 @ 8:36 am

    I just used IT Mill (Vaadin) framework.

    It has suppoprt for Data Grid and has a Paginating Control in the incubator

  92. 40+ Helpful Resources On User Interface Design Patterns « Web Design Post Said,

    December 10, 2009 @ 1:37 am

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  93. 40+ Helpful Resources On User Interface Design Patterns « .. :: Welcome to Veeramachaneni's Blog :: .. Said,

    December 10, 2009 @ 2:36 am

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  94. Biz.tokunori.jp » UI Patterns Said,

    January 2, 2010 @ 6:22 am

    [...] 30 Essential Controls [...]

  95. UX Links Said,

    February 3, 2010 @ 7:44 am

    [...] 30 Essential Controls [...]

  96. UI/UX Design Pattern Repository « Techdew Said,

    February 9, 2010 @ 1:31 pm

    [...] Best web application UI’s from around the web http://www.uizen.com/ 30 essential controls http://designingwebinterfaces.com/essential_controls [...]

  97. Rich Internet Application Screen Design - Programming Blog Said,

    February 20, 2010 @ 11:36 am

    [...] team about what is feasible with the chosen framework, timeline, and budget. We use these 30 Essential Controls as our starting point for these [...]

  98. And the winner is… « Rakesh Menon Said,

    February 21, 2010 @ 7:40 pm

    [...] I think that makes sense. If we have stable core library with CSS support, we can create most of common controls without putting much effort. Yes, we need platform support for Popup and complex components such as [...]

  99. And the winner is… « Java, JavaFX and beyond… Said,

    February 21, 2010 @ 7:53 pm

    [...] I think that makes sense. If we have stable core library with CSS support, we can create most of common controls without putting much effort. Yes, we need platform support for Popup and complex components such as [...]

  100. Social bookmarking Said,

    February 24, 2010 @ 1:09 pm

    What an excellent resource and article… Wonder how long take you to put things together… Such a handy page for front end developer

  101. 12 Standard Screen Patterns Said,

    February 25, 2010 @ 6:58 am

    [...] Essential Controls: 30 controls for RIA design and development [...]

  102. A short list of UX design patterns resources I found this week. User Experience (UX) - Expert heuristic evaluations, website coaching, & usability testing - Normal Modes Normal Modes Said,

    February 26, 2010 @ 5:49 pm

    [...] 30 Essential Controls [...]

  103. drilho Said,

    March 6, 2010 @ 1:39 pm

    Great knowledge shared. Thank you so much Theresa!!!

  104. rixx Said,

    March 7, 2010 @ 4:52 am

    Yup, I think ZK should be included here.

  105. keisera Said,

    March 7, 2010 @ 4:54 am

    Yeah, I agree. I used zk for a couple of months and it went well.
    visit http://zkoss.org/ Enjoy :)

  106. 43 Essential Controls for Web Applications | UX Booth Said,

    March 9, 2010 @ 6:35 am

    [...] [...]

  107. uberVU - social comments Said,

    March 11, 2010 @ 3:24 am

    Social comments and analytics for this post…

    This post was mentioned on Twitter by simon_hazout: #Designing #Web #Interfaces – 30 Essential #Controls | http://is.gd/15AkH…

  108. Free I Share 分享资源 分享快乐 » Blog Archive » 12 Standard Screen Patterns Said,

    April 17, 2010 @ 8:01 pm

    [...] Essential Controls: 30 controls for RIA design and development [...]

  109. homunq Said,

    April 27, 2010 @ 10:02 am

    You’ve left qooxdoo out of your list of frameworks. At a quick glance, it supports at least: carousel, collapsable panels, editable combobox, date picker, dialogs, dragndrop, status, gauges, quick tip, progress indicator, slider, table, WYSIWIG, and desktop-style container. Probably it supports more, but I can’t vouch for all of them.

  110. Rock Music Said,

    June 3, 2010 @ 2:17 am

    What a great list that you have.
    Thanks

  111. Geek is a Lift-Style. » 40 Helpful Resources On User Interface Design Patterns Said,

    June 21, 2010 @ 3:10 am

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  112. style guide for applicaitons « ru content focused Said,

    June 21, 2010 @ 4:33 pm

    [...] Designing Web Interfaces [...]

  113. 40 +有用的用户界面设计模式资源 | 努力超越,做好前端 Said,

    July 28, 2010 @ 4:15 am

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  114. jQuery UI without HTML | The Largest Forum Archive Said,

    August 6, 2010 @ 5:44 am

    [...] reason I’m taking jQuery is because it is the only web framework that supports all 30 essential controls (given with enough [...]

  115. UI patterns : une bonne ressource | Ergonautes Said,

    September 18, 2010 @ 4:59 pm

    [...] Et en particulier sur 30 Essential Controls [...]

  116. 30 Essential Controls | UX Booth Said,

    October 15, 2010 @ 5:56 pm

    [...] Essential Controls | UX Booth UX Booth30 Essential ControlsShare This Share Browse UX BoothPreviousNext Close This function resizeIframe() { var height = [...]

  117. 30 Essential Controls | UX Booth Said,

    October 15, 2010 @ 5:56 pm

    [...] Essential Controls | UX Booth UX Booth30 Essential ControlsShare This Share Browse UX BoothPreviousNext Close This function resizeIframe() { var height = [...]

  118. Costas Said,

    November 6, 2010 @ 5:54 am

    I am not in any way connected with the creators of the ZK framework other than being so impressed… Till now i have evaluated many frameworks and i have never seen something like this. You must see and play with it to believe it. The ability to encapsulate all required code inside a ZUL (a page) is so great making their community so active. Difficult problems are solved in no time just by posting a simple snippet. OK. I will say no more but you should have mention this great framework.
    Thanks.

  119. 40+ Helpful Resources On User Interface Design Patterns – Smashing Magazine | User Interface Design Said,

    November 17, 2010 @ 4:50 pm

    [...] 30 Essential Controls This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application. [...]

  120. 12个标准屏幕设计模式 | DeanYan.com Said,

    November 21, 2010 @ 7:43 am

    [...] 必备控件:RIA设计和开发的30个控件 [...]

  121. Information Development : Dovetail Support Suite Provides a Rich User Experience – Part I Said,

    December 2, 2010 @ 9:12 am

    [...] Theresa Neil’s original article says that no single application uses all RIA controls. Designers choose the best ones for their [...]

Trackback URL