Improving the Web with CSS!

Making websites easier to use.

DesignFTW lecture slides

Website link: https://designftw.mit.edu/lectures/safety/index.html#whos-in-control-what-are-tradeoffs

The lecture slides for 6.S063 often have key information in a details box labeled "Notes" in the top right corner. The issue is that size of the box and the font size of the notes vary from slide to slide, so sometimes the box ends up hidden behind the slide counter and the notes become uncomfortablly small to read. The two screenshots below illustrate an extreme instance of this.

This issue impacts the usability dimensions of efficiency and safety. The small, partially-hidden box is harder to click, and the small font size makes it harder to read. Also, new students who are not used to checking for the notes box may miss it entirely (as I have done, and sometimes still do).

The CSS fix: the following CSS sets the right margin and the font size of the box so that its positioning and size relative to the slides counter is fixed. (The size and positioning of the counter are given in vh units, so the CSS fix uses vh as well.)

In particular, the notes box will never overlap with the slides counter, and the font size of the notes will be consistent across all slides. Here's what it looks like after the change:

Set With Friends

Website link: https://setwithfriends.com/

Visit the website as a non-logged-in user and click the settings icon in the top right. A dropdown menu with display customization options appears, as shown below.

The option of interest here is "Change user color". The other options are fine — clicking one of them lets the user do what is advertised. However, clicking "Change user color" opens a page asking the user to become a patron:

When I first encountered this behavior, I thought it was a bug, and I spent some time clicking around trying to figure out how to actually change my color. It wasn't until I came back to the above page and read it more carefully when I realized that changing my color is a feature only available to patrons, as stated in the third point in the bulleted list. This is an issue of learnability. There is no information scent to help the user discover that changing colors is conditional on patronage. Also, the fact that the other options in the settings menu don't require patronage creates a consistency issue.

The CSS fix: my fix is to emphasize the relevant information: the CSS below selects the third element of that particular list and styles it to stand out.

h4.MuiTypography-alignCenter + div > div:first-of-type li:nth-child(3) { 
    font-weight: 900;
    font-size: 1.1em;
    color: #8c9eff
}

Here's what it looks like:

This helps, but I think the better fix is to change to menu options (or condition on user's patronage status), which would require more than CSS.

Rangzen Tibetan menu

Website link: https://www.rangzentibetanplace.com/menu

Rangzen Tibetan has a menu with a pricing for "standard" portions as well as a pricing for catering portions. The same dish will often appear in both sections. In terms of presentation, the menu is divided into different types of foods and each section is displayed in a table-like box entry. The issue is that the entire catering section is grouped under one box as if it were another food grouping, making it harder to tell that the catering section is in fact a different "mode" of purchasing and also making the menu page extremely tall. This is an issue of learnability (discoverability of the catering menu) and efficiency (need to scroll a lot to compare catering prices to standard prices).

The CSS fix: I widened the catering menu both to distinguish it from the other boxes and also to reduce some of the scrolling needed to get to the bottom. I also bolded the section headers and made the catering header larger than the other headers.

div.cat-item.columns.medium-4:last-child{
    width: 100%;
    
}

.textured-box a[name="cat-catering"] + h2 {
    font-size: 1.5em;
}

div.cat-item.columns.medium-4 :is(h2, h3){
    font-weight: bold;
}

Note: inserting this CSS directly into the page will not change the catering menu's initial position, I believe for reasons having to do with the fact that its position is set to absolute by an inline style attribute. Thus the catering menu will simply expand and cover a neighboring box. However, if you save the CSS in the Stylus browser extension and reload the page, the change will work as desired. Here's what it looks like: