5 ms·

A better, prettier, cross-browser OK plateau typing tutor

81 points by trishume 14y ago

antiterra 14y ago
There's no word wrap when you add multiple words, the large size of the text requires an unnatural scan of the eyes, and the single word default is of questionable utility to someone training for 100+ wpm. Typeracer is more fun. Keyzen itself actually has the benefit of training typing on all of the symbols on the keyboard, something that "Keyzen Words+Plateau" seems to throw away entirely, unless I'm missing something.
- trishume 14y ago
  It does, my fork is intended for a completely different purpose.
- edgeztv 14y ago
  I'm the creator of Typeracer. When I launched it 5 years ago I had a similar UI - one line of scrolling text in a larger font, but based on user feedback ended up with the more natural UI of static text in a smaller font. Thanks for the compliment!
  - dergachev 14y ago
    Just tried Typeracer... It's so awesome! Definitely much more fun than OP. Did you ever make money from it? Maybe consider making a social mobile app?
    - edgeztv 14y ago
      Thanks! I got it to ramen-profitable after a couple years. Would be cool to make a mobile app. I'm sort of looking for a partner for that.
      - dergachev 14y ago
        Man so far I've been spending 10 minutes a day on typeracer, as a morning warmup. You did a great job on making it fun! Some random ideas I have about it (since it's easier to talk about stuff than to build it): * Your quotes are all from famous books and movies, and you have affiliate links to Amazon... brilliant! * Do you have a mechanism that minimizes repetition? * Do you ever need to fake competition? * Could you visualize mistakes as crashes, to keep things exciting? * Consider making a keyboard UI for the site (Although I use vimium) * Build a mechanism to challenge your friends. * Analyze history and plot it. Take into account difficulty of paragraphs (come up with difficulty rating based on your user data). * Give typing tips; perhaps it's enough to analyze words that the user mistyped, and offer them more passages with them. * Improve the CSS. The UI should reflect the incredibly high level of polish in the gameplay. Maybe I'll have more random ideas when I play it tomorrow. ;)
  - deleted 14y ago
    [deleted]
  - sirclueless 14y ago
    I'm surprised, I always thought I was a pretty slow typer (about 60 wpm after corrections). But that's actually the second-highest bracket on Typeracer.
farnsworth 14y ago
Might be prettier, but I find the text shadow, low contrast gray-on-gray, and the diagonal background pattern distracting from reading/typing. Also, this is a typing tutor but I can only see one word at a time? I always read/think ahead when typing.
- trishume 14y ago
  There is a setting for that, look on the bottom. The setting doesn't make it perfect but it is certainly better. I used the design from the original key zen which is fairly pretty but I now realize not optimal for typing.
JMill 14y ago
I like it. Suggestions: As a user commented on another post, it's a bit tough to type fast without seeing more words on the screen. I settled on 3 words at a time which was okay('ish). I'd be interested in trying it with the timer bar going from left to right instead of growing from the center. Would give things more of a 'race' feeling. The sound effects are nice. Nice resume site, btw. You're very accomplished!
jfarmer 14y ago
I think most people who type quickly anticipate the words they're going to type in the middle of a prior word -- I know I do. The "unit" of typing is something larger than a word. I think most typing tutors give you the words coming up to simulate that anticipation. Being presented a sequence of random, isolated nouns, verbs, and adjective doesn't seem like typing to me at all, or at least no kind of typing I've done in practice. Example sequence: swat repetitious defensive tousled pimpled rerun closure poke weigh This seems more useful for improving, say, my typing dexterity and my vocabulary. :P Here's a fun one for programmers: http://typing.io/ http://typing.io/ Edit: I see now I can change the number of words displayed at the bottom of the page. Not great affordance. http://en.wikipedia.org/wiki/Affordance http://en.wikipedia.org/wiki/Affordance
- trishume 14y ago
  There is a setting at the bottom of the page, it is still not perfect but it is there. I just changed the default to 3 words at a time.
  - jfarmer 14y ago
    Notice how many people on this page expressed the exact same thing, though. Even if you change it to 3, people still won't know how to change it or even that it can be changed. Now "3" just seems like an arbitrary decision. Why 3? Why not 2 or 4 or 5? Instead, I might take the fact that everyone here on HN mentioned it* as a signal that they're (1) anxious to change it and (2) can't find a way to relieve that anxiety. (2) is happening because the attention is (rightly) focused on the typing bit of the screen. What if there were a slider from 1 to, say, 5 right below the the typing area? It'd be easy to ignore but users would notice it as soon as they felt anxious about changing the number of words. If you made it tie in dynamically with the value at the bottom of the page, it might also be an opportunity to "teach" your user to look at the bottom of the page for more advanced configuration options. Better yet: have a smaller version of the slider down there and connect the two. Then there would be literal movement to draw the users' attention to the bottom section of the page. Other design nit: the top bar representing time and the bottom bar representing position shouldn't both be skinny orange lines. I realize the bottom bar is slightly thicker, but it still implies a connection where there isn't one. A small non-orange triangle pointing up would be a good icon for the bottom bar, indicating "you are HERE." When a user makes an error, the triangle could advance and in addition to the letter turning red, it cloud leave a tiny red "X" on the same line as the triangle beneath the mistyped letter. *: With the huge caveat that people on HN are lousy whiners and typically can't see the forest for the trees. Depending on how you feel about my feedback, I'm happy to be included in that bunch this time around. :)
