After writing my last post on Instapaper, I started asking myself “what could be done to solve the problem?” I’ve come up with a few ideas that might work. First, here is a picture of what Instapaper looks like when you’re looking at your list of unread pages:

And when you click delete on an article, you get the following prompt.

As the annotations illustrate, theres a fair distance to move between the delete link of a page near the bottom and the buttons to accept/cancel the prompt. My first idea was to simply move the prompt beside the article you’re deleting with some fancy javascript popup. It might look something like this:

However popups are slightly annoying, they may cover some other content (in this case, the ads for Instapaper subscriptions – which the people in charge likely won’t want hidden), and this still requires you to move the mouse – though a considerably shorter distance. So back to the drawing board I went. Solution two was to change what’s displayed in the “Source – Date – Share – Edit – Delete” area to an in-line prompt:

This way, if the user really did want to delete that page, all they have to do is click again – the “Yes, delete it” link is directly underneath where the “Delete” link was. Now my choice of colours/font is rough, but the idea is clear. After clicking yes, the section for that page would be removed from the list. After clicking no, the prompt would go away (possibly via a nice animation) and the previous “Source – Date – Share – Edit – Delete” display would return. Note two choices I did make though:

1. Using actions instead of simple Yes/No responses. This makes it clear to the user what they’ll be doing when they click one of the choices. Additionally, it may become clear what they are being promted to do just by reading their options.
2. Normally, the positive action (in this case “Yes, delete it”) is the first option on the left, and the negative action is on the right. This is how I arranged the responses in my first solution. In this one, I reversed the responses so that the user could click again without having to move their mouse if they did intend to delete the page. However, this may break some mental models – which would likely make the trade-off not worth it. Usability testing here may be required.

And that’s it! If you have other ideas, or thoughts on the ones I suggested – leave ‘em in the comments.

I’m not an expert in human-computer interaction (hereby referered to as HCI). I can’t rhyme off every best-practice interaction design principle, nor do I have all the best UX patterns memorized. I am still an amateur trying to break into the field. However, I do have a knack for noticing annoying things in websites and apps, and it’s always nice to find a design principle that explains why a certain behaviour can annoy a user.

Today’s example of intuition-to-principle comes to us from Instapaper. I got on the Instapaper bandwagon a bit later than most people – as in I started using it last week. So as I’m playing around with it today, I wanted to delete one of the articles I had saved and subsequently finished reading. Now, to their credit, what happens next  isn’t entirely a bad thing. When you delete an article instead of archiving it, a little message window pops up asking you if you want to ‘permanently remove this item from your account’. This is a good thing, but what sucks is the placement of the pop up.

Because Instapaper is using what seems to be a simple javascript alert to accomplish this, the alert appears in the middle of your browser window. This accomplishes the task of letting the user decide to cancel deletion, but in a disruptive manner. Why is it disruptive? Not only does the alert prevent you from continuing until you deal with it, but you have to move your cursor from the item you were deleting, to the prompt. It may not seem like the biggest deal, but when you’re deleting lots of items, the time it takes to mouse back and forth gets annoying quick.

The fun part of all this, is I’m not the first person to discover the fact that the time it takes to move your mouse around the screen can degrade a user’s experience. Fitts’s law, according to wikipedia, ‘is a model of human movement in human–computer interaction and ergonomics that predicts that the time required to rapidly move to a target area is a function of the distance to and the size of the target’.

Designers have been keeping Fitts’s law in mind for a while now, because a reduction in time taken to perform a task causes an increase in perceived efficiency and ease-of-use.  So as it turns out, you don’t need to know every design principle in order to enhance the user experience of a product, but know a few here and there can help you explain why there is a need to change in the first place.