Tag: User Experience

Overview

In the world of web application development, we sometimes face technical decisions whose trade-offs extend beyond the technical. Those non-technical trade-offs can be subtle, and perhaps difficult to identify, yet critical to the business.

In this article, I want to highlight as an example my experience with the TransferWise payment system, in which technical decisions ultimately work contrary the core of the product.

Background

In the early days of web applications, browsers like Firefox and Safari could only render web pages whose contents were structured in HTML and possibly styled with CSS. Any “logic” that formed part of the application had to be executed on the server.

Whenever you clicked a link on a screen, you’d experience a page refresh as the browser sent the request data back to the server, waited for the server to perform any necessary checks and calculations related to the request, and then your browser would display the HTML/CSS that was returned by the server.

So in those days, your browser only displayed things; any “thinking” happened on the server.

Time progressed, and browsers gained the ability to execute JavaScript software, thereby opening the door to implementing “logic” that gets executed within the browser client itself.

One of the most common first uses was in signup forms, as the browser could check that your entered-twice passwords matched, without requiring a page refresh and request to the server application.

Things got even more sophisticated when the browser could make a server request that’s transparent to the user. You’ve probably seen that when entering your username in a signup form, seeing a small spinner appear to the right, followed by a green checkbox informing you that, “Yeah, that username is still available!”

As “front-end” technologies continued to evolve over the years, we’ve gotten to the point where entire web applications are implemented in JavaScript, and run within the browser.

So, today, a fundamental decision to be taken by a developer when he or she implements a web application is:

Should I implement this logic on the server, or in the client?

The argument I want to make in this article, is that often this decision should be taken by the organization, and not simply left to designers and developers.

Context is everything

The benefit of using client-side logic is generally a smooth and seamless user experience, since the user doesn’t have to wait for page refreshes. The trade-off, however, is the risk of bugs in the user interface, since the JavaScript and rendering engines between different browser (and even different versions of the same browser!) can vary considerably.

There are some application contexts in which the risk of interface bugs is compensated by the value of a seamless and interactive user interface:

For example, if you’re developing a fast-paced interactive game, it could well make sense, in the interest of a smooth user experience, to implement the entire product as a client-side application.

Or let’s say you’re implementing product that’s likely to be used by your customers several times daily. In that case, saving a few screen refreshes might materially improve the experience when compounded daily over the period of an entire year.

At the same time, there are some application contexts in which a seamless user interface does not compensate the risk of exposing the user to interface bugs. And, here, I want to highlight an example of a company that has absolutely taken the wrong decision in this regard.

Disruption of an industry

In the past, it was terribly expensive for me to pay European contractors from my American company. First, the transfer itself would cost about $30. But then, I’d lose over 3% with respect to the market rate when the bank would convert my USD source funds to the destination currency of Euro.

TransferWise completely disrupted the market of moving and transferring money internationally, charging a fraction of what banks charge. They do this by taking advantage of volume to avoid even having to make transfers, i.e. if Customer A in the US transfers $100 to someone in Europe, and Customer B in Europe transfers the equivalent of $100 to the US, TransferWise can make the two transfers happen simply through off-setting accounting entries, using Customer A’s money to pay Customer B’s recipient, and vice versa.

What is the TransferWise product?

So what is the TransferWise “product”? If you ask me, it’s the saving of tremendous time and costs when making an international transfer.

And here’s where TransferWise have really messed up. They additionally view their “product” as the experience of making a transfer, and from a front-end technology perspective, they have decided that a slick user interface compensates the risks of exposing their user to bugs associated with the heavy use of front-end technologies.

To be specific: The process of making a transfer with TransferWise involves five steps:

You specify the source and destination currencies, and the amount to be transferred.

You choose who is sending the money (in case you happen to have both a personal and business profile on record).

You choose a recipient from a list of existing contacts, or create a new one.

You choose how you’ll get the money to TransferWise, e.g. through an ACH or wire transfer from your bank.

You review the transaction, and confirm if everything looks good.

Looks simple enough, but there’s quite some logic that has to happen:

You have to compute the amount of the conversion from the source to destination currency, based on the current rate.

You have to alert the user in case that rate expires during the process of setting up the transaction (i.e. if they take too long.)

