Brain damaged UI

In an earlier post, I described the difficulty of discovering options in a touch interface and the silliness of porting that problem to non-touch devices like laptops – and I suggested a solution.

That was a big, general problem, but there are also many small, specific UI glitches. Here are two, one from Apple and one from Microsoft to keep things even. Let's start with Apple.

I just “upgraded" iTunes for Windows. Before the upgrade, I saw a simple Refresh All button in the lower right corner of the screen. About once a week, I would launch iTunes, click that button and it downloaded the new episodes of the podcasts I subscribe to.

After the “upgrade,” the refresh button was gone and I did not see anything like it. I went to an Apple help forum, where, someone had asked about the same problem and learned that the refresh capability was still there, but one had to select the List tab then click on the unlabeled circular arrow in the upper left corner. Well hidden Apple!

Here's a UI glitch from Microsoft -- I put my Windows laptop into Sleep mode several times a day. To do so, I click on the Start button then slide the cursor over to click on the small arrow to the right of the Shut Down button, slide the cursor to the right and click on Sleep. That usually works, but since I am doing all of this with a trackpad and the arrow is small, I screw up and accidentally click Shut Down about once a month – wasting time and perhaps losing data.

Do some minor UI problems bug you? Let me know what they are in a comment.

From punch cards to CLUI to GUI to EEUI (Easter-egg user interface)

In the batch processing days, we punched operating system commands into IBM cards. When we moved on to time-sharing, we began typing commands on terminals and later on PCs -- the command-line user interface (CLUI).

While we were memorizing and typing commands, researchers at Xerox PARC were refining the work of people like Ivan Sutherland and Doug Engelbart and developing the modern graphical user interface (GUI).

We could not write GUI scripts, but we flocked to them because they did not tax our memory -- you no longer had to remember a list of commands or type help or man for a reference sheet, you just clicked on a pull-down menu or right-clicked your mouse and saw your choices. Icons like trash cans also helped us see and remember our options and we could also click on clearly-labeled tabs and buttons.

Being lazy and impatient, I liked GUIs.

When touch screen phones and tablets came along with relatively small screens, the space used for menus, icons and buttons was limited so we added a new twist to the GUI -- we hid most of the icons, buttons and menus. The good news is that the screen is uncluttered, but the bad news is that we are back to memorizing commands. We either study tutorial material or we fool around to stumble upon then memorize commands -- the Easter-egg user interface (EEUI).

I understand the motivation for the EEUI, but it is more difficult to learn than a GUI and is not needed on a laptop or desktop with a relatively large display. (Jakob Nielsen describes this usability tradeoff in this post on GUI "chrome").

This was driven home to me the other day, when I went to create an application using Zoho's database service, Creator. I had not created an application for some time, and the user interface had been changed, providing an example of an EEUI.

This is a screen shot of the program's uncluttered dashboard:

When you roll the cursor over a region on the screen, a menu appears giving three choices -- view, edit or delete the current form.

If you move the cursor to the left, the menu choices remain on the screen, but the cursor icon turns to a small hand, indicating that clicking will execute a command. (It activates the form design menu).

Finally, we see a horizontal-line icon, which indicates another hidden menu. This one is hard to see, but perhaps three horizontal lines is becoming known as an icon signifying a drop down menu.

To end on a positive note, I will offer a UI solution for the easter-egg problem: provide a simple, consistent way -- a voice command or gesture on a system with no keyboard -- to toggle between a chrome-free display and one that reveals all easter-egg commands, mode changes and cursor hot zones, as shown below. (This is analogous to a global right-click in a GUI).

Toggle: Easter-egg display off

Toggle: Easter-egg display on

User interface design -- fad or function?

Microsoft started with the flat Metro interface of Windows 8. Apple flattened iOS 7 and now Google has flattened their logo.

Is this based on human-computer interface research or is it style and fad? Years ago, I taught an HCI course in which we read about controlled studies in making user interface design choices. Google is said to be engineering driven, researching everything from the optimal number of seats at cafeteria tables to the number of pixels devoted to a particular icon on the screen.

But, I have the feeling that the rush to simple, flat user interfaces is driven by fad as much as function. My wife uses an iPhone and an iPad. She is probably a typical non-geek user -- using relatively few apps and features. Our daughter was all excited when iOS 7 came out -- she grabbed my wife's iPad and iPhone and installed it the next day.

After using iOS 7 for a few days my wife says she sees no advantage for her usage mix -- the only change is that she has to learn how to do what she always did in slightly different ways. She also likes 3-D buttons that are obviously clickable and give feedback when you click on them.

