I was getting ready for a cross-country flight and decided to download a movie to watch. After I selected the movie and made the purchase, I was presented with the error message below.
This error state was quite the unpleasant surprise and exposed two potential points of improvement for this flow.
(1) I was allowed to make the purchase before I received the actual product. Ideally, the user would be warned that they do not have enough storage on their device to download the movie now so that he/she can decide to back out at that point. Getting the error message after the purchasing commitment opens the possibility of paying for something that you will not be able to consume now.
(2) Assuming the business case of letting the user get this far before warning them is more important than the user unfriendliness of this design, there is one way that this error message can be improved. The user needs to be told exactly how much extra storage is necessary to continue the download. For the message above, touching OK does nothing but take you back to the screen you were on, and touching Settings takes you here:
At this point, I had no idea how large the movie file was and how much extra storage I needed to free up on my device. Knowing that I had a back-up of my mp3s on my laptop, I just started deleting songs from my phone – one album at a time – and kept checking back into the download screen to see if I had enough free storage. This was a very manual process and finally at a certain point, I was able to start the download as can be seen below.
After signing into LinkedIn, you are taken to a personalized Home page. At the top, similar to Facebook, you will see a status update share module. In the bottom right hand corner of the module, near the Share call to action, you will see a checkbox to share the same status on Twitter.
If you are using this feature for the first time, you will be taken to a page hosted by Twitter that asks for your Twitter credentials and permission to have the LinkedIn web app post to your Twitter account:
By clicking on the Cancel, and return to app link, you are taken back to LinkedIn, but you are shown the following unnecessary error message:
The correct user experience would be to either show one of the following:
1. An informational message upon returning to LinkedIn
2. Not showing any informational or error message upon returning to LinkedIn
Wanted to access my credit card statement on Chase.com and encountered a couple of different error messages. It appears that Chase.com was having an outage. There are typically two flavors of outages: the planned outage (this is when the website or application needs to do some scheduled maintenance and the company has no choice but to completely stop a key site flow or the entire site) and the unplanned outage (this typically occurs when there is an unexpected software or hardware problem that brings down a key site flow or the entire site).
Here are some screenshots:
First thing I noticed when I encountered the page above was the “We’re sorry this website is temporarily unavailable” page title. I think better content would be to refer to Chase.com or “we” i.e. “We’re sorry but we are currently undergoing maintenance.” or “We’re sorry but Chase.com is currently unavailable” — the reference to “this website” is a bit informal. I also noticed the “chase_outage.htm” in the URL. This made me wonder about whether or not this was planned or if this message is put up during an unplanned outage.
At various other points, I got the page below. It’s pretty clear that this page is not at all useful to the user.
Equating a fatal error with a “bump in the road” and showing a picture of a bicycle with a flat tire is pretty hilarious.
I also like the “The good news is you haven’t broken the internet!” and “We’re working like maniacs…” content. Way to keep it humorous and low key.
A bit questionable is the “Please tell us in your own words…” content. What, am I back in school, and I can’t plagiarize off of someone else and I have to describe it “in my own words”?
This morning, I couldn’t sign into one of my secondary Gmail accounts. Not the main account I use day to day, but a secondary one meant for collecting spam.
Saw this fatal error:
1. I’m amused by the usage of the word “temporary” in this use case — how do they define “temporary”? It is a bit optimistic.
2. I like the “Try Again” link — why not give the user the quickest way to try again?
3. I clicked on the “Show Detailed Technical Info” link and was expecting to see a huge stack trace of Java code, but only saw “Numeric Code: 93” — this is good, we don’t want to see computer code shown to the customer.
4. The page says copyright 2008 — which implies this page hasn’t been touched for four years.
Finally, my favorite part of this page was the classic Gmail logo in top left.The one where Gmail is written in the colorful Google logo font where the different letters have different colors and the ‘m’ is shown as a mail envelope.
I definitely was a fan of this logo. The new Gmail logo treatment is so boring. Instead of having the logo in the top left, there are two graphics: one of “Google” and one of “Gmail”. The one of “Gmail” is written in red and is nothing like the previous logo.
In an earlier post, I had suggested that Google place a search bar in their 404 page.
CNN.com has taken the exact opposite approach of having too many search bars in a 404 page:
They have not one, not two, but three [!!] search bars in their 404 page. Granted two of them are from the header and footer, but still, there’s got to be a better design. I’m sure Google is loving the heavy emphasis on “powered by Google” x 3 on this page.
In the wonderful world of the world wide web, there’s a type of page that’s called the 404 page. This is the page that is shown by the site if the web request sent by the client is not understood by the web server. For more practical purposes, this page is also the catch-all page that is shown to users when there is an internal fatal error that cannot be mapped to any helpful or specific messaging that would be useful to the user.
Typically, when the user arrives at this page, they were trying to do something on the site, but something went berserk in the back-end and was not handled gracefully. There is a manual way to reach this page as well. Here’s how you can do it.
1. Start with a site URL, such as http://www.google.com
2. Append a slash “/” and an arbitrary piece of text, such as “arbitrarytext”
3. Go to the newly formed URL: http://www.google.com/arbitrarytext
Here’s what you’ll see: (highlights added by me)
1. I like the page title “Error 404 (Not Found)!!1” as the exclamation marks and the “1” at the end (what you would press if you weren’t holding down the shift key and trying to type an exclamation mark) really convey the frustration of the situation.
2. I love the picture of the robot that has fallen apart – it brings humor to a situation that may have otherwise been a bad user experience.
3. I love the part that says “That’s all we know”. This piece of text stays true to the error guideline of telling the user what happened and why it happened. Here the application is admitting its ignorance!
4. Finally, I see one room for major improvement. A Google search bar should be dropped into this page with a helpful piece of text such as “Looking for something? Perhaps, a web search would help…” or some other content. This is the page where people become stuck – there’s no better way to un-stuck the user than Google search to look for what possibly went wrong. And this could be a decent revenue generator for Google as well.
Here are some creative versions of this page: http://www.hongkiat.com/blog/60-really-cool-and-creative-error-404-pages/