A Good UI Design Implemented Badly

Screen shot of Photo Tool from travel.state.gov

The U. S. Department of State maintains a website (travel.state.gov) that provides information about passports and international travel for U. S. citizens. If you go to the page for Passport Photo Requirements you'll find a link to a Photo Tool that can be used to crop and size a photo to meet passport application requirements. Using this page, I was able to quickly and easily create a jpeg file sized to make the 2" x 2" print required for a passport application. After using this nifty tool, I wanted to give the web page kudos as an example of good user interface design. Then I realized there are a few problems.

This nice UI design concept has been implemented using Adobe Flash. That means the Photo Tool won't work on most tablets and smart phones -- devices that are likely to contain images that might be suitable for use as passport photos. In order to be successful, a website like this needs to keep the user's needs in mind at every stage.  If it's likely that people will want to use a website on a device that doesn't support Flash, then that should be taken into account from initial design to final implementation.

The Photo Tool also provides an example of how a good UI design concept can be undermined by incomplete implementation. If you look at the screenshot at the beginning of this article, you'll see that there's a help button on the left. This expands when clicked to display a scrollable message, as shown below.

Pop-Out Message Pane

The help button is easy to find and use. However, the help message itself seems to have space for some illustrations that have gone missing. When scrolling through the entire help message (shown to the left), you can see that the UI designer most likely intended to show examples of (a) head sized correctly, (b) head too small, and (c) head too large.

Illustrations here would indeed be helpful, especially if they included graphical symbols to further convey "correct" vs. "incorrect." It may be that the illustrations were not included due to an oversight, or it may be that they're not being displayed due to some technical problem. In either case, this is the kind of problem that QA testing should detect. However, in order to catch such problems, the QA testing needs to simulate likely end-user behavior, and all parts of the design, including help messages, must be complete before final testing.

Even so, a website that's user friendly when it's launched doesn't always stay that way. As technology changes, what worked last year may not work this year. As users adapt to new technologies, their experiences and expectations change. To be successful, then, as website like this also needs to be monitored. Good analytics can often reveal problems or new trends, signaling a need for action. End users also can help you know when changes are needed -- if you let them.

Although the webpage for the Photo Tool has no links for user feedback, it's parent page (Passport Photo Examples) has "Contact Us" links at the top and the bottom of the page. The link at the top leads to a page providing categories for contact, and the link for "Website Problem or Suggestion" leads to a well-designed feedback form. However, the other "Contact Us" link takes the user down a different path from which there's no obvious way to provide feedback on the website.

(Post edited on March 8, 2014 to improve clarity.)

Addendum - March 8, 2014

Website development, like all software development, requires tradeoff decisions. Given a choice between having the Photo Tool work only on Flash capable devices vs. not having it at all, I'd obviously choose the former. I liked using the Photo Tool and I was glad to have it available. Indeed, I originally planned to write an entirely positive post citing the Photo Tool as an example of good UI design. Taking a closer look, however, I was reminded of an important point:  Usability involves more than good UI design.

The Asymmetric Internet

As the Internet was opened to commercial use in the 1990s, access became available to people outside of academic and research organizations. Various companies -- large and small, local and national -- began to offer dial-up access to the Internet for people who wanted to exchange information by such methods as email, newsgroups, file sharing and online chat. This information sharing typically involved a mix of "upstream" and "downstream" data transfer between users and ISPs. For example, when user A sent user B an email message, information went upstream to A's ISP (X), across the Internet to B's ISP (Y), and then downstream to B. When user B sent an email reply, information was sent in the opposite direction.

The dial-up connections that people used to share information across the Internet in this way were symmetric, in that they were able to transmit data between the user and their ISP both upstream and downstream with equal facility. The same was true for the higher-speed telecom connections between IPSs. In the early days of the Internet, these symmetric connections were intended to facilitate long-distance collaborations in which the various participants all had information and ideas to share.

As the Internet grew and evolved, people began to feel constrained by the data transfer speeds of dial-up connections. As DSL and cable connections became available, they were rapidly adopted by those seeking greater bandwidth. These new technologies were deployed, in most cases, to provide higher data rates downstream than upstream, making them different from the telecom connections that had previously been used for Internet connections.

Today we have an Internet over which a small number of "content providers" send large amounts of data downstream to end users. Is this a natural evolution to which technology has adapted, or has the technology itself produced this result?

I understand that certain kinds of content are easier to consume than to produce, leading to a natural asymmetry in the proportion of writers to readers, performers to audience, etc. However, the skills and talents required to produce good content are, I believe, distributed around the globe. Furthermore, the kind of data that can be carried by the Internet can be used for many purposes. So my questions are these: If we had an Internet that gave us all a high-speed connection both upstream and downstream, would the way we use the Internet change? Would the Internet be used for two-way communication and collaboration more than it is today? Would more good writing, good photography, good music, good video, good ideas be available to us? Would innovators be stimulated to create new technologies and new applications?

Why do we have an asymmetric Internet? Is what we get based on what we want, or is what we seem to want based on what we get?

Google Custom Search Engines

Google provides tools for creating a Customized Search Engine (CSE) that can be embedded in blogs and other websites to provide specialized searches. In this blog, for example, I might wish to provide an Astronomy search that would respond to a query for "tadpole" with a list of web pages providing information about the galaxy by that that rather than web pages about immature frogs.

