When should design trump usability? Can a pretty site be a little less usable if it’s extra beautiful? Or is that always a no-no?

In traditional desktop applications, it’s a common rule of thumb to not hide functionality behind things such as right-click menus, but to expose them more generally through a top level menu or toolbar. Sometimes in web design, web sites themselves can have a learning curve. It may not be immediately apparent how a site works or what to click on. Its learnability may be a little lower in order to accommodate a slicker design. The web site simply becomes less intuitive. Hyperlinked images start looking like regular images and text hyperlinks start looking like regular text until the mouse rolls over it. That’s negative points in the world of user experience.

The actual level of usability needs to be considered too. Preferably your web site is not just usable, but competitively usable. Users should prefer to use your website rather than someone else’s. Since the iPhone has been out a while now, some people have come to realize that on-screen keyboards aren’t all they’re cracked up to be. Even though it is beautiful to behold…

you just can’t beat the tactile response of a hardware keyboard…

So when do you go with usability rather than a beautiful design? Or is beauty sometimes enough to compensate for a less than stellar user experience?

Never assume that the user will never encounter your crazy error condition. "I’ll put this in a message box for me to see it" is what you might think. "They’ll never see this in the field" is a tempting thought. But then your users might end up seeing something like this:

I can see a line number from a C++ file and some variables being printed to the screen, but what am I supposed to do with that? Is this error bad enough that I should reboot? Should I tell the vendor? Ok, now which application actually popped this error? Was it a browser? Outlook? or maybe Vista itself? I really have no clue. And if my mom ever got this error, she’d be even more lost than me.

So even though you’re sure that the error condition in your if-else block will never happen and there’s no way the user will ever see it, just remember this blog post.

What’s the best way to balance innovation and convention? creativity and expectations? novelty and normality? When you have a good idea to improve the UX of your product when do you choose to use that rather than stick to what users are used to seeing? If you don’t have the option of doing user research and putting this in front of real users’ faces, what do you do?

I’ll start off with a story. A couple months ago, another developer and I came up with a fairly innovative way to improve how we do filtering in our product. This product hasn’t been released yet. We have other products that do similar things, but our product is completely new… unreleased… so this is time to improve it and try new things, right? So we bring our idea into one of the UI review meetings we have every week, and well… let’s say things didn’t go as planned. We heard comments ranging from "why is it changing?" to "what’s wrong with the old way?" to "this is completely unusable". Mind you, no one there had any real data either. They were just stating their opinion. We had several use cases where our method was superior and more powerful than what the product currently had, but that didn’t matter. They couldn’t see the value in the new paradigm we introduced.

In Observing the User Experience, Mike Kuniavsky talks about a company "Bengali" and their cutting edge, question all your assumptions, state of the art product "Typhoon". Typhoon was supposed to be the next generation web site. A revolution in the industry. The product that sets the standards in the coming age. The problem is that it didn’t follow any current conventions or standards or anything else that users of the day were used to. Worse yet, Bengali didn’t do any usability research until it was too late. Only then did they find out that users didn’t know what to do with it. It was too cutting edge… too revolutionary… too new.

In our UI review, it was pointed out that the filtering mechanism we have now works well and that people are used to it. And that’s a completely valid point. "If it ain’t broke, don’t fix it", right? But that just leads to uninspiring, stale products. Nothing really new ever gets created. So when do you innovate and when do you stick to conventions?

One of the things that was hard for me to get past when transitioning from C++ to C# was the lack of a ‘const’ keyword. Sure C# has ‘const’ (albeit a weaker version), ‘readonly’, and ”final’, but none of them have quite the same semantics as the good ol’ C++ const. In C++, I could do something like this:

void DoStuff()
{
    const int MaxAmount = CalculateMaxForToday();
    if(MaxAmount > 5)
    {
        // do stuff
    }
    .
    .
    .
    // do some more stuff
    .
    .
    .
    // do stuff at end
    Sum += MaxAmount;
}

