What to do with a visually noisy blog
Part 1: Your template as your visual foundation
Fred Deutsch emailed me with a Help, help, help me subject line:
Hi, I really enjoy your site and am learning a lot. I’m wondering if you
might provide me some feedback or suggestions? I started my blog for two purposes — first to communicate with constituents and educational people, and second as a sort of reference area for me to list all my favorite sites (the side bars). But now that I’ve been blogging a few months, the blog page seems congested to me — or at least not as visually inviting as I would like it to be. Do you have any suggestions?
When I started looking at Fred’s site, I noticed a couple of things. But in order to really explain it, I need a couple of posts to do it. So I hope Fred can hang on while I talk about some of the visual basics under what is going on in his blog. When we select a template, we are choosing the foundation visuals of our blogs. I’m going to talk about the template Fred has chosen in this post, and write another post on the choices he has made that affect it.
How do people read on the web?
Eye tracking studies have shown people tend to read in an F shaped pattern online. These are heatmaps, where the areas that are most looked at are red, then yellow, then blue, with the grey areas being places that the eye skips over.
Looking at these charts you can see there is a general overall pattern (the F pattern) but you can also see how there are visual elements that also pull the eye. For example, in the middle heatmap, there are arrows that point to a box on the right side.
So when design elements fall into this F pattern, it’s pretty easy for the eye to follow. If you want the eye to go in another pattern, you have to do something to get its attention.
The template underneath Fred’s blog
Fred uses a customized version of Stardust. It’s a black and white template with red accents. Red against the black and white provides a lot of contrast and the red strongly attracts the eye. There is a decorative spray of leaves that also acts to deflect the eye back toward the post.
You can see, if you remove the spray (see template below), there is nothing to stop the eye from being pulled off the right side. The links create tracks for our eyes to follow that lead our attention off the blog to the right. Now if you have a short post so there is another red calendar or a strong image inserted on the left, you may be able to pull the eye back. But how often do you write your posts to satisfy the visual need of your blog? (OK, so I might.)
What can you do to change the way the eye moves?
In this case, you can darken the color of the links on the right. That will help the brighter reds move the eye back to the post.
In order to do this you need to get into the code and change a color number on the stylesheet. It isn’t terribly difficult, but you do have to pay attention and not modify the code in any other ways. There are several steps:
- Determine the color number of the current links so you can find it in the code
- Determine the color number you want to change them to
- Find the place in the CSS on the stylesheet that controls those links
- Change the color number
Finding colors
There are many ways to do this depending on the software you have access to. I’m showing the color picker in Photoshop, since that is the image program I use. First I took the screen shot of the template I show above, then open the image in Photoshop. I used the eyedropper tool to find the red used in the template, then selected a darker version of that color. The hexidecimal color number I need for the code is in the box at the bottom of the color picker.
Changing the Stylesheet in a Wordpress blog
I installed this template on a testblog that has been updated to version 2.5.1. If you are using another version, the admin interface may look different, but the basic process is the same. Open the admin, go to the Design (used to be called Presentation) tab. Select Theme Editor, then Stylesheet. Scroll down until you find the code for the links (click on the image to see it larger and clearer type). Make the change and click update.
Doing things in unconventional ways
Now, I am certainly one to break rules, especially in design. However, I do think about when it serves me and when it doesn’t. In a blog, we have many elements competing for attention. If we can use some elements that are familiar to the general user, those elements basically stop competing. We see them, recognize them, and move on.
This blog template chooses not to use the orange RSS symbol to subscribe to the feed. Instead it uses a link labeled RSS.
Usability expert Jacob Nielson has this to say:
The first, and strongest, guideline about news feeds is to stop calling them RSS. In our study, 82% of users had no idea what this term meant. Using implementation-oriented terminology is generally a bad idea, because most users don’t understand (or care about) the underlying technology. It’s better to use terms that indicate what the concept does for users. In this case, “news feed” does this far better than “RSS.”
How do you deal with a visually noisy blog?
OK, I’ve given you my perspective, now tell me yours. What do you think about this template and the visual flow? What do you do to increase the readability of your blog from a visual perspective?
Next up: suggestions for Fred’s blog
I’ll be putting up a second post on how to de-noize (I’m going to copyright this word, so don’t steal it) a blog, using Fred’s as an example. Some of the things we’ll be looking at are the unintentional consequences of changing the template and what are people looking for when they come to your blog.
Suggestions for a visually noisy blog