Blogger has a Search Box gadget that can be configured to search over a list of links, such as the Space Exploration links listed on the side panel of this blog. I could use that to create a search that would query only the websites in the list, and this might give the kind of results I wanted in most cases. If I wanted to have a search feature like this within a post rather than on the sidebar, I could do that quickly and easily by visiting the webpage for Google's on-the-fly CSE to find code that I can add to my posting using the HTML editor.

The Blogger search box and the on-the-fly CSE are both limited to searching linked sites. With a little more effort, it's possible to create a CSE that is more finely tuned. Using Google's CSE wizard lets you create a gadget that you can embed using an automatically generated code snippet. You can later manage your CSE, editing and refining as you gain experience with its workings. Using this method, I've created a CSE for an Astronomy search and provided a gadget below that you can use to try that CSE. I haven't yet gone much beyond what the wizard creates, so you may or may not find the kind of information you're looking for. To see how it works, try searching on "tadpole," "egg," and "mice" -- and have fun comparing the orange links returned by the CSE with the sponsored links that appear above and to the right of those.

Searching Google+

When a Google+ post is public, that post is available on the Internet for anyone to see.  This allows public posts and their comments to be found using a search engine.

Suppose Ann Able adds a comment about Yosemite Falls to a post that Bob Baker puts on Google+ asking about places to hike and camp in California.  Later on Ann wants to find that comment.  If Ann remembers it was Bob who made the post, she can go into Bob's profile and look through his posts until she finds the one that includes her comment.  But suppose Ann doesn't remember who made the original post -- is there a way she can search Google+ to find her comment?  Yes there is, provided that Bob's post was public.  Using the Google search engine, Ann can enter a query that looks like this:

site:plus.google.com "Ann Able" "Yosemite Falls"

This will result in a search across all public posts on Google+ for those that include Ann's name and the keywords she provided.  The search results will show a list of all the public posts and profile pages (a) that people named Ann Able have created, commented on or shared, and (b) that also include the phrase "Yosemite Falls."  If that's a short list, Ann should be able to find her comment easily.

This same technique can be used to search for public posts and comments on a specific topic.  For example, if Ann is interested in what people are saying in public posts on Google+ about earthquakes, she might use the search query:

site:plus.google.com "earthquake"

Going back to the original example, suppose Ann wants to look at all the comments she's made on Bob's public posts.  So she tries this:

site:plus.google.com "Ann Able" "Bob Baker"

This gives her a listing of all posts and profile pages throughout Google+ that somewhere include the names Ann Able and Bob Baker.  Suppose this turns out to be a long list, in part because there are other people named Ann Able and Bob Baker.  Ann can narrow her search to the posts and profile page of the Bob Baker she knows by using Bob's ID number rather than his name.  To find that number, Ann need only look at the URL for any of Bob's posts or Bob's profile page; the ID number appears in the URL immediately after https://plus.google.com/.

For understandable reasons, these techniques only work for public posts.  Posts that are shared on a limited basis cannot be found in this way, even by those with whom the post was shared.  In the future, Google may provide a way for Google+ users to search both the public and the private posts that have entered their stream, or all the posts they have made, or all the posts they have commented on.  At this time, however, I'm not aware of any way to do these things.

Savvy Google Searching -- and Beyond

In much of life, what you find depends not only on where you search but also on how you search.  This is certainly true when using Google to search the Internet.  Choosing your keywords and hitting the search button is the first step to finding the information you seek.  If it's also your last step, you may be overlooking features that can greatly improve your search experience.  Next time you do a search, check out the left-hand panel that appears with the search results.  Finding information that's outdated?  Try clicking on "Past year" or "Past month" or whatever time frame fits your search best.  Not finding quite what you wanted?  Try checking out "Related searches."  When planning a vacation, try changing your location to the city you plan to visit before you start searching for restaurants, hotels, events, etc.  I'm not going to give detailed instructions and screen shots.  The left-panel features of Google search are pretty intuitive, so it will be quicker and easier for you to just try them out.

Those who'd like to become Google power searchers, might want to check out Google's search features and then work through some master lessons on search.  If you've got a specific question about Google search, the help pages can be helpful.  And finally, if you're a webmaster, you'll want to keep track of how the pages in your site are ranked by Google.  Page Rank Checker is a convenient way to do that.

Beyond Google Search

There's useful information on the Word Wide Web that can't be found using conventional search engines.  At MakeUseOf, Saikat Basu reviews some alternative methods in 10 Search Engines to Explore the Invisible Web.  Most of the resources described are not what I'd consider search engines, but they are definitely worth knowing about.

Pseudonymous Blogging

In my last post, I mentioned pseudonymous blogging.  Boing Boing! has an article by Maggie Koerth-Baker on Pseudonyms and Science.  It provides a thoughtful and concise explanation of why pseudonyms make sense for certain kinds of blogging.  The article also provides links to further discussions of pseudonyms on the Internet.

Writing under a pseudonym was not invented with the Internet.  The custom of "pen names" is well-established.  I am entirely comfortable with Lewis Carroll, Andre Norton, George Eliot, and Mark Twain.  What I fail to understand is why pseudonymous blogging on the Internet is considered by some to be inappropriate.  As far as I know, no one is being forced to read pseudonymous blogs, which is perhaps more than can be said of Tom Sawyer.