1. Mikaela Aamodt | Dan Michael Heggø | Hugo Huurdeman | Helge Mjelde | Live Rasmussen | Heidi Rustad | Kyrre Låberg | Nina Thodesen
Visual Navigation Project
University of Oslo Library
bit.ly/VisualNavigationProject
Hugo C. Huurdeman @timelessfuture
KNVI Jaarcongres 9 Nov. 2017
De collectie in een ander licht
creatieve inzet van nieuwe technologie
in de digitale en fysieke bibliotheekomgeving

2. Mikaela Aamodt | Dan Michael Heggø | Hugo Huurdeman | Helge Mjelde | Live Rasmussen | Heidi Rustad | Kyrre Låberg | Nina Thodesen
Visual Navigation Project
University of Oslo Library
bit.ly/VisualNavigationProject
Hugo C. Huurdeman @timelessfuture
KNVI Jaarcongres 9 Nov. 2017
De collectie in een ander licht
creatieve inzet van nieuwe technologie
in de digitale en fysieke bibliotheekomgeving

3. 1. Context

13. Konsepter:

14. Konsepter:

15. Konsepter:

16. Konsepter:

18. 2. Introductie Visual
Navigation Project

19. cc-pl.org

20. cc-pl.org

21. cc-pl.org

22. rethink how users can explore & interact
with library materials
in a digital environment
Visual Navigation Project

23. rethink how users can explore & interact
with library materials
in a digital environment
Visual Navigation Project
“Collectie in een ander licht”

24. Mikaela Aamodt | Dan Michael Heggø | Hugo Huurdeman | Helge Mjelde | Live Rasmussen | Heidi Rustad | Kyrre Låberg | Nina Thodesen
Visual Navigation Project
University of Oslo Library
bit.ly/VisualNavigationProject
in collaboration with Department of Informatics
by support of the National Library of Norway
start: Sept. 2016. duration two years
Three project streams…

27. Physical interaction (2)
Visualization (1)
Visual navigation
prototypes
Continuation (3)
Extended subject
search interface
Enhanced data &
infrastructure

28. Physical interaction (2)
Visualization (1)
Visual navigation
prototypes
Continuation (3)
Extended subject
search interface
Enhanced data &
infrastructure
1. Visual Navigation
Creëren van prototypes voor visuele book browsing and navigatie, gebruik infrastructuur

29. Physical interaction (2)
Visualization (1)
Visual navigation
prototypes
Continuation (3)
Extended subject
search interface
Enhanced data &
infrastructure
1. Visual Navigation
Creëren van prototypes voor visuele book browsing and navigatie, gebruik infrastructuur
2. Physical Interaction
Herzien interactie m/bronnen in digitale & fysieke omgeving, bv. via touch table

30. Physical interaction (2)
Visualization (1)
Visual navigation
prototypes
Continuation (3)
Extended subject
search interface
Enhanced data &
infrastructure
1. Visual Navigation
Creëren van prototypes voor visuele book browsing and navigatie, gebruik infrastructuur
2. Physical Interaction
Herzien interactie m/bronnen in digitale & fysieke omgeving, bv. via touch table
3. Continuation and Extension
Uitbreiden en verbeteren onderwerpsontsluiting en infrastructuur

31. Sep.’16 Okt. Nov. Dec. Jan.’17 Feb. Mar. Apr. May Jun.
Prototyping
ideas d3
Initial
testing
Refine & adapt
to touch table
Design
HF
app
Deploymt.
HF app
Infrastructure
development
User
test
UI-old
S1: Visual
Navigation
S2: Physical
Interaction
S3: Continua-
tion & Extension Refine-
ment UI
& system
Design
Abel
app
Eval
1a
Eval
1b
Yaron Master project prototyping and testing
d3
familiarizati
on
creating website
Documentation
& outreach
weekly project reports
User
test
UI-new
Refine-
ment
Y. Final proto
VIRAK
work-
shop
LibCarp
work-
shop
Deploy
Abel
app
Proto-
typing
ideas
User
testing
Adaptation
(visual nav.)
VIRAK
submis-
sions
Present at Realf, HumS, Jur, Med,
Ledermøte, WebGrp, DigS,
MapProj,Alma/Oria, BibsysWG
Prepping
VIRAK
contribs
Test
Vis.
Nav
Apps
Prep.
demos
VIRAK
Eval
Eval
LibCarp
work-
shop
brain-
storms
INF2260 Bachelor project
Query
analysis Oria
Library
observations
Inter-
view
s
brain-
storm
s
Eva-
luate
year
1 of
pro-
ject

