presentation @ HCI International 2014 – Developer, designer and user characteristics 25 JUNE 2014 – Crete, Greece

1. HCI 2014 Developer, designer and user characteristics
Exploring Similarity
Improving Product Search with Parallel Coordinates
WED, 25 JUNE 2014
Mandy Keck, Martin Herrmann,
Andreas Both, Dana Henkens, Rainer Groh
Chair of Media Design - Technische Universität Dresden This work has been supported by the European Union and the Free State
Saxony through the European Regional Development Fund

2. HCI 2014 25 June 2014 M. Keck, M. Herrmann, A. Both, D. Henkens, R. Groh 2 | 12
Introduction
_ Research project »VISEA - Visual Search Interfaces«
_ focus: visual interfaces for product search
PROBLEM:
_ in the context of financial data, complex search
masks often overstrain non-experts
_ tables not suited for a quick comparison of multi-
dimensional data
OUR CONCEPT:
_ allows analysis of multi-dimensional data and
comparison of various attributes at a glance
_ enables the comparison and exploration of similar
products

3. HCI 2014 25 June 2014 M. Keck, M. Herrmann, A. Both, D. Henkens, R. Groh 3 | 12
Search Paradigms
FACETED BROWSING:
_ allows multiple access points for the search
_ iterative refinement of the result set
_ Faceted Classification describes items through a
combination of facets
_ each facet addresses a different property
SEARCH BY EXAMPLE:
_ starts with an example
_ can be generalized to find similar examples
Facet 1 Facet 2
facet value 1
facet value 2
facet value 3
facet value 4
facet value 1
facet value 2
facet value 3

4. HCI 2014 25 June 2014 M. Keck, M. Herrmann, A. Both, D. Henkens, R. Groh 4 | 12
Parallel Coordinates
Facet 1 Facet 2 Facet 3_ 2-dimensional representation of multi-dimensional data
across a set of parallel axes
_ each axis represents one attribute of the multi-
dimensional data set
_ a polyline represents a single data item
_ well suited for continuous data attributes

5. HCI 2014 25 June 2014 M. Keck, M. Herrmann, A. Both, D. Henkens, R. Groh 5 | 12
Parallel Sets
Facet 1
Facet 2
_ basic layout is derived from parallel
coordinates
_ axes replaced by containers representing
categories
_ containers are scaled according to the
frequency of the corresponding category
_ containers are connected by streams
representing the logical conjunction of the
adjacent containers
_ size of these streams give an impression
of the frequency of items included in the
conjunction
_ mostly used for categorical data attributes

6. Interface Concept (BASIS LAYOUT)
Discount-Optionsschein DAX 20/12/2013 (SG31HF)
Bonus-Zertifikat Munich Re 12/2014 (SG2103)
Outperformance-Zertifikat Metro AG 19/06/2015 (SG3U5D)
Bonus-Zertifikat BMW AG 12/2014 (SG2FPU)
Alpha-Zertifikat S & P GSCU WTI ER (long) (SG12RH)
Discount-Optionsschein DAX 20/12/2013 (SG31HF)
Bonus-Zertifikat Munich Re 12/2014 (SG2103)
Outperformance-Zertifikat Metro AG 19/06/2015 (SG3U5D)
Bonus-Zertifikat BMW AG 12/2014 (SG2FPU)
Alpha-Zertifikat S & P GSCU WTI ER (long) (SG12RH)
Discount-Optionsschein DAX 20/12/2013 (SG31HF)
Bonus-Zertifikat Munich Re 12/2014 (SG2103)
Outperformance-Zertifikat Metro AG 19/06/2015 (SG3U5D)
Bonus-Zertifikat BMW AG 12/2014 (SG2FPU)
Alpha-Zertifikat S & P GSCU WTI ER (long) (SG12RH)
Discount-Optionsschein DAX 20/12/2013 (SG31HF)
Bonus-Zertifikat Munich Re 12/2014 (SG2103)
Outperformance-Zertifikat Metro AG 19/06/2015 (SG3U5D)
Bonus-Zertifikat BMW AG 12/2014 (SG2FPU)
Alpha-Zertifikat S & P GSCU WTI ER (long) (SG12RH)
Discount-Optionsschein DAX 20/12/2013 (SG31HF)
Bonus-Zertifikat Munich Re 12/2014 (SG2103)
Outperformance-Zertifikat Metro AG 19/06/2015 (SG3U5D)
RESULTS HISTORY COLLECTION
FACET 1 FACET 2 FACET 3
Produkttyp : Discount-Zertifikat
Basiswerttyp : Aktie
Performance : 0.28
Anlagezeitraum : 1.4 Jahre
Ausgabetag : 2012/8/8
Bewertungstag : 2013/12/23
Spread : 0.0006
Link : ISIN: DE000SG3EHM7
compare
bookmark
Discount-Operationsschein
Discount-Zertifikat
Outperformance-Zertifikat
Alpha-Zertifikat
Bonus-Zertifikat
Closed End Turbos
Open End Turbos
Zins
Rohstoff
Condor-Operationsschein
Währung
Aktie
Index
Volatilität
1– 6
0.5 – 1
0 – 0.5
-0.5 – 0
-1– -0.5
Result ViewParallel Axis View
Facet Value
height shows the distribution of data
items within the facets
Semantic Zoom
mouse scrolling zooms selected axis
to explore the underlying hierarchy of a facet
Facet Filter
Selecting a container activates a filter,
leaving only items matching the facet value
Rearrangement of Axes
allows a better comparison of two axes of interest
Result List
Brushing visually links a product on the
left side to the associated list item
History
item can be added to the history,
is highlighted in both views to distinguish
them from unexplored or new products
Collection
product can be bookmarked and stored
in a separate collection.
Detailed Product
Information

