Sparkline filtering
22 Oct 2009 - 12:05pm
6 replies
956 reads
Greg Petroff
2004
Any good examples out there of sparkline filtering? I pitched this
concept to Delta 4 years ago and it did not go anywhere. I had yet to
see it until this morning looking for a new refrigerator on the LG
site.
http://www.lge.com/us/appliances/refrigerators/index.jsp
Anyone else out there see examples of this?
Get the feed
Comments
Kayak.com has a pretty good example of it in the travel context. I
think I first saw them implement it a couple of years ago.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46961
When I first saw this post I wasn't sure what a sparkline filter was
so I did some searching and found:
http://sparkline.wikispaces.com/Examples
http://www.readybetgo.com/slots/progressive/ is a good example I
think. (Please correct me if wrong)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46961
@Greg Thomas:
Greg Petroff is talking about the subtle "tick marks" above the
"capacity", "width" and "price" sliders on the left column of
the LG site.
The charts in readybetgo are not sparklines.
>From Wikipedia:
The term 'Sparkline' was proposed by Edward Tufte for
"small, high resolution graphics embedded in a context of words,
numbers, images." Tufte describes sparklines as "data-intense,
design-simple, word-sized graphics".
Edward Tufte on "sparklines":
http://is.gd/4wBCx
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46961
I would call the tick marks on the LG site more of a label or marker than a
filter. For a filter you'd need more multi-variant data so that you could
apply filters to the sparklines. Tufte has got a couple of examples of what
I would consider to be "sparkline filtering" in his book "Beautiful
Evidence" on pages 54 & 55. There you have a table of sparklines with color
filter applied on page 55. And on page 54 he uses the red whisker/tick to
indicate if a team was held scoreless.
HTH,
Sean
On Thu, Oct 22, 2009 at 1:33 PM, Santiago Bustelo
<santiago at bustelo.com.ar>wrote:
> @Greg Thomas:
>
> Greg Petroff is talking about the subtle "tick marks" above the
> "capacity", "width" and "price" sliders on the left column of
> the LG site.
>
> The charts in readybetgo are not sparklines.
>
> >From Wikipedia:
> The term 'Sparkline' was proposed by Edward Tufte for
> "small, high resolution graphics embedded in a context of words,
> numbers, images." Tufte describes sparklines as "data-intense,
> design-simple, word-sized graphics".
>
> Edward Tufte on "sparklines":
> http://is.gd/4wBCx
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=46961
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>
The tick marks/spark lines are not the filter but rather a "result
set hint" for existing filters; sometimes an enhancement, sometimes
critical to the filtering interaction. Result set hinting can be
applied to ANY filter mechanism as long as the control doesn't
create a performance hint. It's really the same concept that you see
applied to radio buttons and links in ebay and car shopping sites,
just applied to a slider control.
For years I've pushed this sort of richness for filtering controls;
and unfortunately unsuccessful in selling the idea to product teams.
Really a shame.. users have to ping pong around the filter controls
until they get something compelling instead to getting to a
compelling result set on the the first try.
This sort of a control the "low bar" of interaction now. The sooner
we give this type of control archetype status the better.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46961
The LG site is using something called an attribute explorer, devised by
Robert Spence at Imperial College here in the UK around 15 years ago. (I
attended a session on information visualization at CHI in the mid 90's
where Ben Schneiderman did a section on it). I keep wondering why no one
is using it effectively (Amazon's diamond selector at
http://www.amazon.com/Loose-Diamonds-Diamond-Engagement-Rings/loosediamo
nds?_encoding=UTF8&productGroupID=loose_diamonds is half-hearted since
it does not show the result in real time). The LG implementation is a
great improvement.
There is an IBM demo of attribute explorer here:
http://www.ibm.com/developerworks/library/us-atex/
Regards,
William Hudson
Syntagm Ltd
Design for Usability
UK 01235-522859
World +44-1235-522859
US Toll Free 1-866-SYNTAGM
mailto:william.hudson at syntagm.co.uk
http://www.syntagm.co.uk
skype:williamhudsonskype
Syntagm is a limited company registered in England and Wales (1985).
Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon
OX14 2DS.
Confused about dates in interaction design? See our new study (free):
http://www.syntagm.co.uk/design/datesstudy.htm
12 UK mobile phone e-commerce sites compared! Buy the report:
http://www.syntagm.co.uk/design/uxbench.shtml
Ajax Design and Usability course - Berlin:
http://www.nngroup.com/events/
> -----Original Message-----
> From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-
> bounces at lists.interactiondesigners.com] On Behalf Of greg
> Sent: 22 October 2009 11:06 AM
> To: discuss at ixda.org
> Subject: [IxDA Discuss] Sparkline filtering
>
> Any good examples out there of sparkline filtering? I pitched this
> concept to Delta 4 years ago and it did not go anywhere. I had yet to
> see it until this morning looking for a new refrigerator on the LG
> site.
>
> http://www.lge.com/us/appliances/refrigerators/index.jsp
>
...