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!).
Each Efficiency improvement you make is worth **10%** of the assignment, and each Learnability, Safety, or Graphic Design improvement you make is worth **5%**.
Therefore, to get full points in this exercise, you need to find & implement **3 efficiency improvements**, or **6 other usability improvements**, or even **a mix** (e.g. 2 efficiency improvements and 2 other ones).
Note that usability dimensions often correlate, and improving one frequently also improves others.
However, you **cannot** have the same improvement count for multiple categories.
If it addresses multiple usability dimensions, you should still point that out, but grade-wise it will only count towards the category that gives you the most points.
Avoid picking improvements which require login, unless they are about very big websites (Facebook, Twitter, Instagram etc).
**Deliverable:** An HTML page with your improvements. For each improvement, please list:
* The website & specific page (if applicable) that it improves.
* The CSS code for the improvement.
* Which usability dimension(s) 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.
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.
2% of the assignment will count towards the quality and usability of your writeup itself.
Exercise 2: Shopping Planning App (63%)
Create a shopping list application with HTML, CSS, and [Mavo](https://mavo.io).
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 63% that this exercise counts for:
- **8%** 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: Design Critique (5%)
As we have mentioned, part of learning how to become a good UI designer is practicing the ability to critique and
discuss the designs of your peers. On Friday March 6 in recitation, we will go over some of the usability improvements for
exercise 1 and shopping planning apps for exercise 2. 5% of the credit on this assignment is allocated to participating
in the design critique at (any of) the Friday recitations.
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.