Day 9: Should we comment on blogs?

The thing I most appreciate about blogs is the diversity of approaches. If a blog is new, I recognize that someone may have not decided how they want to approach the blogosphere, but for a more mature blog, it seems reasonable that a blogger may make a variety of choices for reasons that are individual.

Day 10: Comment Audit

This day asked us to look at how our blogs might affect whether we get comments. Over the course of this blog, I think I have done everything on the list that might deter people. I still struggle over voice, who I am talking to, who I want to talk to, and who might care about what I have to say. Of course, this reflects some of my own confusion about the direction my business in general is moving. It’s an ongoing action research project. I try things, watch how they go, and redesign.

Day 11: Comment Policy

I have a bunch of redesign I am working on behind the scenes, so a comment policy will be added to it. I was particularly taken by Kevin’s concept, where he extends an invitation. So much more appealing to me than a policy per se.

Day 12: Comment Friendly?

Since this is a business blog, I do not feel comfortable taking moderation off for first time commentors. I have caught enough objectionable comments to feel comfortable with this.

Day 13: Post using comments

Since the comment challenge began, I have been writing posts based on reader comments or requests. It started with a comment on Sue Waters blog from Christy Tucker about her new blog header, and I responded with Does my header make my blog look fat? . Jabiz Raisdana asked about his headers on that post, so I wrote, What makes these blog headers effective? Then I got an email from Fred Deutsch so I wrote What to do with a visually noisy blog and Suggestions for a visually noisy blog.

I have enjoyed writing these posts since it has provided me concrete examples of visual patterns to demonstrate how they affect what we do online. I can’t do it all of the time, and it might be very boring after a while, but I hope it has been helpful to readers and the blog owners alike.

Day 14: Turn blog over to readers

Ok, so have you found the series on blog headers and patterns helpful? Interesting? What could I do to be more helpful? Any opinions, I’d love to hear them.

Part 2: Ideas for visually simplifying a blog

First I want to acknowledge the blog we are talking about in this post is chock full of great information and resources. So the goal here is to make that come front and center in a way that isn’t quite so visually overwhelming.

When I started blogging there were so many cool widgets and things to stick in my sidebar that I wanted to try them all. Even being conscious of the visual impact, I still did it. Then I read Skellie’s 50 Ways to Unclutter Your Blog. It really helped me to think more in terms of the readers perspective and about what I was trying to do. I pulled a lot of stuff off my blog that day.

What are readers looking for when they come to your blog?

I think this may be really different from blog to blog, and perhaps from reader to reader. When I come to a blog, the first thing I look at is the tagline for an overall sense of what it is about. I want to see who the author is and something about them. I look for categories or tags so I get a general overview of the topics the person is writing about. Therefore, when I look at the visuals on a blog, my opinions are influenced by what I want to see. Ultimately what works for a particular blog is a balance between what the owner is trying to convey and their readers’ needs.

Customizing a template

The School of Thought blog uses a customized version of Stardust, which I talked about in part 1. The most obvious difference is that the two column design from the original template has been converted to three columns. In the last post we talked about how people read in an F pattern on the web. When there are three columns, the reading pattern is slightly different. The eye can go on several paths, which may become confusing.

Sue Waters wondered:

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?

And Sue Wyatt saw it like this:

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.

The second thing is the decorative flourish that separated the post from the right sidebar, in the original template, has been removed. The flourish provided a visual diverter to keep the eye going back to the posts. Without it, the visual path leads the eye almost off the right side.

What else is affecting how the eye moves?

The picture of Fred helps lead the eye into the post. The description below the photo appears as a grey rectangle. There is nothing to break up the block. Therefore, even though the words are situated in a place which normally would get a lot of attention, they melt into the background. I wouldn’t normally read something in a block like this. The content is great; warm, welcoming, engaging. But you have to get people to read it to know that. Sue Waters noticed:

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.

