A Great Example of BAD Web Design

Everyone has likely come across a web site or three with bad web design at some point in their web surfing experience. Ironically, I have seen a lot of poorly designed sites or pages within internal use only corporate apps. There are a variety of factors that typically lead into poor outcomes for functionality and bad web design UI, but its often extremely avoidable with just the slightest amount of developer input being considered in the design process (if there is a design process for the project at all).

As probably any coder can tell you, friends and family that are technologically challenged or computer illiterate will attest, people will often come to you prefacing questions like “You know computers, can you help me with [insert something completely general and vague here]?”. I have learned a lot by lending a helping hand to a small circle of people that I have shared my abilities with, so I selectively opt on help when prudent for all parties involved. I recent had an interesting case where someone had switched over their insurance information and The State of Florida Highway Safety and Motor Vehicles sent them a letter informing them that their license would be soon suspended if they did not provide updated insurance information. The letter was a single page that provided phone numbers to call, or a website URL to update their information within a week or two before their Florida license suspension or revocation would occur. NOT GOOD.

 

It was late and on a weekend, but also this isn’t something you really want to be on the phone about in front of your office peers as they may get the wrong impression about the situation. I get that.

Most people that use the internet for things like managing bank accounts, email, social media, auto insurance, etc have grown accustom to not worrying about adding the “HTTPS://” prefix into a web browser when visiting a web page directly.

Apparently when you visit this web URL that is printed in the letter body,

http://services.flhsmv.gov/DLCheck

VS

https://services.flhsmv.gov/DLCheck

Once you ensure the https:// prefix is EXACTLY correct, there is an extremely basic web page that provides a web form with two fields to enter you Florida Drivers License Number, along with a Captcha-like puzzle to solve to prove your humanity.

 

Pretty basic. That’s not the bad design I’m referencing though, for all you Web UI snobs out there (You know who you are). For whatever reason, the first attempt at solving the Captcha correctly NEVER seems to work correctly, but the second and all subsequent attempts does. Weird. But… the site seems to be loading jQuery, so perhaps there is a caching, sessions or cookie issue with the Captcha?

This is only one roadblock though, and likely more of an issue with the backend (ASP for the LOSE!) or perhaps Javascript. Likely a simple fix for the coders, but also easily overcome by the user. That wasn’t what had the person asking me for helped stumped either, though. See what comes next…

The resulting landing page after successfully entering valid information into the simple form reads:

 

 

Your insurance carrier has informed us that as of your insurance is no longer in effect and we are unable to identify any other insurance for you on file. As a result, a suspension is pending on your driver record. If you have automobile insurance, please provide us with the information and avoid having your driver license suspended. To provide information, click here. If you do not have automobile insurance, select the option below that best meets your needs and complete before the effective date of suspension to avoid the suspension. Purchase the required insurance and then use this website to submit your insurance information.OR Turn in your license plate(s)…

 

I had to chuckle at this as it had stumped the person asking me for help. It did in fact take me a minute to figure it out… but the issue was really completely due to a lack of design or testing. I looked a bit closer, and found this in the CSS code:

 

I didn’t get a screenshot of the page before I had visited the link, so I used black text for the linked word “here” in my post. The font size is a smaller 10pt font on the Florida web site as well. It was VERY easy to miss. I clicked around a few times trying to figure out what was going on… why don’t I see another form to input my information? What was even more comical was that when I clicked around a bit, I had to re-enter the Drivers License Number and Captcha puzzle each time. It took me reading every single small-print font on the page to see the small underline on the word “here” to see the link. Once you’ve visited the page, the color of the link changes (which is basically why I showed the above CSS code, as that is what it translates to). Before you visit the page, the text and underline color is BLACK, matching the rest of the page! LOL! I felt kind of silly and completely understand why others had issues with this site functionality also. But… it simply shouldn’t be this way. It would take VERY LITTLE effort to fix these issues.

The link takes you to a page where you can enter in your info and BOOYAH! All was right in the universe once again. But… this little 5 minute experience was quite a trip…

These BAD web site design roadblocks that the general public would run into and potentially give up on using the website and drive people to call into the phone line instead to handle the matter. This is an obvious case for a lack of testing. Considering how many people are likely to use this web page, and the investment spent in the creation of the functionality of the web site feature, the cost of employing someone to answer a phone line and the general unhappiness of someone who would have their license suspended, this is NOT a solid execution of a web project. Something so small, simple and common to the web, yet still does not work properly.