Pro Yearly is on sale from $80 to $50! »

NYPL Labs Design @ MITH Digital Dialogues

NYPL Labs Design @ MITH Digital Dialogues

Kill Time, Make History: Building Inspector and other HCI Case Studies from NYPL Labs. This deck does not include the videos or animated GIFs presented.

For more information visit: http://mith.umd.edu/podcasts/dd_spring-2015-mauricio-giraldo/

7aff8f547184534da3ca2e14e63a68a8?s=128

Mauricio Giraldo

March 03, 2015
Tweet

Transcript

  1. mauricio giraldo arteaga @mgiraldo nypl labs kill time. make history.

    MITH digital dialogues, march, 2015
  2. hola

  3. my name is mauricio

  4. None
  5. None
  6. NYPL Labs

  7. None
  8. None
  9. None
  10. we’ve been at it for 3+ years

  11. None
  12. buildinginspector.nypl.org

  13. None
  14. None
  15. None
  16. None
  17. year

  18. street names year

  19. use type street names year

  20. use type street names name year

  21. material use type street names name year

  22. material use type street names name class year

  23. material use type street names address name class year

  24. material use type street names address floors name class year

  25. material use type street names address floors name class year

    skylights
  26. material use type street names address floors name class year

    skylights backyards
  27. material use type street names address floors name class geo

    location year skylights backyards
  28. footprint material use type street names address floors name class

    geo location year skylights backyards
  29. footprint material use type street names address floors name class

    geo location year skylights backyards
  30. extract all the data

  31. why?

  32. citysdk.waag.org/buildings

  33. citysdk.waag.org/buildings

  34. NYU Stern / Imaginaria3D

  35. NYU Stern / Imaginaria3D

  36. maps.google.com

  37. maps.google.com

  38. None
  39. step 1: georectify or: make it match Open Street Map

  40. None
  41. None
  42. None
  43. *simulation. actual process requires many maths.

  44. None
  45. None
  46. steps 2+: digitize or: draw the whole map again

  47. None
  48. None
  49. maps.nypl.org/warper

  50. None
  51. None
  52. None
  53. ⏳ this will take forever ~3 years for just two

    atlases of Manhattan
  54. None
  55. divide

  56. divide ↓

  57. divide ↓ automate* *what can be reasonably worth automating

  58. divide ↓ automate* ↓ *what can be reasonably worth automating

  59. divide ↓ automate* ↓ crowdsource *what can be reasonably worth

    automating
  60. …and conquer!

  61. None
  62. None
  63. automate footprint extraction it is the most labor-intensive task

  64. None
  65. github.com/NYPL/map-vectorizer

  66. None
  67. None
  68. “is the output any good?”

  69. None
  70. a building is: completely enclosed by black lines dashed lines

    are not walls not paper-colored
  71. …so we did a prototype

  72. –@mikeindustries “a prototype is worth a thousand meetings”

  73. None
  74. None
  75. pretty straightforward, right?

  76. lots of edge cases

  77. None
  78. we could just do a tutorial

  79. tutorials are hard and people rarely bother to follow them

  80. juicybeast.com/2014/10/designing-a-playable-ui-that-secretly-teaches-how-to-play/

  81. juicybeast.com/2014/10/designing-a-playable-ui-that-secretly-teaches-how-to-play/

  82. None
  83. None
  84. None
  85. …but tutorials are hard and don’t even get me started

    with “cross-browser”
  86. None
  87. None
  88. None
  89. pretty neat!

  90. ❌ but it doesn’t work on mobile did i mention

    tutorials are hard?
  91. None
  92. None
  93. …it could be worse

  94. None
  95. None
  96. A MONTH later…

  97. None
  98. None
  99. None
  100. None
  101. we ♥ our contributors ~27% were mobile visits

  102. we ♥ our contributors ~27% were mobile visits

  103. footprint material use type street names address floors name class

    geo location year skylights backyards
  104. footprint material use type street names address floors name class

    geo location year skylights backyards
  105. check

  106. check YES

  107. check YES address color

  108. check YES FIX address color

  109. check YES FIX address color fix

  110. check YES FIX address color fix

  111. check YES FIX address color fix *footprints marked as “NO”

    go to building heaven
  112. check YES FIX address color fix *footprints marked as “NO”

    go to building heaven
  113. but first, a revamp

  114. None
  115. None
  116. None
  117. None
  118. None
  119. None
  120. colors

  121. None
  122. None
  123. None
  124. None
  125. addresses

  126. None
  127. None
  128. fixing footprints

  129. None
  130. None
  131. remember the tutorials?

  132. None
  133. None
  134. None
  135. None
  136. None
  137. people skip the tutorials anyway…

  138. so, if you can’t do something like this:

  139. None
  140. None
  141. …have a plan b

  142. many eyes per task ≥75% agreement among three or more

    inspectors
  143. 24% 17% 28% 31% Check Fix Color Address pageviews per

    task
  144. ~32% mobile visits 1.1 million inspections so far

  145. stereo.nypl.org

  146. None
  147. None
  148. None
  149. None
  150. None
  151. None
  152. None
  153. None
  154. “wouldn’t it be cool if…?”

  155. None
  156. None
  157. None
  158. …so we did a prototype

  159. None
  160. None
  161. distill the task to its critical components

  162. None
  163. None
  164. add some polish… a.k.a. designing

  165. None
  166. None
  167. None
  168. None
  169. None
  170. thank you! images from: NYPL - Wikimedia Commons - Flickr

    user wallyg - Giphy mauricio giraldo arteaga @mgiraldo nypl labs