Zen Habits Redesign: The 7 Question Simplicity Review
Yesterday popular self-improvement blog Zen Habits launched its first redesign. It’s a blog I read regularly and one I know many Skelliewag.org readers also enjoy. The redesign was crafted by one of my favorite blog designers and an all-around nice guy, Collis Ta’eed.
I thought this would be a good opportunity to do something I’ve been waiting to do for a while: a published simplicity review. A simplicity review is a web design review with an emphasis on simplicity and usability.
Rather than simply making recommendations, I want to show you how I approach simplicity reviews: the kinds of questions I ask and the things I look for.
The aim of this post isn’t just to give some suggestions and feedback to Collis, but to give you a toolbox you can use to evaluate the simplicity of the designs you create or customize.
Question #1: Is the design eye-catching and unique?
The design looks as if it was tailor-made for the site, which always says something about the owner taking their endeavor seriously.
The blue, black and white theme gives the blog a sense of calm and poise that’s perfect for the self-improvement niche. The logo and black Zen-garden stones help distinctively brand the site, while the custom icons and little touches are wonderful.
It immediately reminds me of Freelance Switch though it’s a very different design. Collis seems to have his own design ‘voice’ that he brings to everything he does, just as great authors have a consistent style throughout their work.
Question #2: What is it?
This might seem like a pretty stupid question. After all, I must know what Zen Habits is — I’ve been reading it for months. And I do. But that’s not important.
To review a design effectively you need to view the site through the eyes of someone who’s never been there before, and who doesn’t yet know what the site is about. This is the embryonic stage of any potential reader’s engagement with your site. Would a first-time visitor be able to quickly gauge what it has to offer them?
With Zen Habits v2, the answer, at the moment, is no. Most new visitors to your site don’t yet know what you have to offer them. Your design and navigation structure needs to tell them quickly.
Looking at the site, there is no About page. There is a ‘My Story’ link, but readers aren’t interested in a story unless they have a compelling reason to listen. An About page would give them that.
There is also no tagline encapsulating the mission statement of the site, which is strange, as there’s ample space for one.
You might say: “Well, if they want to know what it’s about, surely the could just read some of the content?” To answer this question, here’s a really simple exercise: what is the first post on your blog today? If a reader skimmed it and looked at nothing else, what would they think your blog was about?
Is your blog only about that topic?
Most of us blog on a variety of topics. To get an accurate overview a potential reader would probably have to skim several posts. Can we really expect them to do this if they’re still unsure that their time will be well-spent?
The importance of categories
Categories are another great way for new visitors to get an overview of what you have to offer them. At first, I wasn’t able to find any in the design. It took me a while to realize that a link in the sidebar takes you to categories right at the bottom of the page.
While the stated emphasis of the design is to be clutter-free, I don’t think important navigational elements should ever be treated like clutter (and sweeping them under the digital rug does that).
The categories list deserves space in the sidebar. At the moment, the sidebar, apart from a small section at the top, is all ads. This seems intuitive, as including a categories list would push the ads down, possibly lowering click-through-ratios. At the moment, though, the layout gives readers no reason to pay attention to the ads.
Preventing ad-blindness
When people see a cluster of ads without important elements nearby they become effectively ad-blind to that section of the page. Their brain says “Nothing to see there” and refocuses its attention on what is important.
Interspersing the ads in the sidebar with things people want — category lists, popular posts — focuses more attention on the sidebar and, by proxy, more attention on the ads.
Question #3: Does it emphasize the content?
The first visible area of screen is 40% header and 60% content. It could be 25% header and 75% content, simply by cutting out the blank space in the header. The result would look like this:
I think this works well as it brings two entry points into the content — the post image and the headline — right into the center of the screen.
Question #4: Does it emphasize essential elements?
A category list and highlighted content are all things I consider to be essential. They show readers at a glance what your blog has to offer them.
These are included in the Zen Habits redesign, but they’re hidden in a place few readers will think to look for them: the footer ribbon.
Why essential elements deserve prominence
For years, footers were home to little else but copyright information. Readers have learned, through years browsing websites and blogs, not to look for value in the footer of a site. While readers are likely to encounter the contents of your sidebar as they read your posts or articles, they have few reasons to venture to the nether regions of your page.
It was only accidentally that I discovered the important contents of the footer at Zen Habits — by scrolling down to comment. Navigation elements you only find by accident are not good for usability, particularly when they’re so important!
The categories list and a digest of ten or so great posts should really be given prominence in the sidebar. The categories list is a quick overview of the topics you cover, while your best posts show potential readers the kind of value you’re capable of offering.
Collis has provided links to the categories and popular posts in the sidebar. While this is a step in the right direction, it’s not the same as integrating the lists themselves into the sidebar. Because the ‘browse’ heading and links below it are not web standards that readers are used of interacting with, it’s possible that the eye might skim right over it.
Question #5: Is it easy to read?
Medium gray on white looks slick, but it’s just not as easy to read as black on white. When the choice is between looking slick and painless reading (as it often is), we need to make the boring but important choice to pick the latter.
One other concern I have is the width of the post column and the corresponding lack of whitespace available to frame it. I’d suggest narrowing the post column to shorten the width of each line of text and frame the words with some clear space. Both these things will boost readability.
Question #6: Is the content easy to share?
There is a nifty links-bar containing useful information and functions above each post. It includes the date the post was published, links to submit to specific social media services, and a comment count.
When you get to the bottom of the post, however, where readers would be most ready to share via social media, there are no options. The bar really needs to be at the bottom of the post, rather than at the top. The top-bar could could be replaced with a different date and comment display.
Question #7: Can I contact the author?
At first glance, the answer appears to be no. I, like any web user who wants to get in touch with the author of a site, look first for a ‘Contact’ page. There isn’t one at the moment. I tried the ‘My Story’ page next — still nothing.
It seems as if there’s currently no way to contact Leo, the blog’s author. This is probably an oversight that will be corrected soon — hopefully with a ‘Contact’ page.
Overall thoughts
The Zen Habits redesign is a few simple steps away from perfection. While there are a hundred things I love about it, this post would be ten feet long if I covered them all. The emphasis here has been on ways it could be made even better. My key recommendations are:
- Add an ‘About’ page in the links bar beneath the header.
- Add a ‘Contact’ page in the same location.
- Move categories and 10 amazing posts into the sidebar.
- Shorten the height of the header to emphasize the content.
- Improve readability by narrowing the width of the post area and darkening the text.
- Add social bookmarking options beneath posts.
In the process of making these recommendations, I hope I’ve demonstrated how these 7 questions are powerful tools you can use to improve the layout of any blog or website — not just Zen Habits!
Skellie,
excellent idea to review the new design of Zen Habits. While I do like it, you bring up some important issues.
Not only is the name pretty ambiguous, the lack of a tag line as well as a prominent category listing does indeed confuse new readers of what to expect.
I also full-heartedly agree with your remark about the ads in the sidebar. I completely ignore a sidebar if it starts out with ads.
As an aside: I have a reasonably fast internet connection, but the images are far too big (90kb for a 350 by 260 px image!) to allow for smooth browsing. That turns me off, personally. Through its sluggishness due to advertising overload, my once favorite music review site (pitchforkmedia.com) has lost me as a reader as well…
@ Jo: I’m actually on dial-up, so I can completely relate on that one. There’s a certain point where differences in quality become invisible to the eye, yet add weighty KB to your images. Balancing quality with size is something I try to do here, and recently I’ve simplified the main page down from 10 posts to 5 to try and counter-balance that. I do think web designers sometimes feel that you don’t need to worry about loading times now that most people are on faster connections, but the reality is that it’s still a concern for some people.
Skellie, this is a great article, really useful, and looking at ZH this morning, they do seem to have moved the social bookmarking options to the bottom of each post.
I have a comment/question about the footer element, because of course they’ve taken roughly the same approach at ProBlogger. I agree with you that the link to the footer elements should be more obvious, but do you think it’s time readers are re-educated to look at what has up until now been wasted blog space? Presumably once a critical mass of blogs start using this space, it will be normal to look there for important info.
Hi Skellie …
Thanks for the well thought out review! It’s a thoughtful analysis that can definitely be used as a tool for any blog.
You’ve brought up some issues we should be addressing soon … but overall, I’m really enjoying the new design. :)
I appreciate your thoughts, and your kind words!
Great review and once again, you have provided the what, why and how of a topic.
Great usability points you have made, a lot of simple things that I have and haven’t thought of, especially the font color issue. Better go and double check mine!
Thanks again Skellie, you are an inspiration!
Great review Skellie. All your points are really well focussed. If you would ever like to review my blog Scraps of Mind I’d be rapt.
By the way, I’ve given this post a Stumble.
@ Tess: I think it can be inconvenient to put stuff in the footer, particularly if there are a lot of comments or a lot of content. That’s a lot of scrolling! I think you should try and put important stuff as high up on the page as possible. Yep — ProBlogger has a footer ribbon, but if it were up to me, it wouldn’t ;).
@ Leo: Thanks for stopping by — sorry you had to be the guinea pig, hehe.
@ Elliott: Thank you — that was my main hope: that it would get people thinking about their own designs.
@ Karen: I could probably do an email review if you’d like. Send me an email with ’simplicity review’ as the subject :).
Skellie: That was an excellent review! And such positive as well as constructive feedback too. I am continually impressed by your perspective on design and your end-user eyes. I’ve also noticed that because of this and so much more, your RSS subscription has seen a steady increase. Congrats!
Hi Skellie
Excellent review!
I’m actually just writing to say thanks for putting me onto Mr. Babauta’s latest gig.
I lived on Guam for three years in the late 90’s and worked with Leo at the Pacific Daily News.
Very interesting to see what he’s accomplished!
dave.
@ Steve: Thanks! I know a lot of Skelliewag’s readers are design junkies, so I thought I’d write something for them today :)
@ Dave: That’s really cool. It’s funny how the internet can bring people together!
I coudn’t agree more. I had never seen this site until yesterday, and it took me some time to realize what it was all about. But because I liked the post I was reading, I looked around, and found the categories at the bottom.
Having the list of categories and/or popular posts in the sidebar, it is really no need for a tagline.
My own webpage is just personal, so I don’t care about developing it. But I still find your blog interesting!
I am sure writing this blog must be time-consuming. How to you make the time for it, and does it often come in conflict with your studies or personal life?
I want to say great review. I like the overall style of the designer and how he approaches blog designs on a number of sites. I always thought that not showing the categories was a problem. You explain why really well. Thanks.
Excellent recommendations! I’m thinking of applying them to my own blog. Thanks.
Yep, we sure are design junkies! Thanks for the great write-up, I think I learned a lesson or two today. I really liked your “header redesign”. Great points as always, thanks! :)
@ Snosen: Welcome! I’m pretty busy, but I make time by cutting out certain other things I used to do. I used to watch TV a bit each day, but now I tend to only watch it when my favorite show is on. I’m also a bit of a gamer, but I don’t do it that much anymore. In other words, I make the time by cutting out less important stuff :)
@ Sean: That’s one of the interesting things about a design review: a lot of it is about putting into words things that ‘feel’ wrong or missing. It’s quite fun to do.
@ Javi: Great — I was hoping people would adapt the recommendations to their own blogs, after seeing the reasoning behind each point.
@ Alex: Now we just have to wait and see if Collis agrees with any of my points ;).
Hey Skellie! Just discovered this review when I was trying to make the trackbacks work on the site :-)
Some good points:
(1) Add an ‘About’ page in the links bar beneath the header.
“My Story” is becoming “About”, actually I’m not really sure where the misnomer came from as neither Leo nor I seem to remember it!
(2) Add a ‘Contact’ page in the same location.
This one I believe won’t be coming as Leo requested not to add it
(3) Move categories and 10 amazing posts into the sidebar.
Yes this seems to be a big one. So many people said they didn’t realise all that stuff was down the bottom, I’m not sure what the solution is. Leo specifically wanted a footer w/categories as he wanted to remove all the stuff from his sidebar. I have to think a little more about this today as it seems to be the #1 bit of feedback.
(4) Shorten the height of the header to emphasize the content.
Done! But only by 25px so far :-)
(5) Improve readability by narrowing the width of the post area and darkening the text.
A fair point about the text colour, I am notorious for using low-contrast colour combinations, and it’s a routine bit of user feedback. You’d think I’d learn… but no :-)
(6) Add social bookmarking options beneath posts
Good point!
So you should see a few changes in the next hour or so while I fix the site up now that it’s live!
By the way, totally unrelated note, but I’m very happy to see this blog taking off. Every time I visit the RSS number has jumped by a couple hundred! It’s very exciting to see and makes me glad to know that you’re getting the attention you deserve. Viva Australian Blogging :-)
Just an addendum to Collis’ comment:
I requested not to add a contact page because the contact info is in the About page. I think that should be sufficient, as the only thing that would be on the contact page is my email … which again, is on the About page.
Skellie, yet another great post!
I take the liberty of suggesting a solution to point (3) on Collis response to your review :-)
The number of posts on the Zen Habit front page could be shortened in my opinion. The loading lags the reading even on my fairly broad band width. By shortening the list of posts the bottom part come closer and more accessible to the readers as well. I’ve seen several sites with the solution you have, Collis, and I find it nice to look at. But, that requires that there is perhaps only one or two posts on the front page.
I think Zen Habits will get the readers interested already by only one post and the visibility and easy access to the categories.
I also think the number of posts in each category could be shortened.
Overall, I think the design is very nice. Calm and informative. All Zen! :-)
@ Collis:
(1): Excellent :).
(2): No worries — I’ll direct my suggestion at Leo.
(3): I do really think the sidebar will draw more attention if there’s some really useful stuff in it. You can experiment, and if CTR goes down, revert back to the old strategy.
(4): It’s an improvement (and I’m sure it was a little painful for you) but give it a try with just 20-odd pixels above the top of the highest stone. It looks just as good and brings the content up higher. If you don’t like it you can always switch back.
(5): It looks quite slick, but I do think readability needs to come first. Maybe you could ease yourself into it with a darker grey?
Thanks for responding to the feedback, Collis, and I appreciate the kind words about Skelliewag. You’re not doing so bad yourself, Mister :).
@ Leo: I do think a contact page is better for usability though. For example:
If we were talking and I wanted to get your email address, would I: a) ask you to tell me about yourself, or b) ask how I can contact you?
You wouldn’t do it in a conversation, so I don’t think it’s the right choice from a usability standpoint. But it’s very much your call — just something to think about and see whether you agree.
@ Bente: That’s a good idea, if they decide to stick with the footer-ribbon. Though I still prefer to have essentials as high up as possible, I think that might be one way to improve things as they are. Good thinking :).
The design of the site is a little awkward to me personally, as it seems to be straggling between a business website design, and a blog design.
One important point that people seem not to realize when building sites is that consistency and a congruent style is important for branding (I say this as someone who does online branding for companies and see this all the time) - the template for the forum page and the links page are not only different from each other, but also completely different in format from the main website theme.
You may not have the greatest template in the world, but make sure that all pages on your site have the same elements and look like they are part of a “parent” theme. If the applications you are using do not allow you to tweak them easily to reflect the same look, then use another application that does.
If different colors are preferred for these two sections, it is perfectly ok. However, it is important that the header of the front page which essentially represents the site “logo”, is displayed on both the 2 sections. And always, always, allow the reader to find their way back to the main site without having to rely on their browser”s back button through a common page element (side bar or top bar), rather than inserted text that users have to hunt for.
I do think that Zen Habits has a great design which conveys the theme of the blog. The suggestions here are things which could be easily fixed with a little workaround. But I would definitely say that Leo is off on the right track!
Great review Skellie. I really enjoyed the post because I am able to use the ideas on my own blog.
It’s always a constant battle between adding more features, and simplification for me.
@Skellie: If we were talking and you wanted my email address, you would ask for my email address, not how to contact me. :)
There are a lot of things you’d ask me about in conversation that I wouldn’t necessarily create an entire page for on my blog. You might ask for permission to reprint an article, for example (a common request), but I’m not going to create a permissions page … instead, I might create a FAQ page … even if in conversation you wouldn’t ask me for Frequently Asked Questions if you wanted my permission to reprint an article.
Sometimes it just makes sense to group information together on a page, especially if otherwise that page would contain nothing but one email address. :)
I think the issue is how easy/intuitive is it for people who want to contact me to find the information they’re looking for … and you’re right, it would be more intuitive/convenient for them if there was a contact page. However, I’ve never had a contact page before, and thousands of people have found me. Maybe thousands of more would have found me if I had a contact page, but to be honest, I get quite enough emails as it is. :) I think I make a pretty good effort to be responsive to my readers, and most of them would agree — I respond to emails within a day, sometimes much faster.
Again, Skellie, thanks for your thoughtful analysis, but in this case I don’t see enough of a justification for creating an entire page for one email address.
One thing I noticed that’s done different (and I that I liked a lot) is how the trackbacks are in a column right next to the comments instead of at the bottom of comments. I’ve even seen it where trackbacks are mixed in with comments. Another reason I like the trackbacks this way is because it gives people who are promoting the site higher visibility.