Assignment 12
Due
Submitting your homework
We are going to use Github Classroom for this assignment. You need to have an account on GitHub and be logged in. Authorize Github Classroom here and accept the assignment, then follow the instructions there. Please follow the structure and naming of the starter repo, though you can add any additional files if you need them.
To submit the assignment, please visit Canvas
and submit the URL to your final commit that you want us to grade.
A commit URL looks like https://github.com/designftw-YEAR/hw12-username/commit/b59f14ba05869b3067724aa6d2006667a54c8e7d.
You can submit as many times as you want.
This is important. Your homework is not submitted and is accruing slack hours until you do this!
To make sure your homework is graded correctly, please follow the following:
- Please make sure each of your exercise directories are self contained, i.e. that you don't reference any files outside of the directory (e.g. from your repo root or other exercises). While having a common assets directory for all your exercises might be a good idea in general, we extract each exercise directory separately (as it may be graded by different people), and that will result in your pages not working correctly.
- Do not use root-relative URLs (URLs that start with
/) or absolutelocalhostURLs, as these require the grader to run a local server at a specific directory within your repo. If for some reason you cannot avoid it, please document it in a README otherwise links may be broken for whomever is grading your homework.
If you submit after the deadline, it will count towards your slack hours.
Exercise -N: Retrogrades (Optional)
Now that you've received feedback on some of your assignments, we are offering a (completely optional) opportunity to improve some of your past work and resubmit it for a retrograde. Your final grade on an exercise will then be the average of the original grade and the retrograde. For example, if you got 10 points on the original exercise and 20 points on the retrograde, the final grade we'd put down for the exercise would be 15 points. We will never give you a lower grade than you got originally.
Not all exercises are eligible for retrogrades, either because they are part of multi-week assignments already or because we don't think fixing up that exercise provides a good learning opportunity.
This week, you may request retrogrades for any or all of:
- HW9 Ex1: Iterate and implement a Figma mockup of your Chat/Messaging App (45%)
- HW9 Ex3: Making a personal tracking application (45%)
To submit a regrade, simply commit and push additional changes to the relevant exercise in that week's repo. Retrograde submissions are due with the assignment where they are offered.
Exercise 1: Adding animations (25%)
Animation can be used in a variety of ways to improve usability and delight users. Add at least 5 (different) animations across your website and chat app with at least one animation in each. Then, point each out in a short writeup (~1 sentence for each improvement). Include (short!) videos of these animations in your writeup. Given that most effective UI animations are shorter than 500ms, these videos should not be longer than a few seconds.
If you have already included animations that meets the criteria we've discussed in class (serving a purpose without getting in the user's way), you can just write about these in the short writeup, you don't need to come up with new ones.
Make sure your animation is serving a purpose, not just be adding distraction. Mention your purpose in the writeup. The purpose might be:
- Feedback (e.g. success, error, loading)
- Discovery (e.g. notifications, alerts, finding features)
- Displaying relationships (e.g. hierachy, location)
Also, make sure your animations aren't getting in the user's way:
- Keep animations short, especially for repetitive animations.
- Keep the motion relatively subtle unless it is something that really demands attention.
Your animations must be substantively different. Five different buttons that jump when clicked, or five different popup notifications, count as only 1 animation for this exercise.
AI Usage: You may not ask AI to suggest animations to use, but you can freely use AI to help you generate the appropriate CSS instructions to get the animations you identify. Your approach to animating should be reasonable and readable though; using a set of sprites to achieve an effect that can be implemented with a simple transition: keyword will be penalized.
Your writeup in animation/index.html, chat application and source code linked in chat-app/, and website in homepage/.
Exercise 2: Chat app checkpoint (75%)
This and the next (and last) assignment are to complete your chat app with the features you have been working on in your paper prototypes, figma mockups, and user tests. At this point it is hard for us to give you a concrete milestone given the diversity of your designs, but by this week you should have made progress on your custom features and it should be clear to us that you are on track to finish your app in roughly a week.
The last day of classes this year is May 12th a Tuesday and MIT does not allow us to set deadlines past the last day of classes, so you will technically have only 6 days after this assignment to finish your app rather than a full week.
The last studio, which is mandatory, will be held on the days after you turn in this assignment, May 7 and 8. In that final studio you will present your app to the class in whatever state it is in to get feedback that you can use as you work on finishing your app. Therefore we want to make sure:
- The app you turn in this week is functional
- It demonstrates a significant part of your design
What defines a significant part of your design? If your design involves several features/changes to the basic chat app, a good approach would be to fully implement the majority of them in a way that provides some reasonable/coherent functionality not available in the basic app. If your design is all one large feature, aim to implement a simplifed minimum viable product of your app that still gets the basic idea across. We recommend discussing your plan with the course staff who can help you identify a suitable milestone for this week. You will have an opportunity to do so in studio this week.
Recalling that this is a class on usability, your 75% mark should contain a usable 75% of your app. Fully implementing your back-end with 75% of your code and leaving the last 25% of the code that provides the UI for next week does not meet this goal. Graders should be able to examine 75% of what a user will experience when using your completed app.
One approach to reaching 75% is to fully implement and polish 75% of your app's features, both the back-end that implements them and the front end elements for accessing them. The subset you implement should not be an arbitrary disconnected set of features but should instead allow a certain "user journey" to be followed from beginning to end.
A second approach would be to fully implement your front-end/user interface but with reduced back-end functionality. For example, if your app were going to include access to some restaurant search API, you could fake that with some code that selected among 3 fictional restaurant objects that you store locally. If you're going to do spell checking, you could instead just flag as "incorrect" any word that contains the letter z. In other words, consider simplifications to the data or computations that still allow a grader to explore the full range of interaction with the user interface.
Also, now that you have started developing your app, you may be reconsidering how ambitious you want to be in implementing your custom feature(s). You may modify (simplify) your design, but should do so in a way that is informed by the user testing you have done — aim to keep the parts that were most important/valuable in your user tests. If you are not sure how to simplify your design, please reach out to the course staff for help.
Include a writeup that includes a description of what your app already does, what your end goal of your app is, and a concrete plan on how to get from your current state to your goal within the time remaining.
As you are developing your app, make sure you do not push broken changes to Github pages, as we will be looking at your apps in studio. You can push intermediate changes to a working branch, such as hw12. Then, when your changes are complete, merge that branch into the main branch - the one that will show up on Github pages and the one we will grade.
AI Usage: For the rest of this assignment, you are not just allowed, but encouraged to use AI to generate code.
As usual, while you may delegate tasks to AI, you are still ultimately responsible for the quality of your code and website.
AI can augment, but should not replace, thinking carefully about your design. In general, avoid giving vague prompts to AI such as "build me a chat app" or "add a profile editor."
Instead, use more precise prompts like "I want a main screen with a list of chats on the left, a chat window in the middle, and settings on the right."
or "the message box should be pink with a purple border"
You may also find that including Figma mockups or images of sketches may lead to better results. Precise prompting tends to lead to better model output!
Deliverables
- Roughly 75% of your full app. Focus on end-to-end functionality and frontend design rather than backend. 75% end-to-end or 100% frontend+50% backend are acceptable.
- Show clear progress toward the design from your prototypes, mockups, and user tests. You may simplify the design when that is justified by your testing.
- A writeup in
milestone/index.html- what the app does now
- the end goal (including possibly how it has changed based on user testing)
- a concrete plan to finish in the time left
- Your chat app and source linked in
chat-app/index.html, same arrangement as last week.
Exercise N: HW12 feedback
Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, labs etc.
Please fill in your feedback about HW12 in this form. You can edit it as many times as you like until the survey closes (48 hours after the homework deadline). Since this is part of your participation grade, it does not affect your slack hours, but failing to submit the form on time, could result in a lower participation grade.