6

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.

Improve this question
5
  • 1
    Do you have a mockup? What all are you displaying? We need more information.
    – Ben Brocka
    Apr 11, 2012 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, 2012 at 23:12
  • Oh, sorry, users with under 10 rep can't post mockups, thanks for the extra info though
    – Ben Brocka
    Apr 12, 2012 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, 2012 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, 2012 at 15:35

3 Answers 3

Reset to default
3

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
2
  • 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, 2012 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, 2012 at 16:04
3

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
2
  • I wish I could take that easy way! But current design of application refrains me from doing so.
    – UI test
    Apr 12, 2012 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, 2012 at 19:33
0

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.

mockup

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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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