Final Projects

Assigned: 11/15/2022; Due on various dates (see below)

Topic Ideas

You have about 3 weeks for the project, and you have 2 to 4 people per group, so the project should be about 3 to 6 times harder than the regular homeworks (where were about 2 weeks of work). Here are some ideas:

1. Build an interface builder tool, that allows the user to place controls and set their properties. This would be similar to the "Create your Own" editor, except the palette contains buttons, sliders, text fields, and other html input elements. There should be a "run" mode where the user can see how the controls work, as well as a "build" mode. Depending on the number of people, you might provide interesting ways to specify the layout for the controls, like using css properties instead of just at fixed locations.
2. Build a prototyping tool, like Figma, Balsamiq, Axure, or Adobe XD. This is similar to an interface builder, but might not use any real controls, and just support changing pages as the behavior.
3. Create a speech/conversational/chatbot system using a tool like Google's DialogFlow.
4. Make the graphics editor in your homeworks more complete, with the features that a real editor would need, such as saving and loading, images, changing the objects' size, to-top and to-bottom, layout help (alignments), grouping, etc. (the specific features added can be negotiated).
5. Provide a gesture recognition library, so it is easy to add gestures to an interface. You might use one of Wobbrock's recognizers discussed in Lecture 20, like this one:
   • J.O. Wobbrock, AD Wilson, Y Li. "Gestures without libraries, toolkits or training: a $1 recognizer for user interface prototypes", In UIST '07, p. 159-168. ACM DL Ref
6. Implement Stephen Oney's high-level input handlers, which make it easier to implement interfaces using swiping and other advanced gestures, as discussed in this article:
   • Stephen Oney, Rebecca Krosnick, Joel Brandt, Brad Myers. "Implementing Multi-Touch Gestures with Touch Groups and Cross Events," Proceedings SIGCHI '2019: Human Factors in Computing Systems. Glaskow, UK. May 4-9, 2019. ACM DL orlocal pdf. (Best Paper Honorable Mention Award.)
7. Implement a constraint system or data-bindings solver, that can adjust the position or values for web elements based on the positions or values of other elements, as discussed in lecture 26.
8. Implement Amulet interactors, as discussed in lecture 8 (Input 2).
9. Assuming it wasn't done as part of homework 5, add selective undo, selective repeat and scripting (selective repeat of a sequence of operations) to homework 5, in the style of the Topaz system:
   • Brad A. Myers. "Scripting Graphical Applications by Demonstration," Proceedings CHI'98: Human Factors in Computing Systems. Los Angeles, CA, April 18-23, 1998. pp. 534-541. ACM DL Reference and local pdf and video. (Topaz)
10. Implement a state transition diagram editor and/or interpreter. For example, one could draw a diagram, and then go into run mode, and the user could perform the specified events and make sure that the events cause the right transitions, through highlighting of the diagram to show which states and transitions are used.
11. Implement an elaborate and complex web-based user interface for a web app that is quite different from the ones we did in class.
12. Something of your own design....

Picking Topics and Forming Groups

A preliminary list of topic ideas is displayed above. You can pick one of these or propose your own topic. If you are unsure if your idea is appropriate, please discuss with the professor. It is OK if multiple groups pick the same project, as long as there are differences in their approaches.

You should fill in a copy of the form on the class Piazza page under the "project" folder before Friday, 11/18/22 at 3:05. If you already have a group formed for a project, you can just use one copy of the form with everyone's name listed. If you see someone else's post on Piazza that sounds like a fun project, please make a note of that in their discussion area that you would like to join it, and also fill out your own form listing your skills. Or else it is fine to enter your own project idea and try to find others interested in it. I will help to form the groups in class on Tuesday, 11/22/22, if necessary.

Here is what the form asks for:

---

Your name:

Which project do you want to work on? Elaborate on one that is on the topics list (for example, including which specific item you want to do) in a sentence or two, or describe your idea in a few sentences.

Please indicate how strongly you want to work on this project. For example, whether you definitely want to work on it, or if you would be happy working on a different project in a related area.