What I like about that is that I declared MaxAmount as a constant integer and it cannot be changed for its entire lifetime (at least without some semi-major hacking to get around the compiler complaining about it). What I did there was I said that MaxAmount will be constant. I don’t intend it to change for its entire scope. I like to think about that as “Intent Programming”. I program my intentions into the code. No comment is required. I don’t need to say “// MaxAmount shouldn’t change”. The compiler will enforce the const-correctness for me.

What that also means is that when I get moved off the project and someone else comes on to maintain the code, my intentions will still be enforced. The compiler will enforce them and will protect that variable from accidental or even intentional modification. If the new guy doesn’t see MaxAmount being used at the end of the function, he may decide that it’s safe to change it. He may decide to re-purpose it it in the middle of that function around the “do some more stuff” section in my example. In C++, the compiler will prevent this. In C#, there’s no way to do this. Declaring a variable as ‘static readonly‘ will accomplish this for static variables, but for local variables it just ain’t gonna happen.

This is also why I love the ‘using’ keyword in C#. I have heard that it was tacked on as an afterthought when designing C#, but I love it nonetheless. It allows you to do stuff like:

public void DoDotNetStuff()
{
    .
    .
    .
    using (System.IO.Stream stream = wc.OpenRead(url))
    {
        avatar = image.FromStream(stream);
        stream.Close();
    }
    // can’t use stream over here
    .
    .
    .
}

Outside of the using block, stream is out of scope. It’s the same as declaring it inside its own scope. You try to use it outside the using block and:

error CS0103: The name ’stream’ does not exist in the current context

As long as System.IO.Stream implements IDisposable, you can exactly control the lifetime of your variable and you don’t even have to bother messing with the Dispose method. Your variable is scoped, disposed and garbage collected all in one neat and tidy package. You programmed your intent for the usage of that variable right there in the code itself. No comments required.

Sometimes this is called ‘Self Documenting Code’. I tend to think of Self Documenting Code as a style of code organization and a usage of long names to describe what the code is doing. With intent programming, you’re using the features of the language itself to help declare your intent.

I was called out by Dan Rigsby to do this, so here she goes:

1. How old were you when you started programming?

   I believe I was 12 or 13.

2. How did you get started in programming?

   I remember learning some BASIC in school in either 6th or 7th grade. Ya know, you draw a blocky gun and make it fire a one pixel bullet across the screen. I remember that being pretty fun. Also, right around the same time I started playing with QBASIC at home.

3. What was your first language?

   BASIC/QBASIC

4. What was the first real program you wrote?

   Not counting school, the first real program I wrote was a spaghetti code version (chock full of GOTO’s) of a Choose Your Own Adventure book.

5. What languages have you used since you started programming?

   BASIC, QBASIC, C, C++, MIPS Assembly Language, VB, ADA, Java, C#, ASP.NET, Javascript

6. What was your first professional programming gig?

   I was a lab TA for the CS101 Java course at Purdue, so that was my first job involving programming, but my first job actually programming was at Raytheon. I worked there for six years before coming to Interactive Intelligence in 2006. At Raytheon, I worked on various project for the Army and Navy involving mortar aiming applications, handheld applications, route planning applications for helicopters and many other things. If I tell you anymore I’d have to kill you.

7. If you knew then what you know now, would you have started programming?

   Definitely. Whenever I get asked what my dream job would be I always reply that it would be doing what I’m doing now (programming) or touring in a band. I deeply enjoy them both. But I must admit that programming for myself and writing whatever I want to write at the time would definitely be better than the maintenance programming I sometimes still have to do.

8. If there is one thing you learned along the way that you would tell new developers, what would it be?

   Don’t waste time. I can think of numerous times in college and after college that I just screwed around and did other things when I could have been honing my skills more and keeping myself up to date. I’m trying to get myself back up to date now and it would have been easier if I had just spent the time after college to do so.