nvr219 14y ago
Only 70 WPM? Talk about a blow to my ego.
richforrester 14y ago
I'd be a LOT better at this if my brain didn't convert the ⎵ into a _ all the time. Which kind of makes sense, because "⎵" is more like "_" than like " ".
- trishume 14y ago
  That is a problem. It uses a custom font left over from keyzen. I'll try and fix that.
- trishume 14y ago
  Fixed in latest push.
  - richforrester 14y ago
    Awesome, I'll attempt it again :)
- tomasien 14y ago
  Yeah I can't even type that character on my keyboard so I can't play
iamtherockstar 14y ago
As I punched out a few of these, I found that I had a hard time just typing letter by letter. I'd stumble over letters and make mistakes. If I read the words, I could type them consistently without mistakes. I use the US Dvorak layout, but I can't imagine that's relevant.
- trishume 14y ago
  I actually designed this when I hit the ok plateau learning Dvorak, so semi-relevant!
zacwest 14y ago
I got better at typing with my right hand by making my password a long string of words typed exclusively by the right hand. It's helped a lot.
mkrecny 14y ago
@trishume are you collecting data around what errors people are making ... would really love to see what that looks like.
- trishume 14y ago
  No I don't collect any data, it is all done with localStorage. I agree it would be interesting though.
iamthad 14y ago
There seems to be a bug: when you reach the end of a line, you can no longer go back and correct letters, even though you have not yet advanced by pressing space.
SeanLuke 14y ago
This tutor has a problem. When presented with a new test, people naturally have a short but significant cognitive lag until they clue into what they should be typing. But this tutor's timer starts immediately, including the lag. As a result, if used as a speed test, the tutor's measurement of typing speed is very inaccurate. The basic issue here is the length of the word string. Normally speed tests have long documents, and as a result the cognitive start-up lag is a constant lost in the noise. But with a very short word string the lag is perhaps as much as a third of the allotted typing time.
sltkr 14y ago
Bug report: if I hit backspace at the end of a line, I'm not allowed to correct my mistakes!
JoshTriplett 14y ago
When capturing keyboard keys, please don't capture anything with modifiers other than shift. Trying to hit ctrl-r (refresh) or ctrl-t (new tab) captures the letter as though typed and blocks the browser action.
dergachev 14y ago
Generally if I type a wrong lretter, I prefer to type out the correct one immediately and then delete afterward finishing the sentence. Perhaps you could offer a scoring mode that counted only 1 mistake for it? Also I didn't realize backspace was supported. Aside from that, fun little game, well done!
nicholassmith 14y ago
One thing I'd suggest is having a big 'sounds off' toggle somewhere. Aside from that and the unfortunate thing of shouting "You're spelling things wrong" due to UK/US deviations, I thought it was quite nice.
crazydiamond 14y ago
Seems to hang (stop responding if i make a couple of errors), I am able to backspace, but unable to type further. This happened both on Firefox and Safari (OSX ML). On FF, i got some error about javaac or javacc. However, by pressing space, i could start a new page.
jebberjeb 14y ago
mmm, no fun w/ vimium turned on:)

