Universidade de Coimbra Faculdade de Ciências e Tecnologia Departamento de Engenharia Informática. Master in Informatics Engineering. MSc.

Universidade de Coimbra Faculdade de Ciências e Tecnologia Departamento de Engenharia Informática Master in Informatics Engineering MSc. Thesis YouTrace Social Platform Bernardo Montezuma de Carvalho Planas Raposo braposo@student.dei.uc.pt U.C. Supervisor: Francisco Camâra Pereira, PhD. 21 st of January of 2009 1

Abstract Resumo do relatorio i

Table of Contents Abstract... i Table of Contents... ii List of figures... iv List of tables... v Glossary... vi 1. Introduction... 2 1.1. Contextualization... 2 1.2. Motivation and Objectives... 3 1.3. Work Plan... 4 1.4. Work Methodology... 4 2. State of the Art... 6 2.1. Collaborative mapping... 6 2.1.1. Open Street Map... 6 2.1.2. Google Map Maker... 7 2.1.3. TomTom Mapshare... 8 2.1.4. Conclusions... 8 2.2. Social networks... 9 2.3. Map renders... 9 3. Framework analysis... 10 3.1. Introduction... 10 3.2. Ruby on Rails... 10 3.3. CakePHP... 10 3.4. Django... 10 3.5. ASP.net... 10 3.6. Conclusions... 10 4. Planning... 11 4.1. Introduction... 11 ii

4.2. Scenarios... 11 4.3. Requirements analysis... 12 4.4. Use cases... 12 4.5. Wireframes... 13 4.6. Conclusions... 13 5. Development... 14 5.1. Introduction... 14 5.2. Application architecture... 14 5.2.1. Models... 15 5.2.2. Controllers... 16 5.2.3. Views... 18 5.3. Database... 18 5.4. Design... 19 5.5. Implementation... 20 6. Testing... 21 6.1. Introduction... 21 6.2. Behaviour-Driven Development (rspec)... 21 7. Usability and User Interface... 23 7.1. Introduction... 23 7.2. Wireframes inspection... 23 7.3. Formal usability testing... 24 7.4. Conclusions... 24 8. Conclusions... 26 8.1.1. Future work... 26 9. References... 27 iii

List of figures Figure 1 - YouTrace platform global vision... 3 Figure 2 Platform architecture... 15 Figure 3 Database view... 19 iv

List of tables No table of figures entries found. In your document, select the words to include in the table of contents, and then in the Formatting Palette under Styles, click a heading style. Repeat for each heading that you want to include, and then insert the table of contents in your document. You can also create a table of contents by clicking the Create with Manual Formatting option and then type the entries manually. v

Glossary Term AJAX API CMS CRUD DOM Framework Git HTML HTTP IDE I/O Java JavaScript MVC Open Source ORM Perl PHP Plugin Python Rails REST RoR RPC SOAP SQL TDD Template URL Description Asynchronous JavaScript and XML Application Programming Interface Content Management System Basic operations on a database (create, read, update, delete) Document Object Mapping Conceptual structure used to support the software development Version control system HyperText Markup Language HyperText Transfer Protocol Integrated Development Environment Input / Output Object oriented programming language Scripting language mostly used on HTML documents Design pattern Model-View-Controller Approach to design, development, and distribution offering practical accessibility to a product's source Object Relational Mapping Dynamic programming language Dynamic programming language widely used on web applications External software integrated in the application Programming language with a minimalist syntax Common term for the framework Ruby on Rails Representational State Transfer Common term for the framework Ruby on Rails Remote Procedure Call Simple Object Access Protocol Structured Query Language Test Driven Development Tool for generic programming Uniform Resource Locator vi

Web Web 2.0 XHTML XML YUI Common term for World Wide Web Current tendencies in web design and web development. Also known as 2 nd generation web application. extensible HyperText Markup Language extensible Markup Language Yahoo User Interface vii

1. Introduction 1.1. Contextualization The YouTrace platform was originally created to act as a social platform, allowing users to collaborate in the construction of a map of the world. So far, the work was only focused on the Map Generation engine, because of its importance on the platform. The engine was developed by (nomes) through the last couple of years, and is still a working project. The vision for YouTrace platform can be divided in two areas: provide a social platform where users can interact with each other and share their traces; and generate a map of the world with a considerable degree of precision. This will allow dynamic map generation, which can lead to the creation of some innovative services like alternative routes with public transportation or decision making advisory. The collected traces can also be a source for efficient route planning, keeping information about road usage, average speeds and alternative roads. The YouTrace platform can also be applied to the study of people mobility and cities dynamics. With this platform, a continuous stream of data collected from real life situations is available to researchers. These methods will generate more valuable information than the traditional ones, such as field studies, counting or location devices. 2

