# RIO Route instruction ordering task: An application to test human-computer interaction with route maps. by Marcelo Galvão, Jakub Krukar, and Angela Schwering. ## About RIO RIO (an acronym for Route Instruction Ordering) is an academic application design to be used in user studies for cartographers and software designers to quickly test digital route maps regarding human-computer interaction (HCI). It is a stand-alone web application developed in the [WayTO](https://www.uni-muenster.de/Geoinformatics/WayTO/) research project. The **user task** is to order textual route instructions according to the presented route map. The user needs to interact (pan and zoom) with the map to read the route information to match the textual instruction. RIO is implemented with JavaScript and Scalable Vector Graphics (SVG) supported by the D3 API. You need some knowledge of HTML and javascript in order to use it for your experiment. **Requirements:** To use RIO, is required a browser (Chrome or Mozilla Firefox), and a mouse. ### What is a route map? A route map is a tool to support humans to find a way from a pre-defined origin to a pre-defined destination. Preferably, the a route map needs to highlight the origin, the destination, route itself, and decision points, i.e, points on the route where the traveler needs to make turn decision. Additionally, the map can highlight elements that support wayfinding and orientation, such as context street network, or landmarks (recognizable elements on the geography). ### Human-computer interaction with digital maps The move from static to digital cartography has changed possible map designs and interactions: On the one hand, digital maps are dynamic, adaptive, and interactive. On the other hand, they require electronic devices with screens limited by the portable device size. Therefore, in the field of cartography, it's more and more urgent to test maps in the context of Human-computer interaction (HCI). ### Quick introduction to the RIO app The RIO application stimulates the participant to read the route map in a prospective route reading context. Similar to the case when a map user needs to understand the necessary sequence of map-depicted wayfinding actions in order to plan how to reach the destination before the actual travel. The RIO application consists of two parts, adjacent to each other and simultaneously visible on the computer screen: the map area and the textual route instructions area.  The map area displays the route map, and it is interactive using a mouse. The supported actions are panning (with clicking and dragging) and zooming (with the mouse wheel). The textual route instruction area contains a list of individual route instruction sequences in discrete boxes, e.g.,``Take the 1st street on the right``, ``Pass along the Cemetery; & Turn right at the Playground``. The instructions' are initialized in random order. The textual instruction highlighted in green is the first one. The user's task is to re-order the instructions so that their sequence corresponds to the sequence of actions necessary to reach the destination, based on the visible route map. The ordering is modified with drag-and-drop mouse interaction. The map's viewport orientation is adjusted depending on each specific route's longitudinal or latitudinal extension. The viewport was portrait if the latitudinal extension was the largest, or landscape otherwise. The initial map scale was selected to fit the entire route within 70\% of the available viewport (map div), guaranteeing that all landmarks were initially visible around the map. If the participant submitted the list of instructions in an incorrect order, the application indicated the first instruction (from the top) of the list in the incorrect position and asked the participant to keep trying until the correct order is submitted. Each participant performed this task twice: for the outward and backward direction of the same route. When the correct order was submitted, the application records relevant map interaction logs: zooming, panning, scale, viewport, and time. The logs are download in a CSV file. ## Why use RIO? RIO is an academic application design to be used in user studies for cartographers and software designers to easily test digital route maps regarding human-computer interaction (HCI). RIO was initially developed to compare topographic route maps with schematic route maps to measure HCI differences. Nevertheless, it can be used to different kind of studies that involves understanding how people interact with digital route maps. For example: 1. How different map aesthetic styles affect the route map usability. 2. How the selection of map elements and landmarks affects the route map usability. 3. How different levels of generalizations affect the route map usability. 4. etc. ### What can be measure with RIO 1. Number of interactions. 2. Number of zoom-in or zoom-out interactions. 3. Total of panning (translation) measured in pixel units. 4. Time to complete task. 5. Map elements that are visible in the map area at each instant during the task. 6. How each long landmark was visible on the map area during the task. ## How to use RIO? To use RIO for your experiment, you need an HTTP server to store the application code and files. Make a trial: you can access the RIO we used for our experiments at the following link: http://giv-project6.uni-muenster.de/rioapp/ To make a quick test: 1. Access our app with the link above. 2. In the control panel, select the route ``routetest`` and click the button ``Load Route``. 3. Read and close the tutorial. Typ: in the control panel, you can also define the size of the map div (map viewport). Try to interact with the map and try to put the textual instructions in the correct order by dragging and drop them in the list. Once you finish guessing the correct sequence of instructions, click on ``Submit Order`` in the top bar. If the order is wrong, you get a message indicating the first instruction on the wrong position. If the order is correct, you can download and save the interaction log files. Have a look at it! ### The interaction log file The application registers a log at every change that is made on the interactive map. **What is register at each log (header of the log file)?** 1. participantid: the participant Id. They are given in the control panel. 2. route: name of the selected route. 3. interaction: count of changes in the map (kind of a log id). 4. timeStamp: timestamp of the log. 5. time: time of the log since the beginning of the task. 6. deltaTime: time lapsed after the previous log. 7. newTouch: true if the log was originated from a new touch on the map. 8. finger1X, finger1Y, finger2X, finger2Y: not applicable for mouse interaction. It aimed to register the position of the fingers in case of a touch screen device. 9. xPan: translation variation in the x-axis. 10. yPan: translation variation in the y-axis. 11. toTotalPan: total translation variation. 12. iZoomScale: map scale before the log. 13. eZoomScale: map scale after the log 14. deltaZoom: map scale variation during the log (eZoomScale - iZoomScale) 15. topLeftX: map x-coordinate at the map's viewport(div) top left corner. 16. topLeftY: map y-coordinate at the map's viewport(div) top left corner. 17. bottomRightX: map x-coordinate at the map's viewport(div) botton right corner. 18. bottomRightY: map y-coordinate at the map's viewport(div) bottom right corner. ### How to create maps for RIO? At the present version, the RIO application accepts maps in the GeoJason format. GeoJSON is a format for encoding a variety of geographic data structures using JSON format. You can read about the GeoJSON specifications here: https://geojson.org/geojson-spec.html You can check some examples of maps in the map folder. Check the files with .json format. The maps for RIO are encoded in GeoJSON in a single FeatureCollection object. A FeatureCollection stores in an array a list of features. Each feature requires a geometry type (Point, LineString, Polygon) and the feature's properties (type, name, class, etc.). Here is a short example with only two features: a street segment using linestring geometry and a point-like landmark using point geometry. ```javascript {"type":"FeatureCollection","features":[ {"type":"Feature","geometry": {"type":"LineString","coordinates": [[100,60.86451559449696], [94.99383565497949,58.04136567104203]]},"properties": {"type":"street-path","name":"street-path","clazz":41}}, {"type":"Feature","geometry": {"type":"Point","coordinates":[56.61163568557195,25.736607596196]},"properties": {"type":"pointlike-landmark","subtype":"castle","name":"Castle","salience":4,"lat":51.963703462317106,"lon":7.613516571864359,"labelpos":0}} ]} ``` #### What kind of features you can have on the maps? **route:** The feature route uses the geometry type ``LineString`` to represent the route. It requires an object ``properties`` with a String attribute ``"type":"route"``. Follow an example of a route feature: ```javascript {"type":"Feature", "geometry":{"type":"LineString","coordinates":[ [100,60.86451559449696],[94.99383565497949,58.04136567104203],[19.023474853399343,0.9419910422283583],[18.51127972546063,0.8392976634229143],[17.010173005061358,0.5682787002079099],[15.104961948383272,0.27200646520559496],[13.44266537104058,0],[13.244212450409362,1.2595585463288053],[13.204501481124456,1.566708600194573],[13.13830304339956,2.2839961734982386],[12.957137520744519,4.639226303970122],[12.5925872197219,4.528305309074418],[12.428427561761563,4.49091803718795],[11.936103377408141,4.412802782343837],[9.649993809723385,4.091140110580039],[9.128686318613545,3.9862367365194276],[8.89104957856541,3.9189992795590376],[8.28242800971739,3.6896757084765657],[7.768793321087922,3.484692077408162],[2.541287248992427,1.2842787838770382],[1.1542518646573974,0.7299490822625783],[0.876212877376066,0.6286885859598621],[0.48498845813190455,0.5125671416568867],[0.26994097062510475,0.49508892602347354],[0,0.5260299132118014] ]}, "properties":{"type":"route","name":"route","pointLMDist":0.7246626523602394}}, ``` **street-path:** The feature street-path uses the geometry type ``LineString`` to represent the street network. It requires an object ``properties`` with a String attribute ``"type":"street-path"``. Other relevant properties are: 1. ``"clazz"``: stores the street class derived from OpenStreet maps. 2. ``"name"``: name of the street. Follow and example of street-path: ```javascript {"type":"Feature", "geometry":{"type":"LineString","coordinates":[ [42.702796719852834,12.239922398978113],[42.133031263611265,11.106672642296472],[42.01444134254771,10.855743369986468], [41.933762775760236,10.65865071807808], [41.89172096910673,10.531931979816276],[41.77176926381555,10.055599606315255],[41.73905991283877,9.886783305758492],[41.690846104744324,9.534273106114892],[41.603732191508804,8.696497982982002],[41.45309419722261,7.1288661844784915],[41.44520027222974,6.999182171313555],[41.44767468628266,6.773115850453635]] }, "properties":{"type":"street-path","name":"street-path","clazz":41} } ``` **decision-points:** The decision-point uses geometry type ``Point`` to represent landmarks in the shape of a point. It requires an object ``properties`` with a String attribute ``"type":"decision-point"``. Follow and example of a decision-point feature: ```javascript {"type":"Feature", "geometry":{"type":"Point","coordinates":[72.06477422127507,46.50178272201739]}, "properties":{"type":"decision-point","name":"decision-point","lat":51.958701,"lon":7.6195581} } ``` **pointlike-landmark:** The pointlike-landmark uses the geometry type ``Point`` to represent landmarks in the shape of a point. It requires an object ``properties`` with a String attribute ``"type":"pointlike-landmark"``. Other relevant properties are: ``"subtype"``: a subtype that is used to select the landmark icon on the map. ``"name"``: name of the landmark for the label. ``"labelpos"``: the positions of the label (0,1,2,3,4,5,6,7) Follow and example of a point-landmark feature: ```javascript {"type":"Feature", "geometry":{"type":"Point","coordinates":[56.61163568557195,25.736607596196]}, "properties":{"type":"pointlike-landmark","subtype":"castle","name":"Castle","salience":4,"lat":51.963703462317106,"lon":7.613516571864359,"labelpos":0} } ``` **polygonal-landmark** The polygonal-landmarkk uses geometry type ``Polygon`` to represent landmarks in the shape of a polygons. It requires an object ``properties`` with a String attribute ``"type":"park" or "water" or "urban"``. The types will define the color of the landmarks. Other relevant properties are: ``"name"``: name of the landmark for the label. ``"labelanchor"``: the positions of the label (middle, top, bottom) Follow and example of a polygonal-landmark feature: ```javascript {"type":"Feature", "geometry":{"type":"Polygon","coordinates":[ [[43.16042906617192,12.42127175087716],[44.30778226827644,11.87778865510881],[45.81745753420245,11.213531538087135],[47.44790682140319,10.42850039974794],[48.35371198095825,10.06617833594517],[49.92377425752162,10.24733936797495],[51.01074044898878,10.549274421129658],[52.2788676723707,10.971983495580488],[53.00351180001368,11.09275751687661],[53.12428582128841,11.636240612602162],[52.64118973618951,12.058949687010195],[52.09770664045861,12.42127175087716],[51.37306251281295,12.783593814572933],[50.708805395807325,13.266689899757422],[50.104935289433705,13.508237942285467],[49.38029116179072,13.749785984856313],[48.534873012870335,13.991334027362958],[47.62906785331526,14.112108048616284],[46.90442372567228,14.112108048616284],[46.240166608663976,14.232882069933805],[45.63629650229037,14.293269080603267],[44.85126536401269,14.232882069933805],[44.247395257633734,14.172495059285744],[43.76429917254554,13.629011963560192],[43.16042906617192,12.42127175087716]]]}, "properties":{"type":"park","name":"cemetery","topology":"local","labelanchor":"middle"}} ``` ### How to create the textual route instructions? The route textual instruction is stored in a CSV (comma-separated values) file format. You can check some examples of the instruction list in the map folder. Check the files with .csv format. **The route instruction files need to have the same name of the route map file**. The application will load both files together. The route instruction file needs to list all instructions in the correct order. In our experiment, we always have a one-to-one correspondence with the decision points on the route, but this is not necessary. Follow an example of a route instructions file with 8 instructions: ``` order,instruction 1,After the start; turn a half left at the T-instersection 2,Take the 1st exit at the Roundabout 3,Enter the city center; & Turn left at the Cafe 4,Take the 4th street on the right (T-intersection) 5,Pass by the Castle; & Turn left at the Gas Station 6,Take a half right at the bifurcation (at the Cemetery) 7,Cross the city outer-ring street; & Take the 1st street on the left (at the Institute) 8,Take the first street on the right; & Reach the destination ``` If you need instructions with the exact same text, don't worry. The application takes account of that. Instruction correct order is accepted as long as the text is the same as the given the order of the .csv files. ### Adding the map to the application Once you have your map yourmap.json and the corresponding list of instructions yourmap.csv. Save both with the same name in the ``/assets/maps`` folder. In the index.html file, find the div: ```html <div class="row control"> Route: <select id="route-type-db"> <option value="route0">routetest</option> <option value="route0x">routetestx</option> <option value="route1">route1</option> <option value="route1x">route1x</option> <option value="route3xb">route1xb</option> <option value="route2">route2</option> <option value="route2x">route2x</option> <option value="route2xb">route2xb</option> </select> </div> ``` Add the following ``option`` tag to the select element ``<select id="route-type-db">`` : ```html <option value="yourmap">Any name</option> ``` **Attention:** the option tag value this to be the same as your file name. ## FAQ No FAQ so far. ## Copyright RIO is developed by and belongs to the [WayTO](https://www.uni-muenster.de/Geoinformatics/WayTO/) project and its associated researches. Anyone can use RIO for non-commercial research and non-commercial educational projects, as long as the authors and RIO are acknowledged in any resulting publication. Please, also cite the original publication that used this application: Evaluating Schematic Route Maps in Wayfinding Tasks for In-Car Navigation. ### How to cite this application APA style: **Galvao, M., Krukar, J., & Schwering, A. (2021, May 20). RIO: An application to test human-computer interaction with route maps. https://doi.org/10.17605/OSF.IO/4EPR6** BibText: ``` @misc{Galvao_Krukar_Schwering_2021, title={RIO: An application to test human-computer interaction with route maps}, url={osf.io/4epr6}, DOI={10.17605/OSF.IO/4EPR6}, publisher={OSF}, author={Galvao, Marcelo and Krukar, Jakub and Schwering, Angela}, year={2021}, month={May} } ``` ## Contact https://www.uni-muenster.de/Geoinformatics/WayTO/