diff --git a/docs/_data/navigation.json b/docs/_data/navigation.json index 0881e69e..549c0c0b 100644 --- a/docs/_data/navigation.json +++ b/docs/_data/navigation.json @@ -465,61 +465,61 @@ "content": [ { - "name": "DepthTouch (2012)", + "name": "DepthTouch", "path": "/knowledge/case-studies/", "file": "depthtouch.html", "type": "page" }, { - "name": "FlexiWall (2014)", + "name": "FlexiWall", "path": "/knowledge/case-studies/", "file": "flexiwall.html", "type": "page" }, { - "name": "DEEP (2015)", + "name": "DEEP", "path": "/knowledge/case-studies/", "file": "deep.html", "type": "page" }, { - "name": "Interactive Animations (2016)", + "name": "Interactive Animations", "path": "/knowledge/case-studies/", "file": "interactive-animations.html", "type": "page" }, { - "name": "Zoomable Product Browser (2017)", + "name": "Zoomable Product Browser", "path": "/knowledge/case-studies/", "file": "zoomable-product-browser.html", "type": "page" }, { - "name": "Glyphboard (2017)", + "name": "Glyphboard", "path": "/knowledge/case-studies/", "file": "glyphboard.html", "type": "page" }, { - "name": "DeepZoom (2018)", + "name": "DeepZoom", "path": "/knowledge/case-studies/", "file": "deep-zoom.html", "type": "page" }, { - "name": "DisPlay (2018)", + "name": "DisPlay", "path": "/knowledge/case-studies/", "file": "display.html", "type": "page" }, { - "name": "Construction Progress Visualization (2020)", + "name": "Construction Progress Visualization", "path": "/knowledge/case-studies/", "file": "bim.html", "type": "page" }, { - "name": "Layers (2022)", + "name": "Layers", "path": "/knowledge/case-studies/", "file": "layers.html", "type": "page" diff --git a/docs/assets/img/kb/case-studies/glyphboard_gesture-ui.png b/docs/assets/img/kb/case-studies/glyphboard_gesture-ui.png new file mode 100644 index 00000000..e4387308 Binary files /dev/null and b/docs/assets/img/kb/case-studies/glyphboard_gesture-ui.png differ diff --git a/docs/assets/img/kb/case-studies/glyphboard_interaction-concept.png b/docs/assets/img/kb/case-studies/glyphboard_interaction-concept.png new file mode 100644 index 00000000..76bc9233 Binary files /dev/null and b/docs/assets/img/kb/case-studies/glyphboard_interaction-concept.png differ diff --git a/docs/assets/img/kb/case-studies/glyphboard_overview.png b/docs/assets/img/kb/case-studies/glyphboard_overview.png new file mode 100644 index 00000000..57a312e7 Binary files /dev/null and b/docs/assets/img/kb/case-studies/glyphboard_overview.png differ diff --git a/docs/assets/img/kb/case-studies/glyphboard_semantic-zoom.png b/docs/assets/img/kb/case-studies/glyphboard_semantic-zoom.png new file mode 100644 index 00000000..d5428aab Binary files /dev/null and b/docs/assets/img/kb/case-studies/glyphboard_semantic-zoom.png differ diff --git a/docs/assets/img/kb/case-studies/glyphboard_title.jpg b/docs/assets/img/kb/case-studies/glyphboard_title.jpg new file mode 100644 index 00000000..19636d03 Binary files /dev/null and b/docs/assets/img/kb/case-studies/glyphboard_title.jpg differ diff --git a/docs/assets/img/kb/case-studies/zoomable-produc-browser_interaction-concept.png b/docs/assets/img/kb/case-studies/zoomable-product-browser_interaction-concept.png similarity index 100% rename from docs/assets/img/kb/case-studies/zoomable-produc-browser_interaction-concept.png rename to docs/assets/img/kb/case-studies/zoomable-product-browser_interaction-concept.png diff --git a/docs/knowledge/case-studies/glyphboard.md b/docs/knowledge/case-studies/glyphboard.md index 603f8bd2..219aae95 100644 --- a/docs/knowledge/case-studies/glyphboard.md +++ b/docs/knowledge/case-studies/glyphboard.md @@ -12,6 +12,8 @@ title: "Case Study: Glyphboard" 3. [Scenario](#scenario) 4. [Findings and Discussion](#findings-and-discussion) +![Case Study: Big Data Landscapes on Elastic Displays]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_title.jpg){:.content__title-image} + | Profile field | Description | | ------------- | ----------- | | Title | Glyphboard | @@ -28,14 +30,14 @@ title: "Case Study: Glyphboard" The fifth case study explored **zoomable user interfaces for information visualization**. The profile covers the historical dSense and ReFlex iterations, following the conventions in the [case study overview](overview.md#case-study-profiles). The published repository may include later adaptations. - - ## Research Questions Glyphboard returned to the exploration of complex information spaces after earlier studies had investigated simpler content and navigation concepts. [FlexiWall](flexiwall.md) had identified zoomable user interfaces as a promising scenario, but its layer-based interaction model did not readily support continuous navigation. The single-touch implementation from [Interactive Animations](interactive-animations.md) provided the initial technical basis. The application context was **Glyphboard**, a web application developed at the Chair of Media Design at Technische Universität Dresden. It uses dimensionality reduction to visualize multidimensional data as a scatterplot and reveals individual attributes through more detailed glyphs as magnification increases. Although Glyphboard supports both magnifying lenses and full-screen enlargement, this case study concentrated on immersive exploration through continuous full-screen zoom. +![Impressions of the Glyphboard app in the vertical Elastic Display]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_overview.png) + Three questions guided the work: - How can surface deformation control zooming in, zooming out, and resetting the view, while supporting meaningful levels of detail through semantic zoom? @@ -76,6 +78,8 @@ Later iterations therefore used multi-touch detection to distinguish one-point z The starting view was a scatterplot of a preprocessed, clustered dataset. Spatial proximity indicated related items, while colour identified broader group membership. Earlier FlexiWall experiments had compared clustering results; Glyphboard instead supported further exploratory analysis within a complex dataset. +![Semantic Zoom in the Scatterplot]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_semantic-zoom.png) + Semantic zoom progressively revealed the dimensions of individual items at configurable magnification thresholds: | Detail level | Data representation | @@ -98,6 +102,8 @@ The multi-touch version switched to panning when **two pressure points** were de Moving a contact laterally adjusted direction; reversing the contacts' relative depths reversed movement. Adding or removing a second contact enabled transitions between pan and zoom without selecting a separate interface control. +![Glyphboard: Interaction Concept]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_interaction-concept.png){:.full-width-scheme .transparent-background} + ### Hover, Feedback, and Reset The refined interaction introduced a shallow-deformation range before zoom began. Within this range, the application displayed details for the nearest data point in the vicinity of the detected position, providing a **hover effect**. Further deformation crossed the zoom threshold. @@ -106,6 +112,8 @@ Visual feedback identified the current operation: a cursor and contextual inform The later reset gesture used **three rapid presses**. When deformation exceeded a configurable amplitude three times within a configurable time interval, both zoom and pan returned to their initial values. This offered a way to return to the overview and explore another region without pulling the membrane. +![Updated UI with Gesture Feedback]({{ site.baseurl }}/assets/img/kb/case-studies/glyphboard_gesture-ui.png) + **[⬆ back to top](#table-of-contents)** ## Findings and Discussion diff --git a/docs/knowledge/case-studies/other-prototypes.md b/docs/knowledge/case-studies/other-prototypes.md index a6d7bf7d..88f4a71e 100644 --- a/docs/knowledge/case-studies/other-prototypes.md +++ b/docs/knowledge/case-studies/other-prototypes.md @@ -13,10 +13,10 @@ title: "Case Studies: Other Prototypes" These smaller prototypes explored specific technological and conceptual approaches, addressing open questions identified during model development. They also served to validate the ReFlex framework in practical use and were demonstrated at selected events to gather user feedback. -![EscapeRoom: Game concepts with vibrotactile feedback]({{ site.baseurl }}/assets/img/kb/case-studies/others-escape-room.png){:.content__title-image} - ## EscapeRoom +![EscapeRoom: Game concepts with vibrotactile feedback]({{ site.baseurl }}/assets/img/kb/case-studies/others-escape-room.png){:.content__title-image} + | Profile field | Description | | ------------- | ----------- | | Title | EscapeRoom | @@ -56,10 +56,10 @@ Vibrotactile cues accompanied these gestures, connecting their execution and com **[⬆ back to top](#table-of-contents)** -![MIReFlex: Spatial Audio Placement in Multisensory Interaction Room]({{ site.baseurl }}/assets/img/kb/case-studies/others-flightsim.jpg){:.content__title-image} - ## FlightSim +![MIReFlex: Spatial Audio Placement in Multisensory Interaction Room]({{ site.baseurl }}/assets/img/kb/case-studies/others-flightsim.jpg){:.content__title-image} + | Profile field | Description | | ------------- | ----------- | | Title | FlightSim | @@ -94,10 +94,10 @@ Steering followed a **joystick-like mapping**: the direction vector was the diff **[⬆ back to top](#table-of-contents)** -![MIReFlex: Spatial Audio Placement in Multisensory Interaction Room]({{ site.baseurl }}/assets/img/kb/case-studies/others-mireflex.jpg){:.content__title-image} - ## MIReFlex +![MIReFlex: Spatial Audio Placement in Multisensory Interaction Room]({{ site.baseurl }}/assets/img/kb/case-studies/others-mireflex.jpg){:.content__title-image} + | Profile field | Description | | ------------- | ----------- | | Title | MIReFlex | diff --git a/docs/knowledge/case-studies/zoomable-product-browser.md b/docs/knowledge/case-studies/zoomable-product-browser.md index 09dc7168..8bc463bc 100644 --- a/docs/knowledge/case-studies/zoomable-product-browser.md +++ b/docs/knowledge/case-studies/zoomable-product-browser.md @@ -74,7 +74,7 @@ Three layouts were explored: random placement, four quadrants organized by produ Each product was represented by a circular glyph. Semantic zoom progressively exposed more attributes for a smaller set of products, while geometric enlargement provided space to read them. -![Visualization Concept: Glyphs and Leve-of-Detail]({{ site.baseurl }}/assets/img/kb/case-studies/zoomable-product-browser_visualization-concept.png){:.full-width-scheme .transparent-background} +![Visualization Concept: Glyphs and Level-of-Detail]({{ site.baseurl }}/assets/img/kb/case-studies/zoomable-product-browser_visualization-concept.jpg){:.full-width-scheme .transparent-background} | Detail level | Product representation | | ------------ | ---------------------- |