Download - OKCon 2013 Moodboards

Transcript
Page 1: OKCon 2013 Moodboards

All use cases were collected during a workshop at OKCon 2013, that focused on knowledge space navigation and information retrieval strategies.

The use cases were combined with illustrative moodboards, referring to common techniques of spatial and structural visualization, to facilitate further discussion and subsequently lead to UI concepts for data visualization in the domain of knowledge management.

contact: [email protected]

Thomas Hüsing

KNOWLEDGE SPACE NAVIGATIONCommon spatial and structural metaphors as knowledge

navigation concepts.

OKCon Conference Geneva 2013, 16th-18th September

Page 2: OKCon 2013 Moodboards

Professional Career Map / Use case

Lucy Berg, Professional Career Map, Andreas Perret

MediaMap on iPad or Paper, Poster.

ParametersHer strengths & weaknesses.Define model, coordinates of.

❖ good at languages❖ not much with math❖ the jobs she may have a potential with❖ Future family life ❖ will she have to travel❖ grants available

Extracted use case

Page 3: OKCon 2013 Moodboards

PROFESSIONAL CAREER MAP 1

1

43

1) Mind mapA mind map is often created around a single word or text, placed in the center,

to which associated ideas, words and concepts are added. Major categories radiate from a central node, and lesser categories are sub-branches of larger branches

http://en.wikipedia.org/wiki/Mind_map

2) Radar chartA radar chart is a graphical method of displaying multivariate data in the form

of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The relative position and angle of the axes is typically uninformative.

http://en.wikipedia.org/wiki/Radar_chart

3) Tube mapAs a schematic diagram, it shows not necessarily the geographic but rather the

relative positions of stations along the lines, stations' connective relations with each other and fare zones. The basic design concepts have been widely adopted for other network maps around the world, especially that of mapping topologically rather than geographically.

http://en.wikipedia.org/wiki/Tube_map

4) T mapThis qualitative and conceptual type of medieval cartography could yield

extremely detailed maps in addition to simple representations. The earliest maps had only a few cities and the most important bodies of water noted. The four sacred rivers of the Holy Land were always present.

http://en.wikipedia.org/wiki/T_and_O_map

5) Heat mapA heat map is a graphical representation of data where the individual values

contained in a matrix are represented as colors.http://en.wikipedia.org/wiki/Heatmap

23

5

Page 4: OKCon 2013 Moodboards

PROFESSIONAL CAREER MAP 2

1

43

1) GamificationGamification is the use of game thinking and game mechanics in non-game

contexts to engage users in solving problems.http://en.wikipedia.org/wiki/Gamification

2) Line of playThe line of play is the configuration of played tiles on the table. It starts with a

single tile and typically grows in two opposite directions when players add matching tiles. In practice, players often play tiles at right angles when the line of play gets too close to the edge of the table.

http://en.wikipedia.org/wiki/Domino

3) Tube mapAs a schematic diagram, it shows not necessarily the geographic but rather the

relative positions of stations along the lines, stations' connective relations with each other and fare zones. The basic design concepts have been widely adopted for other network maps around the world, especially that of mapping topologically rather than geographically.

http://en.wikipedia.org/wiki/Tube_map

4) Heat mapA heat map is a graphical representation of data where the individual values

contained in a matrix are represented as colors.http://en.wikipedia.org/wiki/Heatmap

23

Page 5: OKCon 2013 Moodboards

STARTUP BUDGET DJ

1

43

Use caseCut and invest.

Cost browser, requirements browser, reallocate mixer.Show x,y program ❖ cost, benefit❖ cost, flexibility❖ cost, impact/influence

1) Line chartA line chart or line graph is a type of chart which displays information as a

series of data points called 'markers' connected by straight line segments.http://en.wikipedia.org/wiki/Line_chart

2) Trend lineA trend line is formed when a diagonal line can be drawn between two or more

price pivot points. They are commonly used to judge entry and exit investment timing when trading securities

http://en.wikipedia.org/wiki/Trend_line_(technical_analysis)

