Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Designing the Obvious Clinic: Google Docs & Spreadsheets

Last updated Oct 17, 2003.

By Robert Hoekman, Jr.

About Designing the Obvious Clinics

The goal of each Designing the Obvious clinic is to see how a particular web application measures up to the principles discussed in my book, Designing the Obvious: A Common Sense Approach to Web Application Design. To learn more about Designing the Obvious, visit my Web site.

Googling Your Docs

The mission behind Google’s recent acquisition of Writely, the popular web-based word-processing application, has finally been revealed. Google revamped Writely and coupled it with Google Spreadsheets in a brilliant move to create web alternatives to Microsoft’s Word and Excel. Now that the two applications have been merged and are being given away free to anyone with a Google account, it’s time to take a hard look at them.

Figure 1

Figure 1 Google Docs & Spreadsheets is a real alternative to Microsoft Word and Excel.

Overall, Google did one heck of a good job by creating applications that are easy to understand, learn, and use. Web apps like Google Reader, with its new and improved interface, and Google Page Creator, an extremely simple site-builder tool, have made Google a major contender in the race to move desktop functionality online. Docs & Spreadsheets is no exception—it even includes a few features that are almost too good to be true.

That said, almost everything on the web can be improved. In this article, which is the first in a series of clinics based on Designing the Obvious, we’ll take a look at what Google has done well and what it can do better by running Docs & Spreadsheets through some of the guiding principles of web application design discussed in my book.

In this article, I discuss only the Docs part of Docs & Spreadsheets, and I only discuss it in the context of a few of the principles covered in Designing the Obvious. If I covered everything, the article would be much, much longer.

Supporting The Activity

Core to the activity of document creation, among other things, is the ability to name, save, and organize documents, format text, make lists, freely edit anything you write (perhaps with ways to streamline common tasks), and, of course, undo pretty much everything and start over.

As you’d expect, Google Docs provides methods for doing each of these things. Unlike its desktop competitors, however, Google has also spent a lot of time thinking about collaboration, and what you want to do with your document once it’s been written.

To this end, Google offers a way to send email invitations to friends or colleagues to collaborate on a document. After you enter an email address for an invitee the first time, Google remembers it for you and offers a dropdown menu by which to quickly send repeat invites later on (nice touch!). When a collaborator is editing a document at the same time you are, a message is displayed at the bottom of the interface to tell you who else is busy at work.

In the publishing department, Google has provided a way to save your documents in Word, rich text, OpenOffice, and PDF formats, and also provided the ability to export them as HTML. In fact, the HTML isn’t half bad (it even supports web standards by using CSS for formatting and presentation).

Google also offers a way to publish your document directly to your blog. Not just any blog, mind you, but several blogging services, like Blogger and LiveJournal, and to any hosted blog using Blogger, MetaWeblog, or MovableType systems (and, yes, this includes WordPress).

Building Only What’s Absolutely Necessary

Many word-processor users have learned to leverage a few keyboard shortcuts. Supporting these behaviors gives experienced users-those most likely to latch onto web-based tools first—a way to switch without a learning curve. This makes the features essential.

Fortunately, Google has realized this and supports the use of shortcuts for common tasks like formatting text with bold, italics, and underlines. Heck, Ctrl+S even saves the document, just like it does with its desktop competitors.

One drawback to Google Docs is that it doesn’t—at the time of this writing—recognize the Command key used across Apple applications. Mac users must instead use the Control key to trigger keyboard shortcuts. This not only goes against a fundamental truth for Mac users, but it also makes the functionality difficult to discover. As a result, Mac users will be less likely to get the most out of the application (unless, of course, they read this article).

Moving on, Google Docs is designed to support most users, most of the time (a good mantra for anyone in the software game), and as such, does not do everything a desktop rival might do. To its benefit, it doesn’t perform tricks like mail-merge or offer templates of any kind. Instead, it’s focused on the features that will appeal to the largest percentage of people in most cases. One of these features is the spellchecker, because not everyone is as flawless a writer as you assuredly are. One click of the Check Spelling link highlights each misspelled word in the document. Clicking on each highlighted word displays a menu of spelling suggestions, along with the ability to add the word to the Dictionary.

Figure 2

