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

← Assignment 3

Assignment 4

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: Fix the Web with CSS! (33%)

Many of the usability improvements we have discussed in lecture can be performed entirely by modifying a website's CSS. For this exercise, you need to find and make such improvements on websites you visit. Use the Dev Tools to experiment with modifying the CSS of an existing website (and see what selectors to use). You could even use [Stylus](https://chrome.google.com/webstore/detail/stylus-beta/apmmpaebfobifelkijhaljbmpcgbjbdo) to share your modifications with the world, if you want to (we just ask that if you choose to do so, you wait at least 2 days after the deadline!). Note that not all websites you visit will have nice HTML that lends itself easily to elegant CSS selectors. In some cases you may need to write selectors that are selecting based on the type of the element and its position in the DOM, or its attributes. Make sure that the selectors you write do not depend on HTML that changes across users/pageviews. Each usability improvement you make (learnability, efficiency, safety) is worth **10%** of the assignment, and each Graphic Design improvement you make is worth **2.5%**. Therefore, to get full points in this exercise, you need to find & implement **3 usability improvements**, or **12 graphic design improvements**, or even **a mix** (e.g. 2 usability improvements and 4 graphic design improvements). Often improving graphic design improves usability as well, but each imporvement you make can only count towards one of the two (the one that gives you most points). If you list improvements whose points exceed 30% they will be capped to 30%, you will not get extra credit. You *can* make multiple improvements on the same website, but you need to make sure they are sufficiently independent and separate. Avoid picking improvements which require login, unless they are about very big websites (Facebook, Twitter, Instagram etc) or MIT websites.
Having trouble finding websites? Here are some broad categories of websites that usually have a lot of room for improvement: - Internal MIT and MIT-related websites (e.g. registration, WebSIS, Stellar, Canvas, MIT Firehose, MIT Recreation, various research groups, clubs, sororities, fraternities etc) - Course websites (including ours!) - Small business websites (e.g. local cafes, restuarants, daycares, etc) - Conference websites - Startups and smaller scale websites (e.g. Piazza, forums) - Airline websites Avoid trying to improve Facebook or Google, their markup is so mangled you are going to have a very hard time writing CSS for it.
You are *not* allowed to use `!important` in your CSS unless it is absolutely necessary. Part of the exercise is to get you to practice writing selectors when you cannot adjust the HTML to make it easier for yourself, and to get you to understand the cascade. `!important` is a bad practice in general, and rarely necessary. If you are absolutely 100% certain that there is no other way, you can use it, but if you are wrong, you will lose all the points of that improvement. There are two main cases where `!important` is necessary: - When you are overriding CSS that is in `style` attributes - When you are overriding CSS that also has `!important` In almost every other case, it is not necessary.
Your improvements need to **only** consist of CSS that can be included in a user stylesheet. This means: - No JS - No changes to the HTML - No changes to inline styles (overrides via CSS rules are fine)
**Deliverable:** An HTML page with your improvements. For each improvement, please list: * A link to the website & specific page (if applicable) that it improves. Please do *not* download and include the actual page in your homework. A link is fine. * The CSS code for the improvement. Make sure to mark it up with appropriate HTML for code snippets. Screenshots of code will not be accepted. * Which usability dimension(s) and/or design principles are improved. * A sentence or two about how your code improves this usability dimension * Screenshots (or video!) before & after. Please save screenshots as PNG, not JPG or GIF. Do not take photos of your screen, look up [how to take actual screenshots for your OS](https://www.pcmag.com/news/how-to-take-a-screenshot-on-any-device). Please include a table of contents in your HTML with internal links to the improvements listed. As always, please use appropriate HTML elements in your writeup and pay attention to structure, hierarchy, and readability. Starting from this assignment, you can also apply CSS to make it easier to read. 3% of the assignment will count towards the quality and usability of your writeup itself.

Exercise 2: Shopping Planning App (64%)

Create a shopping list application with HTML, CSS, and [Mavo](https://mavo.io) (or JS, if that’s your preference). Relevant to this application are items for the list and (possibly multiple) stores where each item can be purchased. The use case being that when you know you’re going to visit a given store, you quickly pull up the app and are able to view the items you need to buy from the given store. At a minimum, the application should provide for the following: - managing a shopping list, with (optional) quantities, appropriate units where relevant (items, gallons, pounds, etc.), and names of store(s) the item can be purchased from - managing a collection of frequently purchased items, and affordances for efficiently adding those items to the shopping list - when visiting a particular store, an interface that efficiently supports shopping for the part of the current list available at that store. No need of any fancy context awareness for this, just good UI for selecting that I’m currently in a particular store. In the starter repo, we provide you with a bare-bones application that already works, but has poor HTML, almost no CSS (and the little it has is bad), and poor usability. Your goal is to improve the app usability, especially focusing on Efficiency. Note that you may need to change the source order for usability. You may also decide to change the data model, you are not bound to the one we provide. To the extent possible with what we've covered so far, focus on making the app efficient with a smartphone, since that's the primary use case (especially for buying things). Specifically, think of how to make the app usable in a small viewport, and with larger pointer sizes (fingers).
Please highlight your improvements with **comments in the source code**. No writeup is required for this exercise. Of the 65% that this exercise counts for: - **10%** will count towards your HTML - **20%** will count towards your CSS, how it puts the graphic design principles we learned into practice, and the quality of the code itself (remember DRY!) - **35%** will count towards your efficiency & general usability improvements.

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