9. What’s the most fun you’ve ever had … programming?

   I love programming for fun. Right now, my extracurricular programming activity is writing Bitter a Twitter/social networking client. In my spare time, I’ve also written a chat program, an email application, an account/password manager, an RSS aggregator and several Pocket PC applications including a file explorer, an RSS aggregator, a network scanner, and various other tools. I just find it a great way to learn and to me it’s extremely fun.

10. Who are you calling out?

    I want to call some fellow bloggers and non-bloggers alike (to see if they’ll actually start):

    • Aaron Lerch
    • Scott Bauer
    • Jeff Moser
    • Kyle Brown
    • Jake Robinson
    • Evan Byl
    • Brian McGreer
    • Todd Zerbe

I conducted an initial test run of a card sort today for my Twitter client Bitter. A card sort is a usability technique in which you hold sessions with potential users of your application and you, well, have them sort cards. Each card will contain a label used in your application. In an open card sort, the users will create groupings of cards themselves and name each grouping. In a closed card sort, the users will group the cards into the group names you provide them.

If your application is a web site, a card sort could help you organize the pages and links that belong under each section for your site’s navigation. If your application is a traditional desktop app, a card sort could help you organize the menu items under a top level menu. For my card sort, I used the labels from my options dialog (and even some potential future labels I plan to add) and had the user sort them.

I expected to end the card sort session with several groupings and have a better idea of how others may view the labels. I did indeed end up with that, but discovered several other things in the process that I didn’t expect. There were a couple assumptions I had made about how the options were to be used with the currently logged in user and the card sort showed me that those assumptions may not necessarily be made by other users.

Another thing I found was that you need to carefully think about and decide what to put on your cards. You have the choice of simply putting the label on the card, or you can put the label and a description of the label on each card. If you put just the label, then you’ll likely have the same problem as me of context-sensitive labels. For example, I have some labels named “New Tweets”, “New Replies” and “Sent Direct Message” among others. By themselves, you aren’t quite sure what they refer to, but once you see them grouped under the “Sounds” section it becomes more obvious. So should the cards stay pure and say precisely what the label will say in the application or should you muck with your independent variables and change the cards to include context like “New Tweets Sound“? That’s something you need to weigh the pros and cons of and determine for yourself and also probably consider when analyzing the results of the card sort.

Also, let your participant talk during the session. Let them ask questions. All this is valuable information. You can then ask yourself why the participant said this or that or why they asked what a certain card meant. You may think the answer is obvious, but maybe it’s not. But if they do ask you what a specific card means, ask them what they think it means. That’s yet more valuable information.

It’s also a good idea to video record the whole thing. It’s impossible to take notes and get everything during the session. Also sometimes you’ll see things on the recording that you didn’t see during the session. Just make sure you get permission first.

Overall, even though this was just an initial test run of a card sort, I can already see the benefits. I did this run through to see what works and what doesn’t work and now have a pretty good idea. If you are writing an application whether in your own free time or professionally, a card sort is a good idea. It doesn’t even have to be formal. Asking a coworker to take a few minutes and come over to your office for a quick card sort would work fine. Often times we just get so close to our applications, that we lost perspective. We get tunnel vision on how it’ll be used and how things will be used and interpreted. A card sort is simply a tool to get other perspectives and to rid yourself of tunnel vision.

Do have you a blog? Do you like word clouds? Do you wear shirts? Well then do I have a web site for you!

Just follow these three easy steps:

1) Go to SnapShirts.com, click "Custom" and enter your blog address:

2) Generate your word cloud:

3) Order your shirt:

It’s just that easy!

So what’s got two thumbs and loves his blog word cloud T-shirt?

Scott has been receiving emails from Sprint for several months now. The emails are kind and courteous and they thank him for his payment. They’re in plain text, no links. It’s not spam. It’s a real email from Sprint. The problem is that it’s not for Scott’s account. The emails are intended for another Sprint customer, but are for some reason being sent to Scott. Scott emailed Sprint’s customer service about the situation, but armed with only Scott’s email address that they had been sending payment receipt emails to, they just couldn’t figure out who should actually be getting the emails.

