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

← Assignment 5

Assignment 6

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: Paper prototypes of an improved calculator UI (20%)

In HW5, you performed a comparative evaluation of the OSX and Windows 10 scientific calculators. In this assignment, we want you to think how you would design a better calculator that fixes some of the problems you found, integrates the best characteristics of both, and goes further to improve on both of them. Some aspects that you *might* find easier to improve: - Memory functionality, e.g. "variables" with visible values, or multiple variables - Grouping, e.g. showing the level of nesting when parentheses are used - Visibility of system status, e.g. printing out the user's place in a complicated expression, or history functionality - Efficiency, e.g. editable function buttons You could also try more radical improvements, such as: - Macro recording - Multiple display windows so you can manage several partial expressions at once then combine them - Vector operations, i.e. map-reduce These are examples, please try to come up with your own ideas. Think outside the box! Justify your improvements through heuristic evaluation features or other usability principles we have learned. You can reference your HW5 to avoid repetition if you raised the issue there. Create paper prototypes of at least two different designs of your calculator so you can user test them. Don't worry about fidelity, just experiment with ideas at this stage!
**Deliverable:** Photos or video of your prototypes and a simple HTML page that presents them and justifies the improvements (1-2 sentences max per improvement).

Exercise 2: User testing of your paper prototypes (20%)

For this part of the assignment you will do a user testing session of your paper prototype from exercise 1. 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. 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.
**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: Iterate and implement a high fidelity mockup (30%)

After performing some user testing on your paper prototype, create a high fidelity mockup using Balsamiq, Figma, or another tool of your choice. 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. You only need to create one high fidelity mockup, implementing the insights you got from the user testing you did. This mockup could be closer to either of your two paper protoypes from ex 1 or even a combination of both, depending on what insights you gained from the user testing.
- **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/Illustrator mockup (SVG preferred). Include a short description of your improvements in comments, either at the top of the HTML file, or near relevant parts.

Exercise 4: Make your homepage more universal (30%)

Now that you've learned how CSS can help make our designs more *universal*, put your new skills to good use by improving your website! Ensure that your website that you worked on in [HW1/ex2](../hw1/#ex2) and [HW5/ex1](../hw5/#ex1) is: - Mobile-friendly (10%) - Adaptable to multiple viewport sizes (10%) - Print-friendly (5%) - Translatable. We will translate your website to a couple non-Western languages (e.g. Arabic or Japanese) via Google Translate, so make sure the CSS can handle this. (5%)

Exercise 5: HW5 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 HW5 in `exercise-5/index.html`.