Using CSS to Fix WebAdvisor’s UI Mistakes

The University of Evansville recently moved to using Datatel’s WebAdvisor for student and faculty accounts management. The migration of data and the training process apparently took all of 18 months, so when we were finally given access to the WebAdvisor system, my hopes were probably… a bit too high.

While the abilities that the Datatel system provides are probably a refreshing change for the administrators of UE, the company seems oblivious to the fact that websites should be designed by people who have, well, at least rudimentary knowledge of user interaction guidelines. And interaction aside, it seems that Datatel never found it necessary to hire a single person able to design an eye-pleasing layout (individual color schemes for WebAdvisors vary from school to school, so at least I can’t fault them entirely for the color).

It’s not just me that’s amazed at this lack of effort in user interaction. I’ve discussed it with several other students and faculty members, all of whom expressed feelings rather far from adoration over the user interface.

Fixing Their Mistakes

Over the past week or so I’ve cobbled together some custom CSS in an attempt to rectify a few of the design faux pas exhibited so prevalently in WebAdvisor. By installing the style using the Firefox plugins Stylish or Greasemonkey, you too can get a slightly more attractive WebAdvisor!

So far, the rudimentary changes have been as follows:

  • Navigation bar alterations:
    • Links behave like links (added mouseovers)
    • Took away horrendous small-caps and boldness
  • Made the content fixed width (things on the far edges of the page were just too far apart)
  • On pages with tables:
    • Made even-odd row highlighting less distracting: lowered contrast
    • Removed cell borders (may add back in less distracting form)
  • Reset the bottom-of-page buttons on each page to the default style, rather than the strange beveled and all-caps style
  • Made student-menu homepage section headings more readable

The perplexing parts about this are (a) I’ve not spent much time on it, especially with how easy it is to do on-the-fly CSS edits with Firebug, and (b) I’ve had to edit only the CSS to get such an improvement in overall usability (and especially readability). This means that Datatel could hire a freelance webdesigner and fix half of their interface problems right away, for the dozens of universities using the WebAdvisor system! The user interaction failures, however, are another story entirely.

Want to see WebAdvisor prettier than it was before? You can install my stylesheet with either Stylish or Greasemonkey at userstyles.org listed under WebAdvisor: Stop the Epic Fail. WebAdvisor is customized for each university to a certain degree, and this style applies vaguely UE-themed colors to some elements, so please go right now and tweak it for your own system — it should be easy!

This entry was posted in Compute, Human/Computer Interaction. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *