Looks like the Great Firewall or something like it is preventing you from completely loading www.skritter.com because it is hosted on Google App Engine, which is periodically blocked. Try instead our mirror:

legacy.skritter.cn

This might also be caused by an internet filter, such as SafeEyes. If you have such a filter installed, try adding appspot.com to the list of allowed domains.

New Vocabulary UI

george   August 19th, 2009 4:13p.m.

We've been getting a lot of comments recently about how bad/unintuitive the current vocabulary pages are. We couldn't agree more, but since it has already been completely redesigned 5 times now we weren't exactly sure how to guarantee that this next redesign would actually be an improvement. And that's where you come in!

This time, instead of assuming we know what's wrong and how to fix it, making several internal mockups, implementing those, and then waiting for complaints, we wanted to open up the redesign process to all of our users. We're especially keen to know what new users think, so if you're new to the site, don't be shy, let us know what's wrong and give us some suggestions.

Scott and I are going to keep iterating through designs, creating a new forum post for each until we get enough of a positive reaction to warrant implementing the new design.

For our first idea, we have (hopefully) simplified the function of the vocabulary pages by splitting them up into three levels.

When you go to select a textbook list, for instance, you would see this screen: http://img149.imageshack.us/i/level1.png/ Again, this is just a rough mockup, and would need visual polishing, but the basic idea is there. You would click a check box to start studying from the beginning of that list.

If, however, you wanted to only start studying from section 4 of a given list, you'd click that list's title and see this screen: http://img441.imageshack.us/i/level2.png/ From there you can start studying from any section and skip sections at will.

If you want word-level information about a section, you click the one you're curious about, and you would see this screen: http://img44.imageshack.us/i/level3l.png/ Notice that you can start studying a list from either the 1st or the 2nd level, but not the third, which is intended as a more fine-grained look at the list (if users who want to add individual words custom list creator and the queue are waiting).

So the obvious question is: do you think that this will make vocabulary adding and navigation any simpler? If not, do you have any suggestions for improvement?

As always, we appreciate your time and input, and we hope you can help us make this unintuitive system more easy to use.

bluedaisy   August 19th, 2009 6:37p.m.

The first change is great -- really obvious for new users.

The section screen I still find unintuitive. What if you had check marks on completed sections, and a play button (or something similar) on the section currently being studied? I don't know why, but the green "thermometer" type measure you have now seems strange to me.

Doug (松俊江)   August 20th, 2009 1:46a.m.

I can't see the screenshots - is the server their on blocked by the great firewall?

Nicki   August 20th, 2009 3:14a.m.

I can't see them either, from Haikou, Hainan. Sounds like blocked to me.

I have to say though, there was some earthquake off Japan or something Monday that slowed most of the internet (yahoo, google, etc) to a crawl for me and the only reason I didn't die from frustration and boredom was that Skritter still worked just fine....thanks guys! You saved me.

george   August 20th, 2009 9:36a.m.

That's unfortunate about the images. 2shanghai and Nicki, do you know of a free image-hosting site that is available behind the great firewall that I could use?

Laurent B. Mattiussi   August 21st, 2009 12:47a.m.

As a new user, I think it's a very good idea, but I didn't find the current vocabulary pages werre so bad. For you, from France, Georges Brassens' words: "Tout est bon chez vous, il n'y a rien à jeter"...

Nicki   August 21st, 2009 2:40a.m.

George, I don't know about any, but I would be happy to test out any you want to try and let you know if it is visible from here! Just send me any you want me to look at.

_2shanghai   August 21st, 2009 6:33a.m.

MS Live Spaces has free hosting that is (for now) accessible behind the great firewall.

george   August 21st, 2009 2:53p.m.

Thanks _2Shanghai, here is the link to the live spaces gallery: http://cid-e42a5d27273f5a7d.skydrive.live.com/browse.aspx/New%20Vocab%20Interface?uc=3&nl=1

Nick just tested it, and I made it available to everyone so hopefully you guys can critique it now.

Loupdessteppes, it's good to know that you're not having problems. We've received a lot of frustration regarding that page so it looks like you're in the privileged minority of web users!

Nicki, if that MS Live Spaces isn't accessible, let me know and I'll just email you the .pngs. Thanks for offering to help out, we really appreciate it.

Doug (松俊江)   September 2nd, 2009 10:44a.m.

Got an error the first time (Microsoft error - shocking) but then I did find the pics from the root of your Skydrive (https://cid-e42a5d27273f5a7d.skydrive.live.com/home.aspx).

They are definitely better.

I like the first image (list of textbooks).

The second is fine for me (as I know what "Deactivate", "Edit info" and "Edit" mean - not 100% clear on what "Remix" means; I know what 'start adding from' means and what the green arrow means; I think that delete works on the checked option (but it is outside the shaded box so it is logically separated); and I know what the 'cram' dropdown is for - I also have a good idea about what Skritter is and how it uses spaced repetition). If I were a newbie I would be completely lost.

Third is fine but I'd use (+) rather than "Expand" and I'm not sure just by looking what the "Add" and "Delete" buttons do (are they only for lists you author? do they delete from the list or just from your queue?)

When I was developing an intranet site I got some advise from a former project manager to do usability studies. They are pretty simple - get some users (e.g. classmates) and ask them where they would expect to go (label/name/method) to do various tasks (without a mockup and then with a mockup). Ask them to do some tasks on a mock-up (use FrontPage or something else really quick to make the mock-up) and talk out loud about what they are doing (and write down what they say).

I found it useful to read Apple's UI design guidelines though I'm not sure they would apply to web apps as much as thick client apps.

The challenge you have is that your users need to learn new concepts before they can control (or just understand how to use) skritter.

Less is more - mac's are cool because they are easy and slick to use (unix is cool because geeks can do anything with it - apple was pretty clever to put the two together). I'd scrap the second screen altogether and just have a "pick chapters" plus sign (+) for the (typical) desire to pick which chapters you want to study at a given time. For the third, I'd remove most of the functions (add/delete, ability to select, simp/trad - it is a list viewer if you have traditional they should show up) and make it simply a viewer. The current one (or the mock-up) could be hidden under "advanced" (or an advanced screen option); having a "List Viewer" and a "Browse" button in vocab lists with different functions and layouts is confusing as it stands now - I do like the mockup better (but would it replace both or just one).

This forum is now read only. Please go to Skritter Discourse Forum instead to start a new conversation!