Responsive Interactivity: Toward User-centered Adaptive Map Experiences


Formal Metadata

Responsive Interactivity: Toward User-centered Adaptive Map Experiences
Title of Series
Czaplewski, John
Donohue, Richard
Mead, Rashauna
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
FOSS4G, Open Source Geospatial Foundation (OSGeo)
Release Date
Open Source Geospatial Foundation (OSGeo)
Production Year
Production Place
Portland, Oregon, United States of America

Content Metadata

Subject Area
In recent years, the web design community has moved quickly to accommodate the various devices and methods for accessing web content. The FOSS4G and wider development community have responded to this paradigm of adapting the layout of content to scale to the device of the user by creating and leveraging tools such as Leaflet and D3. However, there remains a lack of knowledge, understanding, and conversation about what it truly means to create a map experience that meets the present needs and expectations of the user. Designing an adaptive map should go beyond simply fitting it into a responsive layout. User variables, such as the mode of interaction and location-based needs, raise map-specific UI design questions that this community is uniquely positioned to answer.This talk will explore what it could mean cartographically and experientially to adapt all aspects of the map experience to the needs of the user using principles already embraced in other communities. Our goal is to provoke a wider discussion of how we, as a community, can work toward these objectives. Regardless of expertise level, anyone who is involved with the creation of interactive web maps has inevitably come across the problems associated with, and will benefit from involvement in this conversation.
responsive design
Product (category theory) Software developer Universe (mathematics)
Point (geometry) Web page Context awareness Adaptive behavior Mereology Webdesign Population density Computer configuration Hypermedia Database Software framework Data conversion Mobile Web Area Texture mapping Process (computing) Mapping Fitness function Functional (mathematics) Uniform resource locator Bootstrap aggregating Vector space Web-Designer Order (biology) Dependent and independent variables Website Normal (geometry)
Point (geometry) Area Axiom of choice Group action Context awareness Texture mapping Scaling (geometry) Mapping Multiplication sign Connectivity (graph theory) Adaptive behavior Projective plane Insertion loss Band matrix Uniform resource locator Mathematics Network topology Representation (politics) Subtraction Mathematical optimization
Satellite Proof theory Texture mapping Program slicing Projective plane Zoom lens Bit
Pixel Divisor Variety (linguistics) Scientific modelling Connectivity (graph theory) Adaptive behavior Source code Zoom lens Dynamical system Web browser Distance Web 2.0 Maxima and minima Mathematics Term (mathematics) Touch typing Cuboid Energy level Circle Acoustic shadow Subtraction Partial derivative Decision tree learning Pairwise comparison Texture mapping Product (category theory) Scaling (geometry) Touchscreen Mapping Cellular automaton Software developer Keyboard shortcut Moment (mathematics) Set (mathematics) Cartesian coordinate system Symbol table Radius Visualization (computer graphics) Vector space Integrated development environment Statement (computer science) User interface
Degree (graph theory) Server (computing) Texture mapping Mapping Multiplication sign Adaptive behavior Projective plane Subtraction Event horizon Binary file
Web service Server (computing) Mapping Information Adaptive behavior Gene cluster Right angle Client (computing) Webdesign
Axiom of choice Mobile app Connectivity (graph theory) Decision theory Zoom lens Adaptive behavior Theory Revision control Traffic reporting Subtraction Computing platform Mobile Web Texture mapping Information Mapping Software developer Polygon Projective plane Bit Cartesian coordinate system Software maintenance Web application Personal digital assistant Web-Designer Right angle Pattern language Separation axiom Library (computing)
Laptop Axiom of choice Slide rule Group action Context awareness Divisor Code Differential (mechanical device) Multiplication sign Adaptive behavior Parameter (computer programming) Term (mathematics) Touch typing Operating system Boundary value problem Subtraction Physical system Task (computing) Mobile Web Focus (optics) Touchscreen Texture mapping Mapping Forcing (mathematics) Keyboard shortcut Projective plane Line (geometry) Cartesian coordinate system Tablet computer Category of being Word Polarization (waves) Integrated development environment Vector space Personal digital assistant Website User interface Library (computing)
each developer at the University of Wisconsin Madison so I Geoscience department I must say something with fresh on of the population of at the University of Wisconsin and rich Donahue University university Kentucky could not be here by watching Lifestream trench I same talking about adaptive maps and and how we as a community cannot only improve the products we create with them but I hope they also
contribute something back to the wider web development community as well I should also note here that we're not proposing any specific solutions for creating adaptive maps but are trying to start a conversation about how we can improve the rocks and hopefully get some ideas from you about how to create these I'm the 1st because there really isn't a definite definition of what an adaptive mappers our and start making an idea of what adaptive design is how it differs responsive and why it matters mapping I assume responsive is always adaptive but adaptive is not always responsive response it's just a piece of the adaptive puzzle and responsive web design is largely about optimizing the layout of the page and uh the delivering appropriate media to the user and you may have used frameworks like bootstrap or foundation take get over the hump and make this process what is it adaptive design on the other hand deals much more with altering the the context of the material the purpose and the functionality of a website in order to meet the needs of users and of course optimizing layout is still always a very important part of it but you can only go so far as to deliver year you can take this to point of delivering entirely different entirely different experiences I'm depending on the size of the capabilities of the device a really nice example of adaptive Web design believed on the web site and as you can see a desktop web site is a fairly normal airline website and its center around exploration and like for example you can see the route map I divide flight deals and export options book travel however if you go the same URL and mobile device it's a very different experience 1st thing you see is the news article about how others impending palate strikes which would be very important to you if you're out travel and additionally the most obvious features our checking in fear flight and checking flight status which if you're checking the website while you're traveling these apply the things that you wanted you right away and they're super easy to find that so 1 of the things that makes making adaptive maps and perhaps more edges using here uses location and and there's many different parts of the adaptive map designed that kind of fit into creating 1 by user location is something we can really used to create a nice custom experience but for example you can use something like the year OpenStreetMap Overpass API but if you not familiar with that basically what it does is it allows you to Corey the OpenStreetMap database and return vector features about what's there and you can imagine how that might work but I could up a
little example than can be lifetime of you but but they uses the Overpass API to find the user's location and then find how many roads are in your area and depending on the density of roads it'll delivery the roadmap for a terrain depending on where you are and
and so that you may not action the user may not actually want a roadmap a trainer in those cases but if you're out hiking around and there's only 1 road in your area perhaps it's there's a good chance a tree maps can be a lot more useful to you then around that I and the point isn't that you're giving the user something different and they can change your moral losses trying to anticipate the next action of to not limiting the choices I just interesting choices another
example that we're trying to run out the other day was your driving around in your in an unfamiliar role place and so you put your phone to check where you are from Harvard or oftentimes you're at such a large scale it can actually tell where you are you just see yields around you had but there's no reason we can't use something like the opens the Overpass API to just center yourself on your location and also the nearest town or village to give you some context of where you are and and that's something that could be very nice because if you're in a rural area you don't have a lot of bandwidth you can often so they're trying to figure out where you are for a long time to get some context so again just into Spain uses next actions using user look the no component of adaptive design is adaptive representation of talking about map symbology and projections but perhaps the coolest example of adaptive representation is burner Jenny's adaptive composite map projection on it's really cool and so basically when you start out as er as you navigate around the mouth it'll change of projection depending on your extent and at the origin so dynamically picks the optimal
projection for whatever slice of Earth they're looking at the although it's a really cool proof of concept unfortunate hasn't been implemented more some of the more popular mapping API is so it's kind of limited to Denmark now by hopefully someone picks it up and runs the that I there's been a couple of attempts at doing indeed 3 but nothing that's really caught on heavily I also then you Google Maps takes this approach a little bit using that I if you go to
like the satellite layer Google Maps and zoom out it all zoom out to a global yeah which is
not exactly in an adaptive production by it's kind of getting at that same concept the the yeah no the really great example of adaptive mapping is the dynamical shading example from our box I'm using vector tells if development the cell laden tied to dynamically change the as news the altitude the depth the shadow and highlight of the lighting and your and the browser up and although I haven't seen an example of this in the wild yet and it's very promising technology in you can imagine the source of adaptive map expresses the will create create a future and another example that demonstrates those who is using different style scale factors for the preferred proportional symbol maps and rich coded up this example United show how you could do this and it demonstrates both now application of what we're suggesting adaptive cartography is capable of and also new ways of bringing traditional cart cartographic practices into a web environment and while the foot circle markers feature that it provides a fixed radius circle that allows for partial symbol maps to work across a variety of the models and it doesn't really work for us visual comparison of others in models the what circle feature it maintains a constant radius
in terms of geographic distance but it's less useful for a proportional symbol moment as well and but if you apply some conditional statements you can easily customize a proportional symbol map to a different zoom levels and perhaps even different screen sizes and the the another simple to acute can make for many maps to be the change the minimum symbol size that if we know the user is using a touch interface that for example in keyboard setting sometimes it's not this in more static to have little symbols that you can expect the user mouse an interactive and but once you move over to touch interface those tiny symbols can be very fracturing for those of us with white wide fingers I and so really easy thing to do would be I'm that touch devices follow Apple's design principles and use a minimum of like at 44 my 44 pixel symbol for all the UI components here maps in biology we to make it all the more easy fear user it that yeah
it another place that adaptive for mapping can kind of that take place on the server side but it's not necessarily exactly just a front problem and 1 example
is the Paleobiology Database API and that's 1 the projects that work on the work that I don't handle the exact same but the other things I for 1 thing the does you very nicely is that when we have millions of fossil collections all over time and so if you're to make map those you can't really love them all at once so what we do is we cluster them into different bins server-side eyes so we have 6 grievance here to rebounds have degree events in then and of course
nobody I'm the the purpose of clusters only 10 use them is a generalization right eyes and so it doesn't even make sense to request all the cluster at client side and then you're hiding all the data that you just request and the advantage of doing the server side is that your only requesting exactly what you need that and you're still providing a generalized map for things and the other thing is that with this approach you can write other services so if I was to click on cluster it's very easy to then make another small requester-server ask what collections are and then you wanna know more about a collection of very easy to make knowledge smaller cost find more information on that I to not really losing the richness but you're making a map a lot faster of and it's another we can make a much more adaptive yeah so the the
and some other adaptive examples and frost he's 0 web designers who it is 1 of the only other people I
could find you I wrote something up about the concept of adaptive maps and and the solution proposed solution means 2 years ago but to use your solution was to default to a static map on mobile and an interactive map on the desktop of I'm not sure I completely agree with that approach and especially in now because you can still provide a very rich experience and mobile I think you thinking that interactive maps can be very clunkier mobile devices by Danish saying example of someone else doing the problems of thought yeah and another examples to bring a kind of altogether is up this example racially coded up and we haven't really seen them all these little components of talked come together in 1 and she created this example protest map applications and processes protest a really great example use case for an and right and on a desktop thousand miles away you might wanna know where protests are happening explore them again it information about them but on a mobile device you're more I'm more likely to want to know where they are right now how close I am to them perhaps report and so on the left side we have the desktop version and on the right the mobile side and and the desktop version you can search by different polygon you can filter them in many ways Corey them on where is a mobile version you have more succinct and affects you have you remove the zoom buttons you makes it very easy to add a protest and also you can still explore and filter but it's a much more concise experience through the immediate needs you have while on a mobile device and this is really that demonstrates the common theme with adaptive mapping and that's their mobile use usually has more immediate environmental needs that can be addressed and the requires a tailored experience for us but
so the yeah this this leaves us asking where we go from here we have all these little bits and pieces I we don't really have any solid solutions for anything and obviously 1 solution would be to create different pattern libraries for these things on for using bold JavaScript libraries for everything why not 1 for adaptive nothing non you could in theory package things up like this for the for example the symbologies the adaptive composite map projection and those may be very useful but of of course that comes with more maintenance trying to generalize them for many many purposes which may lose richness on the other solution is maybe this concept of adaptive mapping is just a bad idea which it's very possible depending on your situation it might make a lot more sense Created create a separate desktop applications for web application and a dedicated mobile application and that it is adaptive maps from by definition are compromise right and you're never going to get all of the richness in an adaptive map that you can across tailored map for a specific platform so I guess it so personal decision to make depending on your team if you have a bunch of web developers and no doubt native app developers that's pretty easy decision it makes a lot more sense to make an adaptive map however if you have a larger team that has dedicated web developer is a native app developers maybe a native app is a better buy and it's not worth going to the trouble of trying to create an adaptive not so it's really personal choice of what you need I think that's all I have I thanks for coming in
under that so many of you came and I can find the slides in the code examples of those your else all the slides encoder C C 0 so use it for whatever you want thanks I the absence of thank billion of questions to be if you distinguishing between
desktop and mobile but it is in the uh differentiation really about this screen size and not really below the mobile aspect of perhaps I those lines get kind of blurry when you get into a laptops to touch interfaces of various sites tablets on but I finally boundaries to be kind of all over the place I think we still have this large divide between mouse and keyboard environment and kind of everything else mobile devices a very very long term these days that could mean a lot of people like us out so yeah I mean and trying to draw a line there but it's really hard to you know my I guess you could make a better argument that there's more of a divide between like desktop operating systems and mobile operating systems that you can decide for and thanks in so by a library of users use cases and no it I just to define more whole what users have users to use trading LattisNet devices I think that the just the blob between device-specific in users are you can have categories of users of me I want clear at the the use cases all like more examples of how use an adaptive and I guess another example of a project that I worked on was this mapping application for the Paleobiology Database and we do need think of creating it as an adaptive map experience at 1st it was just a normal an interactive map and that we hoped would scale the different screen sizes but but what we found was that we're out having a beer and we had a question that we want an answer and polar phones answer in is a really clunky interface Francis questions and and so we kind of figured out that when you're on a phone at the application serves a fundamentally different purpose and compared the 1 year and have more larger screen environment I think often times larger screens are more conducive to exploration were as mobile devices are a the more appropriate for answering immediate questions that's ways people pull phones out of their pocket by the of that you mentioned anticipating what the user wants to do when using the application Germany you words of caution that you would say that he is trying to anticipate what users produce often very difficult thing it's insanely difficult on and so that's why was trying to get at the point of you're trying to guess that they're not the next action but not restrict them as well and it's kind why really really like that of tons of the example is because they change the focus on the context but they don't really remove any rich see like you can still search for travel book at I but you making it a lot easier to accomplish tasks that you think they're going to want to accomplish immediately so I guess the question it's about it giving them making this thing is they needed more immediately available as opposed to limiting their choices you announce it is 1 to point out that the vector tell movement seems like it's really going to but the driving force yeah behind this kind of design absolutely it's really exciting and look at work to generally go up a lot of doors for what we can do can put like so much


  545 ms - page object


AV-Portal 3.10.1 (444c3c2f7be8b8a4b766f225e37189cd309f0d7f)