Death to the GridView

In my experience, the User Experience and User Interface of in-house corporate software applications is just awful. Every day I wonder to myself how many people come to work at a job they love, and have to use software that makes them despise it.

These terrible in-house software applications tend to love using GridViews (or their desktop brothers, the DataGrid). One of the UI/UX quotes I heard a while ago that I'll never forget went something like this (I'm paraphrasing):

"When it comes to UX, using a standard DataGrid is like giving up."

(I think Scott Barnes may have said this on Twitter, but I don't recall the exact quote and couldn't find it. Drop me a line if you know who said it or have a link.)

Over the past few days, I redesigned a screen that was one of these default GridView screens. It was recklessly laid out, with obviously little thought put into content placement. Here it is:

Pretty bad, right? Here's the redesign:

Hopefully I made someone's job a little more enjoyable :)

Creating a nice effect to populate input fields

Recently, I worked on a new feature for a client facing web application; the basic idea is that we want users to be able to save favorite items to allow them to quickly place orders for high volume items.

TL;DR - Skip to the demo.

A quick overview of the UI

The load favorite button is shown on page load. When the load button is clicked, the user will be presented with a jQuery UI dialog that lists all of their favorite items. Once the user starts entering text, the load button disappears and the save button is shown. Clicking the save button saves the data via a simple AJAX call. Simple, intuitive and easy to use.

The effect

When the user clicks the load favorite button, we present a nicely laid out list of their favorite items. When a favorite item is selected, we will show a helpful animation of the appropriate text "jumping" from the dialog into the text inputs. I accomplished this by doing some simple math to find a point between the X coordinates of the dialog text and the destination input and subtracting 150 pixels from the ending position Y coordinate. I took those 3 points, and used crSpline to build the animation path. crSpline is an efficient (in my experience) JavaScript library to find the Catmull-Rom spline for a set of given points and was written by M. Ian Graham (he goes by MmmCurry on GitHub and has an awesome Gravatar).

Let's take a look at the code.

The HTML:
Note: The favorite items are statically listed here. In the real world they are loaded via AJAX and added to the page using a jQote2 template.

The jQuery UI effect JavaScript:

You may notice this looks very similar to jquery.effects.transfer.js from jQuery UI, which is what I used as a starting point.

We can use the jump effect like this:

You'll notice the jump effect sets a default class of ui-effects-jump. This can be overridden by passing a class as part of the JSON object in the 2nd parameter.

Here's an example overriding the default class of ui-effects-jump:

Overall, the code is pretty simple. Check out the demo.

Hello

Hi there. I know this site is a little bare at the moment, so I apologize. I'll be posting things here as I have time. I am working on organizing some semblance of a portolio and have a few posts that I've started writing. Hopefully some of these will be useful to someone :)