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.

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.

share|improve this question
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 Sep 17 '13 at 13:46
5  
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... –  Alex Feinman Sep 17 '13 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 Sep 18 '13 at 12:36
    
@LucM: The subject is given when the timer starts, so no, users can’t write the story beforehand. –  unor Sep 18 '13 at 13:12
1  
I'm interested in using your site. Can you post a link? =) –  Kevin Sep 18 '13 at 19:26
show 1 more comment

11 Answers

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
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 Sep 17 '13 at 14:34
1  
Consider changing the background color of the text area from white to yellow to red as time is up. –  tajmo Sep 17 '13 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. –  Wonko the Sane Sep 17 '13 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 Sep 18 '13 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. –  Chris Sep 20 '13 at 8:10
show 2 more comments

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

share|improve this answer
    
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 Sep 17 '13 at 15:10
    
i think this would be great, with a additional option of including the 15 minute version only. –  tryingToGetProgrammingStraight Sep 17 '13 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. –  200_success Sep 18 '13 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. –  AJMansfield Sep 18 '13 at 15:13
2  
@AJMansfield Then the gradient conveys misleading information. "Is my story too long?" would be my first interpretation. –  200_success Sep 18 '13 at 16:22
add comment

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.

mockup

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.

share|improve this answer
    
I added a mockup based on JOGs suggestion for visual hints. Note: I would keep the text area enabled while submitting. –  Chris Sep 17 '13 at 21:10
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
5  
+1 for being greedy. :D –  Chris Sep 17 '13 at 20:49
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
+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 Sep 17 '13 at 18:19
add comment

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.

share|improve this answer
1  
+1 for pointing out not everyone looks at the screen. –  tryingToGetProgrammingStraight Sep 17 '13 at 19:27
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
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.