13

I am building a web app that requires user input of text and images to be placed on a PDF page which will later be printed as a letter. This page will have a specified area for text and a specified font. This font will be a variable width custom font, but the user will not be able to change the size or apply any formatting to the text.

My solution so far is to set up a text area input of a fixed width and height, then using javascript, detect when a user has typed more text than will fit without scrolling and stop their text entry and display an alert. Since I can use custom fonts in that text area I should be able to get a really close approximation of the limited space available on the letter and prevent the user from adding too much text.

To make matters more complicated, the letter will have a front and back page with equally sized text areas, and I need to show that the text will flow to the back page.

Here's the edit screen as it's working right now. Can you please give me some suggestions about how to make this more user friendly? Will users understand this when they see it? We will be doing formal user testing in a few weeks probably. text entry page

Users will be able to preview the letter with all the images and the text in place on the page after they are done writing.

Update: Here's a new mockup taking into account some of the suggestions below.

new text entry mockup

Improve this question
2
  • I think the getting close message is now redundant and a little patronizing. Visually, one can see there's about half a page left, or 1/3 of what's been typed so far, which is a much more useful metric than number of lines or words. As Tufte says, above all, show comparisons.
    – Patrick McElhaney
    Commented May 28, 2011 at 15:35
  • 1
    As a followup, due to user confusion, the two textfield approach was abandoned. Users type into one big text area, then we measure the space left in the background. The user is stopped from typing and given an alert when they are out of space. And there is a progress bar to show space remaining. This has not been a very good solution either. User confusion still reigns.
    – sirtimbly
    Commented Sep 7, 2012 at 14:38

5 Answers 5

Reset to default
2

I like the fixed-height textarea you have. You could use a background image to make it look like a "page layout view."

The image would partition the the textarea into two equal sections with a thin gray border around each section, so it looks like each section is a white page on top of a darker background. It might help to put a watermark on each page, labelled "front" and "back".

If the user types more than two pages worth, the textarea could start scrolling to allow for additional text. But that text would overflow off the back page and onto the darker background.

I think the page layout metaphor would communicate the idea well enough without having to use words. However, it probably wouldn't hurt to add a warning message once the text overflows the allotted area.

Improve this answer
3

I like what you have going there. It is very unique.

A couple other ideas you could use or at least spark something:

  1. When they pass the character count, the text is colored in red.

  2. Have all lines past a point in red.

  3. Have status text as they type and have 3-4 states: (1. Type you message here, 2. (100 words in) Thats it, you have lots of space left, 3. (300 words) Don't worry you still have 200 words left, 4. (100 away from end) Careful, you only have 100 characters left (and 100 would count down as they type from then on 99, 98, 87...)

Improve this answer
1
  • 2
    I like the idea of humanized status messages giving approximate warnings, of course we don't know how many words that will fit, just when the user goes past the end. I should be able to calculate total lines based on line height and font size though.
    – sirtimbly
    Commented May 26, 2011 at 0:47
2

I like what you've done.

When do you first popup the "Getting close" message? Will it always be when there is about 6 lines left? If I understand the interface correctly, how many characters a user can type in the area will differ from user to user, entry to entry. But I think choosing a predictable "threshold" would be useful - that way the user always knows, "Oh, it will warn me when I have approximately X lines to go."

The "Text area has been sized..." message is gone from your new mockup - I thought that was terrific inline feedback.

A small note - the position of "Front Page" and "Back Page" just strikes me as awkward. I think they might carry more weight to be aligned halfway down each page, rather than at the head. Could be just me.

Improve this answer
1
  • Good catch on position of the 'front page', 'back page' text. They get in the way of reading the text on the pages. Might moving them further left be better?
    – James Crook
    Commented May 27, 2011 at 18:24
1

You could calculate an approximate line height with JavaScript and display a warning as they get close to the limit such as "Approximately 3 lines left".

Improve this answer
2
  • Yeah, that might work. Should the message follow the text entry down the margins as they type?
    – sirtimbly
    Commented May 26, 2011 at 0:47
  • Yes, otherwise the user's eyes will have to move away from their text.
    – Zian Choy
    Commented May 26, 2011 at 20:51
1

I like the idea - it's a nice way of giving feedback of how the end result will appear without trying to be precisely WYSIWYG.

One thing I'd question (and this is nit-picking) is the idea of giving the feedback in terms of lines to go. I'd expect (but only have anecdotal evidence) that users are more used to the concept of word counts rather than line counts, so giving feedback on the words to go might be easier for your users to understand.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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