30 Essential Controls « Theresa Neil http://theresaneil.wordpress.

com/2009/02/04/30-essential-controls/

THERESA NEIL
Availability
I'm available for hire for

30 Essential Controls short and long-term

engagements. Email me to
discuss your project or call
February 4, 2009 me at (512) 203-7710.

This is the second article in a three part series on patterns and principles for RIA design.
My New Book
Standard Screen Patterns: 12 patterns w/100 examples Purchase on Amazon
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.

Top Posts
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 UX-

Part 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.
Archives
April 2010

March 2010

February 2010

December 2009

November 2009

October 2009

1 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.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, Laszlo, Silverlight and 12 Ajax frameworks and toolkits: January 2008
ExtJS, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI,
SproutCore, LivePipeUI,IT Mill, Backbase.
Pages
About
01. Auto Suggest
Blogroll
Comtaste- We Make It RIA

Creating Passionate Users

Designing Web Interfaces

Functioning Form

Google’s Auto-Complete Info Design Patterns

Supported by: Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, Janko at Warp Speed
JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight.
LooksGoodWorksWell

merhl
02. Carousel (variation as Coverflow)
OtherInbox

Semantic Studios

Sofa- Design, Interfaces &

Software

Tech Crunch
Carousel Prototype carousel widget
Viaspire
Supported by: YUI, Prototype/script.aculo.us, JQuery, ITMill, Backbase, iCarousel
Wireframes Magazine

Coverflow MediaEvent Service’s Slideflow

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

03. Charts & Graphs

2 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

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)

Accordion Mutually exclusive collapsible panels showing status

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

3 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.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, 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)

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, clearly displays all
selections, and provides an easy way to edit

Supported by: Alternate Listbox UI, LivePipeUI

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)

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

4 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

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)

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.wordpress.com/2009/02/04/30-essential-controls/

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

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 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 table filtering Flex offers a filter feature that dynamically filters the results while the
user types, demo

6 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.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, Laszlo, ExtJs, Dojo, YUI, JQuery, IT Mill, Backbase, Silverlight, Open Rico

11. Feedback/ Status

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 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)

7 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.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), 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

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

Hot keys Balsamiq Mockups has hot keys for frequent actions

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

16. Hover Action

8 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

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

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 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

9 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

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

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 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 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 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 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

10 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

Silverlight

24. Sparklines

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)

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

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.

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

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

26. Toolbar

11 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

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’s vertical browser for exploring Dashboard widgets

Supported by: custom code of multiple list boxes

28. View Toggle (buttons, 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, Laszlo, Dojo, YUI, JQuery, MooTools, MochaUI, Backbase, Silverlight

29. WYSIWYG Editor/ Rich Text Editor

12 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

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

Ads by Google

13 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

Advanced Wireframing
Easily the most advanced wireframe and interaction design tool
www.taubler.com/oversite

Posted by theresaneil
Filed in Ajax, Ajax Components, Flex, Flex Components, Usability, User Experience, User Interface
Design

25 Comments »

25 Responses to “30 Essential Controls”

Sundance Says:

February 11, 2009 at 8:34 pm

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!

Reply

Cristian Says:

February 15, 2009 at 8:08 pm

Nice article !

WHAT about internal frames ?

or that you put in containers category ?

Reply

John Koetsier Says:

February 17, 2009 at 6:16 am

This is too awesome for words. 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, 2009 at 6:25 am

[...] you design anything web, you must must must read 30 essential controls by Theresa [...]

Reply

30 Essential Controls for RIA Design | Konigi Says:

February 18, 2009 at 3:44 pm

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

Reply

Kathleen Turner Says:

February 26, 2009 at 3:19 am

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

14 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

consultant to help us select the right offshore development team and define the requirements
correctly?
KT

Reply

UI design patterns libraries « Rod Motta’s Blog Says:

March 20, 2009 at 8:23 pm

[...] http://theresaneil.wordpress.com/2009/02/04/30-essential-controls [...]

Reply

B.Z. Says:

April 13, 2009 at 7:58 pm

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?

Reply

theresaneil Says:

April 22, 2009 at 10:52 pm

B.Z.- JQuery has a dual slider:

http://jqueryui.com/demos/slider/#range

Reply

tim Says:

April 24, 2009 at 2:15 pm

thanks for sharing all these examples. a great resource you have here.

Reply

B.Z. Says:

April 24, 2009 at 5:48 pm

@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.

Reply

Comparação de Frameworks Javascript - Chronosbox Says:

July 20, 2009 at 6:20 am

[...] concorrentes é uma questão de saber procurar. Para facilitar um pouco a busca aqui ficam
2 links: http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/ [...]

Reply

Up-leveling the Flex User Interface Discussion | Ryan Stewart – Rich Internet Application
Mountaineer Says:

August 11, 2009 at 8:10 am

[...] 30 Essential Controls – A list and examples of 30 controls/components that she thinks are
critical for RIA user interface design. It includes a check list of major RIA frameworks to see
which frameworks have which controls. Flex component developers, this is a great place to start
if you’re looking to sell/create custom controls in Flex. [...]

Reply

15 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

30 Essential Controls « Theresa Neil | Squico Says:

August 11, 2009 at 2:20 pm

[...] In: JQuery plugins 11 Aug 2009 Go to Source [...]

Reply

Tim Anderson’s ITWriting - Tech writing blog » UI design patterns for Rich Internet
Applications Says:

August 11, 2009 at 7:25 pm

[...] 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; the full set is described
here. [...]

Reply

Erik Says:

August 12, 2009 at 6:27 am

@B.Z.,

Sounds like a scrollbar

Reply

All Things Open Source » Blog Archive » Up-leveling the Flex User Interface Discussion Says:

August 12, 2009 at 2:43 pm

[...] 30 Essential Controls – A list and examples of 30 controls/components that she thinks are
critical for RIA user interface design. It includes a check list of major RIA frameworks so you can
see which frameworks have which controls. Flex component developers, this is a great place to
start if you’re looking to sell/create custom controls in Flex. [...]

Reply

DelveUI | NYC | Day 2 | iamfrankstallone Says:

August 16, 2009 at 8:33 pm

[...] not getting on the blog scene until recently, was kind enough to share her study findings,
“30 Essential Controls” which, “…is the second article in a three part series on patterns and
principles [...]

Reply

Rayhan Kadar Says:

August 18, 2009 at 11:41 am

Lovely designs,

¿Where can we get them to start using?

Reply

[link] 12 Standard Screen Patterns « Theresaneil’s Weblog Says:

September 28, 2009 at 3:45 pm

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

Reply

Shankar Says:

February 23, 2010 at 10:43 am

How can I get these tools?

16 trong 17 8/3/2010 10:37 PM

30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

Reply

Shaun Says:

March 1, 2010 at 11:11 pm

Would love to see this list updated for 2010.

Reply

theresaneil Says:

March 2, 2010 at 2:25 am

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.

Reply

GoonMunster Says:

March 9, 2010 at 3:13 pm

Would it be possible to include a matrix in the 2010 version?

Features on one axis, Ajax Products on the other.

Reply

theresaneil Says:

March 9, 2010 at 3:49 pm

The 2010 version is out at UXBooth http://bit.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.

Notify me of new posts via email.

Theme: Simpla by Phu. Blog at WordPress.com.

17 trong 17 8/3/2010 10:37 PM