Archive for the ‘Product design’ Category

Remember The Milk – Pushing the AJAX Envelope

Tuesday, January 6th, 2009

Anyone who has read Getting Things Done by David Allen knows that a to-do list, or rather several different to-do lists, is an essential part in proper time management. However, even people who haven’t adopted GTD’s methods, use lists as an intuitive way to remember day-to-day tasks.

Remember The Milk (RTM) is a web-based task manager that allows us to manage our to-do list from any computer, using many types of appliances, do it either online or offline, and also sends us reminders to our email box, IM or mobile phone.

I signed up to RTM and started using it immediately. I was impressed with the clarity of the product’s implementation and by its ease of use. I was also very delighted to see a state-of-the-art web application that takes advantage of the full scope of the browser’s capabilities, coupled with an asynchronous client-server communication via AJAX.

Following are my thoughts and impressions on RTM as a product.

Name: Remember The Milk
Website: www.rememberthemilk.com
Type: Task manager, to-do list
Remember The Milk is a task- and time-management web application. It allows users to manage tasks from any computer as well as offline.
Remember The Milk

Value

We all make lists – grocery lists, task lists, guest lists, play lists… It’s how we’re used to converting what needs to be done from our head to a recorded media. All it usually takes is a pen and a sheet of paper, and that’s how the vast majority of people manage their lists nowadays.

Taking a commonly practiced task such as managing a to-do list and creating a product out of it requires something very important: it requires a basic understanding of how people usually perform that task, and trying to create the right usability so that it would fit that same thought process.

RTM recognizes this basic need to make to-do lists, and enhances the widely practiced paper-age technology in two major respects: quality and accessibility.

Quality

Task detailsPaper and pen have a very limited feature reach – it only goes as far as writing down what’s in your head. Digitizing to-do lists allows us to improve the quality of our to-do lists in two ways:

  1. Structure. A digital companion for our tasks suggests and even asks for data items on our to-do list items that we normally wouldn’t think of, or otherwise wouldn’t take the time to write ourselves. Things like due date and location are probably more common in our task-listing thought process, but recurring, time estimation, and number of times postponed is usually not. This kind of structure helps us create better quality tasks, with more pertinent information that actually helps us perform them.
  2. Assistance. RTM, as a data-based application, takes our task information and uses it by actually helping us perform that task. It does that by organizing these tasks according to categories (personal, study, work), sorting according to due date (or overdue date), and sending us reminders (through many channels – IM, mobile phone, or email)

Accessibility

You can take your paper list with you, but it’s no match to the availability of the web or your cellular network. Pairing the higher quality of information that RTM has created for us with the ability to access it from anywhere, using many types of devices in our arsenal (mobile phone, BlackBerry).

What else?

RTM does a very good job in answering our need for higher quality tasks with better availability in managing them. This is something that another task management system – Outlook – doesn’t do to the full extent. These advantages would definitely drive me to abandon my old paper and pen, and maybe even my Outlook Tasks and adopt a more valuable solution.

The one thing that’s missing here is the ability to assign tasks to people. RTM went a long way when defining different categories for tasks, such as personal and work, but didn’t provide any means to collaborate on tasks properly. Sure – I can share my tasks with other people, but that particular feature’s value is much smaller than actually collaborating on a specific task.

Other applications, such as Toodledo or KonoLive, allow me not only to manage my tasks, but also takes task management to the corporate level, allowing me to manage tasks with other people. Some of these tools are quite complex in terms of task and even project management, but one does not need to go that far when concerning a popular application like RTM.

Providing a simple assignment of a task to one or more of my contacts would be great. Of course, this opens up a can of worms – deciding when the task is done, task administration and so on, but I think that if you make tasks of higher quality and easily accessible, they should also be social in a sense where the basic functionality extends to my contact network.

Needless to say that this will also improve the application’s viral nature.

Pro account

RTM offers a pro account to those who pay $25 a year (a sort of “golden price” – an amount we accept to pay annually for services). The pro account provides me with more connectivity options – to my mobile, BlackBerry, etc.

One could argue for and against it – the basic functionality is good enough for me to use the product, while the advanced features are more suited for a more mobile, and most likely more professional (big assumption here) user.

However, creating a pro version by adding new functionality could be dangerous, simply because a competitor might come along and start a feature-battle with you. This means that if a competitor comes along and provides the same functionality for free – people may move to the other side.

