My HN November app: Quick Brown Frog

27 points by kaffeinecoma ↗ HN
I'm getting close to launching my November project:

Quick Brown Frog (http://www.quickbrownfrog.com) is an online typing tutor that runs right in your browser- nothing to download or install, no Flash or other plugins required. Feel free to create yourself an account using this link:

   http://www.quickbrownfrog.com/#!createAccount:HN
I'm still working on the lesson content, but most of the moving parts are in place. It's built using GWT and Google App Engine. Despite the recent spate of GAE-related postings here, I've been able to make App Engine work fairly well for my needs and team size (i.e. me). Right now my only remaining pain point is the lack of SSL for non-appspot.com domains. Ugh.

Quick Brown Frog was very much influenced by patio11- consumer-oriented, and born of personal experience. A year ago, I decided to learn to type properly, and tried to download software from the major vendor of typing software. It turned out to be a weird PC/Mac hybrid package, and I had to go hunting for a dated uncompression tool just to open the .sit file.

When I finally got it uncompressed, I found it was years out of date and would not run on my Mac. I ended up having to order a CDROM version from them in order to get the latest software that would run on my system. (Why offer the dated download at all?!)

Thus was my inspiration to create a totally browser-based typing tutor. I'm blogging about the development process at http://quickbrownfrog.wordpress.com.

Feedback greatly appreciated.

33 comments

[ 2.6 ms ] story [ 76.5 ms ] thread
I like it, seems like it works pretty well and it is cool how you use Wikipedia for the testing as that will allow users to practice with "real" work. The price seems high, but I don't know that market.

Also, I think I would really build up the speed test you have and use that as a marketing tool with something like high scores posted to Facebook.

The price was just a shot in the dark really. It's in line with similar shink-wrap products, but once I get off the ground I plan to do some A/B testing on price.

Thanks for the feedback!

That’s really neat. You might explain why people would want to pay $29.95 because it is not exactly clear why we would need to pay. The practice feature is mind blowing, and works really well. Congrats.
I want to offer some amount of content for users to test-drive prior to purchase, but I imagine locking down more of it once the site launches (maybe 2 free practices before offering a "buy now" link, or some such.)

Currently all of the lesson content is locked down (if you've created an account using the HN signup code, then you get to see it all, such as it is).

I've gotten lots of feedback to the effect that $29 is too high for a webapp, so I certainly will revise that down before launching.

Thanks for the feedback!

I don’t think that $29 is too expensive for a webapp. I’m a bit worried about paying any amount for a product I don’t own and which could disappear overnight. When buying traditional software that we install, even if the company goes out of business, we still have the software we paid for. It’s obviously not the case for a webapp and given how new your product is, this might refrain potential customers.

As for free vs paying feature, I’d only give the time taken to complete the exercise and the wpm, and suggest upgrading to the paying version to have more stats.

Gotcha. The site aesthetics probably don't shout "I'm an established product and will be here long after you've paid for it" either.

By "more stats", do you mean the accuracy statistic that is computed for each practice? Or do you mean the wpm/accuracy chart that you see on the Progress link?

Don’t give them all for free. Keep accuracy and most frequent keys errors for paying customers, and incite them to upgrade if they want to know how well they scored.
One nit with the typing test (which is the only thing I tried):

Lots of us were taught (correctly) to follow a period with two spaces. When you do that on your test, every single character from there on out is highlighted in red. It thinks you're wrong on every word, and there's nothing you can do about it short of backspacing to the period in question and erasing one of your spaces.

It pretty much makes the test useless. And since that's the only thing you let me see, the only inference I can draw is that the rest of your product is of similar quality. In short, you lost me.

Multiply that times everybody else who visits your site and types that way, and think about the impact it will have on your sales.

"Most modern literature on typography says that double spacing is wrong" - http://en.wikipedia.org/wiki/Sentence_spacing (with citations).
Indeed, but the article you reference is about typesetting, not typing.

Schools were still teaching the double-space typing method well into the 90's (and probably beyond), so if you're building a product for people who type and are potentially older than 30, it's probably a good idea to account for the fact that they're likely to type two spaces after a period.

FWIW, I am 22 and I was also taught this way.
A few others have given me similar feedback on the two-spaces issue. I used to be a double-spacer myself until HTML came along.

I'm planning to offer a config option that allows you to specify whether you prefer single or double spaces. Not sure which is the best default to offer for visitors though.

Thanks for your feedback!

I do not know your code, but you might be able to guess this from what the user types and skip the configuration option. If someone consistently enters two spaces you can then assume that when there is only one space it is a mistake.
I just implemented something to the effect of:

"if the preceding substring was dot space, and the user types another space, just ignore it".

Hope that works for you.

I was not able to complete the typing test. Something went wrong when I tried to move from 2 to the 3 line and after that it was unusable.
OS, browser? Not sure what you mean from "move from the 2 to the 3 line"... hitting enter/return won't prematurely move you from one line to the next. Or were you trying to type the specified text, and it was locking up in some way?

Thanks for the heads-up.

This is cool.

One gripe: am I the only one who still uses two spaces in between sentences?

I just tried it out. I like the feedback about which keys gave me trouble. However, i sometimes got tripped up because I automatically added two spaces after a period and your test only expected one space.
Lots of people were giving me the same feedback, so I just now implemented code that will ignore the char if the user types a second space after a period. Thanks!
Cool stuff. Two semi-suggestions.

1) The paragraph symbol threw me off for a second. It may be a good idea to have a small explanation at the top for how line breaks are handled.

2) I seem to manage better at typing tests when the paragraph of text to be typed is on one area and the input box is in another. Not sure if this fits the model, but it could be a configurable option.

Stream of conscious feedback:

The keyboard should not be required to move between exercises - the space bar would provide a better alternative.

Could you color coordinate the key color with a predefined finger color?

You should market this to schools with classroom subscriptions. This would provide a great, cross-platform alternative to Mavis Beacon which costs $20 per computer to install/update and cannot be used at home.

"The keyboard should not be required to move between exercises" ... did you mean "mouse"? Otherwise I am not following you.

In the very near future I am planning to add some kind of hands/fingers graphic, with the appropriate digit indicated in some way. That might cover your other suggestion about a predefined color.

Thanks for the feedback!

That is exactly what I meant.

For some reason today appears to be my off-day on HN, as I've made two sentence changing mistakes.

Oh my god, this is fantastic.
I ran into a glitch with chrome on OSX, hitting the enter key during the typing test refreshes the page.

Having a keyboard shortcut to go the next lesson seems essential, it is annoying to have to keep reaching for the mouse in a typing tutor.

I would like to see more 'nerdy' topics in the practice sections, stuff about programming, video games, passages from monty python skits, etc.

Other than that, I am really happy with it. I would gladly pay 10 bucks for something like this.

I haven't been able to reproduce this on Chrome/OSX. What version of Chrome are you using?

I will add some keyboard navigation as you suggested.

Thanks very much for the feedback.

Just ignore the second space that someone types after a period. =)
http://imgur.com/v4vwY

Is the Facebook button meant to be displayed there?

No, it's a glitch and I can't seem to figure it out, as it only happens from time to time. Supposed to show up 5 pixels from the bottom of the screen.
Very nice product. I usually do typing practices in typeracer but the fragments on your sites are a lot longer, I like that a lot.

I'm sure you won't get this request very often (until you go international...), but I'm using these practices mostly for practicing my dvorak skills ;-). Would it be possible to have a setting for a keyboard layouts?

As I write this I realize that different layouts would mean a different lesson structure as well...

--

Okay, here some more feedback after trying some practises in my native tongue (dutch).

- Response seems quite slow. If I type above 50wpm the text can't keep up with me (which is _very_ annoying and makes it quite hard to use).

- If you miss a letter (or space), everything else is considered 'wrong'. It might be nice if you would recognize (after two or three 'wrong' letters) that it actually misses a letter or space, and add a visual confirmation of that.

- If you give a custom url and press <enter> that doesn't work, you'll have to click the 'go' button.

- Using a random wiki article usually just sucks, most of the random articles are articles with a lot of 'sidebar' information that you'll have to type. First hit today was this one, try it ;-) http://en.wikipedia.org/wiki/Buochs

Huppie, tried to contact you but I can't find your email.

Can you tell me what OS/Browser you were using? One of the major goals of the app is for it to be blazing fast, and not have any lag issues. I mainly use OSX+Safari, but I test on Firefox, Chrome and IE8, and it works quite well for me in testing.

I also agree with what you have to say about the random wikipedia links; I tried really hard to filter out as much boilerplate stuff as I can, but sadly Wikipedia isn't as structured as you might expect it to be.

Thanks very much for the feedback.