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.

  • 7
    Not having written any 15 minute stories myself, but I would have thought that this 15 minute period should include a proofreading time of at least a few minutes, no? Perhaps you could hook a proofreading period into it so that the user has finished writing after, say, 13 minutes and then uses the remaining 2 to check over their work before it gets submitted. That way you're not going to interrupt their typing when it hits 15 because they'll have finished already and will be re-reading everything at that point.
    – JonW
    Commented Sep 17, 2013 at 13:46
  • 6
    For a counterexample to the "gently" part, see Write Or Die: writeordie.com which can be set to start erasing your text if you stop... Commented Sep 17, 2013 at 13:54
  • <HS>Does the subject of the story is forced ? Because some people will write it before. They could even write it in 2 seconds using copy/paste :-)</HS>
    – Luc M
    Commented Sep 18, 2013 at 12:36
  • @LucM: The subject is given when the timer starts, so no, users can’t write the story beforehand.
    – unor
    Commented Sep 18, 2013 at 13:12
  • 1
    I'm interested in using your site. Can you post a link? =)
    – Kevin
    Commented Sep 18, 2013 at 19:26

11 Answers 11


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

  • 2
    I like the combination of this and Kai's answer. count down to times up. Have 30-60 second editing phase which allows +- 100 characters. Then auto-submit.
    – Mr.Mindor
    Commented Sep 17, 2013 at 14:34
  • 1
    Consider changing the background color of the text area from white to yellow to red as time is up.
    – Taj Moore
    Commented Sep 17, 2013 at 19:23
  • 3
    I like this approach, but may want to go solid red at one minute, blink once at 30 seconds, once at 25 seconds, maybe once every 2 or 3 seconds down to 10 seconds, before finally blinking once a second for the final 10. Steady blinking when I know I'm running low on time will just be a distraction as I am trying to wrap things up. Commented Sep 17, 2013 at 20:44
  • Whoa! What happened here. What a load of upvotes. =) @WonkotheSane: You are right, the blink must balance attention and obtrusiveness. A blink per second though, is quickly conveying that this is a timer. So I would play with the force of the blink, not the intervals.
    – JOG
    Commented Sep 18, 2013 at 20:12
  • 2
    @Cetin: I don't agree. This feature is focused on the time limit, thus it should be visible. But maybe seconds shouldn't be shown the first 10 minutes, because the second counting could be very distracting. Commented Sep 20, 2013 at 8:10

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).

enter image description here

  • I really like this approach. I think its showing your users how far they got in the allotted time, but it also lets them complete their last sentence. Since you know the position to show the bubble, you can also note this with the submission and store both the complete and partially complete story
    – Freiheit
    Commented Sep 17, 2013 at 15:10
  • i think this would be great, with a additional option of including the 15 minute version only. Commented Sep 17, 2013 at 19:15
  • 2
    The text might not be entered linearly, though. It would be weird to have a sentence with words of different shades just because the author went back and edited parts of the sentence later. Commented Sep 18, 2013 at 4:58
  • @200_success The text color could be treated as a 1-dimentional grayscale image, and you could blur the image (configurable, of course) for a smoother gradient. Commented Sep 18, 2013 at 15:13
  • 2
    @AJMansfield Then the gradient conveys misleading information. "Is my story too long?" would be my first interpretation. Commented Sep 18, 2013 at 16:22

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.

  • I added a mockup based on JOGs suggestion for visual hints. Note: I would keep the text area enabled while submitting. Commented Sep 17, 2013 at 21:10

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.


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").


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.


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.

  • +1 For disabling Copy & Paste. Although they could still type it up in word or something first, then they could just copy it without having to think as well.
    – Andy
    Commented Sep 17, 2013 at 18:19

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.

  • 1
    +1 for pointing out not everyone looks at the screen. Commented Sep 17, 2013 at 19:27

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.


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.


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.

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.