This action might not be possible to undo. Are you sure you want to continue?
Availability 30 Essential Controls
February 4, 2009
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. I'm available for hire for short and long-term engagements. Email me to discuss your project or call me at (512) 203-7710.
My New Book
Purchase on Amazon
30 Essential Controls Ultimate guide to table UI patterns Designing for the iPhone 3G: Tips and Tools 6 Tips for a Great Flex UX: Part 4 Wire Frames for iPhone Web Application Design 12 Standard Screen Patterns Seek or Show: Two Design Paradigms for Lots of Data Flex 3 OmniGraffle Stencil 6 Tips for a Great Flex UXPart 1 Usable RIAs: The Top 50 Designs
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.
April 2010 March 2010 February 2010 December 2009 November 2009 October 2009
1 trong 17
8/3/2010 10:37 PM
Charts & Graphs 2 trong 17 8/3/2010 10:37 PM . Prototype/script. SproutCore. Backbase. Laszlo. MochaUI. iCarousel Viaspire Wireframes Magazine 02. Prototype/script. January 2008 Pages About 01. Silverlight and 12 Ajax frameworks and toolkits: ExtJS. Auto Suggest Blogroll Comtaste.aculo. Dojo. LivePipeUI.IT Mill. YUI. Silverlight. Info Design Patterns Janko at Warp Speed LooksGoodWorksWell merhl OtherInbox Semantic Studios Sofa. Backbase.30 Essential Controls « Theresa Neil http://theresaneil. Backbase.Design. JQuery.us.aculo.wordpress. JQuery. Google Web Toolkit. Dojo. MooTools. MooTools. Prototype/script. IT Mill.aculo. Carousel (variation as Coverflow) Coverflow MediaEvent Service’s Slideflow Supported by: Flex. MooTools. ITMill. Laszlo.us. Prototype/script. ExtJs.aculo.com/2009/02/04/30-essential-controls/ September 2009 August 2009 July 2009 April 2009 February 2009 January 2009 December 2008 April 2008 February 2008 The frameworks reviewed include: Flex. JQuery. RadControls for Silverlight 03. Google Web Toolkit. YUI. MochaUI.us. JQuery.us. Interfaces & Software Tech Crunch Carousel Prototype carousel widget Supported by: YUI.We Make It RIA Creating Passionate Users Designing Web Interfaces Functioning Form Google’s Auto-Complete Supported by: Flex.
YUI. JQuery (SWF/Chart). 04. slide drawer) Accordion Mutually exclusive collapsible panels showing status Disclosure arrows Mint. toggle views… Supported by: Flex. Measure Map. SilverLight. drill down. Laszlo. Backbase. JPowered. rolling windows. Flot.aculo. WebFX.us. PlotKit. Dundas. MooTools. Google Web Toolkit. AjaxMcGraph. Collapsible Panels (accordion.com uses disclosure arrows for summarizing and displaying accounts 3 trong 17 8/3/2010 10:37 PM . Plotr. OpenFlashCharts. AnyChart. JFreeChart. disclosure triangles. Dojo.com/2009/02/04/30-essential-controls/ Charts Advanced charting features like hover details.wordpress. MochaUI.30 Essential Controls « Theresa Neil http://theresaneil. Prototype/script.
Laszlo.us (accordion). Prototype/script. SproutCore (split pane). JQuery. Laszlo. Prototype/script. clearly displays all selections. ExtJs. alternate list box UI. 06. Backbase (accordion). IT Mill. or exclude a certain day 4 trong 17 8/3/2010 10:37 PM . ExtJs (called panels). MochaUI (split pane). IT Mill. editable) Select multiple LivePipe UI’s control takes less space and is easier to scan than an ocean of checkboxes Alternate listbox UI Best alternative for multi select in small spaces. MooTools (accordion). LivePipeUI Editable combobox Editable combobox allows for lookup and/or text entry Supported by: Flex.us. Google Web Toolkit (disclosure panel). RadControls for Silverlight. Combobox (select multiple. 05. Dojo. discontinuous dates. JQuery. Date Picker/Calendar (select range.30 Essential Controls « Theresa Neil http://theresaneil.wordpress.aculo. and provides an easy way to edit Supported by: Alternate Listbox UI. date/time combination) Advanced calendar Select a range. Backbase.aculo.ComboBox). RadControls for Silverlight (PanelBar and Sliding Panel). MooTools (MUI.com/2009/02/04/30-essential-controls/ Sliding panel Fluxiom uses a sliding panel instead of a dialog to show the selected photo’s details Supported by: Flex.
Backbase. IT Mill. MooTools. Scal built on Prototype. lightbox) Modal dialog Mint offers a modal for adding an account Modeless dialog Google Maps provides a modeless dialog for getting directions 5 trong 17 8/3/2010 10:37 PM .30 Essential Controls « Theresa Neil http://theresaneil.com/2009/02/04/30-essential-controls/ Date/time picker Select a date and time in a single control Supported by: Flex. more examples on Woork 07. Dialogs (modal. Laszlo.wordpress. light weight. dhtmlxCalendar. Silverlight. JQuery. keyboard accessible calendar. MochUI. ExtJS. Dojo. YUI.
Dojo. ExtJs. Backbase.30 Essential Controls « Theresa Neil http://theresaneil. Laszlo.com/2009/02/04/30-essential-controls/ Lightbox JQuery provides a lightbox plugin. demo 6 trong 17 8/3/2010 10:37 PM . a modal dialog that blacks out the parent screen Supported by: Flex(modal). MochaUI. Backbase (modal and modeless window). Prototype/script. Google Web Toolkit.aculo. JQuery (modal. Docking Dockable menu Campaign Manager by eyeblaster offers a pinned/unpinned menu for navigating between campaigns Supported by: Flex. Dojo. ExtJs. lightbox) . ExtJs (modal). YUI. MooTools.aculo. Dojo (modal and lightbox). modeless. Laszlo (modal and modeless). LivePipe UI. LivePipe UI. YUI( listed under Containers: Modal and Overlay). MochaUI.us. Google Web Toolkit. YUI. Laszlo. Silverlight (modal and lightbox). 09. Silverlight. 10. MochaUI. JQuery. LivePipe UI. 08.us. SproutCore (has a really nice example of each under ‘panes’). IT Mill. Dynamic Filter Dynamic table filtering Flex offers a filter feature that dynamically filters the results while the user types.wordpress. Prototype/script. Silverlight. Prototype/script.us. JQuery. Backbase. MooTools.aculo. Drag & Drop Manager Drag and drop ExtJS photo organizer demo Supported by: Flex. MooTools.
JQuery. Gauges (and other visual progress or status indicators) 7 trong 17 8/3/2010 10:37 PM . Dojo. Google Web Toolkit.us. Fisheye/ Spotlight Fisheye Apslab Fish-eye Lense Apply this concept to a dense chart or map for a truly useful feature.com/2009/02/04/30-essential-controls/ Dynamic column filtering Dynamic filtering can be implemented at the column level providing advanced filtering capabilities Supported by: Flex. MochaUI. Supported by: Flex. ExtJs. Silverlight 12. LivePipe UI. Feedback/ Status Feedback Gmail status message Supported by: Flex. Dojo. Silverlight 13. MooTools. JQuery. JQuery. YUI. Silverlight. Prototype/script.aculo.wordpress. Dojo . Laszlo. Backbase. MochaUI.aculo. MooTools. IT Mill. ExtJs (spotlight). ExtJs.30 Essential Controls « Theresa Neil http://theresaneil. Laszlo. YUI. Prototype/script. Backbase. IT Mill.us. Open Rico 11.
LivePipe UI. Prototype/script. Backbase.wordpress. Dojo. IT Mill. JQuery (SWF/Gauge). Mochui. YUI (use overlay container). Hover Action 8 trong 17 8/3/2010 10:37 PM . Silverlight 16. MochaUI. MooTools. JQuery.com/2009/02/04/30-essential-controls/ 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). Dundas 14.aculo. ExtJs.us.us. IT Mill. MooTools. AnyChart. MochaUI. Laszlo. Dojo. Supported by: Flex. Google Web Toolkit (use popup panel).aculo. Google Web Toolkit. Silverlight 15. Laszlo. Help Tip/ Quick Tip Quick Tip Picnik engages new users with some helpful advice More than just a tooltip. ExtJs (combined with GWT). Backbase. Hot Keys Hot keys Balsamiq Mockups has hot keys for frequent actions Supported by: Flex. these are fully formatted messages typically presented in a modeless dialog. Silverlight. LivePipe UI (use window control). Prototype/script.30 Essential Controls « Theresa Neil http://theresaneil.
Prototype/script. Prototype/script. Backbase. YUI. MochaUI.aculo. ExtJs. ExtJs. IT Mill.wordpress.us. MochaUI. Flickr provides inline editing Supported by: Flex (only in the grid). ExtJs. Hover Detail Hover detail Netflix hover details Supported by: Flex. Inline Edit Inline edit Instead of showing form fields in pages that are usually read (not edited).com/2009/02/04/30-essential-controls/ Hover action Instead of cluttering the screen with redundant actions. good post by Bill on hover actions and missed moments 17.aculo. Silverlight. MooTools (smart hover box). Dojo. Silverlight 18. Laszlo (only in the grid).30 Essential Controls « Theresa Neil http://theresaneil. Silverlight (only in the grid) 19. JQuery. Dojo. Laszlo. Progress Indicator/ Loading 9 trong 17 8/3/2010 10:37 PM . JQuery. YUI. Backbase (only in the grid). IT Mill. MooTools. Basecamp reveals the edit and delete actions onHover Supported by: Flex. Laszlo. MooTools. YUI (overlay). JQuery.us.
MochaUI. YUI. Backbase. ExtJs. IT Mill. Prototype/script. Dojo widget. LivePipe UI. Silverlight 22. Silverlight 20. MooTools . Laszlo. Laszlo. MooTools. Rating Star rating Graffletopia offers one-click star ratings for shared stencils Supported by: ExtJs extension.us. RadControls for Silverlight 23. Dojo. JQuery.aculo.us. Backbase. Prototype/script. MochaUI. the record locator lets you navigate through records in a dataset or skip to a specific record by name Paginator Typically used for paging through tables.us.wordpress. Backbase. Scoped Search Scoped search Like iTunes. example at Janko at warp speed. example from Vimeo’s help page Supported by: custom css and js code. Google Web Toolkit. Dojo. ExtJs. JQuery. RadControls for 10 trong 17 8/3/2010 10:37 PM . Prototype/script. Laszlo. JQuery. YUI. Starbox for Prototype/script. MooTools.aculo. Dojo. MochaUI. Google Web Toolkit. MochaUI 21. screens.aculo.com/2009/02/04/30-essential-controls/ Progress indicator Picnik loading indicator Supported by: Flex.us. or other result sets Supported by: Flex. allows for the optional selection of a category before entering free form search text. Record Locator/ Paginator Record locator Like the control in PDF Viewer. JQuery.aculo. MooTools. Slider Slider Innography provides sliders in their quick filter for refining results displayed on a chart Supported by: Flex.30 Essential Controls « Theresa Neil http://theresaneil. LivePipe UI. ExtJs. IT Mill.
ExtJs. Flex . JQuery plugin. Toolbar 11 trong 17 8/3/2010 10:37 PM . Backbase. Any Chart. and two more ones for Flex at Microcharts and Birdeye. Dojo. Visifire for Silverlight 25. examples from RetailMeNot.30 Essential Controls « Theresa Neil http://theresaneil. just like a desktop app. no paging. highlight the selected row. Silverlight 26. YUI. grouped) Scrolling table Endless scrolling.wordpress. Sparklines Sparklines Great way to show the “shape” or trend of data is a small space. Created by Edward Tufte. Don’t forget to accomodate keyboard navigation. editable. Google API. and only display an editor in the selected cell. Supported by: Nuby on Rails. example from ExtJS Supported by: Flex. Tree table Grouping by row. displays as a tree table.com and Google Analytics. Table/ Data Grid ( scrolling. Best practice. Laszlo.com/2009/02/04/30-essential-controls/ Silverlight 24. example from ExtJS Editable table Blist offers inline cell editing in their products.
com/2009/02/04/30-essential-controls/ Toolbar Provide actions in proximity to the object. View Toggle (buttons. YUI. Silverlight 29. ExtJs.aculo. MooTools. Dojo. WYSIWYG Editor/ Rich Text Editor 12 trong 17 8/3/2010 10:37 PM .us. MochaUI. Laszlo. JQuery. Google Web Toolkit. Prototype/script. Backbase. JQuery.wordpress. examples from SugarSync and Flickr Supported by: Flex. button bar) Toggle buttons Separate buttons for switching between graph and grid views Campaign Manager by eyeblaster Toggle button bar Single button bar for capturing binary choices Supported by: Flex. MooTools. YUI. RadControls for Silverlight 27. Backbase. Laszlo. Vertical Browser Vertical browser Apple’s vertical browser for exploring Dashboard widgets Supported by: custom code of multiple list boxes 28.30 Essential Controls « Theresa Neil http://theresaneil. MochaUI. Dojo.
split panels. ExtJs. Silverlight (silverZoom) Bonus. JQuery. and Peter Svensson who is a Dojo expert.30 Essential Controls « Theresa Neil http://theresaneil. MooTools (Joomla).us (zOOm). Thanks to Joonas Lehtinen of IT Mill. Silverlight Send me any corrections and/or additions. Supported by: Flex. Many of the frameworks that offer this feature include built in windows management. but frequently required when developing enterprise software and productivity web applications. Laszlo.Desktop Style Container Desktop style app OtherInbox built with SproutCore A desktop style container isn’t actually a control. and Darren James. Ryan Johnson of LivePipe. MochaUI. MochaUI. Silverlight 30. Dojo.wordpress. and fluid layout. Backbase. SproutCore.com/2009/02/04/30-essential-controls/ Rich text editor WordPress offers a a WYSIWYG editor for blogging Supported by: Flex. JQuery. Laszlo. Ads by Google 13 trong 17 8/3/2010 10:37 PM . Backbase. IT Mill. MochaUI. MooTools.aculo. Prototype/script. Zoom Zoom Zoom in on a certain spot. Laszlo. ExtJs (spotlight). JQuery. YUI. co-author of Ajax in Action. example from jQZoom Supported by: Flex. Google Web Toolkit. Update* Cody Lindley at jQuery provided a comprehensive list with links to code for jQuery support for all 30 controls. and I will upload an updated control/framework matrix. YUI.
.com/oversite Posted by theresaneil Filed in Ajax.taubler. 2009 at 8:08 pm Nice article ! WHAT about internal frames ? or that you put in containers category ? Reply John Koetsier Says: February 17...] Reply 30 Essential Controls for RIA Design | Konigi Says: February 18..] 2) Essential Controls: 30 controls for RIA design and development [. im starting on Flex and this is very useful. 2009 at 6:16 am This is too awesome for words.com/2009/02/04/30-essential-controls/ Advanced Wireframing Easily the most advanced wireframe and interaction design tool www. I need to know how to get all this components in one way. 2009 at 3:19 am We are very excited about SproutCore and would like to build a complex web application using SproutCore. Flex Components. 2009 at 6:25 am [.] Reply Kathleen Turner Says: February 26. 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 14 trong 17 8/3/2010 10:37 PM . Flex. User Interface Design 25 Comments » 25 Responses to “30 Essential Controls” Sundance Says: February 11. Usability.wordpress. 2009 at 8:34 pm Very nice work. If you have them. can you help me sending me a link of a tutorial or some to use them? Thanks! and good work! Reply Cristian Says: February 15.30 Essential Controls « Theresa Neil http://theresaneil. 2009 at 3:44 pm [.. you must must must read 30 essential controls by Theresa [.] you design anything web. I would French-kiss my sister for a set of these in an OmniGraffle stencil. Reply Mouth-watering UI tools for web designers : sparkplug 9 : john koetsier on technology & social media Says: February 17.. User Experience.. Ajax Components..
“30 Essential Controls” which.] Reply Erik Says: August 12....wordpress. the full set is described here.Z.] Reply Tim Anderson’s ITWriting . 2009 at 2:20 pm [. ¿Where can we get them to start using? Reply [link] 12 Standard Screen Patterns « Theresaneil’s Weblog Says: September 28.] Essential Controls: 30 controls for RIA design and development [.. [.30 Essential Controls « Theresa Neil http://theresaneil....] Reply DelveUI | NYC | Day 2 | iamfrankstallone Says: August 16..] She also has a matrix of essential controls showing which UI frameworks support them – page 21 above – though the slide only shows controls from A to D. 2010 at 10:43 am How can I get these tools? 16 trong 17 8/3/2010 10:37 PM ... Flex component developers. Sounds like a scrollbar Reply All Things Open Source » Blog Archive » Up-leveling the Flex User Interface Discussion Says: August 12.Tech writing blog » UI design patterns for Rich Internet Applications Says: August 11..] Reply Rayhan Kadar Says: August 18.] In: JQuery plugins 11 Aug 2009 Go to Source [... was kind enough to share her study findings.. 2009 at 6:27 am @B.] not getting on the blog scene until recently.. 2009 at 11:41 am Lovely designs..] Reply Shankar Says: February 23. [.. “…is the second article in a three part series on patterns and principles [.. this is a great place to start if you’re looking to sell/create custom controls in Flex. It includes a check list of major RIA frameworks so you can see which frameworks have which controls. 2009 at 2:43 pm [.com/2009/02/04/30-essential-controls/ 30 Essential Controls « Theresa Neil | Squico Says: August 11. 2009 at 7:25 pm [.] 30 Essential Controls – A list and examples of 30 controls/components that she thinks are critical for RIA user interface design. 2009 at 3:45 pm [.... 2009 at 8:33 pm [.
17 trong 17 8/3/2010 10:37 PM . Reply theresaneil Says: March 9. 2010 at 11:11 pm Would love to see this list updated for 2010. 2010 at 3:13 pm Would it be possible to include a matrix in the 2010 version? Features on one axis. 2010 at 3:49 pm The 2010 version is out at UXBooth http://bit.30 Essential Controls « Theresa Neil http://theresaneil. Notify me of new posts via email. Reply GoonMunster Says: March 9. Reply theresaneil Says: March 2. The list now numbers 43! I don’t think I actually started using 13 new controls.com. just paid closer attention to what I’m using and what I have seen in the most recent web apps. Blog at WordPress.com/2009/02/04/30-essential-controls/ Reply Shaun Says: March 1. Theme: Simpla by Phu. Ajax Products on the other.wordpress.ly/cG0WB7 and the matrix is available as a pdf Reply Leave a Reply Name (required) E-mail (required) Website Submit Comment Notify me of follow-up comments via email. 2010 at 2:25 am Glad you asked! It is coming up on UXBooth in the next week or so.
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue reading from where you left off, or restart the preview.