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

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

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

The New Way: AJAX

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

Web UI Patterns

Yellow Fade Technique http://basecamphq.com

Death to Monolog Boxes

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

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

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

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

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

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

Yahoo! UI Library Libraries

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

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

Tools Internet Explorer Developer Toolbar

Quality Is Free