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.

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.

It was a very interesting talk – which I may get into in more detail in another blog post – but my interest was piqued on another topic before our guest speaker even took the stage. While waiting for everyone to take their seats I was socializing with a few of the other attendees. In advance, if either of the two ladies I was speaking to tonight end up reading this – I’m very sorry I forgot your names!

During some light conversation about our interests in user experience related fields – one of these ladies (we’ll call her Alice) wanted to add the other (we’ll call her Brenda) to LinkedIn. Alice asked Brenda if she was on LinkedIn, and after Brenda said yes, Alice proceeded to pull out her BlackBerry to look Brenda up.

It was at this point that I asked them “won’t it be interesting when your phone will have opened up LinkedIn and already searched for Brenda because it heard our conversation?”. We all kind of laughed, and commented on how that technology was not quite ready for that yet with big smiles. Phones reacting to your conversations? Sorcery I say!

However ridiculous this concept sounds, we might not be that far off.

Technologies such as Microsoft’s Xbox 360 Kinect have (as I’ve heard) very intelligent voice detection – to the point where it knows the difference between the voices of the users in the room. It’s not a stretch to imagine Microsoft putting similar technology into their newly launched Windows Phone 7 to enable this very sort of thing. It would be a very interesting shift in user experience design for applications to know what you want to do before you’ve decided to do it.

It happened when I was looking at an older post on the site, one with links I had already visited, but forgot that I had seen. For whatever reason, the theme used at the blog styles visited links a red colour. Not really a big deal right? Red’s a nice enough colour.

When I considered hitting the link, I noticed it was red. Immediately I changed my mind and kept browsing. Moments later, I found another red link, and was a little irritated. It took me a few seconds to realize why, but thanks to Wikipedia‘s styling, I have apparently started associating red links with missing content.

For those readers who aren’t familiar with Wikipedia, it hosts a bunch of information on basically everything. Each page on the site is full of links to other pages within the site, but sometimes those pages get removed, or links to pages that don’t exist are added to remind someone to make that page later. To help out their users, Wikipedia has styled these links in a red colour, so that readers know that there’s no page at the other end of that link.

Realizing this, I went ahead and clicked the links to find that I’d already seen the content. So what does this mean? For starters, the blog’s operators should probably fix this problem, being as it is a blog for a user experience group and shouldn’t go around messing with people’s mental models. It also means that the next time I design a web-based system I’ll have a new mental model in mind to optimize how my users will interact with it.

I’d like to point out that IxDA Waterloo is an awesome group. If you’re in the Waterloo region and interested in user experience or interaction design, I’d highly recommend joining the User Experience Peer Group at Communitech’s website, joining the local IxDA group, and coming out to their monthly meetings. March’s meeting was on table-top computing, and in April we did a UX Show and Tell where I recently gave a short presentation on Project MORIS. Its definitely worth your time.

Has anyone else noticed they’ve started to treat red links in the same manner? Questions/remarks about mental models or something else I mentioned in this post? Let me know in the comments.