Figure 1 - YouTrace platform global vision This project will focus on the development of the remaining YouTrace platform components, with particular attention to the social platform and traces database. The development of the Map Generation engine will follow the needs of the platform, but will be done by other elements on the team. 1.2. Motivation and Objectives Working on a scientific project is always exciting and gives you the opportunity to explore new paths and work with state-of-the-art technologies. Being part of the development of a new application is a great motivation for this project, not only for educational purposes, but also for the enrichment of the University s legacy. The objective of this project is to build a complete social platform, which will integrate the existing Map Generation engine with all the main features of modern social networks. This means that the work will mostly focus on two main areas: social network and map rendering. 3

1.3. Work Plan The internship is divided in two different phases, the first started on the 4 th of September 2008 and finished on the 21 st of January 2009, corresponding to a full semester. For this initial phase, the planning was based on a 16h per week working schedule and it includes all the sub-phases from contextualization to prototype implementation. The second phase will take place on the second semester, but is already featured on the project planning. This phase is planned to a 40h per week schedule and will include usability testing, front-end and back-end optimization, render and Map Generation engine integration, and some other important features described in the plan. On the project plan, the work can be divided in five phases: 1. Defining and planning the project 2. Development of prototype 3. Building phase 4. Testing phase 5. Deployment and launching These phases aren t independent and it s possible that occasionally intersection can occur between some of them. For instance, the testing phase will have some tasks done after the prototype development, although most of them will only happen after building the first version of final application. For consulting purposes, a detailed plan is available as Annex A. 1.4. Work Methodology As an academic project, the work methodology is different from the enterprise world. To this is added the fact that there is no client and I make most decisions on the development process, having in mind the suggestions of my supervisor of course. 4

We have weekly meetings where some aspects of the application are discussed and I make a quick review of the work done in the past week. When it s not possible to have the meetings, we try to have online meetings on other schedule to keep things updated. I m also writing on a blog my everyday reports on the platform development. These posts are mostly technical, but are a good resource to check the project status and be aware of the challenges encountered along the process. The blog is available at http://nowiknow.wordpress.com All the code generated from the implementation of the YouTrace platform is under a version control system called git [x]. This system keeps a detailed log of all the modifications in the source code and provides some tools to manage that information. With git is possible to have different people working on the platform, without breaking system s integrity and maintaining files up to date. 5

2. State of the Art 2.1. Collaborative mapping Have you ever wondered why some parts of the world don t have great maps and thought how nice it would be if they did? Building a map is an exceedingly complex process, and it is a challenge to reach all parts of the world. [1] This excerpt from Google Maps team s blog can summarize the motivation behind collaborative map making and the necessity of user interaction in modern maps. There s no reliable way of displaying accurate information about roads, streets or simply paths from all over the World. It s possible to have this kind of information in specific areas that, for some reason [2], need a detailed view, but for many places on Earth there s few information. The lack of geographical data isn t the only problem when developing mapping applications, there s also the restrictions that some mapping agencies impose to users. Most of geo data is licensed to these agencies and users have to pay to use it. That s where collaborative mapping takes an important role, gathering user data to build new maps. In that domain we can find two major applications (or tools), Open Street Map and Google Map Maker. The first is the father of collaborative mapping, an open source project with thousands of contributors. The second is the Google s approach to collaborative mapping, in a enterprise way and maintaining the same restrictions of their Map API. At this point is important to analyse these approaches and their main characteristics. 2.1.1. Open Street Map Open Street Map (OSM) is the de facto collaborative mapping platform. Every single bit of data is available to anyone in a Creative Commons Share-Alike licence, which means that you are free to use, distribute and adapt everything from OSM. On this subject, OSM is considering changing [3] their licence to protect themselves (and 6

contributors) from big mapping companies, but the bottom line is that data from OSM will always be free to everyone. OSM uses a wiki style approach where everyone is able to edit anything, including traces from other users. The system reliability is guaranteed by a revision system, making possible to go back and forth in changes list. This structure is extremely useful to manage all the modifications inserted by users, without jeopardizing the previous community data. To add new data to OSM, a five-step process is required: 1. Collect data 2. Upload data 3. Create/Edit OSM data 4. Add details 5. Render map The first two steps are very simple and are only required when adding new information to the map. Users use their traces as base layer to edit map data. After this collect and upload step, users have to attach the submitted trace to the existing map. They can also edit their own trace to correct any error caused by GPS deviation. When everything is correctly edited, it s time to add some more information to the trace, like add road type, POI s, surrounding areas, etc. The final step is to submit all this data to OSM and wait for the new version of the map. It s important to notice that OSM doesn t render traces in real time, this is a totally separated process that runs in the background. Traces are queued for database insertion to avoid system overload when contributors upload lots of (large) traces. In this list we can observe that the first four steps require human interaction, making this process a bit boring and not so much user friendly, although people seem to be very interested in OSM and the community keeps increasing every month. 2.1.2. Google Map Maker Google Map Maker (GMM) has a completely different approach on collaborative mapping. Their service was built with a precise objective: to gather data from poorly covered countries in Google Maps. And that s why they just enabled GMM features 7

