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, eventuall...
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 introd...
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;   ...
Tools Internet Explorer Developer Toolbar
Quality Is Free
Upcoming SlideShare
Loading in …5
×

Techniques For A Modern Web UI (Original Slides)

1,195 views
1,136 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,195
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Techniques For A Modern Web UI (Original Slides)

  1. 1. Techniques for a Modern Web UI Patrick Joyce May 23, 2007
  2. 2. As far as the customer is concerned, the interface is the product.” - Jef Raskin, Designer of the Original Mac UI “
  3. 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. 4. The New Way: AJAX
  5. 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. 6. Web UI Patterns
  7. 7. Yellow Fade Technique http://basecamphq.com
  8. 8. Death to Monolog Boxes
  9. 9. Transparent Messages http://transparent-message.xilinus.com/main/html
  10. 10. Faded Background Modal / Inline Popup http://www.yarncountry.com/categories.aspx?catid=189
  11. 11. Hiding Extra Information http://wiki.script.aculo.us/scriptaculous/show/Effect.toggle
  12. 12. Show Progress with Spinners http://www.napyfab.com/ajax-indicators/
  13. 13. Prevent User Errors with AJAX Validation https://www.blinksale.com/firms/new?plan=Free
  14. 14. Good artists copy. Great artists steal.” - Pablo Picasso (Most likely apocryphal) “
  15. 15. Yahoo! UI Library Libraries
  16. 16. new Effect.Highlight( $ ( ‘id’ ), {duration: 2} ); Yellow Fade Script.aculo.us Code
  17. 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. 18. Tools Internet Explorer Developer Toolbar
  19. 19. Quality Is Free

×