7. HCI 2014 25 June 2014 M. Keck, M. Herrmann, A. Both, D. Henkens, R. Groh 7 | 12
Interface Concept (PARALLEL COORDINATES)
Faceted Browsing
Multiple filters can be activated on one
or different axes to create complex filters
Search by example
comparing feature can be used to identify
products with similar properties,
automatically centers all intersections
Fuzzy Filter
scalable rectangular zone around the
median line of the visualization,
filter adjusts the opacity of the lines
depending on a calculated relevance value

8. HCI 2014 25 June 2014 M. Keck, M. Herrmann, A. Both, D. Henkens, R. Groh 8 | 12
Interface Concepts (PARALLEL SETS)
Faceted Browsing
Multiple filters can be activated on one
or different axes to create complex filters
Mouse-over
highlights all subsets, which contain the
same items of the current subset

9. HCI 2014 25 June 2014 M. Keck, M. Herrmann, A. Both, D. Henkens, R. Groh 9 | 12
Demonstration

10. Evaluation (PARALLEL COORDINATES VS PARALLEL SETS)
TIME IN SEC
ANALYSIS COMPARISON SEARCH
90
80
70
60
50
40
30
20
10
0
SOLUTIONTIME FOR ALLTASKS
PARALLEL COORDINATES PARALLEL SETS
RESULTS OFTHE QUESTIONNAIRE
4.5
4
3.5
3
2.5
2
1.5
1
0.5
0
LIKERT SCALE
LIKERT SCALE:
5 - STRONGLY AGREE
4 - AGREE
3 - NEITHER AGREE OR DISAGREE
2 - DISAGREE
1 - STRONGLY DISAGREE
A B C D E F
A - EFFECTIVENESS
B - LEARNABILITY
C - SATISFACTION
D - JOY OF USE
E - EFFICIENCY
F - RANGE OF FUNCTIONS
_ evaluation of both interface concepts for three different
tasks
analysis
comparison
search
_ 13 users (7 females) in the age range of 23 – 60 years
_ most of them were not familiar with PC/PS or financial
products
_ first part: participants had to solve 9 tasks per interface,
divided into 3 task types with 3 tasks per type
_ second part: participants had to complete a question-
naire to evaluate each interface concept regarding
effectiveness, learnability, satisfaction, joy of use,
efficiency, and range of functions
_ use of 5-point Likert scale.

11. Evaluation (FEATURES) THE FEATURE WAS USEFUL FOR SOLVING THE GIVEN TASKS
THE FEATURE WAS EASY TO USE
FEATURES
4.5
4
3.5
3
2.5
2
1.5
1
0.5
0
LIKERT SCALE
LIKERT SCALE:
5 - STRONGLY AGREE
4 - AGREE
3 - NEITHER AGREE OR DISAGREE
2 - DISAGREE
1 - STRONGLY DISAGREE
A B C D E F
A - FACET FILTER
B - ZONE FILTER
C - CENTER PRODUCT FOR
COMPARING
D - REARRANGEMENT OF AXES
E - PANNING OF AXES
F - ZOOMING OF AXES
G - RESULT LIST
G
_ third part: users had to complete a questionnaire
which evaluated individual features:
facet filter
zooming & panning of all axes
rearrangement of the axes
result list, history and collection
comparing feature
fuzzy filter
offered by PC & PS regarding usefulness and usability
_ use of 5-point Likert scale

12. HCI 2014 25 June 2014 M. Keck, M. Herrmann, A. Both, D. Henkens, R. Groh 12 | 12
Conclusion & Future Work
_ combines faceted search and search by example paradigm with the visualization method
of Parallel Coordinates / Parallel Sets
_ distinctive strategies for analysis, comparing, and searching in large multi-dimensional datasets
_ preliminary user study: all participants easily solved tasks from all of the three task types
_ evaluation with different use cases (e.g. travel search) and user groups
Fig. 01 Travel Search with
Parallel Set