Michael Eriksson
A Swede in Germany
Home » Software development » Webdesign | About me Impressum Contact Sitemap

Assorted examples of how not to implement a website

Introduction

Many of my negative interactions with websites are too short to warrant a separate article, yet I often find a need to write about them to relieve my frustration. Apart from a few not always constructive rants, these have typically resulted in my writing something in a scrap file and then forgetting about the whole thing.

This page started as an attempt to capture some of them in a constructive manner, in the hope that someone, somewhere, will be stopped from repeating one of these errors. I have since also added a few entries on stupid solutions that I observed in passing, without any personal irritation.

Beware that these examples are not merely referring to particular websites, but to particular times: I cannot guarantee that the same behaviour will be present at the time of reading—then again, it seems that most websites grow worse over time...

The examples

Adding a Google account

A few observations on what happened when I opened a Google account to use its webmaster toolse:

A CAPTCHA was used that was so obscure that I needed three attempts before I got through—and if I have problems... While a CAPTCHA must have some degree of difficulty, it must not be so hard that the real-life humans are hindered. (CAPTCHAs are also overrated with regard to their effectiveness against automated attacks, when compared to simpler techniques.)

Google stubbornly insisted that I had cookies deactivated, when they were, in fact, activated—I checked repeatedly, successfully tried another cookie-based site, and made very sure that no site-specific settings were in play. This eventually forced me to abandon Opera for these purposes. Any cookie-check must be written to actually give a correct result...

At every login attempt, a “Stay signed in” checkbox that I had deliberately unchecked was automatically re-checked—although I most definitely do not, under any circumstances, want this to be the case (considering how often I search with Google and how my data could be gathered and abused).


Side-note:

For the opposite reason, it seems likely that Google wanted me to remain signed in; however, this does not justify a continual re-setting: Setting the default value to “checked” once is OK; but after the user has indicated his preference, that preference should be respected. There is no excuse for trying to trick the user into accepting something he does not want—nor can a hypothetical programmers error to this effect be excused in a company of Google’s size and purported expertise. (And, no, this was not limited to Opera, where it could conceivably have been a side-effect of the cookie issue.)


Once logged in (using Konqueror) I found that the webmaster tools simple did not work—forcing me to move on to Firefox. (I had deliberate chosen Konqueror, which I hardly ever use, to circumvent any user tracking issues.) A website should work reasonably in all reasonable browsers. Tailoring it to the one or two most popular (in particular, the latest version of the one or two most popular) is unprofessional and user unfriendly.

Finally, with Firefox, it appears that Google abuses links to achieve page internal changes with JavaScript, which is big no-no: Links should never call JavaScript; but should lead to new pages, or at the very least to a new anchor on the same page. (Beware that this refers to design elements that are visually characterized as links. Some leeway can be given if a new element, e.g. a tab, is implemented using a link—this was not the case, however.) I also note that no clear indication of what would happen was given in the link text, which made the experience unpredictable and user-unfriendly.


Side-note:

An example of this was the use of “statistics” instead of “show statistics”. The former would be OK for e.g. a tab label or, indeed, a link that moved to another page—these have an implicit “switch too” by convention and analogy with the real world. Here, however, an action was taken, and actions require verbs.


Google searches

With any tool that I use as often as Google there are bound to be issues every now and then. The following, however, are particularly annoying:

  1. When searching in German, Google often gives “Did you mean to search for...” suggestions based on a break-up of compound nouns into different words using English rules. (Even with the absurd and illogical changes through the “new orthography”w German compound nouns tend to be written as one word.) Assume that an English speaker searches for “stonewall” and is met with “... stone wall?”—and that this applies to a every second search phrase used.

  2. When suggestions are presented, Google often presumes to show some search results with the suggestion as search term, before those of the actual search entered. This brings little benefit—while being a source of annoyance and (for new users) confusion.

  3. Suggestions are repeated over and over again when the search results are slightly varied. Say that a user searches for “stonewall bricks”, “stonewall granite”, and “stonewall ruin” and for each and every entry receives an “Did you mean to search for stone wall ...”. Again a time waster because each such message is a distraction that must be given at least some amount of processing (in particular as the secondary terms may be misspelled).


    Side-note:

    This is not trivial to avoid, because preventing this means that a search changes some kind of state (and even a changed state can need some time to propagate through such a large system as Google’s); however, by just adapting the probability of a word being correctly spelled by noting how many times it is validly used can be a big help—and by directing all searches from a particular IP address (within a certain time interval) to the same server, a propagation delay is not an issue.


  4. Even words that stand in quotes or are prefixed with a plus-sign (indicating that the word should be taken exactly, without variations) are subject to such suggestions, which is both counter-intuitive and removes a chance of working around poor suggestions. It would be better to exempt these words.

  5. Variations of words included in the search automatically are often idiotic. Being met with results about diamonds when I search for “caret”, e.g., is not amusing. I would go as far as to suggest not searching with variations per default (also affects the previous item), but to make this an optionally activatable feature.


    Addendum:

    A subsequent and far worse example:

    I made a search for “user mode linux” (a virtualization technology with the abbreviation “UML”)—and found a barrage of entries dealing with the Unified Modeling Language (completely unrelated, but with the same abbreviation). Now, had I search for the abbreviation, this would have been the expected result; however, when I search with the full, written out expression, borders on the inexcusable.


  6. While Google’s policy of ignoring punctuation may be justified, it is often inconvenient (and, in the long term, its optional inclusion would be helpful), sometimes even idiotic. Consider e.g. searching for a hyphenated term, “X-Y”: Not only is the hyphen ignored, which may be acceptable, but “X” and “Y” are treated as independent search terms—implying that e.g. “X yada yada Y yada yada” is considered a match, where common sense would have demanded that only “yada yada X?Y yada yada” (with the question mark signifying an arbitrary ignored character) be a match.

