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.
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.
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!