Please avoid accidentally creating a Joke:Win32/ClickMe

Screenshot of a Joke:Win32/ClickMe malware
Joke:Win32/ClickMe malware

I just encountered this page on Amazon, which drove me nuts! See the motion pictures below. If your browser does not support HTML5 video tag, click here to see the video (it’s very small).

There is a label displaying the currently selected SKU name or the to-be-selected SKU name (when an SKU is hovered). The label wraps. When an SKU is hovered, the change of text alters the layout of the SKU buttons, which (logically) alters the hover status. Safari actually will not alter the hover status, unless the pointer moves again, at least allowing the user to change the selection (with mouse). However, the pointer is being constantly moved by the user, until he/she realises he/she must stop moving the cursor for the thing to calm down, and this flickering really hurts my eyes (and the experience).

There is a scenario where this kind of ‘flickering’ is often found and very severe, the selection mode. Many apps displaying a list of objects (photos, e-mails, to-dos, files; you name them) allows the user to select those objects and choose an operation to perform on them. Usually, when the user first selects an object, the UI alters and the app enters a ‘selection mode’, in which the app might allow multiple selection and displays available operations. Sometimes, the objects to be selected will move upon entering this mode. This is very unpleasant because the user might have some items in mind before making the first selection, often assuming the objects are not moving and have their mind planned to touch or click the items very rapidly, only to find that the items have moved after the initial selection, by when the user might have made incorrect selections (and perhaps even misinvoked some incorrect operations) because vision signal processing is slower than mental inertia.

There are another two examples in my usage of apps. Outlook for iOS and Photos (for Windows 10) app. See the motion pictures below (or this and this).

Outlook for iOS enters selection mode when an e-mail is selected by holding it. The position of the items will move upon mode change. In Photos (for Windows) app, there are checkboxes on photos and there is a ‘Select’ button on the top app bar. The position of photos might move when switching from/to selection mode.

Selection mode in built-in apps in iOS is entered by tapping the ‘Select’ button, hence they are immune to this problem even if the controls move when entering selection mode. Mail app on Windows 10 also uses ‘Select’ button design.

In Groove Music, selection mode in Albums or Artists view is invoked by context menu item, and that in Songs view can be entered by either context menu or checkboxes. In all cases, the position of items remain intact when entering into or exiting from selection mode (though the entering animation for Songs view is pretty awkward).

In Windows Phone 7/7.5/8/8.1, the official design is to enter selection mode when an item is selected by tapping the left edge (or right in RTL culture) of an item. This is a very nice design. See here for a screenshot. In the built-in apps, the position of the items remains intact upon mode change. Photos hub even preserves the space previously occupied by deleted items (see this video) until you leave the view.

In Windows 8/8.1, the official design for touch selection is to swipe orthogonally to the scroll direction (i.e., swipe left/right to select in a list, and swipe up/down to select in a grid; specifically, tiles in Start can be selected by swiping up/down). If I recall correctly, built-in apps keep items’ position unchanged when entering selection mode.

Please enable JavaScript to view the comments powered by Disqus.