Sliders in web design are becoming as ubiquitous as the fading yellow highlight. They certainly offer a more interesting and sophisticated way of interacting with a lengthy data set (remember the old days: choose from a drop-down, click Submit, wait, look at new page, click Back button, get lost …).
Some sliders allow changes to the top and bottom of a range of values:
Movoto.com
Kayak.com
Other sliders are designed to help the user choose a value (especially useful when it’s a hard value to remember):
Yahoo! UI Library - RBG Slider Control
Some sliders even include sparklines (small data displays), a very data-rich approach:
Prisjakt.nu (via IXDA-Discuss):
Oakland CrimeSpotting
Other than the obvious cool factor, there are definite advantages to using sliders:
- instant feedback allows the user to focus on the data itself, rather than on manipulating it
- it’s much faster to modify a number of criteria at once (price, bedrooms, bathrooms) while keeping the cursor in one place (compared to a bunch of drop-down lists)
- small changes to the chosen ranges display right away, allowing for faster decision making
There’s always a downside:
- Sliders aren’t good for small adjustments or for choosing very specific values, because they require too much fine coordination (not everyone uses a mouse, and some of us have a lot of cat hair on the mouse’s infrared sensor, which makes it jump around a lot)
- People who aren’t used to seeing sliders may not even notice it’s there, and get frustrated.
Nonetheless, sliders are a very useful design element, so get going and use one! Better yet, use one on every page!
I’m intrigued by the complexity of presenting statistics on a map, and in my research I’ve come across two compelling but different approaches to mapping crime data: Oakland Crimespotting and the LA Times Homicide Map.
Oakland Crimespotting
Created by Stamen Design, Oakland Crimespotting uses data from CrimeWatch, Oakland’s community mapping website. Crime reports are grouped by violent crimes, property crime, and “quality of life” crimes. Data on the map can be adjusted with a slider that is also a bar graph of recent crime reports.
A detail view (”Crime Reports”) offers more information about the nature of a crime and a close-up view of the location. You can also subscribe to an RSS feed for a specific geographic area.
The site puts crime information into the hands of the community, allowing residents to research and investigate patterns of activity, and to ask questions. As the site’s creators write, “As citizens we have a right to public information. A clear understanding of our environment is essential to an informed citizenry.”
Los Angeles Times Homicide Map
The LA Times Homicide Project by Jill Leovy combines homicide data from the LA County Coroner’s Office with original reporting. The filtering and user interface are stunning, and I can’t think of a better example of an information-rich data display.
Names and photos of the homicide victims are included next to the map. This humanizes the data in a powerful way, making it impossible to look at the map as just a warning about “dangerous” neighborhoods. There may be patterns to discover in the demographic and geographic information presented, but the tragic human side of the story makes it much more than just statistics. Sadly, new data (i.e. people) are added weekly.
Via Ajaxian, I learned about a new data visualization project called JsVis, released in January 2007.
JsVis, by Kyle Sholtz, is a JavaScript framework for creating “Snowflake graphs” like this one:
There is a lot of potential for visualizing complex relationships with this sort of tool. The basic layout is best for tree structures, but a thread on the discussion board indicates that there is a non-tree display method (particle model layout) which warrants investigation.
Simile, a project MIT, has created several open source tools for visualizing data on the web. The interfaces are clean and free of unnecessary decoration, and the AJAX interaction encourages exploration and questioning. These are an excellent addition to the information design toolbox.
Timeplot is a “DHTML-based AJAXy widget for plotting time series and overlay time-based events over them (with the same data formats that Timeline supports).” Timeplot requires no software installation, server-side or client-side, and can be used with a simple comma-delimited file or with XML. The graph has a liquid layout size so it doesn’t impact your site’s design.
The example below shows an interactive look 3 factors: New Legal Permanent Residents in the U.S. (per year) vs. U.S. Population vs. U.S. History.
My example of a timeplot
Exhibit 2.0 “creates interactive data-rich web pages without ever touching a database or a web server, or doing any programming.”
Timeline “is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information.”
My example of a timeline
Smashing Magazine compiled a long list of modern approaches to visualizing data, including mind maps, charts, maps, bubble charts, histograms and more. It’s an excellent reference for gathering ideas and challenging assumptions about how to present data and relationships.
Example below from visualcomplexity.com.
.
Juan C. Duersteler writes that Mendeleev’s periodic table is brilliant information visualization …
When the Russian chemist Dmitri Mendeleev published the first version of his Periodic Table of the Elements in 1869 he couldn’t imagine that it would become in due time one of the most outstanding information visualisations and that many fields would use it more than one century later as a visual metaphor.
… but the paradigm doesn’t transfer to other fields of information. For example, the Periodic Table of Visualization Methods falls short:
Despite the good work in classifying more than a hundred different visualisation methods, using the scheme of the periodic table and the exact shape of the same for displaying the methods is more than disputable since the paradigm the periodic table adheres to (atomic number, chemical properties, orbitals, etc) has no parallelism to the case of visualisation methods, which invalidates the visual metaphor it intends to be. Stephen Few discusses this point very cleverly in his blog Visual Business Intelligence. Hence I will not abound on this here.
The fact is that mimicking existing paradigms just because they provide a familiar lay-out doesn’t add any insight into what we are looking for, that is regularities in the methods of visualisation. Trying to map the regularities of the chemical elements into those of desserts, or visualisations, is misleading since it hampers finding true regularities and although it covers the transmission of knowledge it doesn’t contribute to pattern detection and even less to knowledge discovery, outstanding outcomes of Mendeleev work.
Building a taxonomy of visualisation methods is not a simple issue and having an equivalent of the in depth work done by Mendeleev for chemistry in Information Visualisation would be a major advance, that, in my opinion we should pursue by finding the main features of each method, building a new paradigm and representing them in original and meaningful ways in accordance with said paradigm.
See also: Periodic Table of Visualization Methods
