6.S063 Design for the Web: Languages and User Interfaces

← Assignment 10

Assignment 11

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. You can submit as many times as you want. Your homework is not submitted and is accruing slack hours until you do this!

Please make sure each of your exercise-N 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 that expect a local server to run at a specific directory within your repo, and if 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 1: Animation Hall of Fame and Shame (30%)

Scour the web for UI hall of fame and shame examples! This time you are looking to find: - Animation: - One example of animation that enhances usability. Justify why it enhances usability using the motion principles we discussed in lecture. - One example of gratuitous animation that hinders usability and becomes annoying (possibly after a few times) - One example of abruptness, where an animation would have enhanced usability. For each (as appropriate) use a short paragraph to describe what the animation or visualization is doing well and what it is doing poorly. Where possible, suggest changes that would improve it. Include videos of the interactions.
**Deliverable:** HTML writeup and necessary media files.

Exercise 2: Adding animation on your chat app (20%)

Especially in a chat application, animation can be used in a variety of ways to improve usability and delight users. Make at least 5 improvements and point them out in a short writeup (~1 sentence for each improvement). We recommend including videos for these in your writeup, but if the animation is easy to replicate by the grader looking at your chat app (let's say with a few seconds of interaction), you can skip the video for that animation. If you have already included animation on your website that meets the criteria we've discussed in class for animations that don’t get 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.

Exercise 3: Continue to add Prototype Functionality using JS for Chat/Messaging App (47%)

In [HW 10 Exercise 2](../hw10/#exercise-2-htmlcss-js-for-chatmessaging-app-74) you began implementing functionality for the Chat/Messaging App. This week you will complete your work. The chat server and client library we developed should be flexible enough to meet most use cases. If you think that it is impossible to fully implement the functionality from your design phase, reach out to the course staff. Your submission should retain the ability to send, receive, and delete messages as well as display a collection of messages which you implemented in the previous assignment. We will be grading you on usability, design, and the quality of your code implementation. The [documentation](https://designftw.github.io/chat-lib) will be very helpful for understanding the client. Especially the [home page](https://designftw.github.io/chat-lib) and [client page](https://designftw.github.io/chat-lib/Client.html).
Per the course's [collaboration policy](/collaboration.html) that "your code must be your own", you are not allowed to use Javascript libraries or frameworks. However, we will consider allowing certain specific-purpose libraries if they enable interesting UI prospects that would otherwise require a large amount of vanilla JS code and effort.
**Deliverable:** Your customized prototype of the chat/messaging app in the `chat-client` directory of the starter repo. Include a short description of what functionality is added from your prototypes either at the top of the HTML file, or near relevant parts.

Exercise 3A: Recovering half credit from HW9 and HW10 (0% – 26% of HW9, 0 – 20% of HW10)

If there were any chat app features you did not get to implement in HW9 and HW10, any bugs you didn’t get around to fixing before the deadline, or any flaws pointed out by graders, you can recover half the credit by doing the work now!
**Deliverable:** Your customized prototype of the chat/messaging app in the `chat-client` directory of the starter repo (the same one as the exercise above, not two different `chat-client` directories!). Include a short description of what work you did from HW9 and HW10 in `chat-client/makeup-work.html`. If you are addressing a flaw pointed out by graders, please include how many points you lost for that flaw.

Exercise 4: HW feedback (3%)

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 HW10 in `hw-feedback/index.html`.