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

4.
Konsepter:

5.
Konsepter:

6.
Konsepter:

7.
Konsepter:

8.
2. Introductie Visual
Navigation Project

9.
cc-pl.org

10.
cc-pl.org

11.
cc-pl.org

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

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

14.
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…

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

16.
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

17.
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

18.
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

19.
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

20.
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

21.
1. Exploratie
picture: Colorbox

22.
1. Exploratie observaties
picture: UiO

23.
1. Exploratie brainstorms

24.
1. Exploratie picture: Yaron Okun

25.
1. Exploratie picture: Yaron Okun

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

27.
1. Exploratie interviews
picture: Yaron Okun

28.
1. Exploratie query analyse

29.
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

30.
2. Visuele Navigatie

31.
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

32.
2. V. Navigatie data processing

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

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

35.
Subset UJUR Boksamling

36.
Subset UJUR Boksamling

37.
2. V. Navigatie

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

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

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

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

42.
2. Visuele Navigatie

43.
2. Visuele Navigatie

44.
2. Visuele Navigatie

45.
2. Visuele Navigatie

46.
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..)

47.
3. Connecties fysieke & digitale omgeving

48.
3. Connecties fysiek & digitaal

49.
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

50.
3. Connecties
picture: Yaron Okun

51.
3. Connecties
Video: Yaron Okun

52.
3. Connecties
Video: Yaron Okun

53.
Picture: Simen Kjellin
3. Connecties

54.
3. Connecties

55.
3. Connecties

56.
3. Connecties

57.
3. Connecties

58.
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

59.
4. het belang van Evaluatie

60.
4. Evaluatie

61.
4. Evaluatie
Picture: Simen Kjellin

62.
4. Evaluatie

63.
4. Evaluatie

64.
4. Evaluatie

65.
4. Evaluatie

66.
4. Evaluatie

67.
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

68.
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

69.
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

70.
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…

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

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

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

74.
5. Documenteer & deel

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

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

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

78.
Source: Google

79.
Source: Google

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

81.
“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

82.
“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.

83.
• 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:

84.
Lessons along the journey…

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

86.
1. Belang van exploratie

87.
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
• (..$$$..)

88.
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)

89.
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)

90.
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

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

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

93.
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)

94.
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

95.
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

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

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

98.
..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!

99.
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

100.
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