4

I have a number of fields in my UI that could be quite long. Typically this is a location field. Right now I put an ellipsis in the field, but sometimes the user needs to see the entire string. The design initially used marquees (shudder) but I feel there must be a better way to do this.

enter image description here

Some options I have thought of:

  • Tooltip on hover. The tooltips could end up quite large though, and what about tablet?)
  • Marquee on hover, not ideal but possibly not terrible? Not great for tablet either.
  • Show a better shortened data. 27 Packman Drive, LE11 0TZ may give more information and thus negate the need for ellipsis? Hard to ensure string length is short enough though.
5
  • What's the objection against line breaks? Sep 26 '16 at 17:17
  • How about using the Two-line method, the "title" of the location comes as a primary bold and large type and display the full address as a subtext below it, a bit outline. The Full address is a piece of secondary information in this case. Sep 27 '16 at 7:42
  • The main problem with line breaks is the space required. As I said the screen currently shows a fair amount of information and introducing any more "lines" would send content off the page (its a single page dashboard style app)
    – Chris
    Sep 27 '16 at 7:50
  • 3
    Why not expand the field containing the information on user interaction? So the user is in control wether he wants to see the full adress or not. The advantage would be that the initial state would not need additional space.
    – luQ
    Sep 28 '16 at 13:06
  • If the purpose of the app is to provide information, and this is frequently used information, why hide it? Re-design the UI so that important information is available and does not require elaborate workarounds merely to preserve a layout. As noted above, second lines and wrapping are two ways to deal with this. Jan 4 '17 at 19:52
1

Go with a touch friendly approach that will show the user all of the information if they choose to interact with the address label.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

0

Tooltip on hover seems fine if you change the behaviour on touch devices from hover to toggle on click and make a toggle switch clearly recognizable (elipsis in your case, if it’s staying needs to be more recognizable as a clickable object). This is relatively easily achieved with advanced CSS and/or just a little bit of Javascript.

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.