Poor user experience design at CapitalOne

During the past few years, the financial institution CapitalOne hinted at the importance they give to design, through the acquisition of design companies Adaptive Path in 2014 and Monsoon in 2015.

My guess is that they’ve been focusing their efforts on the recently-released CapitalOne mobile app, which I have to say reflects some wonderful design work.

My hope is that in the future, they’ll turn their attention to the website, which still suffers some usability problems like the following.

Curious whether my credit card auto-pay is properly configured, I visited the CapitalOne.com website today, and clicked on “Manage Auto-Pay”. Here’s where that led:

I was almost certain that I already had auto-pay setup, but it looks like I don’t. In that case, let’s click “Get Started” to set it up…

The red alert—cognitively communicating that I did something wrong and, furthermore, am attempting to do something disallowed (adding more than one AutoPay to an account)—reveals that in fact I did already have auto-pay setup, and so all my confusion and frustration was unnecessary.

UI/UX — MONEY Magazine takes a big step backwards in user-experience on the iPad, and so I’ve unsubscribed.

Previously, MONEY Magazine attempted to deliver a version of their magazine for the iPad that reflected an understanding of how text is best read on such devices, and attempted to take advantage of user interactivity.

For example, It was possible to navigate an edition’s content via pull-up menus on the leader screen of each of the magazine’s four main departments:

And article text was presented in a single, scrollable column:

This all made for an effective and efficient reading experience, in the context of the iPad.

Unfortunately, in the latest issue, MONEY has gone back five years in time, and moved to the unusable approach of presenting the magazine on the iPad as a direct replication of the physical magazine. Articles are presented in magazine-style tiny columns that can hardly be read without pinch-zooming, and—incredibly—there’s not even a way to directly navigate the content.

I can only imagine that this was done in the interest of saving on production costs, but at least in my case, MONEY has shot themselves in the foot — as I just canceled my subscription.

What happened to UI/UX design at Garmin?

From the design of recent Garmin products, I’m guessing they fired their UI/UX team and delegated this activity to overseas outsourcing or something. To understand where I’m coming from with that sentiment, let’s fire up the new Garmin Express for Mac app and take a look.

At launch, you’re presented with this distinctly non-Mac, way-too-tall yet unresizable window (it’s long, so be sure to keep scrolling):

The design of this window, and importance given to the “Add” action, suggests that Garmin believes the average customer owns several devices, and adds them frequently. I have only one device, so this screen just slows me down. Let’s click “Forerunner 910XT”.

I’m comfortably reassured that my device is syncing my queue—as opposed to, say, someone else’s queue.

And thinking about it, I have no idea what other activities could happen here in parallel that would even justify the use of the word “queue”. Perhaps it’s related to the assumption that I’m using multiple devices? Is the expectation that I would typically arrive to my desk with an armful of Garmin products needing to be synced? Anyway…

Syncing is now complete, and we see that my queue was last synced “@ 7:16 AM”. The slight cognitive load of having to interpret the symbol “@” is presumably justified by the saving of one character on the screen compared to just writing out the word “at”.

And although I last synced “Today” @ 7:16am (capitalized, of course, because Today is special), it appears that I last “checked” @ 7:12am—an unexplained discrepancy that, if nothing else, serves to conclude the sync workflow leaving me feeling slightly uneasy.

Now let’s go visit the Garmin Connect website, where my data has been sent.

The Connect website presents me with an environment of multiple “dashboards”, each containing multiple informational “cards”—configuration and flexibility taken to the extreme.

I’ve created a new “untitled” dashboard, so let’s go see if we can figure out how to add some cards to it.

Well, it’s not done by clicking the dropdown menu to the right of “untitled”. That’s for renaming and deleting the dashboard.

And it’s not done by clicking the “plus” icon to the right of the screen; that adds an entirely new dashboard.

What about that hamburger menu control on the left? If we hover over that, a menu slides open exposing three gray-colored, and unfortunately unlabeled, icons.

Since I’ve otherwise run out of things to click on, I’m expecting that surely one of these options allows adding of dashboard cards. But clicking each in succession, I unfortunately discover that’s not the case.

I’m guessing at this point most people would give up—but I’m a product guy dammit and I know there has to be some way add cards to this new dashboard!

In a frustrated flurry of clicking, I finally crack it — It turns out that the hamburger menu control icon has a double function! If, after hovering over it, you actually click the menu control icon itself, a sub-menu appears containing a list of cards that can be added to the dashboard!

So here we have a hamburger icon that, on hover, triggers the opening of a slide-out menu—a common UI pattern we’ve all become accustomed to nowadays from mobile apps. Inside this menu, we find three gray-colored icons—visually communicating access to three functionalities. But in reality, although it’s visually hidden, this menu area actually provides access to four! And rather than simply adding a fourth gray-colored menu item, the designer of this interface chose to hide the fourth, perhaps most important, functionality behind the menu control icon itself.

So confusing, so illogical, so undiscoverable—it’s honestly quite difficult to imagine how one could even come up with that. But on reflection, perhaps it’s not so surprising coming from a designer who would abbreviate “at” with “@” elsewhere in the interface. In any case, this is a prime example of the deterioration of design at Garmin. And for a company that’s likely to find it increasingly harder to compete on hardware, software design is pretty much all they have left!

UI/UX — Discovery flow in the new commenting feature at Dropbox

Dropbox emailed a few days ago announcing that they’ve added commenting, in support of better collaboration. I first came across this feature today, when accessing a file someone sent me.

Taking a look at how this works, we’ll discover some UI flow problems:

As this is my first experience with the commenting feature in Dropbox, I need to figure out how it works. My path to understanding will naturally flow from top to bottom, and will be influenced by the relative prominence of its elements in the UI.

Below the hero icon, I land on the most prominent text in the UI—that text which explains what I need to do to ensure my comment reaches a recipient via notification. According to the text, I would need to @mention the intended recipient.

Post a comment to start a discussion. @Mention someone to notify them.

The most likely intended recipient is the person who sent me the file. I know his name is “George”, but I have no idea what his @dropbox handle is. So I try @George, and nothing appears. I click the person icon to the right, type in “George” there, and again, no hits. At this point, I’m confused; I know I need to @mention George, but I don’t know how.

I then notice some very small text below the comment field. I don’t actually read it, though, because my attention is drawn to the linked “1 person” words. Hovering over those words, the name “George” appears, but in long-form and not actionable.

At this point, I still have no idea how to mention George in my comment, and I’m about ready to give up. But then I finally take the time to read the entirety of the small text:

Comments will notify 1 person.

Ah-ha, so that’s how it works—you don’t need to explicitly mention the sender; The @mention feature is only relevant for notifying people other than the sender!

All of this confusion could have been avoided, if the UI designer at Dropbox had anticipated the new-user discovery flow, and would have considered the prominence of text as relates to the communication of the relative importance of the functionality.

In this case, the prominent text above needs to indicate that the @mention feature isn’t required to notify the sender.

User interface review of the new and improved Securitas Alarm.

A few weeks ago, a Securitas salesman popped into the office, offering deep discounts should we be interested in upgrading our three-year-old alarm system. Given three years of technological advances, my expectations were high, and Securitas certainly delivered. In addition to the old features, we’ve now got magnets on the entrances, and their latest, easy-to-use alarm panel — which you’ll have to see to believe. Continue reading User interface review of the new and improved Securitas Alarm.