PTPOne curious element of the pro account is the Pro Tester Program, giving access to pre-release versions. It seems curious to me that I am expected to pay an annual fee to become a beta tester… Beta testers should be encouraged, if not paid to.

Value summary: Improves the quality and accessibility to my tasks, allowing for better task management. Does not allow me to assign tasks to other people.

Usability

This is perhaps RTM’s forte. The application’s usability is definitely on the right track of becoming a highly valuable product. Here are a few highlights:

The web on your desktop – AJAX at its best

The guys at RTM have done something amazing – they’ve created a web application that feels like a desktop application. Only a few other applications have achieved what RTM have – applications like GMail and Netvibes immediately come to mind. And it makes perfect sense – all of these apps are tools where I manage my own content and use daily.

Reading about RTM at LifeHacker, I’ve learned that co-founder Emily Boyd and her colleagues were impressed by GMail as an AJAX application, and went on to create their own. And I say well chosen and well executed! I believe that all web applications that position themselves as a tool should follow their lead.

When navigating through the app, the things you notice immediately is that there are no page reloads; however, the application data stays updated at all times. It’s as if the browser and the RTM servers are communicating without refreshing the display – exactly how an AJAX enabled application should work.

Usability flow

In terms of actually working with the application, RTM went ahead and considered the user, by making things easier for us. When adding a new task, no dialog box is necessary – a new line is created in the task list, and you simply need to fill in the task name. Then, to fill in the details, you simply click a field on the task details box, and type away.

This is great. Dialog boxes and popups are annoying, and in most cases unnecessary. RTM did a great job not only avoiding them, but mainly making us feel as if we’re really operating a dashboard rather than a window-happy application.

Formalizers

Another huge advantage is the use of formalizer fields. I’ve discussed formalizers before a couple of times, and RTM appears to know their stuff when it comes to text recognition. When filling in the due date, for example, there’s no need to fill in a form or play with complex calendar controls – you simply type the date and the text recognition engine accepts it. You can also type relative dates, like “tomorrow” or “in a week” – and RTM will understand. It even accepted “every fortnight” in the repeat field and converted it accordingly. That’s awesome!

Date formalizer

Keyboard shortcuts

Another leap forward RTM has made, which is not hugely difficult technically but very useful, is the use of keyboard shortcuts. Certainly this is something that by its nature is aimed for more advanced users than novices, but it certainly shows that RTM are serious about making their product resemble a desktop application even more.

Undo

A proverbial cherry: undo. There’s nothing that says desktop application more than undo. RTM allows you to undo many of the actions you took, like editing fields, for example. This is simply wonderful! And that’s all I have to say about that.

Mashup

RTM allows you to add a GMail widget as part of GMail Labs. This is a very clever idea, since many people already use GMail as their main mail client. With Google Calendar and the RTM widget placed on the same page as your mailbox, you have an ample substitute-Outlook experience, online, accessible from everywhere, and – most importantly – free of charge.

Offline

Nice one! You don’t have to be online in order to work on your task-list. Probably one of the biggest problems with web applications is that they require you to be online, so for the traveling breed of us it is basically unusable as a tool that we depend upon.

Go offlineWith RTM, you can simply go offline and keep on working, and once you go online the data will be automatically updated with your online RTM service. So, if you’re on a plane and work on your to-do list, you can still use RTM as your main tasks application.

Notes and suggestions

Note: The whole concept of formalizers is not to force people to think like computers but to make computers think like people. So if you’ve already summed up the courage and went for such an advanced feature, you better go all the way.

Suggestion:

  1. Not all date-time-related natural language terms were accepted; the “time estimate” field didn’t approve of “a day” or “four hours”, which is only part of the terms that were left out. Those needed to be addressed as well.
  2. I would also add holidays: “next Christmas” should be popular, or “Memorial Day.”

Note: Also, understanding the human thinking process, as said before, is most important in an application such as this. Tasks sometimes pop into your head in chunks rather than one by one. If your kid has a birthday, for instance, you might need to do several things in order to arrange it – find a venue, buy a cake, select a present, and look for a clown. So a flow of tasks start pouring out of you.

RTM’s way of adding a task is by clicking the Add Task link; however, when the task chunks start flowing, this might be one click too many.

