Quick Blogger Home Page Redesign

In this post I do a quick redesign of the Blogger home page to make it less confusing and more consistent. In a quick redesign, I am trying to make UI changes that can improve the user experience that I don't think require major design changes.

A Few Words About Naming Forms

As an applications developer, I sometimes get frustrated when different web application pages/forms don't have names. Or perhaps it is because I have been so involved in user documentation. I need to write a bug or document a feature, but instead of writing something like "the Advanced Color Options" page I have to describe the path to open the form (e.g. "the form you open when you select 'SupercoolApp>Options>Advanced' and click on the 'color' tab"). Saying that name over and over again would really get me down.

My request: if you create a form (more complicated than a simple message box) please give it a name. It will be easier to find info in the help or by doing a web search if you do this, and whoever does your documentation will be thankful for it.

Blogger home page

In this post I refer to my blogger home page, which is a name I made up for this page because it doesn't officially have one (see what I mean about how much easier it would be if forms had names?). This is the page I end up on when I type:

www.blogger.com

which is automatically changed to

www.blogger.com/home

and contains a list of all of my blogs and blogs on my reading list. Here is what the top of my blog home page looks like now:

This is what the top of my blogger home page looks like now.

Any designer could come up with ways of making this page more pretty, but I am more concerned about making changes that will improve the user experience. I will generally make the smallest design changes necessary to achieve a reasonable user experience in the hopes that I will actually convince a company to make these changes.

Before you ever try to redesign UI, there are some of the most basic things to think about:

• Who is going to use this UI, and how often? (What level of experience can I assume they have?)
• What are the most common tasks? (I need to make these quick and easy)
• What are the advanced tasks? (I need to make these less obvious so I don't confuse beginners.)
• How can I use visual clues to help the user figure out what to do? (This includes consistency with other parts of the application.)
• How will I give the user more information if they need more help?
• How can I help the user avoid making mistakes?
• How can I help the user recover from mistakes?

I am not going to write a book about why thinking about those questions is important, but I listed them here to illustrate why I think the My Blogs home page needs a quick redesign:

1. Most common tasks (create new post, view blog, view posts) are not as easy to get to as uncommon, advanced tasks ("New Blog").
2. UI gives visual clues that mislead the user. "New Blog" button is just to the left of info about my blog, so it visually seems linked to a specific blog.
3. Button to create a new post is not labeled. This is presumably one of the most common tasks

Here is another screenshot with some annotations (some irrelevant items removed for clarity):

Here is a screenshot of my blogger home page with my notes

To accomplish this I will:

• Move "New Blog" away from the left side of my screen since that is an advanced task. This will make it less likely to be clicked by accident. It will also be less confusing, since it will not be next to my "UI Behaving Badly" blog info. This task is not associated with any particular blog, so it should not be to the left of one blog on the list of blogs.
• Label the button that lets me create new posts. I should not have to pause for a second and wait for the mouse-over text to make sure that button is going to do what I think it is going to do.
• Replace the button that lets me select "all posts" or click a down arrow for more options (including, redundantly, "Posts").  No matter what I choose on this list it takes me to the same web page, just with different tabs selected. On that web page, it is somewhat easier to figure out what these different options mean, since there is small graphic next to each option, so why not just sent users to that page in the first place? I will label my button "Dashboard," since that seems like a good description of the web page it will take me to.

Here is a screenshot without my notes:

This is my revised blog home page.

Here is a screenshot with my notes:

This is my revised blog home page with notes

As a designer I would like more info about how often users click on "View blog" and "Posts" buttons to see if those are even necessary on this page. I would also like the screen that is opened when I click "Dashboard" to actually have a title ("Blog Dashboard" would work). I prefer "Dashboard" to "Options," because the dashboard allows you to view data such as page stats for your blog, not just change options. However, some usability testing might be helpful to know if this button is named correctly.

So, let me know what you think of this redesign.

My next planned post will explore how much fun it is navigate the two different Layout designers for Google Blogger.