You potentially have to walk the user through the “new contact” workflow.

You have to flag the user if the chosen receipt doesn’t have address details on file.

You have to walk the user through the “link new bank” workflow in the case they want to do an ACH transfer with a bank that wasn’t previously associated to their account.

You have to exclude the ACH option if the daily limit has already been exceeded.

So the process of initiating a transfer can get surprisingly complicated.

TransferWise’s flawed decision

Well, TransferWise decided to implement the entire workflow in one single web page, in which each step in the process is contained within its own component, that opens and closes accordion style.

The consequence of this approach, as opposed to pushing all the logic and checks to the server in page refreshes, is that during the entirety of my use of TransferWise, over the past few years, I have ran into user interface bugs probably more than 50% of the time.

And sometimes we’re talking about showstoppers—i.e. bugs that, in the name of a slick user experience, actually prevent me from making a transfer!

For example, the day that the confirmation button simply wouldn’t activate. Or the day when state wasn’t tracked across components and the confirmation button didn’t provide on-click feedback, such that multiple clicks of the confirm button suddenly skipped you multiple steps ahead in the process, leading to all sorts of chaos.

Or, what happened to me today…

I use TransferWise once a month to pay my European contractors. Since the only thing that changes each month is the amount I pay to each, I could really use “payment templates”. But since those don’t exist in TransferWise, the next best thing is to click “repeat payment” on some previous transfer, and then change the amount.

But it would seem that this isn’t the intended purpose of “repeat payment”, since clicking the option takes you directly to the confirmation component of the transaction screen. You can click back into Step 1, in order to change the amount, but I suspect my particular use of this feature is what caused me to see this, when finally returning to the confirmation component:

Neither refreshing the page, nor clicking “Confirm” removes the error message or allows me to proceed As with most of these UI errors at TransferWise, it would appear that I’ve reached a dead end.

But, in this case, guess what? When I return to my accounts page, I see that the transaction was successfully processed. So the error I was shown—i.e. the one that blocked the whole process—is itself erroneous!

Again, it’s all about context

So let’s backup and think about this.

Once per month I need to make some transfers.

I use TransferWise for this because they are fast, and save me a lot of money.

I do not use TransferWise because their transfer creation workflow is better than my bank’s. I don’t give a shit about that. If this were something I did 12 times per day, then maybe; but this is something I do 12 times per year.

Of course, it’s not impossible to have a reliable application that’s front-end heavy. It’s just that it’s much, much easier to have a reliable application that’s not. And in the case of TransferWise, a slick front-end doesn’t contribute to the core value proposition of the product, and my own experience demonstrates that there’s definitely inadequate value compensation in unnecessarily taking the risk.

Conclusion:

The very very last thing I want to experience in this context, are bugs that prevent me from making my transfer.

For the past year or so, each time I’ve experienced a UI bug, and have reported it to TransferWise, I’ve also take nthe opportunity to encourage them to reduce their dependence on front-end technologies, and give priority to making the process of creating a transfer as reliable as possible. But each time, missing the forest for the trees, their team have instead focused on trying to track down the particular bug I’m reporting (Have you tried that in Chrome?)

And so my hope is that through publishing this article, the larger issue might cross the radar of someone in TransferWise management, who’s in a position of considering the broader product goals.

So what’s my expectation—or rather hope—when clicking on this button? That it’s a one-click operation, just like unsubscribing from most email newsletters. But even then, those one-click email unsubscribes aren’t truly one click, because you still have to close the “You’ve successfully unsubscribed!” window.

That might seem insignificant, but that one little extra step actually registers a small amount of irritation in my mind. I’m not sure why, but perhaps it’s because I hate wasting time, and closing the window triggers an awareness of the cumulative amount of time I lose in a valueless component of the process of unsubscribing from the countless newsletters I somehow get signed up for.

But back to this feedback workflow: Yoast use HelpScout — and I love HelpScout! We use them too, so no knock on them—and after clicking the smiley face, I again registered that slight feeling of irritation having landed on a page where I have to take at minimum two further actions: (1) clicking the “Send” button and (2) closing the window.

The unfortunate consequence is that I’m unlikely to participate in those types of feedback opportunities again, so this is an area I feel could use some workflow design improvement, targeted towards making it a truly one-click, friction-free interaction.