32. Sep.’16 Okt. Nov. Dec. Jan.’17 Feb. Mar. Apr. May Jun.
Prototyping
ideas d3
Initial
testing
Refine & adapt
to touch table
Design
HF
app
Deploymt.
HF app
Infrastructure
development
User
test
UI-old
S1: Visual
Navigation
S2: Physical
Interaction
S3: Continua-
tion & Extension Refine-
ment UI
& system
Design
Abel
app
Eval
1a
Eval
1b
Yaron Master project prototyping and testing
d3
familiarizati
on
creating website
Documentation
& outreach
weekly project reports
User
test
UI-new
Refine-
ment
Y. Final proto
VIRAK
work-
shop
LibCarp
work-
shop
Deploy
Abel
app
Proto-
typing
ideas
User
testing
Adaptation
(visual nav.)
VIRAK
submis-
sions
Present at Realf, HumS, Jur, Med,
Ledermøte, WebGrp, DigS,
MapProj,Alma/Oria, BibsysWG
Prepping
VIRAK
contribs
Test
Vis.
Nav
Apps
Prep.
demos
VIRAK
Eval
Eval
LibCarp
work-
shop
brain-
storms
INF2260 Bachelor project
Query
analysis Oria
Library
observations
Inter-
view
s
brain-
storm
s
Eva-
luate
year
1 of
pro-
ject

33. 1. Exploratie
picture: Colorbox

34. 1. Exploratie observaties
picture: UiO

35. 1. Exploratie brainstorms

36. 1. Exploratie picture: Yaron Okun

37. 1. Exploratie picture: Yaron Okun

38. Searching
ExplorationGaming
Navigation
Personalization
Relaxation
Creation
Collabo-
ration
Simulations
1. Exploratie affinity mapping

39. 1. Exploratie interviews
picture: Yaron Okun

40. 1. Exploratie query analyse

44. Explorative studies
Lessons along the way… (1)
• Overeenkomsten & verschillen ‘branches’ (observ.)
• Ondersteuning studie & ontspanning (brainst.)
• “Collaborate, Create, Personalize, Explore, Simulate,
Relax, Search, Navigate”
• Stimuleren gebruik van bibliotheekdiensten (intvw.)
• “On the fence”
• Stimuleren nieuwsgierigheid, ‘surprise’, inspiratie
• Herzien “klassieke" interactie met catalogus (query)
• Gebruiken statistieken (logs) & data for verbetering
• “Gepersonaliseerde" benadering

45. 2. Visuele Navigatie

46. geo terms, e.g. Oslo, Finnmark, Göttingen,
Lillehammer etc.
genres, e.g. Biografier,
Ungdomslitteratur, Humor
temporal terms, e.g. 1900-tallet, 1990-
tallet
topics, e.g. Biologi,
Matematikk
relations, e.g. broader, narrower,
exactMatch
Variety of (visual) exploration options! Specific to
each vocabulary
2. Visuele Navigatie kansen

47. 2. V. Navigatie data processing

48. 2. V. Navigatie voorbeelden
Force-directed diagrams
relations: DDC numbers (size: Amazon rating)

49. 2. V. Navigatie voorbeelden
Force-directed diagrams
relations: DDC numbers (size: Amazon rating)

50. Subset UJUR Boksamling

51. Subset UJUR Boksamling

52. 2. V. Navigatie

53. 2. Visuele Navigatie
Word Clouds
words: book abstracts
colors: ratings

54. 2. Visuele Navigatie
Word Clouds
words: book abstracts
colors: ratings

55. Interactive bar graphs
color: DDC, size: Amazon rating
2. Visuele Navigatie

56. Interactive bar graphs
color: DDC, size: Amazon rating
2. Visuele Navigatie

57. 2. Visuele Navigatie

58. 2. Visuele Navigatie

59. 2. Visuele Navigatie

60. 2. Visuele Navigatie

63.
Lessons along the way… (2)
• Belang van data
• Verrijking bestaande data (covers, abstracts)
• Gebruik subject vocabularies & mappings
• Geschiktheid data, visualisatie & schermgrootte
• sommige visualisaties passen niet bij de data
• sommige visualisaties passen niet op het scherm
• Nut van bestaande ‘frameworks’ voor ontwikkeling
• Bijvoorbeeld, D3js
• Groot contrast met bestaande bibl. catalogi, systemen
• Belang van testen nieuwe tools (..ongoing..)

64. 3. Connecties fysieke & digitale omgeving

65. 3. Connecties fysiek & digitaal

