|An Introduction to Designing User Interface Controls at SAP|
|Golden Rules for Bad User Interfaces|
|SAP HTMLB Guidelines|
By Gerd Waloszek, SAP AG, SAP User Experience – March 13, 2008
On this page, I would like to start a collection of "controls and techniques of horror," that is, a selection of user interface controls and interaction techniques that terrorize users in a number of ways – be it that they annoy them, steal their time, mislead them, or whatever. I begin the collection with five examples, hoping that it will grow over time.
Note: The examples are listed in backward order – the most recently added control comes first. In all other respects, the order of the controls is arbitrary and does not reflect their significance.
Drag'n oops! is a variant of the drag'n drop (or: drag-and-drop, drag&drop) interaction technique. Drag-and-drop means that the user selects an object on the screen with the mouse and "drags" it to a new location by holding the mouse button pressed and moving the mouse. For example, for deleting a file the user selects a file icon and drags it to the trash can icon, where he or she drops the file by releasing the mouse button.
The drag'n oops! techniques works very similar, apart from that the user releases the mouse button at some inappropriate location. The result can sometimes be frightening, sometimes disastrous, sometimes funny, at least very interesting, depending on where the user released the mouse button, that is, oops!ed the object. In some cases, it is also difficult to detect the oops!ed object because the system placed it at an arbitrary location (for example, according to an invisible grid). Advanced drag'n oops! has no undo and is therefore even more challenging.
Most of us will probably have come across the phenomenon of dropdown lists with one hundred or more entries – particularly on the Web it is very common. Let's call it the VLDDL (very long dropdown list) to give it a name. Typically, VLDDLs appear in address data. For example, you may want to order a product in an online store. In the address section of the order wizard you are required to provide the country where you live using a VLDDL.
I found two variants of the VLDDL:
Do you know what a "no-progress" bar is? It's a progress bar, which tells you that a process will be finished "in an minute." Actually, however, the bar and the time forecast stay unchanged – until the bar suddenly and unexpectedly disappears...
Figure 3: No-progress bar, which told me that installation would be finished in about a minute for more than ten minutes
The no-progress bar in Figure 3 actually fooled me for more than ten minutes, with my annoyance increasing every minute...
The "no-clue" indicator (or: "clueless" indicator) is closely related to the no-progress bar. Typically, it consists of a waiting cursor or a loading animation without any indication of the length of a process. After about ten seconds, the waiting cursor or any other animation should give way to a progress indicator, which tells the user how long a process will take. The "no-clue" indicator, however, remains on the screen, performing its animation nearly endlessly and telling the user: "Me, the developer of this application, and the system have no clue whatsoever of how long this process will last. Maybe, it's a good idea to get a cup of coffee, maybe, I'll be off soon." Happy rotating (and twirling your thumbs)!
Figure 2: Example of a no-clue indicator
Did you ever sit in front of a white (or blank) browser window for minutes and waited for a Web page to load? Unsuspectingly, you had clicked a link or entered an URL, and the page would and would not load. In such a case, you came across an instance of a "blindow," which is a short form for "blind window." The decay times of blindows are variable and mostly unpredictable. They may range from a few seconds to a quarter of an hour and more.
Figure 1: Demo example of a blindow