30 Essential Controls

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.

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.

AvailabilityI'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 BookPurchase on Amazon

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

ArchivesApril 2010

March 2010

February 2010

December 2009

November 2009

October 2009

THERESA NEIL

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

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

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

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 Prototype carousel widget

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

Coverflow MediaEvent Service’s Slideflow

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

03. Charts & Graphs

September 2009

August 2009

July 2009

April 2009

February 2009

January 2009

December 2008

April 2008

February 2008

January 2008

PagesAbout

BlogrollComtaste- We Make It RIA

Creating Passionate Users

Designing Web Interfaces

Functioning Form

Info Design Patterns

Janko at Warp Speed

LooksGoodWorksWell

merhl

OtherInbox

Semantic Studios

Sofa- Design, Interfaces &

Software

Tech Crunch

Viaspire

Wireframes Magazine


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

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

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

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

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

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


JQuery, MooTools, MochaUI, LivePipe UI, Backbase, Silverlight.

09. Drag & Drop Manager

Drag and drop ExtJS photo organizer demo


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

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


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

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

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

Progress indicator Picnik loading indicator


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


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

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

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


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

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

Advanced WireframingEasily the most advanced wireframe and interaction design toolwww.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:


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:


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

Reply

30 Essential Controls for RIA Design | Konigi Says:


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

Reply

Kathleen Turner Says:


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

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


How can I get these tools?


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

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

30 Essential Controls

Documents

Transcript of 30 Essential Controls