http://www.infodesignpatterns.com en ../patterndetail.php?pattern=118 When you display data in the form of numerous items, such as maps or networks, the user often has an interest in a whole group of elements. Clicking on each item separately in order to inspect or manipulate them can quickly become a cumbersome task. A selection mask helps the user to select a whole range of graphic objects merely circumscribing them with the mouse pointer. It draws a (usually rectangular) dynamic shape from the point the user pressed the mouse cursor to the point it was released again. All elements overlapped by the resulting shape are marked as selected then. ../patterndetail.php?pattern=117 Drag and drop is sort of the mother of all digital interaction techniques. It simulates a simple but practical action that we perform countless times per day: Picking things up and move them to a different location. In interactive infographics, this ability can be useful as well when the graphic elements do not have necessarily fixed positions but can be moved around, e.g. to clear up the display space or to compare items by putting them next to each other. ../patterndetail.php?pattern=116 In some cases it is desirable that the user can not only select a certain point on an interval but inspect a whole range at once. For instance, instead of only looking at the events that occurred at a single day on a timeline, perhaps the data of a whole week or month are of interest for the user as well. To this end the double slider extends the single slider pattern and lets the user narrow down whole interval segments by moving two sliders along the interval line. ../patterndetail.php?pattern=115 A slider is an interface element that lets the user select values that lie in a continuous fashion on an interval scale. Instead of choosing between an array of buttons or other UI elements (like checkboxes or radio buttons), the slider incorporates theoretically an endless number of value options to choose from. ../patterndetail.php?pattern=114 Similarly to the radio button element, a dropdown menu offers the user a set of values to choose one item from. The major difference (and advantage, that is the fact that the dropdown menu requires significantly less display space than a set of radio button elements, as in the normal state of the interface only the selected item is visible while the other options stay hidden. This is why the dropdown menu provides a useful UI element alternative for situations in which the user is required to make an exclusive selection (one and only one choice at a time) from a larger lit of options. ../patterndetail.php?pattern=113 The checkbox interface element appears quite similar to the radio button, but bears one significant functional difference. While radio buttons force the user to make a one-and-only-one selection from a set of items, checkboxes allow to select one or multiple items from a list. In so far they act as complementary elements to radio buttons in the field of selective user input. ../patterndetail.php?pattern=112 Radio buttons are the standard the standard UI element for single-choice options (compare to the multi-choice functionality of checkboxes). Their behavior clearly communicates the point to the user that he has to decide for one (and only one) element from a list of values. The fact that all possible options are visible at all times makes it unmistakable. The trade-off, however, lies in the increased space required, especially compared to dropdown menus. ../patterndetail.php?pattern=111 When an element on your information display performs a change of its visual state (like a menu that expands, a popup that appears or a diagram that adjusts to refreshed database information), the user can easily loose track of what is happening in front of him. The main reason for this is that such state changes occur out of a sudden and in a discrete fashion as the final display state simply replaces the original one. This stands in heavy contrast to reality where we are used to the fact that things take their time to change visual appearance: A car that moves along the road, a balloon losing air that deflates gradually and so on. Apply gradual transitions to your visualization, and guide the user’s eyes and mind from the former to the latter state of what you want to display. Avoid sudden display changes and perform state transitions smoothly with unobtrusive but clear animation sequences instead. ../patterndetail.php?pattern=110 When you design an interactive infographic, you will encounter many situations in which not all information is instantly displayed to the user. The great advantage of interactive media is to separate the content into levels of priority, and to show or hide these different levels depending on circumstances. Datatips, also known as pop-ups, are one popular way of hiding more detailed information from a main display in order to keep it clear and easy to navigate. It lets the user drill into the information as he wants to, instead of overloading him with content at first encounter with the application. ../patterndetail.php?pattern=109 In some situations, mostly when displaying data in map-style visualizations, you will encounter the problem of cluttered displays - limited display space collides with an abundance of information that needs to be included. Because a compromise between the two resulting extremes (easily identifiable items containing little information versus highly detailed data items rendered useless by their amount of data) is hardly a satisfying solution, avoid these situations by using a more flexible display technique. ´The abstract and universal concept of Detail on Demand separates the information of each data item into several cascading levels. At the topmost level, all items are visible and accessible to the user, but they bear relatively little information. Upon user selection, the item in question reveals more detailed information - which usually requires more display space and therefore may obscure a portion of the other items. If the user is interested in greater detail, he might even be able to “dig” deeper into the item he has selected, for instance by clicking a button that leads him to a separate information page.