Designing Your Blog with User Interface in Mind
As designers we are afforded many responsibilities on the web. Not only do pages need to look good, but they also need to be user-friendly, fully functional on all platforms, simple and quick to scan, efficient, and stand bold against similar websites.
Image credit: Team Dalog
This can seem like a whole lot of stuff to consider, but don't get too caught up in the details. It's much simpler to understand concepts with a focus. Building a simple interface for a blog design fits the bill perfectly, and with so much demand these tips can be transferred into any platform.
How Does Your Blog's Design Reflect?
This is a crucial first step in examining your theme. How does your website's design reflect to your visitors? It's not a simple question to answer, but a good place to start would be at Google Analytics.
Do we see more people visiting story pages, or are they going through archives and categories to search for articles? Are most visitors browsing around the site, or do they check out 1-2 pages and leave?
Studying just a few areas in your site analytics data can be immensely helpful in the re-design or re-branding process. You also get a sense of your target audience and what they're like on the web. This can be a fun science experiment to tweak and test settings on your blog. Larger v. smaller fonts, two columns or three, ad zoning options are nearly limitless.
Keep Your Design On Wrap
Another early stage planning mistake many designers make is with inconsistencies in the site. This could range from a whole slew of issues: buttons and text boxes mis-colored or designed differently throughout the site, or maybe awkward color matching for links and text.
These small nuances can kill your user's experience on the site. They can stand out like a swollen sore or facial blemish, generally taking away from the essence of the blog. A good way to keep a tight lid on this is to proof your site many times over. Browse through all of your pages, check your forms and comments and everywhere you can think of.
Image credit: adkorte
It's also good to allow user feedback. There are countless contact form modules for WordPress which you can download completely free and install in just minutes. This is a simple yet elegant way for your users to report small glitches or bugs in your site's design. A site-wide poll is another option, although it's a bit less rational in the long term.
Define a Brand For Your Blog
This issue seems to strike many as the most difficult. When first launching a site and when going back to re-design, a branding is the most important factor. This can include a logo or graphic to attract readers back to your site and link it with your name. This should be something that easily burns into your brain, something that your visitor's won't be able to forget!
Image credit: TerryJohnston
It's difficult to get the hang of. I always recommend that if you plan on trying to run a sustainable blog but don't have much skill in the way of branding design to check out a few books on Photoshop or Illustrator.
Even generalized books on digital design for the web can help the novice in branding design come up with a simple, yet elegant solution for any blog theme. This is also carried over into other areas of business, such as marketing and promoting your site through social media.
Cementing a Firm Heading Layout
Design structures tend to fall into basic patterns throughout the web. A common element on most all blogs (even most websites) is the header area.
This commonly contains your website's logo and branding, navigation of some sort, and potentially a search area or login links. On a blog design it's not much different at all, and these elements are something to seriously consider when hitting the drawing board.
Navigation links work well in a header setting. It presents itself directly to your visitors and allows instant gratification and access to any of the pages provided. These can be informational pages such as About Us or Contact, or many blogs will list out popular categories & tags throughout the heading.
A search section can also be a very useful element in user experience. Having the interface front and center to type in and browse through a blog using any keyword combination is very powerful. Giving readers this power and placing the interface in an easy-to-use area just increases your design's sustainability.
There are no set rules for which links you must display or how to display them (if at all). You should plan to figure out what exactly you'd like your readers to be finding and visiting, along with which pages should be conveniently accessible right on page load.
A Social Media Onslaught
Another element to consider would be adding social media links. These can help build up RSS readers or Twitter followers, and can be seen all around the web. And with the web growing more connected and open every day new APIs (Application Programming Interfaces) are allowing us to grab data from tons of 3rd party websites.
Image credit: Nerea Marta
This functionality allows for grabbing your blog's latest Twitter update and sharing it right in your header! This is an excellent technique to gaining more followers and builds your brand throughout the social media landscape.
You could also use similar ideas such as Digg's API to showcase your latest 5 or 10 stories submitted to Digg. Bridging the gap between such popular social news services and content providers gives bloggers much more marketing power. Combined with how easy it is to develop apps within common APIs these page elements are becoming more frequent.
Focus on your Sole Purpose: Content Delivery
One concept in user experience is to keep focus on your main goals. In blogging your primary focus is on display and summary of content. Keep your readers interested with useful and inspiring articles. Use interesting headlines to draw in a crowd, and keep them coming back day after day.
Content is making a huge shift from physical to digital, and it's growing faster as time goes by. We're seeing more magazines launch articles and interviews online than any other time period in history. This shows the design industry will follow suit, and blogs will become a huge slice of digital media.
Keep your mind set in this mode by asking critical questions about your current blog design. Are the articles and typography in paragraphs simple and easy to read? Are headings descriptive enough? Do they provide a strong user experience at a glance? From a reader's standpoint what could be improved upon?
Tend to Your Reader's Every Whim
Users of online media are more impatient than they've ever been in previous years. This is because through search engines we can find almost anything we need in almost no time at all. This in addition to apps like StumbleUpon and it's no wonder our attention spans are cut so short. This leads to misconceptions in content delivery - pack your articles full of paragraphs and information and your readers will love it.
This proves to be in poor taste when used in bulk. Readers lose focus on your topic and leave, but there are a few tricks to consider.
Images for example help add space and break up your document. They are the perfect spice added into any article to keep your readers attached while keeping those who scan your text intrigued.
Keep All Ads Out of Harm's Way
Ill-placed advertisements can be the death of a great blog theme. Consider from a user's standpoint visiting a blog article found through Digg or Stumbleupon.
Image credit: Payton Chung
You start reading into it a bit, but quickly notice flashing advertisements in the sidebar. You try to ignore the scenario, but it's difficult as this box keeps popping up just outside the corner of your eye. In most cases you'll get a few sentences in and leave, a bit frustrated having wasted precious seconds on the site.
And flashing banner ads aren't the only consideration. Ensure any advertisement company added into your blog is nothing more than static images or Flash content. Although with new Flash technology there are many auto-expanding ads which take up the whole page - truly an annoyance to any visitor.
Bring Your Footer To Life
When users are finished with reading a post most will just head back from where they came. However the goal of a good blog design is to draw in each reader further. Convince them your blog is a great read and that maybe they should check out a few more articles.
This is where your footer areas come into play. Forgetting about this important design element can leave your users in the dust with not many options after an article's closing. Many free WordPress plugins will display a list of similar posts from your blog which can be great for additional pageviews and the overall user experience.
Another great idea to consider is filling your footer with useful and interesting links. There are so many collections to choose from. WordPress alone has story categories, tags, individual pages, authors, and favorite external links (or Blogroll). There are also custom lists such as the similar or recommended posts mentioned earlier.
Any number of options work towards giving your footer some creative pizazz. Your readers will find the extra content exposure refreshing, and it helps to build power and personality on any blog.
These tips are just a few out of many user experience tools. Utilizing these simple concepts will help to structure a beautiful blog design full of eye candy and simplistic elements.
For further ideas try searching through inspiration galleries or collections of design portfolios. Many times you can compare your current design concepts to see where you lack in user experience and what you could improve on. After all, without any readers a blog is just ramblings lost in the void of digital space.
What are your thoughts on user interface optimization in design? What about design for styles other than online blogs? Any tips I may have glossed over or missed entirely? Share your thoughts in the comments below!