Exercise 1

For this exercise, I focused on improving the timesheet-entry platform on MIT Atlas, as have started using it recently and had multiple changes I wanted to implement. The following code is the entire stylesheet for all changes. (Also accessible through here.)





select {
  background-color: #FFF8E9;
  padding: 2px;
  border: solid 1px #c35b38;
  color: #c35b38;
}

#salary > table {
  border-spacing: 2px 10px;
}

td.bannerBlock {
  background-color: darksalmon;
  padding: 20px;
  font-size: 20px;
}

span.subheadDim {
  font-weight: normal;
  color: white;
}

th.tableHead {
  background-color: darksalmon;
  color: white;
}

td.data {
  background-color: #FFF8E9;
}

.pageTitle {
  color: #367a88;
  font-size: 22px;
  font-weight: lighter;
}

#nav1 > table {
  border-spacing: 2px 15px;
}

a {
  color: #990000;
}

td.noteBlock {
  font-size: 18px;
}

td.navBlock {
  background-color: white;
  padding-left: 17%;
  padding-right: 40%;
  font-size: 18px;
}

div#hi1 > table {
  margin-bottom: 2%;
}

div#mid {
  margin-left: 15%;
  margin-right: 15%;
}

div#lo1 {
  margin-left: 15%;
  margin-right: 15%;
}

div#lo1 > table > tbody > tr > .medium {
  padding-left: 57.5%;
}

#vaca > table {
  margin-top: 9.5%;
}

textarea#t_emp_comments-tdline\[\] {
  width: 708px;
}

Usability Improvements

Safety

User Slip Error The timesheet-entry table in the platform is quite small, and its rows are very close together. This means it is both, likely that users might mix-up the rows when trying to enter hours for a specific day, and mispress the correct dropdown menu due to slip error. The following code added spacing between the rows of the table itself and allowed easier tracking of rows and pressing of dropdowns.

#salary > table {
  border-spacing: 2px 10px;
}

Warning Messages Above the timesheet-entry, we see a warning message displayed, letting users know not to close the tab or window through any flow other than the "Close" button. Nevertheless, the formatting of this warning is very similar to the header of the page, as well as displayed in a smaller font. All these factors impact the website's safety, as users are likely to look past the message and lock the form regardless. To target this, I whitened the background of the header, making sure the warning was the only highlighted message. Moreover, I increased the font size of the warning.

td.noteBlock {
  font-size: 18px;
}

td.navBlock {
  background-color: white;
}

Date Displayal Within the main navigation bar, we can see today's date, which helps orient the user when searching for weeks in the timesheet-entry. However, in the original design, this date is exhibited in a very small, non-contrasting way, making it nearly non-visible. This leads the user to remain at a loss. To target this, I made the text size for the date larger.

td.navBlock {
  font-size: 18px;
}

Graphic Design Improvements

Constrast

Poor header contrast. The headers for the timesheet-entry table were displayed in blue lettering with a slightly lighter blue background. This lack of contrast made the text hard to decipher. Moreover this makes the website much less accessible to individuals with eyesight dissabilities, such as colorblindness. To target this, I altered the coloring of the header to display more contrast.

th.tableHead {
  background-color: darksalmon;
  color: white;
}

Consistency & Repetition

Lack of consistency accross table. Within the time-sheet entry table, there are dropdown-type inputs that are starkly different from the rest of the cell. Although this makes the design somewhat learnable, as it an acton signifier, it lacks the consistency required in good graphic design. To target this, I altered the dropdown inputs to be similar to the cell designs, making them consistent. To stll maintain learnability, I added a colored border and changed the color of the text, therefore signifyng a call for action.

select {
  background-color: #FFF8E9;
  padding: 2px;
  border: solid 1px #c35b38;
  color: #c35b38;
}

Little difference in navigation bar contents The title and date within the main navigation bar are slightly dfferent colors, with the later one being a light blue rather than white. Since there is not enough difference to create contrast, it is more productive to make both texts similar instead. Due to this, I changed the date's color to white.

td.navBlock {
  background-color: white;
}

Alignment

Lack of alignment accross page components. Another key component of graphic design is ensuring different elements are aligned. The timesheet table, the sick-hour counter table, and the comment textbox, although aligned to the left, are all somewhat disproportioned, making the overall design a bit non-cohesive. To target this, aligned the heading for the sick-hour counter table to the heading for the timesheet table. Moreover, I aligned the right of the comment box towards the bottom with the right of the sick-hour counter table.

#vaca > table {
  margin-top: 9.5%;
}

textarea#t_emp_comments-tdline\[\] {
  width: 708px;
}

Balance

Lack of balance accross page components. Finally, balance is euqally as important in graphic design. The overall structure of the page was very left-sided heavy. With the enlonging of the comment box, this was bettered. However, the unbalance still persisted. To target it, I first accomodated all components towards the middle of the page. Subsequently, I moved the action buttons underneath the comment box to the right, contrasting with the same buttons in the upper-left corner. This also improved learnability, as users often expect submit-type buttons to be presented in the lower right corner.

textarea#t_emp_comments-tdline\[\] {
  width: 708px;
}

div#mid {
  margin-left: 15%;
  margin-right: 15%;
}

div#lo1 {
  margin-left: 15%;
  margin-right: 15%;
}

div#lo1 > table > tbody > tr > .medium {
  padding-left: 57.5%;
}