Abuse of ALT-texts

ALT-text as error message

Recently, I encountered a website which used images to transmit much of the relevant information. This is disputable, in and by itself: images should be used for illustration and explanation of information given in the text, not to provide new information. What took the price, however: The ALT-texts all read “This page requires graphic capabilities.” (or something to that effect).

This entirely misses the point of ALT-texts (while giving the user no information he would not have been able to deduce on his own): An ALT-text should give the user a brief indication of what the image contains. Consider e.g. the many users who surf with images off, and only load pertinent images if and when they are needed, the users of screen-readers, etc.

Further issues include that the formulation is border-line rude, and that many users will have problems deducing the meaning (a better phrasing would have spoken of e.g. “images”, rather than “graphic capabilities”).

Mindless repetition

Some sites (in particular of newspapers) have begun to use an ALT-text that re-iterates the exact contents of the legend of the picture. The result is that the reader who surfs without images is met with idiotic repetitions like:

Mit ihren Internetsperren gescheitert, dafür aber als künftige Gesundheitsministerin im Gespräch: die bisherige Familienministerin Ursula von der Leyen, hier im Gespräch mit Kanzlerin Merkel

Mit ihren Internetsperren gescheitert, dafür aber als künftige Gesundheitsministerin im Gespräch: die bisherige Familienministerin Ursula von der Leyen, hier im Gespräch mit Kanzlerin Merkel