to a specific group of countries [4], leaving other countries in the bench for undetermined time. It s not known if the web giant will maintain this exclusivity for long time, but is expected that in the future they will open the GMM worldwide. In GMM, the process of adding new data is much more simpler than OSM, but has some disadvantages. On the up side users don t have to collect and upload their data, on the down side they have to create and edit all the data by hand. This can be a pretty painful task when editing large areas and roads. Other (very important) aspect is the licence on submitted data, which is very restrictive. What Google says is that users are free to add new data to maps, but all that data will be only available to Google. This clearly differs from OSM, but it s likely that in the future some of this data will be available in some way to public. [5] 2.1.3. TomTom Mapshare Asd 2.1.4. Conclusions To summarize and show where YouTrace platform is placed, we have a simple comparative illustration with some selected features, which we believe to be critical in collaborative map making. We can see that OSM is the truly collaborative platform, while GMM has only few features available. In other hand YouTrace platform takes a different approach and tries to bypass all that boring editing process by automatically aggregating traces to maps. It lacks editing features, but there s a lot of room for improvement in the future. The distinguishing factor between YouTrace and other applications is the automatic aggregation of traces. This feature will push away the need of human interaction on map editing and make the process of adding new data simpler and less boring. In conclusion, Open Street Map is a powerful and popular application, but has a painful process of adding new data. In other hand Google Map Maker is much simpler, but lacks all the remaining features so it shouldn t be considered as a threat 8

for now. Finally, YouTrace has some features that make it a valuable application, but not having editing tools could be enough to push away some potential users. 2.2. Social networks Bla 2.3. Map renders Bla 9

3. Framework analysis 3.1. Introduction Bla 3.2. Ruby on Rails Bla 3.3. CakePHP Bla 3.4. Django Bla 3.5. ASP.net Bla 3.6. Conclusions bla 10

4. Planning 4.1. Introduction In every project, the planning stage is one of the most important of all the development process. When planning a web application, is important to know what s the purpose of the application, the target audience and the unique features that will distinguish the application from the others. [x] The creation of some hypothetical scenarios and making requirements analysis based on them is a good starting point to understand the objectives and different uses of the application. This analysis doesn t have to be very specific at this stage, but it must contain all the main features expected in the application. In other words, is not required to have every possible user action described in the analysis, but is vital to know the key sections that must be included in the application. From the result of the requirements analysis were produced some use case diagrams to give a visual interpretation of the findings. Then it came to the final step of the planning phase: Wireframing. This is a crucial step because these wireframes will be the main reference of application design. Also, a usability test was conducted on those wireframes to improve the user interface and avoid some mistakes before the development phase. 4.2. Scenarios Writing scenarios is usually the first step in the planning phase of an application. They have some relevance on the process because they describe real situations where the application could be applied. These stories include information about user interactions, common actions and possible outcomes of the application. Scenarios are often written in plain language, avoiding technical terms, so that everyone involved in the project can understand the given examples. For this project it was asked to the members of YouTrace team to write some scenarios describing 11

how they would imagine using the YouTrace social platform. The scenarios can be consulted in Annex B. 4.3. Requirements analysis The requirements analysis can be described as a summarized version of the scenarios. The process behind this analysis is very simple and it generates a list of all the users needs gathered from the scenarios. These lists are important to identify the main sections of the application and distribute the requirements accordingly. It s also possible to have some requirements that won t be implemented, but they should be kept in the analysis for future reference. The requirement analysis is available in Annex B. 4.4. Use cases Use case diagrams are a specific type of UML diagrams for graphical representation of system functionalities. After the requirements analysis, it s important to have this kind of visual description on the extracted functionalities and how they interact with each other. These diagrams are very useful to identify functionalities that can be separated as modules, represented with include, extend or generalization relationships. It s also possible to identify different roles in the system, represented as actors, which are linked to the cases. Use case diagrams are used to show how users can interact with a specific system. These diagrams are available in Annex B. 12

4.5. Wireframes Wireframes are simple illustrations that describe the contents of a screen. It s not supposed to have a detailed design on wireframes, but a simple draw that clearly identifies the principal elements of a page. [x] The purpose of a wireframe is to communicate initial design ideas and they are mostly used in usability testing and prototyping, although recent innovations in software development suggest that the use of wireframes should be avoided, moving straight from requirements to functional prototypes. [x] In this project it made sense to use wireframes to have a better understanding of the global perspective of the application. Also, it was possible to make some usability testing to proof those wireframes and eliminate some flaws of user interface before the development phase. To accomplish this task was used the OmniGraffle [x] application with custom stencils from the YUI (Yahoo User Interface) team. These stencils follow the design pattern guides [x] from Yahoo and are a standard in modern design of user interfaces. The final wireframes can be consulted in Annex B. 4.6. Conclusions The planning phase took about one month and a half complete, including the final wireframes reviewed after the inspection (see Chapter 7.2 Wireframes inspection). The objective of this phase was building a knowledge base for the following phases, which was achieved. Having those resources ready, it was time to start the development phase, applying the knowledge created on this phase. The development phase and the planning phase will always be intimately related and there will be several references to this section along the report. The next chapter will be focused on the development of the prototype and application architecture. 13

