User Interface, or UI, refers to the part of a software application that a user sees and interacts with. On a website or blog, the UI includes the various elements of the theme that allow the user to interact with the site. These elements can be the navigation menus, the comments section, the layout of the articles and much more. Every aspect of the site that allows a user to browse the site, leave comments or interact with the site in any way is a part of the user interface.

Quite often the argument is made by bloggers that content is king and that design matters very little, but as this post will demonstrate, this argument is completely false.

Although content is king, there are an unlimited number of UI adjustments that can modify the behavior of your users. With a well designed site, your visitor’s actions will be modified. With poor UI, comments will be decreased, page views per visit will be reduced, and return visitors will be impacted.

In fact, nearly every statistic that you browse through Google Analytics trying to figure out how to take action on can be influenced through user interface modifications on your blog.

Listed below are a few practical examples of changes that can be made to your design to influence the way your readers interact with your blog. Many of these examples are ones that I’ve experimented with personally.

  • The Comment Form Above the Comments or Below the Comments – Placing the form through which your readers leave comments above the comments that have been left (like here at Site Sketch 101) increases comments while placing it below the comments increases user-to-user conversations.
  • Sidebar on the Left or Right of the Page: Generally speaking, users scan your content in F patterns. Placing your content on the left will draw readers into your content while placing your sidebar on the left will invite them to browse the site, clicks sidebar ads, and interact with the sidebar more aggressively.
  • Advertisements in the Content or Not in the Content: Placing advertisements can massively increase your website’s revenue as click-throughs increase but removing them from the content can increase your user’s experience which will help keep them coming back for more.

We’ve explored only three aspects of a blog’s user interface. Below in the comments, I’d like to invite you to do three things: think of some more aspects of a blog’s UI and share them with the rest of us, share your opinions of the three I shared, and share your opinions to the ideas that others come up with.

It will probably take more than one comment for you to complete that challenge, but that’s alright. Let’s have a conversation.

Nicholas Cardot

About Nicholas Cardot

It's my personal quest to enable every person that I can to unlock that dormant potential concerning their online influence. Also, I'm a geek.

