Choose Your Own Adventure: Navigating Google Blogger Layout + free re-design!

In this post I compare the two different Google Blogger "layout" designers and suggest ways to improve the Blogger user experience by changing the way the menu is structured.

A week or so ago as I was starting this blog I started having some difficulties with changing the layout on my page. I noticed that sometimes I could add gadgets to my layout and sometimes I couldn't. I noticed that sometimes I seemed to be able to move gadgets around, but other times I couldn't. Because I was new to blogging and Google Blogger, and I was having so many other problems with the user interface that I figured I'd sort it out later.

Ok, so now it's later.

After a little more experience and a blog post about the Template Designer I realized what part of the problem was: there are two different Blogger layout designers which look somewhat similar and have some of the same features but not others. Yeah, this is kind of the UI consistency that I have come to expect from Google. On the negative side, Google UI seems to be designed piecemeal and updated piecemeal. On the plus side, Google can do quick releases to improve things. I can at least imagine that my critiques will have some measurable good in a reasonable amount of time. But I digress...

Sometimes UI is so confusing it's hard to figure out how to describe coherently why it is confusing. Here is a handy dandy chart for your reference even if you don't take the time to read this entire post:

Two Blogger Layout Designers Feature Comparison
Feature	Dashboard Layout tab	Template Designer Layout tab
Add Gadgets	yes	no
Edit Gadgets	yes	yes
Remove Gadgets	yes	yes
Rearrange Gadgets by Dragging	yes	no
Change Sidebar Location and Columns	no	yes
Change Footer Columns	no	yes
Preview Changes	no	yes
Clear Changes	no	yes

In this post I will start with explaining how to get to each web page I'm talking about (and give them names so I can refer to them later). Then I will create a chart detailing what layout changes you can do on each page (hint: the fact that I need to create names for these screens and create a chart to describe where you can make different layout changes is not a good sign, and a strong indicator of how many tech support calls this inconsistency is causing). As I go along I'll start a bug list that assumes these two layout designers stay pretty much as is. Then I'll layout a plan for combining the two layout designers to make changing blog layouts a more reasonable user experience.

My Blogs home screen

This is what I call my "My Blogs" home" screen, since it is clearly designed to list all of my blogs.

The picture is what I see when I navigate to www.blogger.com (some irrelevant items removed for clarity). I only have one blog, but presumably this screen would list all of my blogs, so I am dubbing this the "My Blogs home screen."

Unless I click the "create new post" button (picture of pencil) or the "View blog" button, any other option I click on this list gets me to the same unnamed page, just with different default tabs selected. Once I select an option, I end up on what I am calling the blog "dashboard:"

First Layout: Dashboard Layout Tab

This is the Layout tab of the Blogger dashboard for my blog.

There is a helpful tip at the top of the screen: "Add, remove, edit gadgets on your blog. Click and drag to rearrange gadgets. To change columns and widths, use the Template Designer." If you click the link, you get to the Template Designer, but not to either the tab that lets you change columns or change column widths, so as is the sentence above does probably lose a few folks or makes everyone take an extra step. I think I would change the last sentence to read "To change the column layout, use the Layout tab of the Template Designer. To change the column widths, use the Adjust Widths tab of the Template Designer." I would make each link point to the correct tab of the Template Designer.
GoogleBloggerLayout_Bug1: Link to "Template Designer" on "Layout" tab of dashboard should be changed to direct links to Layout and Adjust Widths tabs of the Template Designer.

At least Google has realized that having two different places to change the layout of your blog is confusing since they bothered to create a link to the Template Designer -- admitting you have a problem is the first step.

With some trial and error, I figure out how to get gadgets on my blog where I want them. There is a helpful "Preview" button that shows a preview of my my blog in a new tab, and a "Clear" button that removes my changes. The following may seem like a nit pick, but I hate having to click on buttons to find out what they do:
GoogleBloggerLayout_Bug2: "Clear" button should be renamed to "Clear Changes" or at least have mouseover text "clear unsaved changes to your blog layout."

Second Layout: the Layout tab of the Template Designer

Okay, so let's explore the other screen that allows us to change the layout of a blog: the Layout tab of the Template Designer. From the blog dashboard, click on "Template" tab, click on the "Customize" button, and then click on the "Layout" tab. Here is the "Layout" tab of the Template Designer.

The Layout tab of the Blogger Template Designer

Similarly at the top of this designer there is a message "Rearrange your gadgets by dragging them to dotted sections in the preview below. Go to Design > Page Elements in Blogger to add, remove, or edit gadgets."

There are some problems with the instructions above:

1. This designer does not allow you to rearrange gadgets by dragging them, even though it says it does. You can change to different page layouts, which will have a side effect of rearranging your gadgets. You can only do that on the other layout designer.
2. The designer does let you edit and remove gadgets, even though it says it does not.
3. The text at the top of the page tells you to go to "Design > Page Elements" but those menu items don't in fact exist, as far as I can tell. Perhaps a rename happened in there somewhere. If you want to get to the other Layout page (described above as "Layout" tab of dashboard), you can get there by many different routes (O, the craziness of navigating Blogger). If you are on the Blogger Template Designer, where this incorrect message is displayed, the fastest way is to click on the <<Back to Blogger link at the top of the page and then click the Layout tab.

GoogleBloggerLayout_Bug3: Text at top of Template Designer is not accurate. It should be corrected to say something like "You can choose the layout of the body and footer of your blog and edit or remove gadgets. Select the Layout tab on the Blogger dashboard to add gadgets or rearrange gadgets."

Tip of the day: make documentation accurate as soon as possible. If you find that making the documentation accurate makes it too wordy or confusing, then change the UI so that the documentation is 1) easy to understand and 2) generally unnecessary, because the functionality is easy to figure out without reading the documentation.

Begin major digression: When I was working at LogicTools I was often adding buttons, forms, charts, etc. to the UI. Since I was also doing all of the documentation, I would usually immediately add the changes to the documentation as well. I was once told that we needed to add a check box to a form -- I think it was called something like "Not Warehousing." I added the check box to the form and then started updating the documentation. I got to about the second sentence: "When the "Not Warehousing" check box is not checked..." and figured out that the check box needed to be renamed. Trivial moral: never name a check box something that begins with "not." More profound moral: documentation for a feature should be as close to the source in space and time as possible: the developer should write the first draft of a paragraph explaining the feature (and how to use it) as soon as they decide to add the feature. End major digression.

Unlike the first Layout designer (Layout tab of Blogger dashboard), there is no "Preview" of your changes or the chance to quickly back out of changes you have made.

What this layout designer does have, which the other layout does not, is the option to change the number of columns in footer of your blog or change the number of columns or position of the sidebar. So, there are two different places in Blogger to change the layout of your blog. Let's compare features!:

Two Blogger Layout Designers Feature Comparison
Feature	Dashboard Layout tab	Template Designer Layout tab
Add Gadgets	yes	no
Edit Gadgets	yes	yes
Remove Gadgets	yes	yes
Rearrange Gadgets by Dragging	yes	no
Change Sidebar Location and Columns	no	yes
Change Footer Columns	no	yes
Preview Changes	no	yes
Clear Changes	no	yes

And the above chart doesn't even count the fact that you have to go to another tab to change the widths of the columns. If you are in the Template Designer and select the "Adjust Widths" tab, you can change the widths of the columns as seen in the following screenshot:

Adjusting widths in the Blogger Template Designer.

I think that this entire design of having multiple places to create a layout for a blog is a mess.

So I've previously created a few potential bugs that assume that this design stays basically the same. Now I will make a case for a redesign of the Template and Layout tabs of the dashboard, and every feature under them.

Layout Redesign

Let's discuss "template" and "layout"

One of the first things I tried to do when I started using Blogger was to create basic layouts and colors I didn't hate and then see what options I had to change them. Part of this confusion was caused by the weird maze of layout and template pages (and associated bugs) that I have documented in this and other posts. However, after some consideration I have decided that at a more basic level, the Blogger dashboard is using "template" and "template design" in a way that doesn't really make sense. Why is there a "Template" and a "Layout" tab on the dashboard instead of a tab called "Design"? The other tabs on the dashboard are very different from each other:

These other tabs on the dashboard are pretty different from each other. Why are "Layout" and "Template" here instead of just having a "Design" tab?

When I view my blog, there is a link in the upper right called "Design" that links to the Template tab of the Blogger dashboard. This is further proof that a "Design" tab would make more sense.

Further proof that there should be a "Design" tab on the dashboard instead of "Template" and "Layout."

Another reason layout and template are related? If you pick a new template, the layout of your blog will be changed to match the template (and some other settings like background, colors, fonts, etc.).

Blogger Dashboard Tabs

Here's my redesigned dashboard tabs:

I removed "Template" and "Layout" and replaced them with "Design."

When I click on the "Design" tab on my dashboard, I now get a combination of options that used to be divided between functionality form the old "Layout" tab and sub menus of the old Blogger Template Designer.

(Side note: If Blogger makes the changes I suggest, it would open them up later to create a feature called "Template Designer" that actually, I don't know.. let users design templates <gasp> (name them, redistribute them, etc.) As it stands now, the template designer lets users pick existing templates and customize them. The name "Template Designer" makes no sense to me.)

Blogger Designer -- Templates

After clicking on "Design," the user might see the following:

"Blogger Designer" replaces "Blogger Template Designer."

I am not very fond of this tab as is, but I am making minimal changes to the existing "Templates" tab (which I tend to do where possible to increase the likelihood that my suggestions will be implemented). Besides changes to the page name (now called Blogger Designer), I now have removed the "Adjust widths" tab (functionality now on Layout tab) and have renamed "Advanced" tab "Colors and Fonts." I am not set on that name, but I have trouble thinking of a text color change on my blog as an "Advanced" change and I expect other users won't find that easily either.

There are two changes that would help me out on this tab, though. Help me figure out how to try things and back out of the changes! I am constantly making changes on these tabs and not remembering the previous setting. The fastest way I know to get out of changes is to click the "<<Back to Blogger" link at the top. On the "Templates" tab only, there is hard to find text (only appears when a customized template is selected):

"You've customized this template. Remove customizations."

This scares the heck out of me as a user. I don't know what clicking on that link will do. At a minimum I want a link for more information after that. What happens when I click this? Are all design changes included? Does this erase all changes I've made to the original template I started from or just changes since my blog last went live? Overall, I'll that almost every UI I've ever used has a clearer way of saving changes and undoing changes than Blogger. It wasn't until I was writing this blog that I even realized I could save changes to my template into a file, or load templates from a file.When you first click on the "Templates" tab of the dashboard there is a grey "Backup/Restore" button at the top. I have copied that button to my redesigned Blogger Designer pages, but other things like "Save" "Undo" "Clear Changes" "Reset to Live Blog Version" etc. would work).

Blogger Designer -- Layout

Here is my Layout tab:

This layout designer combines the functionality of both of Blogger's current layout designers. You can choose layouts and add, edit, and remove gadgets. I've also added a preview button so it's easy to see your changes in a large preview window. I removed the "Adjust Widths" tab from the designer and created a "Column Widths" area on my Layout tab. I would also consider adding an easy way to undo changes rather than having to go the Backup/Restore route.

Well, I hope that this post convinced you that designing Blogger layouts could use some work. I think it is great that Google has a free service for creating blogs. I think it is worthwhile to look at the UI and make it easier to navigate and explore different options.