How to gently lock a form when user is still typing (after finished countdown)?

Question

I’m creating a website where users practice writing short stories. One particular task is writing a story in less than 15 minutes (the stories will later be reviewed/rated by other users).

The corresponding webpage consists of a 15 minute countdown, a textarea and a submit button.

Users may submit the form prior to the countdown expiry. But what should I do when users don’t submit the form before the countdown is over?

If they were finished writing the story and just didn’t bother to submit the form, no problem: just disable the textarea and auto-submit it.

But if they are still actively writing, it would be really harsh to lock the textarea. Uncompleted sentences or words might be submitted this way.

How should I implement it?

Note that it’s not like a formal exam where it’s important for fairness reasons that no-one gets more time. It’s just for fun and it wouldn’t be a problem if someone gets 1 minute more time. But then again, after this extra minute is over, I’d have the same problem if the user is still actively typing.

Answer 1

I would not disturb the text editing area. You never know where the user is editing, so let her use her time in the box as she likes.

Instead I would make it clear at all times how much time is left, and show that the submission will automatically be carried out when the time is out, by blinking the button when the time is running out.

In the mockup below the button text "Submit" is replaced with "30", blink, "29", blink, "28", blink, and so on, and when the time is up, a click on the button is simulated.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

You could just fade the text as a function of extra-time, Fade = F(extra_time), so at some time the text would just dissapeared. It is not forcing and not punishing for user.

At the same time it is a soft indicator for other users of using the extra-time for this text. This feature could be used for engaging users and giving them a badges of "black", "gray" or "white" author, which is a part of gamification.

Size of the text could work, too, assuming the Font_Size = F(extra_time).

Answer 3

As an extension to other answers, which describe good visual hints for writers:

You could auto-submit the text in background when the time is up and indicate to the user that he/she is allowed to make minor changes, but all changes after the timeout will be marked. It's his/her decision when to finally submit. This way there is no hard limit. They may finish their sentence or take some time to correct spelling mistakes.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Other users will consider the overtime work in their rating. Thus abusing this feature will be punished by the community.

Answer 4

This reminds me of the technique used by school teachers in the classroom when it's time to move the lesson on: "Please finish what you're doing and put your pens down." Students have a little time to dash out a sentence or two but not cause the class to wait 20 minutes.

Provide an extra minute (or two) of time, and limit the amount of extra characters your user may type after the initial countdown finishes (200 characters, for eg). This way, if they hit the time limit mid-sentence or mid-flow, they have a chance to finish what they were saying, but not dash out another few paragraphs.

For example, if your user has managed to dash out the following when the 15 minutes expires:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum velit, commodo vel volutpat ut, vulputate quis eros. Donec a leo faucibus orci feugiat pharetra. Donec a dapibus orci, vehicula sagittis enim. Etiam bibendum elit quis augue rhoncus, in congue ma

Assuming 2 minutes of extra time and 200 extra characters limit, they will be able to finish typing:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum velit, commodo vel volutpat ut, vulputate quis eros. Donec a leo faucibus orci feugiat pharetra. Donec a dapibus orci, vehicula sagittis enim. Etiam bibendum elit quis augue rhoncus, in congue massa sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras in eros ut felis rhoncus ullamcorper.

This allows them to reach a natural ending rather than a half-finished sentence or delayed flow.

Answer 5

You could perhaps provide each user with "additional writing time" -- say 5 minutes a day maximum. If the user runs out of time, you can lock the field. The user can review what they have written and, if they notice any mistakes, can click "Use extra time" and use X minutes of their daily allowance. You could perhaps top up the allowance as the user contributes -- say an additional minute for each 15 minutes written, up to the maximum. (Come to think of it, you could probably sell them additional time, too, as "in-app credit").

Answer 6

Note that it’s not like a formal exam where it’s important for fairness reasons that no-one gets more time. It’s just for fun and it wouldn’t be a problem if someone gets 1 minute more time. But then again, after this extra minute is over, I’d have the same problem if the user is still actively typing.

To extend that, would it be a problem if someone got even fifteen minutes more time? A simple option to implement would be to have no higher limit: just switch the timer to counting up rather than down (maybe highlighting, e.g. in red, after 15m).

Any submission that's over time could have the additional time listed beside it when looking at submissions:

• A Tale of Three Cities — E. Dickens //Normal submission
• Wuthering Depths (+05:32) — C. Brontë //Late submission

Like par in a golf game, community reputation as someone mentioned above, will make people conscious of staying as close as possible to the 15m cut-off by themselves & they will police themselves.

Answer 7

After 15 minutes disable the text area and enable a second one for the user to include "extra words".

Reviewers will see the complete story but the first 15 minutes will be in a different color.

Also don´t forget to disable Copy-Paste in your text areas.

Answer 8

IMO, the best approach is to keep a constant timer display on the top right corner of the text area. And to inform the user before the test begins that the content will be auto submitted.This will make sure all of your target audience will know that this is a timed typing scenario.

If you just popup a little timer 30 seconds before, it will make no sense to some one who types with his/her head down looking at the keyboard for longer duration.

Answer 9

Some ideas:

1. Give continuous feedback during the authoring process about how much time is left. Show a progress bar, and consider changing something in the text area for folks who get focused (either font color or background could work). Gradual changes are less noticeable than flipping the color of the text with 5 minutes and 1 minute left.

2. When you get near the end--for example, in the last minute--make significant changes to the interface, for example, changing the background color of the text area.

3. When time is up, give a minute or so for editing time, enforced with rules like:

   • Prevent any changes that increase the overall length of the text. This will allow the author to correct many typos and edit out bits that didn't belong, but not write anything 'new'.

   • Detect when the user is adding more than a few new characters at once and start slowing down how quickly they appear. E.g., the first three letters you type show up at once, but the fourth is slowed to a half second late, and the fifth and later are a full second late, each. All the while the clock is ticking down. Backspacing is always fast, of course. ;)

In combination this will guide the user toward completing their essay without giving them a truly hard stop.

Answer 10

As a practicing 15-minute-drabble writer, I suppose let the user know at any time how much time they have left. When out in the park, we look at our watches every now and then.

Later, when you are a more experienced writer, you automatically know when to check the time and when you need to finish your current sentence and do a quick review (when there is only 2-3 minutes left). Showing the time constantly won't be disrupting: when you write, you focus only on the textarea, nowhere else.

You can additionally warn the user at 12-13 minutes with a blinking clockface background that time is running up for them. Then disabling the textarea after the 15 minutes are up won't be harsh.

Answer 11

I wonder if you could slow down their typing after the time limit has elapsed - they can keep going but there is a progressively longer delay between each key-press appearing on screen. If they really want to finish a sentence they can, but they're not going to write half an essay.

It could work well but would be tricky to get right - you couldn't buffer their key-presses or they would type blind and come back in 5 minutes when it's all on screen, however if it discarded key-presses that would be frustrating too.