I recently gave this presentation to my department at work. Unfortunately, the slides are (intentionally) quite sparse without the accompanying commentary. There is also a version available with notes.

1. Techniques for a Modern Web UI Patrick Joyce May 23, 2007

2. As far as the customer is concerned, the interface is the product.” - Jef Raskin, Designer of the Original Mac UI “

3. Traditional Web Interfaces The user acts (Clicks a link, button, etc) A request is then sent to the server… And, eventually, a COMPLETE PAGE is returned

4. The New Way: AJAX

5. The New Way: AJAX The New Way: AJAX Dynamically update PART of the page. Which allows for more responsive UI, but introduces some new problems. http://www.wisc.edu/directories

6. Web UI Patterns

7. Yellow Fade Technique http://basecamphq.com

8. Death to Monolog Boxes

9. Transparent Messages http://transparent-message.xilinus.com/main/html

10. Faded Background Modal / Inline Popup http://www.yarncountry.com/categories.aspx?catid=189

11. Hiding Extra Information http://wiki.script.aculo.us/scriptaculous/show/Effect.toggle

12. Show Progress with Spinners http://www.napyfab.com/ajax-indicators/

13. Prevent User Errors with AJAX Validation https://www.blinksale.com/firms/new?plan=Free

14. Good artists copy. Great artists steal.” - Pablo Picasso (Most likely apocryphal) “

15. Yahoo! UI Library Libraries

16. new Effect.Highlight( $ ( ‘id’ ), {duration: 2} ); Yellow Fade Script.aculo.us Code

17. ASP.Net AJAX Faded Background Modal < ajaxToolkit:ModalPopupExtender ID =&quot;MPE&quot; runat =&quot;server&quot; TargetControlID =&quot;LinkButton1&quot; PopupControlID =&quot;Panel1&quot; BackgroundCssClass =&quot;modalBackground&quot; DropShadow =&quot;true&quot; OkControlID =&quot;OkButton&quot; OnOkScript =&quot;onOk()&quot; CancelControlID =&quot;CancelButton&quot; PopupDragHandleControlID =&quot;Panel3&quot; />

18. Tools Internet Explorer Developer Toolbar

19. Quality Is Free