Exercise 1: Fix the Web with CSS

The Code

h3:nth-of-type(n+4), ul:nth-of-type(n+4) {
	display: none;
}
				

Elaboration on the Improvement

Usability dimension improved: learnability

The adjustment I made hides the assignments that haven't been released yet, which helps with learnability because it removes signifiers that don't line up with an affordance: without the adjustment, all the assignments look the same and are clickable, so a user may expect an unreleased assignment to be accessible and be confused by the "Sign in" pop-up they get instead.

Sidenote: I think it'd be better to make the future assignments unclickable rather than hiding them completely so that people are still able to get a sense of what the assignments will involve but I don't think that's possible without making changes to the html / javascript.

Before

After

The Code

h3:nth-last-of-type(n + 12) {
	opacity: 0.5;
}

ul:nth-last-of-type(n + 12) {
	display: none;
}

h3:nth-of-type(3) {
	width: fit-content;
	background: #207ead38;
}
				

Elaboration on the Improvement

Usability dimension improved: efficiency

The changes I made were to lower the opacity of past assignments and hide their details in addition to highlighting the header of the current assignment; these changes improve efficiency in terms of thought and task because they make it so the user doesn't have to remember what the current assignment is or check the course schedule. They also reduce the amount of scrolling the user has to do to get to the assignment.

Sidenote: I am making the assumption that the user doesn't really need to access the past assignments, but for reduced scrolling while still making it easy for the user to jump to a specific part of a past assignment, one could make the past assignment details expandable using html. I also considered just making the font color for the current assignment and its details different for more contrast instead of highlighting the header but couldn't figure out how to get it to work.

Before

After

The Code

a[data-testid = "headerSignInButton"] {
	background-color: #000000;
	color: #FFFFFF;
	padding: 8px 15px;
	border-radius: 99em;
	font-size: 13px;
	line-height: 20px;
}

a[data-testid = "headerSignInButton"]:hover {
    background-color: #263726;
}

.as:hover:not(:disabled) {
    color: #FFFFFF;
}
				

Elaboration on the Improvement

Usability dimension improved: safety

The proximity and similarity in phrase of "Sign up" and "Sign in" make it easy for a description error to occur (selecting "Sign up" when trying to "Sign in"), particularly if the user is inattentive, given how much more the "Sign up" stands out than the "Sign in." Making the "Sign in" a black button of similar style to the "Sign up" button is a safety improvement because it encourages the user to notice "Sign in" and thus actually be cognizant which action they're taking; it also puts a little more distance between the two options.

Before

After