Assignment 9

Due Thursday, April 14, 2022 at 11:59 PM

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: Iterate and implement a Balsamiq/Figma mockup of your Chat/Messaging App (25%)

After performing some user testing on your paper prototype from [Exercise 1](#exercise-1-user-testing-of-your-chatmessaging-app-paper-prototypes-20), create a high fidelity balsamiq/figma mockup that includes at least three changes to address issues testers had with your low fidelity prototype. This mockup must look like your intended user interface but need not provide the functionality.

- **Figma:** is [free for students](https://www.figma.com/education/) as long as you sign up with your MIT email. - **Balsamiq for Desktop:** has a [30 day free trial](https://balsamiq.com/wireframes/desktop/).

**Deliverable:** An HTML page with a PNG or SVG of your Balsamiq/Figma mockup. Include a short description of your improvements in comments, either at the top of the HTML file, or near relevant parts.

Exercise 2: User testing of Balsamiq/Figma mockup of your Chat/Messaging App (20%)

For this part of the assignment you will do a user testing session of your Balsamiq/Figma Chat/Messaging App mockup from [HW8 Exercise 2](../hw8/#exercise-2-iterate-and-implement-a-balsamiqfigma-mockup-of-your-chatmessaging-app-30). This is similar to the user testing you did in [HW7 Exercise 3](../hw7/#exercise-3-user-testing-of-calculator-balsamiqfigma-mockup-20) for the high fidelity calculator prototype. Prepare for the user testing by writing a list of three tasks for your user to perform with your medium fidelity mockup. During the study, you will ask your participant to perform three tasks. Using Balsamiq or Figma you can add some interactivity to your design which will help you discover issues your users might have that involve interactions with your design. While the user is performing tasks, try to jot down notes about their behavior and questions. These will be helpful for recalling insights in your writeup.

The participant in your testing session does not have to be a student. It can be anyone you know including a friend or family member. If it is not feasible for you to conduct in-person user testing, contact the staff and we will work with you to develop an alternative remote-testing plan.

**Deliverable:** An HTML page with a short video of your user performing tasks with your paper prototype, and a write up with your three tasks, insights from the user testing, plans for changes, and raw user testing notes in an appendix at the end.

Exercise 3: Begin implementing Chat/Messaging App (52%)

This exercise will involve implementing HTML/CSS as well as Javascript functionality. 50% of this exercise is for the HTML/CSS and the remaining 50% is for the Javascript functionality described below. Now that you have iterated on your Chat/Messaging App design, it is time to implement a high fidelity HTML & CSS prototype. This prototype must look like your intended interface but need not provide all functionality. Next you will use Javascript to add functionality to the HTML & CSS prototype. We will supply a [client library](https://designftw.github.io/chat-lib) and a server for implementing the chat/messaging app. This week you will be using the client library to add basic functionality to your prototype, primarily to familiarize yourself with the skeleton code, data model, and client library. In the next assignment you will add custom features developed from the user testing and prototyping cycle. We have provided a starter skeleton in the homework assignment which includes very basic UI for: - Signing up for an account - Logging in to the messaging server - Logging out of the messaging server. - Showing the current user's username - Having a basic conversation with a friend You will need to serve the skeleton using a local server in order to avoid CORS issues. Any of the following [one line static http servers](https://gist.github.com/willurd/5720255) should work. Your submission should include the ability to: - Render new messages (in the implementation we provided, all that happens when a new message arrives is that the new message's id is logged to the console) - Delete messages (it's your design decision which messages the user is allowed to delete, e.g. all of them, or only recent ones etc) - Handle deletion of messages by other participants - Have a group conversation with multiple people - Make it easy to switch between conversations (it's ok if switching re-fetches data from the server) The starter skeleton would not be graded well for usability. Your submission should have good usability. You should submit: - A brief listing of usability (learnability, efficiency, safety) problems you see in this basic interface, and how your design addresses them. 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). In the next assignment you will implement features from your mockup, so if you want to get a headstart, feel free to implement more things!

We suggest registering with two different usernames and logging in from different browsers, so you can easily test things.

If your files don't seem to be updating make sure to clear the cache by holding Shift and pressing the refresh button. Alternatively, you can follow [these instructions](https://developers.google.com/web/tools/chrome-devtools/network/reference#disable-cache) to disable the browser cache while the dev tools are open.

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, just reach out to us and ask.

**Deliverable:** Your functional prototype of the chat/messaging app in `chat-client`. Include a short description of what functionality is included and what usability improvements you made either at the top of the HTML file, or near relevant parts.

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