This morning, when my wife and I took off on our trail run, I started my exercise timer app. A few hours later, we returned to the starting point, got in the car and drove home. Pulling into the garage, as often happens, I realized that once again I’d forgotten to stop the timer at the end of our run.

Yet another set of recorded training data messed up.

Whether it’s Strava or RunKeeper on my iPhone, or my Garmin Forerunner device, this problem happens so often that it got me wondering about possible solutions. Since the great majority of my routes—whether running, hiking or biking—start and stop at the same location, this particular problem could be solved if GPS device and app makers added a simple “looping auto-stop” setting that automatically stopped the timer whenever I returned to my starting point.

So simple, yet effective! I’m going to forward this article to the folks at Garmin and Strava, in hopes they’ll add this feature to their products. And if you like the idea, maybe you can do the same.

(Of course, it’d need to be an optional setting, to allow these devices and apps to be used in multi-lap events.)

A few months ago, a frequent-traveler named “Matthew Henderson” from New York City signed up at Delta.com, accidentally providing my Gmail email address instead of their own (which is likely some minor variant of mine.) Since then, I’ve been the lucky recipient of nearly weekly email notifications regarding Matthew’s ticket purchases, travel plans and seat upgrades. Next week, in fact, Matthew is traveling to Cancun—lucky guy! Continue reading Hours of lost time because Delta airlines do not validate new account email addresses

Whenever any one, or combination of, these apps saturates the ADSL upload bandwidth, downloading then becomes very difficult. And that presents a big problem when trying to do things like watch content on iTunes, or have a conversation over Skype.

These apps all try to address the problem, but in collectively (and sometimes individually) ineffective ways:

They all provide for bandwidth limitation through configuration. That doesn’t help, though, when you have multiple apps trying to upload at once. And who really wants to limit upload bandwidth during the 95% of the day when it wouldn’t matter anyway, just to address the 5% of the time when it’s needed?

Some provide for automatic bandwidth reduction when detecting that the network—on the given computer—is busy. But this doesn’t help when you have the apps running on multiple machines on the network.

All provide for manual pausing. Only Arq provides a means of pausing through scripting (or via a command-line interface); the rest require manually clicking their menu-bar icons. Only Arq and CrashPlan allow you to specify the amount of time to pause; for the others, you have to remember to unpause them. And BitTorrent Sync’s menubar icon doesn’t even have a “paused” state (like Dropbox’s), which nearly ensures that an unfortunate event—like realizing the file you’re working on isn’t up to date—will be the thing that reminds you that it’s not running.

Although I’d love to find a single-interface, elegant solution to the problem, life right now would be much easier if:

All such apps provided a means of scripted pausing. That way, using my iPhone while sitting on the couch, I could connect to Keyboard Maestro and run a macro that would pause every app on every machine on the network.

All such apps provided timed pauses. That way, I wouldn’t have to remember to unpause them. And for those that don’t provide timed pauses, for goodness sake, at least provide a paused state of your menu-bar icon.

This article is about a frustrating experience with the WIRED Magazine iPad app, by Conde Nast.

Background

I have an active subscription to WIRED Magazine on the iPad, valid through July 2014. After a recent iOS update, I found that most of my subscribed magazines, including WIRED, were missing from the Newsstand app.

After re-downloading the WIRED app, I launched it and found myself looking at a “Store” screen full of issues available for purchase at $4.99. Same thing on the “Library” screen. What I should have seen were a bunch of “Download” buttons, not “Purchase” buttons. In other words, the app didn’t recognize that I’m an active subscriber. (When I re-installed The Economist, for example, it did recognize that I’m a subscriber.)

So I began looking for a way to tell the app that I am a current subscriber.

The My Account Screen

The app has five sections: Library, Store, My Account, FAQ and Video.

I started by visiting the “My Account” area.

The “All Access” and “Complete Account Setup” would seem like candidates, but after poking around in those sections I discovered they are only relevant to print subscribers.

The FAQ Screen

Next it was off to the FAQ section. There, I discovered content that apparently hasn’t been looked at in ages:

“What is iOS 5?”, “How do I update to iOS 5?” Seriously, this from a magazine positioned to be on the cutting edge of technology? We’re long past iOS 5, guys.