35 Comments

  • I believe when talking about blogging user interface, content,navigation menus, the comments section, the layout of the articles and much more, we also pointing it to the usability standards in blogging. having this standards would direct us to the right direction in making sense and dominate in the web.

  • Kristel says:

    Hi Nicholas,

    I may be off-topic but I just want to ask what type of comment form do you use (is it some sort of a WordPress plug-in or this already came with the template?). I am asking because I want to change mine and I don’t want to use Disqus as it takes time from where I am to load.

    Thank you. 🙂

  • The first time I visit a blog, it’s the UI that determines whether I will stay or leave immediately. It’s always disappointing to see valuable content cluttered with jarring visual cues. Personally, I prefer a clean layout with the ads all in one area (not within the content). My advice to all bloggers: Please don’t “bury” your RSS feed or subscription form if you want me to come back!

    • I was about to mention the subscribtion/RSS as well but I see you thought about it first 🙂 That’s a very important element of a blog that I wish more people got straight, as a few times I had to dig through the website’s source code to find the RSS link to subscribe to them – and I think other people wouldn’t be as stubborn as me and would just give up.

    • I agree. I believe that RSS should be large, clean and should even be located in multiple locations like at the top of each page, at the bottom of each post and anywhere else where it be published tastefully.

      • geekbabe says:

        I agree! Another thing that bothers me is this, if you are using a retweet plug in for god’s sake use one thst incorporates bitly or tiny url.

        I like to add a personal comment to things I retweet, if a site’s retweet plug in shortens a post’s url ,that greatly increases the odds that I will do so.

    • geekbabe says:

      Marianne, I totally agree! Very few people can pull off a site like Nick’s that offers up plenty but is easy to use. When people don’t have a high level of skill like Nick, their sites come off as cheap, overdone.

      Webmasters, if you don’t know how, hire somebody who does or opt for really simple uncluttered site layout.

  • An important part of a blog is how and where you implement social sharing plug-ins. For example you have some on the left bar, some on the footer of the post, some are duplicated and some other appear just on one of the two parts.
    I am sure there is a decision behind how you split them and what you chose to include or not, and that’s the kind of decision that can truly raise or lower the traffic your posts will get.

    • That’s actually an excellent example of what we’re talking about. The way that place them, the ones that you choose, and the order in which they appear can all influence the way in which your users decide to use them.

      I’ve focused on what I believe are the most popular social networking services and I’ve tried to keep them at a minimum only having four to six icons at each location. I think it’s better to appeal to the users of the largest social networking/bookmarking sites rather than to clutter the page trying to appeal to everyone and their grandmother. At one time, I had other icons but I came to realize that some of the more obscure ones were almost never used and they created more of a distasteful appearance than the amount of sharing they created. Hence, I removed them.

  • Thomas says:

    Hi Nicholas
    If your UI/Design is not user friendly there is no reason to write great blog posts. If I don’t like your design and navigation within a couple of seconds the first time I visit your blog I will leave again. I am not talking about colors or taste, but about user friendly layout.

    I have my sidebar on the right of my content because I want the user to start with my content and my blog posts and not on my sidebar(left to right).

    The question about if the comment form should be above the comments or below the comments are very interesting I think. I guess I prefer it on top on blogs with many comments so you don’t have to scroll all the way to the bottom of the page, if there is many comments and below if there are less than 10 comments on each post.

    • As per the comment form discussion, I have a post here at Site Sketch 101 with somewhere around 1,000 comments on it. I used it as my case study for this experiment. After a few months, I noticed that comments began to decrease but when I switched the form to the top, immediately below the article, I noticed that I began to get comments on that article again on a regular basis. I think it can be summed up as exactly the conclusion that you’ve come to on this.

  • I’m all about it man. I’m fanatically in love with analyzation, for the purposes of figuring things out.

    These are great points man. LOL, the reason people engage in user to user conversations as opposed to commenting on your site when you have the comment box lower is because of pure lazyness!

    Imagine that? They don’t want to go all the way to the bottom to comment, so they just settle for someone else’s comment!

    Another great post, something to really get a hold of if you don’t. I’ve been in an out of the theme editor over the last few days on my blog messing with the size of the excerpt titles and character limits. It makes a big difference.

    Nick, I’m with you on design. Sure, content is king, but design is the Emperor.

    • Although I think that you make a good argument that it may be inspired by pure laziness, I would make a counter argument. I think that with the comment box on top, many users become too lazy to read through the comments and instead they simply leave a comment as soon as they arrive at the form. With it further down, many readers end up taking the time to read some of the comments before getting to the form and as such they are inspired to join the conversation with others and not just with the author.

  • Good post and questions, Nicholas.

    A blog’s UI certainly makes a difference. I especially like your UI and think it’s very user-friendly.

    I didn’t particularly like the Search box that came with my WordPress blog, so I used Google search instead. It has made it easier to find content in other categories. I like the idea of having the search box at the top, right section of a blog.

    Important information should be placed towards the top of the page. At least, that’s my preference. It keeps people from missing it.

    I prefer having the sidebar on the right rather than the left, especially on a blog. On a static website, however, it works well on the left.

    I like seeing articles you want people to read in the sidebar as well. The related articles plug-in works well also. In this case, readers (who are already at the bottom of the post) can click on the next post they want to read.

  • One of my pet peeves about WordPress is that when it automatically creates the link behind an image you insert, it points to the full-size version of that image. I suppose this is OK for blogs which feature a person’s photography (or posts such as this one, where the photo seems to be primarily for visual interest), but when a blogger is talking about an item or using a thumbnail screenshot of a web site, I want to be taken to the item detail page or web site in question when I click on the picture. I set this sort of link up for photos I use on my own blog, believing that others who click on a picture want to see more words about the item, not just a larger version of the picture, but maybe I’m wrong. I’d love to know what others think!

    Speaking of the photo in this post, I do like how the “Image credit” shows up at the lower right & takes you to the corresponding Flickr page. While (given my pet peeve) I wouldn’t use it too often on my own blog, I can see potential uses for this style. How is that done? Is it a WP plugin?

  • Nicholas,

    1. You prefer not to ave user to user interaction?

    2. The left-hand sidebar came into debate when it was concluded that the search crawlers had a difficult time with it…I don’t know if this is till the case.

    3. Ads in content s fine as long as it never interferes with the read…as it most often does.

  • I’d actually be curious as to the source material for your information in the “Comment Form Above the Comments or Below the Comments” section. While it certainly speaks to logic that users would be more likely to interact if they had to scroll through the comments in order to comment, I half wonder whether people are actually just so concerned with what they have to say that they might very well just skip reading others comments anyway. In which case a comment box below the comments would simply decrease your number of comments.

    • I have a post here at Site Sketch 101 with somewhere around 1,000 comments on it. I used it as my case study for this experiment. After a few months, I noticed that comments began to decrease but when I switched the form to the top, immediately below the article, I noticed that I began to get comments on that article again on a regular basis.

      • Kaz says:

        which would make sense – because with that number of comments, no one wants to scroll through pages of other comments, let alone read them all, before making their own comment.

        do you think the same thing applies to blog posts with far fewer comments tho?

        • That’s a good observation, and your question is one that I don’t have an answer to. Which again, this is another reason that I think that this is all an art. I think that you should consider my example, consider your audiences needs and ultimately just follow your gut.

  • I think I will focus on your last point, the placement of advertising within the content. I myself, have made it a point to remove ads from within the content and instead placed it on the sidebars and at the end of the content (top banner also), I have seen a dramatic decrease in CTR’s and of course earnings, however the articles are more pleasant to read with out the ads.

    At the end though I think I will bring ads back to the content because at the end of the day I need the money to run the site, I just have to be a little more creative about the placement and blending of the ad so that it is not that obtrusive, yet relevant should the advertiser appeal to the user reading the content.

    I believe it’s all about balance, go to either extreme and users will suffer from too much ads or you will suffer from a blog that makes no money. It’s finding that balance which is key.

  • ah hong says:

    I think it’s better if the sidebar goes to the right and content stay in the left for search engine spider to crawl the content first for better SEO.

    Can’t agree more of the importance of sidebar in a system. Just take a look on Facebook, they had both sidebar on left and right just for navigation and ads for the user 🙂

  • geekbabe says:

    Maybe I’m odd but I tend to notice the right side bar more than the left when I’m visiting a site.

    If a site uses both side bars, IMHO they need to do so carefully, if a site looks like a vegas slot machine I tend not to go back as the ads etc overwhelm the content.

Leave a Reply