OKCon 2013 Moodboards

  • 25 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
25
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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: thomas.huesing@fu-berlin.de Thomas Hüsing KNOWLEDGE SPACE NAVIGATION Common spatial and structural metaphors as knowledge navigation concepts. OKCon Conference Geneva 2013, 16th-18th September
  • 2. Professional Career Map / Use case Lucy Berg, Professional Career Map, Andreas Perret Media Map on iPad or Paper, Poster. Parameters Her 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
  • 3. PROFESSIONAL CAREER MAP 1 1 4 3 1) Mind map A 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 chart A 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 map As 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 map This 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 map A 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 2 3 5
  • 4. PROFESSIONAL CAREER MAP 2 1 4 3 1) Gamification Gamification 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 play The 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 map As 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 map A 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 2 3
  • 5. STARTUP BUDGET DJ 1 43 Use case Cut and invest. Cost browser, requirements browser, reallocate mixer. Show x,y program ❖ cost, benefit ❖ cost, flexibility ❖ cost, impact/influence 1) Line chart A 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 line A 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 document Revision control is the management of changes to documents. Revisions can be compared, restored and merged. http://en.wikipedia.org/wiki/Revision_control 5) Bubble chart A bubble chart is a type of chart that displays three dimensions of data. http://en.wikipedia.org/wiki/Bubble_chart 2 3 5
  • 6. Artur Tomato, Glider pilot 1 4 3 Use case Raising air glider cockpit browser. Show raising air over 10km in the cockpit. 1) Map A 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 projection 3D 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 2 3
  • 7. CONFERENCE ORGANIZER 1 4 3 Use case Media: Paper map, no mobile. Different languages, incorrect information, transport maps. Add heatmap of participants locations. 1) Sequence diagram A 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 map As 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 map A 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) Labyrinth A 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 2 3
  • 8. HEAD OF ARCHIVE 1 4 3 Use case Archive 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 map 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 2) T map This 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 map A 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) Mandala In 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 search Faceted 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 2 3 5 6
  • 9. Copyright for all graphics: Thomas Hüsing FIN thomas.huesing@fu-berlin.de