The Store Screen

So it’s back to the Store screen. The current issue displayed two options — “Purchase for $4.99” or “Subscribe”. I decided to tap the “Subscribe” button, and was asked to choose between a monthly subscription for $1.99 or a yearly subscription for $19.99. I tapped the yearly subscription option, expecting that when the app submitted the purchase request to Apple, it would be told that I’m already a subscriber.

Which is exactly what happened! Shortly after entering my App Store password, a message came back saying:

You are already subscribed to WIRED Magazine, through July 2014.

Great!

Except for one problem—all the magazine issues were still listed as purchasable, not downloadable. So even after confirming that I’m an active subscriber, the app still didn’t update its state to reflect that.

The Library Screen

Noticing that I was still on the Store screen, I thought, “Oh, I’ll bet the app updated its state on the Library screen.” So I switched and … nothing; all the issues there were also listed as purchasable, not downloadable. Good grief. But then I noticed a “Sign In” link in the upper left corner, and thought, “Oh, maybe that’s where it’s done!”

But that wasn’t it either. After some fumbling around, I discovered that’s related to your WIRED website account, and unrelated to your app subscription.

Let’s just try purchasing an issue…

Given that trying to subscribe to the magazine resulted in a confirmation of my active subscription, and running out of options at this point, I decided to just try purchasing an issue, hoping that that will also return a message like, “You’re already subscribed; this download will be free.”

So I tapped the “Purchase” button on the November issue and…got a confirmation that I’ve just spent $4.99. Heavy sigh.

For a moment I almost didn’t believe it, but then got the Growl notification as Mail.app announced the incoming iTunes purchase receipt email.

Restore purchases

Unwilling to believe there’s no way to tell this app that I’m subscribed, I finally noticed the gear icon in the upper right corner of the Library screen.

For whatever reason, I had previously discounted this as an option. I guess my subconscious just assumed that given the presence of a “Sign-in” service opposite this gear, that the gear section wouldn’t contain account-related services.

But lo and behold, under the gear menu I found an option called, “Restore Purchases”, which when tapped finally changed the state of the app to reflect my active subscription, allowing me to download issues without purchase.

Conclusion

Setting up a new device or restoring from a backup would seem to me common enough use cases, that apps like WIRED would, on the Store or Library screens, offer a message like, “Already subscribed? Click here to restore your subscription.”

They do that for print subscribers—i.e. they have very prevalent messages under the “My Account” area communicating, “Already a print subscriber? Click here for iPad access.”—so why not an equally-prevalent service for iPad-only subscribers?

I ended up making an unfortunate $4.99 purchase, and wasting a lot of time unnecessarily, due to what, in my opinion, is unthoughtful interaction design.

Epilogue: Support from iTunes

I emailed iTunes, explaining what happened and requesting a refund of the $4.99 purchase. Although they did grant a refund, their reply was almost as disappointing as the experience with WIRED.

First, they communicate appreciation for me having contacted them, and confirming an understanding that I’ve asked for assistance with an “accidental” in-app purchase. Then, they communicate how much pleasure it gives them to have the opportunity to help me and proceed to reference some knowledge-base articles explaining what in-app purchases are, and how to disable them in my apps—all of which suggests they didn’t even bother trying to understand what actually happened.

Hi Matt,
This is Glenn your iTunes Store Advisor and I appreciate your inquiry regarding our services today. I understand that you need assistance about an accidental in-app purchase on your iTunes Store account.
I’ll take care of your concern and it would be my pleasure assisting you to straighten this matter and I’m happy to help you with this issue
I checked your account and it looks like the purchase was made within an iOS app. This is called an “In-App Purchase”. For information on this type of purchase, read:
iTunes Store: About In-App Purchases
http://support.apple.com/kb/HT4009
I checked your account and it looks like the purchase was an auto-renewing subscription, made within an iOS app. To learn more about auto-renewing subscriptions, read:
iTunes Store: Purchasing and managing auto-renewing subscriptions
http://support.apple.com/kb/HT4098
I understand that this purchase was made accidentally. Within 10 business days, you’ll see a credit posted to the payment method listed on the receipt.
Please note that this refund is a one-time exception, as the iTunes Store Terms and Conditions state that all sales are final.
To prevent more In-App Purchases, you can block them on any of your iOS devices. Follow these steps for each device:
1) Tap Settings on your device’s home screen.
2) Tap General.
3) Tap Restrictions.
4) Tap Enable Restrictions and enter a passcode. This passcode will prevent restrictions from being disabled without your permission.
5) Scroll down to the Allowed Content section. Switch the In-App Purchases option to OFF. You may need to enter your passcode again.
I hope I was able to assist you with this matter. Have a good day!.
Sincerely,
Glenn
iTunes Store/Mac App Store Customer Support

