A little effort could do wonders

These bands are playing at Jazzfest 2012I checked out the New Orleans Jazz & Heritage Festival website to look up this year’s lineup. I was excited to see who was playing each day. To my disappointment, when I navigated to the daily lineup pages, the first thing I wanted to do was to click [x] and close the webpage. I couldn’t believe the utter lack of effort that seemed to go into the design of this page. With just a little more effort, this page would have saved me, and other visitors much pain.

There are so many things that you could do to drastically increase the readability and effectiveness of this page. There are also so many incremental changes you could do to make this page just a little better. Here are three of those incremental changes that would take no time at all. I would implement any one of them and do wonders with just a little effort.

1. More is not always better

Bold should be used for emphasis—much like it’s used in textbooks to highlight terms. In almost all cases, it should never be used for styling. In this case, every band or artist is styled in bold. Instead of adding emphasis, the boldface detracts from the overall significance. It’s comparable to highlighting every sentence in a textbook. When you look back through it, nothing stands out since everything is now important.

If the purpose of bolding everything is for styling, then something is wrong. What happens when emphasis is needed within a block of text that is already in boldface? Since you can’t easily bold the boldface, you’d have to resort to other tactics like italics, underlining, or changing the color. This is opening up a whole new can that could have been avoided by implementing the style correctly at the start.

2. I don’t want to work for it

I came to the page looking for a specific artist that I knew was listed, but it still took me longer than it should have to find it. Furthermore, the band listing is difficult to scan, and I had trouble parsing artists. The artists’ names were jammed together, much liketheendofthissentence.

When you type, you think of the words you want to type and rely on your fingers working out the individual keys without consciously thinking about them. This abstraction is important because it allows us to type words as we think of them. Imagine how difficult it would be and how slow we’d type if we thought of letters instead of words. I-SPACE-A-M-SPACE-T-Y-P-I-N-G-PERIOD. Our conscience minds are wired to think of logical groupings of things passing off the details to our unconscious mind. When I go to this page, I’m looking for bands and artists whose names should each be in their own logical grouping.

The way the page stands now, it looks like a string of text, and my brain has trouble parsing it. I have to consciously think of each word my eyes see, find out what part of the artist’s name it’s in, then read and process the whole name. Wash, rinse, and repeat. Oh, and the boldface isn’t helping this logical grouping either.

3. Find your center

Like boldface, center has it’s uses, too. However, it has to be done right. If you’re centering something, you must be going for some sort of symmetry. Afterall, isn’t that why you want equal spacing on both sides of your text? In this case, the symmetry is lost once you start putting line breaks in the middle of an artist’s name. Additionally, the number of artists per line seems to be random. I see anywhere from 2 to 5 artists per line, and the line breaks aren’t there to keep a consistent length.

For this page, if I needed to keep the center, I would put one artist on each line.

This would maintain the symmetry of the center,
increase scannability,
and give meaning to the line breaks.

This entry was posted in it and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>