3) Interactive document.. reacts on changed budget data.

4) Version controlled documentRevision control is the management of changes to documents. Revisions can

be compared, restored and merged.http://en.wikipedia.org/wiki/Revision_control

5) Bubble chartA bubble chart is a type of chart that displays three dimensions of data.http://en.wikipedia.org/wiki/Bubble_chart

23

5

Page 6: OKCon 2013 Moodboards

Artur Tomato, Glider pilot

1

43

Use caseRaising air glider cockpit browser.Show raising air over 10km in the cockpit.

1) MapA map is a visual representation of an area – a symbolic depiction highlighting

relationships between elements of that space such as objects, regions, and themes.

http://en.wikipedia.org/wiki/Map

2) Force directed graph A physical simulation of charged particles and springs places related

characters in closer proximity, while unrelated characters are farther apart. http://bl.ocks.org/mbostock/4062045

3) 3D projection3D projection is any method of mapping three-dimensional points to a two-

dimensional plane. As most current methods for displaying graphical data are based on planar two-dimensional media, the use of this type of projection is widespread, especially in computer graphics, engineering and drafting.

http://en.wikipedia.org/wiki/3D_projection

4) Augmented reality.. view of a physical, real-world environment whose elements are augmented

(or supplemented) by computer-generated sensory input.http://en.wikipedia.org/wiki/Augmented_reality

23

Page 7: OKCon 2013 Moodboards

CONFERENCE ORGANIZER

1

43

Use case

Media: Paper map, no mobile.Different languages, incorrect information,

transport maps.Add heatmap of participants locations.

1) Sequence diagramA sequence diagram is an interaction diagram that shows how processes

operate with one another and in what order. It is a construct of a Message Sequence Chart.

http://en.wikipedia.org/wiki/Sequence_diagram

2) Tube mapAs a schematic diagram, it shows not necessarily the geographic but rather the

relative positions of stations along the lines, stations' connective relations with each other and fare zones. The basic design concepts have been widely adopted for other network maps around the world, especially that of mapping topologically rather than geographically.

http://en.wikipedia.org/wiki/Tube_map

3) Heat mapA heat map is a graphical representation of data where the individual values

contained in a matrix are represented as colors.http://en.wikipedia.org/wiki/Heatmap

4) LabyrinthA single-path (unicursal) labyrinth has only a single, non-branching path, which

leads to the center. A labyrinth in this sense has an unambiguous route to the center and back and is not designed to be difficult to navigate.

http://en.wikipedia.org/wiki/Labyrinth

23

Page 8: OKCon 2013 Moodboards

HEAD OF ARCHIVE

1

4

3

Use caseArchive info, composition of topics, growth, use

main depositors, main downloaders. Color coded. Network of all projects the archive is part of, with funding info. Comparison with other institutes qua activities, output, funding.

1) Tube mapThe basic design concepts have been widely adopted for other network maps

around the world, especially that of mapping topologically rather than geographically.

http://en.wikipedia.org/wiki/Tube_map

2) T mapThis qualitative and conceptual type of medieval cartography could yield

extremely detailed maps in addition to simple representations. http://en.wikipedia.org/wiki/T_and_O_map

3) Heat mapA heat map is a graphical representation of data where the individual values

contained in a matrix are represented as colors.http://en.wikipedia.org/wiki/Heatmap

4) Force directed graph A physical simulation of charged particles and springs places related

characters in closer proximity, while unrelated characters are farther apart. http://bl.ocks.org/mbostock/4062045

5) MandalaIn common use, mandala has become a generic term for any plan, chart or

geometric pattern that represents the cosmos metaphysically or symbolically; a microcosm of the universe.

http://en.wikipedia.org/wiki/Mandala

6) Faceted searchFaceted search, .., is a technique .., allowing users to explore a collection of

information by applying multiple filters. Facets correspond to properties of the information elements.

http://en.wikipedia.org/wiki/Faceted_search

23

5

6

Page 9: OKCon 2013 Moodboards

Copyright for all graphics: Thomas Hüsing

FIN

[email protected]