Archive for August, 2017

Xfinity example of how to build a terrible web experience.

I’m going to pick on Comcast / XFinity about their terrible web application design. They generate tons of pretty marketing collateral to try to convince prospective customers of their awesomeness, but that artisticness doesn’t seem to extend to existing customers.

I’ve given Comcast (which has had 3 names since I opened the account) over $50,000 in the last 20 years, not because I’ve been happy with the service, quite the contrary, but because they have a monopoly in my area and there are no other land cable / high speed internet providers available to me.

But the purpose of this post is not to just hammer on Comcast (that part’s just for fun), but to demonstrate a very poor web application design that negatively affects customer satisfaction, and therefore their bottom line, in the hopes that we software developers can use the experience I describe below as a reminder to take the extra time to do HFE – Human Factors Engineering.

Comcast has historically been known as providing some of the absolutely worst customer service in America and I’ve personally experienced the the customer services reps who often seem like they are actively trying to infuriate their customers.

The Comcast store in my town has inch thick bulletproof glass to separate their employees from their customers – and it hasn’t been hard to figure out why.

In fact, Comcast’s customer service has been so bad that they have rebranded all their consumer services as “Xfinity” in the hopes that their customers will forget about the past thanks to their new name.

Fair enough. I recently went to the dreaded Comcast / Xfininty store and did, in fact, have a pleasant service experience, and the store was plastered with customer advocacy and employee service guidance.

So I came home with new cable boxes that I needed to activate.

Xfinity has a web page just for that www.xfinity.com/activae.

I see the page and think – cool, this should be easy.

I click continue.


And the human factors engineering starts to go south from here.

New customers can enter credentials here, but existing customers need a useless click.

Lazy …..

But ok, I click.

WHAT ?

I pay these guys $250 a month and they are still so broke I need to click on the last page, just so they can take me to a second authentication page to show me ads for local a used car dealer ???

Cheapskates !

But, I still need to activate my cable box so, I enter my credentials and click OK.


Really ? A page not found on their login redirect? Did anybody even TEST the last deployment?

And why isn’t there any generic 404 handler ????

So most users would be dead in the water at this point but, as a hacker type, I did a bit of Google hacking to find another login control on the same part of the site and hope my authenticated status would hold – and it did.

Eventually I found my way back to the activation process.


And cool, all my devices.

But I don’t know what TV 6 etc is. This would be a great place for me to actually change “TV 6” to “My Little Princess’s Room”. A detail I know, but the whole point of this post is the importance that customer experience Β and “Human Factors Engineering” can make.

In any event, I check the device serial numbers, find the one I want to activate, and click “troubleshoot” – as there is no “Activate” button, or even any mention of “Activation” even though that what the page that came with the receiver said I had to do.

And then here I am at another page that adds absolutely no value to my process. It’s like Comcast just hacked together a bunch of pages and inserted a bunch of “glue pages” to patch the transitions.

Huh ?

OK….. I guess I want to “Get Started”. Click !


Checking for outages? Why would they ASSUME there was an outage. All I want to do is activate my new cable box. The other TVs in my house are working just fine.

But ok, whatever.

I’ll wait.

Then THIS pops up.


Didn’t I START this whole process by choosing the device I wanted to activate.

And what the hell does PCHDUDTA mean ? And why are there more than one?

You had the serial numbers on the LAST device page – wouldn’t they help here.

You had device names (Living Room, etc.) on the other selector too. Maybe those would be good here.

There is something that looks like MAC codes displayed on some of these entries.

Too bad the ones displayed in this web page don’t match any of the ones on the device I’m trying to activate.

Now I have a picture in my head of my 76 year old Dad having an aneurysm just trying to get his damned TV to work πŸ™‚

Since Xfinity hasn’t provided me any useful information to select the device I need to activate, I’ll take a guess.


And the Xfinity web site starts to guide me through a process.

BUT WAIT ?

Error Messages?

I JUST WANT TO ACTIVATE MY NEW CABLE BOX !



And what the hell am I supposed to do with that dialog box.

What, was the web developer late for lunch that day?

Was the developer a high school kid just learning HTML?

Did someone actually approve this design?

Well we’ve come this far and we’ve been just guessing for a while so, let’s press on.

As a developer I know that, even though the Xfinity developer was to lazy to specify a default and too lazy to add any instructions to the almost blank form, I can probably find values in the drop down.



But, there are only a few error messages in the list, and the cable box not activated isn’t even one of them.

You would think “202” – the code for not activated would by common enough to include in the list. For that matter, since the users of the web site are not communications engineers, you might think there would but something other than just the code numbers in that dropdown.

At this point, my dad’s probably really angry because Xfinity’s terrible web design has made him (the customer) feel stupid.

But, for the user tenacious enough to get this far and click on continue, there’s more “help”.



Well yes, since you haven’t sent the activation code to my box, and unactivated boxes don’t view channels all that well, there is in fact a problem viewing channels on my unactivated cable box.

And really, what OTHER type of problem cold I be having at this point?

Oh well, when all else fails, just keep clicking.

Continue…..



WHAT ?????

You walked me through all that just to tell me to wait an hour and see if the problem automagically goes away????

And since you still never sent an activation code to my box, and never provided a place for me to ask you to send one – the odds seem pretty low that the TV fairy will intervene.

So…. Click Continue……



Oh…. I need an EXPERT!

Couldn’t you have just saved me an hour of frustration and STARTED OUT telling me to call you?

 


So, if you build web sites, or really any software, go through this workflow again and think about all the ways you could change the above to provide much improved, and therefore much more satisfying customer experience. Most of the information you need is already there in one place or another.

And if you are a Web UI Designer with Human Factors Engineering (HFE) Experience, and you’re up for a massive challenge, send XFinity your resume – they clearly need you !

In the meantime, what can you all tell me about DirectTV ? πŸ™‚

Hacking HTML – A numeric spinner that looks the way I want it to look

So I’m playing with building a cross platform desktop scoring app for boxing events built on Electron from GitHub.

I plan to use the up on my Windows Tablet. In my case an Acer One.

As such I’m designing the app to be user friendly for buth mouse and touch users and want a UI control that lets a user pick a score value between 10 and 1.

HTML Number Input didn’t do what I want because no matter how I sized the font of the number and its container, I couldn’t get the up/down spinner to scale with the text.

I also tried the JQueryUI numeric spinner since I’m already using jQUery on the app but it didn’t look any better.

Enter one of the cool things about markup based UI, just role your own.

Here’s what I wanted.

And here is the code on JSFiddle.

Use and enjoy πŸ™‚