So Scott and I decided to set out and see what we could find out from just the email address. First, we went on to Sprint’s site and saw the login area of the webpage:

The "forgot username" link looked inviting, so we clicked there. Now all we have to do is enter the email address:

Email address entered and sent. Shortly afterward we received an email with the username. Success! But wait, what’s this? The email conveniently contained a link to the forgot password page:

Ok, Sprint, now you’re just making this too easy. We entered the email address and username and then received another email with a customized link to set a new password. Yes, that’s all it took. We now have full access to this guy’s account and all because he put in the wrong email address. We’re nice guys and all, so we logged out and sent an email to Sprint with the username to see if they would finally rectify the situation.

So here’s the question of the day: Is Sprint’s site truly secure? Should an email address really be treated as the key to the kingdom and allow anyone with access to the email address access to everything else? Shouldn’t at least one security question (no matter how secure (or insecure) they actually are) have been asked somewhere in this process? The concept of security and usability being at odds has been floated around a lot. Making something more secure tends to make it less user friendly and vice versa and while everyone wants their web site and application and product to be as easy to use as possible, security simply shouldn’t take a back seat.

In a world where multi-factor authentication is readily available, something like this just shouldn’t happen. There are plenty of different one time security tokens (some with screens and some that act as virtual keyboards), finger print scanners, and many other solutions that are orders of magnitude more secure than a password (especially passwords with an email address backdoor).

So when you’re designing your next web site, or web application, or regular desktop application, stop and think through all the different avenues that deal with authentication and security. Think about what can be done if an attacker has only one authentication factor, or if an attacker gains control of the email address associated to a user’s account, or if an attacker figures out one or more answers to your security questions. Are you comfortable with what the attacker can or cannot access? Is a little loss in usability and ease of use worth the extra security to prevent these sorts of attacks?

What scares me is that had Scott and I been not so nice of guys, we could have signed this poor sap up for Sprint’s Family Locator service and tracked him and his family right on their web site:

Now tell me how secure that is…

I’ve been thinking about how to do this recently with Bitter. When you have an update for your application that you want your users to have, how should you push it down? I see four distinct levels of updating:

Manual Check and Web Page Download

You can require the user to manually go the web page, check for a new version, download it and copy it over the old application. This is obviously the worse way to go from a usability perspective, but also requires little to no work for the developer (other than packaging up the new version). This is probably ok for applications that are seldom used, not popular, or maybe only for a select group of users, but not ok for anything other than that.

Automatic Check and Web Page Download

In this scenario, the application would automatically check for updates and alert the user of such, but would still require the user to actively download and “reinstall” the application. This only requires the application to download a file stored on the file that contains the currently released version number and compare it against it own. The developer would also need to manage the version number file and update it accordingly. Not difficult to accomplish and it gives you a little more bang for your buck.

Automatic Check and Automatic Download

With this version, the application would both check and compare the versions and then would automatically download the new version of the application with the user’s approval. It may also even copy the application in place over itself and restart the application. This is what I’ve currently done with Bitter as I document in this post. This is still not that hard to accomplish. In .NET, I showed that doing this is only about 10 lines of code of any real meat (not counting exception handling, logging and message boxing).

Automatic Check and Automatic Install

Here the application automatically checks for updates and automatically installs updates. No user intervention required or possible.

So what’s the best way to go? With Automatic Check and Automatic Download, the user still has to tell the application to download and install the updates. It’s up to the user. In Automatic Check and Automatic Install, the user has no choice. He is going to get the update or he ain’t running the application.

