Visually showing that a textbox contains text longer than its width?

Question

I am evaluating ideas for displaying that there is hidden overflow text in a fixed-size single-line input box.

I this data entry application, we need to keep a particular textbox's width as narrow as possible. 98% of the time it will contain 7 characters or less, but occasionally can contain 40+ characters.

The same screen is used later by another user for review and I want the 2nd user to be able to know that the textbox contains more text.

This post suggests an interesting approach, but not one that I think is visually elegant. I have considered an overflow:ellipsis style, removing it on focus. Also considered changing the size of the input box to grow with the text (pseudo-responsive) but I really don't want the page reflowing while the user is typing.

Has anyone seen any other approaches that I should be considering?

Answer 1

Here's an option:

You could temporarily make the text box bigger.

While active, you would increase the size of the text-box, turning it into a bigger area. Here's a quick mockup.

Before overflow happens:

When overflow happens:

When a field has too much text:

Or perhaps a bit more slick:

Things of note:

• To make sure other elements in your design don't start jumping around, you should make sure it jumps out of its context, and not affect the flow of the design anymore (think absolute position in the case of a web-based application)
• You might have to make sure that it's dismissible (a small x in a corner or similar) because it could overlap other form fields, making it harder for someone to access that field.
• In the "When overflow happens" mockup I've added a shadow to indicate that its position is different than before, making it seem as though it "jumps out"
• A type of drop-shadow on the left can make it seem as though that side is overlapping more text. Take into account that the drop shadow has to be large enough to look good even when the border isn't exactly on top of half a letter.

Summary

The general idea is to show that you're hiding something, and that layering your UI can help out here. What type of graphics you come up with depends on the rest of your application.

---

Ps.: It seems I totally misread the question at first, making my answer seems like a bit of a shot-gun approach. I'm going to leave it up though, as most of the extra guff seems to cover further questions that may arise.

Answer 2

I think, the following cite from UsabilityPost is applicable to your case:

This might sound banal, but there are often cases where blindly following best practices and design theory slowly pulls you off the right track, so that you end up designing something for the sake of a good design — whatever that is — rather than for actual use.

Any solution for elegant text hiding pushes reviewer to more interaction which could lead to following outcomes:

• Missing the text checking by error (unusual control or interaction, bad solution, etc.)
• Skiping the text checking as more activity is required
• Checking the text with additional time consuming and possible usability frictions

I do not propose a solution, just warn of its cost.

Answer 3

Building on this post and the ideas from @Kiorrik ... I came up with this approach.