81 points by trishume 14y ago

There's no word wrap when you add multiple words, the large size of the text requires an unnatural scan of the eyes, and the single word default is of questionable utility to someone training for 100+ wpm. Typeracer is more fun. Keyzen itself actually has the benefit of training typing on all of the symbols on the keyboard, something that "Keyzen Words+Plateau" seems to throw away entirely, unless I'm missing something.

trishume 14y ago
It does, my fork is intended for a completely different purpose.
edgeztv 14y ago
I'm the creator of Typeracer. When I launched it 5 years ago I had a similar UI - one line of scrolling text in a larger font, but based on user feedback ended up with the more natural UI of static text in a smaller font. Thanks for the compliment!
- dergachev 14y ago
  Just tried Typeracer... It's so awesome! Definitely much more fun than OP. Did you ever make money from it? Maybe consider making a social mobile app?
  - edgeztv 14y ago
    Thanks! I got it to ramen-profitable after a couple years. Would be cool to make a mobile app. I'm sort of looking for a partner for that.
    - dergachev 14y ago
      Man so far I've been spending 10 minutes a day on typeracer, as a morning warmup. You did a great job on making it fun! Some random ideas I have about it (since it's easier to talk about stuff than to build it): * Your quotes are all from famous books and movies, and you have affiliate links to Amazon... brilliant! * Do you have a mechanism that minimizes repetition? * Do you ever need to fake competition? * Could you visualize mistakes as crashes, to keep things exciting? * Consider making a keyboard UI for the site (Although I use vimium) * Build a mechanism to challenge your friends. * Analyze history and plot it. Take into account difficulty of paragraphs (come up with difficulty rating based on your user data). * Give typing tips; perhaps it's enough to analyze words that the user mistyped, and offer them more passages with them. * Improve the CSS. The UI should reflect the incredibly high level of polish in the gameplay. Maybe I'll have more random ideas when I play it tomorrow. ;)
- deleted 14y ago
  [deleted]
- sirclueless 14y ago
  I'm surprised, I always thought I was a pretty slow typer (about 60 wpm after corrections). But that's actually the second-highest bracket on Typeracer.

farnsworth 14y ago

Might be prettier, but I find the text shadow, low contrast gray-on-gray, and the diagonal background pattern distracting from reading/typing. Also, this is a typing tutor but I can only see one word at a time? I always read/think ahead when typing.

trishume 14y ago
There is a setting for that, look on the bottom. The setting doesn't make it perfect but it is certainly better. I used the design from the original key zen which is fairly pretty but I now realize not optimal for typing.

JMill 14y ago

I like it. Suggestions: As a user commented on another post, it's a bit tough to type fast without seeing more words on the screen. I settled on 3 words at a time which was okay('ish). I'd be interested in trying it with the timer bar going from left to right instead of growing from the center. Would give things more of a 'race' feeling. The sound effects are nice. Nice resume site, btw. You're very accomplished!

jfarmer 14y ago

I think most people who type quickly anticipate the words they're going to type in the middle of a prior word -- I know I do. The "unit" of typing is something larger than a word. I think most typing tutors give you the words coming up to simulate that anticipation. Being presented a sequence of random, isolated nouns, verbs, and adjective doesn't seem like typing to me at all, or at least no kind of typing I've done in practice. Example sequence: swat repetitious defensive tousled pimpled rerun closure poke weigh This seems more useful for improving, say, my typing dexterity and my vocabulary. :P Here's a fun one for programmers: http://typing.io/ http://typing.io/ Edit: I see now I can change the number of words displayed at the bottom of the page. Not great affordance. http://en.wikipedia.org/wiki/Affordance http://en.wikipedia.org/wiki/Affordance

