Subscribe to
Posts
Comments
NSLog(); Header Image

UI Question

Got a UI problem in Scorecard that I'm not entirely certain how to solve. Perhaps someone out there can help.

Big screenshot after the jump.

Here's the problem:

Scorecard Stuff

The "Notes" field is a per-hole notes field. Thus, you can enter 18 notes for a round of golf (plus one entire-round note in the "Overview" tab).

Currently, in beta, we've solved this by making the yellow notes little buttons that, when clicked, activate the text field, displaying any text already stored for that particular hole. This is indicated in the bottom version with the red-tinted note.

Two problems to solve:

1) Displaying which holes have notes and those which have empty notes.
2) Displaying which note you're editing/viewing.

I've yet to think of a reasonable solution to showing three states (no note, saved note, editing/viewing note). If you dim any sort of image to indicate "no note" it'll look disabled.

I'm also not entirely certain I like the "sharing" of what looks to be one text area, but since this view is already in a sheet, we're a bit handcuffed in what we can do here. Scorecard is also available for Windows, too, so we don't want to get too Mac-centric in our thinking.

The "note" graphics aren't set in stone either. Online, the notes are more like "comments" - you can see an entire row of disabled notes on this page and a row of enabled notes here1.

So, any solutions? Any ideas?

Footnotes

  1. To see the note, hover your mouse - the note is just in the title tag. I may consider adding a JavaScript action to the notes in the future.

8 Responses to "UI Question"

  1. 1. Different icons.. use current icon for "no note". If there is a note, then add some tiny black text (or just squiggly lines representing text) to the icon to show that there is something "written" on the note.

    2. maybe make it look more like a row of tabs attached to the top of the search field? (with the note icons on the tabs) I think most people understand the tab metaphor.

    1. Tim Buchheim said on April 17, 2009:

      2. maybe make it look more like a row of tabs attached to the top of the search field? (with the note icons on the tabs) I think most people understand the tab metaphor.

      Appreciate the thoughts. Tabs within tabs probably won't work, but the biggest issue will be the fact that the rest of that hole's information isn't in a tab, so why would the note be?

      And what search field? I'll assume you meant text field, yeah?

  2. I would do the same as Tim: use different icons, maybe have the one that is currently being edited stick out a bit towards the bottom. (I suppose this would like "drop-down" as in Safari)

  3. I was going to make the same suggestion as Tim, keep the current graphic as the empty note indicator, add black squiggles to indicate note with text.

    As for the editing indicator, put a discreet highlighting square around the selected note. I would shift the note icons a little further down from where they are in those screenshots to give a little more space both for aesthetics and to allow for the highlight square.

  4. I would approach it similarly but differently at the same time. I'd use a badged image with a plus sign to add a note if there isn't one already with the color less saturated so that it was obvious the note doesn't exist yet, similar to the way you do with the iChat type bubbles in the online component. If there is a note, then show a note image with squiggles or whatever. To indicate the currently displayed note, I would use a pointer similar to what Tweetie does on the iPhone when you view a single tweet and the little up arrow points to the user's avatar. Then, as you select a note, move this graphic to point to the current note so that it looks sort of like a speech balloon from a comic. Another option is to give the selected note's image a slight glow to indicate iti is selected, but I think some connection between the note that is selected and that textarea is needed, so I would go with the pointer image.

  5. I would use grey note icons for holes without notes, yellow note icons for holes with notes, and a little triangle attached to the top of the comment field to indicate which note was being edited. (Picture a voice bubble in a comic book, but upside down...)

  6. I know I'm a little late to the party, so you may have already chosen a solution, but here's my 2 cents...

    The current note icon, in terms of graphic form, works fine with the style of the other graphics. Maybe lighten the top of the note icons, if it's supposed to be part of the note... I'm not sure why it's dark like that. For notes with text already, simply overlay the contents of the note over the icon, in about 2pt bold text — something that will make it stand out. For the currently selected/editing note, highlight or shade it (either as you have now, or as others have suggested), and pull it down a little, so you halve the space currently between the icon and the text area. That'll give a clear indication of what the different icon is for, if it wasn't already immediately obvious.

  7. Oh, and I forgot to mention, once you find a solution (or if you've chosen it already), be sure to show us! 😆


Trackback URI | Comments RSS

Leave a Reply

Please abide by the comment policy. Valid HTML includes: <blockquote><p>, <em>, <strong>, <ul>, <ol>, and <a href>. Please use the "Quote Me" functionality to quote comments.