user interface
Improving the User Interface and Experience of FanTogether, Part 2: Find a Sports Bar
FanTogether is beginning to come together (enough for beta, anyway) and I thought I’d share a few of my latest contributions to the “Sports Bar” section.
Even though we’re developing with a minimal set of rules, I feel it’s important to keep the tone personal, the forms simple. Furthermore, I’m trying to avoid obvious forms wherever possible and build interfaces that seem more spoken.
The first version of the Sports Bar view focused on two functions: search and addition. While both of these were technically fine, they seemed too impersonal for the kind of experience FanTogether should provide.
First version of the Sports Bar view
After a bit of playing, I decided to combine the search and add functions into a single sentence that sat nicely above where the results would show.
Second version of the Sports Bar view
To make things more useful, I added some jQuery that would set focus to the first text input when the document was ready. To support this, I added a peach-ish focus style.
Text input focus styles now added
To support more advanced users, I next worked on a decent outline style so users could see where they were tabbing to (via the keyboard). Unfortunately I had to stick with a square outline since there’s almost no browser support – planned or existing – for a CSS based radius on an outline.
Outline styles added
Next I expanded the map to fill the available horizontal space, followed by a basic table with jQuery-based zebra striping.
Second version of the results area with new table (1st version)
Making progress.
We’re chipping away at the app and are nearing beta. Hoping to make the big announcement soon.
Nice work. Why not just use the :focus pseudo-class for tabbed selections, though? That should open the door to nice border-radiused and box-shadowed effects, and even a sprite selection if the buttons are built that way (I sometimes set the :hover and :focus states to be the same).
Daniel – good point and I likely will. We’ve got a lot of things to still work through but I’m rather enjoying purposely making things up as I go.