Short case study for a big TV and broadband company support page.
The problem:
One of their main problems is that whenever the customers don’t have TV signal they immediately call them, which is probably a good thing to do but they want to make the troubleshoot process quicker and probably easier by offering a page where the customers can easily inspect what’s going on with their TV signal.
This is how the page looks now:
Before we start digging a bit deeper here are few quick and easy fixes which can already improve the page:
Let’s increase the font size of the headlines for a better impact.
The menu should be clearly delimited from the page title, at this moment can be easily confused as part of the menu.
A better hierarchy for titles for better readability, larger spacing. In this way, the user sees more clearly the difference between “No satellite signal” and “What your screen looks like”.
Now it’s a little bit confusing, personally I don’t know where to look first and I have the tendency to skip the introductory text which is very important.
The “What does your TV screen look like?” section
These have to remain always visible because you can not afford to loose the users along the way. For example, if someone entered on “Error Message” page and then goes to “Yes, the weather is fine” and after this he realize that actually he made a mistake and it’s not what he is looking for then he might forget that he has other two possible issues and the frustration comes in. Even if he realize that there are other options he still has to click few times on the browser “Back” button, which is not good for them. This is what can happen straightaway, so better fix this first.
So, this section seems pretty solid, so what exactly can we do to improve the experience?
In this example, I’ve managed to keep the user on the same page / screen, in this way the navigation between the issues is much easier, smoother.
There is nothing fancy, the user is already familiarized with a slider / tabs concept so he will naturally follow the functionality.
For example, if the user clicks on “Yes, the weather is bad” inside the “Error Message” slide he will see the information in the same screen.
This slider / tabs approach is great also for the touch devices, you can easily swap between slides.
The user is not forced anymore to go back and forth to find what he is looking for.
Let’s see the actual interaction to understand what’s going on:
Better no?
Without trying to reinvent the wheel or spending numerous hours of trying to be fancy or to innovate, we can do minor changes like this which can improve the overall experience.
Applying good design to what has been poorly designed is easy. Redesigning an already satisfactory design to higher standards is way harder.
Leave a Reply