Archive for the ‘Human/Computer Interaction’ category

Most Ambiguous Button Award

February 10th, 2010

The Akismet plugin for Wordpress wins today’s Most Ambiguous Button award. After subconsciously struggling with the meaning of the “Update options »” button, I realized why I was having such trouble: “update” could be either a noun or a verb, and both words can mean a variety of things in different user interfaces. Moral:  always choose a label for a button that makes its meaning intuitive, or familiar to users, rather than labeling it according to what it does on the back end. “Save changes” would be a good choice here.

On Google Wave’s UI: Where to Put the Blip-contributors

January 31st, 2010

In most of the Google Wave waves I use, it would make more sense to have the blip-creator thumbnail and name changed to be right-aligned, basically what I’ve mocked up below.

This style is less disruptive to the overall document’s formatting, and makes the wave look much more cohesive and professional. For chat-style exchanges, it’s important to keep what is said closely linked to who’s saying it, but when collaboratively editing, it’s rather unnecessary, and turns out to be more distracting than anything else.

[Continued 10 minutes after realizing this would actually be doable with Stylish]

Here I present to you, the smallest style with the largest impact for Google Wave: Now all of my waves look like this (except they’re not in Russian).

1

The names of the blip’s contributors are hidden, as well as the time/date (I don’t need either one near enough to justify how much they mess up the formatting of blips). The drop-down menu is made smaller but still displayed. The good part for you is that each part is incredibly easy to hide or show; the CSS is below, and if you want to hide or show the time, names, or menu, just add or delete the appropriate item from the list!

Want it quick? Firefox users,  install it from here as a Stylish style or a Greasemonkey script. I also threw together a simple Chrome extension.

.GTB[dc=contributors] {

    float: right !important;

    margin-right: 0 !important;

    margin-left: 2px !important;

}

[dc=menu] {

    width: 9px !important;

}

.MTB[dc=time], .KTB[dc=names] {

    display: none !important;

}

Chapple and Operational Transformation

October 19th, 2009

I’d love to experiment with adding a simple form of operational transformation to my HCI chat app project, Chapple, but sadly I’m out of time. Operational transformation in Google Wave, as an example, is what prevents the simultaneous edits of multiple people from being put in all the wrong places within the wave. Chapple is still pretty jazzy; perhaps adding OT is a project for the future.

Using CSS to Fix WebAdvisor’s UI Mistakes

October 16th, 2009

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!

UI Responsiveness in Google Wave

October 14th, 2009

Responsiveness is an absolute must in any UI, and it’s one must that the Google Wave client won’t have, until they implement better lazy loading practices.  When marking something as read/unread (amongst other actions in your inbox), there is a tangible pause until the wave you’ve selected is loaded, before the action happens.