Yesterday I came across a fantastic little web app called Jott that allows me to add tasks to my to do list with my voice. Not only that, but it's nicely complimented by a flawless iPhone app. Here are some examples of the user interface design to hopefully inspire you.
Simple is Better
Jott's tag line is "Get simple back" and the interface does a pretty good job of reflecting that. For example, the sign up page is quite short, with nice check marks (with on/off states) to show which fields have been completed. I always love those javascript details.
It only took me about 5 minutes to sign up, install the app on my iPhone, and create my first task by recording my voice. Jott automatically converts voice recordings to text so they can be stored and sent in a variety of ways.
Standard Log In
The login page is a good example of a standard, no frills, simple log in with all the necessities: some way to identify the user, a password, a "Forgot password?" link, a "Signup" link, and a "Remember Me" checkbox.
I find that logging in with my phone number is a good reminder that I can call Jott as well to create tasks and notes, even when I don't have my iPhone with me. I'm not sure if that was the thought behind their decision, but it seems to work well.
The Jott Inbox
After logging in, I'm taken to my Jott inbox, which is where new tasks and notes appear unless I specifically put them in a list when creating them.
Here's a closer view of the left navigation and the task options in the inbox:
I personally think a standard check box would have done the trick for task completion, but kudos for making an effort to keep things consistent by designing a custom check. In my opinion, the existing icon could be made more effective if the "incomplete" state didn't have a check mark in it, and the "complete" state did, to copy the standard form element more closely.
When you mouse over a task, you get a nice pop up options tab on the left hand side with a play icon and a grab point for dragging tasks to different list. I like that I don't have to click anything to see the other options, just point, and that what pops up isn't in my way.
Simple Dialog Window
If I click on the bell icon to set myself a reminder on a task a clean dialog appears that's pretty easy to follow.
I'm always interested in what other designers are doing for pop up dialogs, since javascript frameworks like jQuery have made it so much easier to create them.
Contacts On, Contacts Off
There's a right hand menu for some extra social networking features, and it has a nice slide down effect that doesn't feel too invasive. It's actually pretty usable.
If there were a ton of options in each sub-menu, and more top level menu items, this mouse over accordion might be a bit awkward, but it seems to work well with what they have going on here.
iPhone Interface
Although Jott can be used by anyone with an internet connection or a regular telephone, they've added a beautifully simple and well designed iPhone app which deserves some praise.
Simply tap the screen to start recording, then tap it to stop recording. It will upload the audio from your iPhone to the server, turn it into text, and add the text task to your list. Perfect!
Finishing Up
Overall, Jott seems to be a simple, easy to use web application with some good design principles behind it. Try it out and let me know what you think, I'd love to hear your comments on it.
If you liked this article, please Digg It, and if not, write some comments to let me know why.
