table {
color:#4e4b4b;
}
a:visited {
color:#4e0101;
}
a:hover {
color:#4e4b4b;
}
a[href="http://web.mit.edu/search.html"] > font, a[href="/com/cgi-docs/sfprwmai_sel.html"] > font{
font-size:15;
}
a[href="http://web.mit.edu/search.html"] > img, a[href="/com/cgi-docs/sfprwmai_sel.html"] > img {
width: 0;
}
a[href="http://web.mit.edu/"]:hover > img{
padding:5px;
background-color:#4e4b4b;
}
As seen in Figure 1, the MIT Websis homepage contains what look like radio-button icons next to the left-hand search and email links. This is an unnatural mapping from symbols to functionality- radio buttons are usually used for single select. The font of these links is also very small, creating an accessibility issue. The grey font utilized for all visited links blends in with the background green-ish brown color, violating the design principle of contrast. Additionally, hovering over these links does not produce any immediate feedback except the cursor icon change. All of these characteristics inhibit learnability.
Figure 2 shows how I addressed all of these learnability issues. I eliminated the misleading-signifier-radio-button-like-images, so that users can immediately tell that "search" and "email" are links. I also increased the size of the links' font, and added immediate feedback in the form of color change when hovering over links on the page. This way users immediately learn where links are present, including the subtle MIT logo link at the bottom of the page.
.teaser-clickable{
padding: 0.5rem;
border: none;
border-width: 0.5px;
border-color:#02285b;
background-color:#eeebeb;
}
.teaser-clickable:hover {
transform: scale(1.1);
}
As seen in Figure 3, the NIH homepage is very text heavy, and there are a lot of links. This is a lot of information at once, which inhibits learnability and efficiency through overwhelming the user with a lot of similar-looking information. This page could benefit from more grouping and contrast.
To address these learnability and efficiency issues, I changed the link-components of the page that contain an image, header, and description so that they all have subtle grey backgrounds. Addtiionally, when hovering over these link-components, I added styling to make them larger. In this way, the user can focus on one thing at a time, and immediately see the boundaries between links and groups of links, making the homepage more learnable and efficient, as seen in Figure 4.
td > ul > li {
padding: 10px;
list-style-type: none;
font-size: 15px;
line-height: 20px;
}
td > ul > li > ul > li {
padding: 5px;
list-style-type: none;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
The original MIT course catalog, as seen in Figure 5, contains a list of links to courses. The list items have tiny font and are extremely close together. This list is difficult to use. Efficiency issues occur when straining oneself to read the course numbers and their descriptions. There is a risk of accidentally clicking the wrong course link when finally being able to deciper what that desired course link is. Additionally, all of these course links are bullet points, which is an unnatural mapping to site navigation links. These misleading signifiers inhibit learnability.
To address these efficiency and learnability issues, I added padding to the course links and increased the font size. I also eliminated the bullet points. This makes navigating to various course pages much more efficient and learnable by providing clear boundaries between links and making their site-navigation-nature more obvious.