66. Stream 2: Physical Interaction
• Stream 1 & 3 build on top of
existing work and infrastructure
• Approach Stream 2:
experiment with novel ways of
interaction in physical space
• with library’s book
collections
• experiments with a touch
table (Science Library)
• Includes an INF2260 project &
INF Master project Yaron Okun
Visualiza-
tion (1)
Picture: Marina Tofting
3. Connecties

67. 3. Connecties
picture: Yaron Okun

68. 3. Connecties
Video: Yaron Okun

69. 3. Connecties
Video: Yaron Okun

70. Picture: Simen Kjellin
3. Connecties

71. 3. Connecties

72. 3. Connecties

73. 3. Connecties

74. 3. Connecties

77.
Lessons along the way… (3)
• Kansen voor integratie apps in bibliotheekruimte
• Collectie-focus: Science Fiction
• Event-focus: Abel Prize, Hidden Figures
• Een nieuw object in de bibliotheek..!
• “What is het?” “Een touch table?” “Een vriezer?”
• …enige aanmoediging nodig
• “Touch me!” icoon
• Ervaring opdoen in touch app ontwikkeling
• Praktische issues (design v/touch, ‘kiosk’, content ..)
• User experience: understandability & usability
• Re-usability & repeatability

78. 4. het belang van Evaluatie

79. 4. Evaluatie

80. 4. Evaluatie
Picture: Simen Kjellin

85. 4. Evaluatie

86. 4. Evaluatie

87. 4. Evaluatie

88. 4. Evaluatie

89. 4. Evaluatie

90. 4. Evaluatie
0
10
20
30
40
50
60
70
1
10
19
28
37
46
55
64
73
82
91
100
109
118
127
136
145
154
163
172
181
190
199
208
217
226
235
244
100%0% 20% 40% 60% 80%
numberofpagesviewed
percentage of users
n=249

91. 4. Evaluatie
0
10
20
30
40
50
60
70
1
10
19
28
37
46
55
64
73
82
91
100
109
118
127
136
145
154
163
172
181
190
199
208
217
226
235
244
0
10
20
30
40
50
60
70
1
8
15
22
29
36
43
50
57
64
71
78
85
92
99
106
113
120
127
134
141
148
155
162
169
176
100%0% 20% 40% 60% 80%
numberofpagesviewed
percentage of users
n=249
n=182

92. 4. Evaluatie
0
10
20
30
40
50
60
70
1
10
19
28
37
46
55
64
73
82
91
100
109
118
127
136
145
154
163
172
181
190
199
208
217
226
235
244
0
10
20
30
40
50
60
70
1
8
15
22
29
36
43
50
57
64
71
78
85
92
99
106
113
120
127
134
141
148
155
162
169
176
0
10
20
30
40
50
60
70
1 4 7 10 13 16 19 22 25 28 31 34 37 40 43 46 49 52 55 58 61 64 67
100%0% 20% 40% 60% 80%
numberofpagesviewed
percentage of users
n=249
n=182
n=66

93.
Lessons along the way… (4)
• Monitoren and detecteren van problemen
• navigatie: “clicks leading to nowhere”, swipes
• Niet-gebruikte app content (diepte vs breedte)
• Redesign op basis van gebruiksstats
• e.g. Hidden Figures: na twee weken
• Ontwikkelen van “toolbox” analytics usage data
• microticks: opvangen data
• python scripts: automatische samenvatting data
• ‘One chance for a good impression’
• Eerste interactie optimaliseren (belang van content)
• Aansluiten bij interesses gebruiker…

94. 5. Documenteer & deel
Workshop VIRAK
conferentie
12 Juni ‘17
nominated for VIRAK
NYSKAPENDE prize

95. v
5. Documenteer & deel
Visualization
Workshop
14 June ‘17

96. 5. Documenteer & deel
Touch App
Workshop
20 Nov ‘17
Nog enkele plaatsen beschikbaar!

97. 5. Documenteer & deel

98. @BookNavigation
5. Documenteer & deel
bit.ly/VisualNavigationProject

99. Next: Some further ideas…
Touch Table
BookLibrary card
RFID

100. Visually retrieve (and save) personalized materials
important materials for the field, inspiration, etc.

101. Source: Google

102. Source: Google

103. “Surveillance”: Library the last “anonymous” place?
Source: Google

104. “Surveillance”: Library the last “anonymous” place?
However, lots of opportunities for using “interaction” data
e.g. sensors (movement w/i library), object detection, digital system use..
Source: Google

105. “Surveillance”: Library the last “anonymous” place?
However, lots of opportunities for using “interaction” data
e.g. sensors (movement w/i library), object detection, digital system use..
Source: Google
Important to find a balance.

