The Accidental Developer

University of Michigan jobs site has major browser compatibility issues

At the risk of sounding like a one-note, I would like to again talk about browser compatibility issues. These compatibility issues affect an organization’s bottom line, and should not be ignored. In this particular case, The University of Michigan’s (U-M) job web site is unusable to about 10-15% of visitors, by my estimates (they are using Google Analytics on the page, so they should have that data). To me, this says that U-M may be missing out on some of the most qualified candidates for their position openings, undeniably at great cost to the organization. [I am particularly concerned in this case because U-M is my alma mater.]

In particular, the browsers that are not compatible with the U-M jobs site are Safari, Chrome, and Opera — browsers typically used by more tech-savvy users — so U-M may be missing out on the very candidates best-suited for work in today’s web-based world.
› Continue reading

Tags: chrome, cross-browser compatibilty, opera, safari, um, university of michigan

Javascript textarea counter

I’ve been thinking more about the textarea counter issue that I mentioned in my previous post (“Users Paste Differently“).

First of all, I noticed that some of the textarea counter scripts date back to at least 2000, so this has been a problem that developers have been looking to solve for 8 years. I checked the HTML 5 specification and found that in HTML 5, the textarea element has a maxlength attribute. Presumably user agents will build in the most elegant solution.

But what is the current most elegant solution? › Continue reading

Tags: delicious, forms, Javascript, jquery, textarea, twitter

UI Complaint: submit buttons above the form content

I have seen numerous instances lately where a web application requires the user to look above the form or content to instigate the next step.

Examples:

1. On bordersstores.com, a 6-page list of books has the navigation at the top (and only at the top). After you scroll through the 25 items on the page, you have to scroll back up to the top to access the links to the other pages:
   
   Hint: the links should be both above and below the content.
2. On Wharton’s webCafé, the “OK” button is located above the login form on a toolbar with a different background color:
   Hint: it should be underneath the login form, and it should be labeled “Sign In” instead of “OK”.
3. In Microsoft’s Windows Live, the “save” button is placed above the form in a toolbar with a different background color:
   Hint: put the button below the form. (At least the button is labeled appropriately.)

In the latter 2 cases, one could argue that the button placement is similar to what a user would expect to find in a desktop application, such as Microsoft Word. But it isn’t a desktop application: it’s a web app, and users expect to find form/page actions at the bottom of the form.

You could also argue, in the last case, that the user may want to make a quick edit to the name information without editing all the details. Therefore, it is more convenient to put the “Save” button at the top. That’s fine, but why not offer 2 “Save” buttons, and put one in the spot where user’s most expect it?

Tags: ui

Monday, April 14th, 2008 User Interface No Comments

User Interface Issues

I just recently finished up some pretty cool feature adds to a lightweight CMS that I have built for a client. (they are happy and impressed with it, and It looks like I’m going to pick up another two jobs, where all I need to do is install the code I have written. Yey! I have been trying to get to that point for quite some time now)

One of the major reasons behind the feature upgrade was to fix some huge User Interface problems with “list management”, and they are fixed, but of course now that I’m playing with it, I have discovered that the new UI has some big issues as well. In particular, administrators now see the list exactly as it normally would be, but there are a few links next to each item that allow you to edit it, delete it, or move it up or down. It’s neat but the extra text very much breaks up the visual flow of the list in a lot of cases, and in one case is actually pretty darned hard to access.

› Continue reading