Design Tidbits

back Tidbits Overview

Tools for Design and Visualization

Simplification

Interaction Design

Screen Design

Hierarchies

Visual Design

Design Process

Web, Web Applications, Web Design

Performance

Miscellany

 

 

User Interface Controls and Interaction Techniques of Horror

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.

 

List of Controls and Techniques

Number Five: Drag'n Oops!

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.

 

Number Four: The VLDDL, or Very Long Dropdown List

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:

  • An "endless," non-scrolling dropdown list (perhaps, with scroll options at the ends if necessary)

    A top-to-bottom very long dropdown list
    Figure 4: A "top-to-bottom" very VLDDL
  • A list where the number of visible items is limited and where you have to scroll through the list.

    Scrollable very long dropdown list
    Figure 5: A "limited" VLDDL

    Scrolling a "transient" list is a hassle in itself, particularly, if you have problems with using the mouse.

 

Number Three: The No-Progress Bar

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...

Example of a no-progress ba

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...

 

Number Two: The No-Clue Indicator

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)!

Example of a no-clue indicator

Figure 2: Example of a no-clue indicator

 

Number One: The Blindow

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.

Demo example of a blindow

Figure 1: Demo example of a blindow

 

top top