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
24 Responses to “What to do with a visually noisy blog”
Comments
Read below or add a comment...
Leave A Comment...
Online Print Gallery
Affordable photographic prints of paintings
First thing that stands out when I visit Fred’s blog is he is using 3-columns in blog while your analysis is of two columns i.e. he has a left and right sidebar. Based on how you have explained people read online I now wondering how whether a left and right sidebar change this reading pattern and are they competing for attention with the post?
Second observation is Fred’s image plus information on the left is dominating the blog dragging my eyes to the left. I don’t think that is a bad thing but feel that the wording needs to be shortened and broken up to make it more concise. What are your thoughts?
I never thought about the way my template might be read – choices of colour, number of columns, left to right in F pattern. I went into Fred’s blog and immediately the black writing got my eye, but further down the page the red on the left drew my eye first. I don’t think I even looked at the right hand side.
I then went back to my blog and dashboard>presentation but could not find how to make any changes to the stylesheet.
But many thanks for drawing my attention to the way people read blogs in general.
Very interesting analysis of how people read online. On Fred’s blog I basically read through the middle column. The text was easy to read in the middle. The side bars (left and right) have very small font text. So even though the color is red, and like you say pulls the eye, I ignored it completely. Perhaps it is because unconsciously I know that the main content on the page is in the middle column, perhaps because the middle column is significantly easier to read with bigger font. Only after I had scanned through the posts content did I review the page again for snippets on the sidebars to see if there was anything interesting.
Thank you so much for all the time you have put into your blog-site analysis. Your assessment is way cool! I spend a good deal of time sharing my thoughts and passions about education on my blog, but somewhat like my personality, I have so much going on that things get congested and complicated, hence reducing readership and/or the impact of the message — and that’s not what I want to do!
I’m going to spend some time playing with a few changes suggested above and on your second post and see what happens! – Fred Deutsch
The "F" design really helped me think about how readers look at blogs. Thank you for your informative analysis.
I teach high school English and my students all have their own blogs–I would like to help them create a clean design that is easy to read.
If anyone wishes to critique our blogs, we would be happy to get feedback.
I’ve made some initial changes to the http://www.school-of-thought.net blog. What do you think of the changes so far? Like, dislike, etc? – Fred Deutsch
The categories on the left side bar are a work in progress. I’m trying to reduce the number of categories — combining, etc. My default category is "graduation stats," so until I get the posts re-categorized, everything gets dumped into that default.
I’m still debating about having so many static pages listed on my header. Right now there is five. Is that distracting? Does that command your eye to travel away from the post? I’m thing about combining two pages and just titling it "more resources." It would create a longer page with links of my documents, videos and books, but would reduce some of the clutter in the header. What do you think is more important — reducing clutter in the header or being more organized with the individual pages?
Thank you so much for your ideas. I will work on it next week after I give my finals.
Kia Ora Christine!
I have always enjoyed reading text in columns. I learnt about the reasons behind columnising text some years back and had never understood why it made it easier to read.
I get a headache reading text (especially in emails) that stretches right across the screen. Whereas a column of text not only facilitates the reading task but also permits scanning and speed-reading, even from the screen.
Ka kite ano
@Christine – speed readers find long wide-screen-written lines impossible. They can only take in the information, at an astonishing rate, when it is columnised.
I reckon the brain is programmed to assimilate data best in a vertical format rather in a horizontal one. After all, when our primitive ancestors were confronted with a death-threatening enemy, it would probably be looming vertically rather than horizontally. Those that could assess the situation quickest would be more likely to survive. These were our ancestors.
Ka kite
Awesome, i’m gonna try to do a test with this
Sue,
You’re getting good at this visual analysis stuff!
This template was designed for two columns, but the developer offers a customization for three columns. Just as you noticed, it does set up a competition with the post. You are right again when you notice the pull to the left, and that the wording below counters it. I’ll be showing more about how these things happen in the next post.
Thanks for playing along. Fred has some great content pulled together, I think we can help him make it easier to find.
Sue W,
You have a template with a strong design. The pen image in your header really guides the eye toward your post. Even more when you put an image at the top left of a post. I don’t think you can get into the code of a hosted blog like Edublogs, its only when you use wordpress.org and host it yourself. But you can still be aware of the images and widgets that are in your sidebars.
Fred,
It actually helps me to have something concrete to use as an example to talk about visual patterns, so I appreciate you offering up your blog to talk about.
Blogs are a process. I am constantly trying to figure out what to do on mine. What I do like is how easy it is to make changes and just try things to see how it goes. You have great content, that is really the key. So we’ll be watching as you make it easier to find it all.
I like how you have organized the links on the pages, and given us an idea of why you have listed them. Not sure why they are tagged graduation stats?
You are well on your way to helping us as your readers find what you have to offer. And it’s a lot! You’ve put a lot of work into collecting all these resources together. Great work.
Fred,
I need to reorganize my categories also, so I know it is quite the process. I have noticed when people do it, it makes a big difference in finding what I’m looking for on their site.
The header and right side bar are working together to pull the eye. The header starts leading your eye to the right, then the blinking Ask and red links add to the pull. I would try reducing the links (take the page title off one page post and change the other just to try it before you move everything). You will still have some feeling of density because there are still a lot of strong visual elements competing for your eye in the same general area.
I think your header and front page is always the most important. After all if readers don’t look at that, they aren’t going to your other pages and links. I also think when people do click deeper into your site, they are more committed to finding what you have to offer. I think you can organize them using header tags to separate the areas.
Melissa, I find the Visited Little Theme very difficult to read. There are so many elements fighting for attention with the layered content rectangles with multiple borders on top of other images. The multiple primary color typefaces on the black background make it almost impossible for me to read. It takes a lot of concentration just to discern the words. There is great content, but for me the theme is discouraging me from reading it. I also wanted to see where you are. I think I figured out you were in St Louis? But an easy to find about page, even if it just said midwest USA would be helpful, since we have a global community.
Our eyes seem so flexible until we try to do something like read across too wide a range. There are so many things that effect our perceptions, it’s hard to keep up with it all.