Web UI element to represent two different micro-views of data in the same spot?
- by Chris McCall
I've been tasked with laying out a portion of a screen for a customer care (call center) app that serves as sort of a header/summary block at the top of the screen. Here's what it looks like:
The important part is in the red box. That little tooltip is the biz's vision for how to represent both the numeric SiteId and the textual Site Name all in the same piece of screen real estate. I asked, and the business thinks the Name is more important than the ID, but lists the Id by default, because the Name can't be truncated in the display, and there's only so much horizontal room to put the data. So they go with the Id, because it's fewer characters, and then they have the user mouse-over the Id to display the name (presumably because the tooltip can be of unlimited width and since it's floating over the rest of the screen, the full name will always be displayed.
So, here's my question:
Is there some better UI metaphor that I don't know about that could get this job done, while meeting the following constraints?:
Does not require the mouse (uses a keyboard shortcut to do the "reveal")
Allows the user to copy and paste the name
Will not truncate the name
Provides for the display of both the ID and name in the same spot
Works with IE7