5. Development 5.1. Introduction The development phase is where most of the platform s coding is done. In this phase, the documents produced in the planning phase are used as a reference to support the incremental development of the YouTrace social platform. The platform is being developed in Ruby on Rails framework, which provides lots of tools to assist developers, but has some specifications that developers should be aware of (see 3.2 Ruby on Rails). Ruby on Rails is commonly associated with agile development methodologies, which promotes constant inspection and adaptation in small increments, providing deployable and tested versions of software in a short amount of time. These methodologies also emphasize collaborative work and are suitable to environments where changing is a constant. [x] With this kind of methodology, the traditional deliverables are replaced by different versions of working software. [x] Although being mostly used in teams, this agile development was chosen for this project due to its ability to integrate changes (even the big ones) in late stages of the development. 5.2. Application architecture Developing a Ruby on Rails application requires an MVC architecture, which separates the code in three sections: one to deal with database requests (models), one to process data (controllers) and other to display the processed information (views) (see 3.2 Ruby on Rails). Before listing the components of each section, it s important to have an overview on the YouTrace social platform architecture. This will be described using Garret s visual vocabulary for Information Architecture, which is commonly used to describe web applications or page flows. [x] 14

Figure 2 Platform architecture From this figure it s possible to identify three major areas, corresponding to the main page, the user profiles and the group profiles. The main page is accessible by anyone, but user and group profiles are only visible to authenticated users. That is a requirement to protect user data and other sensible information in the application. Through My network pages, users can access their groups profile and change group preferences if they re group administrators. 5.2.1. Models Currently, the YouTrace social platform has the following models implemented: Device Event Group Groups_User Subscription 15

Trace User User_mailer User_observer Vehicle The user_mailer and user_observer are auxiliary models automatically generated by the authentication plugin used in the application. In other hand, groups_user and subscription are custom join tables models that required implementation. 5.2.2. Controllers In the controllers section are defined the actions that users can request. Those actions include the default REST actions (new, create, show, update, edit, destroy), which are automatically generated by Rails helpers. To those actions, some custom functions are added if required, making the following controllers listing: Events o Create o Destroy Groups o New o Create o Show o Update o Edit o Destroy o Traces o Members o Info o Join o Leave Home o Index Create an event Delete event Show create group view Create a group Show group profile Update group profile Show edit group view Delete a group Navigate to group traces Navigate to group members Navigate to group info Join group Leave group Navigate to homepage 16

o Map o About o Howto o Social Sessions o New o Create o Destroy Traces o New o Create o Show o Update o Edit o Destroy Users o New o Create o Show o Update o Edit o Destroy o Traces o Network o Info o Prefs o Activate o Subscribe o Unsubscribe o Authorize o Pause o Delete Navigate to map Navigate to about section Navigate to How to section Navigate to social section Show login view Login Logout Show create trace view Create trace View trace info Update trace info Show edit trace view Delete trace Show register view Register account View user profile Update user profile Show edit user profile view Delete user Navigate to user traces Navigate to user network Navigate to user info Navigate to user preferences Activate user Request user subscription Remove user subscription Authorize subscription request Pause/Resume user subscription Remove follower 17

In the controller is possible to find functions that process users requests, handle interface navigation or are just private functions used by other actions. In fact, only the actions mapped in the routes file are accessible to users. 5.2.3. Views Most of the actions described in controllers have a corresponding view. In the MVC architecture is supposed to have a model, a controller and the respective views for each component of the application. The big advantage of using views is the possibility to use partials, which are independent chunks of code that can be reused by any other view. For instance, having a partial that displays a message item, that same partial can be used wherever is a listing of message items. This is a good example of the DRY philosophy associated to Ruby on Rails development and, most of all, guarantees code consistence in the entire application. There s no relevance in describing each on the implemented views, but they follow the layout of the wireframes (see 4.5 Wireframes) and all the related design process is explained in chapter 5.4 Design. 5.3. Database A great feature of Ruby on Rails framework is the use of migrations. Actually, migrations act as a version control system for the database and completely remove the need to use an external database manager. Also, with this kind of database update log, it s possible to reconstruct the database in other systems. This is very important to maintain the data consistency and avoid database failures when working with multiple developers. In this project most migrations were automatically generated with the framework helpers, but some of the tables had to be described separately, namely the join tables used in many-to-many relations. 18

Figure 3 Database view This is the current database view, with join table in pink. Some of those tables are automatically mapped in Rails application, without the need of creating a specific model. In fact, only the subscriptions and groups_users tables have an implemented model to access their custom attributes. 5.4. Design The design of an application is often underestimate by developers, but it has a major relevance to users. The importance of having a good user interface and providing great user experiences may be the key to a successful application [x]. This design philosophy is the principle of User-Centered Design [x], which will be adopted as the design process for this application. This process was based on the latest design principles [x] and design patterns [x], which ensures good usability and modern user interfaces. It was also used the YUI CSS Grid framework [x] to help creating the layout grid, which supports all the elements displayed in the page. These tools provide standard references in interface design and are very important to assure layout consistency in every page. 19