My wife thinks it is fad, not function and it reminds me of the Pantone's annual fashion color palette and their color of the year:

If these changes were driven by functional considerations, I'd love to see the old-fashioned HCI research that led to them. If not, fads tend to be cyclical, so we can look forward to a return to 3-D skeuomorphism in a few years. As you see below, the designers are already working on them.

(You can make your own goofy logos at http://createfunnylogo.com/).

-----

Update 9/29/2013

This child was even more upset than my wife with iOS 7:

NPR's interactive map tops election night coverage on the Internet

How did you watch the 2012 election results? I watched on my laptop. As shown below, there were several approaches to the coverage -- local TV stations holding hangouts, streaming TV coverage from ABC News, live tweeting by Andy Carvin (@acarvin) and an interactive map on the NPR Web site.

Which to watch? I tried them all and frankly found three to be boring.

ABC's coverage consisted of periodic local and national vote updates with "pundits" talking about what all meant.  I found it slow and much of it was irrelevant to me. Streaming linear TV online is liking making a movie by setting camera on a tripod and recording a stage play.  Old wine in a new bottle.

I found that Andy Carvin's tweets came in too slowly and, like ABC's stream, often concerned things I was not interested in. Carvin has been live tweeting events in the Middle East for a couple of years and is probably our best, most experienced live tweeter. (See his book Distant Witness). If he can't make live tweeting of election results work, the medium is probably not a good fit.

(Correction after posting -- I blew it -- Twitter was cool -- I should have followed more than Andy Carvin).

I found several hangouts in which a local TV reporter discussed the election with the public and found them boring and uninformative. I'd rather listen to pundits.

For me, the clear winner was NPR's interactive map. In retrospect, that is no surprise. The key is that it is interactive. Unlike the others, it let me be active, determining what I would see.

As shown below, the map page is divided into three sections. The largest is a map of the US. Above that is a graphic summary of the current state of the presidential, senate, house and gubernatorial races. Interactive results were displayed to the left of the map.

The summary at the top has small red, blue and gray spots -- red signifying a decided Republican victory, blue a decided Democratic victory and gray undecided. The bar below that summarized the state of the presidential election at that time.

The dark red and blue areas signify electoral votes won by the two candidates. The light red and blue areas signify likely electoral votes and the gray area in the middle votes that were too close to call. The image shown above was snapped Tuesday evening, when the race was close. By Wednesday morning, the summary showed that Obama had won the presidency, the Democrats controlled the Senate and the Republicans had retained control of the House and won a majority of the gubernatorial elections.

You could drill down by clicking on a state.  Below I clicked on California and the current vote counts in presidential, senate, house and gubernatorial elections were for the state were displayed to the left of the map.

One could drill down further. The results as of Wednesday morning for the House race in California's 30th District are shown below.

You could also check the tally of ballot initiatives for each state. California's are shown below.

I don't want to leave the impression that NPR was perfect.  The maps were poorly rendered and I had some quibbles with the user interface, but, for me, NPR's interactive map was the election coverage winner.  This reminded me of my comparison between the BBC and NBC coverage of the 2012 Olympic Games. BBC's coverage was more interactive than NBC's. NBC's was more like watching television. There is a general lesson here -- the Internet is an interactive medium. 

------


Added after posting

The NPR site is displaying data from the Associated Press.  I turns out that Google also presented the same data (http://bit.ly/Up9c0D) and it was also posted on the C-SPAN Web site (http://cs.pn/XnY58x).

NBC's innovative "Metro style" Olympic interface

There are many Olympic venues, so there may be several live streams, upcoming streams and streams of recently completed events at a given time. This wealth of choice presents a user interface problem -- how do you show the user what is available?

At first, NBC and the BBC offered different solutions. BBC displayed a scrolling menu with thumbnail impages, as shown below.

I liked that a lot better than NBC's menus, which were hard to find and mostly character oriented. I was ready to give kudos to BBC until the tenth day of the Olympics, when NBC changed their user interface to the one shown here:

It looks like a taller version of the BBC interface, but, what you cannot see here is that those small thumbnails are in fact video live-windows. NBC has brought a Microsoft Metro interface to the Web.

You can expect to see a lot more "Metro on the Web" after Microsoft ships windows 8 with its new Metro interface.

NBC has seemed a bit like an agile Internet startup during the olympics. First they improved their video streaming quality and now they have revamped the opening user interface for their online coverage -- another quick, significant improvement. Maybe someone at NBC has read Mark Zuckerberg's letter to investors on The Hacker Way.