1. Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server Side Frameworks, Web Service APIs Part I May 8, 2008

2. Hall of Fame or Shame? 2Web Interface Design, Prototyping, and ImplementationCSE490L - Spring 2008

3. Hall of Shame! 20 pages of scrolling to get to the next action 3Web Interface Design, Prototyping, and ImplementationCSE490L - Spring 2008

4. Hall of Shame! 20 pages of scrolling to get to the next action 4CSE490L - Spring 2008

5. 5 Interesting Research Results... March, 2006 study dealing with consumer electronics Complexity causes 50% of product returns Consumers spend about 20 minutes trying to figure it out and then give up Web Interface Design, Prototyping, and Implementation

6. Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server Side Frameworks, Web Service APIs Part I May 8, 2008

7. CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation7 Outline Review Heuristic Evaluation Rich Internet Applications AJAX Basics Midterm Review

8. CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation8 Heuristic Evaluation Review Have evaluators go through the UI twice Ask them to see if it complies with heuristics –note where it doesn’t & say why Combine the findings from 3 to 5 evaluators ? –different evaluators will find different problems –too many won’t give enough returns for the cost Have evaluators independently rate severity Alternate with user testing. Why? –different techniques will find different problems (e.g., hard to find consistency issues with testing) Advantage/Disadvantages of HE? –advantage: low cost –disadvantage: may find false positives

9. What are Rich Internet Applications? CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation9 I just want to say one word to you – just one word – … Plastics.

10. What are Rich Internet Applications Def. plastic: “transforming; growing; changing; dynamic, developing.” Extensible & recomposable into different look & feels –HTML could always do this Dynamism is the key to RIAs –changes in any widget can refresh part of the page immediately (e.g., click on gmail message header) Give us the interactivity of desktop apps with the ease of maintaining web apps –Go beyond button/link clicks: drag & drop, etc. Examples: Yahoo Mail 2.0, google finance, … Sliding scale… some are less rich: gmail CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation10

11. What are Rich Internet Applications CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation11

12. What are Rich Internet Applications CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation12

13. What are Rich Internet Applications CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation13

14. How to Create RIAs Embed code in the web page Client can execute code rather than just render HTML Terms/systems you may have seen –AJAX: Asynchronous JavaScript and XML –Ruby on Rails: Ruby –Django: Python –ICEfaces: Java –Google Web Toolkit (GWT): Java Examples of Web Application Frameworks CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation14

15. How to Create RIAs Embed code in the web page Client can execute code rather than just render HTML Terms/systems you may have seen –AJAX: Asynchronous JavaScript and XML –Ruby on Rails: Ruby –Django: Python –ICEfaces: Java –Google Web Toolkit (GWT): Java Examples of Web Application Frameworks –differ mainly in language & style CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation15

16. AJAX example CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation16 Click me … window.onload = pageLoad; // called when page loads; sets up event hndls function pageLoad() { $(“ok”).onclick = okayClick; } function okayClick() { $(“ok”).style.color = “red”; }

17. CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation17 Midterm Questions Closed book Closed notes I’ll give you heuristics

18. CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation18 Further Reading RIAs

19. CSE490L - Spring 2008Web Interface Design, Prototyping, and Implementation19 Next Time Midterm