In Annex C are available some screenshots of the application design, which can be related to the wireframes described in Annex B. It was also created the identity for YouTrace social platform, although it was not in this project scope initially, but was a good opportunity to exercise my designer skills and add some value to this project. The identity description is available in Annex C. 5.5. Implementation For this phase of the project, it was expected to have a working prototype with most of the listed requirements implemented. This will be a base application to the following work on the next semester, but also will be submitted to an extensive testing plan that will give important information s about user experience and user interface design. At this point, the YouTrace social platform is mostly focused on the social section of the platform and there s no integration with the existing Map Generation engine yet. There were some delays in the beginning of the implementation, so this phase is not completed as it was planned. This won t affect the overall plan neither the testing phase, because it s possible to start testing most of the application, which is completed and ready to be tested. The implementation raised some questions and challenges along the process, which were effectively solved. For a more detailed view on the implementation process, please consult Annex X. 20

6. Testing 6.1. Introduction Testing is a crucial task of the development as it ensures good quality code and prevents errors of future implementations. Usually these tests are made after code implementation and sometimes they don t cover the entire application. To avoid these mistakes, which can cost a lot of time and resources (that leads to money), developers started planning things first and then implement the code needed for each test. That s what Test-Driven Development (TDD) is all about, a development technique that emphasizes testing over implementation. This technique relies on the red, green, refactor philosophy in which developers start by implementing the tests which will fail when run (red state), then implement the code needed to pass these tests (green state) and finally optimize the code implemented before (refactor state). TDD has other benefits like providing cleaner code by forcing developers to think ahead and act like users to implement the tests. This will prevent lots of useless code and will keep developers focused on optimizing code to pass the tests. Also, TDD helps developers build smaller blocks of their application, improving productivity and ensuring that every piece of code is covered by tests. To keep the integrity of these blocks, mocks can be used to simulate other objects that aren t yet implemented. 6.2. Behaviour-Driven Development (rspec) Behaviour-Driven Development (BDD) is basically the same as Test-Driven Development (TDD), but with a little (and vital) twist. There s a shift from describing specific functions to describing what those functions are supposed to do. Imagine a developer implementing tests for functions that don t exist and that he knows nothing about them besides knowing what they should do. Wouldn t be much easier if he could just implement test for what he is expecting to happen when certain 21

things happen? A new registered user should have a confirmation message sent to his email. it s just as simple as this. BDD is not only more user friendly, but also helps to a better understanding of the code purpose. Actually, everyone can read the tests and understand the functionalities described. This can be very useful to close the gap between developers and clients, making them participate in the process and avoiding late drawbacks and delays. In Ruby, the most popular BDD framework is rspec. Working with this framework is really simple and it has lots of scripts to help developers with test implementation. Some detailed examples and explanations are available in Annex X 22

7. Usability and User Interface 7.1. Introduction A good application must focus on users and especially on user experience. [x] The best way to develop a user-centred web application is by including usability analysis in the development process. There are many reasons to worry about usability [x] and, like design, sometimes usability is also underestimate and only taken care late in the process. It s important to include usability analysis from the beginning of the project to keep a constant focus on user vision and avoid late changes that can cost time and resources. Besides, usability has an important role in the experience versus function paradigm [x] as it provides valuable resources to the design process. In short, a good design starts with usability [x]. Ultimately, usability analysis techniques converge to a single objective: improve user experience. When people talk about usability testing, they often associate it with expensive analysis and lots of complex resources, but that s a misconception. In fact, is possible to achieve the same results with no more than 5 users and performing small and affordable tests. [x] Usability testing was and will be used in several phases of this project, essentially whenever is required to validate user interface components, such as wireframes or prototype. This chapter is a compilation of all those tests performed along the development process. 7.2. Wireframes inspection The first task in usability testing was the wireframes inspection. For this task was selected a group of 10 people with different backgrounds and skills. It s important to have a heterogenic group, because it will intensify the discovery of different issues during the inspection. 23

To each member of the inspection group, was given a questionnaire and the wireframes produced in the planning phase (see 4.5 Wireframes). The questions were mostly guidelines to enlighten them about the purpose of the inspection and what was the expected result of their inspection. Every time they noticed something that wasn t accordingly to their standards, they took a note on the inspection table. When the entire inspection group finished their evaluation, all the notes taken were aggregated in one single table. Then, the development team (in this case, myself) reviewed each entry on the table and decided the respective outcome. Some suggestions were simply ignored, others taken in consideration and most of them made some changes to the final version of the wireframes. The results of the wireframes inspection can be consulted in Annex X, although it s only available in Portuguese. 7.3. Formal usability testing Formal usability testing is perhaps the most important task in all usability analysis. This test puts users interacting with a real application prototype and performing some specific tasks previously selected. It s a complicated and meticulous process as it s intended to cover most of the possible user actions. For this task it will be used some of the latest resources and tools in usability testing, such as video recording, screen capturing, heatmaps and eye movement patterns. This analysis will have great impact on the final application and the generated data will be well documented for further analysis. The result of these tests will only be available in the final report, because it s required to have a full working prototype before starting the analysis. This will be the next task to be started on the second semester. 7.4. Conclusions Usability testing is an important resource when developing a web application and should be included in the process right from the start. This project was no exception, 24

