I am currently taking a stab at a problem that - user needs to see all his info in the header. The problem is - as per current design the header is very small .How should I include the user name,dob, address etc in that small field? User also wants that info to be vailable always. So tooltips etc wont work I believe.Any suggestions? One option is to have an information icon and user will have to click on that to get all info.

  • 1
    Do you have a mockup? What all are you displaying? We need more information. – Ben Brocka Apr 11 '12 at 21:39
  • 1
    I am unable to post my mockup but to give a brief idea- I need to fit in all user info like User Name, DOB, Age , ID and address in a rectangular header (header is only in 1/4 of the screen) – UI test Apr 11 '12 at 23:12
  • Oh, sorry, users with under 10 rep can't post mockups, thanks for the extra info though – Ben Brocka Apr 12 '12 at 0:01
  • A number of sites use on-hover to display a full card of the user (facebook, google plus, stackexchange for user with high rep...) – Naoise Golden Apr 12 '12 at 0:17
  • Thanks for your reply. In case of hover over user when user clicks anywhere else on screen that info will go. We want the ability to show that info always to user. – UI test Apr 12 '12 at 15:35

One option might be to modify your design to allow for a drawer menu interaction. This would allow the header area to be as small as the person's name, but give the user the ability to click to expand the content of the page down to reveal the meta data about that user. If a popover like above is too temporary, this alternative would allow the data to be pinned at the top when desired.

drawer menu option

| improve this answer | |
  • Thanks for the suggestion!In this case the only problem I need to deal is there are some buttons below the user name currently so in case of lower drawer action those will get hidden :( – UI test Apr 12 '12 at 15:52
  • Can't you push the buttons down when the drawer is displayed? The point of this suggestion is to have a flexible layout; the header will expand when the user needs full information, and shrink when they don't. – Myrddin Emrys Apr 13 '12 at 16:04

The "Always have it available" requirement tends to rule out hover popovers and tooltips. If the "small space" you're working with isn't large enough to contain the required information (and always have it available) then it is probably time to make your "small space" larger.

Figuratively, you can't fit 10 pounds of sand in a 5 pound sandbag. You need an appropriate sized container. If you can, go back to the drawing board and re-configure the layout with the new requirements. If that's not an option make the small space that you have grow or become responsive as more information is added to it.

| improve this answer | |
  • I wish I could take that easy way! But current design of application refrains me from doing so. – UI test Apr 12 '12 at 16:36
  • 1
    What implies that it's easy? Going back to the stakeholder or team, communicating and making someone understand is never easy. It sounds like that's not even an option you're willing to pursue. – craigminch Apr 13 '12 at 19:33

One method that might work here is to use a popover instead of a tooltip. A popover normally contains more content then a tooltip; and in most cases a very usable form of global navigation IMHO. Within the popover, depending on your business needs a user could then have access to the static text or a link to a user/account page that contains all the needed information.


download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.