Table of Contents

• Zara - Learnability
• Zara - Contrast
• Outlook - Safety
• Reddit - Efficiency
• Reddit - Consistency

Zara - Learnability

Before:

After:

Code:

.category-topbar__bar {
	opacity: 1 !important;
	transform: none !important;
}

Improvement:

Usability Dimension: Learnability is improved because the system model doesn't match the conceptual model. Zara hides the page controls, expecting the user to move their mouse over it to access it again, but if users don't see it, they would normally scroll to the bottom of the page, where they still won't see it. I used !important because I was overriding CSS that in in style attributes.

Zara - Contrast

Before:

After:

Code:

.layout-header-std { 
	background-color: white;
}

Improvement:

Design Principle: Contrast is improved because the header is a unique element from the content, so they should be separated (e.g. by color), making everything look clearer to the viewer.

Outlook - Safety

Before:

After:

Code:

.EjecV {
	visibility: visible;
}
.BXibp {
	display: inline;
}
.rKfmP {
	background-color: #fef2f3;
}

Improvement:

Usability Dimension: Safety is improved because unexpected/dangerous commands (e.g. delete) are made more visible to the user. Since the buttons for mark as read, flag, pin, and delete are all hidden in the space of the inbox message, users who are quickly clicking into the message with their cursor may click one of those options instead of opening the message itself. While this may not be the most effective solution to the safety issue, it is one that can be achieved using solely CSS.

Reddit - Efficiency

Before:

After:

Code:

.border-b-neutral-border-weak {
	border-bottom-color: #d93900;
}
.border-b-sm {
	border-bottom-width: 0.5rem;
}

Improvement:

Usability Dimension: Efficiency is improved because as with the examples in class (large menu, direction on road), it is very difficult to differentiate between the elements of different posts as well as where one post ends and the next one begins. This disrupts the user's flow, making it more difficult (it makes them have to think where to look) to scan through the content smoothly, so having more defining separations is beneficial.

Reddit - Consistency

Before:

After:

Code:

.theme-rpl {
	--color-action-upvote: #6A5CFF;
	--color-upvote-background: #6A5CFF;
	--color-upvote-background-hover: #523DFF;
	--color-upvote-content: #523DFF;
	--color-action-downvote: #D93900;
	--color-downvote-background: #D93900;
	--color-downvote-background-hover: #AE2C00;
	--color-downvote-content: #AE2C00;
}

Improvement:

Design Principle: Consistency is improved because using colors like green or blue to represent positive actions and colors like red or orange to represent negative actions is consistent with norms. Reddit's choice of purple and red doesn't align with common user expectations.