Please describe your background and skills that might be relevant to your or other people's projects:

if you have in mind others to work on this project with you, please list them here:

---

Deliverables Details

• Initial Topic Ideas for Final Projects Entered into Piazza
  • Friday, 11/18/22 at 3:05
  • Everyone should fill out the form on the class Piazza page in the same thread as the template, or labeled with the "project" tag (which piazza calls "folders") before Friday, 11/18/22 at 3:05. If you want to coordinate with other classmates about project ideas, please go ahead before that date.
  • The TA and professor will annotate the ideas somewhat, and then we will discuss the ideas in class on Tuesday, 11/22/22, and hopefully finalize all the groups during class, if they haven't been decided beforehand.
  • If you want to brainstorm ideas beforehand, Prof. Myers is available after any class or by appointment.
• Form Final Groups
  • Tuesday, 11/22/22 at 11:59pm
  • In case final decisions can't be made in class on Tuesday, 11/22/22, then you have until midnight to finalize them. This allows people to think about the groups, or negotiate with each other, and enter the final groups.
• One-page proposal for Projects
  • Wednesday, 11/30/22 at 3:05pm on Canvas
  • This should be turned in on-line in Canvas, either as a Microsoft Word or pdf file. Note that just one group member should upload it per group.
  • This will be a detailed proposal. It should have the following content:
    • A short name for your group and/or project. We will call you "the ___ group" and use the name on Canvas, so it should be short, clearly related to your project, and specific enough to differentiate you from other groups. This should distinguish your group from the others.
    • A longer title for your project, that should represent what you are doing
    • A list of the members of the group.
    • A full explanation of what you plan to do for your project. Be sure your explanation differentiates your project from others.
    • What platform you are using to build the project, including what language and framework (e.g., will you use plain JavaScript or React.JS or something else). Also say if you are starting from your homework system, or from an open-source project, or just from scratch. Also list which libraries (e.g., D3, DialogFlow, VoiceFlow, etc.) or plugins you will use, such as what React libraries, or other things from npm.
    • Mention briefly how you will divide up the work among your group members (who will do what part).
    • Possibly a few references, if you are building on an existing research paper or are making something similar to a commercial system, to show that you are familiar with what else has been done that is similar or related. (If you are building on top of an existing system, that goes in the "platform" topic above.)
  • I expect this to be at least one page that is single-spaced in TimesRoman 12 point font, but it is OK if it is a little longer.
  • This will be graded, and will count as part of your grade on the final project. Please do not be late -- we aim to turn these around in just a few days to give you appropriate feedback on your project.
• Sometime during the project, each team will separately have an assigned time to meet with the professor and TA to go over your progress and discuss any issues, but feel free to ask us for extra help anytime.
• Presentations for Final Projects
  • Thursday, 12/8/2022 in class (last class)
  • We expect that all groups will present during the last class of the semester. (If necessary, we may run over and also use the lab session on Friday 12/9 - depending on how many groups there are.)
  • Each group should present for about 10 minutes discussing the results of your project. You must be finished within 13 minutes, or I will need to cut you off, so we have time for all of the groups.
  • You should have slides in either Google Slides, pdf, or PowerPoint format. Upload your slides (or a link if Google Slides) to Canvas after your talk. If you have videos or other material to go along with your slides, please make a zip file of everything together. Name your file with your group name.
  • We are interested both in what you final project looks like and how you implemented it. Be sure to cover any algorithms you are using, the architecture of how your system uses the underlying toolkit, and any difficulties / barriers to making it work.
  • Your slides should include, at least (not necessarily in this order):
    • A cover slide with your group name and all members' names
    • A list of which libraries you used, if they are different toolkits or libraries than we used or covered in class. Include links to where you got them from, what they are for, how hard they were to learn, and how well they worked out for you.
    • Slides about your architecture or algorithms, if relevant. For example, if you used a backend, then what is stored where?
    • A few screen shots of your project, highlighting what you implemented, what came from a library, and what (if anything) came from a homework
  • Then, you should have a live demo (preferably) or a video of your system in action. Be sure to show off all the features that you have working.
  • No late presentations (obviously)
  • Everyone in the group is expected to attend in person, and participate in the presentation.
  • Tentative order: by group number (except let me know if anyone has scheduling constraints).
  • Instructions for uploading the slides:
    • If you used PowerPoint for your presentation, please upload your file to Canvas.
    • If you used Google Slides or some other web tool for your presentation slides, please (1) include the URL of the slides in the submission comments, and (2) create a PDF of your slides and upload the pdf to Canvas.
    • If you used Keynote or any other desktop format for your presentation, please mention what you used in the submission comments, and (2) create a PDF of your slides and upload the pdf.
    • Deadline for upload slides: Thursday, 12/8/2022 by 11:59pm - just load them after class.
