6.4500 Design for the Web: Languages and User Interfaces

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/hw9-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 absolute localhost URLs, 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 1: Iterate and implement a Balsamiq/Figma mockup of your Chat/Messaging App (45%)

In HW8, you user tested your paper prototypes. You should now have enough information about which features from each prototype work best to create a medium fidelity prototype.

For this, we will be using Balsamiq or Figma. If you'd prefer another tool that's fine, but make sure it allows you to create interactive prototypes, not just vector graphics.

This mockup must look like your intended user interface. You should also include some interactivity to allow users to interact with this mockup. Just like a paper prototype, you do not need to include every part of the interface.

Exercise 2: Improve Typography on your website (10%)

Use what we learned this week to improve typography on your personal website from past homeworks. Make at least 3 improvements and point them out in a short writeup (~1 sentence for each improvement).

Exercise 3: Making a personal tracking application (45%)

Personal tracking applications are useful for keeping track of things about oneself, e.g. mood, medications taken, menstruation start and end, migraines, and many more. While certain things such as sleep, or some kinds of exercise can be tracked automatically, the vast majority of things that people need to track about themselves (or their loved ones, e.g. kids, partners) are tracked manually. In this exercise, you will create such a simple manual personal tracking application that stores its data to GitHub.

In the skeleton we have provided an extremely bare bones tracker where each entry just contains a date and a notes field. There is a button to add new entries, a button to save each entry, a button to delete entries, and a button to refresh the entries. No CSS has been included at all.

You will notice that this app is slow because, for now, we have artificially added some delays to simulate server latency, just like in studio 9. Part of your task will also be to add proper feedback to the user while these delays are happening.

1. First, decide what kind of tracker you want to build. Give it a name, and some style relevant to its purpose.
2. What fields would you need to keep track of for each entry? For example, for a migraine tracker, you would likely need a date & time the migraine ended, an intensity field (e.g. 1-5), and a field for the location of the migraine (left, right, both, etc.). It's ok to simplify the fields you need to track to make the task simpler for you, however your tracker should include more fields than the date and notes of the skeleton. If built-in form fields are not sufficient for your needs, you could use custom elements too (e.g. take a look at Shoelace), but be careful because not all custom elements out there work properly with forms. You can modify the HTML of the skeleton as you see fit, it is there to help you get started.
3. Include CSS to make this tracking application usable. Make sure you test on smaller screens too, a tracker that can only be used on a large screen is of very reduced utility.
4. Use Graffiti to store your data. You can use put, patch, and delete for modifying entries and get and discover for fetching entries. We have included a suffienct skeleton for most applications already.
5. Whenever asynchronous tasks are running, you should provide feedback to the user about what is happening (the details are up to you). Consider what happens when the user tries to interact with your application while a task is running, and make sure this does not result in bugs.
6. Add other usability improvements as you see fit under the constraint that you keep server calls artificially slow.
7. When you are done, feel free to remove the artificial delays and change from GraffitiLocal to GraffitiRemote on the bottom to actually make server calls with real latency. However, for submission keep the delays and GraffitiLocal in place as they will give us a clear baseline for grading.

Exercise N: HW9 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 HW9 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.