Building the Best Blog: Role of UX10/21/2013
When developing the user experience (UX), functionality, and design of a blog (e.g. landing page and blog post pages), think about what the user wants and how to present content to a brand’s audience. We are in the process of upgrading the blog components in our Open Source CMS, DirigoEdge , so I built wireframes; in part to ensure that what we created would work for the average user but yet not be off-putting to the expert or the beginner. I began with the Dirigo Blog as a jumping-off point. I designed that blog to be more modern like Machable back in January 2013. We took a look at analytics to see what worked (and hasn’t) so that our developers could continue to build the components in a modular and easily customizable way across the platform (and on other sites on it). There are lessons to be learned that anyone could find beneficial.
First, I made a list of important navigation: share links, categories, tags, related articles/posts, featured posts, authors, etc. and shared the list with a few others to get feedback. David asked that I add a navigation archive based on months, so I added that to the list.
Then I took to the web looking at the most popular sites with similar formatting (like news and content aggregator sites) to see how they organized and arranged content. This was interesting because blog/news/content aggregator sites use their sites as webpages more than blogs. The Dirigo blog and our client’s blogs are only part of the website, not the whole of the website.
A few examples of news and content aggregator sites we checked out were tech/design blogs like Tech Crunch, Gizmodo (part of the popular Gawker group of news/gossip blogs), Smashing Magazine (one of my favorites), Fast Co. Design, Mashable, UX Magazine and Engadget, just to name a few. I looked at a few large company blogs as well, for example: Squarespace, Tumblr, the Huffington Post, Fab, and Pinterest.
Share & Like options
Not to be confused with the social icons that link to social sites, share and like buttons are for a social action—sharing a specific article or blog post. Because these can be easily confused with other social icons buttons, make certain that your design clearly identifies this type action—keep them in a clearly labeled separate area. I wanted them both on the blog post page template and nowhere else on the website (like this Dirigo blog). I also wanted the share/like buttons to appear at the top near the headline as well as at the bottom near the comments. Including the share/like buttons near the comments is more intuitive, since commenting is a social action and many people look to both the headline area and the commenting area for those social action buttons, so why not put them in both places? We could easily use SaaS solutions like ShareThis or AddThis, if desired; we chose to customize our own inside of Edge.
Various Ways to Organize and List Posts
Popular posts should also be a component to the blog. This is different from the featured posts on the landing page, which are ordered by posts specifically chosen by the authors/editors to show up, and how recent they are. Popular posts are rather, based on you, the user. There are several ways to determine popularity. One way is to base on the number of times an article had been shared on social media or shared through email or even commented on. This method is great for websites with a high amount of users interacting with the blog. This method will not work if your blog only gets a few shares/likes or comments every once in a while. For the Dirigo blog, we get many readers but most our feedback happens through social media, mainly, Facebook (independent from the blog). We determined popularity by page views. Whatever the method, it’s good to factor in age of the post; otherwise the same exact articles will be at the top forever.
Search & Categorize
There should be easy-to-spot categories or tags so one can narrow down to their particular interest. Not to be confused with tag clouds, a once-trendy but difficult-to-navigate mess of words that most blogs have since abandoned. Another method to organize articles in a useful way is by author. If you have multiple writers, this is key. There are specific writers that appeal particular users and you want your readers to have a way to easily get to old posts by that author. A simple way is to have the link right in the byline. Clicking on the author’s name is intuitive and requires fewer clicks, and the less work we require users, the more enjoyable the experience (and the longer they may stay on the site too). Archives arranged by date are a very common component to many blogs and should be easy and utilitarian. Most users tend to look for this option on a blog’s landing page under categories and popular posts which I ranked higher in a blog’s landing page hierarchy.
Other Things to Consider
How will the next batch of featured articles load? No one likes a slideshow layout where you have to click next, next, next to load completely new pages and content. It’s clumsy and requires lots more work from a user that most are just not willing to do. The load more button as well as the infinite scroll are great solutions. Which one to use? This is easy. If you have a footer, do NOT use the infinite scroll or you may find some of your users performing a race with the new results to see who can get to the footer first! These two methods are also great for mobile devices and smartphones as they do not tax a user’s data plan with unnecessary load times.
How your blog handles images is another thing to consider. What level of technical knowledge do your writers have? Can they handle a CMS with less rigid structures? Less structure allows more customization but for the less-tech savvy, this may create huge headaches. Automatic image cropping or editing capabilities will keep a consistent and beautiful design; these functions are more advanced to implement, but once in place, the design will remain intact (as will your organization’s branding standards).
I had a hard time conceptualizing related articles at first. Why have related articles in a post when there are popular posts, categories, and other options? This was based on my personal experience. I know that when I’m reading an interesting post on a subject, the articles under the related tag catch my eye and I will soon be down a rabbit hole of my own doing. I reviewed many blogs and they all deploy related articles. Maybe peer pressure has a purpose. I recommend putting them right before the comments section, so that users have to scroll past them (and have a chance to notice them and stay on your site longer) to get to the comments section. Just one little row of a couple articles should do the trick, nothing distracting or overwhelming. I based related articles on "tags" instead of categories as to not duplicate category navigation.
Generally speaking you want to think about your audience and what they are looking for and the behaviors/actions they will perform when they come to your blog. As with all UX design, the less work your user has to do, the better experience it will be for them.
How Dirigo Can Help
David wrote a nice piece titled Anatomy of a Blog back in 2011. Bottom line, a blog is just like a web site—except that it relies on interactive sharing of information, often in the form of the written word, and grows in content through interaction with its audience. Blogs use a variety of different publishing models based on user feedback. Clearly, the line between blog and website has blurred over the past several years. No doubt, things will continue to evolve. This was a real fun project.
Contact Dirigo Design & Development to find out how our professional staff can assist your business in growing its online presence. Our dedicated team members have a wide array of skills to offer, ranging from blog management and analytics, content strategy, content creation and editing, cutting-edge search engine optimization for blogs and websites, and customer relation management. An integrated blog done correctly can have a nice impact on bolster SEO.