Developing web map application based on user centered design
|Department of Mapping and Cartography|
|Faculty of Civil Engineering, Czech Technical University in Prague|
Keywords: user centered design, web mapping service, user interface, usability
User centred design is an approach in process of development any kind of human product where the main idea is to create a product for the end user. This article presents User centred design method in developing web mapping services. This method can be split into four main phases – user research, creation of concepts, developing with usability research and lunch of product. The article describes each part of this phase with an aim to provide guidelines for developers and primarily with an aim to improve the usability of web mapping services.
It is possible to say that the need to involve usability technics into development of different types of web applications is widely accepted. Unfortunately, the author’s experience based on his study and projects is different in the Czech environment. We still face the development problems where “form follows the functions”. This approach makes sense for the inner parts of an application - the parts concealed from a user. However, when it comes to the parts of product that are user-facing (the buttons, displays, labels, and so forth) the “correct” form isn’t dictated by functionality at all. Instead, it’s dictated by the psychology and behavior of the users themselves . According to  current body of research is highly significant in the development of GIS for professionals, but it seems that the common user has been neglected or almost forgotten. On the other hand there is a lot of research focusing on user usability of the common web applications - as are e-shops or reservation systems. But although web maps work in web browsers with a graphic user interface, they are quite different from general web pages or computer applications . We should also focus on the usability mapping portals because web maps have became popular on the web due to their convenience and low cost . The numbers of users with specific abilities, knowledge or requirements are increasing. Today’s web map applications don’t only provide the maps, but also provide various mapping tools or services - finding addresses, travel planning or finding points of interest. Unfortunately a lot of people have problems to control a map or to use the mentioned services .
User centered design
UCD as a multi-disciplinary activity, which incorporates human factors and ergonomics knowledge and techniques with the objective of enhancing effectiveness and productivity, improving human working conditions, and counteracting the possible adverse effects of use on human health, safety and performance . The ISO 13407 standard  provides a list of instruction stating how to use human-centered activities during development process, but does not specify any exact methods. UCD can be split into four main phases – analysis, design, implementation and lunch of product. Relations between mentioned phases are shown on Figure 1.
"Good design is good business" – Thomas J. Watson
The mentioned ISO 13407 standard says that Human-centered systems empower users and motivate them to learn. The benefits can include increased productivity, enhanced quality of work, reductions in support and training costs and improved user health and safety. If we choose the main benefits, which states  then UCD can
- Reduce development time
- Focusing on users and their needs reduces the late changes and additional cost of future redesign to make a new and more usable version of a product
- Increase sales
- Marketing of usable product is easier
- Product will have higher rating in the trade press
- Save users time
- Reduce task time
- Increase productivity
- Users make fewer errors and this fact leads to increased quality of service
- Reduce the need for training, requiring assistance
- Observe legislation
- Public offices have to provide information based on the law 365/2000 in the Czech Republic. This law describes access to information for persons with disabilities.
C. M. Karat published first analysis of UCD in terms of cost-benefit in 1991 . The analysis shows a 2:1 dollar savings-to-cost ratio for a relatively small development project and a 100:1 savings-to-cost ratio for a large development project.
We shouldn’t look for the advantages only in financial terms, but especially focus on the end user – as is mentioned in the name of this method. It is the end user, which we should keep in mind during all developing processes.
Developing good product doesn’t start with sketching of interfaces or programming. Before you write the first line of a code or sketch the first segment of a product interface you should answer the basic questions:
- What do users want?
- What do we want?
These questions can uncover basic product objectives and user's needs. Of course there are more objectives then user's needs. In software creation there are generally more requirements:
- Business/marketing goals
- Functional or technical requirements
Initial analysis saves time and money in next phases of development.
First part of every project should be a complex research about our end users. Good interface has nothing to do with pictures or diagrams. For efficient interface it is vital to understand people - who they are, what they are like and what they really think. Because every user is unique, we need to obtain enough information of an individual user and then extract generally true information about a group of users. We need to learn:
- Their goals
- Tasks they will be faced with in our product
- Their language and words (language they use during solving process)
- Their attitudes toward our product
Let’s think of this example. You develop one part of a mapping application that will be used for searching directions. Let's ask a simple question: why will users use your application? Of course for searching directions but what will be the most important thing for them? Is it the total distance or a travel time? Is the user interested in the itinerary? Are the names of cities important to the users? Do users use connections between more point/cities? Generally you can’t answer these questions without knowing your users. You can speculate what they want, or you can find out. Here are some methods used in user research process .
- Direct observation - The idea is to create interviews on-site for users because the best place for watching users is in their natural environment .
- Surveys – We lose the advantage of a direct contact, data are not certain but usually we get significant numbers of answers – it's possible to use a statistical approach.
- Others: Focus Groups, Case studies - These methods can be useful too (though not so common as surveys or direct observation).
The best approach in user research is a direct observation. This method provides precise information but on the other hand it is very time-consuming. Conversely today’s on-line surveys are a low-cost, provide a variety of data but there's no direct human contact and this can miss a lot of extra information. The author took an advantage of an on-line survey during developing 3D interface of GIS software . If you decide to use surveys keep in mind the following points:
- Before you publish your survey, do pilot test with your colleagues, co-workers. This clarifies understandability of survey’s questions and assures that there is no problem with filling the answers.
- Think about what you want to learn and how to create the question.
- Length of the questionnaire - practical aspect influences the quality of the data, because the research depends on cooperation with people who answer the questions. The filling of questionnaire should not be longer than 25 minutes . For this reason you should perform the mentioned pilot test.
One of the most dangerous practices in product development is isolating the designers from the users. UCD is about involving users into the process of developing. Can you invite all of your users into your office and cooperate with them during the developing? I don’t think so but you can transform your users into personas. Cooper  proposed an interesting interpretation of a persona. Persona is a mask used in ancient Greek play - persona is a social role of people in a specific context. There are some principles about personas:
- Persona is a fictional character who represents the needs of a whole range of our users 
- Persona has a name, age, characteristic as real people do
- Characteristic of persona is created on a based user research or it can be fiction
- Using personas helps the team focus on the users' goals and needs . Personas increase usability of the developing application.
A report from a user research can be very detailed and an extensive document. Persona allows to extract the relevant information from a user research and offers these data in a different way. Persona is usually represented by a small paper card that can everybody print off and keep in mind.
Let’s see a short example. From a user research we know that our users are mostly 25-34 old. They described themselves as comfortable using the web. One third of users visit some map portals only a few times per month. Some of them have never displayed an aerial photo map on a web map portal. Figure 2 shows sample persona that was created based on a user research.
The benefit of a persona is in their ability to filter personal ideas from the developing team. Thinking in the UCD way is not natural. Our more natural tendency is to be self-centered, which translates to taking an approach to product design based on our own wants and needs (even if we are not actually a user of the product) . Personas help to highlight important information from user research. Detailed research is the basis of the entire project, but the amount of data can cause problems in the next phase of the project. Reports of users and their needs are not always seen as relevant, and even if they are, the reports themselves are often cumbersome, tedious, and difficult to apply in the day-to-day development process .
Creating persona does not consist of the fact that someone from the team creates a card with a photo and biographical data. The main information has to be obtained on the basis of a user research. Personas derived from other sources than the empirical research are merely modeled from assumptions that have necessarily a limited point of view and experiences of their creators . The whole development team should be involved in creating the personas if at all possible. This ensures the whole team will identify with the personas and secures their real usage of personas across the developing team.
"Designing a good interface isn't easy" – Jenifer Tidwell
In this section we use information, obtained from analysis phases, for design of successful interface elements. The question is: what is a successful interface? For programmers it is an interface or a software that never breaks, but we can’t use this approach in terms of design. Successful interfaces are those where users immediately notice the important stuff. Unimportant stuff, on the other hand, doesn’t get noticed . If the user can't find a function, it doesn't exist. The challenge in a successful interaction design is to find out which parts of interfaces are important and how users interact with them.
The first step in a design phase should be creation of prototypes - in our case wireframes. Wireframe is a skeleton or bare-bones interpretation of a page component, interface elements, navigation elements. Wireframe can have many forms - from text interpretation to a very complex sketch. But the best and most widely used wireframes are very simple sketches. As personas, wireframes can involve the whole team in the process of a development – primarily people without programming knowledge (managers, designers). Wireframes is the place where everybody can discuss or share their ideas. Designers can mock up a visual interface and programmers understand the page features.
Coding the whole application takes time and money, conversely wireframes enable to experiment in the safety of a form which can be easily changed without much loss of time or wasted effort compared to re-programming software .
You can use an eraser on the drafting table or a sledge hammer on the construction site. - Frank Lloyd Wright
An example of a wireframe used during developing a simple web map application is shown in Figure 3. For creating wireframes you can use sophisticated software (Pencil, Justinmind, Mockingbird) or just a piece of paper and a pencil. Don’t worry that the sketch will not be as detailed as the final product – a simple sketch works fine. Very interesting is the fact that wireframes are also suitable for early usability testing. The process of testing is almost the same as with usability testing, which is described in more detailed in chapter "Usability testing".
In most cases functional prototype is a simple web page that may look as a final product, but without the full functionality. People want to postpone usability testing to a stage when an application is almost complete. They believe that testing is meaningful if the application works correctly. Indeed the exact opposite is true. Usability testing experts agree that serious problems in the application design can be detected in an early stage of a development  . There is also the fact that large changes in the final stages of the product development are very complicated and expensive. Functional prototype can be a compromise because we provide something that looks as the planned application but we still have the options to make changes easily. With today’s prototyping software it is very easy to prepare a functional prototype, that can be subsequently used for usability testing. The process of usability testing is described in chapter "Usability testing".
Usability testing is a method for evaluating our product with real users. If your goal is to develop easy to use product, you should perform several usability tests. You may forget mentioned phases of UCD but usability testing is (from authors point of view) the best way of how to find out how users will work with our map product. Jakub Spanihel UX designer at SYMBIO said On Prague UX camp in 2010: "Don't you test? – Suicides!". According to  it is possible to split this method into two different types: a classical usability testing or a cheap user testing. Classical way is complexly described in . This method requires usability laboratory, specific selection of participants, it takes more time but gets better results. Let’s describe the second – cheap method, which offers also quality results without spending money on hiring expensive equipment.
|Number of Participants||Finding the Usability Problem|
- Finding participants - The first step is about finding appropriate participants. You should look for specific group based on the aim of your application (cartographers, manager or general public). Sometimes it is not possible to find correct participant – in this case you can invite your colleagues from different departments or friends but try to avoid this situation. Send out the invitations two weeks before the planned usability test. You can motivate participants by a cash bonus - the author offered small gifts in the form of promotional items in his projects. There is a lot of discussion about numbers of participants. If you want to do usability test in a quick and cheap form, than 8 participants is enough. Bob Bailey’s  studied the correct number of usability participants. The results of his research are shown in Tab 1. Based on this research it is possible to say that only four participants can detect most user problems. Usability testing is qualitative method not quantitative. It is more efficient to perform several tests with fewer participants during the development than one test with a lot of participants.
"Testing one user is 100 Better then testing none." - Steve Krug
- Preparing task scenario – Your goals and hypothesis for developing an interface are the basis for usability testing. Think about what you want to learn and create the task for participants. The task scenario is a coherent story that follows or covers your tasks. You should create a real story – the participants should have the feel that they know the situation from their own lives. The example of a task scenario used in usability testing of web map portals is published in .
- Prepare test room – A standard quiet office serves as a test room if you are performing cheap testing. The room should be equipped with all the necessary equipment (also refreshments) required to solve the defined tasks. Don’t forget to erase personal preferences and history in web browser (before each of participants). A schema of a test room is shown on Figure 4. A moderator is a person who communicates with the participants and goes with them through the task scenario. The main task of an observer is to note the important problems as well as the positive points. The observer can also be the programmer of a tested application – he can see the usability errors first hand.
- Test session – Ensure that each test with particular participants will be the same. Present the scenario to each participant before the start of the test and ensure them that the user is not being tested, but mapping sites. When the moderator introduces the observer it is often convenient to tell a lie. The moderator shouldn’t mention that someone in the room is involved in developing the applications.
When the test starts, ask the participant to think aloud. Thinking aloud is a technique where users speak out loud about their thoughts and feelings. Together with user’s speak out loud use “why” method. Ask them: Why? Why have you done this? Please keep in mind that usability test shouldn’t be longer than sixty minutes. Be patient, benevolent, dismiss the comments or ridicules. If you see that your participant is totally lost help him.
- Debriefing – After the execution of all tasks discuss with the participant and the observes the test conduct, any problems or feelings about the test.
- Report – Analyze notes, identify user errors and difficulties. After just three conducted sessions you will see the repeated problems – the main errors.
- Next test – You should perform a new testing after repairing discovered problems.
You could say that the launch is the final stage of the development. However, as is shown on Figure 1 UCD is an iterative process. After application lunch you can use surveys to get user feedback, collect statistic, do some changes and then repeat usability testing. Providing a great user experience is an ongoing process .
Conclusion and discussion
The paper describes USD in the simple form and phases. The objective of this article is not a full description of this method and it doesn’t attempt to be. For each chapter of this article it would be possible to find specific literature, which describes it in more detail, here is mentioned only a part of UCD. The author presents some methods of UCD that he used in previous projects focused on developing web-based map application. Particularly usability testing is a complex method that can partially replace user research phases of UCD. Unfortunately, foremost in the Czech environment, the author still encounters a negative attitude towards usability technics. For this reason this article has been written and thus introduction of UCD in geoinformatics environment. By author’s opinion UCD process is what should geoinformatics developers be interested in. The need for development usability techniques is higher in development mapping application field than in any other area. Developers should think about final users and guarantee the usability efficiency and effectiveness of map applications.
- Human-centered design for interactive systems, International Organisation for Standardisation, Geneva, Switzerland, 1999.
- The benefits of user centred design, 2011, online at http://www.usabilitynet.org/trump/methods/integration/benefits.htm
- Develop persona, 2011, online at http://www.usability.gov/methods/analyze_current/personas.html.
- ARNOWITZ, J.; ARENT, M. N. Effective prototyping for software makers. The Morgan Kaufmann series in interactive technologies. Elsevier, 2007, ISBN 978-0-12-088568-8.
- BAILEY, B. Determining the correct number of usability test participants, 2011, online at http://www.usability.gov/articles/newsletter/pubs/092006news.html.
- COLBORNE, G. Simple and Usable: Web, Mobile, and Interaction Design. Voices That Matter Series. New Riders, 2010, ISBN 978-0-321-70354-5.
- COOPER, A.; REIMANN, R. C. D. About face 3: the essentials of interaction design. Wiley Pub., 2007, ISBN 978-0-470-08411-3.
- FRANC, J. Diskuse kritických ohlasů na adresu person. In Uživatelsky přívětivá rozhraní, 1.vyd. Horava & Associates, Praha, 2009, 180 s.
- GARRETT, J.-J. The Elements of User Experience: User-Centered Design for the Web and Beyond, second edition, New Riders, 2011, ISBN 978-0-321-68368-7.
- HAKLAY, M.; ZAFIRI, A. Usability engineering for gis: Learning from a screenshot. The Cartographic Journal 47 (2008), pp 87–97.
- KARAT, C.-M. Cost-benefit analysis of usability engineering techniques. Human Factors and Ergonomics Society Annual Meeting Proceedings (1991), pp 839–845.
- KRAAK, M.-J.; BROWN, A. Web Cartography—Developments and prospects. Geographic Information Systems Workshop. Taylor & Francis, 2001, ISBN 9780748408696.
- KRUG, S. Webdesign Nenuťte uživatele přemýšlet, 2. vyd., Voices That Matter. 2006, ISBN 80-254-1291-8.
- KRUG, S. Nenuťte uživatele přemýšlet! Praktický průvodce testováním a opravou chyb použitelnosti webu. Computer Press, 2010, ISBN 978-80-251-2923-4.
- PRUITT, J.; ADLIN, T. The persona lifecycle: keeping people in mind throughout product design. The Morgan Kaufmann series in interactive technologies. Elsevier, 2006, ISBN 978-0-12-566251-2 .
- PUNCH, K.-F. Základy kvantitativního šetření, 1. vyd. Portál, Praha, 2008, ISBN 978-80-7367-381-9.
- RUBIN, J.; CHISNELL, D. Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests, second edition ed. Wiley Publishing, Inc., Indianapolis, 2008, ISBN 978-0-470-18548-3.
- TIDWELL, J. Designing Interfaces. O’Reilly Series. O’Reilly Media, 2010, ISBN 978-0-59-600803-1.
- VOLDAN, P. Research grass wxgui 3d, 2010, online at http://edu.surveygizmo.com/s3/392936/Research-GRASS-wxGUI-3D.
- VOLDAN, P. Usability testing of web mapping portals. Geoinformatics FCE CTU 5 (2010), pp 57–65.
- YOU, M.; CHEN, C.-W. L. H. L. H. A usability evaluation of web map zoom and pan functions. International Journal of Design 1 (2007), pp 15–25.