15 June 2012
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 :)
11 June 2012
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.
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.
Let's take a look at the code.
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.
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
Overall, the code is pretty simple. Check out the demo.
07 June 2012
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 :)