How might you do this? Break it up into shorter parts. Use some bold? Maybe a bullet? Use a shorter excerpt and lead people to a longer version on the About page? Lots of choices.

As you scroll down, there are long lists of red links in small type. To my eye, when I try to focus on reading the post, it feels like the red links are trying to pull my eyes in two directions. Since it is a flexible width blog, I can reduce this on my 23″ Cinema Display, but there isn’t enough room on the 17″ monitor on my Windows machine at home. It gets even more dramatic on my 12″ laptop.

Manish Mohan saw it this way:

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.

Prime Blog Real Estate

For any blog, the things that are most important to our readers should be in the most prominent places on the blog. This may vary from blog to blog, but I suspect for a large percentage of people the most crucial elements are:

• Name of the blog
• The tagline (what it is about)
• Something about the author
• Where to subscribe
• Categories or most popular posts
• Ads if you are blogging for income

The prime real estate on a blog are the header, the top of the sidebars and anything that is above the fold (meaning things that show without having to scroll).

Right now on Fred’s blog we have the name, tagline, how to search and a way to subscribe labeled RSS in the header. At the top of the sidebar on the left is a picture of Fred. On the right where the eye is being most strongly lead, there is a link that brings you to another site. Underneath it is the login area for the author.

Suggestions?

There are lots of possibilities and a variety of reasons you might go one way or another. If there are statistics available, I would look at what people are clicking on. That would help me see what is important to my readers.

Here is one idea. It’s a sketch I created by taking screenshots and rearranging them, so it’s just to get an idea of how this might look.

I would select the most important links on the site to go in the left column. I usually put my categories here. Fred has a lot of link lists, and it’s not clear to me which ones he thinks are most important for his readers. I would identify what they are and put them here. Right now, categories are in a drop down menu, and there are lot of them. I’d think about shortening the number of categories and listing them out to make them more accessible. I would also place them as high up as possible on the template.

I moved Fred’s picture to the right since that is where this particular template naturally leads the eye. This has the added benefit of deflecting the eye back toward the posts. He could also enhance the visual path back to the post by breaking up the text underneath using bold letters, bullets, and/or paragraphs.

I’d add a Feedburner subscribe link, or some other one that uses natural language. Yes, there is an RSS link above, but I suspect many of Fred’s readers do not know what RSS is. Might also consider a subscribe by email. I have placed the subscribe link where most people expect to find it.

As you scroll down the current blog page, there are multiple link lists. I would move some of them to static pages. This way the offerings you most want readers to see would show up in the horizontal navigation where they can see them when they arrive on your site. There is a lot of great information for readers on this site, but I don’t know how many people are discovering all that is available to them since it requires so much scrolling. There is also the problem with red links on both sides of the page. By removing a lot of the links and placing them on a static Resource page, this would help reduce how much scrolling people have to do in order to get to what they’re after.

I’d move the meta section to the bottom of the blog. Something like this is only for the author, and we know where to find it. It’s just confusing to readers who aren’t WordPress bloggers.

What else might Fred consider?

What do you notice about Fred’s blog? He’s looking for suggestions, so I’m sure he’d appreciate hearing from you. Especially if you are a first time reader, those fresh eyes can often be the most helpful.

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:

1. Determine the color number of the current links so you can find it in the code
2. Determine the color number you want to change them to
3. Find the place in the CSS on the stylesheet that controls those links
4. 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

• Day 1- Commenting self-audit

Commenting has always been somewhat sporadic for me. In phases. I read over 150 blogs, most of which I read the majority of the posts, so that alone is a major time commitment. I find when I am short on time, I skip the commenting. I’m also noticing I gather insights across the blogs I read, often making connections between tidbits that mash up with pieces offline. So the responses I find emerging don’t make sense attached to one place.If I knew ahead of time which tidbits were going to align, I might be able to write the type of posts rich with links that Sue Waters, Michele Martin, and Beth Kanter are so brilliant at doing. I seem to have a more retroactive thought alignment process rather than the anticipatory ones others seem to have that know what they might need and bookmark it for later.

