Project type
Sports fan app
user interface
Visit
Fan Together

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.

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.

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.

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.

Next I expanded the map to fill the available horizontal space, followed by a basic table with jQuery-based zebra striping.

Making progress.

We’re chipping away at the app and are nearing beta. Hoping to make the big announcement soon.

Related Posts:

2

2 Responses to “Improving the User Interface and Experience of FanTogether, Part 2: Find a Sports Bar”

  1. 1
    Daniel | Reply
    October 10, 2011 at 11:59 pm

    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).

    • 1.1
      Weszt | Reply
      October 11, 2011 at 1:30 pm

      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.

Leave a Reply