Exercise 1: Paper prototype 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 at least two different paper prototypes 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 Balsamiq/Figma mockup (30%)
After performing some user testing on your paper prototype, 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 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%)
Submitting your homework
Similar to the previous assignments, we are going to use Github
Classroom again.
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.
Make sure to update README.md with your Kerberos username, especially if
it's different than your GitHub username.
If you push after the deadline, it will count towards your
slack hours.