Fix the Web with CSS!
Fixing Websis!
Looking through the recommended websites to change, I remembered that websis has some things that needs to be fixed. Below I have curated some of the fixes and describe what usability/graphics improvement I have used.
Fix 1: Graphic Design Improvements
One of the first thing I did when improving the websis website was changing the background and text color. The original color clashes with each other creating a horrible contrast. Thus, to make it more simplistic and having better contrast, I decided to change the colors to white background and black text. Oh, and to make the contrast more relevant, I also up the font sizes for the links to make sure that the constrast is there.
Fix 2: Made the links easier to interact with using Fitt's Law
One of the things I realized for this website is the purpose of this website. The purpose of this website is to give a bunch of links that users can click to go to other places. This made me thought of using the concept of Tabs to make it easier for the user to navigate. I couldn't change the HTML (and the structure was horrible), thus I modified the a tabs such that it now has a larger range of positions where a user can click on. The purpose of this is to improve efficiency. In class we learned about how increasing the size in which a user can click things can help increase efficiency. Thus, the change was done to improve efficiency.
CSS for websis
* {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
background-color: white;
color: black;
}
b, strong {
font-size: 18px;
}
tr td table tbody tr td a {
display: inline-block;
min-width: 25vw;
padding: 10px 12px;
}
tr td table tbody tr td a:hover {
color: #004499;
outline: 2px dashed #004499;
outline-offset: 2px;
}
tr td table tbody tr td a:has( > img):hover {
outline: none;
}
tr td table tbody tr td font {
color: #6D2316;
}
a, a img, a img font {
cursor: pointer;
}
tr td table tbody tr:has(td > font) {
background-color: black;
border-bottom: solid;
}
tr td {
min-width: 10vw;
line-height: 1.6;
margin: 2px;
}
Before:
After:
Fixing Hass Form!
After learning about safety and ways to prevent it, I thought about some of the irreversible actions that I have performed this year. I remembered that I needed to submit my Hass Concentration Form, but I did some irreversible actions that made me email a bunch of people to make sure nothing bad happens. Below are some fixes that I did.
Fix 1: Fixing a Safety Issue
The problem I had with this website was that the "Save", "Save & Submit for Approval", and "Cancel Form" both are on the same line with the same color. Last time I accidently click the cancel button instead which just destroyed my entire form (I didn't know that cancel means deleting the entire form cause I have used it in a while). Thus, I think some changes to do is to change the color of the buttons to make it more safe. While a user still might not recognize that "Cancel" means delete, they should be more cognizant of what they are clicking. If they are more aware of what they are clicking, there would be an increase in safety as users would less likely click the wrong button causing irreversible actions. I left the other buttons the way it is because those buttons are reversible buttons. You can add a subject but still remove them later.
#btnCancel {
background-color: #dc143c;
}
#btnSaveSubmit, #btnAddSubject {
background-color: #50C878;
}
#btnSave {
background-color: #808080;
}
#btnCancel:hover {
background-color: #B01030;
}
#btnSaveSubmit:hover {
background-color: #3FAF63;
}
#btnSave:hover {
background-color: #666666;
}
#btnCancel, #btnSave, #btnSaveSubmit {
background-image: none;
color: #ffffff;
text-shadow: none;
font-weight: 600;
}
Before:
After:
Fixing Cupcakes!
This website had some alignment issues with the navbar. So just some graphic design changes.
Fix 1: Alignment issue
The navbar for some reason when clicked is not aligned properly as shown in the images below. Thus, this is an alignment issue and violating the graphic design principles. Thus, the navbar was fixed such that the sidebar actually aligns with the heading bar, making it more aligned and satisfying the graphic design principle of alignment. However, I also noticed that there were other alignment problems not related to the sidebar. My fix was to use a flex container and then use row for the flex direction for the first section of the webpage. However, while I was able to grab the first section, the HTML was written so horribly that I don't know how to only use css to first group the heading and that button together and then the picture separately. Thus, I only change the alignment problem in the navbar.
#mySidenav {
margin-left: 50px;
margin-top: 60px;
}
Before:
After:
Fixing UROP Application Website!
I remember in Freshmen year, I wanted to find myself a UROP. After asking a bunch of professors if they would take me in, I excitedly went to the UROP Application Website to apply. When I first arrived to the page, I saw "View your UROP Aplication", which was clickable, and also "Begin a new UROP application". I kept on clicking on the text thinking it would take me to another page. I then even clicked "View your UROP application" link and still can't find the create application button. It was not until I came back and read the big paragraph where it said please go to the left and select. The buttons on the left are so SMALL. There was no way my attention could have gone there. While I would like to remove this paragraph all together and just put the button right below it, I can only change the css to make the button more obvious. Thus, the changes below addresses the changes on the left panel and also some font changes.
Fix 1: Learnability Fix
The immediate thing that needs to be changed is the size of the button and also the color of the button on the left panel. While increasing button does does it make it easier to click, the focus is not that. The focus is to allow the user to see the button to begin with and have it a different color so that the contrast is clear enough the user will notice it. Thus, this improves learnability because now the user does not need to go all over the website to figure out where the new application button is and the button becomes a signifier. I also increased the size of the texts on the left panel to make it more obvious. Another thing I did to improve learnability is to separate the list elements with margins, thus more closely related items are together and less closely related things are further apart. This improves learnability as now the users would find the new application button even more easily. I do wanna note that the select button here is not necessary because there is only 3 options.
#sectionlinks ul{
list-style: none;
display: block;
font-size: 21px;
}
#sectionlinks li::marker {
content: none;
}
#sectionlinks li {
margin-bottom: 24px;
}
h1 {
margin-top: 0;
font-weight: 600;
color: #222222;
}
p {
line-height: 1.6;
margin: 8px 0;
}
form {
margin-top: 12px;
}
form input, form select {
margin-bottom: 5px;
}
.required {
font-size: 12px;
}
form input {
display: inline-block;
padding: 12px 24px;
margin: 0 0;
background-color: #4169E1;
color: #ffffff;
text-decoration: none;
border-radius: 4px;
}
form input:hover {
background-color: #314b98;
cursor: pointer;
}
Before:
After:
