One of the issues that troubled me back then was how to overcome JavaScript single-page navigation while having to cope with traditional browser navigation.  After looking into it, I found what I was looking for; but first, I’ll elaborate on the subject:

All-in-one-page web applications

It’s really cool having a web application that does not require a refresh each time you touch something.  Most websites work in the old fashioned way – you click a link and navigate to another page.  What really happens is your action sends a request to the server to fetch another page, sometimes with specific parameters passed to it.  The server then creates that page for you, send it back, and the browser displays it.  What you as a user see  after clicking the link is a blank page, you wait for the page to load, and then you can move forward.  Even though this type of behavior is common among websites, it could be very uncomfortable for the user.  Come to think of it – none of us are used to this type of behavior with our desktop apps, are we?

Some web applications, like the Google app suite, Remember The Milk, and others utilize a different technique: when you click a link, like navigating to the Sent mailbox on Gmail, the page does not disappear and then reloads again.  What you do see is a “Loading” message at the top, and then the new mailbox just appears at its right place.  This type of user experience is what we should all hope for in heavy-duty web applications.

How does it work?

Anyone who knows JavaScript can figure out a way of doing this, but here’s the basic plot:

The page that you initially get from the server actually contains more than one page – it contains several, while only the one that is currently in focus is shown, while the other ones are hidden.  When clicking a link that should lead you to a new page, like the Sent Items box on your Gmail, the browser simply hides the current page (say, your inbox), and shows the sent items page instead.  This is done instantly, so you get the feeling that there were no reloads.

Furthermore, when the sent items page is displayed, it fetches all of the sent items data from the server, and simply dumps them into the empty page it already has.  This way, you enjoy the best of both worlds – you get a smooth user experience, while the actual data is always updated (since it reached you directly from the server in real time).

So what’s the problem?

The problem, as in many subjects, lies in history.  We are so used to this “page-mode” way of using websites and webapps, that we’ve learned some pretty nasty habits.  One of those is using Back and Forward buttons for navigation.

In a world where all of the websites use full page loads, back and forward makes sense.  When you navigate to a new page, the browser remembers the location of the previous one and will do what it’s supposed to do when the Back button is pressed – go back to the previous page.  However, when new applications are utilizing the “all-in-one-page” approach – then we have a problem: the back and forward buttons become useless.

Imagine this: I’m using a simple all-in-one-page web application to manage my emails.  I have an inbox and sent items box.  I navigate back and forth between them using my on-screen menu links.  What happens under the hood is simple – I never actually leave the page I got in the first place.  All the browser does is hide and show different parts of it, while fetching data from the server and updating it to the respective page section.

Oh no – I clicked the Back button!  I was in my sent items page, and hoped to get back to the inbox (where I was before) but no!  I’m out of the app altogether!

The browser’s history, that should contain all of my navigation track record, never actually recorded my inner-page navigation, since I never really left the page…  This is why classical browser navigation can sometimes cause huge usability problems when using an all-in-one-page web application.

Using anchors

Many apps have found a clever way to resolve this, by using anchors.  You remember anchors – these inner-page links that are used in tables-of-content, like in Wikipedia or a FAQ page.  These links that, once you click them, send you down to different location on the same page.  Well – instead of doing that, anchors might just be the way to solve all of our problems.

If we utilize anchors as part of our app’s navigation, we get exactly what we need: we change the browser’s location, which in turn records that location into its history, without actually leaving the same page…  This allows us to do what we always did – use the Back and Forward buttons, while still remaining in the same page!

Under the hood

After researching it a bit, a few ideas came into light.  The major issue that one should face here is the fact that browsers do not really notify you when you click the back-forward buttons.  You can use the “unload” event, but that doesn’t really cut it – you want to know where you are, not where you’re leaving.

So, basically, the way that this can be accomplished, at least according to what I’ve seen, is by creating a polling mechanism – something that periodically checks the current anchor that you’re in.  All you need to do is set up some sort of a timed interval, check the anchor, and act accordingly.

What you need to do is extremely simple:

All of the links that are used to navigate inside the same page should be anchored, like this:

<a href="#inbox">Inbox</a>
<a href="#sent">Sent items</a>

Then, there should be a JavaScript checker – something that periodically checks to see where the current page anchor is at, and then call a function that shows the page section shat should be shown:

window.onload = function()
{
     setInterval("check_anchor()", 100);
}
 
var current_anchor = null;
 
function check_anchor()
{
     if (current_anchor != document.location.hash)
     {
          current_anchor = document.location.hash;
 
          if (current_anchor == "#inbox")
          {
               // Show your inbox section.
          }
 
          else if (current_anchor == "#sent")
          {
               // Show your sent items section.
          }
     }
}

And that’s all there is to it.  The interval calls a function that checks the anchor, and according to that anchor’s value it directs it to the relevant piece of code.

This is obviously very basic; it does not take care of additional parameter (like “#inbox&q=33526″) and so forth – but you get the general idea.

Really Simple History

One of the better solutions that I’ve found out there is an elegant, lightweight, and free JavaScript library called Really Simple History.  You can add it to your code, initialize it, and direct the history event to a callback function of your choosing.

It really is a magnificent library – try it out!

This, for me, closes the loop for this issue.  Hope this helps – I’m going to use it!

http://www.flickr.com/photos/lorena-david/ / CC BY-NC-SA 2.0

Lately, I find myself writing MRDs for companies I work with.  It’s always a great challenge to construct a good MRDs, but these recent experiences have really been wonderful: I’ve had the rare opportunity to create the company’s very first MRD.

This, naturally, has its pros and cons.  On the up side, you get your hands into something which is pure, raw, and full of vision, instead of delving into a well-formed (or a not-so-well-formed) product with a well-thought-of (or not-so-well-thought-of) business model and a well-constructed (you get the idea) marketing strategy, and trying to make your way through all the constraints and legacy issues that involve a mature product process.

However, the risk in handling an MRD in such an immature stage usually involves the company having a clear enough vision but not a clear enough focus, which tends to make the requirement gathering process rather shaky.  There’s often a great deal of uncertainty, lack of confidence and no real clear-cut objectives.

This is not necessarily something that should receive a reprimand – it’s quite natural.  However, while the rest of the management, often the business and marketing ends, can throw ideas around the room and stare far into the horizon, there should be at least one designated driver among the lot with her feet planted deep in the ground.  This is usually the job of the product marketing person.

Obviously, there are many “how-to”s out there on how to write the best MRD – this is not a post like that; I do, however, wish to convey a few techniques for getting the other people committed and focused on the task at hand.  This, later, can be translated to a document using a template of your choosing.

1. Get the CEO involved.  Make sure the CEO is part of the process.  This is important for two reasons: first, there are certain answers you will only get from the CEO that are crucial for laying the groundwork for the MRD; second – with the CEO in the room, the rest of the group will feel more committed to the task.
2. Just the facts.  It is our job to get the facts straight, at any cost.  Ideas and visions are perfect for brainstorming sessions, and I’m sure each and every one of us can daydream with the rest and the best of them, but this is a luxury we can’t afford right now.  You need to put your foot down and demand straight answers, backed up by logical explanations and as many facts as you can.
3. Start from the top.  The best place to start when constructing a good MRD, which is basically the company’s upcoming product strategy plan, is to begin with the most highly strategic aspect – business goals.  Ask questions like: when’s the next fund raising round?  How much will it be?  How long do we have with the current funding?  When would it be best to present the product?  To whom would it be best to present it to?  What kind of a business goal would that milestone aim to accomplish?  These questions and others like them will help you position your future plans in the overall business roadmap of the company.
4. Work your way down.  After you understand the major milestones that are expected from the company, start drilling down and do your best to make the product roll-out serve these goals.  Start by creating major product milestones that will go along with the business milestones, allowing yourself an ample margin of error.  Then, map out the major features for each milestone, making sure that only the most important ones are addressed, and that they all aim to serve the business end.
5. Don’t go too low.  Try to avoid the implementation pitfalls.  Do not start developing actual features, or try to see how different use cases affect certain aspects of the system – if you do that, you’ll never go out of the conference room.  That’s what PRDs are for.
6. Lay out an architectural plan.  Try to get engineering to draw out the product’s architecture in the most abstract way possible, yet taking into account elements such as deployment, distribution, scale, privacy, security, databases, etc.  I find this process to be extremely helpful in discovering new directions, coming up with exciting capabilities and mega features, and finding out major issues that should be addressed at this stage.  There’s something very evocative in seeing a diagram in a vision-driven meeting.  But remember rule no. 5 – don’t delve too deep!
7. Resources, resources, resources.  Always keep resources in mind.  Make the CEO commit to providing you and engineering with the resources you’d need.  The MRD should point out this information, sure, but the meeting should make everyone aware of how much the project would cost, in general terms, of course.  In other words – when the document comes out, the bottom line should not come as a surprise, or you’d find yourself going through the same meeting all over again, even more than once.
8. Be constructive.  Try too look at things from different angles – try to extrapolate a single element in the system to any actor or use case you can think of.  It’s amazing how many cool ideas come out of that.
9. Discourage destructiveness.  It is clear that MRD meetings are not easy to manage, since this is where vision and practicality meet.  Such encounters are hard on everyone, and sometimes people tend to get discouraged, especially when they’re told to stop dreaming and get real.  Try to notice defensiveness and entrenchment in people and do your best to open them up again, yet always making sure that their focus is well grounded.  Oh – and that goes for you too.
10. Set a time limit.  Make sure that both the meeting and the creation of the MRD are set to a limited time.  This further assists in maintaining focus, driving people to action and decision, and making sure everyone is on the same page.  Remember – an MRD is a map, and a very rough one at that; but it sets the tone for everyone during the upcoming product development period.  The better limits you have – the more focused your MRD will be.  And that is a blessing, no matter what they say.

First – sorry for the long dry spell.  A first child is quite a handful product to take care of…  Too bad there isn’t a manual that comes along with it.

Second, here’s a very helpful post by my good friend Eran Lagon regading the usage of Gmail’s advanced options in order to become more organized.  Getting Things Done is a method that is rapidly becoming a lifesaver for me and many people I know.  Eran’s post on “How to be a Gmail GTD ninja in 5 steps”  makes use of GTD methodologies en route to increasing your productivity.

I personally have implemented everything to the letter from this post; slowly but surely, my inbox is becoming as empty as outer space.

The Russians gave their Cosmonauts a pencil.

Whether this story is accurate or not, it brings out a common product development truth – all things being equal, the simplest solution tends to be the right one. Hence the abbreviation K.I.S.S. – Keep It Simple, Stupid! And reCAPTCHA certainly did achieve a simple solution to several problems at once.

reCAPTCHA is a special captcha form component for identifying humans and rejecting spam and bots.  It is done through the traditional means of displaying distorted words for the users to type and verify. However, instead of generating a random word, reCAPTCHA displays words that were scanned from real text books, thus helping in the global effort of digitizing old texts.

I ran into reCAPTCHA a few months ago and was impressed by the concept of “recycling” human actions – taking something we do so commonly, almost without thinking, like verifying our humanity with forms through captchas, and harnessing it to both combat evil (spam and bots) and do good (digitize texts).

Name: reCAPTCHA Website: recaptcha.net Type: Captcha component reCAPTCHA is a system that uses captcha to help digitize the text of books while protecting websites from bots attempting to access restricted areas.

Value

Let’s take a second to ponder over a very disturbing fact: if we didn’t have spam or bots that were driving our websites off the wall – we wouldn’t have had reCAPTCHA, and as a result, many textbooks wouldn’t have been digitized as part of a universal effort.

When thinking of it that way, reCAPTCHA’s value starts to get a whole new meaning. It becomes very much like modern medicine – it wouldn’t have been discovered had we not gotten ill; I suppose we owe plenty of our discoveries to urgent needs or even accidents, such as the genome project, antibiotics, Champagne, and so forth. It’s strange to vocalize it, but many people around the world will be exposed to important texts digitally thanks to the plague called spam and bots.

That being said, lets examine reCAPTCHA’s value in two aspects: intrinsic value and global contribution.

Intrinsic value

reCAPTCHA has a very granular offering – it provides your product with a solution to something you’ll probably need as part of your registration form, or any other form that requires user authentication. You need to sort out the humans from the bots that attack your site.

Your R&D will most likely tell you that developing such a component is very simple, and there are plenty of open-source solutions out there that you can use. And they’ll be right to say so. Basically, all you need is a tiny utility that generates a random word, and displays it in a funny way. You can add colored squiggly lines if you’re overly creative. And that’s about that.

But reCAPTCHA’s solution has two main advantages:

1. It’s off the shelf. You just cut and paste a little piece of code, and you get all of the intrinsic functionality already contained within it; also, the processing is done on the reCAPTCHA servers, which might free your own servers slightly, but on the other hand relies on a server-farm that is out of your control latency-wise. However, if Twitter and Facebook use it, then I guess it’s all right.
2. It’s fully loaded. Two paragraphs ago, it sounded quite simple to make a workable captcha. However, to make it right, you need to consider people who might not be able to read your distorted image. Sometimes, the text is illegible, and needs to be changed. Again – implementing something like this is not like inventing the space pen, but why bother when this elegant component already exists?

(I’m not sure my dad would be able to read this one…)

Global contribution

I love recycling; not only in my trash habits at home, but also as a goal to live a greener life. Don’t worry – I don’t spend my spare time hugging trees, but I definitely believe that there’s a practical approach to recycling, which can ultimately be applied to business.

“I think there is a world market for maybe five computers,” according to Thomas J. Watson Sr., formerly the president of IBM. I’m afraid Mr. Watson may have missed the mark slightly. Our collective processing power today is gargantuan, and some applications make use of it very effectively.

File sharing, legal or not, is a perfect example for recycling processing power, as well as the wonderful SETI@Home project at Berkeley, which is currently the largest distributed computing effort around the world, utilizing over 3 million computers worldwide in order to analyze data from radio telescopes in search for extra-terrestrial intelligence. reCAPTCHA goes along those lines, but instead of recycling wasted processing time, they’re recycling wasted human effort.

Call me an idealist, but as a product junkie I think that part of making the world a better place revolves around reducing waste and channeling effort. Most of us share their hosing with others, use platforms developed by the online community, incorporate maps drawn by other companies, and make it an effort to make sure we reduce our costs and increase the productivity of our company.

With reCAPTCHA we have a double benefit – we get a ready-to-use component, and join a world effort to bring knowledge to the masses. That alone is a value in itself.

Value summary: Provides an off-the-shelf component that answers a specific requirement, while helping in a global effort to digitize texts.

Usability

One thing to consider when creating such a generic and simple component is not to overdo it. I’m sure product development people would have loved to sink their teeth into this product and design their heart out with plenty of cool features, like changing the image size, making it full-screen, creating a hovering magnify-glass to make the letters bigger, etc. But that would have turned this component into a monster.

When dealing with a component so basic in its functionality, the product developer needs to constantly take a step back and look at the big picture. It’s terribly easy to look at your product under the microscope and be so caught up with its tiny world – I’m sure many of us have been there and realized our overzealousness.

One has to remember that this type of granular component lives inside the context of a foreign web page, which contains a form in it. It’s mostly the last, and least favorite, field the user needs to fill in. So it’s better to keep it as simple and as non-intrusive as possible. We’ve already agreed that forms are a pain – let’s not make them any worse.

reCAPTCHA managed to keep it simple. That’s their first great achievement.

Other than that – the usability is quite basic; after all, this is merely a form field. You can change the text with a new set of words, in case the image that’s presented to you is too hard to read, or you can change the text into an audio challenge taken from an old time radio show (therefore also transcribing old recorded shows).

That’s it; in terms of usability, the product fits the requirements.

Usability summary: Simple and complete.

Layout and design

Once again – such a simple widget doesn’t have much room for an elaborate layout and design schemes. However, one thing that I would like to see is customizable display: my website and forms are usually of a specific design, and I would have liked to make this field look and feel as a native field to my site. I have no problem with sharing credit or double branding, but reCAPTCHA’s choice of Bordeaux colors does not necessarily fit my overall website design.

Layout and design summary: Simple, though cannot be customized.

Under the hood

When I initially heard of reCAPTCHA, the first question that popped into my mind was “how does it work?” If the words that are shown to me are the ones that are used to digitize book, then how does the captcha verify my input as correct? Or else – if the captcha engine already knows the meaning of the word, then what part am I playing here exactly?

And here is where reCAPTCHA came up with the pencil solution.

After the texts are scanned, they go through an OCR process to interpret it. However, OCR is never perfect, and many words remain unresolved. Yet the OCR mechanism is clever enough to at least indicate which words were not interpreted correctly.

So reCAPTCHA came up with a very simple, yet ingenious solution: each user is presented with two words, not one. One word is a word that was successfully acquired by the OCR, while the other one was not. After typing these words, reCAPTCHA verifies the known word with your input; if the match is correct, it assumes that the second, unknown word is also correct.

This user-interpreted word is then given to a few other users for recapturing, and then, after cross verification, the word is declared as properly interpreted.

Why was I so impressed? Because, as a former engineer, I would definitely have overcomplicated something this simple. Can’t help but to doff your cap – well done!

Bottom line

When creating your online forms, it is great to be able to take part in a worldwide effort, and harness the power of the masses to a global endeavor. When your website joins the ranks of websites like Facebook, TicketMaster, Twitter, StumbleUpon and Craigslist, who already use reCAPTCHA, you know that you’re with good company.

Search engines are possibly the most commonly used, and perhaps the oldest type of formalizers out there, which many of us take for granted.

A search form has one major formalizer field, which requires a search query. The user can be quite expressive when filling in this field, while the formalizer field takes care of certain types of input which is expected. Google have been true pioneers in this sense of formalizer usage.

Surely, we all know that there is a specific format for search – we use quotation marks (“”) to group words together, we use logical operators such as OR and AND, or sometimes even use the plus (+) and minus signs (-), especially if you’re an advanced user. However, there are a few things popular search engines have taken care of:

• Stop words. Also known as noise words in some circles, they are words that are filtered out of search queries, usually since they’re too common and appear far too many times in searchable documents. These words, like “is”, “are”, “the”, “you”, “me”, and many others, are omitted from search queries automatically by the search engine, in order to provide a more relevant search result list.
• Spelling. Google really made a difference here, both by finding spelling mistakes in your search query and suggesting a correction for you in the search results, and providing the means for other applications to utilize their spelling mechanism with their SOAP search API.
• Contextual search. When typing a specific search phrase that requires a specific type of data, Google makes sure they provide you with this data as quickly as they can, with the tools that they have. You can get stock quotes, airline schedules and word definitions simply by asking for them. This saves a lot of time and hassle by simply thinking like people do, so a simple phrase like “kilometer in mile” typed into the Google search box will make the simple conversion for us, and display it at the top of the page.

What can we learn from Google?

Many applications, especially web applications, provide search capabilities to their users. With search being such a common use-case, not to mention a perfect way to learn of your users’ habits, product development managers need to make their search engines as usable and formalizer-friendly as they possibly can.

Here’s a short checklist:

1. Auto-suggest. When users start typing search queries, try to assist them with suggestions based on common search queries.
2. Spelling. As mentioned before, there are services for checking the spelling of search queries out there, like the one Google offers us. Therefore, there’s no need to develop it in-house, and you can literally use the best tool out there. This way, users won’t get frustrated when a misspelled query gets sent back with no results.
3. Natural language. This is probably the most specific, and therefore most complicated aspect of formalizer-friendly search engine. It requires you to define a way for the user to communicate with your application’s search engine in a natural language. Try to find common search phrases and to identify patterns that occur the most, and you’ll be able to see how you can go towards your users and help them by understanding their queries better.

Combining these three elements together creates a powerful search user experience, and positions you immediately above your competitors in terms of usability and barrier of entry.

For example: say you have a dating website, and your search box allows users to look for possible people to meet. You could provide a boring form that would require an “advanced search” option to be clicked (possibly the worst use-case a search engine could have, but more on that in a later post).

On the other hand, you can define a few search patterns that upgrades your search field into a formalizer. Such fields are not search-boxes in their classical sense, and are usually preceded with a question, such as “what kind of date are you looking for?” to which the user can answer “middle-aged men in the greater LA area.”

And now, the hard work begins: your language processor should be able to understand this sentence and extract meaningful information out of it.  It should understand that “middle-aged” means a certain age group, and that “the greater LA area” is a geographic region. Again – not the easiest of tasks, but once implemented, it goes a very long way in terms of usability.

This, combined with a spelling service and an auto-suggest utility, makes sure the user types the words correctly, or at least minimizes the number of mistakes the user makes. This allows your formalizer mechanism to be right more times than wrong and ultimately makes your users happier. And happy users will return again tomorrow, no doubt.

Getting Things Done

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.

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

Paper 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.

One 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!

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.

With 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.

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.

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.

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:

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 naturally.  Natural 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.

Wikipedia is probably one of the single products that have significantly changed the world.  This website, which accumulates knowledge and provides it to everyone for free, joins a long line of revolutionary products that had made us who we are, and shaped civilization in a way that changed human life forever.

Let’s put them in context for a second:

• The Alphabet. The first Egyptians and Phoenicians, who revolutionized writing from hieroglyph-based to phonemic script, and ultimately given us the alphabet.  This made reading and writing a significantly easier skill to master, and instead of learning thousands of images and hieroglyphs, reading and writing were reduced to identifying a couple of dozen symbols.  Knowledge became more accessible to people all around the ancient world, and knowledge started to become the realm of humanity.
• Numerals. The ancient Babylonians gave us algebra, and opened up a new way for us to view the world with an advanced arithmetic system.  And with the numeral system, which was first developed in ancient India, humanity was exposed to the wonders of mathematics, and the infinite possibilities it created.
• Law. Lawmakers and lawgivers, like Dracon and Solon of ancient Greece, had given us access to the law of the land.  Law, which was a private practice known only to selected elite, was made public, readable, and accessible by all.  Our lives as citizens were revolutionized with this basic freedom of knowledge
• Print. Johannes Gutenberg found an efficient way to spread the written word throughout the world with his printing press.  By utilizing printing, books were no longer the sole property of monasteries and royalty, but spread across nations and continents.  Literacy levels sprung almost immediately, allowing us to learn, improve and achieve.
• Public knowledge. Wikipedia’s achievement is no lesser than any of the above.  This website has managed to turn human wisdom, learning and education into an organized, categorized and free enterprise.  Knowledge is no longer the province of the few, but the realm of all humanity.  It is available from any place on the planet, in numerous languages, and can be enriched by any one of us.  Wikipedia has given us the freedom to learn, to grow, and to become better people by acquainting ourselves with our world and the civilizations within it.

Imagine a world without any of the above discoveries and developments – a world without literacy, science, knowledge, learning, law, and civilization. Denying the world of Wikipedia is no different.

We owe much of our children’s future to Wikipedia.  So let’s help them help us, and let’s all take part in this effort to make knowledge a public domain.

Forms are a pain

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.