Upload
dieu-hoang
View
318
Download
1
Embed Size (px)
Citation preview
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
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)
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
9 trong 17 8/3/2010 10:37 PM
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
11 trong 17 8/3/2010 10:37 PM
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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:
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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:
February 23, 2010 at 10:43 am
How can I get these tools?
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
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.
30 Essential Controls « Theresa Neil http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/
17 trong 17 8/3/2010 10:37 PM