trishume 14y ago
There is a setting at the bottom of the page, it is still not perfect but it is there. I just changed the default to 3 words at a time.
- jfarmer 14y ago
  Notice how many people on this page expressed the exact same thing, though. Even if you change it to 3, people still won't know how to change it or even that it can be changed. Now "3" just seems like an arbitrary decision. Why 3? Why not 2 or 4 or 5? Instead, I might take the fact that everyone here on HN mentioned it* as a signal that they're (1) anxious to change it and (2) can't find a way to relieve that anxiety. (2) is happening because the attention is (rightly) focused on the typing bit of the screen. What if there were a slider from 1 to, say, 5 right below the the typing area? It'd be easy to ignore but users would notice it as soon as they felt anxious about changing the number of words. If you made it tie in dynamically with the value at the bottom of the page, it might also be an opportunity to "teach" your user to look at the bottom of the page for more advanced configuration options. Better yet: have a smaller version of the slider down there and connect the two. Then there would be literal movement to draw the users' attention to the bottom section of the page. Other design nit: the top bar representing time and the bottom bar representing position shouldn't both be skinny orange lines. I realize the bottom bar is slightly thicker, but it still implies a connection where there isn't one. A small non-orange triangle pointing up would be a good icon for the bottom bar, indicating "you are HERE." When a user makes an error, the triangle could advance and in addition to the letter turning red, it cloud leave a tiny red "X" on the same line as the triangle beneath the mistyped letter. *: With the huge caveat that people on HN are lousy whiners and typically can't see the forest for the trees. Depending on how you feel about my feedback, I'm happy to be included in that bunch this time around. :)

nvr219 14y ago

Only 70 WPM? Talk about a blow to my ego.

richforrester 14y ago

I'd be a LOT better at this if my brain didn't convert the ⎵ into a _ all the time. Which kind of makes sense, because "⎵" is more like "_" than like " ".

trishume 14y ago
That is a problem. It uses a custom font left over from keyzen. I'll try and fix that.
trishume 14y ago
Fixed in latest push.
- richforrester 14y ago
  Awesome, I'll attempt it again :)
tomasien 14y ago
Yeah I can't even type that character on my keyboard so I can't play

iamtherockstar 14y ago

As I punched out a few of these, I found that I had a hard time just typing letter by letter. I'd stumble over letters and make mistakes. If I read the words, I could type them consistently without mistakes. I use the US Dvorak layout, but I can't imagine that's relevant.

trishume 14y ago
I actually designed this when I hit the ok plateau learning Dvorak, so semi-relevant!

zacwest 14y ago

I got better at typing with my right hand by making my password a long string of words typed exclusively by the right hand. It's helped a lot.

mkrecny 14y ago

@trishume are you collecting data around what errors people are making ... would really love to see what that looks like.

trishume 14y ago
No I don't collect any data, it is all done with localStorage. I agree it would be interesting though.

iamthad 14y ago

There seems to be a bug: when you reach the end of a line, you can no longer go back and correct letters, even though you have not yet advanced by pressing space.

SeanLuke 14y ago

This tutor has a problem. When presented with a new test, people naturally have a short but significant cognitive lag until they clue into what they should be typing. But this tutor's timer starts immediately, including the lag. As a result, if used as a speed test, the tutor's measurement of typing speed is very inaccurate. The basic issue here is the length of the word string. Normally speed tests have long documents, and as a result the cognitive start-up lag is a constant lost in the noise. But with a very short word string the lag is perhaps as much as a third of the allotted typing time.

sltkr 14y ago

Bug report: if I hit backspace at the end of a line, I'm not allowed to correct my mistakes!

JoshTriplett 14y ago

When capturing keyboard keys, please don't capture anything with modifiers other than shift. Trying to hit ctrl-r (refresh) or ctrl-t (new tab) captures the letter as though typed and blocks the browser action.

dergachev 14y ago

Generally if I type a wrong lretter, I prefer to type out the correct one immediately and then delete afterward finishing the sentence. Perhaps you could offer a scoring mode that counted only 1 mistake for it? Also I didn't realize backspace was supported. Aside from that, fun little game, well done!

nicholassmith 14y ago

One thing I'd suggest is having a big 'sounds off' toggle somewhere. Aside from that and the unfortunate thing of shouting "You're spelling things wrong" due to UK/US deviations, I thought it was quite nice.

crazydiamond 14y ago

Seems to hang (stop responding if i make a couple of errors), I am able to backspace, but unable to type further. This happened both on Firefox and Safari (OSX ML). On FF, i got some error about javaac or javacc. However, by pressing space, i could start a new page.

jebberjeb 14y ago

mmm, no fun w/ vimium turned on:)