Edinburgh banner

Development of a Web Geospatial Query Interface for Unlock Places API

by Georgia Tzovla, August 2014

Overview

The multitude of spatial data in combination with the rapid growth of Internet technology set Human Computer Interaction (HCI) methods as a core component of the online geospatial development process. Considering the increasing number of people that can access online GIS services, a user-friendly and intuitive interface that allows an easy and effective interaction is essential.

This study aims to examine and apply Human Computer Interaction methods in GIS, for the implementation of a geospatial query interface of the Unlock Places service. Unlock Places is a web service implemented by EDINA that combines spatial data from different data sources but does not provide an interface to give the opportunity to non-experts to interact with the service and exploit its possibilities. Following HCI methods, including User-Centred Design (UCD) approaches, users' requirements are identify and according to them interface prototypes are built that through a refinement process they lead to the final design.The implementation is based on JavaScript and especially Leaflet, which is an opensource library for interactive maps.

The final map interface is available here
Also, the code is available at github

Methodology

In order to start developing the user interface we need to link the human intentions with the available map technologies. Therefore the methodology that was followed for the Unlock Places’ interface development includes the following steps:

  • Recognise the user group that will potentially use the geospatial service. The users were academic people and people from the private sector.
    • Fig1. The population sample for the survey.


  • Identify user requirements. In this study, survey was designed and distributed to a sample of representatives to capture their attitudes and behaviours.
    • Fig2. The two parts of questions in the survey.


  • Personas' creation. The analysis of the survey results lead to the creation of personas profiles. Each one summarises the main goals and influences of the survey's responders.
    • Fig3. An example of a persona's profille


  • Prototype interface designs are built according to personas requirements. Through a continuous refinement the final interface is being designed.
    Fig4. A prototype of the map interface.
    Fig5. Iterative development of the system.


  • From the client-side technologies HTML, CSS and JavaScript are used for the design of the final interface. Also, the Leaflet javascript library is used, that helps the design of interactive maps.
    • Fig6. Display vectors on the implemented map interface using Leaflet's methods.


  • The evaluation of the final user interface is the final step of the interface design. Specifically, ten participants are invited to complete specific tasks on the implemented web page and their overall performance and interaction is recorded. The results show that users appreciate the simplicity and clarity of the available functionalities on the map and they find the service useful and easy to learn.
    • Fig7. Users' scoring criteria per task according to
    Fig8. Satisfaction questionnaire that shows users' satisfaction on their interaction with the map interface.


    Conclusion

    Clear guidelines and design standards for both GIS and non-GIS web pages were followed in order to succeed a direct interaction design.Clear functionality buttons, easy layer manipulation and tutorial examples simplify the procedure, especially for those who are less experienced and have the need for anintuitive and trustful spatial service. Overall, the map’s presentation affected positively the users’ interaction and succeeded to present directly all the available functionalities

    References

    Cooper, A., 1999. The inmates are running the asylum. Indianapolis: SAMS Publishing

    Garrett, J. J., 2010.The Elements of User Experience: User-centered design for the web and beyond (2nd ed.). Berkley: New Riders

    Haklay, M.,Zafiri, A., 2008. Usability Engineering for GIS: Learning from a Screenshot.The Cartographic Journal.45(2), pp.87–97.

    Idoughi, D., Seffah, A., Kolski, C., 2001. Adding user experience into the interactive service design loop: a persona-based approach. Behaviour & Information Technology.31(3), pp.287-303.

    Ingensand, J.,2010.User interaction with online geospatial systems, Thesis Ph.D.EcolePolytechnique Fédérale de Lausanne (EPFL)

    Marcus, A., 2011.Design, user experience, and usability:theory, methods, tools and practice. First International Conference DUXU Orlando USA, Berlin; New York: Springer.

    Mulder, S.,and Yaar, Z., 2007.The user is always right: a practical guide to creating and using personas for the Web.Berkeley: New Riders

    Nielsen, J., 1993. Usability Engineering., London: Academic Press.

    Nielsen, J., 1994. Usability inspection methods.In Proceedings of the Human Factors in Computing Systems Conference,Boston USA,pp.413–414.

    Nielsen, J., 2012.Introduction to Usability. Available at :.

    Nivala, A-M., Sarjakoski, L.T., Sarjakoski, T., 2007. Usability methods’ familiarity among map application developers. International Journal of Human-Computer Studies, 65(9), pp.784-795.

    Nivala, A-M., Brewster, S. and Sarjakoski, L.T., 2008, Usability Evaluation on Web Mapping Sites. Proceedings of the 23rd International Cartographic Conference

    Skarlatidou, A., Cheng, T., and Haklay, M., 2013.Guidelines for trust interface design for public engagement Web GIS, International Journal Of Geographical Information Science, 27(8), pp. 1668-1687.

    Skarlatidou, A., 2010. Web-mapping applications and HCI considerations for their design, In M. Haklay (ed.) Interacting with Geospatial Technologies,Chichester: Wiley-Blackwell.

    Skarlatidou, A. and Haklay, M., 2006.Public Web Mapping: Preliminary Usability Evaluation. Proceedings of GIS Research,UK Conference, Nottingham.

    Sue, V. M. and Ritter, L. A., 2012.Conducting Online Surveys.Sage.