As a Mac user for the past 27 years, I’ve had little exposure to Microsoft Windows. My assumption, though, is that the usability of the Windows operating system has been improving over the years. Look like I may have been wrong.

This weekend, immediately following the installation process of a Windows 7 app under VMWare on my Mac, this screen opened:

“This program might not have installed correctly.”

Did the designer of this screen not realize that that sentence could be truthfully said about any installation—including those that did not install correctly, but also those that did! Please, if you’re going to show the user a message like this, at least give them some indication why they’re seeing it—for example, did the installer experience some errors during the install process?

OK, so what are the options I’m provided for responding?

“Reinstall using recommended setting”. Hmmm, does this suggest that my previous installation was not made with the recommended settings? (And I’m left wondering, recommended by whom?)

“This program installed correctly.” How the heck am I supposed to know whether the programmed installed correctly, if the installation process has just finished, and I haven’t had a chance to open the program yet?

I can close the window with the little “X” at the top. Is that OK? How would that affect my installation process? (Is there any chance that one of the two primary response options is required to complete the process?)

I can “Cancel”. What does that mean, that my installation process will be reverted? How does this differ from pressing the “X”?

<

p>Under the circumstances, I figured I’d better go with the “Reinstall…” option, which, as I nearly expected, resulted in getting to see this exact same window a second time—after which I just pressed, “This program installed correctly” and hoped for the best.

Companies who send periodic emails to their customers should do two things:

Provide an opt-out link that does not require the user to login to some account. The worst experience I’ve had in this regard is Delta Airlines. I fly Delta, but got so tired of their SkyMiles emails that I decided to opt-out. This required hunting for my SkyMiles account login, and then hunting even more for the area in which you manage your email subscription. And then, worst of all, when I got there, I found that I was already unsubscribed. Dead end. What do you do in a situation like that? So I’ve blacklisted them in my spam filter. Sorry Delta. Don’t make your customers go through this. Provide an opt-out link that doesn’t require logging in.

Provide the customer with the ability to opt-down, rather than opt-out. I’m usually interested in receiving information from the companies I do business with — I just don’t want to hear from them every day. With most companies, you can either opt-in or opt-out. Unfortunately, a lot of the businesses I love (like REI) can’t contact me anymore, because I got tired of the volume. The Germanwings airline does it right. Here’s the choice I was offered when clicking their opt-out link. Rather than opting-out completely, I chose to allow them to contact me “once per quarter”. Nice!

As Skype has evolved over the years, I’ve gotten the impression they’ve hired a bunch of visual designers and told them:

Hey, go make the site look like the other sites out there. You know, BIG and spacey, like Apple! Web 2.0, right? And throw in some icons and progress bars. And gradients. Oh, and tabs!

Here’s the awful mess of a result of visual design sans usability design.

This is the “dashboard” of the Skype Manager. I have absolutely no idea what information it’s trying to communicate to me. But hey, the manager at Skype can check off, “Have a Dashboard, like everybody else!” off his list.

When designing the purchase experience for Money for Something, we wanted to make it as easy as possible to buy the book. With that objective, we integrated Stripe’s technology — the customer enters their name, credit card details, and clicks “Place Order”. A moment later, they have the book.

Even though Stripe does the processing on their servers, the experience is fully integrated within our own site. It couldn’t be more elegant or efficient.

Contrast that with the experience someone living in Europe typically has when buying something online from a European organization.

Buying airline tickets at Air France

This morning, I wanted to buy airline tickets from AirFrance.es, and pay with the business credit card issued by my German bank.

At checkout, I’m asked to enter my name, credit card details and billing address. A stern warning advises that if the data doesn’t precisely match the billing address of the credit card, the transaction will be denied.