integrating wireframes inspections in the planning phase and formal usability testing in the development phase. This section will be updated in the final report with the conclusions from all the usability tests done in the second semester. 25

8. Conclusions bla 8.1.1. Future work bla 26

9. References 1. http://google-latlong.blogspot.com/2008/06/making-your-mark-on-world.html Making your mark in the World. 2. http://blog.flickr.net/2008/08/12/around-the-world-and-back-again/ Flickr used OSM data for street-level view in the 2008 Beijing Olympic Games. 3. http://www.opengeodata.org/?p=262 The licence: where we are, where we re going 4. http://www.google.com/mapmaker/mapfiles/s/launched.html Countries editable in Google Map Maker 5. http://radar.oreilly.com/2008/07/google-mapmaker-open-street-map-data.html Google's GeoData, Open Street Map and Tele Atlas 6. Verba, David, Sketching in Code: the Magic of Prototyping, A List Apart, 2008 http://www.alistapart.com/articles/sketchingincode 7. Brown, Dave, Communicating Design: Developing Web Site Documentation for Design and Planning, New Riders, 2006, 8. http://www.idesignstudios.com/blog/web-design/phases-web-designdevelopment-process/ 6 Phases of the Web Site Design 9. Wikipedia: Agile software development http://en.wikipedia.org/wiki/agile_development 10. Bowles, Cennyd, Getting Real about Agile Design, A List Apart, 2008 http://www.alistapart.com/articles/gettingrealaboutagiledesign 11. Garret, Jesse J., A visual vocabulary for describing information architecture and interaction design, 2002 http://www.jjg.net/ia/visvocab/ 27

12. Campbell, Chris, The importance of Design in Business, Particle Tree, 2007 http://particletree.com/features/the-importance-of-design-in-business/ 13. Katz-Haas, Raïssa, User-Centered Design and Web Development, Society for Techincal Communication, 1998 http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html 14. IBM Design Principles, IBM https://www.ibm.com/software/ucd/designconcepts/designbasics.html 15. Yahoo Design Pattern Library, Yahoo http://developer.yahoo.com/ypatterns/ 16. Yahoo! UI Library: Grids CSS, Yahoo http://developer.yahoo.com/yui/grids/ 17. Google Company s philosophy, Google http://www.google.com/corporate/tenthings.html 18. Maier, Andrew. 4 Reasons your product needs to be usable, UX Booth, 2008 http://www.uxbooth.com/blog/4-reasons-your-product-needs-to-be-usable/ 19. Dimitry, Experience vs. Function a beautiful UI is not always the best UI, Usability Post, 2008 http://www.usabilitypost.com/2008/10/13/experience-vs-function-beautifului-not-always-best-ui/ 20. Irizarry, Aaron M., Defining User Experience Pt. 1, This is Aarons Life, 2008 http://www.thisisaaronslife.com/defining-user-experience-pt1/ 21. Nielsen, Jakob, Why you only need to test with 5 user, Alertbox, 2000 http://www.useit.com/alertbox/20000319.html 22. Michael, E.; Williams, L., Assessing Test-Driven Development at IBM, Proc. 25th Int l Conf. Software Eng (ICSE 03), IEEE CS Press, 2003, pp 564-569. 28

Appendix 0

Table of Contents Annex A... 2 Work plan... 2 Annex B... 3 Planning phase... 3 1. Scenarios... 3 2. Requirements analysis... 5 3. Use cases... 6 3.1. Visitor... 7 3.2. Logged user... 8 3.3. User profile... 10 4. Wireframes... 13 Annex C... 32 Design... 32 1. Identity... 32 2. Layout... 33 3. Interface... 34 Annex D... 38 Wireframes inspection... 38 1. Introdução... 38 2. Objectivo... 38 3. Caracterização dos avaliadores... 38 4. Tabela de Inspecção do Design... 40 1

Annex A Work plan Figure 1 Gantt diagram with the complete project plan 2

Planning phase 1. Scenarios The following scenarios were written in Portuguese. O António sai todos os dias para o emprego e liga o seu dispositivo GPS que vai registando o percurso. Quando chega a casa ao fim do dia descarrega o log para o YouTrace para poder actualizar os seus percursos. Como o processamento não é feito de imediato, o seu percurso fica visível, mas sem estar confirmado pelo sistema. Assim, o António pode ter uma representação imediata do seu percurso, apesar de ainda não ser a versão oficial. Depois de descarregados os logs, vai visualizar o seu histórico de traces e marcar quais os que pretende que sejam privados. Repara então numa notificação na sua listagem de comunidades que lhe indica que existem actualizações no grupo criado para os utilizadores da sua empresa. Ao entrar na página dessa comunidade vê que de facto o seu colega Pedro adicionou um novo trace ao seu perfil que lhe mostra um caminho novo para chegar ao emprego. Contente com a descoberta, o António desliga o seu computador e no dia seguinte experimenta o novo caminho indicado pelo seu colega Pedro. O Luís, ao navegar pelo site, descobre o perfil de um amigo seu. Como quer estar a par das actualizações desse seu amigo, decide subscrever o seu perfil. Mais tarde, o seu amigo aceita o pedido e fica então na lista de subscrições do Luís. Desta forma, o Luís pode ver na sua página pessoal os traces e as actualizações do seu amigo e de todos aqueles que estão na lista de subscrições. Mais tarde entra novamente no seu perfil do YouTrace e surge-lhe uma notificação avisando-o que existem novas actualizações no seu grupo de exploradores da serra da Boa-Viagem. Ao visitar a página desse grupo verifica que existem novas mensagens a marcar um encontro para o fim-de-semana e decide responder. Usando 3

