This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

Fielmann's online store continues to be a debacle

Description

Fielmann is a vendor of eyeglasses. Their stores are great! The people there are super-friendly and I've gotten nothing but great, well-fitted glasses from them. Their prices are absolutely fair and their customer service is top-notch. However, their online presence is ... not good. <h>Navigation debacle in 2021</h> Fielmann is also a repeat offender in terrible usability. I wrote about them in <a href="{app}view_article.php?id=4193">Fielmann: an online-store safari</a>, where I described their nearly deliberately obtuse navigation. <h>Online-account madness</h> Somehow, I never wrote about how poorly their onboarding process was for existing customers when they merged their online contact-lens store into their eyeglasses store. Spoiler alert: there was none. I finally figured out how to merge my accounts and was able to order contact lenses from the main/combined store but it took several attempts. This time, I was told that the account that I'd created no longer existed. My account at the old contact-lens site was still working but it only logged into what was very clearly a dead digital storefront. Instead of even <i>trying</i> to rescue my account, I just created a brand-new account, giving up on all of my order history and having to copy my lens product over by hand. This is an international company with a large presence in the DACH region. This is after years. They're just utterly incapable of managing their user accounts and handful of web sites. <h>Criminal font choices</h> Let's take a look at how it has decided to design its order page. <img src="{att_link}super-tiny_fonts_at_fielmann.jpg" href="{att_link}super-tiny_fonts_at_fielmann.jpg" align="none" caption="Super-tiny fonts at Fielmann" scale="25%"> Do you see how much whitespace there is? Do you see the giant padding in the "Bestellübersicht" (order summary)? The fonts are tiny in the breadcrumbs, in the fields, and in the summary. This is for a store that sells <i>eyeglasses</i>. Their customers---<i>by definition</i>---cannot <i>see very well</i>. What's the point of all of this nonsense? There is more than enough room for much more accessible fonts. <h><s>Lackluster</s>Incompetent validation</h> They're not only bad at accessibility but they're also terrible at basic UX. There is no client-side validation, even though <i>all</i> browsers off that <i>for free</i> these days. I usually avoid checking any boxes unless forced to do so. I suspected that I would have to select the second one, but there was no visual indication that this field is required. On submission of the form, I initially didn't see any change. The screen only scrolled slightly to bring that field more into view, leading me to suspect that this was the field that needed to be checked. <img src="{att_link}there_s_the_error_message.jpg" href="{att_link}there_s_the_error_message.jpg" align="none" caption="There's the error message" scale="50%"> It was only after reloading the page and submitting again that I noticed the <i>tiny</i>, <i>poorly aligned</i>, and utterly innocuous error message thrown below the field like an afterthought. I added an arrow to the graphic to help you out. The screenshot below shows a closeup. <img src="{att_link}closeup_on_the_tiny_validation_message.jpg" href="{att_link}closeup_on_the_tiny_validation_message.jpg" align="none" caption="Closeup on the tiny validation message" scale="50%"> <bq>Dieses Kästchen ist ein Pflichtfeld [This checkbox is required]</bq> This is absolutely ridiculous and almost deliberately anti-accessible.