(http://www.faz.net/s/Rub4D6E6242947140018FC1DA8D5E0008C5/Doc~E642608D1CB31460D9DC15074209ABEC9~ATpl~Ecommon~Scontent.htmle)

(This German text explains that the picture features German politicians Merkel and von der Leyen, and gives some additional information on the latters political situation.)

The result in a screen-reader would almost certainly be the same: An annoying and unneeded repetition of the information.

How to do it instead? In this particular case, one good solution would be to reduce the ALT-text to e.g. “Photograph of Ursula von der Leyen with Chancellor Merkel.”. However, a blanket advice for all situations is not possible; and each website’s, sometimes even each image’s, situation must be judged on its own. Notably, in many cases the legend can be removed entirely—or, indeed, the entire image. (Most images in newspapers are just a waste of space, and the same applies to many other sites.) In other cases a more elaborate description of the image may be a valid solution. In other cases yet, other solutions may be better. The duplication, however, will hardly ever be justified.

www.snap.com

My website was recently (September/October 2009) spidered by this search service. After spending some time reading up on the Internet, I concluded that with a number of negative, and no positive, statements made by various webmasters, I would be well-advised to decline their “services”.

Entering the website, it self, I found it to be of disastrously low quality, starting with the fact that each and every link I clicked (including the “help” and “about us” links) lead to an error page rudely demanding that I activate JavaScript before proceeding. JavaScript should only be used when necessary, never for basic information pages, and great politeness should be taken when requesting the user to turn JavaScript on.

Having done so, I found the help pages to be highly unhelpful; in particular, lacking information on what to put in my robots.txt—something that all legitimate bot users clearly state. (I should have expected no better, in light of other webmasters resorting to blocking IP-addresses...) As a particularity, they violated the basic guide line of displaying questions and answers in a full-text document, forcing the reader to click on each individual question to have the answer displayed through JavaScript—incidentally with an implementation that breaks tabbed browsing. Help pages should be written so that the user is actually helped—even if this help implies that he is enabled to do something (within his rights) that is a disadvantage to the service. See also my discussions of tabbed browsing and FAQs.

I did find a contact form, and submitted a query as to how to block the bot(s): Immediately before (fortunately) submitting, I noticed five stars, and proceeded to investigate what they were for. As it turns out, the form was equipped with a “How satisfied are you?” indicator—which per default was at the highest value... (Obviously, I manually changed it to the lowest.) Notably, this is sufficiently unusual, and the indicator sufficiently unclear, that many users would have submitted the form without reflection—leaving snap with the marketing opportunity to brag about their near perfect customer satisfaction, while the truth is likely to be very different. If unexpected and non-standard elements are used, they should always be explicitly pointed out and explained to the user. Further, any rating of this kind should default to a neutral setting.

In the best of worlds, I should further have reason to complain about the user unfriendliness of using contact forms instead of email addresses; however, as good as every other commercial organization does it the same way. Nevertheless: Contact forms should be avoided in favour of pure email contacts.

My query has, so far, not received an answer. Any commercial organization should make sure that all incoming messages are answered within one or two days, with, at a minimum, a confirmation of receipt and a rough guesstimate as to when a full answer will follow.

Yahoo’s linking

I recently (October 2009) experimented with some none-Google search-engines, having been troubled by too many commercial and too few informative entries. Several, most notably including Yahoo, did not link directly to the found pages, but instead used a back-link to itself, which then redirected to the real URL. Worse, Yahoo did this using different links for each individual search, with the result that the user has no good way of knowing which links he has already visited when varying his search terms. (The browser will not know which different links redirect to the same page, and the standard feature of using different colors for visited and unvisited links is, thereby, circumvented.) In other words, where he could normally just search, open the best-seeming pages, review, search again, open the new best-seeming pages, ..., he is now forced to rely on memory to determine which pages have already been visited—if he is aware of the problem. (Else, he is likely to unintentionally open the same links over and over.)

The reason for this is likely that Yahoo wants to be able to track the movements of the user, be it to legitimately improve its service or to illegitimately spy on the user. While this would be understandable and, in the first case, good in principle, it does not justify the severe worsening of the user interface.


Side-note:

Even in normal cases this kind of indirect links are highly dubious and should be used only when there is very good reason to do so—when in doubt, do not.

A valid use would be a web-interface to an email service which runs outgoing links in an email through some kind of security check to limit the impact of phishing attempts—and gives the user the option to turn this feature off.

An invalid use is a message board that thinks that it needs to inform its users that “You are about to leave this site to view external contents.” (or similar). An absolutely inexcusable variation is “You will be redirect in 10 seconds. To avoid this delay in the future, please register.”—anyone who uses such methods to gain more registered users should be shot on sight. (Further, many of the new registrations will be of no value whatsoever to the message board.)

A particular consideration is that using different URLs for the display and actual link parts (e.g. <a href="http://www.yahoo.com">http://www.google.com</a>) is arguably an unethical deception—even if the user is eventually redirected to the displayed URL. Further, the wary user or browser plugin could well react to this with a suspicion of deliberate fraud, e.g. a phishing attempt, when a less well-known website than Yahoo is involved, which is likely to result in his not using the service at all.


Commenting on Newsmill

I recently commented on an article on Newsmill. My experiences were as follows:

  1. I entered all the mandatory data and my comment.

  2. The page did not give any obvious indication of whether the comment had been accepted or not. A manual check showed that it had not.

    A clear and unmistakable indication of success/failure/whatnot should have been given.

  3. After searching the page for any potential errors, missed mandatory fields, and similar, I saw a very discreet one-line claim that the name I used belonged to a registered user. Between this one line and the entry field there was a long article and a dozen (or so) previous comments. Whether this was an error, a statement of fact, something that required my attention (and, if so, in what form) was not mentioned.

    An error message should always be clear on its implications—in particular, the fact that it is an error message. Further, it should always appear in a position where the user is likely to find it and where its connection to the actual error is clear. (Notably, while the top of the page is very often a good place, it is not always so—certainly, not in this case.)

  4. From context I concluded that the name was probably a hindrance, and revisited the form to supply a new name. Alas, the name field was gone! (While all the other fields remained.)

    If a field needs correcting then this field absolutely, positively, non-negotiably must be present and editable. I note that no instructions were given as what I should do, irrespective of whether I was the registered user with the same name or a by-passer.

  5. In an attempt to correct this some other way, I went back in my browser history to the original entry-page, entered the name there, and re-submitted the page. The new name was automatically altered to match the old name!

    Manual entries should never be automatically corrected without, at a minimum, having the consent of the user. Altering them in such a brainless way as here is inexcusable.

  6. I started searching for other solutions, decided to delete my cookies, correctly hoping that Newsmill would forget the old name. After the following re-submit, everything worked. I had, however, spent more time working around Newsmill’s incompetently programmed comment interface than I had with writing my comment in the first place...

I note in addition that most comment services either accept freely chosen names (that may very well be used by a dozen different persons) or require registration. The hybrid that Newsmill uses is both unexpected and user-unfriendly. Further, no indication was given in advance that this complication existed, which is a proof of exceedingly poor usability testing. (Even a decent test can miss things down the line, but to get the very entry point wrong...) As noted above, this extended to not giving a possibility for existing users to log in, respectively for new users to alter the name.

JSTOR

Lately I have repeatedly been lead to http://www.jstor.org/e over links, e.g. through Google. Invariably I am met with a rude message complaining about cookies not being settable. Worse yet, even pages like “help” are not accessible without cookies. Yet, the site proudly proclaims that accessibility is a priority.

Like all well-versed Internet users, I surf with cookies off by default, and activate them if and when it can be warranted, e.g. for a virtual shopping cart. To require cookies where there patently is no need for them is inexcusable.

I note further that the contact opportunities it provides are artificially limited to customers and prospective customers, which is to the detriment of both it self and the visitors, and that the corresponding forms contain an undue number of mandatory fields—in clear violation of usability guidelines and proportionality.

IAAF

http://www.iaaf.org/e, the website of the international athletics federation, is one of the worst I know—well worthy of an article of its own. One thing, however, is so horrendous that it goes beyond belief: Today (20.02.2010), I clicked on a link that said “Accessible Version”, in the hope that this would improve matters. Nothing happened. I investigated the link more closely, and found that it uses JavaScript.

Let this sink in: A link to an accessible version of the page that can only be called when JavaScript is activated!

This catch-22 is bad enough for ordinary users who prefer to surf with JavaScript turned off. For those who have to use a text based browser or a screen reader, exactly those people who will benefit the most from an accessible version, it is a insurmountable obstacle.

Additionally, this deviates from the golden rule of never calling JavaScript through links, but only through other elements.

I note that during my preceding visit, a few months earlier, this link had not been JavaScript based.

Blekko

Through a new bot-entry in my log files, I was directed to http://blekko.com/e. The message of that page (2010-02-25) was “coming soon”.

Nothing wrong with that—we all have to start somewhere. However, the way the message was presented... This future search engine chose to use an image displaying, in order, the blekko logo, a realistic looking search field with the above mentioned message, and a realistic, if stylized, “search” button.

Imagine what a prospective user landing on this site will try to do with the search field and button...

This demonstrates one of the fundamental rules of interface design, and why it is important: A GUI element should be what it looks like, and do what it appears to do. In this case we have a static image that looks like a search opportunity, but is, in fact, just a two-word message.

An additional minus point is awarded for the use of a JPEG where a GIF or PNG would have been the correct choice.

Deutsche Bahn

Deutsche Bahn (“German Railways”) is one of the most customer-despising companies I have ever encountered—it is also the owner of one of the worst website that I use on even a semi-regular basis.

Consider my recent experiences with its online information-service:

  1. Having several one day travels in a short time period, I looked up one connection, went on and returned from the trip, and tried to look up the next connection in the still open window.

    Knowing from previous experience that the service made poor use of cookies and sessions, causing unnecessary expirations, I deliberately did not just enter the new data—but deliberately clicked on “Neue Anfrage” (“Neu query”).

  2. As expected I was lead to the input mask—but was faced with an obnoxious request to activate JavaScrips or to “click here”. Two strikes at once: Firstly, the service should have permanently noted that I had a no-JavaScript preference from my previous visit (irrespective of any other session handling). Secondly, a good service would have been written to either not require JavaScript in the first place or to handle the transition smoothly. Notably, the non-JavaScript version works sufficiently well compared to the JavaScript version that there is no justification for the request to activate JavaScript in the first place.

  3. Annoyed, I “clicked here”—and was led to the session-has-timed-out page that I wanted to avoid in step 1! This is inexcusable, considering that I had explicitly requested a new query (old session data no longer relevant). Further, it is absurd and grossly incompetent in light of step 2 working without triggering this bug.

  4. Severely annoyed, I followed the instructions of the time-out page to start a new query (for the second time)—and was met with the page of step 2, including the request that I activate JavaScript! Utterly beyond the pale!

(Fortunately, the faux session-timeout claim was not re-triggered.)

In addition to the above, the tool is generally very poorly thought-through and customer unfriendly. A thorough analysis would be considerably longer. Indeed, my experiences so far are such that I find myself in a state of hightened attention, waiting for whatever will be screwed up next, which makes each screw-up the harder to handle. (This biological reaction made reasonable sense up in pre-historic times, where it helped in handling physical threats; however, when working with computers, it just causes increased agitation.)