UI Question
Posted April 14th, 2009 @ 06:37pm by Erik J. Barzeski
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:
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 here ((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.)).
So, any solutions? Any ideas?
Donate Life
Posted 17 Apr 2009 at 7:03pm #
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.
Posted 17 Apr 2009 at 7:19pm #
[quote comment="53868"]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.[/quote]
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?
Posted 18 Apr 2009 at 4:25am #
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)
Posted 18 Apr 2009 at 10:42am #
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.
Posted 18 Apr 2009 at 1:18pm #
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.
Posted 20 Apr 2009 at 2:33pm #
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...)
Posted 24 Apr 2009 at 11:40am #
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.
Posted 24 Apr 2009 at 11:41am #
Oh, and I forgot to mention, once you find a solution (or if you've chosen it already), be sure to show us! 😆