During a typical day of working on Monday Night Combat, I'll have brief but frequent periods of time where, in order to test a change to the UI I've just made, I'm waiting for the game to be built and pushed -- or "cooked" -- to my Xbox, and since I can't actually make any changes during this time it leaves me with about two minutes of time where I'll fire up a web browser, check email, or otherwise twiddle my thumbs. It can be pretty distracting to keep moving from random web articles back to the game, so I thought it would help my focus if I tried to at least productively read things that have to do with UI, keeping my attention at least mostly related to the task at hand. So during those moments for the past few weeks I've been collecting articles about user experience design and user interface design and storing them in a notebook in my very favorite app of all time, Evernote. By tagging them in their own notebook I'm slowly accumulating an indexed encyclopedia of UX and UI design knowledge that I can use for my own reference, edification, and skill growth. I also post these articles to Twitter and Facebook as I find them (I'm trying to consciously add value to my social networking these days rather than just posting about what I had for lunch -- it was a pulled-pork sandwich, though, if you must know), and after a couple of people told me they've really been digging these articles, I decided I should share my Evernote notebook publicly for the benefit of other people who might like to see this information collected.

So yesterday I fired up the Evernote app and tried to share my "UI and UX Articles" notebook with the world, and I ran into a really frustrating UX and UI issue that stuck in my craw hard enough to have me thinking about it most of the afternoon. And that led to me thinking about how I would have solved the issue, which led to sketching, and ultimately to me thinking that this is a good opportunity for me to give myself a UX/UI homework assignment: redesign Evernote's notebook sharing. (See the note at the end of this article in which I attempt to justify my belief that I'm not being a snarky UI designer.)

Let's start by taking a look at the goal, the current user experience in achieving that goal, and the desired user experience with possible solutions to achieve it, at least from my own perspective. If any other UI/UX people are out there reading this, certainly feel free to grade my homework and let me know if you think I'm entirely off-base.

The goal: The user wants to share a notebook, either publicly or with specified people.

The current user experience: Sharing can only be done via the web app, and the UI for sharing is inconsistent, confusing, and leads the user to a dead-end unrelated path.

The desired user experience: Sharing should be easy to do, take a minimal amount of clicks, and be easy to find.

The Current User Experience

From the get-go I'm presented with a small usability annoyance: why can I only share notebooks via the web and not the Evernote application itself? As a developer I'm willing to give Evernote the benefit of the doubt on this one and assume that there's a technical limitation right now that makes it non-trivial to share notebooks via any platform other than the web app. As a user, though, I've heard -- through my experience in using Evernote -- that notebooks are shareable, so I'm baffled as to why there's no "Share" option when I right-click on a notebook. That's the action that coincides with my mental model of how sharing would work, a mental model based on years of using apps that work this way.

The inability to share notebooks via the flagship Evernote application is even more baffling given the data presented inThe Evernote web interface.

The top left list is a list of my notebooks, and beneath that is a widget that says, "Sharing." Since I want to share a notebook, this is the first thing I click.

What I see here is a header, a paragraph, and a link. I see the words "click Sharing Setup", but my eyes don't see a link with the words "Sharing Setup". I see something about linking notebooks, but since this is the box about Sharing and this is the only link I see, I assume this is going to take me to the right place, so I click it. This is where I end up when I click.

At this point I'm pretty confused. I want to share a notebook and I clicked "sharing" and then clicked the one link I saw, but now I'm reading something about linking shared notebooks to my account. I'm not interested in linking other people's notebooks into my account -- I clicked something about sharing, and this assumes I'm dealing with a notebook that's already shared somehow. There's nothing about how to share a notebook on this page, so I click Back to see if maybe I clicked on the wrong link. When I get the previous page I click "Sharing" again to see if I missed anything...but no, I get the same box that tells me to click "Sharing Setup". Except I don't see any link that says "Sharing Setup."

Oh, wait! After spending several minutes and at least one click into the "linking" page to see if maybe I missed something there that would take me to sharing, I finally see it: the header is a link. I'm supposed to click the header that says "Sharing Setup." When I mouse over it I see that it highlights. Aha.

This touches on one of my biggest pet peeves about interface design: not maintaining separation and consistency between headers, body copy, and links.

There are two problems I see with the way this box is designed. The first is that the paragraph header itself is used as the link, but there's no indication that it's clickable. In the very same space I see underlined text -- this is a web convention that we all know well: bold and/or underlined texts are links, and headers are almost never links. Secondly, the header text is not in an active voice; there's no indication to the user that this is an actionable item. If I'm going to break the first convention and use a header as a link, then the only way the user is really going to know that it's a link and thus goes somewhere is to indicate that with language that indicates motion or transition. A better phrasing of this header would have been something like, "Go To Sharing Setup." But even with this fix we're still violating consistency rules, and we're also doing something else that's one of my pet peeves: using the language "click here" to tell a user where to click. That's very previous-century web design; links should always be self-evident in today's web design and should never need a paragraph next to it explaining that you should click it.

At this point you've probably read the paragraph included in this box and said to yourself, "didn't you read what it said? It said 'click sharing setup.' It's your own fault you didn't follow directions." And in a sense you'd be right. But here's the thing: UI design is all about patterns and consistency, and when users work with web apps we scan for familiar UI patterns. We really don't read. It would be nice if we did but we're using an application, not reading fiction; we want to work fast and we assume that things we're familiar with will act in ways that are familiar even if we don't read the text surrounding them. It's a fact of technological life.

I didn't have any linked notebooks at the time that I originally went looking for the sharing functionality, but I eventually linked the shared Evernote Support notebook -- the notebook housing the confusing note about how to import notebooks into your account -- and the resulting functionality of the Sharing widget became even more baffling.