uma keyword específica, o Luís consegue responder directamente a outros utilizadores apesar da sua mensagem aparecer para todo o grupo, deixando uma notificação automática no perfil da pessoa a quem se dirige. Como ele, há muitos outros adeptos do off-road e parece que a moda pegou e há montes de gente do mundo inteiro a partilhar os caminhos. Vejam só que agora, começa a haver mapas do mundo off-road!! Há mesmo malta que vai de viagem entre cidades e de repente sai da estrada que perigo! O Alfredo é motorista numa empresa de transportes de mercadorias. Todos os dias sai de manhã da sede da empresa e percorre centenas de quilómetros nas estradas da região para fazer cargas e descargas. Utiliza um GPS com uma aplicação comercial para o ajudar a orientar-se e a procurar os caminhos mais curtos de uma local para o outro. Como ouviu falar do YouTrace, resolveu começar a fazer o log dos caminhos que percorre todos os dias. Quando chega a casa, faz upload dos traces para a sua conta pessoal no YouTrace. E partilha os traces com o grupo os amigos da encomenda um grupo de acesso restrito onde só são admitidos funcionários da dita empresa. Além de partilharem os traces para criarem um mapa de estradas da empresa, também partilham vários tipos de informação tais como: zonas onde há radares de velocidade; estradas em obras ou o seu estado de conservação; locais que usualmente estão congestionados a certas horas; postos de combustível com os preços mais baixos; POIs genéricos; etc. Como gosta de passear ao fim de semana, recolhe esses traces também para o seu mapa pessoal e procura no mapa do mundo e em mapas de outros grupos novos locais para visitar bem como informações que lhe possam ser úteis durante a viagem. Uma feature que ele gosta bastante no YouTrace, é que quando introduz um novo trace e as especificações do veículo usado, é possível obter uma estimativa do consumo de combustível despendido no percurso. O Carlos vive em Montemor e vai e vem todos os dias a Coimbra, pois é lá que trabalha. Na maioria das vezes, vai sozinho. Ele tem um Corsa 1.2, que até é poupadinho, mas a gasolina está cara!!! No entanto, graças ao YouTrace, ele pode começar a poupar! 4

Todos os dias ele recolhe o trace de todos os caminhos que faz e com isso o mapa vai ficando bem melhor, mas não é aí que ele poupa! É que em Montemor (e arredores), há muita gente a fazer o mesmo e o YouTrace tem um módulo que analisa os traces dos vizinhos (ou das pessoas que queremos permitir) e que identifica quando duas ou mais pessoas costumam partilhar traces parecidos! Eles já podem fazer car-pooling! :-) Agora, o Carlos leva sempre o carro cheio às terças e quintas, e vai à boleia nos outros dias. O Carlos é adepto das novas tecnologias e decidiu comprar o último modelo do iphone. Como este modelo tem GPS, o Carlos pode usar a aplicação do YouTrace para registar automaticamente os seus percursos através do telemóvel. Para além das novas tecnologias, é também um entusiasta da corrida e não passa um fim-de-semana sem dar uma corrida pela cidade. Quando vai correr leva consigo o seu iphone para ouvir música e ao mesmo tempo registar o seu percurso através do YouTrace. No final da corrida pode ver directamente no seu telemóvel o percurso que fez e submetê-lo no YouTrace para juntar às suas outras corridas e partilhar com os seus amigos. 2. Requirements analysis The following list is the result of the requirements analysis on the previous scenarios: User account o Create account o Login/Logout o View profile o Edit profile Dashboard o Add/remove comment o Send private message o Show notifications 5

Traces o Add/remove trace o Add trace details o Edit trace details o View trace history o Show consumption estimates Subscriptions o Add/remove subscription o Accept/refuse request o List subscriptions Groups o Create/delete group o Invite users o View group profile o Edit group profile Neighbours o List neighbours o Car-pooling suggestions 3. Use cases The use case diagrams are divided in three large groups: visitor, logged user and user profile. The last group is an extension of the logged user, but given the amount of diagrams, it was defined as an independent group. 6

3.1. Visitor The following diagrams describe the actions taken by a visitor (unauthenticated user) on YouTrace social platform. User authentication Users can login or register to YouTrace platform with the usual form or with OpenID technology. It s also possible to recover the password within the login process. Figure 2 User authentication use case diagram Map section The global map view is available to all users, which emphasize the open-source philosophy of the social platform. Figure 3 Map section use case diagram 7

