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.
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.
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
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
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
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
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
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, Silverlight12. 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)
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
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
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 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
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
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.
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 [...]
Bert Lamb » links for 2009-01-29 Said,
January 29, 2009 @ 1:03 am
[...] 30 Essential Controls (tags: design web controls ajax gui ui) [...]
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, [...]
GeekyCoder Said,
January 29, 2009 @ 5:52 am
That is very nicely summarized !
thx…
DotNetShoutout Said,
January 29, 2009 @ 10:44 am
30 Essential Controls…
Thank you for submitting this cool story – Trackback from DotNetShoutout…
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.
Matt Wilson Said,
January 29, 2009 @ 11:11 am
Beautiful list of controls.
billwscott Said,
January 29, 2009 @ 4:56 pm
@Dylan. Yes, feel free to post the links as that would be definitely helpful.
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
)
http://coliss.com/articles/build-websites/operation/design/ui-essential-controls-for-ria.html
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 [...]
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.
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/
Timothy Said,
January 30, 2009 @ 12:14 pm
Awesome list! Love that all the different JS frameworks are covered.
Brandon Granger Said,
January 30, 2009 @ 7:08 pm
Awesome article.
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.
links for 2009-01-30 « Mandarine Said,
January 30, 2009 @ 8:06 pm
[...] 30 Essential Controls (tags: form usability webdesign inspiration) [...]
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.
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
Dhaval shah Said,
January 31, 2009 @ 7:15 am
Great !!
Thanks a Lot for sharing this!!
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 [...]
Speedlinking 19 [25 a 31 de Janeiro] Said,
February 1, 2009 @ 11:02 am
[...] 30 Essential Controls [Design Web [...]
Janko Said,
February 2, 2009 @ 2:49 am
Great list, thanks for including my tutorial
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…
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 [...]
RCarter Said,
February 4, 2009 @ 3:41 am
Great list!
Why not considering ZK?
Aaron Peters Said,
February 4, 2009 @ 5:00 am
Very nice, thanks a lot.
(adding to Delicious)
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 [...]
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 [...]
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 [...]
Vinicius Said,
February 4, 2009 @ 8:09 am
Congratulations. Great job!
Thanks a lot for your research!
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/
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.
slabounty Said,
February 4, 2009 @ 9:42 am
Once again, well done. This is a great list, thanks for putting it together.
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.
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)
BarelyBlogging » Blog Archive » links for 2009-02-04 Said,
February 4, 2009 @ 4:09 pm
[...] 30 Essential Controls (tags: design ui webdesign patterns designpatterns) [...]
Mark Said,
February 4, 2009 @ 5:55 pm
You missed my favorite framework: ZK
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.
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 [...]
N GowriSankar Said,
February 5, 2009 @ 2:10 am
Handy reference, no doubt !!! Thanks a ton for sharing..
Rakesh Said,
February 5, 2009 @ 1:16 pm
Great article! really helpful.
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.
Antonio Said,
February 6, 2009 @ 12:44 am
Very nice,
ottimo post.
Ciao Italia
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 [...]
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
Ennuyer.net » Blog Archive » 2009-02-07- Today’s Ruby/Rails Reading Said,
February 6, 2009 @ 4:29 pm
[...] 30 Essential Controls [...]
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.
Goni Said,
February 6, 2009 @ 9:13 pm
能给我å‘一份么
[email protected]
谢谢~~：）
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 [...]
Emir Said,
February 7, 2009 @ 1:19 pm
How about some links to those controls ?
cssrain Said,
February 9, 2009 @ 2:13 am
woo，very nice.
Oluwasogo Said,
February 9, 2009 @ 3:39 am
Jquery is obviously the king……. Hail the king….lol
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 [...]
Kevin Said,
February 11, 2009 @ 10:58 am
Here is a spreadsheet comparison of the different controls.
http://spreadsheets.google.com/pub?key=pBfVAoH8Id5gUtOJARpxmfA
Josh Said,
February 11, 2009 @ 6:37 pm
YUI does support sliders:
http://developer.yahoo.com/yui/slider/
links for 2009-02-12 | The World According to Buchs Said,
February 12, 2009 @ 1:33 pm
[...] 30 Essential Controls (tags: ui design patterns) [...]
Constructive Visual Said,
February 18, 2009 @ 3:50 am
Thanks, this article was really helpful developing the interface for my website.
Methink.com - Ruby on Rails Web Development & Consulting: UI Design Patterns « Said,
February 18, 2009 @ 5:41 pm
[...] Â Â -Â 30 Essential Controls [...]
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 [...]
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 [...]
웹사ì´íŠ¸ì—ì„œ 사용ë˜ëŠ” 30ê°œì˜ í•„ìˆ˜ 컨트롤들 | 웹 ê°œë°œìž ì•„ë¹ ì˜ ì´ì•¼ê¸° Said,
February 25, 2009 @ 4:08 pm
[...] “30 Essential Controls” ì´ê³³ì— 웹사ì´íŠ¸ì—ì„œ 사용ë˜ëŠ” 30ê°œì˜ í•„ìˆ˜ ì»¨íŠ¸ë¡¤ë“¤ì— ëŒ€í•´ ìžì„¸ížˆ 설명해 ì£¼ê³ ìžˆëŠ”ê²ƒì„ ë°œê²¬í–ˆìŠµë‹ˆë‹¤. ì˜ì–´ë¡œ ë˜ì–´ 있지만 ìƒë‹¹ížˆ ì¢‹ì€ ì •ë³´ìž…ë‹ˆë‹¤. 다양한 JavaScript ë¼ì´ë¸ŒëŸ¬ë¦¬ë“¤ê³¼ Flex, Silverlight 등 웹ì—ì„œ 사용ë˜ëŠ” ëŒ€ë¶€ë¶„ì˜ í´ë¼ì´ì–¸íŠ¸ 환경ì—대해 ì •ë¦¬ê°€ ë˜ì–´ 있습니다. [...]
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!
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 [...]
30 controlli javascript essenziali | sastgroup.com Said,
March 16, 2009 @ 5:07 am
[...] http://designingwebinterfaces.com/essential_controls [...]
30 controlli javascript essenziali Said,
March 16, 2009 @ 4:12 pm
[...] Link http://designingwebinterfaces.com/essential_controls [...]
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.
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) [...]
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 [...]
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.
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) [...]
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 [...]
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控件。 [...]
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 [...]
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. [...]
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. [...]
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. [...]
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. [...]
Catalogo de controles UI(ui design patterns) « Jorge Dieguez Blog Said,
June 15, 2009 @ 9:55 pm
[...] 30 Essential Controlshttp://designingwebinterfaces.com/essential_controls [...]
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 [...]
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. [...]
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. [...]
30 Ñовременных Ñлементов ÑƒÐ¿Ñ€Ð°Ð²Ð»ÐµÐ½Ð¸Ñ | Usability.by Said,
June 21, 2009 @ 9:01 pm
[...] Ðеил Ñобрала библиотеку из 30 Ñовременных и популÑрных Ñлементов ÑƒÐ¿Ñ€Ð°Ð²Ð»ÐµÐ½Ð¸Ñ Ð¸ указала в каком фреймворке можно найти их [...]
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)
Bill Scott Said,
June 29, 2009 @ 10:20 pm
Larry. That’s cool! Thanks for sharing.
XanelaWeb » Controles Web Said,
July 3, 2009 @ 12:19 pm
[...] http://designingwebinterfaces.com/essential_controls Comparte este artÃculo: [...]
30 Essential Controls Said,
August 2, 2009 @ 3:48 pm
[...] Go here to see the original: 30 Essential Controls [...]
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 [...]
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. [...]
Websites with Flex Components « NIM ReFLEXtions Said,
October 15, 2009 @ 4:55 am
[...] Essential Controls [...]
Anparasu Said,
October 27, 2009 @ 3:17 am
Thanks for the list
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
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. [...]
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. [...]
Biz.tokunori.jp » UI Patterns Said,
January 2, 2010 @ 6:22 am
[...] 30 Essential Controls [...]
UX Links Said,
February 3, 2010 @ 7:44 am
[...] 30 Essential Controls [...]
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 [...]
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 [...]
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 [...]
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 [...]
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
12 Standard Screen Patterns Said,
February 25, 2010 @ 6:58 am
[...] Essential Controls: 30 controls for RIA design and development [...]
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 [...]
drilho Said,
March 6, 2010 @ 1:39 pm
Great knowledge shared. Thank you so much Theresa!!!
rixx Said,
March 7, 2010 @ 4:52 am
Yup, I think ZK should be included here.
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
43 Essential Controls for Web Applications | UX Booth Said,
March 9, 2010 @ 6:35 am
[...] [...]
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…
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 [...]
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.
Rock Music Said,
June 3, 2010 @ 2:17 am
What a great list that you have.
Thanks
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. [...]
style guide for applicaitons « ru content focused Said,
June 21, 2010 @ 4:33 pm
[...] Designing Web Interfaces [...]
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. [...]
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 [...]
UI patterns : une bonne ressource | Ergonautes Said,
September 18, 2010 @ 4:59 pm
[...] Et en particulier sur 30 Essential Controls [...]
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 = [...]
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 = [...]
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.
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. [...]
12ä¸ªæ ‡å‡†å±å¹•è®¾è®¡æ¨¡å¼ | DeanYan.com Said,
November 21, 2010 @ 7:43 am
[...] 必备控件：RIA设计和开å‘çš„30个控件 [...]
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 [...]