Why would the Sharing widget look almost perfectly identical to the Notebooks widget right above it, but not list my linked notebooks exactly like my own notebooks? Every other widget in this column is expandable; why this one is not and shows a popup with little information is baffling. But at least the "Sharing Setup" link looks a little more like a link now.

The worst part about all of this? I've gone through this process before and it was just as confusing then as it is now. I had shared out my Wedding Planner notebook a couple of months ago, but because the process was so convoluted and took me down so many non-obvious paths there was no way I could remember how to go through all of that again, so I was just as confused the next time I went to share a notebook.

The User Experience Redesigned

The first thing I did was do some brief, small sketches of ways the left-hand area could be redesigned to be clearer. There's nothing revolutionary here. Evernote already designed the app this way -- they just left it in the upper "Notebooks" area and didn't carry it through to the Sharing functionality. (You'll have to forgive the poor quality -- these are cellphone snaps instead of scans I'm afraid.)

The first thing I did was change the Sharing widget to a Linked Notebooks widget and change the Notebooks label to read Your Notebooks. By doing this we immediately separate out the two kinds of notebooks we can have in Evernote: our own, and those that other people own that we've imported into our account. The new Linked Notebooks widget deals only with linking, which turns out to be kind of different from sharing -- sharing is the process of making your own notebooks readable by other people, and linking is the process of importing other people's notebooks into your account. These two different functionalities shouldn't be housed under the single title of Sharing.

The actual sharing functionality can now be moved into something more logical. Do you see the "Edit" box at the bottom of the Your Notebooks widget? It seems pretty logical that sharing is a setting we can edit, and if we pull down the Edit box we'll see things we can do with our notebooks that also seem logically grouped with the ability to set a notebook's sharing properties.

You might think at first that the "Properties..." option would be the group to hold any share settings. But on clicking "Properties..." we're presented with a tiny dialog that only contains two options: setting the name of the selected notebook and setting this to your default notebook. But the main "Edit" dialog already has an option to rename the selected notebook, so why are we doubling up this option in a popup that only contains two options?

Why not replace the "Properties..." option with a "Set as default notebook" option and add "Sharing..." as an option below that? The "Sharing" option would then take you to the existing page we've been trying to get to all along in this exercise.

We can take this user experience redesign a step further, though. Why require the user to click a notebook and then make a second click on the Edit box at the very bottom of that list, followed by a third click for the option they want? We can see that each Notebook widget allows you to maximize and minimize it, so why not carry that same functionality through and give each notebook an expandable list of options? Horizontal spacing is not an issue since the width of the left column of the Evernote web app is dynamically resizable.

This dropdown would eliminate another curious part of the sharing experience design. When we click "Sharing Setup" we're presented with this page:

You must click the button to edit a notebook's sharing properties to get to the page we've been trying to reach. If the sharing option were integrated as previously described, clicking on "Sharing..." would take the user directly to the sharing options for the individual notebook instead of an interim page that doesn't seem to do much but require an extraneous click.

This would also eliminate one more small design issue with this page: differentiating the two currently similar "Edit" buttons on the page. One is for notebooks and is contained within the Notebooks widget, and the other is in a row of buttons at the top of the notebook contents itself on the right.

When I was looking for notebook options I saw two "Edit" buttons on the page and didn't immediately associate the row on the top with the notebook contents -- for a second or two I thought that row of buttons pertained to the master notebook I was in because the names of the buttons were fairly generic ("New", "Edit", "Delete" instead of "New Note", "Edit Note", and "Delete Note"). Then I realized why that was the case, apart from the text labels themselves: there isn't enough visual spacing to help our eyes associate the buttons with their appropriate content, which is the notes below them. Attaching the options for each Notebook tightly to the notebook title itself would clear up this ambiguity. Pushing the spacing and detaching the notebook contents into its own visual container with the buttons would also help.

If we followed these steps, the act of sharing a notebook publicly, which is a pretty cool feature of Evernote, could be done in just a couple of easy-to-find clicks, and the options for each notebook would not only be more quickly accessible but more tightly integrated, making them easier to find. The concepts of linking and sharing would be cleanly separated and easily identified.

A Note On Hubris

Now, I know what you're thinking. It's pretty gauche to just start dictating to some other designer or company how they should do things. Trust me, I've been on that end of the stick -- as a game developer you have gamers constantly telling you how you should have done things in your last game with all the confidence of someone who knows your job way better than you do. I can't tell you how many armchair game UI designers are out there -- I've met too many to count. It's impossible not to sound like you're breezing in, slapping a design solution down on the table with a sarcastic "you're welcome," and then pushing up your fake horn-rimmed glasses while taking out your iPhone 4 and pretending you just got a call from Steve Jobs asking if you wanted to grab some tapas. (Note to self: get some fake horn-rimmed glasses. Also, befriend Steve Jobs.)

I'm not trying to tell Evernote how to design. Okay, I suppose I am. But I'm probably not telling them anything they don't already know -- UI and UX is complicated stuff, and things slip through the cracks or sometimes get designed in ways that were intuitive once but feel broken later, and this is probably all stuff that's already on their list. And of course those who live in glass houses and all that. Really, I'm just looking at this as a homework assignment for myself -- as a devoted fan of Evernote, I see a usability problem that makes my usually wonderful experience less than wonderful, and since I'm a UI designer/developer, why shouldn't I put my money where my mouth is and use this as a learning tool in how to design what I think would be a better experience?

So...you're welcome. Now excuse me, I've got to take this call.

"Yo, Steve, what is up, my man? Hell yeah I know a kickin' tapas place..."

2 Comments