• Day 2- Comment on a new blog

This was easy. The comment challenge is full of blogs that are new to me. Since I train adults, I don’t follow K-12 blogs as a general rule, and the group has a lot of them. It’s been fun to explore them, they certainly have a different flavor. Not quite sure how to add value to the conversations on them yet. Instead I find myself telling those who are expressing anxiety about being behind that it’s OK. I guess I’m trying to find a common ground to share.

• Day 3- Set up comment tracking

Like so many other things I discover on these challenges, the tracking software is a matter of strategizing how I am going to change the patterns of how I engage with daily practices. I center my online life around Google Reader and Mail, so things that integrate easily are the ones that I can adopt quickly. I have installed both co.mment and cocomment, but certainly have not fully adapted to them. And so far, I have found the RSS feeds from these tools to be confusing. Especially with so many similar conversations occurring across multiple blogs.

• Day 4- ask a question in a comment

This is something I do with some regularity. What is interesting to me is how often bloggers ignore the questions I ask. Now I can understand if I ask another commenter a question that they may not see it. But as bloggers, we often get multiple notifications of comments. And I’m not talking just about the blogs with a huge amount of traffic. Leaves me wondering if it is the type of questions I ask, or the type of bloggers I’m asking.

• Day 5- comment on a post I don’t agree with

By far the hardest task for me. This is totally contrary to my online behavior, and has sparked some of the deepest reflection. Offline, I certainly have no problem disagreeing with others. I suspect there are people around me who would say I voice my disagreement too much. So why is it so different for me online? I still haven’t figured it out, and I still haven’t disagreed.

• Day 6 – engage with other commenters

It’s been nice to see the engagement with other commenters on the challenge. I have found it difficult to do this in the past. I read all/most of the comments on a post before I comment, and often try to engage with others. It’s almost like there are unspoken norms that develop on certain blogs. My favorites are the ones where the blogger and the readers talk freely and back and forth. I wonder what it takes to foster that norm?

• Day 7 – 3 Learnings

The three things that jump out to me from the first week:

1. Dedicated commenting takes an organized system to stay manageable
2. I really don’t like the idea of disagreeing online
3. There is a gap between what I like and what I am (not) creating on my own blog

I would love a quick run-down on what story you think my images tell.

He has three blogs, and I think all of Jabiz’s headers are effective for a number of reasons.

Titles

Jabiz uses Intrepid in all his titles. From the Visual Thesaurus, we see words related to intrepid on the left. I would expect his headers to evoke these types of feelings.

He has three blogs.

• Intrepid Teacher
• Intrepid Flame
• Intrepid Classroom

Looking at the the lines in his headers

Here are the headers from his blogs. I have used red to identify what I see as the dominant lines in each image. Notice how these lines direct the eye to the two important areas, the posts and his sidebar. I’ve also made specific comments about the images below each example.

On Intrepid Teacher, the use of a larger boy and a smaller one walking down an alley evokes fearlessness. You don’t know what is at the end around the corner. The larger boy looks like he is being supportive to the smaller one, much like a teacher would be to a student.

On Intrepid Flame, the challis or bowl evokes a feeling of the unknown.

On Intrepid Classroom, the figures are going somewhere, but you don’t know where. They are all going together though. Much like we do in a classroom.

Interpretation of images can be very individual. Certainly affected by each of our experiences and cultural lenses. These are some of my impressions. What about you? And Jabiz, what were your intentions?

What makes these headers work?

It’s the combination of the visual and the verbal.

1. There is something about each of the images that relates to the title. So, something that evokes the quality of intrepid.
2. The dominant lines in the image guide the eye to the most important parts of the blog, the posts and the sidebar.

What else?

What do you see that you think makes a blog header effective? Any examples of headers you can point us to that are really great?