Suggestion: I would place a Quick-add textbox right above the tasklist, so that I can immediately fill in a task name and it’ll be added to the list once I hit Enter; the cursor will then focus on the text box again, ready to receive the next task.

Note: Some features, like delete task and set priority, are placed under a dropdown menu, very similar to GMail. GMail’s choice of placing the Delete function in a relatively hidden place was to state a point – with GMail you don’t really need to delete emails, since you have such a huge mailbox. Here, this feature is absolutely necessary and should not be hidden.

Suggestion: common functions, such as Delete and Set Priority should be located at a prominent place. I would add a rollover toolbar, that shows itself once you hover on a specific task, with a Delete button next and a Priority gauge.

Usability summary: Very advanced desktop-like behavior, which serves the purpose entirely.

Layout

RTM’s layout is great – it’s simple, usable, easy to navigate through and generally makes perfect sense.

Layout

The screen is generally divided into a main panel, located at the left, and a details panel at the right. The main panel shows the “meat” of the application’s content – in this case the task list (with other information on different screens), and the details side-panel displays contextual information on the items we’re now watching.

A main menu at the top-right, a sub-menu as tabs located in the screen’s main area is a simple and effective way to manage navigation.

One thing that should be noted is the contextual info box; it’s located on the details side-panel, and provides helpful information in relations with the action you’re currently taking. This is extremely helpful to us users by providing both useful assistance, and sometimes displays a call-for-action.

Layout summary: Simple and elegant. The contextual info box helps with tips and calls-for-action.

Design

Here, we hit a bump on the road.

I’m not talking about the brand; the logo, with the product’s name written in blue script located next to a comics-style cow’s head could be either liked or disliked, for many reasons on both ends. Think as you may about it – at least it’s iconic to the point where it’s memorable. This, according to many, is what makes a brand work. It’s instantly recognizable and associative to the product’s name. At the end of the day – it’s a matter of taste.

However, the actual user interface element makes a grand statement:

It’s white. There’s white as far as the eye can see, with only the text to keep it company. As white as milk.

So what? Well, white in itself is not a problem at all in product design, as long as the functionality aspect is not impaired by this decision.

I see two main issues here with the decision to make the site’s design as plain as it is:

1. No focal points

This is not just a website – it’s an application people use on a day-to-day basis. Normally, saying something like that about a product is a great thing – it means it brings value to people and therefore succeeds in it first task as a product. But an application needs focal points – visual markers that help the user use the application better and more easily.

This is a particular problem with the selected design, especially since the chosen media – tasks – is so text based. There are no images or videos to serve as contrast. If we compare it to another successful, yet white, application – Flickr, we realize that the decision to make the surrounding layout as plain as possible was to counterpoint the (hopefully) vivid nature of the displayed images.

White...

Each task has specific fields – due date, repeat, time estimate, location, etc. However, when looking at the main tasks manager, and even when focusing on a specific task, these fields are not easily discernable. They don’t stand out of the blank exterior, which makes them very hard to locate and even harder to read.

By selecting a clear design, RTM broke an important rule in product development – never allow the design or the technical implementation to damage a product’s usability. Important data fields, such as due date and location, should be easier to find, and not intermixed with less important fields, such as URL or tags. They definitely should not be listed so plainly one after the other with no distinction.

2. No personal touch

Once again – RTM is an application, not a website, and should therefore be customizable. It should conform to something we’ve gotten quite used to by now – personalized look and layout. We’re already personalizing themes on our Windows desktop for who knows how long, and many web applications have followed suit.

RTM’s product layout works, with different page sections representing different roles the user takes when navigating and manipulating the product. On the other hand, it is expected, in a tool such as this, to allow the user to customize their own layout (place different screen elements on different locations), and to select color schemes that are more appealing to them.

Design summary: Too plain to the point where it causes important information to disappear, with no personal customization.

Under the hood

Who doesn’t like AJAX? For a web application product developer, it has ultimately changed the way we see user experience. Also, it allowed RTM to create an application that has a desktop feel to it.

One annoying aspect of such applications is that they live inside a web browser. Like it or not, we have already gotten used to navigating inside websites using the “Back” and “Next” buttons. However, an application like RTM has a separate navigation mechanism, since the entire application is downloaded as part of the page, and clicking on the menu-bar simply toggles a view rather than requesting a page from the server.

Therefore, once you navigate through RTM, say you go from the Tasks page to the Settings page it doesn’t go to a different page entirely. Therefore, if you click the Back button, then the browser would go to the previously loaded page, which is not the Tasks page. That creates a serious problem concerning site navigation.

RTM attempted to tackle this with changing the address line: once you move to a new page, the page adds a suffix to the address line preceded by the pound sign (#).

http://www.rememberthemilk.com/home/username/#section.tasks

Though I’ve read somewhere that this should solve the issue of creating parmalinks (allowing you to copy the address line and using it as a direct URL to get to that same page), it doesn’t fully solve the problem of Back and Next buttons. GMail managed to solve this issue, and I would love to try my hand in this.

Anyone has an idea how to solve this issue?

Bottom line

Remember The Milk is a superb desktop-like application. Apart from a few issues that I believe should be solved, it actually presents a better alternative to the commonly used practice of writing down task-lists – either on paper, or using Outlook.

The direction that RTM took – making this web application acting like a desktop application – actually makes it possible for us users to abandon client-side, expensive solutions and use RTM as our primary to-do list.

In one word – brilliant.

The Formalizer Revolution

Wednesday, December 31st, 2008

I’ve already discussed formalizers briefly a couple of days ago, and I’ll go on exploring them in future posts as well; but in order to be thorough, I’ll paraphrase:

Formalizers are form fields that accept text input of a specific kind, and allow the users some flexibility to input text in a more natural way.  The formalizer mechanism then takes the input, interprets it, and converts it into formal input that the application can understand.

For example, take a look at Remember The Milk; an amazing web application, hands down.  One of its nicest features is the ability to make task creation a little easier for the user. Most of their fields require some sort of format – like the Due date field shown below.  Editing this field is not done traditionally through drop down lists, or even a calendar popup, but simply by typing in your preference in natural language.  The screencapture below shows how I simply typed the word “tomorrow”, and the formalizer engine understood it and returned the correct date:

Remember The Milk due-date formalizer

The Phenomenon

Science fiction movies have always shown computers that you can actually talk to like human beings; but alongside that fantasy lies a disappointing reality of a long history of people talking down to computers, asking them to do their bidding in the most unintelligent way imaginable.  We’ve actually developed a new way of communicating with computers – mainly through forms – since we understood very early on that using our natural language around computers was like asking a banana to peal itself.

However, in recent years we’ve seen applications start to make an effort in order to actually understand us users and how we express ourselves naturallyNatural Language Processing (NLP) is a fascinating field of computer science that strives to help applications both express themselves to humans in a natural form, and to understand what they’re saying.  The science fiction fantasy of HAL actually speaking and understanding people is slowly becoming a reality.

So what’s the big deal?

I realize that many product marketing and product development people out there ask themselves “why should we care?  This is all technical stuff – let the lab-rats deal with it!”  That couldn’t be farther from the truth.  When you’ll understand formalizers and NLP, you’ll realize that a true revolution is taking place in user experience.

We are experiencing a surge of applications that allow people to share content for free with anyone they like.  I believe mass content is not a passing trend, but is the truest form the internet has taken so far.  It’s here to stay, at least for a while.

Some of these applications work with rich media, like YouTube and Flickr, and some with simple text, like Wikipedia and Remember The Milk.  Sharing rich media content is easy – you simply upload a file and you’re done, and provide some metadata to it, such as a title, description and tags.  However, when uploading simple text-based content, we usually get stuck with the most tedious yet annoyingly common way of text-based content acquisition – forms.

With the constant evolution of formalizer fields, and the incorporation of NLP into traditional forms, things are starting to look slightly brighter for us poor users.  We can begin to actually think and act as human beings around these applications, and rely on them to understand us a little better than their predecessors.  It’s amazing how gratifying it is to use your own words with an application when telling it that the due date for a specific task is “tomorrow” rather than filling in a date form packed with drop-down lists.

Formalizer fields, I believe, will only evolve to be more sophisticated and capable of accepting text in a natural language.  At the very least, they should evolve to a point where more computer illiterate people can start communicating properly with applications.

Any product department that is involved with a text-based, content related product should focus their efforts on providing more formalized fields to users – not only to make their application more usable, but to lower the bar for more people so that they can generate more content.  Needless to say, the more content we have as a company, and the more users we have, the more interesting and useful our product is.  And as content, especially online content, becomes an increasingly common thing in our lives, we’re bound to encounter more and more NLP formalizers as time goes by.

So play it again, Sam.

The 7 basic rules for creating advanced forms

Sunday, December 28th, 2008

FormForms are a pain. They’re boring, tedious, unattractive, and downright annoying. Filling out a form is like bending your mind in order to tell a slow person how to get somewhere fast. But unfortunately, they’re also quite necessary; they’re sometimes the only way for us to communicate with an application.

Once, we used to fill out a form, submit it, and wait for its-majesty-the-server to come back with a favorable response. The less benevolent answer would be a series of fields that were filled in incorrectly. This whole process feels quite bureaucratic, with us sitting at the edge of our seats while our form is being reviewed. Also, when it comes back with multiple errors, we need to go one by one and correct them, usually by looking for flaming red indicators telling us how silly we are for not selecting a username with 6-12 characters in it, or a password that contains uppercase and lowercase letters, or an about field that is formatted like a proper Haiku. And to add insult to injury, security related fields, such as passwords, and authorizing fields, or “I accept the terms” checkboxes, would have to be filled in again. So, basically, the user would sometimes go through numerous submits before moving forward.

Many product development people realize this, which is why we see forms that are becoming smarter and more helpful. It’s basically an “if you can’t get rid of them, improve them” approach. So new methods were created to make forms more user-friendly, and to make them appear as if they’re watching over you and correcting you while you fill in the form.

Here are a few ways to improve forms that could work with the user, and not vice versa:

  1. Tips. Very simple to implement, and quite helpful. When the user gets to fill in a specific field (focuses on it, in browser terms), the field shows a tip, usually on what the field is about and how best to fill it out.
  2. Real-time validity checks. Takes care of approving or disapproving your input as you type it, providing useful tips and suggestions in the process.
  3. Availability checks. This has mostly to do with username fields, where you select a username and are allowed to check its availability without actually submitting the form. When combined with real-time validity check, you don’t need to take your fingers off the keyboard to get an approval for your username selection.
  4. Password strength. With the rise of online security awareness, this simple indicator might do wonders to the user’s peace of mind. A bar-layout-color-coded feedback is displayed next to the field, telling the user how weak or strong the password is. This very responsive gadget encourages the user to do well, to get to the green, and to select a harder-to-break password.
  5. Auto-suggest. This goes the whole nine yards in terms of helping the user accomplish the task of filling in a field. While typing, the form actually suggests a possible value for the field based on the input typed so far. The user can then accept it, and dodge the most annoying task there is – typing. It’s not an easy thing to implement, but quite worth it.
  6. “Formalizers”. Many fields require a specific format, like a date field or a location field. Most forms use drop-down lists to provide the user with options, but mainly to make sure they fill in the field correctly. “Formalizers” are field mechanisms that accept input written in natural language, and automatically convert them to a properly filled-in field. For example, a date formalizer could accept dates written in natural language, rather than selected from dropdown lists, and also accept relative terms, such as “tomorrow” or “next Monday”. Again, quite an advanced feature, which is becoming ever more popular.
  7. One-time humanity check. We all know the terror of spam, and how forms are an easy target for such attacks. Many have adopted anti-spam checks, or humanity tests, to combat this phenomenon. As users, we accept this, though it makes a dull task even more wearisome. But there’s no reason why we should go through this more than once at a given form. If a form has returned with a response, for some reason (when all of the above failed), and the user has already passed the humanity test, it assumes that no sudden transformation has occurred, and that the human is still there; so the anti-spam field does not appear for the second time.

Under the hood

Apart from making the form-filling process less of a burden, it actually saves resources for the application itself by utilizing the processing power of the user’s computer to do some of these checks (validity checks and password strength). This means that instead of using the server to make these validity checks, the browser itself performs these operations, relieving the server of a substantial amount of processing (when multiplied by many-many users).

Even when the server is needed to verify a field (for availability checks, for example), the data posted and received is smaller in comparison to a whole page being sent to the user’s browser.  So instead of asking the server to verify a whole form, and to send an entire page, formatted and all, back to the browser, it is only used to verify a single field, and usually responds very succinctly.  This ultimately removes quite a lot of load from the server, and has a significant impact on the site as an operation.