forked from ofwb/ofwb.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
259 lines (216 loc) · 14.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<title> Our Future with Books | NYU ITP | Microsoft Design Expo 2017</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<link rel="icon" type="image/png" href="imgs/favicon.ico">
<style>
.measure {
max-width: 35em !important;
}
body {
background-color: #fef8f0;
border: 10px solid white;
}
</style>
</head>
<body>
<br>
<div class="tc ph4">
<img src="imgs/logo.png" width="38%" alt="">
</div>
<br><br><br>
<div class="pa4">
<blockquote class="athelas ml0 mt0 pl4 black-90 bl bw2 b--blue measure center">
<p class="f5 f4-m f3-l lh-copy measure mt0">
“What an astonishing thing a book is. It’s a flat object made from a tree with flexible parts on which are imprinted lots of funny dark squiggles. But one glance at it and you’re inside the mind of another person, maybe somebody dead for thousands of
years. Across the millennia, an author is speaking clearly and silently inside your head, directly to you. Books break the shackles of time. A book is proof that humans are capable of working magic."
</p>
<cite class="f6 ttu tracked fs-normal">―Carl Sagan</cite>
</blockquote>
</div>
<article class="athelas pa4">
<p class="f6 f4-ns lh-copy measure center">
Re-imagine the future and potential of learning technologies. We are designing a mixed-reality tool that optimizes our experience learning from printed books. Our brains capabilities for attention and deep thinking are diminishing due to our increasingly
screen-based lives, and we envision this tool as part of the solution to that problem. <br> <br>Just as an expert human tutor might, the technology we propose will understand both the book you are reading and your brain's behavior while learning,
guiding you through rich meaning making and discovery. In addition to conversing with your AI tutor, we see great opportunity in the realm of overlaid augmented content being produced by our developers, by book publishers, and by a community of
users.
</p>
</article>
<div class="tc ph4">
<dd class="ml0">Microsoft Design Expo Challenge Presentation, July 2017.</dd><br>
<video poster="./imgs/poster.png" src="https://sec.ch9.ms/ch9/4fb3/52bb0864-1495-4f7a-aacb-c59e1a344fb3/39553_mid.mp4" controls width="43%"></video> <br><br>
</div>
<div class="tc ph4">
<dd class="ml0">Concept Video.</dd><br><br>
<iframe src="https://player.vimeo.com/video/225869376" width="720" height="486" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<br><br><br>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> 0. INITIAL QUESTIONS/IDEAS</h1>
</div>
<!-- <div class="tc ph4">
<img src="imgs/initial-ideas2.gif" alt="">
</div> -->
<article class="athelas pa4">
<p class="f6 f4-ns lh-copy measure center">
How do we create subtle interactive experiences with the analog printed word? How do we help preserve a place for books in our increasingly screen-based futures? This concept seeks to explore the intersection between current mixed reality technology and
the timeless experience of learning from books. We see this not as a animation-oriented feature that ‘brings to life’ a literary moment, but rather as a potential educational tool.
</p>
<div class="tc ph4">
<img src="imgs/whiteboards.jpg" width="50%" alt="">
</div>
<br>
<div class="tc ph4">
<img src="imgs/whiteboards2.jpg" width="50%" alt="">
</div>
<br><br>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> 1.FIRST RESEARCH/EXPLORATION </h1>
</div>
<br><br>
<p class="f6 f4-ns lh-copy measure center">
We explored the many departments at NYU and the faculty in those departments that might be relevant to our project, then started doing research in those same fields, specifically: education, psychology, and neuroscience. <br><br> Kenzo (Psychology-new
methods to study cognitive psychology) <br> <br> - How might this technology help cognitive psychologists better study the science of reading/learning? Scott (Education-Metacognition) <br> - How interactive should learning be – when does it impair
or enhance cognition? <br> - Teaching for metacognition could dramatically alter students’ deficiencies. <br><br> Juan Jose (Education & AR) <br><br> - Can we blend formal and informal learning spaces to create an environment of engaging continuous
learning? <br> - The potential of trans-media storytelling, creating dynamic, team-based, collaborative problem solving, participatory environments that encourage exploration, examination, reasoning, debate and negotiation – vital skills in the
modern workplace and that of the future. <br><br> Daniella (Neuroscience) <br><br> - How information flows among broadly distributed brain regions involved in visual, phonological, and language processing to support reading? For optimal learning
to occur, the brain needs conditions under which it is able to change in response to stimuli (neuroplasticity) and able to produce new neurons (neurogenesis). The most effective learning involves recruiting multiple regions of the brain for the
learning task. These regions are associated with such functions as memory, the various senses, volitional control, and higher levels of cognitive functioning. “Reading is fascinating because it is a uniquely human skill. tacognitive skill (Dinsmore
et al., 2008, Veenman et al., 2006).
</p>
<!-- <blockquote class="ph0 f4 f1-ns measure-narrow center">
<p class="fw9 lh-copy lh-title-ns"> add a quote </p>
</blockquote> -->
<br><br>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> II. POSSIBLE SCENARIOS/STORYBOARDS</h1>
</div>
<br><br>
<p class="f6 f4-ns lh-copy measure center">
We decided on four possible scenarios, with different approaches in each case. Although we may end with a mixture of the features described in each one, these storyboards will help us define more accurately certain properties for specific groups.
</p>
<br>
<div class="tc ph4">
<img src="imgs/whiteboards3.jpg" width="50%" alt="">
</div>
</article>
<br><br>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> III. STATING OUR MISSION AND VISION</h1>
</div>
<br>
<article class="athelas pa4">
<p class="f6 f4-ns lh-copy measure center">
<strong>Vision:</strong><br> To revolutionize the potential of learning technologies. <br><br>
<strong>Mission:</strong><br> By designing the intersection of books, machine learning, and mixed reality. <br><br>
<strong>Keywords:</strong><br> Books - MR - Learning/Metacognition<br><br>
<strong>Vision Questions:</strong><br> - A book that can improve how we learn. <br> - Are we getting dumber as tech is getting smarter? <br> - 18% of the world’s population cannot read or write, 112 million youth globally are illiterate of which
60.7% are women. <br> - A tool to aid and optimize learning-to revolutionize learning technologies. <br> - Learn how to unlearn our limitations. Implement MR technology to transform how and how much we can learn from reading books. <br> - Optimize
the process of human learning, with the ultimate goal of augmenting the timeless design of books with mixed reality technology.
</p>
</article>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> IV. USER TESTING</h1>
</div>
<article class="athelas pa4">
<p class="f6 f4-ns lh-copy measure center">
We looked for users who have to consume large amounts of written content and decided to focus on students and lawyers Therefore we took a trip to NYU’S Bobst library so we could observe and speak to diverse students and ask them about their reading and
study habits Here’s some of what they said:
</p>
<div class="tc ph4">
<iframe src="https://player.vimeo.com/video/225876566" width="720" height="486" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</article>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> V. INITIAL PROTOTYPE + BRAINSTORMING</h1>
</div>
<article class="athelas pa4">
<p class="f6 f4-ns lh-copy measure center">
As we continued to brainstorm and sketch our possible design, we paired our research with our user interviews to start making low fi prototypes of interfaces, gestures, and features that they mentioned would be useful.
</p>
</article>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> VI. DESIGN PROCESS + USER INTERFACE </h1>
</div>
<article class="athelas pa4">
<p class="f6 f4-ns lh-copy measure center">
Using everything we learned, we designed a suite of features that would help our users absorb and retain information they read and maintain the necessary focus for their learning session
<br><br>
<strong>AI Tutor</strong><br> a. Metacognitive skill training. <br> b. MR diagrams / model - making map w/ fingers. <br> c. Knowledge retention statistics - dashboard. <br> d. Conversation mode - summarize verbally what you learned - quote bubblesl,
smart questions. <br><br>
<strong>High Performance</strong><br> a. Immediate cross reference & crowd sourced + expert annotations - overlaid notes in a stack. <br> b. Note taking - spatial. <br> c. Flow optimization / find rhythm / notice when you slow down, you've got four
hours to crunch. <br> d. Prereading / post reading quiz / future reading suggestions. <br> e. Read - fast skimming. <br><br>
<strong>Schools</strong> <br> a. Group / classmates analytics - teacher POV shows realtime student's attention, like sims. <br> b. Teacher interaction mode - teacher can take action based on analytics - dashboard. <br> c. Connect the dots. <br> d. Reading ability test literacy. <br>
</p><br>
<div class="tc ph4">
<img src="imgs/whiteboards4.jpg" width="50%" alt="">
</div>
</article>
<br><br>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> VII. RESEARCH INTERVIEWS + TECHNOLOGY </h1>
</div>
<br><br>
<article class="athelas pa4">
<p class="f6 f4-ns lh-copy measure center">
How interactive should this tool be? We met with NYU professors from computer science to education design, all of whom stress the importance of exploration for enabling students to best engage with their material.
<br><br> Basically, there are two forms of thinking: divergent, where we follow a specific line of thought, and convergent - where we connect concepts. The brain is primarily a prediction machine, it learns best from another human being or interaction.
</p><br>
<div class="tc ph4">
<img src="imgs/interview.jpg" width="50%" alt="">
</div> <br> <br>
<div class="tc ph4">
<iframe width="720" height="486" src="https://www.youtube.com/embed/CSlF89DVK6I" frameborder="0" allowfullscreen></iframe> </div>
</article>
<br><br>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> VIII. FINAL DESIGN </h1>
</div>
<br><br>
<article class="athelas pa4">
<p class="f6 f4-ns lh-copy measure center">
We see our tool as an app built on an existing hardware and software platforms that is functional with both existing and future books augmenting content could be produced by our own platform, by a community, and by book publishers themselves, community
and schools.
<br><br> If you think about it, it was through books that we developed an appreciation for learning, for wondering, for asking the right questions that may lead to our own discoveries. Imagine a reality in which you optimize the true capabilities
of your mind. The implications of a deeper thinking society are extraordinary.
</p>
</article>
<div class="tc ph4">
<h1 class="f3 f2-m fw2 black-90 mv3"> IX. DEMO </h1>
</div>
<article class="athelas pa4">
<p class="f6 f4-ns lh-copy measure center">
We see our tool as an app built on an existing hardware and software platforms that is functional with both existing and future books augmenting content could be produced by our own platform, by a community, and by book publishers themselves, community
and schools.
<br><br> If you think about it, it was through books that we developed an appreciation for learning, for wondering, for asking the right questions that may lead to our own discoveries. Imagine a reality in which you optimize the true capabilities
of your mind. The implications of a deeper thinking society are extraordinary.
</p>
</article>
<div class="tc ph4">
<iframe width="720" height="486" src="https://www.youtube.com/embed/v8eX4ylUGME" frameborder="0" allowfullscreen></iframe>
</div>
<br> <br>
<div class="tc ph4">
<dl class="lh-title pa4 mt0">
<dt class="f6 b">Interactive Telecommunication Program</dt>
<dd class="ml0">New York University</dd>
<dt class="f6 b mt2">Students</dt>
<a class="f5 db black no-underline underline-hover" href="https://www.jegusquizaf.com/">Juan Jose Egusquiza</a>
<a class="f5 db black no-underline underline-hover" href="http://kenzonakamura.com/">Kenzo Nakamura</a>
<a class="f5 db black no-underline underline-hover" href="http://cvalenzuelab.com/">Cristobal Valenzuela</a>
<a class="f5 db black no-underline underline-hover" href="https://www.matamala.info">Alejandro Matamala</a>
<a class="f5 db black no-underline underline-hover" href="http://www.0oda.com/">Daniella Garcia</a>
<a class="f5 db black no-underline underline-hover" href="http://www.scottreitherman.com">Scott Reitherman</a>
<dt class="f6 b mt2">Professor</dt>
<a class="f5 db black no-underline underline-hover" href="http://www.dory.me/">Mike Dory</a>
<br>
<dt class="f6 b mt2">Github</dt>
<a class="f5 db black no-underline underline-hover" href="https://github.com/ofwb">Our Future with Books</a>
<br>
<dd class="ml0">2017</dd>
</dl>
</div>
</body>
</html>