Wednesday, December 29, 2010

Add Words Via Google Chat

author photoWhile taking advantage of some new Google APIs to upgrade our deployment process, I worked in a small new feature to test things out. You can now use Google Chat to add words to your Skritter queue, so if you're out in the world and you see some characters you want to learn, you can just jump on your instant messager and get them in there.

Here's how it works. Add skrit@appspot.com to your Google Talk buddy list. Then send a message like this:
add 書く 先生
add 白酒 喝醉 救命
add 加入

The words (separated by spaces) will be added to your Queue if they exist in the Skritter database. Just another convenient way to add words!

Monday, December 27, 2010

Redesign #5: List Creation

author photoAnd last but not least, the making of lists. This is something else we tested thoroughly, and found the process had a big tendency to confuse people. So we brainstormed a whole mess of things to try and help guide people, and we implemented just about all of them.


The first thing we did was introduce a new kind of list: a single section list. We noticed lots of the lists people were making were single section anyway, so we decided to optimize for them. And it gives us a chance right on list creation to introduce new users to the concept of sections, and what they're supposed to do.


Then when it's time to add words and sections, helpful info bubbles point out the next step each part of the way. They show up only when the user is starting out or while the list is incomplete. We may use these more in other parts of the site as well, like on the practice page to point out bits and pieces of it to new users as they go along. There's so much crammed into this site at this point, it's a challenge to keep it all neat and organized and possible to find!

The list editor itself has also undergone a number of changes. Labels, info bubbles, changes large and small to how words are entered and shown all work to make this very powerful tool more understandable from the get go.

Well that's the last post for the latest round of changes to the site. Thanks again to all the alpha users who tested and found a whole mess of bugs before we released to the general public, and helped us change our minds on a few things and made the result that much better. We are still changing and tweaking things because of your input, so thanks for helping us out!

Saturday, December 25, 2010

Redesign #4: List Page

author photoAh the list page, we meet again. This page has been giving us trouble ever since the very beginning. Each time we get a little closer, but still just not up to par. We did a fair amount of testing on the last one version, and just about each and every time, the tester ended up frustrated and confused and not doing what we hoped they would.

So with all of that in mind, we set to rearrange things once again. We pulled the list of "More Actions" out of a dropdown and put them on the left side, where the various actions could easily be seen. We moved the list of sections into a tab, hidden when the page is first opened. And we made the study button as big and unavoidable as possible! It is after all the most important part of the page. We did some other tweaks and changes, but those are the big ones.


We made these choices because, time and again, users would miss the big green study button which would solve all their problems, and instead they went on to the individual section pages, then they didn't know what to do. Some ended up cramming the section, which lead to an annoying repetition of the same words over and over again and an unmanageable list of sections in the study nav. Others selected all the words in the section and added them to the queue, leaving the study nav empty. And neither of these routes used the full organizational power of Skritter.

George is lining up some more testing so we can see what exactly happens when new users tackle the new setup. We've got our fingers crossed!

Designing a good interface is hard.

Thursday, December 23, 2010

Redesign #3: Vocab Lists

author photoWe decided to try something radically different with the new vocab list page, at least, different than what we had before. Before we had nice large icons giving first time users an overview of the types of lists they could study from, but not much beyond that. The idea was to keep it as simple as possible, and let the complexity be delegated to the pages those icons linked to.


Now though, we've gone with a more Craigslist or eBay style categories page. Not only does it show off the various categories of vocab lists that are available, it also shows a preview of some of the newest and most popular lists that we have, so that they can be found that much faster. We also show a preview of some of the most important list tags on the right side, which will surely make their very existence more well known!

The pages for each category have undergone a fair number of changes as well. The official lists are now grouped by series, so they can more easily be scanned, and the custom lists you have made have their own separate page from published lists.

Also, both of the custom list pages use a new special table widget I built which makes scanning through these lists and pretty much any other list of things on the site much faster! This same widget is used for the My Words page I talked about last time, and you will see this show up in more places later on. Check it out and be amazed at its blazing pace.

Monday, December 20, 2010

Redesign #2: My Words

author photoOne thing that Skritter does rather differently from many other SRS systems out there is it coordinates studies between different groups of words. If you're studying two lists, and they share some words, you don't see those words twice as often. This is one of the many choices we made toward the aim of making learning as efficient as possible.

But it can be confusing! Many people are used to working with completely separate, isolated sets of words, not interacting in any way. But when you study with Skritter, rather than working with just lists, you're working with lists which add to this somewhat amorphous pile of words and characters. It's not what people expect, and so the design of the site needs to help newcomers understand how we differ in this respect, or else how things work won't match expectations.

And so we decided to give this pile of words a name, which in retrospect seems like an obvious thing to do. We now call it "My Words", and it encompasses everything you are studying, everything you have added from the Queue and lists. Thanks to Maksym Taran, our summer intern of the last two years and one of our very first users, for coming up with the idea!


This brand new My Words page houses a faster, somewhat stripped-down viewer of all your vocabulary words, and a bunch of tools related to them. Along with it comes a new search function. In the backend, it uses the same search as the list editor does, so it takes readings and writings to find the words you are looking for. The rest of the tools listed are taken from the old vocab page, which gave us more space to work with. I'll get into that one next time!

Wednesday, December 15, 2010

Redesign #1: Study Nav

author photoSo, after about a week of alpha testing we're pushing all these changes live for everyone. Most everything is the same as before, it's just rearranged and organized better, and hopefully easier to use.

Since I already went over the biggest changes in my last blog post, I'm going to go more in depth and describe each of the major changes in a series of blog posts. First up: the study navigation page, i.e., where you go to choose what to study.

One of the largest changes to this page is how we display the lists being studied. They're now split into two groups. The first group includes lists that from which words are currently being added. The second group includes just those lists that are being reviewed. Each list has a toggle so you can quickly move them between adding and just reviewing. This has the same effect as the play/pause buttons in the practice page did in the old system, but if you have seen the recent poll, you can see most people didn't know they were there! We'll see if moving this functionality front and center fixes that.


Here are some of the other changes:
  • Each list has a total progress bar instead of the last studied date.
  • The Scratchpad is now a popup, to de-emphasize it, and it no longer saves what was studied last
  • Sections studied are no longer shown, also to put less emphasis on it.
  • "Practice" has been replaced with "Study", here and throughout the site
By the way, thanks to all the alpha users who found all the nasty bugs in these new pages and providing helpful feedback. We made a bunch of tweaks based on your input.

There will be more posts about the other pages in the next few days!

Monday, December 6, 2010

Redesigns in Alpha

author photoLast summer, Nick, George, I, and two of our interns, Maksym and Patrick, had a series of long and spirited discussions about several key parts of our site. Our goal was to rework all the things that were still giving people trouble (like the list system, oh how the list system has always caused confusion). After several weeks of heated debates, we finished up the designs for several reorganized pages, along with plans for some general restructuring of the site.

That was the end of August, and since then I have been spending most of my time implementing all these changes. And now they are ready to be tested! Nick has already gone through the new stuff and found a boatload of bugs which I've fixed, but inevitably there will be more. For those of you who want to give these changes a try and help us find the remaining bugs, enable alpha testing in your account settings and have a look around. We want to hear what you think!

Here's a quick rundown of the changes we've made:
  • Study Nav: The biggest change here is the removal of single section cramming, though you can still study individual sections from the list's section pages. We did this to encourage people to study all their lists or individual lists, since that is much more efficient, and many new users find themselves studying sections without realizing they can study whole lists.
  • Vocab List Nav: Major overhaul here. Now it shows a sample of each of the kinds of lists available to you and a handful of tags are shown on the right, making them much more visible than before. Now this page gives you a better overview of what kinds of lists are available for study.
  • Vocab List Page: What redesign would be complete without an overhaul of the list page? This time we think we've got it; there are a lot of little things here that should make it easier to navigate. We're anxiously waiting to put this through some UX testing to see if it holds up. What is this, the sixth version of this page? We have honestly lost count.
  • List Creation: The whole process of making new lists has been redone from the ground up. From choosing the title to putting in the final words, we worked to make it an intuitive and understandable process from start to finish, with information bubbles helping users along step by step.
  • No-Section Lists: Many lists people make are on the small side, so now you can eschew multiple sections and build a list that only contains one set of words. Note that these are limited to 200 words each, just as single sections are!
  • My Words: We are introducing a new concept, to help new users get used to how Skritter works. When words are added from lists, they are added to a big pile of words to be studied all together (when you study "Everything"). That pile of vocabs is called "My Words" and all the viewing and manipulating of "My Words" is done in this new section of the site. It even comes with search functionality! We give props to Maksym for thinking this up.
    So there's not much here in terms of functionality. Even "My Words" is just a name; what it represents is how the system has always worked. The central focus of all these changes is usability; we want to make sure new users can quickly find their way around the site and be able to use all the neat features we've built over the years. After all, what good are features if you can't find them, or figure out how they work?

    Unintuitive interfaces have been our perennial problem. We've answered countless emails from many confused users having difficulty studying and making lists, processes which are pretty central to using Skritter effectively. And we know many more probably didn't even bother to contact us to figure it out. We hope with this major push, we've made a good deal of progress toward having an easy to use site.

    Wednesday, December 1, 2010

    Skritter iPhone App Plans

    author photoThere has always been tons of interest for an iPhone version of Skritter. Even with it in the FAQ, we hear this almost every day: "Is there anyway I can skritter on my iPhone?" "Well, have you ever thought about making an iPhone app?" "If there was an iPod/iPhone app..." "If you guys make an iPhone app for this..." "Can you buy this application for iPhone?" "An iPhone app would really help a lot!" "When will the iPhone version be released?" "Don't suppose you have any plans to release an app for the iPhone or iPad?" "If I could access Skritter using an iPad / iPhone, I may actually purchase one."

    Because the iPhone operating system (iOS) can't run Flash, we've only been able to get Skritter running on Android 2.2 devices so far. Getting it to run on iOS would require rewriting 18K lines of ActionScript client code in Objective-C. That's a lot of work. So we've always put it off--until now. We're doing it. It will still take a long time, but one day, on the plane, on the train, on the toilet, wherever--Skritter will be there.

    I just finished the handwriting recognition and stroke drawing code, to see how well things could run. I haven't optimized anything yet, and this is running on an old iPhone 3G, which is much slower than the newer models, but things are looking very smooth! So I wanted to show you a video, to get you as excited as I am. This is George demonstrating the writing of 你.


    If you can't access YouTube, I've put it on Youku here: Skritter on iPhone

    I'll say again, this will yet take a long time! There's much to be done. I'm going to be focusing on this, while George and Scott will continue building and refining the main Skritter site. The current idea for the app includes being able to do reviews without an internet connection, but requiring one to add new words. An iPad-specific app would follow afterward.

    What do you think? Are you excited? Is there any part of Skritter you'd particularly like to see in an iPhone version? Let us know in the comments!

    Blog Archive