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.

I like the idea of not having to open up another IM client to talk to my friends who use Google Talk instead of Windows Live Messenger. Until Microsoft actually implements cross-protocol IM like they said they were going to back in the day, I stick with using both Google Talk inside of Gmail and Windows Live Messenger.

The Problem

The problem I have though, is that I don’t like my instant messengers beeping at me when I get messages. I prefer visual cues, like how Windows Live Messenger makes the taskbar icon flash. Unfortunately, Google Talk in Gmail does not do this! Back in the days of XP and Vista, the problem was solved by changing the title of the page from “Gmail – …” to “New message from contact” or something to that effect. This would cause a sort of blinking animation in the task bar – as Firefox’s taskbar icon title just shows the title of whatever site you’re currently on.

However, since Windows 7 doesn’t display window titles in the task bar by default – and I rather like this setting – I have no good means of determining when a message has arrived for me. Sure, due to the translucent nature of my window decorations, sometimes I notice the blinking title bar anyway – but its not reliable.

The Idea

Gmail Labs rolls out new features that users can opt into all the time! If one of these new features were to make the browser icon in the toolbar flash when a new message arrives – similar to Windows Live Messenger does – the problem could be solved. However, I’m not entirely sure that’s something a browser lets you do, so unfortunately a plug-in might be required. Either way, the people behind Gmail Labs are smart, and I’m sure they can solve the problem as long as they’re aware the problem exists!

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.

In my opinion, the change room is the most important part because that’s where I ultimately decide if I am going to spend money at the shop or not. Shops whose change rooms made this process easier got more of my money – unless their products were complete crap of course.

What struck me as interesting is that without knowing it, I’d been conducting a usability study on the user experience of shoppers – where in this case the user was the customer at a particular shop. As a result of this impromptu study I put together a list of qualities a good change room should have based on my own experiences hopping around from shop to shop.

The list is as follows:

Have mirrors in each change room.

This is such an easy one. Your want to see how they look, but they might not want everyone else in the store or change room area to see.

Have an change room area separate from the rest of the store.

Lots of people come to clothes stores with a friend, or in groups. When a shopper does decide to come out of the change room to get opinions, they probably only want them from their entourage – not the rest of the store.

Have mirrors in the change room area.

Sometimes what you’re trying on looks great in the change room, but once you see it out in the open or a member of your entourage points out a problem, it’s nice to have a mirror to double check. Additionally, it provides a clear point of congregation for shoppers and their entourage. Placed carefully, change room area mirrors can direct traffic so people aren’t standing around in awkward spots in the area looking at each other.

Have seating in your change room area.

It can be a pain when you’re waiting around for your fellow shopper to come out and show you the items they’re trying on. Especially when they have a bunch to try on. Providing seating for the members of a shopper’s entourage is a courtesy that I thoroughly enjoy when I get dragged out to shop with other people.

Have a place to hang clothes.

When you come into a change room with multiple items, it’s nice to have a hook to hang all the  items so you can look at them one by one. Having multiple hooks helps the shopper keep track of the items they like and don’t like as well.

Have a place to set the clothes down.

I’ve been in far too many change rooms where they do provide a spot to hang clothes, but what’s all you get. A bench provides a nice place to set things  because lets face it, putting clothes on the ground in these rooms feels a bit bad. Also, it can be pain to re-hang everything, especially those items you’re not even going to buy. Don’t want them? Toss ‘em on the bench.

This list is not at all exhaustive,  but the best change rooms – and by extension the best stores – I’ve been in have implemented most or all of these ideas, and are the ones I continue to shop at. Just remember, even the best change room can’t make up for crappy products!

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.

Project MORIS was the final project to a directed study on User Interface Design that Tyler Burton, Jon Fritz and I completed in the Fall of 2009 at Wilfrid Laurier University under the supervision of Dr. Angele Hamel.  We decided to analyze the current registration system used at WLU called LORIS. After our analysis, we created a prototype of a new interface for LORIS using Visual Studio with Windows Forms and C#.

For the presentation we spent a few minutes whipping up a slideshow that gives a quick overview of what features of LORIS that Project MORIS was designed to fix. We intended to show a live demo of the application, however we ran out of time (presentations were limited to 6 minutes) so I decided to post both the slideshow and the application on the web. This way anyone who wants can check out the application or see a quick highlight of what we aimed to fix.

You can read a bit more about it on my About page, or just download the files here:

Presentation: Redesigning LORIS [.ppt]

Presentation: Redesigning LORIS [.pdf]

Application: Project MORIS [Requires the .NET Framework 3.0]

Leave your thoughts or questions in the comments and I’ll get back to you!