Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Given a form with many input fields, some have long text which exceeds the input field width. I wish to mark those input fields in some way which indicates they have more text than is visible.

I have thought about showing an arrow icon to the right of those fields, but ruled it out, because the user might view the input from the end of it, in which case, there would be more text to the left. I wish to mark it in a way that would be the most obvious and in general-manner that would strongly imply of more text inside.

share|improve this question
    
I liked the idea of expandable "search box" on focus at this site shttp://ux.stackexchange.com –  Jitendra Vyas Oct 20 '12 at 13:10
2  
yes but it's a very very limited solution and you would have to click it to know it expands –  vsync Oct 20 '12 at 16:02
add comment

7 Answers

  • Use a textarea for text that doesn't fit into a regular input field.

  • If you can't change from an input field, consider using an ellipsis (...) which can be clicked/focused/hovered over to expand the size of the input field so that it either becomes wide enough to show all text or becomes a textarea that reveals all text.

  • If you can't change the shape or size of the input field, consider using an ellipsis (...) which can be clicked/focused/hovered over to display the remainder of the input field's contents in a pop up or similar UI pattern.

  • Alter the design of your form so that text entered into input fields doesn't have to be so long that it doesn't fit into the field.

  • Why does the user see input fields already containing content? Is it editable content? If it's supplemental, consider moving the text out of the input field and into a label that sits next to or above the field.

share|improve this answer
    
its for a system I've made: link and I want to indicate to the user there might be more text in some of the input fields, and that indication would be dynamic. An ellipsis is nice but where to put it? the user might be in the end of the text and there would be more text to the left, so I would have to move the ellipsis location to the left side in that case..not so pretty moving the icon around –  vsync Oct 20 '12 at 1:23
    
If the user has already moved to the right, the user has taken that action and is aware of it, so you don't need to indicate anything as badly. Also, the sentence will read funnily as it will start in the middle of the sentence or word, and that in itself will be a give away that there is more text to the left. –  Rahul Oct 20 '12 at 18:41
    
I think i always need, because it can be that the person moved to the right and went do stuff for half and hour and came back and forgot. or maybe another person uses the same computer and didn't know the first one moved inside the input... –  vsync Oct 21 '12 at 0:59
add comment

I agree with Rahul's suggestion of using an ellipsis. When the input does not have focus, you can replace the last few visible characters with a light gray '...' When the input has focus, the full content of the fields should be accessible without the ellipsis.

In Adobe InDesign, text boxes with additional content have a small + in a box that is placed at the bottom right corner of the text area. (Here's an example I found to illustrate what I'm trying to describe: http://creativecurio.com/wp-content/uploads/2008/07/quark-indesign-text-link.gif) I don't know what you are using to create this form, so this may not be possible depending on how much customization is possible.

share|improve this answer
    
this is what I was a bout to write, Implies some DOM and js, but still would be nice –  PatomaS Oct 20 '12 at 6:47
add comment

I saw forms where the last visible characters before the overflow text "vanish" in a transparency gradient. It looks very well, and it's clear what's happening there. I can't remember where ...
I have no idea of how thy did it.
And yes, it is complicated (and somehow anti natural) to overflow at the beginning of the text, you should avoid it by displaying the content in a textarea with enough lines as in your example so the text never scrolls horizontally. This is bad also because the user can't see how much text is there.
Also show all the text on hover, as rahul suggested.

share|improve this answer
    
yes i've thought about that and it seems the BEST way, although a bit tricky to achieve without excessive DOM elements –  vsync Oct 20 '12 at 2:49
    
there is a button in my example that enlarges the text in a way you see it all –  vsync Oct 20 '12 at 2:50
    
button: yes, I saw it and it's good thing. But IMO displaying the full text on hover lets the user see it without any action, and without losing the current focus. Notice that your current button is needed in addition to the hover action I'm suggesting, to be used to start the edition action. –  Juan Lanus Oct 21 '12 at 14:37
    
Given that you like the vanishing text solution, you might want to give a try to an alternative solution I'm thinking of. Simply when there is overflow, set a gradient background image aligned to the right end of the control, spanning about 7 to 10 characters width, with color changing from the background to the foreground. This might result in the same effect in terms of communicating with the user, but not requiring bleeding-edge wizardry. –  Juan Lanus Oct 21 '12 at 16:12
    
There is also this comment about using a black-to-white gradient background image (he uses a CSS3 gradint, but I think a simple image would work) and setting transparent text over it. –  Juan Lanus Oct 21 '12 at 16:20
show 3 more comments

I had thought of a creating a slider under the input field which will indicate the current position,
something like this:

enter image description here

UPDATE:

ok, I've worked a bit and made a plugin (not for IE), take a look

share|improve this answer
1  
that's very cool. it's essentially a miniature scrollbar for the text field, but a great solution. I was very tempted to drag the scrollbar to move around, but I doubt whether I would actually do that in real use. Brilliant, +1 (but deserves more!) –  Peter Bagnall Oct 20 '12 at 22:01
    
thank you very much :) –  vsync Oct 21 '12 at 0:59
    
Would an arrow at either end of the text box work as well? This could be used when you have more horizontal compared to vertical space, or if the scroll control is too difficult to notice/use. –  Michael Lai Aug 20 '13 at 0:01
    
no because an arrow doesn't show where you are –  vsync Aug 20 '13 at 9:07
add comment

Let's think outside the box. Consider showing the ellipsis outside box.

No overflow
no overflow

Overflow to right
overflow right

Overflow to left
enter image description here

share|improve this answer
add comment

I 2nd the suggestion for ellipsis, both on the left if the text is scrolled left of the border and on the right if there's text right of the border.

But I'd make the ellipsis both very small (say 50% of the text font) and a different color, maybe light grey (assuming black text on white). You just need the subtlest visual cue to make the point.

share|improve this answer
add comment

Just use textarea or expand the textbox to one if there is more than one line of text.

share|improve this answer
1  
it's A solution, BUT sometimes it just won't look good in complex situations –  vsync Oct 21 '12 at 17:31
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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