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

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:

Try Again Later: The Amazon Payments Fail

We all know that sometimes things just inexplicably work and that sometimes just trying again later will help. Another common remedy is closing and reopening the application or rebooting the computer (Roy from the TV Show The IT Crowd found he could automate the beginning of his tech support calls).

I recently had a problem with my blog and all of Google+ loading on my computer for about a second and then getting a blank screen. Eventually I realized that the latest AdBlock update caused this problem for all users (it was fixed about a day later). I now know that the next time something like this happens I should temporarily disable AdBlock (and any other browser add-ons), but trying again later would also have worked, since someone was actually working on the problem.

However, as a customer, when I hear "try again later" I often translate this as "I have no idea what's wrong -- please go away," especially if the application or website seems unstable in general and is very slow to resolve issues.

I recently decided to back a Kickstarter project called "Robot Turtles: The Board Game for Little Programmers" which required me to create an Amazon Payments account. This account is supposed to allow consumers to purchase things on other sites but have the payments go through Amazon. I have a regular Amazon account so setting this up didn't seem like a big idea. When I set up the account I got a message that the Privacy Act required me to enter a bunch of information such as address, date of birth, SSN, etc. I entered this info and submitted the form.

I get a generic "try again" message when my account information can't be verified.

Yeah, I know, sometimes there is just a temporary glitch, and trying again fixes the problem. So I try again, and get the same error message. I think I just moved on at that point and did something else.

Then the emails started.

Blogger, Pink means Pink!: Problem Solving Google Blogger Text Colors

Blogger template

In this post I try to change the text colors on my Google Blogger blog, and found a world of trouble and frustration.

By the time I finished this post I had uncovered several bugs. This is really long post, so I have decided to try create an itemized list of bugs up front with links to the part of the post in which I identify that bug. This doesn't work perfectly because I don't want to change the narrative flow and divide the text into sections by bug, but hopefully it helps. You can use these bug numbers later when you tell me my bug is spot on, not universal, completely wrong, or later fixed (Yay!).

Bug List

Possible bug titles for the bugs I discovered:

• Sidebar and footer background color choices not set correctly (BloggerTemplateDesigner_Bug1)
• Gadgets on sidebar don't use background color option setting (BloggerTemplateDesigner_Bug2)
• Some UI elements not visually marked on the preview when selected in the list (BloggerTemplateDesigner_Bug3)
• UI element list in "Advanced" tab order is confusing order and should be grouped by location on layout (BloggerTemplateDesigner_Bug4)
• Default template designs should have minimum text contrast requirements (BloggerTemplateDesigner_Bug5)
• Can't edit text or background of date tab on posts (BloggerTemplateDesigner_Bug6)

Feature Requests

Besides the bugs listed above, my biggest complaint is that it took so long to figure out the correspondence between UI elements on the list and UI elements in the preview. If my BloggerTemplateDesigner_Bug4 is fixed that would help. As a feature request, I would like to be able to select items in the preview and have the relevant item in the UI list be selected.

Exploring Blogger Text Colors

I just started this blog and didn't want to spend a lot of initial time worrying about the layout, so I chose one of the default layouts based on the "Awesome Inc." template and figured I'd worry about the details later.

However, there were a few details I decided couldn't wait.

User Interfaces I Plan to Focus On

For the time being I am focusing my energies on user interfaces (UI) that fit into at least one of these categories:

• UI that are already driving me crazy because I use them regularly. This will mean I will probably focus on web applications (primarily using the Chrome browser unless I am curious how it behaves on other browsers), Android applications (for Nexus 4 or Nexus 7 tablet), the Windows 8 operating system, and other applications that run on Windows 8.
• UI that make a product or feature so unusable that they caused me or someone I know to give up or switch to a different product.
• UI that are examples of UI trends that I hate, especially when I find websites that praise them as examples of innovative user-centered design.
• UI that involve more than one product and I can't figure out which program is to blame or how to fix it. If you have ever felt like a ping pong ball between customer support for two different products pointing fingers at each other you'll understand how frustrating this is. Maybe someone out there will help me figure out what the heck is going on and how to fix it.
• UI that are "optimized for mobile" but end up making my mobile experience worse.

Exploring, Problem Solving, and Looking for Trouble

Here I discuss briefly the kinds of testing I plan on doing for this blog and ones you could not pay me enough to do.

Exploring

A type of testing that is often ignored is what I think of as "exploring": watching what happens when the user explores an application for the first time and tries to figure out what it does and if they can do things with it that they will find useful. There are hundreds if not thousands of free apps available out there for people to wade through. Many users will download an application and try to use it and make a decision about whether to keep it in a very short period of time. In general, the more that a person knows about an application the worse they are at figuring out what will confuse or frustrate a new user. If you are creating an application you should solicit user feedback as early as possible (especially to make sure you are building the right thing in the first place) and look at a broad range of users. (And when you think your UI is pretty good, hand it over to a family member who didn't have a computer until they were an adult and tends to get annoyed rather than excited by new technology. I think most software engineers would find that a real eye-opener.)

Some companies do a reasonable job of usability testing; they want to know how easy the software is to use. However, usability testing I have seen often involves giving the user a specific set of tasks to perform and seeing where they get into trouble. At a minimum you need to have at least some beginning users and some more experienced users. (If you are lucky the customers talk out loud while they are doing this so you can learn more about what they are trying to do or expecting to see.) I have done this type of testing once for a college course and seen the results from one such study at Microsoft that was really fascinating. I wish more companies did this, especially in the early stages of the design process when the companies are capable of making significant changes based on the feedback they get from customers.

(Aside: If you have never worked in software you are probably thinking, "Why would anyone spend money to do usability testing if they weren't going to use the results to improve the UI (at least not any time soon)?" I will just say that that is a very good question. A friend once said to me something along the lines of, "Only people who don't work in software think that the things that happen in the Dilbert comic are ridiculous, and could never happen," which I think is very apt. Topic: The posting of Dilbert comics at software development companies as a form of passive-aggressive behavior: discuss!)

Introduction: I break UI

If I could pick any superpower right now, it would probably be copy cat from the TV series Heroes. I watch someone do something and I can instantly do it. Shiny! I can think of many, many other cool powers that would be fun to have (at least if I could keep the government or evil geniuses from finding out). Hey, there are probably millions of minorpowers that could be fun (as far as I am concerned, people who can remember other people's names easily are slightly superhuman).

I would not have chosen my power to be breaking user interfaces.