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

← Assignment 7

Assignment 8

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: User testing of your Chat/Messaging App paper prototypes (25%)

For this exercise you will be user testing your Chat/Messaging App paper prototype from [HW7 Exercise 2](../hw7/#exercise-2-paper-prototype-a-chatim-app-20). This should start to feel familiar by now. You previously user tested your calculator paper prototypes in [HW6 Exercise 2](../hw6/#exercise-2-user-testing-of-your-paper-prototypes-20). Prepare for the user test by writing a list of three tasks for your user to perform with your paper prototype. (e.g. a task could be a certain expression you want your users to try and calculate). During the study you will ask your participant to perform three tasks. Your paper prototype is static but you can simulate interactivity for your test subjects by explaining what would happen if it were interactive. Your explanation can be verbal, but it can also include physically modifying your paper prototype using post it notes, index cards, or pencil markings. 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.
**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 2: JS for Calculator (72%)

In this part of the assignment you will be using Javascript to add functionality to you the HTML & CSS prototype calculator you created in [HW7 Exercise 4](../hw7/#exercise-4-htmlcss-mockup-of-calculator-25). You do not need to use all of the HTML & CSS code from your prototype in your final submission and you can modify your HTML & CSS code as you see fit. But keep in mind the feedback you got in your user testing sessions as you add functionality and make design changes. Your final submission should be able to accomplish the following tasks as a minimum. - Perform basic arithmetic (`+, -, *, /`). - Allow the user to express grouping. For example, to calculate an expression such as `(1 + 2) * 3`. - Provide the ability to store and recall value(s). - Give the user the ability to perform at least 3 tasks beyond basic arithmetic. For example calculating an exponent, a logarithm, or a trigonometric function. We encourage you to be creative and go beyond the basic functionality outlined here.
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. If in doubt, ask on Piazza. So far we have whitelisted the following libraries, after student requests: - [MathJax](https://www.mathjax.org/) - [MathJS](https://mathjs.org/) You do *not* need to use any libraries to earn full credit. In fact, we would recommend avoiding libraries if your UI doesn't require them, as that will teach you a lot more about JS.
**Deliverable:** Your functional prototype of the calculator. Include a short description of what functionality is included via HTML comments, either at the top of the HTML file, or near relevant parts.

Exercise 3: 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 HW7 in `hw-feedback/index.html`.