Category Archives: User experience

Boxy design is for squares

Take a look at this awesome website:

A common way to design websites.

A common way to design websites.

Aside from the nice use of contrast and alignment, impeccable taste in high quality stock photography, and intricate combinations of words related to bacon, this website design is extremely generic. You might have a lot of problems with how it looks, but what I want to rant about specifically is the overuse of boxes in this boxy design.

How many boxes can you count on this one page? I count at least 20. In case you actually took the time to count them up, I highlighted the ones you probably missed:

Don't forget the huge empty white columns on either side of the main column in the middle.

Don’t forget the huge empty white columns on either side of the main column in the middle.

Maybe you missed some others, but the point is that there are way too many boxes on this single page. This is not an uncommon design – now that I’ve pointed it out, you’re likely to spot it all over the internet.

There are still two more boxes that we are forgetting that are present on every webpage. Can you think of what they are? I’ll give you a hint, you can see them right now (I mean before you look at the picture)…

It's a box within a box within a box within a...

It’s a box within a box within a box within a…

The edges of your monitor form a box around everything on your screen. That’s one box you can always count on being there, whether you’re on a PC, a Mac, tablet, smartphone, or whatever. The browser window also forms a box around everything in your browser. Granted, you won’t have one if you’re on a tablet or smartphone, but otherwise you will. This renders the main column above (the huge box in the middle groups that everything on the page together) rather pointless.

So I have to ask: Why is boxy design still so common? Let’s get rid of some of those boxes already!

A few less boxes makes a big difference.

A few less boxes makes a big difference.

Why does this work? The purpose of the boxes that were in the background was to group the content together, but the content is already grouped together because related content is in close proximity to each other! We know that picture of the squirrel goes with the text beside it, and that “A Chunk of Content” goes with the text beneath it. Further, we can tell that it is the title of the article because of how the information is arranged – the title is bigger, and it’s at the top. Our brains are wired to disseminate information like this, so the boxes really didn’t add anything to help us.

Notice that I didn’t remove all of the boxes on the page, only the ones that were totally unnecessary. I still like the contrast provided by the black buttons, so I left those alone.

Also, notice that there aren’t as many things cluttering up the background of the page, so I freed up the color palette. I can use the color I was using in the background as the color of my headers, which adds another dimension of contrast.

Now I’ll be the first to point out that this still isn’t a great looking page, but it looks a lot better than it did when we started. If you’ve got other ideas that could improve this design even further, I’d love to see them!

Slightly fewer boxes, slightly more creative flair.

Slightly fewer boxes, slightly more creative flair.

By the way, I’ve mentioned this before, but almost all of my good design ideas came from The Non-Designer’s Design Book by Robin Williams. Even though I make nothing from advertising, I highly recommend this book to anyone who even occasionally has to do design stuff.

How to make sure your users mean to click “Submit”

Here’s a situation my coworkers and I ran into with our new online testing system: our users were accidentally clicking the “Submit” button on a form, then they were accidentally clicking the “Confirm” button on a confirm dialog popup. We took a number of steps to make it harder for them to do this, including making the “Next” and “Submit” buttons farther apart and changing the positions of the buttons on the form. Then we realized we needed to move the confirm dialog popup as it was appearing directly over the buttons on the form. When that didn’t fix the problem, we realized we needed to change the default button on our confirm dialog popup. It was more than a little tricky figuring out how to manipulate the jQuery UI modal dialog widget, so I’m going to share with you how we did it.

First, here’s how I created my confirm dialog popup using jQuery UI:

<div id="confirm" title="Confirm">
    Are you sure you want to submit your test?
</div>

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: {
            'Confirm' : function() {
                $.ajax({
                    url: $('#testForm').attr('action'),
                    data: $('#testForm').serialize(),
                    type: 'POST'
                });
            },
            'Cancel' : function() {
                $(this).dialog('close');
            }
        },
        modal: true,
        resizable: false
    });
</script>

How to move a jQuery UI dialog widget

Although I had to dig through pages of Google search results to find it, the solution to this problem is pretty simple. The jQuery UI dialog() method – in addition to autoOpen, modal, resizable, and buttons – accepts a position option. It’s fairly obvious how to use this option: giving it a value of ‘top’ will place the dialog widget at the top of the window, giving it a value of [x, y] will place it at the specified co-ordinates in the window.

What’s not obvious is that you can also use the jQuery Position plugin, which allows you to position any element relative to any other element on the page. In my case, I was able to place the top of the dialog widget at the top of another div on my page like so:

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: {
            'Confirm' : function() {
                $.ajax({
                    url: $('#testForm').attr('action'),
                    data: $('#testForm').serialize(),
                    type: 'POST'
                });
            },
            'Cancel' : function() {
                $(this).dialog('close');
            }
        },
        modal: true,
        position: {
            my: 'top',
            at: 'top',
            of: $('#pageTitle')
        },
        resizable: false
    });
</script>

This way, a user can’t accidentally submit the form by double-clicking on the “Submit” button.

How to change the default button in a jQuery UI dialog widget

After looking at a few cryptic solutions on Stack Overflow, one of my coworkers figured out that you can give the buttons option an array of button objects instead of a buttons object itself. The advantage of doing this is you can add any number of attributes to the button objects in the array:

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: [
            {
                class: 'confirmButton',
                click: function() {
                    $.ajax({
                        url: $('#testForm').attr('action'),
                        data: $('#testForm').serialize(),
                        type: 'POST'
                    });
                },
                text: 'Confirm'
            },
            {
                class: 'cancelButton',
                click: function() {
                },
                text: 'Cancel'
            }
        ],
        modal: true,
        position: {
            my: 'top',
            at: 'top',
            of: $('#pageTitle')
        },
        resizable: false
    });
</script>

Give the “Cancel” button a class of “cancelButton” made it easy to select with jQuery. Using the dialog() method’s open event, I added a function to change the focus of the form to the “Cancel” button:

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: [
            {
                class: 'confirmButton',
                click: function() {
                    $.ajax({
                        url: $('#testForm').attr('action'),
                        data: $('#testForm').serialize(),
                        type: 'POST'
                    });
                },
                text: 'Confirm'
            },
            {
                class: 'cancelButton',
                click: function() {
                },
                text: 'Cancel'
            }
        ],
        modal: true,
        open: function() {
            $('.cancelButton').focus();
        },
        position: {
            my: 'top',
            at: 'top',
            of: $('#pageTitle')
        },
        resizable: false
    });
</script>

This way, a user can’t accidentally submit the form by hitting the “Enter” key on their keyboard.