I'm creating a user control which is essentially a wide tile-like button (think Windows 8 "wide" start menu tiles), but in the upper-right corner there's a darkened area which contains a counter. This number can range from 0 to 99999 (well, technically the number can be even larger, but real-life scenarios shouldn't see it go above 20000 which is 5 digits).
The buttons also have a white icon in the middle, which won't be visible in the following screenshots.
The problems are as follow:
a) If there's a small number, it looks... badly out of place. It can be scaled to take up more space, but then two tiles with different numbers (one with few digits, one with many digits) look strange, because the numbers are now of different display sizes
b) I've tried rotating the number inside the counter 45 degrees, which gives me more horizontal space to work with. This sort-of removes the display size issue, but, well, now the user has to read the number at a strange angle.
c) I've also tried setting up a max number limit (say, 999), and if that number if exceed display a + at the end (so it becomes a 999+ and doesn't grow any more). This limits the amount of information the user receives somewhat (albeit if the numbers DO grow to such values then the user doesn't really loose much information - they know the number if high, which is important), but I still need enough space to fit at least 4-characters...
All in all, this is a minor UX issue I'm facing, but one that's been bugging me for a while. I wonder what's the best way to tackle this.
EDIT: I might also add - buttons are displayed on a Windows Metro-like grid, so they are next to each other. Not all buttons have counters. Currently, if a button doesn't have a counter, the darkened area simply doesn't show at all.
EDIT 2: I should also note - the number displayed is... well, I'm having a bit of trouble judging how important it is to the user. The buttons represent tasks of varying types assigned to workers (users). The counter is to represent how many tasks of each type have been assigned. Some buttons are tasks not assigned in the system, so those don't have counters. Otherwise, to me, it seems the most important information is not really how many tasks are assigned, but:
- if there are any tasks assigned or not
- if the number of tasks has changed
- the general scope of assigned tasks - 10s? 100s? 1000s?
Thus I was willing to go with somewhat less readability for more aesthetics.
A friend of mine suggested the following: