tag:blogger.com,1999:blog-3067890738482647302024-03-13T06:10:26.077-07:00UI Behaving BadlyHere I chronicle my encounters with various user interfaces that are behaving badly and make suggestions for improving them.Anonymoushttp://www.blogger.com/profile/05807982120599552120noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-306789073848264730.post-264693518294832422013-10-10T15:08:00.001-07:002013-10-10T18:18:55.754-07:00Choose Your Own Adventure: Navigating Google Blogger Layout + free re-design!In this post I compare the <b><i>two different</i></b> Google Blogger "layout" designers and suggest ways to improve the Blogger user experience by changing the way the menu is structured.<br />
<br />
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.<br />
<br />
Ok, so now it's later.<br />
<br />
After a little more experience and a blog post about the Template Designer I realized what part of the problem was: there are <i>two different Blogger layout designers</i> 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...<br />
<br />
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:<br />
<br />
<table border="5" cellpadding="4" cellspacing="3" style="width: 50%px;">
<tbody>
<tr>
<th colspan="3">Two Blogger Layout Designers Feature Comparison</th>
</tr>
<tr>
<th>Feature</th>
<th>Dashboard Layout tab</th>
<th>Template Designer Layout tab</th>
</tr>
<tr align="CENTER">
<th>Add Gadgets</th>
<td><span style="background-color: yellow;">yes</span></td>
<td>no</td>
</tr>
<tr align="CENTER">
<th>Edit Gadgets</th>
<td><span style="background-color: yellow;">yes</span></td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Remove Gadgets</th>
<td><span style="background-color: yellow;">yes</span></td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Rearrange Gadgets by Dragging</th>
<td><span style="background-color: yellow;">yes</span></td>
<td>no</td>
</tr>
<tr align="CENTER">
<th>Change Sidebar Location and Columns</th>
<td>no</td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Change Footer Columns</th>
<td>no</td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Preview Changes</th>
<td>no</td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Clear Changes</th>
<td>no</td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
</tbody></table>
<br />
<br />
<a name='more'></a><br />
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 (<b>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 <i>not a good sign</i></b>, 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.<br />
<h3>
<i>My Blogs</i> home screen</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-W34tLsZjatY/Ukh0IrWKrmI/AAAAAAAAJqw/ea_uJGrapi4/s1600/BloggerMyBlogOptions.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="328" src="http://4.bp.blogspot.com/-W34tLsZjatY/Ukh0IrWKrmI/AAAAAAAAJqw/ea_uJGrapi4/s640/BloggerMyBlogOptions.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This is what I call my "My Blogs" home" screen, since it is clearly designed to list all of my blogs.</td></tr>
</tbody></table>
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."<br />
<br />
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:"<br />
<h3>
<span style="color: blue;">First Layout: Dashboard Layout Tab</span></h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/--gzw_5jLy7g/UlWb7wdDCCI/AAAAAAAAJvY/O6fzs3ik58k/s1600/MainLayoutScreen.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Blogger Dashboard -- Layout tab" border="0" height="546" src="http://2.bp.blogspot.com/--gzw_5jLy7g/UlWb7wdDCCI/AAAAAAAAJvY/O6fzs3ik58k/s640/MainLayoutScreen.png" title="Blogger Dashboard -- Layout tab" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This is the Layout tab of the Blogger dashboard for my blog.</td></tr>
</tbody></table>
There is a helpful tip at the top of the screen: <b>"Add, remove, edit gadgets on your blog. Click and drag to rearrange gadgets. To change columns and widths, use the <span style="color: blue;">Template Designer</span>."</b> 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 <span style="color: #3d85c6;">Layout</span> tab of the Template Designer. To change the column widths, use the <span style="color: #0b5394;">Adjust Widths</span> tab of the Template Designer." I would make each link point to the correct tab of the Template Designer.<br />
<span style="color: red;">GoogleBloggerLayout_Bug1: Link to "Template Designer" on "Layout" tab of dashboard should be changed to direct links to <i>Layout</i> and <i>Adjust Widths</i> tabs of the Template Designer.</span><br />
<br />
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.<br />
<br />
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:<br />
<span style="color: red;">GoogleBloggerLayout_Bug2: "Clear" button should be renamed to "Clear Changes" or at least have mouseover text "clear unsaved changes to your blog layout."</span><br />
<h3>
<span style="color: blue;">Second Layout: the Layout tab of the Template Designer</span></h3>
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.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-vzoBeDSynkY/UlWsLr1cR4I/AAAAAAAAJv8/s488Ibxr33Y/s1600/BloggerTemplatedesigner2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Layout tab of the Blogger Template Designer" border="0" height="640" src="http://2.bp.blogspot.com/-vzoBeDSynkY/UlWsLr1cR4I/AAAAAAAAJv8/s488Ibxr33Y/s640/BloggerTemplatedesigner2.png" title="Layout tab of the Blogger Template Designer" width="598" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Layout tab of the Blogger Template Designer</td></tr>
</tbody></table>
Similarly at the top of this designer there is a message <b>"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."</b><br />
<br />
There are some problems with the instructions above:<br />
<ol>
<li>This designer does <i><u><b><span style="color: red;">not</span></b></u></i> allow you to rearrange gadgets by dragging them, even though it says it<span style="color: red;"> <b><i><u>does</u></i></b></span>. 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.</li>
<li>The designer <b><u><i><span style="color: red;">does</span></i></u></b> let you edit and remove gadgets, even though it says it <b><i><u><span style="color: red;">does not</span></u></i></b>.</li>
<li>The text at the top of the page tells you to go to "Design > Page Elements" <i><u>but those menu items don't in fact exist</u></i>, 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 <span style="color: blue;"><<Back to Blogger</span> link at the top of the page and then click the Layout tab.</li>
</ol>
<div>
<span style="color: red;">GoogleBloggerLayout_Bug3: Text at top of Template Designer is not accurate.</span> 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."</div>
<blockquote class="tr_bq">
<b>Tip of the day</b>: 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.</blockquote>
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<i> not </i>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.<br />
<br />
<div>
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.</div>
<div>
<br /></div>
<div>
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!:<br />
<br /></div>
<table border="5" cellpadding="4" cellspacing="3" style="width: 50%px;">
<tbody>
<tr>
<th colspan="3">Two Blogger Layout Designers Feature Comparison</th>
</tr>
<tr>
<th>Feature</th>
<th>Dashboard Layout tab</th>
<th>Template Designer Layout tab</th>
</tr>
<tr align="CENTER">
<th>Add Gadgets</th>
<td><span style="background-color: yellow;">yes</span></td>
<td>no</td>
</tr>
<tr align="CENTER">
<th>Edit Gadgets</th>
<td><span style="background-color: yellow;">yes</span></td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Remove Gadgets</th>
<td><span style="background-color: yellow;">yes</span></td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Rearrange Gadgets by Dragging</th>
<td><span style="background-color: yellow;">yes</span></td>
<td>no</td>
</tr>
<tr align="CENTER">
<th>Change Sidebar Location and Columns</th>
<td>no</td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Change Footer Columns</th>
<td>no</td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Preview Changes</th>
<td>no</td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
<tr align="CENTER">
<th>Clear Changes</th>
<td>no</td>
<td><span style="background-color: yellow;">yes</span></td>
</tr>
</tbody></table>
<div>
<br /></div>
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:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-z1HbdWocH0M/UlXiMsQzSwI/AAAAAAAAJwM/dWSe4vnjxek/s1600/TemplateDesignerAdjustWidths.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Adjust Width tab" border="0" height="192" src="http://2.bp.blogspot.com/-z1HbdWocH0M/UlXiMsQzSwI/AAAAAAAAJwM/dWSe4vnjxek/s640/TemplateDesignerAdjustWidths.png" title="Adjust Widths tab" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Adjusting widths in the Blogger Template Designer.</td></tr>
</tbody></table>
<b><span style="color: red;"><i>I think that this entire design of having multiple places to create a layout for a blog is a mess.</i></span></b><br />
<b><br /></b>
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.<br />
<br />
<h2>
Layout Redesign</h2>
<h3>
Let's discuss "template" and "layout"</h3>
<div>
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:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-AvUa-JO4Hjc/UlbzSMJC3aI/AAAAAAAAJw0/JQX44kKTQYc/s1600/DashboardTabs.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Blogger dashboard tabs" border="0" height="400" src="http://3.bp.blogspot.com/-AvUa-JO4Hjc/UlbzSMJC3aI/AAAAAAAAJw0/JQX44kKTQYc/s400/DashboardTabs.png" title="Blogger dashboard tabs" width="137" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">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?</td></tr>
</tbody></table>
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.</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-lOt8enSpvA4/Ulb7Fdoy1ZI/AAAAAAAAJxE/GDiEGJ9AJz4/s1600/DesignLink.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="187" src="http://3.bp.blogspot.com/-lOt8enSpvA4/Ulb7Fdoy1ZI/AAAAAAAAJxE/GDiEGJ9AJz4/s640/DesignLink.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Further proof that there should be a "Design" tab on the dashboard instead of "Template" and "Layout."</td></tr>
</tbody></table>
<div>
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.).</div>
<div>
<br /></div>
<h3>
Blogger Dashboard Tabs</h3>
<div>
Here's my redesigned dashboard tabs:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-wybvV_4ECsY/UlcGI4Is5mI/AAAAAAAAJxU/uU6pjl3gM0w/s1600/RedesignedBloggerTabs.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Redesigned Blogger dashboard tabs" border="0" height="400" src="http://2.bp.blogspot.com/-wybvV_4ECsY/UlcGI4Is5mI/AAAAAAAAJxU/uU6pjl3gM0w/s400/RedesignedBloggerTabs.png" title="Redesigned Blogger dashboard tabs" width="141" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">I removed "Template" and "Layout" and replaced them with "Design."</td></tr>
</tbody></table>
</div>
<div>
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.</div>
<div>
<br /></div>
<div>
(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 <i>design templates</i> <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.)</div>
<div>
<br /></div>
<h3>
Blogger Designer -- Templates</h3>
<div>
<br /></div>
<div>
After clicking on "Design," the user might see the following:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-1SMkiFuor80/UlcXteHyKUI/AAAAAAAAJxw/NyIx0oiNtEw/s1600/RedesignTemplateTab.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="289" src="http://4.bp.blogspot.com/-1SMkiFuor80/UlcXteHyKUI/AAAAAAAAJxw/NyIx0oiNtEw/s640/RedesignTemplateTab.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">"Blogger Designer" replaces "Blogger Template Designer."</td></tr>
</tbody></table>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
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.</div>
<div>
<br /></div>
<div>
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):</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<b>"You've customized this template. <span style="color: #0b5394;">Remove customizations</span>."</b></blockquote>
<div>
<br /></div>
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? <b>Overall, I'll that almost every UI I've ever used has a clearer way of saving changes and undoing changes than Blogger</b>. It wasn't until I was writing this blog that I even realized I <i><u>could</u></i> 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).<br />
<br />
<h3>
Blogger Designer -- Layout</h3>
<div>
Here is my Layout tab:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-00Ym0Vi19t8/UlcjtI-GZMI/AAAAAAAAJyA/Hxv6zv6cIBs/s1600/BloggerDesignerLayoutTab.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="http://1.bp.blogspot.com/-00Ym0Vi19t8/UlcjtI-GZMI/AAAAAAAAJyA/Hxv6zv6cIBs/s640/BloggerDesignerLayoutTab.png" width="640" /></a></div>
<br />
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.<br />
<br />
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.<br />
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/05807982120599552120noreply@blogger.com0tag:blogger.com,1999:blog-306789073848264730.post-86833101184055272262013-09-29T17:25:00.000-07:002013-10-10T18:05:02.925-07:00Quick Blogger Home Page RedesignIn 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.<br />
<h2>
A Few Words About Naming Forms</h2>
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"). <a href="http://www.youtube.com/watch?v=koZFca8AkT0&t=1m19s" target="_blank">Saying that name over and over again would really get me down.</a><br />
<br />
My request: if you create a form (more complicated than a simple message box) <i><b>please give it a name</b></i>. 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.<br />
<h2>
Blogger home page</h2>
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:<br />
<blockquote class="tr_bq">
www.blogger.com</blockquote>
which is automatically changed to<br />
<blockquote class="tr_bq">
www.blogger.com/<b>home</b></blockquote>
and contains a list of all of <i>my</i> blogs and blogs on my reading list. Here is what the top of my blog home page looks like now:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-jOPRsZBzQfk/Uki3UtKusvI/AAAAAAAAJr8/hpi6QGmpPlY/s1600/BloggerMyBlogOptions_original.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="227" src="http://1.bp.blogspot.com/-jOPRsZBzQfk/Uki3UtKusvI/AAAAAAAAJr8/hpi6QGmpPlY/s640/BloggerMyBlogOptions_original.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This is what the top of my blogger home page looks like now.</td></tr>
</tbody></table>
Any designer could come up with ways of making this page more <i>pretty</i>, 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.<br />
<br />
Before you ever try to redesign UI, there are some of the most basic things to think about:<br />
<br />
<br />
<a name='more'></a><br />
<br />
<ul>
<li>Who is going to use this UI, and how often? (What level of experience can I assume they have?)</li>
<li>What are the most common tasks? (I need to make these quick and easy)</li>
<li>What are the advanced tasks? (I need to make these less obvious so I don't confuse beginners.)</li>
<li>How can I use visual clues to help the user figure out what to do? (This includes consistency with other parts of the application.)</li>
<li>How will I give the user more information if they need more help?</li>
<li>How can I help the user avoid making mistakes?</li>
<li>How can I help the user recover from mistakes?</li>
</ul>
<br />
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:<br />
<br />
<ol>
<li>Most common tasks (create new post, view blog, view posts) are not as easy to get to as uncommon, advanced tasks ("New Blog").</li>
<li>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.</li>
<li>Button to create a new post is not labeled. This is presumably one of the most common tasks</li>
</ol>
<br />
Here is another screenshot with some annotations (some irrelevant items removed for clarity):<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-tdu9XauwkcE/UkidYBs8-iI/AAAAAAAAJrk/7aabpbXgCuA/s1600/BloggerMyBlogOptions.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="My blog homepage with notes" border="0" height="331" src="http://1.bp.blogspot.com/-tdu9XauwkcE/UkidYBs8-iI/AAAAAAAAJrk/7aabpbXgCuA/s640/BloggerMyBlogOptions.png" title="My blog homepage with notes" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Here is a screenshot of my blogger home page with my notes</td></tr>
</tbody></table>
To accomplish this I will:<br />
<br />
<ul>
<li>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.</li>
<li>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.</li>
<li>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.</li>
</ul>
<div>
Here is a screenshot without my notes:</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-xApjS-VPBGU/Uki9bSXTaFI/AAAAAAAAJsY/fITuDYaXieI/s1600/RevisedMyBlogs_original.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="172" src="http://1.bp.blogspot.com/-xApjS-VPBGU/Uki9bSXTaFI/AAAAAAAAJsY/fITuDYaXieI/s640/RevisedMyBlogs_original.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This is my revised blog home page.</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
Here is a screenshot with my notes:</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-Zo5AI9axFZY/Uki8mLFOvCI/AAAAAAAAJsM/b-xNV0wjd9o/s1600/RevisedMyBlogs.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="220" src="http://4.bp.blogspot.com/-Zo5AI9axFZY/Uki8mLFOvCI/AAAAAAAAJsM/b-xNV0wjd9o/s640/RevisedMyBlogs.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This is my revised blog home page with notes</td></tr>
</tbody></table>
<div>
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.</div>
<div>
<br /></div>
<div>
So, let me know what you think of this redesign.</div>
<div>
<br /></div>
<div>
My next planned post will explore how much fun it is navigate the <i><b>two different</b></i> Layout designers for Google Blogger.</div>
Anonymoushttp://www.blogger.com/profile/05807982120599552120noreply@blogger.com0tag:blogger.com,1999:blog-306789073848264730.post-69877039143232206492013-09-27T17:43:00.000-07:002013-10-10T18:04:35.897-07:00Try Again Later: The Amazon Payments FailWe all know that sometimes things just inexplicably work and that sometimes just <b>trying again later</b> will help. Another common remedy is closing and reopening the application or rebooting the computer (Roy from the TV Show <u>The IT Crowd</u> found he could <a href="http://www.youtube.com/watch?v=nn2FB1P_Mn8&t=0m26s" target="_blank">automate the beginning of his tech support calls</a>).<br />
<br />
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 <a href="https://chrome.google.com/webstore/detail/adblock/gighmmpiobklfepjocnamgkkbiglidom?hl=en" target="_blank">AdBlock</a> 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 <i>trying again later</i> would also have worked, since someone was <i>actually</i> working on the problem.<br />
<br />
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.<br />
<br />
I recently decided to back a Kickstarter project called "<a href="http://www.kickstarter.com/projects/danshapiro/robot-turtles-the-board-game-for-little-programmer" target="_blank">Robot Turtles: The Board Game for Little Programmers</a>" 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.<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/--nHwAla6sKg/UkX5rAn75jI/AAAAAAAAJoY/z-ToEwAXuLY/s1600/AmazonPaymentsFail.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="139" src="http://1.bp.blogspot.com/--nHwAla6sKg/UkX5rAn75jI/AAAAAAAAJoY/z-ToEwAXuLY/s640/AmazonPaymentsFail.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">I get a generic "try again" message when my account information can't be verified.</td></tr>
</tbody></table>
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.<br />
<br />
Then the emails started.<br />
<br />
<br />
<a name='more'></a><br /><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-rK9Ejx_J10I/UkX7eYBdD6I/AAAAAAAAJok/z-ODN-QHi3E/s1600/AmazonPaymentsEmail.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="304" src="http://2.bp.blogspot.com/-rK9Ejx_J10I/UkX7eYBdD6I/AAAAAAAAJok/z-ODN-QHi3E/s640/AmazonPaymentsEmail.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Obviously there is a problem I need to fix in my account -- but where do I go to fix it?</td></tr>
</tbody></table>
Every day or so I would get an email saying that Amazon Payments still needed information from me, but it didn't have a link to the form I needed to use. It's probably good that there <i>wasn't</i> a link -- clicking on account links in emails is a bad idea since fake links to account info is common in spam and it's a bad habit to click on it. However, there is no hint in this email about how to navigate to Amazon Payments once I am logged into Amazon (which is what I was expecting to have to do at the time).<br />
<br />
<span style="color: red;">Amazon_Payments_Bug1: Amazon Payments emails should indicate how to verify account information. </span>(Foreshadowing: Message should also say, "You must log in to the full Amazon site to do this (not the mobile site).")<br />
<br />
However, when I log into my account on my phone I cannot find any way to get to Amazon Payments once I am on Amazon. There is only one search box on the page (not separate ones for searching for products or searching for Amazon help topics). Searching for "Amazon Payments" in this text box doesn't work (although the fact that the second search suggestion is the book "Amazon Web Services For Dummies" is funny).<br />
<br />
<span style="color: red;">Amazon_Payments_Bug2: I should be able to search for Account help on Amazon mobile site.</span><br />
<br />
I am glad the mobile site does allow me to click a link and go to the full Amazon site (the right approach to take, and thank you). Once I get to the full Amazon site, I am expecting there is some sort of "message" waiting for me to tell me what to do. Not so much.<br />
<br />
<span style="color: red;">Amazon_Payments_Bug3: Problems with my Amazon Payments account should show up as a message on Amazon (with links to correct the problem) when the user is logged into their Amazon account</span><br />
It <i>almost</i> goes without saying that someone should still be able to use their Amazon account to browse or buy things without having to resolve this problem first, but I would sure as heck write that in a formal bug based on experience.<br />
<br />
I can understand why Amazon might not put a link to my account in an email, but there's no excuse for helping me get to the right place once I'm already logged into my Amazon account. I select the "My Account" page. It takes me awhile to find Amazon Payment Account options, since there is a large, featured "Payments" section on the page, but I eventually find it under "Other Accounts."<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-I-bcHKGHYZw/UkYUobKNsOI/AAAAAAAAJo8/zEC5G9rJ-ak/s1600/AmazonYourAccount.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="329" src="http://2.bp.blogspot.com/-I-bcHKGHYZw/UkYUobKNsOI/AAAAAAAAJo8/zEC5G9rJ-ak/s640/AmazonYourAccount.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Eventually I find "Amazon Payment Accounts" under "Your Other Accounts."</td></tr>
</tbody></table>
I am prompted to sign into Amazon Payments. I realize "Oh -- I should just go directly to this site next time, not the regular Amazon site." If I had ever used Amazon Payments before, I probably would have known that, but the whole reason I'm here in the first place is that I was new and having trouble, so <i>whatever</i>.<br />
<br />
It is often the case that the relationship between different products and user accounts is somewhat clear to the people that work at a company but bewildering to the customer. At least there <b><i>is</i></b> a link on Amazon's site to Amazon Payments. On the full Amazon site (not the mobile site) searching for "Amazon Payments" gets it in one:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-C7l5Y1LxpBI/UkYYJap26rI/AAAAAAAAJpI/4RRNAUGeu8I/s1600/Personal+Information+Required.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="131" src="http://4.bp.blogspot.com/-C7l5Y1LxpBI/UkYYJap26rI/AAAAAAAAJpI/4RRNAUGeu8I/s320/Personal+Information+Required.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Amazon Payments gives me a useful message when I log on.</td></tr>
</tbody></table>
<br />
<br />
Good! I get the message I needed with a link to fix the problem! Now I just have to fill out a form:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-H09VEfx2Zn8/UkYYxKc2YqI/AAAAAAAAJpQ/oG6w2-AwS6o/s1600/AmazonPaymentsVerify.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="640" src="http://1.bp.blogspot.com/-H09VEfx2Zn8/UkYYxKc2YqI/AAAAAAAAJpQ/oG6w2-AwS6o/s640/AmazonPaymentsVerify.png" width="537" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">I have to give Amazon Payments personal info to verify my identity.</td></tr>
</tbody></table>
<br />
I fill out the form again. Same error message.<br />
<br />
I try two more times on different days. Same error message.<br />
<br />
Ok, so since "my" Kickstarter project is about to end and I don't want to miss out, I decide to contact Amazon Payments customer support.<br />
<br />
On the plus side, I was able to talk to a live (as far as I could tell) human being right away. She was able to tell me some useful information about why verifying my personal information could fail:<br />
<br />
<ul>
<li>no credit history</li>
<li>recent move</li>
<li>not 18 years or older</li>
</ul>
<div>
None of these applied to me, however. I also learned that the message I received meant that my identity information couldn't be verified, and that they couldn't research my specific problem (supposedly) because they were trying to protect my privacy.</div>
<div>
<br /></div>
<div>
<span style="color: red;">Amazon_Payments_Bug4: If the user's identity information could not be verified, give them a specific message with information on possible causes and resolutions.</span></div>
<div>
<span style="color: red;"><br /></span></div>
<div>
At the very least I would have liked a <b>more useful and specific error message</b> on the page rather than a generic <i>please try again </i>message:</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<span style="color: blue;">We're sorry, but your identity information could not be verified.</span><span style="color: blue;"><br /></span><span style="color: blue;"> This can happen if you:</span><br />
<ul>
<li><span style="color: blue;">have little or no credit history</span></li>
</ul>
<ul>
<li><span style="color: blue;">moved recently</span></li>
</ul>
<ul>
<li><span style="color: blue;">are not 18 years or older</span></li>
</ul>
<span style="color: blue;">or have been locked out of your account because of too many retries.</span><span style="color: blue;"><br /></span><span style="color: blue;">In order to protect your privacy, we cannot give you specific information about why your identity information could not be verified.</span><span style="color: blue;"><br /></span><span style="color: blue;">If you want to talk to Amazon Payments support, the number is ...</span></blockquote>
<div>
</div>
<br />
<div>
<br />
At least that message will save you a call to customer service in some cases, and save you from trying again and again uselessly.<br />
<br />
I would really suggest the Amazon Payments team explores ways to give customers more useful information (either directly in an error message or after calling customer support) if their identity cannot be validated. I have no idea why my identity couldn't be verified, so I expect that their are one or more bugs in the UI (I tried removing the apostrophe from my last name, but it didn't work). I assume that a lot of money is on the line if some customers cannot set up Amazon Payment accounts and can't get any information about why not.<br />
<br />
For the short term, I made my husband use his Amazon Payments account to fund the Kickstarter project, since I couldn't get my account to work. Customer support told me that they will call me if they get any information.<br />
<br />
A web search for "Amazon Payments can't verify information" makes it pretty clear it's not just me (I never know whether to feel good or depressed about that).<br />
<br />
I'm guessing that Amazon Payments will eventually fix this problem after they lose or are about to lose one or more BIG CUSTOMERS.<br />
<br />
It's impressive that Kickstarter created its <a href="http://www.kickstarter.com/help/amazon" target="_blank">own web page</a> clearly in self-defense (to protect its customer support from fielding tons of support calls about Amazon Payments). And based on <a href="http://www.kickstarter.com/blog/amazon-payments-and-us-only" target="_blank">this Kickstarter site</a>, there are a lot of customers complaining about Amazon Payments and Kickstarter is, "keeping a close eye on PayPal's new Adaptive Payments service..."<br />
<br />
Perhaps we have located the BIG CUSTOMER that will eventually convince Amazon Payments to fix this problem. Or perhaps I should just try again later <sigh>.<br />
<br />
<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/05807982120599552120noreply@blogger.com0tag:blogger.com,1999:blog-306789073848264730.post-6517362053353403132013-09-23T07:30:00.000-07:002013-10-10T18:05:28.843-07:00Blogger, Pink means Pink!: Problem Solving Google Blogger Text Colors<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-o8i1rnegNRw/Uj4RCiTYuTI/AAAAAAAAJkY/PED8BOp1gXs/s1600/AwesomeIncBloggerTemplate.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-o8i1rnegNRw/Uj4RCiTYuTI/AAAAAAAAJkY/PED8BOp1gXs/s1600/AwesomeIncBloggerTemplate.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Blogger template</td></tr>
</tbody></table>
In this post I try to change the text colors on my Google Blogger blog, and found a world of trouble and frustration.<br />
<br />
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!).<br />
<br />
<h3>
<span style="color: red;">Bug List</span></h3>
Possible bug titles for the bugs I discovered:<br />
<br />
<ul>
<li>Sidebar and footer background color choices not set correctly (<a href="http://uibehavingbadly.blogspot.com/2013/09/problem-solving-google-blogger-text.html#bug1" target="_blank">BloggerTemplateDesigner_Bug1</a>)</li>
<li>Gadgets on sidebar don't use background color option setting (<a href="http://uibehavingbadly.blogspot.com/2013/09/problem-solving-google-blogger-text.html#bug2" target="_blank">BloggerTemplateDesigner_Bug2</a>)</li>
<li>Some UI elements not visually marked on the preview when selected in the list (<a href="http://uibehavingbadly.blogspot.com/2013/09/problem-solving-google-blogger-text.html#bug3" target="_blank">BloggerTemplateDesigner_Bug3</a>)</li>
<li>UI element list in "Advanced" tab order is confusing order and should be grouped by location on layout (<a href="http://uibehavingbadly.blogspot.com/2013/09/problem-solving-google-blogger-text.html#bug4" target="_blank">BloggerTemplateDesigner_Bug4</a>)</li>
<li>Default template designs should have minimum text contrast requirements (<a href="http://uibehavingbadly.blogspot.com/2013/09/problem-solving-google-blogger-text.html#bug5" target="_blank">BloggerTemplateDesigner_Bug5</a>)</li>
<li>Can't edit text or background of date tab on posts (<a href="http://uibehavingbadly.blogspot.com/2013/09/problem-solving-google-blogger-text.html#bug6" target="_blank">BloggerTemplateDesigner_Bug6</a>)</li>
</ul>
<h3>
<span style="color: red;">Feature Requests</span></h3>
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.<br />
<br />
<h2>
Exploring Blogger Text Colors</h2>
<br />
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 <b>I'd worry about the details later</b>.<br />
<br />
However, there were a few details I decided couldn't wait.<br />
<br />
<br />
<a name='more'></a><br /><br />
<br />
1. Text contrast for links<br />
<br />
The default text colors for unvisited links and visited links were so similar to the regular text color that I had a hard time seeing that the links existed at all. I <i>hate</i> that. Some of my links go to sites that are really funny and I'm sure you don't want to miss them. So I changed the link text to colors which I logged in my brain many years ago as default linking colors (e.g.<span style="color: blue;"> unvisited</span> and <span style="color: purple;">visited</span>). This was pretty easy.<br />
<br />
<div id="bug5">
2. Text contrast on the footer</div>
<br />
<br />
I started experimenting with adding <a href="https://support.google.com/blogger/answer/2846874?hl=en&topic=2387000" target="_blank">gadgets</a> to my blog layout that appear at the bottom of the screen below my blog posts (the "footer"). I was reminded of how annoying it is when text is nearly impossible to read because of low contrast between the text and the background. Because I assume there are many people that will only come across my blog accidentally, I want to make sure it is as easy as possible for them to follow my blog. From my perspective, the bottom of my blog then looked something like this after I added a few gadgets:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-1R8bnUkbGmQ/Uj4Wrkzf7tI/AAAAAAAAJko/OJAETuy8eE8/s1600/TemplateBottomUnreadableText_WhiteOut.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="140" src="http://1.bp.blogspot.com/-1R8bnUkbGmQ/Uj4Wrkzf7tI/AAAAAAAAJko/OJAETuy8eE8/s400/TemplateBottomUnreadableText_WhiteOut.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Doctored image that tries to approximate what the footer at the bottom of my blog looked like to me at this point.</td></tr>
</tbody></table>
If I squinted and looked very carefully, I could see the "Subscribe" and "Follow by Email" text on the page, but whoever's idea is was to put white text on a pale pink background needs to<i> <b>fight that impulse next time</b></i>. I expected modifying the colors of the footer background or text would be easy. After an initial 10 minutes of mucking around I made an accidental discovery:<br />
<br />
<b><i>The text and background color contrast were probably not as bad for everyone else as I thought</i></b> (hence the doctoring of the above image to show how my blog looked to me). If I were using a desktop computer with an awesome monitor at the <a href="https://www.osha.gov/SLTC/etools/computerworkstations/components_monitors.html" target="_blank">ergonomically correct height</a> (center of the screen slightly lower than my eye level) I probably would not have decided to mess with the colors until I was ready to create my own blog background and colors myself. However, I discovered if I tilt my laptop screen as far back as it goes I get slightly more contrast. This makes me somewhat suspect my laptop is messing with me and is partially to blame. However, I still maintain that default template color schemes should be very easy to read. I know, I know -- designers like sexy color schemes. However, I have no patience with text that I can't read without squinting (note to self: I need to play with the tools on this website: <a href="http://webaim.org/products/" target="_blank">Web Accessibility in Mind</a>). My parents probably wouldn't even be able to tell that there <i>was</i> text down there. I think this is unlikely to get fixed, but I'm going to declare "<span style="color: red;">BloggerTemplateDesigner_<b>Bug5</b></span>": check all default templates for text readability.<br />
<br />
So many wiser souls that <i>don't</i> tend to break UI easily would have moved on at this point. However, me being me, I decided to keep experimenting since I knew I'd be modifying colors on my blog anyway (although I reserve the right to have nightmares that are clearly inspired by trying to read white text on pale pink backgrounds). I had figured out how to change the hyperlink colors pretty easily, so I didn't think this would take very long. <sigh><br />
<br />
I started going through the different "Advanced" options in the Blogger Template Designer to try to figure out where to change the background or text color for the elements at the bottom ("footer") of my blog. I knew I either needed to change the background, change the text, or both.<br />
<br />
I was originally "<a href="http://uibehavingbadly.blogspot.com/2013/09/blog-focus-and-what-i-test.html#exploring" target="_blank">exploring</a>" the Blogger Template Designer, but now I am in "<a href="http://uibehavingbadly.blogspot.com/2013/09/blog-focus-and-what-i-test.html#problem_solving" target="_blank">problem solving</a>" mode.<br />
<br />
<h2>
<b>Problem Solving: </b></h2>
<h3>
<b>Change the background or text of my footer so that I can read the text easily.</b></h3>
<div id="bug4">
On the negative side, there is a long list of UI elements to pick from and it took me quite a while to find what I was looking for since I didn't know what the names of the UI elements would be. The organization of this list is a mystery to me (<span style="color: red;">BloggerTemplateDesigner_<b>Bug4</b></span>) -- perhaps it is sort of in top to bottom order of where these things are expected to be on the page? In addition, at first I couldn't see all of the items on the list because the scroll bar is so pale gray I couldn't find it. I'll save my comments on the color picker for a separate post.</div>
<br />
<br />
<div id="bug3">
On the plus side, I love how I can select something from a list of UI elements (such as "Gadget Text," "Post Background," etc.) and I can see which elements on my blog will be modified by changes I make. (This actually wasn't consistent, though, which caused me some problems I will go into later in this post which I will label "<span style="color: red;">BloggerTemplateDesigner_<b>Bug3</b></span>").</div>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-dWk5lg9FqHk/Uj40L6XSyZI/AAAAAAAAJlQ/a3PeagLO8I8/s1600/GadgetBackgroundOptions.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="488" src="http://3.bp.blogspot.com/-dWk5lg9FqHk/Uj40L6XSyZI/AAAAAAAAJlQ/a3PeagLO8I8/s640/GadgetBackgroundOptions.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">When I select an item from the list of UI elements such as "Gadget Background," the parts of my blog that my color changes will affect are marked clearly on a preview of my blog.</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
So this is where things got a bit tricky. I often find myself in this situation. I realize, "If I am clever about this I can figure out how to do what I want eventually," but also have a voice in my head saying, "Why is this so hard?"<br />
<br />
<div id="bug2">
I know that many of the things on the footer of my blog are called gadgets. And as I would expect, the "Gadget Text" option could fix the unreadable white-on-pale-pink text on my footer. However, I realized that other things on my blog were also gadgets (such as "Blog Archive" and "About Me" which were added by default) and they had a<i> different</i> background (dark gray) that I couldn't figure out how to change. At this point an easy option would be to try to find some text color that would have good contrast with both pale pink and dark grey, but I didn't immediately find something I liked. Then I realized the default gadgets had a separate background object (a rounded rectangle) that had a color that I could set (it is transparent by default, at least on this layout template). I changed the background for the default gadgets to black (as shown in the previous picture) but this didn't change the background for the gadgets in the footer. So -- gadgets sometimes have a background color I can set and sometimes don't, depending on where they are on the page? Or perhaps some gadgets do and some don't? That seems strange... (<i>Now I am getting confused</i>). I am calling this "<span style="color: red;">BloggerTemplateDesigner_<b>Bug2</b></span>."</div>
<br />
<br />
<div id="bug1">
Then I experimented with changing the background of the entire footer. This didn't work as I expected. Based on what I observed, I am going to guess that whatever color you pick for the background color of your footer <b><i>is much lighter than I selected</i></b>. (<i>Now I'm getting annoyed</i>.) I'm going to call this part of "<span style="color: red;">BloggerTemplateDesigner_<b>Bug1</b></span>."</div>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-_qe1ycCtBxI/Uj8o4frugVI/AAAAAAAAJmA/BWivVbefS-E/s1600/FooterColorIsLighter.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="328" src="http://3.bp.blogspot.com/-_qe1ycCtBxI/Uj8o4frugVI/AAAAAAAAJmA/BWivVbefS-E/s400/FooterColorIsLighter.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Why is the background color for the footer so much lighter than the color I selected above?</td></tr>
</tbody></table>
After taking several hours blogging about this rather than spending more time trying to fix my problem <u>I've finally figured out how to change the background of where my "Blog Archive" and "About Me" gadgets are!</u> This part of the layout is called the "Sidebar." At this point I feel pretty stupid -- sure, the ordering of the list of UI elements isn't clear, and I've don't remember using the term "sidebar" before, but the name is suggestive enough. Why didn't I see this before?<br />
<br />
I noticed a pattern earlier -- in most other cases I can select a UI element in the list and that element is outlined by a red box in my blog preview. As a user I started to expect this. What I didn't realize is that some items on this list <i><b>don't </b></i>get outlined in the preview when I select them, including the one that I was looking for. I was sort of clicking on UI items on the list quickly and checking to see if the UI element in the preview was outlined with a red box and it never happened. After some experimentation, I found several other UI elements such as "Tabs Background" which also don't show up in my preview either. I am going to group all such UI inconsistencies as "<span style="color: red;">BloggerTemplateDesigner_<b>Bug3</b></span>."<br />
<br />
Ok, so I have identified some inconsistencies in the UI, but I can see a setting to change the background color of the sidebar, so at this point I think I have solved my problem once I pick a reasonable color. I can change the background color of my sidebar to be the same as the color of my footer -- then I can just pick a gadget text color that has high contrast with the background color.<br />
<br />
So I change my sidebar background color and realize that whatever color I pick, the sidebar is changed to a <b>color that is much darker than the color I selected</b>. At this point I start to feel that <i>the designer is messing with me on purpose.</i> (Me: "But I want pink #ce5f70!" Hal: <a href="http://www.youtube.com/watch?v=7qnd-hdmgfk" target="_blank">"I'm sorry, Dave, I'm afraid I can't do that"</a>). I'm going to consider this also part of "<span style="color: red;">BloggerTemplate_<b>Bug1</b></span>."<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-1_ddJOx1YRk/Uj5KRNHz8VI/AAAAAAAAJlw/k-N4AmH3hWA/s1600/SidebarColorIsDarker.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="362" src="http://2.bp.blogspot.com/-1_ddJOx1YRk/Uj5KRNHz8VI/AAAAAAAAJlw/k-N4AmH3hWA/s400/SidebarColorIsDarker.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Why is the background color for the sidebar so much darker than the color I selected above?</td></tr>
</tbody></table>
At this point I am not as annoyed as I am <i>really worried</i>.<br />
<br />
In my experience, if you show someone UI that is completely broken (buttons don't work, words are misspelled, etc.) and the problem is not too hard to fix, they will probably fix it when they have time. If you are completely frustrated by UI that you suspect is working <i>as the designer intended</i> (even if you think it is terrible) you should assume there are going to be some pretty significant roadblocks to getting it changed (after all, "<a href="http://quotes.liberty-tree.ca/quote_blog/C..S..Lewis.Quote.E1E7" target="_blank">those who torment us for our own good will torment us without end</a>").<br />
<br />
The only possible explanation I can come up for why Google is doing this is that someone at Google thinks that having the sidebar dark and the footer light for all web logs on Blogger adds a certain continuity. If anyone knows differently or has a better idea, I'd love to hear it! As far as I'm concerned, if you let users set text and background colors for different parts of their blog and show them a preview of what it will look like (which I think is absolutely the right approach, and thank you!) then <b><i>you should use the colors they pick</i>. <i>Period</i>.</b> At that point it's the user's lookout if they do something like set the text and background both to black or something.<br />
<br />
If I'm right that someone is changing my color settings to have consistency between blogs, then that is a terrible reason considering how many different design choices you are giving bloggers.<br />
<br />
From previous experimentation I know that it's probably impossible to get the footer and sidebar to be approximately the same color (if I make the the footer "black" it actually turns into what looks to me like pale blue), and I'm pretty tired of experimenting at this point since I don't even <i>like</i> pink (I only picked this template as a starting point because it reminded me of tie dye). So now I just need to:<br />
<ol>
<li>Change the gadget background color to a light color (so it can be similar to the footer color, which Blogger is going to make into a light color no matter what I pick). (<a href="http://www.youtube.com/watch?v=NCLPHSVtvmU" target="_blank">Grr! Argh!</a>)</li>
<li>Change the gadget title text to a very dark color (note: it's white by default) so it shows up easily against the gadget background color and footer color, which are now both really light.</li>
<li>Pick any footer color I like, since I chose dark text for the gadget text, and Blogger will change whatever color I pick into a light color anyway. Grr!</li>
<li>Change the sidebar background color if it looks bad (note that whatever color I pick will changed by Blogger to a much darker color). Grr!</li>
</ol>
<div>
I <i>really</i> hate pink now.</div>
<div>
<br /></div>
<div>
Ok, I think I understand the layout of the obstacle course at this point. Now I'll try to accomplish those mini tasks I just came up with:</div>
<div>
<ol>
<li>Change gadget background: no problem.</li>
<li>Change the gadget text: hmm. I thought this would be one task, but doing part of this task was relatively easy and the rest is impossible using the UI, as far as I can tell. Fixing the gadget title was easy. Fixing the gadget text on my sidebar took me a minute, because I first tried to change the "Gadget Text" color would fix this, but actually I needed to change "Gadget Links" instead, since the text in these gadgets are links to my posts and profile. (I think if I did a redesign I would probably group some of these items together). However, some of the text on the gadgets in my footer can't be changed by the UI as far as I can tell. I don't like pale gray text on white. Grr!</li>
<li>Pick a footer color I like: no problem.</li>
<li>Sidebar background changed: no problem.</li>
</ol>
<div>
Ok, so let's see how it looks now:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-eTilQeUo0J0/Uj95pZR1wTI/AAAAAAAAJmg/TxqhFkeuSwo/s1600/RevisedSideBar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="http://3.bp.blogspot.com/-eTilQeUo0J0/Uj95pZR1wTI/AAAAAAAAJmg/TxqhFkeuSwo/s400/RevisedSideBar.png" width="400" /></a></div>
<br />
Ok so now most of the text on my page is easy to read because there is reasonably high contrast between the background and text except for the gadgets on my footer:</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-hS1VCGr0CLc/Uj9ZEsLeueI/AAAAAAAAJmQ/ntx1oBm1Irg/s1600/CantChangeFooterTextColor.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="178" src="http://1.bp.blogspot.com/-hS1VCGr0CLc/Uj9ZEsLeueI/AAAAAAAAJmQ/ntx1oBm1Irg/s400/CantChangeFooterTextColor.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">As as far as I can tell, there is no way to change the text color for these Blogger gadgets.</td></tr>
</tbody></table>
<div>
I am disappointed that I can't change the color of the text on these gadgets at all, but in this case I would have been satisfied if the text were a little darker. The "Powered by Blogger" text color on the footer is a better choice I think. I am going to consider this...</div>
<div>
<b><br /></b></div>
<h3>
<b>Mission Completion!</b></h3>
<div>
<br /></div>
<div>
Of course, I don't actually <i>like</i> how it looks (it kind of looks like Valentine's Day threw up at this point), but hey -- I officially accomplished my task! Now I really want to start from scratch with a different background that contains no pink whatsoever, but I will fight that urge for now.<br />
<br />
<div id="bug6">
While I was trying to accomplish this I noted that what looks like a "tab" at the top of my post that has a date on it is selected when I select "Gadget Title," so at this point I assume that tab is a gadget and that I can change the color and text of that tab using "Gadget Title" and "Gadget Background" options. Changing these options has no effect, nor does changing any of the background or text colors.</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-pWfiWZwphBA/Uj97sMIiMRI/AAAAAAAAJms/oTN5N6K6ZfU/s1600/IsDateHeaderAGadgetOrNot.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="371" src="http://4.bp.blogspot.com/-pWfiWZwphBA/Uj97sMIiMRI/AAAAAAAAJms/oTN5N6K6ZfU/s640/IsDateHeaderAGadgetOrNot.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The tab above my post is outlined when I select "Gadget Title." So why doesn't the text color change?</td></tr>
</tbody></table>
After some further experimentation, I realize that I <i>can</i> change the date text color by changing the UI element "Date Header":<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-mStROYQqlME/Uj9-u43svzI/AAAAAAAAJnE/5_aJh0n4kF0/s1600/DateHeaderColorChange.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="377" src="http://1.bp.blogspot.com/-mStROYQqlME/Uj9-u43svzI/AAAAAAAAJnE/5_aJh0n4kF0/s640/DateHeaderColorChange.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Actually you can change the text used for the date; it's the "Date Header" UI element.</td></tr>
</tbody></table>
So perhaps the only bug is that this tab was accidentally selected earlier when it shouldn't have been. I'm so confused at this point.<br />
<br />
Then I try to figure out how to change the background for the "Date Header." Besides setting the text color there is also an option to change the border color of the date header, but as far as I can tell this has no effect. Ok, so maybe I need to look for a different UI element on the list. "Date Background" would seem a consistent choice but that doesn't exist. The date kind of looks like it is on a tab, so I check "Tabs Background" and every other UI element on the list, but can't find any way to change this. I am going to give up on figuring this out at this point. I am just going to label this "<span style="color: red;">BloggerTemplate_<b>Bug6</b></span>".</div>
</div>
<div>
<br />
How to group similar bugs to maximize the chance they will get fixed is a minor art form and depends on the company culture, the architecture of the application you are creating bugs for, what part of the product lifecycle you are in, etc., so I just picked something and ran with it.<br />
<br />
Thanks for reading!</div>
Anonymoushttp://www.blogger.com/profile/05807982120599552120noreply@blogger.com0tag:blogger.com,1999:blog-306789073848264730.post-3013413342543023372013-09-20T22:31:00.001-07:002013-10-10T18:06:27.611-07:00User Interfaces I Plan to Focus OnFor the time being I am focusing my energies on <a href="http://en.wikipedia.org/wiki/User_interface" target="_blank">user interfaces</a> (UI) that fit into at least one of these categories:<br />
<ul>
<li>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 <a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">Chrome</a> browser unless I am curious how it behaves on other browsers), Android applications (for <a href="http://www.google.com/nexus/4/" target="_blank">Nexus 4</a> or <a href="http://www.google.com/nexus/7/" target="_blank">Nexus 7</a> tablet), the <a href="http://windows.microsoft.com/en-us/windows-8/meet" target="_blank">Windows 8</a> operating system, and other applications that run on Windows 8.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>UI that are "optimized for mobile" but end up making my mobile experience <i>worse</i>.</li>
</ul>
<div>
<a name='more'></a></div>
<div>
<br /></div>
<div>
I'm not going to worry about:</div>
<div>
<ul>
<li>looking foolish for saying that an application/website's UI confused me. If I can't figure out how to use a UI on my first try I am going to assume that many other users have the same problem and that something should be changed. I don't intend to redesign the UI for most applications from scratch (except as a fun exercise if I'm in the mood). I am going to try to focus on changes that many not require substantial work but would make a huge change for the user.</li>
<li>companies that I assume are creating difficult UI <i>on purpose</i> so that you will accidentally click on advertising. There is no way I want to increase traffic to those sites by linking to them.</li>
<li>doing a level of testing that I would feel necessary if I was actually a developer on the application.</li>
<li>perfect spelling, grammar, etc. unless it is causing confusion. I have worked professionally as a technical writer and feel a slight twinge every time I use a contraction or make cultural references. However, I need to be less formal here or it will severely limit my output and/or put my readers to sleep. Writing a blog confuses the heck out me as it is -- I am constantly fighting <a href="http://en.wikipedia.org/wiki/Analysis_paralysis" target="_blank">analysis paralysis</a>. (Who the heck is my audience? What references do I assume they already know? Am I going into too much detail or too little? Argh!) My natural writing voice is not unlike how I talk, so speaking in my own voice while playing the part of the <i>unsatisfied customer</i> seems appropriate.</li>
</ul>
<div>
When there is a UI that has some part of it that is unarguably broken (I recently came across a drop-down list where it was impossible to select anything except the first few items) I will blog about the issue and <i>also</i> try to inform the application developers directly about the problem.</div>
<div>
<br /></div>
<div>
I will probably have occasional moments of being snarky, but I actually want to convince companies to <i>fix</i> their UI and make it more user-friendly. If comments are getting really off-topic (unless they are highly amusing and don't derail the discussion) or devolve into unhelpful company-bashing I will delete them. There are a lot of really smart, talented people out there that work on software that <i>know</i> that the UI for their software is confusing and desperately wish it would get changed (at the very least, so they can stop doing tech support for everyone in their extended family). Many of them have probably feel <a href="http://ogun.stanford.edu/~bnayfeh/plan.html" target="_blank">just as powerless as you do</a> and have some great ideas I would like to hear. I would like to be involved in more UI design reviews and beta tests to help improve UI out there before users have to suffer through it. As much as I approach <i>breaking</i> UI in the spirit of an evil scientist (<a href="http://www.imdb.com/title/tt0379786/quotes" target="_blank">I aim to misbehave</a>), <i>making cool things</i> is even better.<br />
<br />
The kind of testing I intend to do is explained in this post: <a href="http://uibehavingbadly.blogspot.com/2013/09/blog-focus-and-what-i-test.html" target="_blank">Exploring, Problem-Solving, and Looking for Trouble</a>.</div>
</div>
Anonymoushttp://www.blogger.com/profile/05807982120599552120noreply@blogger.com0tag:blogger.com,1999:blog-306789073848264730.post-15666394827589168282013-09-20T18:24:00.001-07:002013-10-10T18:06:10.570-07:00Exploring, Problem Solving, and Looking for TroubleHere I discuss <strike>briefly</strike> the kinds of testing I plan on doing for this blog and ones you could not pay me enough to do.<br />
<br />
<h2>
<div id="exploring">
Exploring</div>
</h2>
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 <i>what it does</i> and if they can do things with it that<i> they will find useful</i>. 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.)<br />
<br />
Some companies do a reasonable job of <a href="http://en.wikipedia.org/wiki/Usability_testing" target="_blank">usability testing</a>; 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 <i>trying</i> to do or <i>expecting</i> 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 <b>early</b> stages of the design process when the companies are capable of making significant changes based on the feedback they get from customers.<br />
<br />
(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 <i>very good question</i>. A friend once said to me something along the lines of, "Only people who <i>don't</i> work in software think that the things that happen in the <a href="http://www.dilbert.com/" target="_blank">Dilbert</a> comic are ridiculous, and could never happen," which I think is very apt. <b>Topic: The posting of Dilbert comics at software development companies as a form of passive-aggressive behavior: discuss!</b>)<br />
<br />
<br />
<a name='more'></a><br />
<br />
Exploring is the basic form of testing that I will often do on this blog for applications I have never used before or for applications that I think confuse the user early on (once I get the hang of of the application and try to customize them for my use I often end up in "problem solving" mode, below). Of course how users explore an application is going to vary widely. If I don't know anything about the application I am going to see if I can figure it out by looking at visual clues and menu items. If the application allows me to make something I will try to make a basic form/document/spreadsheet/project (<a href="http://en.wikipedia.org/wiki/Hello_world_program" target="_blank">Hello world!</a>) from start to finish (an easy form of <a href="http://www.techopedia.com/definition/7035/end-to-end-test" target="_blank">end-to-end testing</a>) and see if it "works" (whatever that means in the context of the application). (You would think that this type of testing would be done occasionally on every product and after every new build of a product, but based on many of the server errors I have seen I can guarantee that this is not the case.)<br />
<br />
As soon as I know what the application is basically doing I start to build a map in my head for what features I expect it to have (of course how much the application costs factors into this) and try to figure out if the application can do what I want it to do ("I WILL BEND THIS APP TO DO MY WILL <evil laugh>"). If the application is free then I will be looking for clues about what the differences are between the free and paid versions (I don't want to spend a lot of time on something and then realize that the free version doesn't allow me to save my work, for example). Perhaps I want something quick and easy to use but don't care if it has all of the features of a desktop application. Perhaps this app is useless to me if I can't customize it by changing the order of items, creating categories, changing colors, etc. As many other users are, I am looking at how useful the app is to me compared to the cost in money and time.<br />
<br />
I consider myself pretty good at finding places where people will get confused whether I am familiar with the software or not, so I am willing to be a test subject ("guinea pig") for looking at software and blogging about it. I am <i>just barely</i> arrogant enough to think that if <i>I</i> can't figure out how to use your application on my first try then <u>the application</u><u> is more at fault than I am</u> and is going to confuse many other people the first time they try to use it in the same way. (I consider my approval <i>necessary</i> but not <i>sufficient</i>.)<br />
<br />
<h2>
<div id="problem_solving">
Problem Solving</div>
</h2>
Sometimes I have used an application before but decide to try to do something slightly different with it. If the new task is really easy and works about how I expect it to, then I'm done (if the UI surprises me because it is even easier and cooler than I expect then I may give it a shout out someday). However, if I am having trouble figuring out if the application <i>can</i> do what I want, or <i>how</i> to do it, then I usually jump into problem solving mode. I have a specific task I am trying to achieve -- not trying to explore features or break the UI, at least <i><b>not on purpose</b></i> (The title of the great movie <a href="http://www.imdb.com/title/tt0094606/" target="_blank">The Accidental Tourist</a> is now running through my mind). Now that I have a blog, I will try to document all of the ways I try to accomplish my task (and what is going through my mind at the time) before I am successful or give up. Consider it an informal kind of <a href="http://en.wikipedia.org/wiki/Usability_testing" target="_blank">usability testing</a> where I get to pick my own set of tasks. I find a lot of UI bugs this way.<br />
<br />
<h2>
<div id="looking_for_trouble">
Looking for Trouble
</div>
</h2>
"Looking for trouble" is a term I am <a href="http://www.worldofmunchkin.com/munchkinquest/lookingfortrouble/" target="_blank">hijacking</a> to explain a type of testing that is my specialty on products that I actually work on. When I look for trouble I try to think about what things <i>could</i> go wrong and see if I <i>can</i> break the UI by trying them singly or in inventive combinations. I am naturally really good at this but haven't had much luck teaching other people this skill (which is why I joke about it being a minor superpower a.k.a. <i>minor</i>power). I think being good at looking for trouble requires a certain amount of creativity, attention to detail, stubbornness, a mischievous spirit, and at least some basic software engineering knowledge (it helps to understand what <a href="http://en.wikipedia.org/wiki/Edge_case" target="_blank">edge cases</a> are, how easy it can be to end up with an <a href="http://en.wikipedia.org/wiki/Off-by-one_error" target="_blank">off by one</a> error, and what happens when values are <a href="http://www.cs.fsu.edu/~myers/c++/notes/references.html" target="_blank">passed by reference or by value</a>). Most companies don't specifically <i>assign</i> someone to do this, or don't have a <i>minor</i>hero like me on staff or as a friendly neighborhood beta tester. In my opinion that is one of the reasons they make obvious glaring UI mistakes.<br />
<br />
I don't expect to use this type of testing much on this blog because I don't usually have to look for trouble -- <i>trouble finds me</i> (usually when I am "problem solving", described above). I am usually trying to use an application, innocently minding my own business, and run into a mire that makes it impossible to complete my task (at least without feeling like I am trying to navigate an obstacle course), at least in the way I had hoped. I know that I have amazing powers when it comes to breaking UI, but <u>make me <i>work</i> for it people</u>! I think that if this type of testing occasionally before the application was released to customers that the release application would provide a much better user experience. Surely there is a way to reward software developers for finding these bugs without encouraging software developers to <a href="http://dilbert.com/strips/comic/1995-11-13/" target="_blank">write themselves a minivan</a>.<br />
<br />
<h2>
Other Black Box Testing</h2>
I doubt I'm going to give any part of an application a thorough <a href="http://en.wikipedia.org/wiki/Black-box_testing" target="_blank">black box test</a> unless the product has such great, unrealized potential (because the UI is so frustrating) that I can't help myself. (On a <i>totally unrelated note</i> I have signed up to be a UI beta tester for Google. Wish me luck.) If I am spending a lot of time testing something even after it has seriously disappointed me, I will probably think of this as <b>"Please, please let this application work the way I want it to because all the other similar apps are worse"</b> testing, although I don't expect that name to catch on. However if someone asks me politely for help and I feel like they will actually make changes based on my suggestions I am a total sucker -- but don't tell anyone.<br />
<br />
<h2>
Some Words About White Box Testing</h2>
Obviously since I do not work on any of the applications I expect to test, I can't perform <a href="http://en.wikipedia.org/wiki/White-box_testing" target="_blank">white box testing</a> on them. However, I have some words.<br />
<br />
Every software engineer should have a solid understanding of the <a href="http://www.softwaretestinghelp.com/types-of-software-testing/" target="_blank">different types of testing</a> even if they haven't performed all of those kinds of tests themselves. If someone tells you that they are a software engineer but claims that they do not spend any time testing then you should mentally add quotes to their title (e.g. "software engineer"). There are many kinds of white box testing such as unit tests, functional tests, etc. that I have done and will gleefully do again whenever I make code changes or as otherwise needed. Good times.<br />
<br />
However, there are a lot other kinds of white box testing that are required when you are dealing with large-scale and high-availability web applications that I have no practical experience with. It is very difficult to really learn how to do that type of testing, or have the resources you need to do it for a large web application, except <i>after</i> being hired as a tester and learning on the job. I have no desire to ever do that sort of testing (you couldn't pay me enough to do it), but I'm glad there are a lot of competent people out there working on that so I don't have to.<br />
<br />
I am very grateful that there are software engineers that specialize in testing out there that know how to make sure large scale applications don't break when millions of users try to use them at once. They make sure that when I click "send" or "enter" on a high-traffic site that something happens in a reasonable amount of time. They make sure my data is secure when I enter personal information on a website. They try to protect websites from a constantly evolving set of attackers. They get very little credit when things go right and lots of blame when things go wrong (sort of like air-traffic controllers - one of the jobs I would <i>least</i> like to have). So I just want to take a brief opportunity to say, <b>"Yay, white box testers!"</b>Anonymoushttp://www.blogger.com/profile/05807982120599552120noreply@blogger.com2tag:blogger.com,1999:blog-306789073848264730.post-79370613402055666122013-09-19T14:48:00.001-07:002013-10-10T18:05:52.483-07:00Introduction: I break UIIf I could pick any superpower right now, it would probably be <i><a href="http://heroeswiki.com/Adoptive_muscle_memory">copy cat</a></i> from the TV series <i><a href="http://www.imdb.com/title/tt0813715/?ref_=sr_1">Heroes</a></i>. I watch someone do something and I can instantly do it. <a href="http://en.wikipedia.org/wiki/Firefly_(TV_series)" target="_blank">Shiny</a>! 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 <i>minor</i>powers that could be fun (as far as I am concerned, people who can remember other people's names easily are slightly superhuman).<br />
<br />
I would not have chosen my power to be<i> breaking user interfaces</i>.<br />
<br />
<br />
<a name='more'></a><br />
<br />
Hardly seems like a power at all, right? After all, pretty much everyone has had trouble using a user interface (UI) at some point. You feel like there is something you should be able to do with an application but can't find it, or you get an error that doesn't make any sense. You spend several minutes trying to figure it out -- no dice. You look in the help menu (usually useless). Perhaps you <a href="http://xkcd.com/627/" target="_blank">ask someone you know</a>.<br />
<br />
If you are minimally tech savvy, you do a search online or post a question to a website that seems relevant. If you are lucky, there is a blog post somewhere that explains how to do the task you are trying to do. Then you look up all of the steps in that blog post that you don't have the background to understand, and try to figure out what you actually need to do to make it work for you. Often, you find nothing helpful, or the sad cries of other users who have appealed to those same relevant websites, whose orphaned questions have gone unanswered. If UI is hard for so many to use, how can "breaking it" be a talent?<br />
<br />
<i>I break it more easily and thoroughly than anyone else that I've ever met.</i><br />
<br />
Like many people with special gifts, it took me awhile to fully understand and appreciate my powers. My first software development job was for <a href="http://en.wikipedia.org/wiki/LogicTools" target="_blank">LogicTools</a>, which was a relatively new company and had only 3 developers at the time. Because it was such a small company and the other two developers had other specialties that they found more interesting, I got to make just about all of the UI changes for their products for several years, which can be substantial for a relatively new product. Handing this responsibility over to someone who had just finished their first year as a computer science student could have gone really, really badly, but I did an amazing job and helped promote the success of the company. When I first started, I started mucking around with the current unreleased build of the software just to get a feel for it. And broke the UI many, many times. And learned to fix the UI. And found more ways the UI was broken. And fixed the UI. I found lots of way to import bad data. I created a database integrity checker that found bad data that previous builds of the product allowed. Then I fixed the database so the bad data couldn't get in. My ability to do what I think I have always called "<a href="http://uibehavingbadly.blogspot.com/2013/09/blog-focus-and-what-i-test.html#looking_for_trouble" target="_blank">looking for trouble</a>" was legendary. This is when I first started to suspect that I had powers beyond the norm. When I started having trouble finding ways to break the UI, I created a set of manual QA tests that applied to each form in the product (I wish I'd known how to automate that at the time) and found several more nit-picky bugs in the UI to fix. Then I passed these tests off to the <strike>helpless slaves</strike> interns to do, so I could continue creating new stuff. Of course I continued to test my code and continued to look for trouble to help catch bugs in other folk's code. I was apparently the first person to tell <a href="http://www.mapinfo.com/" target="_blank">MapInfo</a> that their maps didn't include Turkey and Cuba (FYI Europe looks really, really strange without Turkey). I started to think, "Hey, I have an actual talent for finding UI bugs and designing UI that is easy to use."<br />
<br />
Well, circumstances changed and I ended up moving to California with my husband. It took me a while to find a job (hint: do NOT move to a new state and try to get a job a few months after <a href="http://en.wikipedia.org/wiki/September_11_attacks" target="_blank">9/11</a>). However, I finally got a cool job at <a href="http://en.wikipedia.org/wiki/Triconex" target="_blank">Triconex</a>, which creates software that ends up in nuclear power plants, so it has really high standards for its hardware and software and doesn't make changes lightly. I don't think I created very much UI for Triconex (except a really cool test harness in .NET for something that was later scrapped), but I started out as the tester for (and kind of became the project manager for) a diagnostic tool that was originally just an internal tool. As you can expect with something that was previously an internal tool, I found A LOT of trouble. I hate to say it, but I do sometimes create bugs and am embarrassed when someone else finds them first. Perhaps this is why I do such a good job of testing my own code. However, I am <i><b>thankful</b></i> when someone catches a bug and brings it to my attention. I consider that the testers, customers, developers, etc. are working together to make the product great. I think if everyone <i><b>else</b></i> had the same attitude, the world would be a marginally better place. 'Nuff said.<br />
<br />
I worked for several years writing technical documentation for Microsoft, but even though I worked there, I felt like just another <a href="http://dilbert.com/strips/comic/1995-04-10/" target="_blank">whiny customer</a> when it comes to making UI suggestions. If Microsoft ever hires me as a UI consultant AND listens to me (never gonna happen), I think the world will be a significantly better place, at least for anyone who uses Microsoft products.<br />
(Aside: Just to clarify -- I am not anti-Microsoft. Overall Microsoft products are pretty solid because they are able to bring a huge amount of automated testing to bear. However, automated testing cannot tell you if the UI is easy to use and if you are creating the right software in the first place. I <i>used to</i> love many of their products and have hope they will someday return to the good side of the force.)<br />
<br />
Ok, so I have a lot of experience breaking UI without even counting the bonus of having a last name (O'Madadhain) that breaks many applications and databases for free. (I mean, seriously, are websites supposed to be able to deal with weirdos with strange characters <a href="http://xkcd.com/327/" target="_blank">like apostrophes in their name</a> without having server errors? The nerve!) I have been trying to use my <i>minor</i>power to help the world one application at a time, but I think a change of tactics is needed. Believe me, I have gone out of my way to create clear, concise, repeatable, and helpful UI bugs and suggestions to companies the world over without noticing results. I'm hoping that this blog will help me convince companies to fix and improve their UI. Along the way I hope to learn more about web UI design and tools. I don't have great expectations that companies are going to <i>fix</i> these problems based on my past experiences, but I <i>really</i> hope I'm wrong and I'm used to being a customer advocate anyway.<br />
<br />
I have never had a blog before and I know I'll probably make many newbie mistakes but, "<a href="http://www.goodreads.com/quotes/128452-better-to-do-something-imperfectly-than-to-do-nothing-flawlessly" target="_blank">it's better to do something imperfectly than do nothing flawlessly</a>." Anonymoushttp://www.blogger.com/profile/05807982120599552120noreply@blogger.com0