2

I can't decide which of the following 3 options is best so I'll ask here which option would you choose and why?

Edit: to be clear those are text input controls and not cells of table data.

Try them out here -- http://codepen.io/run-time/pen/LEGqqJ

enter image description here

Improve this question
3
  • Right now I'm leaning towards the last option that I found on Yahoo!
    – DaveAlger
    Dec 10, 2014 at 0:50
  • I'm seeing the last option used more than any other option when it comes to "text input" controls. Apple seems to use the Red Pill for text input controls and ... for everything else. Every other big name that I could find uses the third option ( yahoo.com )
    – DaveAlger
    Dec 10, 2014 at 21:16
  • Often an approach is widespread and appears preferred because "because it was easiest for developer to implement". Which is the antitheses of UX - see "Inmates are Running the Asylum" by Alan Cooper. Common does not mean good or best, but "convention" can be a significant factor.
    – Jason A.
    Dec 10, 2014 at 21:54

3 Answers 3

Reset to default
3

This is more a matter of taste & design than usability. Both 1 and 2 indicate that there is some text hidden. Option 3 doesn't always do that, it just depends on the length of the field and the input. So in terms of usability, I'd scratch that one if I were you.

Now, comparing red pill vs blue pill. With the red pill you can still see (and select) the entire text. You can't do that with the blue one (well you could, but it'd be more work).

In the end, it all comes down to:

  • Does it fit your design?
  • How will this control be used (full text selection vs selecting just the first part)?

My recommendation: Don't go down the rabbit hole... On a more serious note, I'd take the red pill.

Improve this answer
1
  • thanks for the feedback everyone. it doesn't make sense to use ... inside a text input so i went with a fade-out and on focus the entire contents are selected so it's clear to the user they can just start typing a new value over the old one regardless of how long it is.
    – DaveAlger
    Dec 12, 2014 at 21:03
1

Take the red pill! It shows that there is more content without cutting of the data in a hard-edge sort of matter. If the rest of your UI is more of a 'metro' design, use the third option.

Improve this answer
1
  • thanks for the feedback. google, yahoo, bing all seem to use the third option (at least for input fields)
    – DaveAlger
    Dec 10, 2014 at 3:12
1

I seem to disagree - don't use the third option. If things turn against this design, there is no indication that there might be more text (i.e., when a word nicely ends at the right side - in your case, when the field would have been 5 pixels more narrow).

The Red Pill is more innovative (which might or might not fit with your design and target group and browser population), while the Blue Pill is more conventional (which will be the safe choice). Choose which fits best into your design, I'd say.

Improve this answer
2
  • I think displaying a long string in a small cell is different than text a user inputs being too long to fit in the box. For the first case the ... seems to be the most understood way of showing that more data was returned than i can show while in the second case the user just finished typing past the end and most likely don't need any reminder that there is stuff not showing.
    – DaveAlger
    Dec 10, 2014 at 21:13
  • @DaveAlger I don't believe I remember everything I ever entered into a text field. So I - at least for myself, and I assume I'm not unique - would like an indication that I entered more than was fitting into the field. :-)
    – virtualnobi
    Dec 17, 2014 at 8:03

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.