Figure 2 Strangely, Google is not in Google’s own dictionary, but the spellchecker is brilliant anyway.

One feature that is not quite essential, and not quite graceful, is the Count Words feature, intended as a speedy way to count the words in the document so those tasked with writing 5,000-word term papers and the like can keep themselves in check. It’s possible this feature is used in desktop word-processors more often than I imagine, but at first instinct, it seems like a nice-to-have feature that somehow made its way into the first release. Sadly, the implementation is not all it could be, either.

Figure 3

Figure 3 Modal dialog boxes ask for too much of your attention (100 percent of it, to be precise), and in all the wrong ways.

Anyone who knows me (or who has read Designing the Obvious) can tell you how much I detest document-modal dialog boxes. I despise them because they keep people from interacting with an application until the dialog box is addressed, and they often remove the user from the context in which the dialog box was initiated. Sadly, many web application developers have been finding ways to implement the design pattern online. In this case, the word counter appears as a modal dialog box, and makes itself guilty of these very two issues.

First, the word counter prevents users from interacting with the rest of the application while the dialog box is open. It does this by disabling every control in the interface and displaying a semi-transparent overlay so the dialog box can be better seen.

Second, it takes the user out of context. As in, when you check the word-count, it’s generally because you need the completed document to contain a certain number of words, not because you’re out for a good time on Saturday night. By making the dialog box modal, users can only see the word count by explicitly choosing a menu option to do so. They then must close the dialog box and go back to work. This process makes the word-counter a classic guess-and-check interaction. First, you guess how many words you’ve written, then you check to see if you’re wrong. Wash, rinse, repeat. Since Google committed to keeping this feature, it should have gone all the way and provided a way to show the word-count in a permanent location in the interface, where users could simply glance at it as they type.

On the bright side, Google did realize the high demand for the ability to create and format tables, insert images, and even add comments to documents (something Apple didn’t even get right in Pages), and supports all of these needs.

Turning Beginners Into Intermediates, Immediately

Google Docs doesn’t do anything explicitly to help out new users, but it also doesn’t need to. The development team has done such a great job of making the application self-evident that it’s relatively simple to get up to speed in just a few minutes.

Tabs labeled Edit, Insert, Revisions, Collaborate, and Publish do an excellent job of implying their purpose, even if the details aren’t entirely clear. For example, while you may automatically think to use the Insert tab for inserting images, you might not know that you can also use it to insert bookmarks.

The one and only menu offered in the toolbar along the top of the interface is labeled File, which almost any computer user will recognize as the standard place to visit for operations like creating and saving documents.

Figure 4

Figure 4 Familiar designs and friendly labels make it easy to figure out what’s going on, but still raises a few questions.

Also, the ability to freely play around with the application, coupled with the fact that almost every task can be completed within a single screen, makes it very simple for users to assimilate themselves to the environment and get a sense for what’s possible. Many of the questions that normally go through a user’s mind about how things work and where to perform a particular task are answered simply by keeping everything within arm’s reach. A quick glance around the screen provides clues about much of the functionality and provides insight into how to get going.

Questionably, however, Google uses some of the same types of icons used in Microsoft Office applications to communicate functionality to users. Historically, these icons have not been all that effective in describing their purposes. As a result, Google developers may have missed an opportunity to improve these paradigms and create something more clear.

I’m not sure, for example, what a clipboard has to do with the Paste command, but there it is nonetheless. And the F icon only makes sense if you know that fonts are called fonts. Even then, it’s not obvious. Some of the other icons—like those used for alignment and list types (bullet or numbered)—are much clearer. A little work from a good graphic designer would significantly reduce confusion caused by the remaining icons.

Handling Errors Wisely

Google Docs doesn’t do a great job of handling errors, but that’s because it prevents errors so well that I have yet to see one. Forgiveness is built into every aspect of Docs. You’re free to press buttons, format text, publish, and break stuff all you want. Google simply allows you to undo it all. There are no negative repercussions for experimenting with the application to see what you can do with it. Heck, you can even use the robust revision-tracking feature to compare multiple versions of a document and revert changes at any point.

Google passes this test with flying colors. Very nice work.

Wrapping Up

Google has done a commendable job of designing the obvious.