6.S063 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/hw10-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: User testing of Balsamiq/Figma mockup of your Chat/Messaging App (30%)

For this part of the assignment you will do a user testing session of your Balsamiq/Figma Chat/Messaging App mockup from HW9. Then, you will use these insights to improve your design further, and in HW10 you will implement a high fidelity prototype of your Chat/Messaging App in HTML and CSS.

You can use the same tasks as in HW8, or you can come up with new ones if your design evolved significantly since then.

All of the advice about user testing from HW8 Exercise 2 applies here as well.

You should test with at least 5 users if your target audience includes undergraduate students, and at least 3 users if not.

Exercise 2: Usability Enhancements for a Basic Chat Application (60%)

In this exercise, you will begin acquiring familiarity with the reference chat application that you will ultimately modify to incorporate the novel features you are designing. This week, we will provide you with a very basic chat application, and you will focus on making it usable without enhancing its functionality; in future assignments you will add your new functionalities. The chat app can be found running here. This chat app is implemented using a vue.js plugin along with the mavue library that you have used previously. The code for it can be found in your homework repository.

Step 1: Identify Usability Issues

Perform a heuristic evaluation of the reference chat app, following the methodology described in class. Descriptions of issues should use the vocabulary discussed in class, not subjective assessments like "this is hard to use" or "this is confusing". Use the suggested report format from the slides. Going beyond LES, label each issue with one of the categories from either Nielsen's Heuristics) (details) or Tognazzini's First Principles (details).

Report 4 issues fitting 4 distinct categories in the list of heuristics you have chosen (Nielsen or Tog). Do not report cosmetic flaws, nor flaws of low severity if there are flaws of high severity.

Step 2: Fix Usability Issues

Modify the reference app to be usable. You should at least fully address the the usability issues identified in Step 1, but your submission will be graded for usability generally (of the tiny set of features it supports). You are encouraged to begin evolving this basic app toward the look of the app you have been designing, so you can get feedback. For example, you may already have a particular layout, font, or color scheme in mind for your app, and you can introduce those in your design this week. Do not, however, add new functionality.

There is a detailed description of how the template code works in the README included with the starter code. We also encourage you to read through the starter code - there are lots of comments! - and check out the Graffiti reference docs if you have specific question about the infrastructure used to create the app.

Exercise 3: Improve Color on your website (10%)

Use what we learned this week to improve color on (or add color to) 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 N: HW10 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 HW10 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.