Social section In the social section, visitors are able to search a scroll through public user and group profiles. Figure 4 Social section use case diagram General navigation The remaining actions available to visitors are simply go to actions and don t have much to specify. Figure 5 Map section use case diagram 3.2. Logged user The following diagrams describe the actions taken by an authenticated user when navigating on the main page of the social platform. 8

Map section This section is very similar to the visitor page. Figure 6 Map section use case diagram Social section In this section, users can do all the actions available to visitors plus the subscription actions available from user and group profiles. Figure 7 Social section use case diagram General navigation The remaining actions available to visitors are simply go to actions and don t have much to specify. 9

Figure 8 Map section use case diagram 3.3. User profile As said before, this group includes actions that extend the logged user group. The following diagrams describe the actions that logged users can perform on their personal profile. Home section In the home section, users can interact with their dashboard and have a quick overview of the entire platform. Figure 9 Home section use case diagram 10

Map section In the map section, users can view their personal map built with their own traces. Figure 10 Map section use case diagram Social section In this section, users can view and manage their contact network. Figure 11 Social section use case diagram Personal information section In this section, users can view and edit their profile, including their account password. 11

Figure 12 Personal information section use case diagram 12

4. Wireframes Figure 13 Main: Home 13

Figure 14 Main: Map 14

Figure 15 Main: Social 15

Figure 16 Main: How to 16

Figure 17 User profile: Home 17

Figure 18 User profile: Info 18

Figure 19 User profile: Edit Info 19

Figure 20 User profile: Traces 20

Figure 21 User profile: Edit Info 21

Figure 22 Group profile: Home 22

Figure 23 Group profile: Info 23

Figure 24 Group profile: Edit Info 24

Figure 25 Group profile: Traces 25

Figure 26 Group profile: Members 26

Figure 27 General: Create Account Figure 28 General: Create group 27

Figure 29 General: Login 28

Figure 30 General: View Trace 29

Figure 31 General: Add Trace 30

Figure 32 General: Sidebar 31

Design 1. Identity After some months working on YouTrace platform, we have a brand new identity! It was my opportunity to recall my designer skills and I m very pleased with the final result. I have to thank Guilherme Morais from Webreakstuff for the great tips about the design. Figure 33 YouTrace logo The inspiration for this logo was the placement marks in virtual maps. This clearly identifies the YouTrace application, as some kind of a mapping tool and it s far easier to understand than the whole tracing concept. The blue colour conveys not only importance and confidence, but also calming and relaxing sensations. It s also the recognizable colour for our planet Earth, and it emphasis the globalization and connection that YouTrace application provides. For the YouTrace platform was used Old Man Winter v.4 colour palette from Kuler. Figure 34 Colour palette 32

The typography is very clean, light and just a bit rounded resembling the traces displayed on the maps. I think it just fits perfectly with the placement mark and the overall idea for the logo. The font used for this logo was Quicksand. 2. Layout For the YouTrace platform was chosen a fluid layout instead of a fixed one. With a fluid layout, the elements on the page are distributed accordingly to the user s monitor resolution. This means that the width of layout components is variable and adjustable to fit every monitor. Figure 35 Visitors layout For the visitors pages was used a 2-column layout including a sidebar on the right. Both columns have variable widths in the proportions described in the figure. 33

Figure 36 Authenticated user layout On the other hand, the authenticated user layout has a 3-column layout with an 180px block on the left and a 2-column grid similar to visitors layout. The left block is used as a menu to navigate through users and groups profiles and has fixed width because of its specific content. This is the most significant change between the guest user layout and the authenticated one. 3. Interface The following figures are screenshots from the main sections of the current version of YouTrace social platform. 34

Figure 37 Login Figure 38 Sign up Figure 39 Main: Social 35

Figure 40 User profile: Dashboard Figure 41 User profile: Map Figure 42 User profile: Network 36

Figure 43 User profile: Info Figure 44 User profile: Edit Info Figure 45 General: Add trace The group profiles are similar to user profiles so screenshots are redundant. 37

Wireframes inspection 1. Introdução O YouTrace é uma plataforma social que promove a agregação automática de traces GPS de forma a construir um mapa de estradas global. Para além disso, possui as principais características de uma rede de utilizadores, como perfis, rede de amigos e comunidades para partilha de informação. 2. Objectivo Foi pedido a um grupo de estudo para avaliar os ecrãs para cada uma das acções descritas em cada um. Em cada ecrã o avaliador tentou responder às seguintes questões: Será necessário adicionar/retirar algum elemento ao ecrã? Os elementos estão dispostos da melhor forma no ecrã? É possível realizar a acção? Há alguma coisa que não seja clara ou que confunda o utilizador? Pessoalmente faria algo de outra forma? Tenho alguma sugestão adicional? Caso alguma destas questões suscitasse algum tipo de comentário, o avaliador deveria preencher a tabela com a informação necessária. 3. Caracterização dos avaliadores Para melhor compreender as especificidades de cada avaliador foi necessário fazer um pequeno questionário. 38