106. • Design and development
• Personalization (RFID scanning)
• Emnesøk (subject search)
• Enhanced infrastructure (covers, abstracts, etc)
• Lowering barriers to (touch) application creation
• Dissemination
• Integration of tools in regular (online) infrastructure
(Some) Next Steps:

107. Lessons along the journey…

108. Lessons…
• Belang van:
1. Exploratie
2. Data
3. Samenwerking
4. Documentatie & hergebruik
5. UX

109. 1. Belang van exploratie

110. 1. Belang van exploratie
• ‘Out of the box’ inspiratie
• Maar ook via:
• Gebruikersstudies (brainstorms, interviews, etc)
• Formulering vragen & methodologie belangrijk!
• Exploratie van usage logs
• voor detecteren issues
• Uittesten tools, frameworks, hardware
• (..$$$..)

111. 2. Belang van data
• ‘More than meets the eye’ *
• Boven water halen “wat er is”, bijv.
• Gebruiksstatistieken ExLibris Primo (etc.)
• Gebruiksstatistieken eigen tools
• Metadata: gebruik en verrijking
• covers, abstracts, …
* Journal paper (forthcoming)

112. 3. Belang van samen-
werking
• Relatief klein (%) project-team, maar:
• Samenwerking vakreferenten, technici,
management, event organisers, designers, ..
“everything in-house”
• “Library of our imagination” (motivatie)

113. 3. Belang van samen-
werking
• Relatief klein (%) project-team, maar:
• Samenwerking vakreferenten, technici,
management, event organisers, designers, ..
“everything in-house”
• “Library of our imagination” (motivatie)
• Samenwerking met afd. informatica (int. design)
• Projectvoorstellen als inspiratie studenten
• Ondersteuning van projecten studenten

114. VB: Samenwerking met
studenten
Book Motion (2013)
Real Fiction (2017)
iBeacons

115. VB: Samenwerking met
studenten
Book Motion (2013)
Real Fiction (2017)
iBeacons

116. 4. Belang van documentatie
& hergebruik
• Community building
• Website, social media, meetups & workshops
• Delen code via Github (scriptotek)
• Pragmatische aanpak - ‘Not reinventing the wheel’
• Aanschaffen modules (bv pdf-reader), indien nodig
• Gebruik van frameworks, indien mogelijk
• XIMPEL framework (ximpel.net)

117. 5. Belang van UX
• “Niets is zo vanzelfsprekend als het lijkt”
• Bijv. user expectations, onduidelijke navigatie
• User tests (bijv. “guerilla” tests)
• Constant monitoren van mogelijke issues

119. 5. Belang van UX
• “Niets is zo vanzelfsprekend als het lijkt”
• Bijv. user expectations, onduidelijke navigatie
• Initiele user tests (bijv. “guerilla” tests)
• Constant monitoren van mogelijke issues
• Challenge: Optimalisatie voor “eerste interactie”
• Doel app, doelgroep
• Interessante & dynamische content

120. “It is still possible to dream..”

121. “It is still possible to dream..”

122. ..big thanks!
• University of Oslo Library:
• Dan Michael Heggø, Kyrre Traavik Låberg @ Science Lib
• Nina Thodesen, Mikaela Aamodt @ Med Lib
• Live Rasmussen, Helge Mjelde, Heidi Rustad
• & other colleagues & collaborating students & study participants
• XIMPEL.net
• Winoe Bhikharie
• & organizers KNVI congress for the invitation!

123. Mikaela Aamodt | Dan Michael Heggø | Hugo Huurdeman | Helge Mjelde | Live Rasmussen | Heidi Rustad | Kyrre Låberg | Nina Thodesen
Visual Navigation Project
University of Oslo Library
bit.ly/VisualNavigationProject
Hugo C. Huurdeman @timelessfuture
KNVI Jaarcongres 9 Nov. 2017
De collectie in een ander licht
creatieve inzet van nieuwe technologie
in de digitale en fysieke bibliotheekomgeving

124. Mikaela Aamodt | Dan Michael Heggø | Hugo Huurdeman | Helge Mjelde | Live Rasmussen | Heidi Rustad | Kyrre Låberg | Nina Thodesen
Visual Navigation Project
University of Oslo Library
bit.ly/VisualNavigationProject
Hugo C. Huurdeman @timelessfuture
KNVI Jaarcongres 9 Nov. 2017
De collectie in een ander licht
creatieve inzet van nieuwe technologie
in de digitale en fysieke bibliotheekomgeving