Already setting a dire tone, and raising questions. Should I include the hyphen in the street name, “Robert-Bosch”? Should I spell out “Strasse” or leave it just “Str.”? I take a guess and hope for the best.

Clicking “Pay”, I watched the browser cycle through various URLs on different domains before landing on a blank screen with an iFrame inserted in the middle. The content looks like something out of a 1999 HTML web design book and it’s in German, rather than the Spanish I was seeing on the AirFrance site. In fact, it’s completely bank-branded.

I’m asked to enter my MasterCard “SecureCode™”? Off I go to Yojimbo, hunt around for my MasterCard note, decrypt, and thank god, there it is, my MasterCard SecureCode. Yes!

Right. How do I create a new SecureCode? The message gives no indication.

Calling my German bank, I wait on hold for a while as they look for somebody that speaks English. That person informs me that to create a new SecureCode, I need to start the purchase process again, but this time, click “Forgot SecureCode” on the confirmation screen.

Yes, that’s how you create a new SecureCode; you click “Forgot SecureCode”.

(Naturally, to even get to the confirmation screen again, I had to delete some browser cookies, which are stuck in the state of “Your SecureCode has expired.”)

So it ended up taking me five minutes to configure my flight, and 45 minutes to pay for it. Awful.

Buying vitamins at MAS Musculo

Yesterday, I visited MasMusculo.com to purchase some multi-vitamins. Again, it took about five minutes to find my vitamins, which came to a total of 27 Euros.

Once again, though, the purchase workflow was interrupted by an awkward visit to some unrelated URL, where I was shown a blank screen with an iFrame containing content from my personal credit card provider, Deutsche Bank.

On this screen, I’m asked to enter my personal PIN, and the code from coordinate “G5” on my SecureCard™.

What’s a SecureCard™? This is a card containing a grid of numbers, identified by alpha columns and numeric rows, one of which you’re randomly asked for (in my case, “G5”). Sigh. Off I go hunting for my SecureCard™.

Of course, you can’t just type in your PIN and data from the SecureCard. No, somebody could have installed a keylogger on your computer, and over time, collect all the data from your SecureCard™ and then fraudulently buy vitamins!

(No, this is not a million dollar wire transfer. This is a 27 Euro vitamin purchase.)

After carefully punching in all the data using this mind-numbing virtual keyboard, I hit “Pay”, and wait. Yeah, you know what’s coming…

Your data did not match, or there was a system error. Please contact the System Administrator.

Bang. Head. On. Desk.

Three more tries, and they all fail. I call Deutshe Bank and can’t get through to an operator because “Your PIN number is incorrect.” Finally, after jumping through some second-level security questions, I get to an operator who tells me my PIN is in fact correct, and the SecureCard™ issue number is correct. So they have no idea why the system is failing, and they don’t know who my System Administrator might be.

So what do I do? I go to Amazon.co.uk and purchase the same vitamins from the United Kingdom for 45 Euros (including shipping). I pay an additional 60% on my purchase, to get one-click convenience, and save additional lost time.

Europe — the land of ancient cathedrals and still not-quite-sure about this whole credit card thing — is ripe for company like Stripe, Square, PayPal or somebody else in the payment space to come in and make life easier.

Earlier this week I completed a trip that I’d earlier reserved with Booking.com. Today, a fews days later, I received this innocent-looking email from Booking, asking me if I’d be so kind as to answer four questions about my trip.

Four questions. That’s all. Why not? So, I clicked the link.

Would you like to know what four questions looks like? More like nearly 16 to me. Thanks for a great user experience, Booking.com.

Update

Booking tweeted to me that they plan to address this. Let’s check back next year.

Whenever we travel, it’s almost always my wife who does the online research, and settles on a particular flight, hotel and/or rental car. She then emails me URLs, with a request to make the bookings.

In my experience, those URLs — which usually span at least four lines in the email — almost never lead to what my wife had configured and thought she was sending to me. Just today, a rental car she found in Holland, showed up as a car in Albania for me! In the end, we always end up sitting down and doing both the research and booking together.

I imagine this scenario is not uncommon, where one person does the research, and another does the booking. It would be great if companies operating these websites foresaw this workflow, and ensured that researched configurations can accurately be passed to another person for booking.