• Final Written Reports for Final Projects
  • Due Monday, 12/12/2022 at 11:59pm
  • All final reports should be turned in electronically on Canvas in Microsoft Word or PDF format. If you use Google Doc to author it, please still create a PDF and upload the PDF to Canvas.
  • One turn-in per group.
  • Turn in the code of your project in the usual way, with your site's URL on Github pages, and the link to your Github Repo. These are due on Monday, 12/12/2022 at 11:59pm as well.
  • The final report should include:
    • Title & authors: Be sure to list your group's short name, your project's full title, and the name of everyone on the team on the first page of your report. It is OK if you want to change the longer title since the initial proposal, if your project deviated from what you originally planned.
    • Your site's URL on Github pages, and the link to your Github repository. These should also be listed on the first page.
    • Introduction: An overview of what you did. Especially point out anything novel or interesting.
    • Related Work: A discussion of how it is similar or different from research and commercial systems, with appropriate citations (e.g., URLs) so I can see what you are referencing.
    • Example: an example with screen shots or code examples (as appropriate) of how your system works with one or more examples.
    • Installation guide: After we download the code from your Github repository, what do we have to do to make your project work? Are there other libraries or tools we need to download? Are there requirements for where everything must be placed? Be specific. (Hint: We strongly recommend you give your instructions to someone not on your team to test that it all works and you didn't forget anything -- we will deduct points if it doesn't work for us the first time!)
    • Detailed users' manual or reference documentation: An explanation of every element of your system, in sufficient detail so that readers will know how to use every part.
    • Design rationale: what can you say about why you ended up with the current design? What did you try that didn't work well, and why? What changes did you make along the way?
      • Rejected designs - if you tried things or have early designs that you abandoned or if you changed your mind, please describe those and why you decided not to use them.
    • Implementation: say how your system works internally, for example: what algorithms you are using, the architecture of how your system uses the underlying toolkit, and any difficulties / barriers to making it work.
      • If you are using different toolkits or libraries than we used or covered in class, then please discuss which ones, how hard they were to learn, and how well they worked out for you.
    • Future Work: What you didn't get to finish, and how you envision the system being completed if someone was to do more work on it, or new ideas you had while doing the project that you didn't get to explore.
  • I envision that the final reports will be about 10 pages, single-spaced in TimesRoman 12 point font, but it will vary enormously based on what kind of project you do.
  • Please make a video of your system working (which you might use in your presentation, but you don't have to). The video should have a voice-over explaining what is happening. You don't necessarily need high production values - it is fine to just do a demo using Zoom and record it, for example. Your video needs to be in .mp4 format. It is also fine if this is a different video than used in your presentation.
  • Create a zip file named with your group name containing your final report, video and talk slides, and upload it to Canvas. Note: you should have already uploaded your slides after your presentation, but please include it again so we can have everything in one place. See above for the instructions for how to upload your talk slides.
  • Please do not be late with turning this in! Late penalty for written report: 10 points per day (every day at 11:59pm will be another 10 points off), because we need to grade them quickly.
  • When you are finished, everyone is required to fill in the peer evaluation form peer evaluation form (https://www.surveymonkey.com/r/SSUI2022peer-survey) about how well your group worked together.