Project 1 - Analyzing a Web Feature Edit
In this project you will work in teams of two to analyze an interesting mechanism for user interaction from some existing Web application. You will present your results in class and also create a short written version as part of this Wiki.
Picking an Interaction Edit
Find an existing Web site that allows users to interact with it in an interesting way (something more dynamic than just tables and forms). Use the list at the bottom of this page to collect ideas and share them with other people in the class; the more candidate topics the better! Once you have chosen a topic for your project, write your name and your partner's name next to that topic in the list. Each team should choose a different topic, but you can change your mind whenever you wish; just move your names to a different available topic. Even after you have selected a topic, if you encounter additional interesting interactions please add them to the list.
The best topics are those that are relatively simple. Don't try to analyze an entire application; just pick a piece that looks interesting, such as manipulating a particular control or a particular drag-and-drop interaction, or a mechanism whereby something updates automatically.
How to Analyze the Interaction Edit
Writing up Your Results Edit
Once you have analyzed your interaction, create a new page in this Wiki, linked from your project's listing in the table below. Your writeup should address what you think is most interesting about the interaction, and what you think other people can learn from it. Here are some examples of questions you might answer in your write-up (you don't need to address all of these):
- What is the overall structure of the interaction?
- What parts of the interaction happen in the browser and what parts require server interaction?
- If data is fetched dynamically from the server, what is the granularity of those patches? Are there any special techniques for hiding latency, such as prefetching?
- Are there things about the facilities of the Web that made this interaction either easy or hard?
- Did the interaction have to contort itself to get around problems with the Web?
- Are there improvements to the Web that would have made this interaction easier to implement, or that would have allowed a more powerful interaction?
- Are the techniques used in this interaction relevant for a broader class of interactions?
Overall, your writeup shouldn't be more than the equivalent of 1-2 pages of text. Keep it short and focus on what is most important.
Class Presentations Edit
You'll also present your results in a 5-minute presentation to the class; this should include a short demo of the feature followed by a discussion of the key ideas from your writeup. I recommend making a few PowerPoint slides to organize your thoughts: 2-3 slides is about all you will have time for. If you finish in 5 minutes there will be time for one or two questions afterwards.
Here is the schedule for the project:
Wed. Oct. 8, 5:00 P.M. - Team and topic selected Fri. Oct. 17, 5:00 P.M. - Project finished: writeup on Wiki Mon. Oct. 20 - Fri. Oct. 24 - Presentations in class
Possible Topics Edit
Add your ideas to this list. If names are present next to a topic it means the topic has been "claimed" by that team.
- radicalcartography.net and the maps within
- The maps are interesting but where's the interaction? It seems like most maps are prerendered. --Jmao 05:26, 2 October 2008 (UTC)
- Dragging in Google Maps (Brian Eggleston and Michael Fischer)
- Navigating in Google Street View
- Tagging images in Facebook
- Rearranging the sections of your home page in Facebook
- WYSIWYG editing of rich text in some application (i.e. FCKEditor)
- Modista.com navigation
- Interactivity on SmugMug Photo Interface (David Underhill & Nopparut Abhinoraseth (Big))
- eyeOS interface (Daniel Sanchez & Bahman Bahmani)
- Carousel - http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_feed.html
- Interactive TreeMap - http://www.finviz.com/map.ashx?t=sec (James Mao & Juho Kim)
- Zimbra / Stanford WebMail
- The login for this wiki page
- Evernote interface
- Apture interface for adding links (Jing Chen & Benjamin Bercovitz)
- Email Pagination Interaction on Google Gmail (Julien Wetterwald & Seng Keat Teh)
- FlexBook Interface (James Chen & Bear Travis)
- Colorpicker.com color picker (Eric Choi & Tejaswi Tenneti)
- Lightbox 2 - http://www.lokeshdhakar.com/projects/lightbox2/
- Yahoo Pipes - Drag n' Drop analysis
- Google Suggest (Zheren Zhang & Pratyus Patnaik)
- Zoomii Hover & Click - (Liz Li & Matt Martin)
- iGoogle Drag-and-Drop - iGoogle Menu Rearranging (Okai Addy and Tayo Oguntebi)
- Kayak.com Time Slider (Naren and Nipun)
- moo.com business card editor (Indrajit and Harry) - http://moo.com
- JavaFX front page widgets - http://www.javafx.com (Johnny Zhou & Garrett Eastham)
Presentation Order Edit
The project presentations in class will be in the following order, from top to bottom. Teams up through Khare/Robertson should be ready to present on Monday, October 20 (we may not get through all of these, though). Everyone else should be ready to present on Wednesday, October 22.