user interface
Improving the User Interface and Experience of FanTogether, Part 1: Some Basics
Lately I’ve been working alongside a few former Strands Fitness guys on a cool, fun web app called Fan Together. Early stages for this project, but that’s what makes it exciting. I’m contributing by doing a bit of user interface design magic, tidying and improving, basically. I thought I’d share a little as we go.
My main goal for Fan Together is to make things easy to use for the audience and easy to build for our developers. I’m not designing too much in advance, mostly winging the changes so as not to overcommit. We’re interested in getting as much feedback as we can as early as we can.
I started with the profile form:
No style, really. Not much more than labels and fields. So I increased the size of the fonts and fields, set the labels to right align, and move a few things around.
Better.
I’m particularly satisfied with the direction of the avatar upload and the drop-down menus, customized via jQuery plugins I’m developing. Taking the opportunity to create a few cross browser solutions for these UI items that I’ve been wanting for a while, particularly for the drop-down menu and Internet Explorer.
However one problem would be a battle visually between an either short or long team list and the basic info options. Furthermore there were other items on the page that would in time make the view very long. I opted for a tabbed layout, with items like “My Teams” separated to their own areas.
At this point the layout has reached a reasonable state. Some fields now are only available when the information is not available via Facebook or Twitter, so there’s less to deal with overall. As a side note, I’m enjoying keeping the labels font-weight: normal except for those related to required fields.
I’ve not yet tweaked the layouts of the other tabs or views, so more on the evolution of Fan Together shortly!