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.