Fix the Web with CSS!

Stack Overflow

Figure 1: Stack Overflow before CSS changes.

Figure 2: Stack Overflow after applying CSS changes.

Usability Improvement: Efficiency

I made two improvements to the CSS on Stack Overflow to improve efficiency since many users of the site are often simply trying to get a quick answer to a specific question. The first improvement I made was hiding the cookies consent banner that appears in the bottom left corner of the screen when navigating to a Stack Overflow page. This banner obstructs the view of the content on the page and can be a major source of inefficiency since users have to take extra steps to see the content hidden behind the banner whether that be zooming out, scrolling, or other similar methods. It is possible to get rid of this banner but only after taking time to figure out which cookies to accept, which again poses an efficiency problem for users. The second improvement I made was adding contrast to the accepted answer to a question by highlighting the answer in a light shade of green. Green is a common signifier of correctness, so this is a great way to improve the discoverability of the content that is most helpful in answering the original question. Overall, both of these improvements increase the user's efficiency by allowing them to get the answer they are looking for as soon as possible.

Code


.js-consent-banner {
	display: none;
}

.accepted-answer {
	background-color: hsl(101, 100%, 97%);
	border: 1px solid hsl(107, 100%, 60%);
	border-radius: 0.5em;
	margin: 0.25em;
	padding: 0.25em;
}

Piazza

The actual page I edited was the New Post UI which you can get to by following the link above and clicking "New Post" in the top left corner.

Figure 3: Piazza before CSS changes.

Figure 4: Piazza after applying CSS changes.

Usability Improvement: Learnability + Safety

When drafting a new post in Piazza, users are presented with a textbox where they can edit their message along with a preview box that displays the rendered version of their post. Because these boxes appear identical to the user, it is not immediately clear which box represents the input box and which represents the preview box which is not very safe since description errors where the user targets the right action (editing their post) towards the wrong object (the preview box) can be very likely. In addition, when the user hovers over the preview box, the cursor switches to the auto style. This cursor style is a common signifier to users that reveals the affordance of being able to edit something. In order to improve the learnability of the "New Post" UI on Piazza, I decided to change the cursor style to "not-allowed" when the user hovers over the Preview box and to make the background color light grey. Both of these changes together provide a more accurate signifier to the user, indicating that the Preview box is not editable; therefore, making the user interface more learnable.

Code


.preview_box:hover {
	background-color: hsl(0, 0%, 94%);
	cursor: not-allowed;
}

MIT Atlas Time Sheet Entry

The actual page I edited was the timesheet entry page (which I cannot provide a direct link to). However, this page can be found by navigating to the link above and selecting "Time Sheet Entry".

atlas before — **Figure 5:** Atlas before CSS changes.

atlas after — **Figure 6:** Atlas after applying CSS changes.

Usability Improvement: Learnability + Safety

The MIT Atlas Time Sheet Entry page is difficult to learn and use safely for new users. A big reason for this is the fact that there is an important notice on the page which is supposed to warn users not to use the browser window 'X' to exit the time sheet. However, the styling of this warning makes it hard for the user to discover since it blends in with the rest of the page even though it is a crucial piece of information that the user should know about since not knowing about this warning could lead users to lock their time sheet by accident. I improved the usability of this site by increasing the contrast of this warning compared to the rest of the content on the site by adding a red background and border. I chose red in this case because users automatically understand that red is a warning signal. I also increased the size of the warning to make it more discoverable to users and added padding to separate the warning from other content on the page (this invokes the design principle of proximity). This change improves both the learnability of the site by providing more obvious instructions to the user about how they should accomplish a specific goal as well as the safety of the site by making it less likely that a user accidentally locks their time sheet. In addition to this improvement, I also noticed that this site has two sets of "Save" and "Print This Page" buttons. This is confusing to users since it is not clear that these sets of buttons actually have the exact same behavior. I decided to also fix this minor learnability issue by hiding the set of buttons above the time sheet entry since submit buttons typically appear at the bottom of forms.

Code


td.noteBlock {
	bacKground-color: hsl(0, 95%, 88%);
	padding: 2em;
	border: 0.1em solid #8c3434;
	border-radius: 0.5em;
}

.pageTitle {
	margin-bottom: 1em;
}

td.navBlock {
	padding: 1em;
}

td.navBlock[align="right"] a {
	font-size: 1.5em;
}

#nav2 {
	display: none;
}