I love Evernote. I mostly use it to ‘clip’ online articles or select and save them into my online notebook, which I can access from any computer or phone. The Firefox browser add-on action screen that lets me save the article bothers me, because I’ve clicked the “cancel” button a few times when I meant to click “save.”
The problem is both buttons look the same. If I want to quickly save an article, I might not see which is which in that split second. It’s a user interface annoyance.
Fig. 1: Near the bottom of the browser pop-up window, the save and cancel button both look the same.
Also, the save button is first, on the left, while the cancel button is to its right or last.
Since we read from left to right, it makes more sense to have the save button on the right; it’s the next page, or final destination. In usability terms, I see left pointing arrows to mean go back, while right pointing arrows go forward. Same with cancel/submit button systems. Mac OS and apps place the final ok button on the right. Since I’m an Apple/Mac user, the order seems backwards.
Some of you might say it doesn’t matter what order the buttons are in — it’s a personal preference. True, Windows systems have the desired action first, with the cancel option last. Usability studies show about 50/50 preference for action button order.
However, the consensus was the same for which button needs to be most noticeable. The desired action button needs to stand out more than the cancel button (which is secondary).
I’ve redesigned the save button, making it (the desired action) stand out more. Cancel is less bright because it isn’t the user’s first choice. I used green because it matched their brand identity, and green is another good action button color (besides red). Also, the button doesn’t have to be a graphics file, it can be done in CSS.
Fig. 2: After a slight UI rework, it’s clearer which button is the confirmed action.
Learn more about Evernote. You can do a lot more with it. It’s like a digital scrapbook that holds a variety of media like web page screen shots, articles, photos, lists and notes.