Usability Review of Mashup Tools


Published on

Research of usability of Mashup Tools done for Kent County Council as part of the Pic and Mix Pilot (2009), opening up Kent related datasets for all to use and exploit.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Usability Review of Mashup Tools

  1. 1. Usability Review of Mashup Tools Prepared for: Kent County Council Pic & Mix Project (2009) Prepared by: Tanya Ahmed User Experience Consultant Altered Eye 21 May 2009 Altered Eye E W
  2. 2. Table of Contents Executive Summary 1 Pic & Mix Pilot - Innovation in local Government 1 Solution 2 The Web As a Platform 3 Mashups, Web 2.0 and the Semantic Web 3 Web 2.0 and Government 6 Overview of Web Mashup Tools 8 What are Mashups? 8 Building a Mashup 9 Mashup Tools on the Web 9 Yahoo Pipes 16 Overview 16 Home Page 17 Interface of the Editor 18 Saving a Pipe 21 Guardian Open Platform 26 Overview 26 The Interface 27 Mashup Examples 29 User-Centric Design Strategy 33 Objective 33 Methodology 33 Usability Guidelines 37 Heuristic Evaluation 37 Review of Mashup Tools i
  3. 3. Recommendations 43 Usability Testing and Focus Groups 43 Summative Review 43 Conclusion 44 Liberating Data 44 Appendix 45 Additional Resources 45 References 46 Review of Mashup Tools ii
  4. 4. Executive Summary Pic & Mix Pilot - Innovation in local Government “New, networked models of government, combined with the emergence of Web 2.0 technologies that facilitate the requisite level of collaboration, will help governments improve how they work together both globally and locally to solve complex problems that would otherwise be impossible to solve.” 1 In web development, a mashup is a web application that combines data from one or more sources into a single integrated tool or application. The term mashup implies easy, fast integration, frequently done by access to open APIs (Application Programming Interfaces) and data sources to produce results that were not the original reason for producing the raw source data. An example of a mashup is the use of cartographic data from Google Maps to add location information to real estate data, thereby creating a new and distinct Web service that was not originally provided by either source. Flickr mashups aggregate, share and remix Flickr photos in a variety of ways based on a users requirements. Kent County Council has a mashup which monitors traffic and congestion n Maidstone town centre on their website. The mashup also successfully uses cameras to show live updated photos of the main roads. The Pic & Mix Project is currently Kent County Council’s ambitious project which seeks to engage and empower members of the community and its residents to use web 2.0 technologies in a creative manner for knowledge management. “Knowledge management (KM) is about building organisational intelligence to improve performance.”2 Collectively councils have the knowledge to support ongoing improvement across the local government sector. In October 2008 Kent County Council won Innovate ’08, a competition sponsored by Microsoft and the Local Government Council (LGC). Innovate 08 served to encourage innovation within the public sector by pushing local councils to share new ideas to help solve social, economic and environmental challenges, thus enabling councils to improve services for their residents. The winning idea came from KCC and is a pilot project to develop customised online information in the form of mashups, which combine and aggregate data and information from different sources and or websites to form something new and useful, which meets their needs. “We want to open people's eyes to information and services and we recognise that individuals are the experts in their own lives.” 3 The pilot will run from April 2009 to December 2009 and involves members of the business community who are interested in exploiting the power of using technology in their daily lives and in their business. As the local authorities encourage conversation and active participation in their various projects, individual people within the community will feel a sense of belonging to the community, they will feel empathy for one another, and will feel a sense of ‘uniqueness’ in their ability to express or produce something ‘new’. The Pic & Mix Study supports this kind of positive social engagement and within this creative environment discoveries and progress has the potential to be made. These potential Usability Review of Mashup Tools 1
  5. 5. ‘passionate users’ and residents will ultimately be more involved in bettering their own lives and the lives of others in their communities. From a design and usability point of view a framework or portal that facilitates this kind of creativity needs to be designed. The interface for mashup aggregation which will enable users to’ pick and mix’ data needs to be designed using an activity based design methodology. Understanding the primary objectives of the Pic & Mix Pilot is fundamental to designing a competent and usable Pic & Mix mashups portal. Designing a Pic & Mix platform that promotes, enables, and encourages mashup creation through the col- laboration of ideas is the goal of the pilot. Even the smallest considerations or changes made to an application’s usability can have a large-scale positive impact. A useable product or application will be easy to learn, efficient to use, provide quick re- covery from error, easy to remember, enjoyable to use, and visually pleasing. A review of popular mashup platforms on the web and a discussion of ways to improve the user experience of the PIc & Mix Mashups Tool is undertaken in this report . A heuristic evaluation of Yahoo! Pipes, the most popular open source mashup tool at present, forms the basis of this discus- sion. Here are some of the questions that this review seeks to address: How can we design and build and engaging and user centric Mashup Platform for the Pic & Mix Pilot? How can we engage participants of the pilot to use the service? How can we make sure that the mashup tool is easy to use for participants of the pilot? How can we provide the necessary technical training for participants to be able to use the mashup tool? Solution The sustainability and success of the project will also depend on the usability of the application and website, the simplicity of the user interface, and the availability and the reliability of the data. The activity centred design methodology used to develop a social interface needs to support and predict the user’s reactions at every stage of the ‘mashup aggregation process’. Error prevention and the potential recovery from error will also effect the experience of the application. Users also need to be able to readily look at and comment on other people’s mashups so that the collaborative spirit of development and exchange of ideas can be nurtured. The effectiveness of the training will also play a part in the future success of the project. The use of instructional step by step videos will enable the learning process to be quick. It is imperative that the task of creating mashups be as simple as possible, otherwise the danger is that people will not try the service at all. Ultimately the success of the pilot project has the potential to improve the quality of life within local areas and communities by empowering users to generate and share their own content with one another. Usability Review of Mashup Tools 2
  6. 6. The Web As a Platform Mashups, Web 2.0 and the Semantic Web “The web is more a social creation than a technical one. I designed it for a social effect - to help people work together - and not as a technical toy. The ultimate goal of the web is to support and improve our weblike existence in the world. We clump into families, associations and companies. We develop trust across miles and distrust around the corner. What we believe, endorse, agree with, and depend on is representable and, increasingly, represented on the web. We all have to ensure that the society we build with the web is the sort we intend.” Tim Berners-Lee, Weaving the Web 4 Mashup tools, part of an emerging technology, are used to aggregate raw data on the web and are an integral part of our web 2.0 experience. Mashups can combine government data with Google Maps or Flickr to produce new applications. Examples include WikiCrimes, Flickrvision, JobBlob, Digg, etc. Successful mashups commonly use geospatial data available from Google maps with other datasets to produce interesting relevant applications that are useful to people on a daily basis. Mapping brings a whole new dimension to visualising data which helps people digest a lot of information in a visual and intuitive manner. Rich web applications are being created with mashups and they can be deployed quickly and are easy to use. The term ‘Web 2.0’ was originally coined by Tim O’Reilly in an article describing the changes in business and marketing models which was a direct result of a creative use of existing and new technologies. 5 The core of the Web 2.0 movement is the emergence of new ‘patterns’ and not the ‘new’ technology. These ‘patterns’ are new business processes, and a new concept of the user as a contributor rather than a passive being digesting information and data. Web 2.0 democratises the sharing of information as it is no longer possible to control the process of knowledge. Web 2.0 breaks down borders between web services and most importantly utilises the collective intelligence of its users through the collaboration and Usability Review of Mashup Tools 3
  7. 7. sharing of information and data. The success of Ebay and Wikipedia is the direct result of collective user interaction and collaboration. The larger the number of articles on Wikipedia, the more user that will use the it as a reference tool; and the more items for sale on Ebay, the more buyers and sellers will be gravitated to use the site. The same paradigm applies to the success of social media platforms such as Facebook. Therefore mashups linking data with web services have become popular and are part of this new ‘pattern’ of quick deployment and user involvement, perhaps heralding a new business model where mashups fit nicely around the concept of a service-oriented enterprise. What forces propel this collaborative spirit on the web? Psychology and human behavior plays an important part in the new “pattern” of business processes. Why are people attracted to donate their precious time to Wikipedia, Flickr or Facebook when they could be doing other thinks? Psychology and economics teach us that there is no such thing as altruism – whatever people do will create a personal return of value for them. This personal value is measured by individual criteria. Respect and prestige, personal reputation, political beliefs or desires, and of course monetary incentives influence the decision as to whether their contribution creates this value. People create an article in Wikipedia because they believe that the topic is interesting or important or because they want to see their name in print, and put pictures on Flickr because they want to share them with others, thereby influencing how they are perceived by others. The value of contributing must be higher than doing something else (e.g. watching a sports game on TV or adding to the corporate knowledge base). 6 Therefore social interaction on the web is a two way process where the user will invest time in an action and will receive a personal value for doing so that will vary from individual to individual, and from circumstance to circumstance. The value of contributing must be higher or greater than doing something else, otherwise the user will likely not participate in the task. Humans are rational beings who will participate if there is a reward. Wikis and blogs have changed the face of the web and the term ‘blogosphere’ has come into existence as a collective term encompassing all blogs and their interconnections, almost like the ‘new web’ inside the world wide web. Blogs exist as an “extended connected community or a complex social system” 7 The component parts of the blogosphere act differently than the individual isolated components. Tim O’Reilly compares the blogosphere to the human brain. The blogosphere can be seen as representing the pulse of society as a whole and has an organic and fluid form. Hence the restriction that some countries, like China and Saudi Arabia, have tried and continue to place on web content. The structure of the presentation of wikis has this fluidity and resembles the thought processes of the brain. There is no hierarchical structure of wikis and the retrieval of content is possible only through search with no possibility of filtering of content. Usability Review of Mashup Tools 4
  8. 8. “Expressing an idea in a single blog might not change the world, but if this idea is picked up, discussed and commented in a large number of blogs it not only gets the attention of many people – it might get enhanced, developed, refined, challenged and eventually transformed evolutionary into something that might influence the way of the world. Like in the anthill or the human brain this process is not controlled by a single instance – it is driven by the participation and cooperation of many individuals with their individual motives. This absence of a controlling instance allows for creativity, progress of ideas and the expression of individual opinions. The old saying that the whole is more than the sum of the parts is true here. However it is a self-organized process that follows its own rules – forcing or securing this is not currently possible nor probably desirable.” 8 The role of the user as passive viewer to active participant reveals another ‘pattern’ in web 2.0 technologies, where services will forever have the ‘beta’ sticker period of time. This is because the content is being modified continually by the user and so enhancements by the service provider would have to be perpetually made on an ongoing basis. Google’s web applications are an example of this process and ‘pattern’ and so are mashup tools such as Yahoo! Pipes, Microsoft Popfly, and so on. These tools are continually changing as users are directly involved in how they work and in what the tools are able to provide for them. Another ‘pattern’ that follows from the development of web services in this manner is the emergence of mashups. Tim O’Reilly describes this rapid development pattern as” lightweight programming models”. As in scripting languages the code is not secure and so the existing interfaces can be ‘hijacked’ and used by anyone with some technical expertise to create their own solutions and mashups on existing platforms. Mashups combine data from different sources to create new information and knowledge. They essentially create new information by extending the relationship of the data to other data, as described by Tim Berners-Lee as ‘Data Linking’. Google Maps relies enormously on its users to provide location data so that they can build a Yellow Pages-like database. PEOPLE COMMUNITY INTERFACE DATA Raw Data includes government and enterprise data, personal data ,data about local and international events, news and weather data, data on the economy, scientific and medical data, etc. Scientific data, if shared within the community, can be used to find cures for major diseases such as cancer. Data needs to be shared between scientists to help forward scientific discoveries. ‘Linked data’ on the web links to millions of other data. On a social networking sites data is used to form relationships everyday, the data is repurposed to suit requirements and then shared with others. Interoperability between Usability Review of Mashup Tools 5
  9. 9. social networking sites is an issue now as data needs to be freely shared between sites. This has led to the use of the OpenId9 on the web which allows a user to have one digital identity across the web that can be used from site to site. Open Street Map is a powerful map and a wiki - all in one. We are surrounded by data and it is a part of our everyday lives. “Linked Data, I want you to make it and demand it.” 10 Users are innovating and changing the face of the web by adding and manipulating data on the web. People are using Twitter’s growing number of external API’s to post feeds, they’re updating Facebook and other social network sites by using applications such as which allow you to manage and update all your social networks at once with ease. supports more than 30 social networking sites, and you can send your messages via your phone ( iphone, blackberry or a standard mobile phone), via an instant messaging service (AIM, Google Talk, or standard email), or by using third party applications such as TwitterFeed, iGoogle, Twirl, etc. The list is growing. By centralising status updates is offering a worthwhile services. Firefox also has an add-on that allows users to post updates on directly from their browser. Web 2.0 and Government The “Power of Information Taskforce” is helping the government become more open, transparent and effective in its use of published information. The pubic sector has realised that the only way to engage with its citizens is to make use of the social web and by making government data available to all to view. Government data has traditionally been buried and unavailable to the masses - and is now being made available by the US and UK government bodies. This review encouraged local councils to make their data available to be reused. Kent County Council is one of the few councils that is making this data freely available to those who want it within the community now. The ‘Digital Inclusion Action Plan’ has emerged from Whitehall and is promoting innovative ways of providing the public sector with better information about public services. By freeing the data that taxpayers have a right to see and use, transparency within government is ensured, and the data can be useful to people in the community. For example, a mashup has been created that puts all relevant feeds from notable local government blogs on a webpage for the sake of comparison in one place. 11 The website ‘Show Us a Better Way’ is a government website that promotes data sharing and engagement within the community. 12 The government sponsored a competition to encourage people to come up with ideas on how information can be shared and made to be more useful for us all. The ideas were then developed into working applications, progress on which is till ongoing. Some of the many successful solutions being developed and currently include are as follows: • CycleStreets - this website allows you to view and add cycle routes in Cambridge. • UK School Maps - showing the location of schools in the UK. • Cycling England - Is a website dedicated to cycling in England and includes a journey planner. • Journey On - This is Brighton and Hove’s highly successful travel Information portal where users can plan their movement - by either cyclling, walking, taking a taxi, train or bus. Journeys are calculated and displayed according to time required, distance travelled, calories burnt and carbon footprint. The site also displays realtime bus information and traffic information. • Sat Lav - The Site naturally finds the nearest pubic convenience in the City of Westminster. You can send a text and you will receive the location of the nearest toilet based on your location in the city • School Guru - Helps you locate the best schools in Hertfordshire. Usability Review of Mashup Tools 6
  10. 10. • Where’s the Path - Uses the Ordinance Survey Map and Google Maps to picture any spot. • Locating Postboxes - The site is in beta stage and helps you locate your nearest postbox anywhere in the UK and currently has a database of over 300 postboxes - Users can contribute information to build the database. • Crime Mapping - London Metropolitan Police Crime mapping website shows where crime is occurring at a local neighborhood level. Usability Review of Mashup Tools 7
  11. 11. Overview of Web Mashup Tools What are Mashups? Mashups provide a means of visualizing information which most commonly is in the form of interactive maps. They emerged on the web not by design but by the people wanting to combine existing standards and protocols in innovative, exploratory and ‘new’ ways. A mashup takes advantage of Web 2.0 technologies, which may include Javascript, PHP, XML, JSON, REST and AJAX to present information from a number of sources or in a number of ways where the presentation enhances the information. The release of the Google Maps API has encouraged the growth of mashups on the web. Information and data is aggregated by a mashup which is then able to display a large amount of information in a simple manner requiring little interaction from the user. According to Programmable Web 3.3 mashups are added per day and just under 4000 mashups are on their database to date. According to a survey done in 2007, 22% of organisations surveyed used mashups and an additional 42% planned to use mashups with two years. Not surprisingly, mapping mashups make up 36% of all the mashups on Programmable Web. From a user experience perspective a mashup presents information in a clever way, using a small amount of space, and is able to communicate information quickly and in an intuitive manner. The user will typically not need to click more than once on the mashup and will not need to navigate through the mashup as is necessary when navigating through a website. Time is thus not wasted and there is not a steep learning curve. Everything is presented at once in an economical and user friendly way for the user, where the mashup itself takes care of the processing of information behind the scenes or in the back-end. There are broadly two kinds of mashups: multi-source mashups and presentation mashups. Multi-source mashups combine or aggregate data from two or more sources thereby adding value in terms of the information being presented in the mashup. Presentation mashups will present the same data in more than one way, so it is a way for the data to be visualised in different ways. Why use mashups at all? We are surrounded by ever growing amounts of information on the web and these are complex times where mashups can help us understand concepts, data, and information in a more easy to digest format. Mashups have the potential of simplifying complex concepts and organising data in a format that can be understood by users in less time. Mashups have started in the consumer space, and their continued success in the public domain has meant that there is now increasing interest for mashups in the corporate world as well. The financial value of developing mashups for companies can be to increase and grow its revenue and its customer base. Within large organisations mashup tools can be used internally as productivity tools and can be extremely valuable on a day to day basis. As mashups can be deployed quickly, and can make it faster to find and present data, they can be an invaluable tool for companies and their employees. It is important to remember that employees spend a large amount of time putting together data within their business applications on a daily basis. Mashups could make the retrieval, combination, and collaboration of data and services a more efficient and less time Usability Review of Mashup Tools 8
  12. 12. consuming process. Within government mashups encourage transparency as the data is made available openly to the people. Building a Mashup A bumper crop of new mashup platforms by Dion Hinchcliffe The steps that a developer or user must generally follow in order to develop a successful mashup are as follows: • Defining a Clear Objective or Reason for Mashup • Identification of the Data and Keys • Access to the Data - API, RSS feed, or own Database • Designing the User Interaction - There may be a start page and a mashup page or widget • Implementing the mashup Mashup Tools on the Web Successful Mashup tools or platforms on the web require that deep access of data repositories be available, and that the tools be easy to use and that users require little training to do so. At present most mashup tools on the web are used by developers or would be coders, rather than the general public What is required is a truly user friendly platform with an intuitive interface that perhaps follows software or application design patterns. Yahoo! Pipes There are many mashup platforms available, although most of them are not open source products. Amongst the open source ones is Yahoo! Pipes (still in Beta stage), which is the highest profile mashup tool available today. Yahoo! Pipes Usability Review of Mashup Tools 9
  13. 13. continues to be improved and provides the most interactive, intuitive and user friendly data aggregator and manipulator available today. Pipes has a large community library of data mashups to select and learn from. It is also possible to clone a mashup to suit your own needs. Although Pipes is not enterprise ready, it’s interface is one to emulate when designing a GUI mashup platform or tool. Yahoo Pipes Home Page Microsoft Popfly Other lesser known mashup platforms include the relatively easy to use and engaging Microsoft Popfly which appeals more to the casual and younger user. It has an advanced 3D block visualisation and provides a rich user experience based on Silverlight. It has a gallery that resembles that of a social networking site. UIzard A relatively little known Korean Mashup Platform known as UIzard, in Beta Version, is a web based open source Ajax development tool which features a well designed interface that uses drag and drop functionality for its Yahoo User Interface Usability Review of Mashup Tools 10
  14. 14. (YUI) components. The design of the graphical user interface heavily borrows from Yahoo! Pipes design with the added design Yahoo! components but this leads to a more complex interface that is perhaps not as user friendly as Yahoo! Pipes. UIzard GUI Editor ISM Lotus Mashups Another interesting mashup tool has recently been released by Intel is known as Intel Mash Maker which is in Beta stage at present. Intel mash Maker is a browser extension that allows users to modify Web pages and combine information from various sources. The mashing up of information takes place on the client’s machine, rather than on a server. Users can customise web pages and create widgets for themselves. The project was inspired by Greasemonkey, which is a Firefox extension. Usability Review of Mashup Tools 11
  15. 15. “Mashups for the Masses: Intel® Mash Maker takes mashups to a whole new level with an innovative and radical new way of browsing the internet. Mash Maker's natural and simplified approach to creating mashups, makes it easier, faster, and fun to create personalized mashups on-the-fly. Instead of browsing through websites, Mash Maker's built-in technology enables you to browse through contexts and semantics, as well as easily view information the way you want, and presented the way you want.” 13 Intel Mash Maker allows widgets to be made quickly by combining content from multiple sources such as web content, videos, maps, RSS feeds, photos all to be displayed in one place. The mashups can be managed, saved as favorites, edited, sorted, annotated, and shared by with friends, or on social network sites. They can also be designed and customised in terms of appearance and layout. Mashups can be adapted to your persona, thus individualised according to your interests and preferences. IBM Lotus Mashups is perfect for businesses and enterprise and was released middle of last year. Lotus Mashups is also a graphical browser based tool suitable for the technically competent business users. It also provides business-ready widgets that can be rapidly deployed within businesses and organisations. The product also uses a drag and drop interface which conceals the technical issues that are dealt with behind the scenes. The system has been designed to predict and understand what the user wishes to do with data in any given situation by recognising similarities in the data that might be tagged in the same way. This should make the user experience a more rewarding and intuitive one. IBM Lotus Mashups targeted to Business and Enterprise Usability Review of Mashup Tools 12
  16. 16. Mashup Patterns for Business on Vimeo IBM jStart team focusing on widget creation Usability Review of Mashup Tools 13
  17. 17. IBM Lotus Mashups allow desktop widgets and mashups to be created on a canvas using anintuitive and visual process, where no coding whatsoever is required. The widgets can be transported to the iPhone, or across any platform. Any end user can make use of this process according to IBM. Widget / Mashup created on desktop is transported to iPhone IBM Infosphere MashupHub illustrates mashup creation and is similar to the Yahoo! Pipes Interface Usability Review of Mashup Tools 14
  18. 18. Tarpipe Tarpipe, currently in Beta stage, makes it easy to share content across different social media applications, and has a graphical user interface similar to that of Yahoo! Pipes. Tarpipe acts as an intermediary and distribution platform that simplifies regular upload activities. It enables publishing of content to multiple locations on the web, the combining of media into a single blog or article, manages regular upload actions, and transforms documents on-the-fly. The interface of the GUI is similar to that of Yahoo! Pipes Email to Tarpipe which publishes its subject to Twitter Usability Review of Mashup Tools 15
  19. 19. Yahoo Pipes Overview Yahoo! Pipes Beta version was released in February 2007 and was well received by the web developer community. Pipes is a hosted service that allows you to remix feeds and create data using a highly effective visual editor. It allows you to route output from one process to another process as its input, allowing you to easily route data through a series of loosely connected applications, or ‘pipes’. Its visual editor makes the free service accessible to non-programmers. Pipes can be used within web applications, or the mashups can be published and shared as web services without the users ever having to write any code. Yahoo! Pipes Home Page Usability Review of Mashup Tools 16
  20. 20. Home Page The design and layout of the home page emphasizes the simplicity of Yahoo! Pipes as an editing and aggregating tool. The page is divided into three distinct areas: The top image extends across the site and displays the ‘Featured Pipe’ with the logo and main navigation above, to the left there is an ‘About Pipes’ panel, and the main content area is on the right, which highlights the fact that a Pipe can be built in minutes and shows three further examples of Pipes. The main navigation bar includes the logo at the top left with Home, My Pipes, Browse, Discuss, Documentation, and the visually prominent ‘Create a Pipe’ on the top right. The search bar and Sign In are typically located at the top right. Before you can create a pipe you must either login using your Yahoo ID or are asked to ‘Join Now’. Depending on which you choose the following screens will appear. If the user chooses to see the featured Pipe then they are taken to the particular Pipe which in this instance is the “New York City near Something” Pipe where you can select an area in New York, and filter results by the apartment being near a point of interest (such as a park), and the distance from this particular point of interest. Details of the Pipe and its creator are also available on the left. Usability Review of Mashup Tools 17
  21. 21. Interface of the Editor Once you have either logged in or joined Yahoo!, you can begin using the Pipes Editor. The most appealing feature of Yahoo! Pipes Editor is its graphical user interface (GUI). It provides an intuitive drag and drop interface enabling you to aggregate, manipulate and mashup content from the web. The Editor is divided into three areas: the Canvas where is your main work area, the Library panel which includes all the modules, and the Debugger panel at the bottom where you can inspect the output from your pipes. The sequence and flow of the processes or pipes created is easy to follow with this drag and drop interface on the Canvas. The interface uses the familiar tabbed layout where multiple pipes can be created in their own windows, which is an established design pattern that users are accustomed to using in browsers and applications. Usability Review of Mashup Tools 18
  22. 22. The user is not aware of which page they are on within the site as breadcrumbs are not use and the current page is not highlighted within the navigation of the site. This is confusing to users who will not know where they are at any given point. The relation between the Canvas Workspace, MyPipes, and Documentation is confusing. A sitemap would clearly help users to navigate the site with ease. The Modules Library The Modules Pane in the Library on the left is your ‘tools palette’ as in other well known applications. The Modules Library contains all the predetermined items or tools that enable the mixing, sorting, and merging of different data sources; as well as the user specific saved pipes under ‘My Pipes’ and the user’s ‘Favorites’ as well. The list is collapsable so that a user can see the primary categories on their own, which is useful for a new user not familiar with all the options offered. In this way the novice user will get overwhelmed by the long list of technical options which may be difficult to understand at first glance.The modules are arranged according to their functionality in the Library panel and are subdivided into: Sources, User Inputs, Operators, URL, String, Data, Location, Number, Favorites, My Pipes, and Deprecated. They can be dragged onto the canvas where pipes are assembled and tested. Data inputs are setup using Sources where RSS and Atom feeds can be accessed via HTTP. User Inputs allow specifying the input with values such as numbers, URL, location, text, and date. Operators contain a number of pre-defined operators that can process data. They include loops, sorting, union, and so on. The URL module allows the creation of custom URLs which pass data to the other modules. The String module provides string operations such as regular expressions, translation, replace, and concatenation. The Date module is self explanatory and allows the formatting of dates. The Number module allows simple math functions like addition and subtraction to be used when manipulating data. Their meaning and functionality is not self-explanatory and users will need to learn what they mean and ow they can be used in practical examples. Modules Pane in the Library The modules are wired together in an intuitive manner on the canvas by clicking on the output of a module and connecting it to the input terminals of another module, and this will only be possible with compatible terminals when they flash in orange. Therefore the user is made aware of whether this is a possibility before an error occurs. The sequence and flow of the process of linking data sources and feeds is clear with this visually rich graphical user interface. This gives the user a sense of control of the process and the interface. Feeds can be used from Flickr, Google, and Yahoo itself. When you click on a Usability Review of Mashup Tools 19
  23. 23. module you will see a description of its function at the bottom of the Library panel. The modules have input fields which are filed with data. Compatible terminals between modules flash orange If the user hovers over the any of the terminal he will be advised about what kind of data that terminal expects to emit or receive. The user can cut a connection between modules with the scissor icon which appropriately also appears when the user hovers over the pipe. This is an intuitive and visual interface where the user would expect to be able to break a connection by interacting with the wire itself. Another subtle yet impressive feature of the graphical user interface is the way the modules change in opacity according to which ones are being manipulated. This brings the area that is being worked on in focus and makes it prominent until the input or selection of data is complete. Modules also change colour according to the functionality of the module within the main canvas area and alternate between orange and blue, this helps to distinguish them from one another. Usability Review of Mashup Tools 20
  24. 24. Fetch Site Feed Module being filtered by the FIlter Module according to selected parameters Within the drop down list of options in the filter module where ‘item’ is selected, the options that can be added are clearly visible - they are ‘description’, ‘link’, ‘pubDate’, and so on. The displayed ‘Item.’ is grayed out and thus highlights the other selectable items on the list only. This makes the process easier for the user and guides the users actions in the next stage of the process. The use of the pattern of brightening and dimming the screen or elements on the screen is a common transitional pattern in the design of web interfaces. The ‘Brighten and Dim’ pattern is especially useful in controlling the user’s point of reference. It also helps in communication subtle changes in the interface which are a result s a particular action being performed. Using Brighten focuses attention, whereas using Dim on elements causes the elements to be treated as secondary in importance in terms of the action being carried out. Yahoo! Pipes effectively uses this technique consistently throughout the process of pipe creation. The modules in the Library panel are clearly delineated in a user friendly manner and the descriptions (at the bottom) help the user to understand their functionality. Hovering over the modules also gives more information on each module. Saving a Pipe Once a pipe has been created saving it is an easy and intuitive process. As individual Pipes appear as tabbed pages, the user can scroll to the tab at the top and rename the Tab for the Pipe that has been created, and can then save it and publish it on the web. The text field appears highlighted when the user renames the pipe. More than one pipe can be created with the tabbed interface. The opacity of the mashup changes as the save and publish function is being performed where the Usability Review of Mashup Tools 21
  25. 25. save dialog box is highlighted while the background page is dimmed completely. The user is made aware that the primary consideration within the process now is the ‘Save’ action. When the pipe is saved and published the user can preview the pipe by clicking on the ‘Run Pipe’ link located at the top left of the Editor. Adjacent to the Run Pipe link in blue is a ‘Link Saved’ text area which appears in black and bold. This gives the user confirmation that the pipe has been successfully saved. In terms of the user experience providing this visual feedback is important. The preview takes place on a hosted run page where more information about the pipe can be seen. The type of content the pipe outputs can be seen here, changes to the pipe can be made, and subscribing options to the feed can also be seen. The pipe has now been added to the user’s ‘My Pipes’ page where other created pipes and favorites are also saved. The pipe can also be cloned at this point. Usability Review of Mashup Tools 22
  26. 26. Pipe Saved & Run Pipe Preview Page with Pipe Pipe added to My Yahoo Page Usability Review of Mashup Tools 23
  27. 27. Collaborating and Sharing My Pipes Page with Creator’s Name and Avatar The Profile Pages give the creator of the mashups a sense of identity, with and name and avatar. They show the collaboration level of the user and of course they show others which pipes were created by the user. Yahoo! Pipes can be seen as a social application in this regard. The profiles and the pipes can be shared with users of the web quite easily. Without Profile Pages it is likely that users would not create any mashups. There is now a large community of developers and users who have contributed to the growth and popularity of Yahoo! Pipes by posting video and traditional tutorials with screenshots on the web. Being an Open Source Project, Pipes’ users tend to feel more inclined to contribute to the community out there as they are a part of this community. Pipes are cloned, shared, and re-mixed by the users and this further helps the collaborative spirit. Contributers feel valued as their skills and creations are visible, used and valued by the web community in turn. Therefore the collaborative spirit thrives in this sort of environment, resulting in more mashups being developed and improved upon all the time. Usability Review of Mashup Tools 24
  28. 28. Error Prevention If incorrect data is entered in the modules then the user is given warnings such as in the example below where a Fetch Data module is setup is configured with a relevant URL or a missing URL in this case. The correct URL displays the BBC logo, or the RSS Logo; and the one with the missing URL displays a universally acknowledged warning or error sign. Users are kept aware of any errors either visually in the Canvas area and/or in the Debugger Panel of course. Incorrect field (not entered) Field entered correctly with Field entered correctly with the Figaro Sport URL Terminology and Learnability The terminology used by the Yahoo! Pipes application is clear but not necessarily easy to understand. A certain level of technical understanding of the web, URLs, RSS feeds, ATOM feeds, XML, mashups, and the technology that powers Web 2.0 is a prerequisite in understanding how to make use of Pipes. Yahoo! Pipes has a sophisticated and capable Editor which programmers can easily make use of to its full potential. In order for non-programmers to be able to use the Editor comfortably, they need to have some clear technical understanding of the web and the technical jargon that accompanies these technologies. The video tutorials on the site are helpful in understanding the process of using the Editor itself, but not the technology that enables and drives the creation of mashups. Yahoo! Pipes cannot be used by a non-programmer who lacks technical knowledge and it is likely that this kind of user will struggle in this process. Understanding information taxonomy helps to build better applications. The organisational structure of the Modules Library would have taken careful consideration at the design stage as it has a complicated structure that has been designed to be ‘easy to use’ where the meaning of technical and commonly used and accepted terms needs to be understood by all its users. Certain conventions and patterns are adhered to in the design to go along with mental models of the users. Technical terms or concepts are further described in more detail at the bottom of the Modules Library pane when selected. Usability Review of Mashup Tools 25
  29. 29. Guardian Open Platform “I’m not bowled over much these days. But Guardian Open Platform is a chasmic leap into the future. It is a work of simplistic beauty that I’m sure will have a dramatic impact in the news market. The Guardian is already a market leader in the online space but Open Platform is revolutionary. It makes all of their major competitors look timid. Governments should be doing this. Governments will be doing it. The question is how long will it take us to catch up.” 14 Tom Watson, MP Overview With the Guardian Open Platform launched in March 2009 the Guardian is organising and offering data in a more accessible format to everyone. Martin Belam is a consultant and information architect for the Guardian Open Platform and explains that “URLs should be PERMANENT, that all content should be uniquely ADDRESSABLE, that multiple routes to content make everything DISCOVERABLE, and that everything should be as OPEN as possible.” 15 This is the underlying structure - and principle - that drives the Guardian Website and the Guardian Open Platform. The Guardian has been able to engage the community of users successfully since the launch of its website in 1999 with its news, blogs and forums. The Guardian realised early that consumers would be less interested in the printed word with the meteoric rise of information technology and the web. It offers nearly all of its printed content online. Launching the Open Platform was the next step in its innovative agenda to make data freely accessible to its users, who are now able to create new information, and potentially new stories, with this data in this collaborative process. Newspapers such as the Guardian are spreading journalism, and their influence as a brand and identity, over the web; and the Guardian is becoming an integral part of the web. Before the web the Guardian had 6 million readers and it now has 33 million readers every month. Usability Review of Mashup Tools 26
  30. 30. The Interface The Guardian Open Platform is a suite of services that enable users to build applications with the Guardian data. The Open Platform comprises of two products: The Content API and the Data Store. Added to this is the Data Blog which catalogues the development and success of mashups and the platform itself. The Guardian Content API includes articles as far back as 1999 and in some cases much further back. There are approximately 1,000,000 articles available and more are being added. The content and data is structured, tagged, reliable, and broad in depth and scope. The Guardian is helping to organise online data and offer it in a more accessible format by using Google docs. The Guardian’s extensive Data sets include primary school results, school admission, migration, population, UK’s aging population, gender equality, health issues, politics, finance, crime statistics, social welfare issues, the environment, and so on. The Content API allow retrieval of the Guardian content, it can be seen as the bridge between the content and the software or application. The Guardian API allows users to send requests and receive information form the Guardian database in the form of articles, images, and other forms of information. The API can be used as a search engine in order to discover what it is capable of. The Content API is free to use although there are limitations on how many requests can be made and potential users need to apply for an API Key in order to use the Open Platform at present. Usability Review of Mashup Tools 27
  31. 31. Guardian Open Platform Data Store Usability Review of Mashup Tools 28
  32. 32. The Data Store can be seen as the ‘library of all the Guardian content’, and is a collection of important and high quality data sets curated by Guardian journalists. Useful data can be found here, can be downloaded, and integrated into other internet applications. The data sets come with relevant terms and conditions for their appropriate use. Clear Navigation Structure of the Guardian Website with use of ‘Breadcrumbs’ The Guardian has a clear navigation structure that highlights where the visitor of the website is at any point in the website. The structure of the site is clearly visible and breadcrumbs are used effectively to help visitors find their way around the site. It is clear from the navigation that the Guardian Open Platform has a Content API section, a Data Store, a Blog, a FAQ section, and the Activate Summit section which highlights the one day summit being held in London on July 1, 2009 on ‘Building a better future through the internet’. The Blog enhances the collaborative function of the Guardian Open Platform and the website. Articles are written by the Guardian journalists but also by members of the community who may be involved in the creation of applications using the Data available in the Data Store. Help is offered to users of the Open Platform in the FAQ section as can clearly be seen in the Navigation bar at the top of the Guardian website. Simple browsing is possible with the API Explorer but for building applications the data can be returned as XML, JSON, and ATOM formats. Non-programmers can use Yahoo! Pipes to build applications by using the ATOM format feeds. The Guardian has also partnered to produce client libraries for those who want to code in Ruby, Python, PHP and Java. There is no application layer to the Open Guardian Platform at this stage of the Beta Trial. The Open Guardian API Explorer uses the Endeca engine to generate XML onto the screen. Technically the back-end of the API is similar to the search engine architecture. Mashup Examples “Our ‘Free Our Data’ campaign has even prompted the government to review its information access policies. And from today, we will do it with the world’s best sets of data... That is where the Data Store and the Data Blog come in. Everyday we will publish the raw statistics behind the news and make it easy to export in any form you like. It is about freedom of information. But it is not a one-way process - we want you to tell us what you have done with the data and what we should do with it. The facts are sacred - and they belong to all of us.” 16 Some examples of applications and visualisations being produced with Data from the Guardian Open Platform follow: Usability Review of Mashup Tools 29
  33. 33. Guardian Trends Application - built by Stephen Ellott Tweetminster - Alberto Nardelli and Andrew Walker built data from the Guardian's Content API into Tweetminster Wire application to contextualise MP's tweets to events which were happening that day. Usability Review of Mashup Tools 30
  34. 34. Visualising MP Expenses Usability Review of Mashup Tools 31
  35. 35. The Definitive Atlas of UK Government Spending as a Visualisation - based on Data collated by The Guardian Usability Review of Mashup Tools 32
  36. 36. User-Centric Design Strategy Objective Mashup toolkits are still at an early stage in their development. IBM’s Lotus Mashups is particularly suitable for business and enterprise, while the open source Yahoo! Pipes is accessible by all and is producing interesting mashups by non-developers and power developers as well. The challenge for the Pic & Mix Mashups platform is to develop an engaging graphical user interface and a rich user experience using Yahoo! Pipes as a model. In just over two years Yahoo! Pipes has successfully been at the forefront of the open source mashup technology. In conjunction with the user friendly Yahoo! Pipes, developers are using the extensive Yahoo Developers Platform, which includes YQL and BOSS, to build new applications and services for the future web 3.0 experience of the semantic web. Methodology Mental Models Users have certain expectations and previous knowledge of how a system or application will work. These mental models need to be clearly designed for. Users expect to follow a clear and logical progress when using any system or application. They will also expect to be guided along the way and will appreciate visual and verbal cues from the system in order to complete tasks. The Heuristic Evaluation will highlight these points. Designing for Social Interaction Understanding the considerations necessary in designing a social application or interface are necessary for a successful outcome of the Pic & Mix Project. An interface that enables data aggregation needs to be designed for the activity, rather than any specific user profile or persona. No assumptions of a user’s capabilities or skill-set can be made or generalised easily. The application should be able to be used equally well by a novice and a technically savvy user as well. This can be done by providing different levels of support, help and documentation within the application that can be made use of when required. The application and interface is designed with an activity centred design methodology, broken down into clearly defined goals the user needs to accomplish, their activities, and the various tasks that are necessary for them to complete the activity successfully. It is important for the application to concentrate on the core activity of viewing, creating and engaging with others in mashups. The interface will clearly promote this activity as its primary task. The application must also enable social interaction, allowing users to share their ideas and mashups with one another. Users need to be able to view mashups, aggregate their own mashups and comment on other user’s mashups in a constructive manner. User Profiles can Usability Review of Mashup Tools 33
  37. 37. be setup to allow this social interaction to take place. The members that design mashups and or contribute in other ways could be rewarded for their participation. Members will be able to invite friends to have a look at their mashups and testimonials of users of applications and the individual mashups will be encouraged and displayed. Mashups made by other members will be trusted and reviewed as this is how social behavior works. This is known as the ‘Amazon effect’. Social design as the “conception, planning, and production of websites and applications that support social interaction.” 17 The reason for concentrating on the primary activity rather than an abstract notion of the users is that a vast number of people are using the social software. The most important question to ask is what are the people using the software doing in this activity-centred design methodology. Facebook, Twitter and the Apple iPod are products which are the result of an activity-centred design approach. The most successful applications we use everyday fulfill one activity: email applications, Skype, Microsoft Word, a calendar, iTunes, a photo editor, etc. It’s a fact that the most compelling applications allow the user to excel and master one single activity. This empowers the user, giving them a sense of achievement. They feel great, not about the software, but about themselves. They are on their way to becoming passionate users. The primary activity of the Pic & Mix tool is to enable the creation and sharing of mashups. Creation Sharing USER Collaboration Learning Designing for a Complex Adaptive System The Pic & Mix Platform can be seen as a complex adaptive system, which is composed of interconnected parts. In addition to being complex the system is also adaptive, and will change in time as it grows. With user involvement and collaboration the system will change and redefine itself. Without the creation and distribution of mashups the complex adaptive system would fail. “The goal of many of these complex systems is the same: to aggregate the individual actions of many people in order to surface the best or most relevant content. The intelligence that emerges from the activity is often called collective intelligence. Collective intelligence is based on the idea that by aggregating the behavior of many people, we can gain novel insights” 18 Usability Review of Mashup Tools 34
  38. 38. Complex systems generally work as a three step process: Initial Action, Display, and Feedback. This ‘simple process’ needs to be conveyed to the users of the Pic & Mix Mashups Tool so that they understand their journey within the application. The three step process of creating a mashup, displaying or publishing the mashup, and awaiting feedback and collaborating with other users. Making the process and interface appear to be simple and intuitive is an ongoing challenge for the designers of the system. As a design pattern providing a clear 3 Step process provides a ‘Call to Action Invitation’ would be particularly helpful in helping users to create, publish, and share mashups. 19 Example of a 3 Step Process - Call to Action Invitation When designing a complex system providing help, training, and documentation is imperative to the success of the application. Different levels of support need to be provided for different users. Some users are more visual for whom video will work better, others learn better with text-based information; and most users will learn to build mashups by using and following examples. Yahoo! Pipes handles the learnability issue quite well. Community involvement helps this process as well. Design Patterns Design patterns are very useful when designing for rich interactions. They are tried and tested patterns that help in building rich interfaces and applications. The six principles are taken from “Designing Web Interfaces” published earlier this year. 20 1. Make it Direct In-Page Editing Drag and Drop 2. Keep it Lightweight Understanding the User’s intent Keeping the user’s effort level to a minimum Providing a minimum amount of interface with Contextual Tools 3. Stay on the Page Don’t break from the User’s Workflow with repeated page refreshes Use Overlays, Inlay, Virtual Space (by collapsing menus etc), Process Flows Usability Review of Mashup Tools 35
  39. 39. 4. Provide an Invitation Affordance Invitation Call to Action Invitation Blank Slate Invitation Tour Invitation Hover Invitation Drag and Drop Invitation Interference Invitation More Content Invitation 5. Use Transitions Brighten and Dim, Expand and Collapse, Animation, Spotlight Lightbox Effect, Flip, Carousel, Accordian, Slide In and Out, etc. 6. Be Reactive “For every action there should be and equal and opposite reaction... This is the physics of our interfaces” 21 Auto Complete, Live Suggest, Live Search, Refining Search, Live Previews, Progressive Disclosure, Progress Indicators, Periodic Refresh Usability Review of Mashup Tools 36
  40. 40. Usability Guidelines Heuristic Evaluation22 Visibility of System Status Users need to be kept informed about what is going on in the application at every stage of the process. This means that appropriate feedback needs to be given to the user when tasks are being performed. This can be done either by progress bars, an hour glass, breadcrumbs, and confirmation messages depending on the task or process that is taking place. The Yahoo! Pipes Editor accomplishes this well by keeping the user informed of all processes as and when they occur. As the GUI s a very visual process, users are able to visually follow the process of creating a pipe. As modules are dragged and dropped onto the canvas their connection to one another is conveyed to the user, any data that can be added to the module is conveyed to the user, and at every stage of the process the user is in control of the process. If more information is required about and module then that is available at the bottom of the Modules Library pane. Saving pipes is an intuitive process where feedback is given to the user at every stage of the process from saving, to publishing, and previewing the pipe. Match between System and the Real World This implies that the application should speak the user’s language with words, phrases and concepts that should be familiar to the user rather than system oriented or technical terms. Information needs to flow in a logical manner. The visual Drag and Drop interface helps the user’s understanding and use of the interface in an intuitive manner. The dragged module changes in colour from blue to orange indicating to the user that it is the point of focus. Usability Review of Mashup Tools 37
  41. 41. User Control and Freedom Users will often choose options by mistake and will need a clearly marked ‘emergency exit’ to return back to the previous state. There need to be clearly marked one step ‘Undo’ and ‘Redo’ options to available to the user. Where Am I? Consistency and Standards There should be no confusion in user’s minds that the meaning of different words, situations or actions mean something else. The use of language needs to be clear, follow mental models, and be consistent throughout the application. Users of the application or mashup tool have certain expectations and have visited hundreds of sites and have used many applications. They have expectations on how an application should work and these expectations need to met by this mashup tool. Learnability of the tool or application needs to be kept to a minimum. Understanding information taxonomy helps build better applications. The terminology used needs to be simple and technical jargon needs to be simplified as much as possible. The use of accepted interface design patterns will help the application convey this consistency. Error Prevention Error messages are necessary although the ideal situation would be a careful design where errors are prevented from occurring in the first place. They can either be eliminated or options can be given to the user for confirmation of an action before they commit for it to take place. Also if instructions, commands, and input requirements are clearly expressed and findability is enhanced by the design of the interface, then errors will naturally be less likely to occur. In Yahoo! Pipes the Modules can be deleted from the canvas by clicking on the red X circle at the top right. However there is no way to undo this delete function which will be an issue with users who delete a module without either intending to do so or change their mind afterwards. If a previous copy has been saved then it will be possible to return to the earlier state. This kind of situation need to be prevented from happening as it can be frustrating for the use and will affect their confidence in the application and even in their own abilities. Usability Review of Mashup Tools 38
  42. 42. Recognition Rather than Recall User’s should not be asked to remember complex commands or processes and this can be avoided by a visual interface that makes objects, actions, and options visible. Instructions should also be visible for when they may be required by the user. Usability Review of Mashup Tools 39
  43. 43. Flexibility and Efficiency of Use Accelerators, not seen by the novice user, may often speed up the interaction for the expert user so that the application can cater to both levels of experience. Allowing users to tailor frequent actions gives flexibility to users and meets different user’s needs. Providing an option to ‘Save as Favorites’, ‘Bookmarks’ or ‘Recently Visited’ sites or mashups in this case would increase the efficiency (and flexibility) of the tool or application. In Yahoo! Pipes the option to save ‘Favorites’ and ‘My Pipes’ is available and does precisely this, it increases the flexibility and efficiency of the use of the tool. Aesthetic and Minimalist Design Dialogues should not contain information which is irrelevant or rarely required. Every extra information competes for the user’s attention and affects the relevance of the main functions of the application to the detriment of the task at hand. The interface needs to be kept lightweight, where respecting the user’s level of effort is key to producing an effortless interface. Understanding the user’s intent and providing the right amount of interface is critical to producing an effortless and positive user experience. The WYSIWIG principle is an accepted design pattern for applications and the Drag and Drop interface allows for the direct selection and editing of objects as in the Yahoo! Pipes Editor. It is the perfect interface for mashup creation. Help users Recognize, Diagnose, and Recover from Errors Error messages should be displayed in plain language, and not using technical terms that may confuse the user. The problem need to be precisely described and a solution suggested in order that the user can continue with using the application. This is especially important with form validation where the user fills out a registration form. If form fields are filled incorrectly then an indication needs to be given to the user where specifically the error has been made. Usability Review of Mashup Tools 40
  44. 44. Help and Documentation Although it is better if an application can be used without any training or documentation, this is seldom the case. Some necessary documentation or help is necessary as users from varying backgrounds will use the application. With a mashup tool or application like Yahoo! Pipes this is especially necessary as the application requires a high level of technical understanding of the structure of the web in order to use the tool. Intimate knowledge of terminology is also necessary. How-to video tutorials are especially helpful and the step by step written tutorials with screenshots will also help users. The examples of pipes that can be cloned and modified will also help users. Some users naturally learn faster through videos, others by reading, and others by ‘doing’ or ‘playing’. All options should ideally be available for users to choose from. Yahoo! Pipes has various levels of ‘help’ that is offered. There are two video tutorials to get the novice user started on the Home Page, and there are more than ten tutorials available from the Documentation link from the Home Page. Once the user progresses to ‘creating a pipe’ with the Pipes Editor, there is a description of each module at the bottom of the Modules Library Pane. Within the description is an option to see further documentation regarding other use of the module and a visual example of the module as an example pipe to have a look at. Both are very useful for a novice user to learn how to use Yahoo! Pipes with some perseverance. The learnability of the system is clearly a bonus. There are different levels of support being offered which will take into account the user’s previous knowledge and technical understanding. A technically competent user may only need the information provided in the Modules Library to continue creating a pipe. A novice will use this information and progress to reading and studying the Reference page for the module and the example of the module in action. Module Library Pane --> Module Reference --> Example of Module in Action Usability Review of Mashup Tools 41
  45. 45. Full Module Reference Library Documentation Page that can be accessed from the Home Page Full documentation can also be accessed directly from the Home Page. Here access to all related documentation, tutorials, video tutorials, Full List of Modules, and Troubleshooting information can easily be accessed. Usability Review of Mashup Tools 42
  46. 46. Recommendations Specification Document With a review of mashup tools on the web, a detailed look at Yahoo! Pies and the Guarding Platform, a look at the design strategy for the Pic & Mix mashup Platform, broad user goals and tasks, and a heuristic evaluation of the Yahoo! Pipes graphical user interface now complete; we are now able to look at developing a detailed specification document for the new design and interface. This specification document would include the following sections: Purpose of the System or Interface - Business Objectives User’s Backgrounds User Goal Tasks (Flow Charts) - User Journeys Information Architecture - Content, Flowchart, navigation Issues (Tab, Menu based, Breadcrumbs) Terminology - technical terms and their consistent use Groupings of Interface Elements / Tasks Simple Card Sorting exercises will help with these groupings & navigation Functional Requirements - Everything that the interfaces will allow the user to do Non Functional Requirements - Theme, Colour, Brand, Graphics, Media, Fonts, Security, Accessibility, Usability, Interpolarity Wireframes - Mockups - Sitemaps In order to compete the specification document contextual inquiry would be necessary. An introduction to the technology behind the IBM Mashup Tools being used would help. Seeing the operating environment of the software and perhaps some stakeholder analysis would also help formulate the goals of the application and pilot study. Elements of the specification document would be ideally worked on with a small team of designers and developers involved with the project. Card sorting exercises will help develop groupings and terminology. These exercises will help with the navigation and structure of the application. Usability Testing and Focus Groups Once the prototype is complete then user testing and focus groups will help with evaluating the usability of the application. Some low cost user testing could also be done using a prototype at an earlier evaluation phase. This will allow the interface to be tweaked before it is used in the pilot. Silverback is low-cost user testing method that employs screen capture and offers quick results on-site, and will only requires a laptop with a camera and microphone, and the presence of the evaluator. Summative Review Towards the end of the study a summative review will help evaluate the success of the pilot project, will highlight any issues that arose, and will look at the future of data sharing and mashups within local government. Usability Review of Mashup Tools 43
  47. 47. Conclusion Liberating Data The Pic & Mix Pilot can be seen as the prototype phase within the larger context of local councils engaging with members of the community to deliver services and information that they need, rather than delivering services that the council wants to deliver to them. It is all about empowering people to challenge and change local councils and government’s policies and methods of dealing with the ‘general public. A user-centric approach where the individual is at the center of the public policy is the new model which mirrors how the world wide web and web 2.0 technologies have turned passive individuals into active information and knowledge sharing participants - or ‘information aggregators’. The liberating of data, whether it is enterprise data or government data, in the spirit of democracy and transparency is a powerful idea. In a similar way the user is at the center of any social networking website on the world wide web. This is the “design pattern” for a digital society. Usability Review of Mashup Tools 44
  48. 48. Appendix Additional Resources Mashups Patterns: Designs and Examples for the Modern Enterprise, Michael Orginz, Addison Wesley, 26 Mar 2009 Mashup Patterns for Business Presentation (IBM Mashup Tools) Mashup Patterns for Business on Vimeo Designing for the Social Web, Joshua Porter, New Riders, 2008 Designing Web Interfaces, O’Reilly, Bill Scott & Theresa Neil, 2009 Usability Review of Mashup Tools 45
  49. 49. References 1 Deloitte Research, 2008 2 3 Innovate08: The winning entries,, Karen Day 4 Weaving the Web, Tim Berners-Lee, 1999 5 What Is Web 2.0,, Tim O’Reilly, Sept 30, 2005 6 The Trouble With Web 2.0,, Alexander Wilms, Feb 2008 7 The Trouble With Web 2.0,, Alexander Wilms, Feb 2008 8 The Trouble With Web 2.0,, Alexander Wilms, Feb 2008 9 OpenID simplifying your online experience, 10 The next Web of Open, Linked Data: Tim Berners-Lee on,, (Recorded Feb 2009), 13 March 2009 11 Local Gov Online Blog Mashup 12 13 Intel Mash Maker, 14 Tom Watson MP, Blog, March 10, 2009 15 "Introducing Information Architecture at The Guardian" Martin Belam,, April 21, 2009 16 Free the Facts, Alan Rusbridger, March 10, 2009 17 Designing for the Social Web, Joshua Porter, New Riders, 2008, page 5 18 Designing for the Social Web, Joshua Porter, New Riders, 2008, page 128 19 Designing for the Social Web, Joshua Porter, New Riders, 2008, page 181 20 Designing Web Interfaces, O’Reilly, Bill Scott & Theresa Neil, 2009, page 295 21 Designing Web Interfaces, O’Reilly, Bill Scott & Theresa Neil, 2009, page 296 22 Ten Usability Heuristics, Jakob Nielson, Usability Review of Mashup Tools 46