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

Assignment 1

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.

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: Noticing the design of everyday things (25%) Find 3 usability problems with things you use every day (e.g. oven, light switches, doors etc). **None of these things should be software.** For each of these: 1. Include one or more photos or video that showcases the part of the interface that is problematic. 2. Describe what the problem is. Which of the dimensions of usability discussed in lecture (learnability, efficiency, safety) suffer as a result? (1-2 paragraphs) 3. What could be done to fix this problem? (1 paragraph) Write your report with the following goals in mind: - **Completeness.** Consider at least the LES dimensions of usability, at minimum to say there is no problem, and don't overlook an obvious usability issue that even the reader notices. - **Thoughtful Analysis.** "Efficiency is bad, because it feels slow to use" is not a thoughtful analysis. "I've never made any errors with it" is not deep analysis. - **Clarity.** The reader should not struggle to understand what you're talking about. - **Conciseness.** This is technical writing. Unnecessary verbosity will be judged severely. - **Usability of presentation.** Your report is itself a user interface whose purpose is to convey ideas to a reader. If your report isn't efficient to read then it will be harder for the reader to use, and it will not demonstrate an ability to apply the ideas of this class. Make judicious use of headers, short paragraphs, bullets for lists, emphasis (where appropriate), captions, labeled image parts (not simply a big blob of text + big unlabeled image), numbered figure captions, and other devices that make reading easier. - **Readability of code** Your code is also a user interface, whose purpose is to communicate with other coders (and your future self). Take care in making it readable, using proper indentation, alignment, line breaks etc.

Tip: Out of ideas on what to write about? You may find our recommended textbook The Design of Everyday Things useful for inspiration.

Deliverable: A directory with an HTML page for your writeup and any assets in folders like videos and images. Just like every HTML page, your writeup should use semantically appropriate HTML elements and proper hierarchy. Internal links and linked resources should use relative URLs. In your writeup, please indicate if you’re ok with us making your solution available to the class.

Exercise 2: Learning to write good HTML (25%)

You are not allowed to use any CSS or JS for Exercise 2 and 3, except the few properties displayed in lecture (color, font, font-*), if you must. You will add CSS in the next assignment, but the focus of this one is to learn to write good HTML.

Create a personal website for yourself or someone else. It should have at least the following three HTML pages: - **Home** with *at least* a picture and bio - **CV** with *at least* Education and Work Experience - **Contact form** with *at least* a subject and message Pay attention to good information architecture, navigation, using semantically appropriate HTML elements, and good keyboard and screen reader accessibility. The CV will be an HTML page (not PDF, Word etc), though you're welcome to [make it downloadable via HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download), if you want to.

Tip: To make the contact form functional without a server backend, you could use a mailto: URL for the form action. Form fields named subject and body will be included in the email. Or the free version of formspree, or any similar service.

Deliverable: A directory with all your HTML files. All internal links should be relative.

Useful resources

- [MDN Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) - [HTML Semantics cheat sheet](https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/) - [HTML semantics checklist](https://learn-the-web.algonquindesign.ca/topics/html-semantics-checklist/) - [HTML Validator](https://validator.nu/)

Exercise 3: First steps at interactivity (50%)

You are not allowed to use any CSS or JS for Exercise 2 and 3, except the few properties displayed in lecture (e.g. color, font-size, font-weight), if you must. You will add CSS in a future assignment, but the focus of this one is to learn to write good HTML.

Neo and Trinity are a couple who live together, but do not (wish to) have joint finances. Instead, each of them has their personal bank account, and they share a joint credit card and a joint bank account. The theory is that they pay joint expenses (e.g. rent, cleaner, bills) with the joint CC or account and personal expenses with their personal CCs or accounts. However, sometimes things don’t work out that way. Sometimes joint expenses are paid solely by one of the two partners, or personal expenses are paid with the joint card. There is a variety of reasons for this; e.g. a joint credit card might have a better points program, or one partner might be short on money a given month. Currently, they use [a spreadsheet](https://docs.google.com/spreadsheets/d/1z6zAHPmiP0T1y1EtSmiYHNAe7mksbFXC_AflELZqZmg/edit?usp=sharing) to keep track of these “anomalies” to know who owes whom what. ## Task 1: Usability problems with their current method (5%) Copy the spreadsheet over and play around with it a bit. What usability problems can you detect with this method? These may be problems inherent in using spreadsheets for these kinds of tasks, or problems with the design of this particular spreadsheet. For each issue, note which dimension of usability (Learnability, Efficiency, Safety) it affects. ## Task 2: App to help them manage expenses in a better way (40%) Make a web app to help Neo and Trinity manage their expenses that is a significant usability improvement over their spreadsheet. We strongly recommend using [Mavo](https://mavo.io) to create such an application. You may find the following Mavo backends useful, to allow both partners to access and edit their data on different machines (but storing the data locally is acceptable for the purposes of this exercise): - [GitHub](https://mavo.io/docs/storage/#github) - [Dropbox](https://mavo.io/docs/storage/#dropbox) - [GitHub Gist](https://plugins.mavo.io/plugin/gist) - [Firebase](https://plugins.mavo.io/plugin/firebase-firestore) If you already know JS you can use it, but it will take a lot more effort. The primary thing we will be evaluating is the usability of the app you create. In terms of code we will only be evaluating the HTML you used. Therefore, avoid using any libraries or frameworks that create HTML that is not human readable. Note that if you choose to use a library or framework (other than Mavo) you are on your own: the course staff is most likely not familiar with it and cannot help you during Office Hours. Furthermore, if you submit code that doesn't work, they will not be able to figure out why for the same reason, so you will be graded based on the result alone. In your report, include a few sentences explaining how your app improves on the usability of the spreadsheet. Are there any further improvements you can think of but were not able to implement (yet)? ## Task 3: Generalize (5%) Another friend saw the app you made for Trinity and Neo, and loved it, so they asked if you could make one for them too. There is a complication however: they make two times as much as their partner, so they share expenses proportionally to their income (one pays 1/3, the other 2/3), not 50-50. Instead of making a new app for each friend, add settings to your app to make the names of the partners and splitting ratio customizable.

How to calculate who owes whom? (for Task 2)

You are welcome to implement the logic however you see fit. One way to do it is the following: You can keep track of a total balance of how much A owes to B. Assuming an amount of X, the following is added to the balance in each scenario:

For Trinity For Neo For Joint
Trinity paid 0 -X -X/2
Neo paid X 0 X/2
Joint paid X/2 -X/2 0

Then, to find who owes whom and what amount, we just sum these incremental balances. If the sum is negative, Neo owes to Trinity, if it's positive Trinity owes to Neo, and when 0 nothing is owed. The amount owed is the absolute value of the balance.

Deliverable: An HTML page with your app and an HTML page with your responses.

Useful resources

- [Mavo primer](https://mavo.io/docs/primer) - [Mavo docs index](https://mavo.io) - [Mavo demos](https://mavo.io/demos/)