Published on <a href="https://blog.prototypr.io/stupid-user-or-stupid-ui-2b896421490e?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Graeme Fulton <img alt="" src="https://cdn-images-1.medium.com/max/447/1*wus1qdCeQwDforG5tXtCLQ.png">
<h4>That time I lost ~£400 because I didn’t scroll down</h4>
I remember reading this story about Hulu stealing $6 from <a href="https://medium.com/u/735cdc3a2d58">Lauren LoPrete</a> with a “sneaky UX trick”:
<a href="https://blog.prototypr.io/ask-me-how-hulu-stole-6-00-from-me-with-this-one-sneaky-ux-trick-8175855a9cfe">Ask me how Hulu stole $6.00 from me with this one sneaky UX trick.</a>
To summarise, Lauren never pressed ‘save’ after toggling an option to switch pricing plans. That was because the confirmation button to save her changes was all the way at the bottom of the page — you’d somehow have to know to scroll all the way to the bottom, and click ‘continue’, then follow a process to confirm.
A similar thing happened to me, and I incurred a ~£400 bill. Maybe it’s partly down to my own stupidity, but have a read and make up your mind. Long story short, I feel like the UI provided important payment information in the wrong place at the wrong time, almost hiding it from me through the use of cleverly placed call-to-actions.
First, here is an overview of the problem:
<h4>Overview: App Stopped != Zero Cost</h4>
I was using Redhat’s web hosting service to run a website, and upgraded to their bronze pricing plan to make use of extra pay-as-you-use resources. After I no longer needed their service, I hit ‘Stop App’, thinking I’d shut it down.
In my mind, a stopped status suggests that the service is no longer in use (so I won’t be billed). I was using an older version of their service, but it looked something like this when ‘Stopped’:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*otxvT4d2PbmHGI30CuMBQA.png">
Therefore, I forgot all about it and got billed around £400 for the entire time the app was stopped. Maybe I didn’t read everything carefully, but I felt a bit tricked.
After contacting Customer Support, I was told the information on pricing was clear:
<img alt="" src="https://cdn-images-1.medium.com/max/585/1*u2uf-UpYKC_0uSmxamfETQ.png">
…I just never saw it, because it was provided right at the bottom of the sign up page — no where near the focus of the user. See below — the call to action for upgrading an account is shown far above the billing information, so many users are bound to miss it. There’s also 5 call-to-action buttons before the information (highlighted by the blue numbers):
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rm0ceVzqcta81tfAiI2B8w.png">
Showing all 5 buttons before the billing section means important information is unlikely to ever be seen, as the user is less likely to scroll down. That’s because buttons are one of the most popular manifestations of call to actions on the web — an element that intends to provoke action from a user.
<a href="https://www.smashingmagazine.com/2009/10/call-to-action-buttons-examples-and-best-practices/">Call to Action Buttons: Examples and Best Practices</a>
Furthermore, as well as being positioned better, the information could be shown at a more useful time too. Here’s a quick couple of examples RedHat could adopt to be more clear about pricing, and the meaning of ‘pay-as-you-use’ in relation to a ‘Stopped’ app:
<h4>1. Timely billing information</h4>
When you switch off a resource on Digital Ocean, you’re presented with a large modal, clearly stating that you’re still going to be billed even when the app is powered down:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*B5klIuvqnfLVPnx4atqAIg.png">
The timing here is important, as this is when you really need to know the information, along with clear reasoning on why you’re still billed.
<h4>2. Transparent billing information</h4>
They could provide the billing information alongside the status of an app. Take Heroku for example — usage and billing information is displayed transparently right on the app overview:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7zkYVygP8U4UY3qiy7MJiw.png">
This way, when an app is stopped, you can still see that you’re taking up resources and getting billed.
This situation was last year, so they’ve hopefully improved things by now. I’ve seen quite a lot of interesting pricing going on, so thought I’d share that experience. Happy pricing!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2b896421490e" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/stupid-user-or-stupid-ui-2b896421490e">Stupid user or stupid UI?</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Stupid user or stupid UI?

That time I lost ~£400 because I didn’t scroll down

Top Stories