One of my new favorite applications Digsby, uses the Automatic Check and Automatic Install approach. When you login, it will check for updates and automatically install them. You don’t have a choice. This is good because the user doesn’t have to do anything special. They will always be up to date. This is good for the developer too, since the developer knows that if you are running the application you will have the latest version (or at least the next time you start). But what if you don’t want the update? It’s not uncommon for developers to introduce new features as well as new bugs into an application in an update. If you know about the new bug introduced in the next version, but need to login, what are you going to do? You don’t have a choice but to accept the update, get the bug, and hope another update with the bug fixed will be coming soon (and hope that no other additional bugs will be introduced as well).

On the other hand, if you don’t force updates, your user base could become this heterogeneous mixture of versions that you have to support and that your website has to support. If version 1.0 is checking for updates in a certain path, but the current version is checking for updates in another path, you either need to support both paths for an indeterminate amount of time or just let v1.0 break. Not only that, but users running older versions might request features that are already fixed and they have no real obligation or motivation to move to the next version. They could stay there using v1.0 until our insect overlords come and take over. Is that ok (the versioning thing not the insect thing)?

One more facet to consider with support is that businesses typically want to test Windows updates before deploying them across their organization. This often means that organizations and the multitudes of computers behind them can be several versions behind the current one in whichever OS they are using. If this describes the situation of your application, then the decision is already made for you. No auto updating otherwise your application will be passed up for another that does allow less-automatic update installation. However, most of us (thankfully?) aren’t in that category.

Arguably one of the best if not the best free Photoshop-like applications out there, Paint.NET, does not force you to update. It shows you that an update is available when you start up the application and you can check for updates through the menu, but you aren’t forced to update. And you know where it’s gotten them? I’m running version 3.10 on both of my home computers even though the current version is 3.31. I’ve seen the update dialog for months now and still haven’t installed the update. I’ve not intentionally not installed the application, it’s just that the version I have seems to work fine and I really don’t know how much trouble it will be or how long it will take to install the new version even though I’ve never tried. I simply don’t want to be bothered with it.

Where does that leave us?

The Automatic Check and Automatic Download method gives the user more control and keeps the user in the loop, but… it keeps the user in the loop. Most users don’t care about versions, they always want the latest. That may mean that we should use the Automatic Check and Automatic Install method, right? But doing that will piss off the 1% of users that actually want to control their versions let alone the business users. And what’s worse is that this method is all or nothing. You can’t let most users automatically update and then let other users choose which version they want. If that’s the case, then you’re automatically back in the Automatic Check and Automatic Download way of things with the support troubles and versioning nightmare.

So what’s it going be? Should you just cater to the common case or do you want to attempt to make all your users happy?

In my quest to make my Twitter client Bitter as easy to use as possible, one upgrade I had considered was making it auto-updateable. You click a button, it updates. Done.

As most things in .NET, it turned out to be relatively simple. You download the file, you move it on top of the running app, you restart… all neat and tidy. So without further ado, here’s the code:

private void UpdateApplication(string applicationDownloadURL)
{
    string downloadedFilePath = System.IO.Path.Combine(System.IO.Path.GetTempPath(), “bitter.exe”);

    // download the exe
    bool shouldContinue = true;
    try
    {
        WebClient wc = new WebClient();
        wc.DownloadFile(applicationDownloadURL, downloadedFilePath);
    }
    catch (Exception ex)
    {
        shouldContinue = false;
    }

    if (shouldContinue)
    {
        // get running app path
        string appPath = Application.ExecutablePath;

        // copy over running app
        try
        {
            // create archive’s app path
            string archiveAppPath = appPath + “.old”;

            // delete any old archived apps, archive the current app
            // and move the downloaded app in place
            System.IO.File.Delete(archiveAppPath);
            System.IO.File.Move(appPath, archiveAppPath);
            System.IO.File.Move(downloadedFilePath, appPath);
        }
        catch (Exception ex)
        {
            shouldContinue = false;
        }

        // restart the app
        if (shouldContinue)
        {
            Application.Restart();
        }
    }
}

Of course you should add logging and user feedback where appropriate. This is just skeleton code that gets the job done. Enjoy!