Archive | Tools RSS feed for this section

Designing for limited connectivity

6 Apr

This is long-due post on designing web tools for  “limited connectivity” contexts, a challenge I’ve addressed in several projects at Reflab, and that can better described as a “compilation” of requirements and constraints.

My goal here is to draw attention to the topic and summarize what it means to access a web tool from the “fields”: emergency situation, remote or just under-served areas of the world, where humanitarian relief takes place. There is nothing really new, but it is worth having very clear when developing products that require an Internet connection, either  for PCs or mobile devices (and there are many, you know…).

I’d rather not talk (and rant) about how data could be managed and information organized, I want just to make an overview of the technical challenges and solutions to making better web tools.

Limited connectivity

Connectivity is just a promise still for many on our planet: in large urban settings, and places like the north of Europe it is even difficult to imagine but in a crisis, in an emergency, in rural contexts, in remote areas of developing countries the best you can get is: limited connectivity.

TelecomMap maps 3G Networks, Network Quality and Wi-Fi hotspots in Indian cities (powered by Ushahidi)

Imagine you’re on a train (in Italy, this time, and if you are not familiar with Italian trains, good for you): you need to access a website or use an online application, they promised you 3G or better, but in fact you get a lot less. You pick up your mobile, type the web address and your spinner spins, but nothing appear on your browser, finally you get some elements of the page but, no luck, a series of tunnels starts. Patiently you wait, retrying from time to time, your page loads then stops, then reload, Finally the train is now past the tunnels in the nice countryside: you try again, the page loads… slowly, and finally you have it. You click on the link you were looking for, it works! Now back to the previous page and oops! connection is gone again.

As Imna Gonzales (Organizations and Systems Responsible at MSF Spain), puts it:

“Vendors design their products from a very well connected office in some large US/European city, and their regularly fail to understand how much things can be different in the areas we operate”.

This is limited connectivity: you have some bandwidth, you have bad to awful latency (don’t even think playing online games), and connection goes up and down more or less frequently and, in many places, you do not have any connection at all. Depending on location and time you get a mix of all of the above (in office good connectivity, in cybercafé some connectivity, here a 3G, here SMS only, here nothing!). Unstable. Note also that I’m simplifying a lot by focusing only on web and mobile (smartphones) and assuming the (limited) connectivity is relatively cheap).

Now imagine that the software you are building has to be used in those conditions by people with a very limited time, in a hurry, in an emergency, people how are working to save lives. If you build and maintain a product that has to operate in those conditions here are a few things you should always consider in the design, monitor and continue to improve:

Hints for designers and developers

Here are a few hints, starting points in fact, for designers and developers; good results can be achieved by just setting the bar higher on some common requirement: for example a slower than average site is less likely to be used, but in these contexts it will not be *possible* to use it. And keep monitoring, and keep caring.

Page weight

A classic. The first thing you hear about and usually followed by the request to have a huge banner, logo or video in the homepage. Lighter pages require great UI design, clean code and optimizations, and those don’t just come fore free, unfortunately.
A recent article on The Guardian by John Naughton, “Graphic designers are ruining the web” shows the awful trend of webpage obesity.
It is quite interesting to see how much data (before cache) we are downloading every time we open a web page: the home page of the CNN today have 948.22KB transferred, YouTube home page 1.4Mb, etc.

Speed and performances

Just after page weight, and event more important, comes the speed and performances. While having well responding, fast systems is a general principle for usable software in the case of limited connectivity they can really make the difference. There are two sides of it:

Server side

Speed and performances are far too complex to discuss here, let’s just note that worst-than-average performances will sum up with page weight and client side performances to make it really impossible for some people to use the system in limited connectivity conditions.

Client side

Most will focus their attention to the server, but it’s important to keep in mind that users might be browsing from old browsers and old hardware. I’ve never been a big supporter of old-browsers compatibility (especially IE), but a good product will try to avoid long rendering time and heavy Javascript.

Cache

A good old way of speeding up things is caching: server cache, browser cache and “supercache” (see HTML5 Application Cache). Even for small projects a good use of the browser cache, maybe even of the new application cache can bring very significant improvements reducing transferred data from hundreds of Kb to a less than  a hundred Bytes. Server caching is not always good for every project, in my experience and, as my friend Federico (system administrator) keeps reminding me:

“There are only two hard things in Computer Science: cache invalidation and naming things” - Tim Bray

Asynchronous calls

Particular handy to manage long list of documents and the huge banner in homepage, it is a very useful technique the UI designer should keep it mind: user will be able to immediately access new pieces of information or features, only downloading the necessary Bytes. For a simple example see the logcluster.org preview of documents.

Binary files management

Ok, this is getting even more technical, let me just mention file compression and a good management of the synchronization, if any.

Offline

If you know what I’ve been working on in the past months you know I have to talk about offline web: the most complete support to limited connectivity would include it, but note that having offline support does not mean all of the above can be skipped! Offline support means the site/application can work online and offline, if needed it updates (sync), and updating is “sensible” i.e. just update things that have changed, use compression for files, etc. See my post on HTML5 offline support.
Two examples: the Ushahidi mobile web application and OOPS (Online Offline Publication System). The year looks promising, the standards are being finalized, will browsers follow?

Final considerations

Products made to be used in emergencies, crisis, humanitarian operations, remote, unserved areas, etc. require a lot more than just tackling limited connectivity, of course, and several of the points above are true for every good software product in general. Important improvements can be also made by designing different information flows, data formats, interfaces, etc. The main point? whatever is your product, please care about limited connectivity and keep evaluating, monitoring and improving!

New energies to help in humanitarian crisis

30 Jun

CrisisCamp, Paris

A room at the CrisisCamp, Elena Rapisardi presenting

A case study presentation (by Elena) at the Summit of CrisisCamps Europe, Paris

It was in Paris at the 2011 Summit of European CrisisCamps, that I felt, understood, the true power of  the Crisis Campers fast growing community: no tweet, blog post, article, or paper can replace the experience of being in person within that small crowd of extremely motivated, capable and genuinely devout people! (and yet I’m blogging in the hope that some reader will be inspired).

Crisis Camps are a special breed of barcamps, born to connect a global network of volunteers who use creative problem solving and open technologies to help people and communities in times and places of crisis. 

Senior information managers, developers, bloggers and journalists, project managers, designers from big NGOs to small non-profits, volunteers or professionals, very young and less young, the very diversity of the people gathered there was so powerful to me.

We spoke a lot about technology, sure, but the common ground for all people there is not to invent radically new tech (maybe sometimes) but how to use, mix and shake existing tools, to solve immediate problems.

This changes everything!

At a CrisisCamp you might find yourself developing an application to help refugees find their relatives, designing a system that processes Tweets to provide assistance after an earthquake, brainstorming around a mobile application, open data, transparency and security, and discussing a hundred new ways to volunteer and help, and build a more resilient world.

Among all wild ideas and new technologies, there is one central aspect that needs all of our attention:

people, the very people affected by a crisis are getting connected!

Not all of them, no, not everywhere, not all the time, but they are there. They might not have a pc, but they might access Twitter, and be on Facebook, and this changes everything!

Tools liberating new energies

people in Haiti working on the OpenStreetMap project

New energies in the fields (Haiti, OpenStreetMap) - (C) Kate Chapman

The opening case study of the CrisisCamp is the story of #CIVSOCIAL (slides here), a beautiful, immensely human story, of how a group of friends and volunteers reacted to save lives in recent Cote D’Ivoire crisis, using ordinary technology (Twitter, Skype, etc.) and leveraging the energies of extraordinary people. Thanks to Jean-Patrick (@ jpehouman) for sharing his great story.

Have you ever heard of Ushahidi? Per se, it’s a great idea: with it you can crowdsource geotegged information, provide visualization and interactive mapping… quite powerful. But you should listen to the stories of Anahi (@anahi_ayala) and others that have been using it, to really grasp the revolution that happens behind: hundreds and hundreds of people collaborating worldwide to create accurate maps, to translate messages, requests for help, reports, to harvest information from the Internet aggregate and validate it, and more. The output is information, rapid, often good and very valuable information, to inform people, coordinate, and act, in crisis: for the Haiti earthquake, Chile earthquake, Pakistan floods, Egypt, Lybia, Sudan, …

Other major projects presented, discussed and worth our attention are: OpenStreetMap and Global Voices, and there are many many others, and all of them share the goal to build a little piece of a better world, a more prepared, transparent, resilient, open and human world.

People in humanitarian crisis are getting connected: connected one to each other, connected to people in other countries and willing to help, connected to the rest of the world, when listening. The names of the tools that connects us all are not new: Facebook, Twitter, Skype, WordPress, …

Tools liberating new energies, the energies of:

  • volunteers across the globe translating, validating reports, spreading the information and spreading awarness,
  • geeks, mappers, developers, hackers, creating new and better tools,
  • and most of all, the energies of the people there!

Few have yet acknowledged such a big change and big opportunity.

The new paradigm in Crisis Management

Social, partecipatory web is liberating new energies, energies that have already shown their impact, so where do the well established agencies, NGOs and institutions stand?

An important debate that took place in Paris: “Civil Society & institutions in Crisis Management : New Paradigm of the Participatory Web.”, a roundtable on the current understanding and acceptance of the new paradigm from the Institutions. The main outcome of the debate was that not only the Institutions but also most humanitarian agencies and  large NGOs have not yet seen, understood, nor accepted the change. And it was great to have people from UN OCHA and the International Committee of the Red Cross at the table, OCHA in particular has already done much and is leading the effort of collaborating with the volunteers communities defining the new challenges.

CrisisCamps collect the enthusiasm, the appeal, the dream of the many that have experienced the change: volunteers, humanitarian geeks and technoutopists, a movement born from the bottom, very young, and unexperienced. On the other side the institutions and international organizations that have been working in humanitarian crisis for decades, with their experience and knowledge (and rules and procedures) aimed to ensure quality, safe, transparent and effective action.

Conclusions

Participatory web, and notably the direct participation of the affected communites, will have a growing impact on the information, knowledge sharing, privacy and security, and action before, during and after a crisis.

As Anahi puts it:

“people have access to these tools and they will use them, anyway!”

and also:

“people are now in the information loop and can provide and will also benefit a lot from information.”

I urge all international organizations, NGOs and Institutions to look at, explore and embrace the new paradigm: the debate is open, while communities are growing and social web spreading more and more.

And only these organisations only can provide the experience, the training, the wisdom and the resources needed.  And I’m sure the “new energies” will listen, learn from them, and organize, develop new tools, practices and continue to innovate.

I really hope that in the next years international organizations will foster and help accelerate such change, fully understanding that the social web is an everyday tool to fulfill their very mission.

What’s next?

The Paris Summit of CrisisCamps has motivated me more than enough to move forward and start bringing such new powerful ideas and tools into my everyday work in Reflab, and engaging in the community: together with Elena Rapisardi (@erapisardi) and Marco Boscolo (ogdabaum) we have kickstarted an Italian group. Thanks to Header (@poplifegirl) and CrisisCommons for the support. Huge thanks to LaCantine for giving us a great location, wi-fi, food and everything we needed and to Claire (@ClaireInParis) for leading and guiding us all.

Related resources
crisismappers.net
crisiscommons.com
Disaster Relief 2.0 (report)
Volunteer Technology Communities (paper)

One particular reason HTML5 matters

21 Jan

I’ve always been a loyal fan of standards and openness, but there is one particular reason HTML5 matters  to me: it promises to be extremely valuable for the development of powerful ICT4Dev tools.

It is true in general that HTML5 is there to move forward the extent and widespread of web (someone would say “cloud”), but why such a technical thing as web standard is meaningful for software aimed to serve international development and human rights?

The Web have already begun to have a mayor impact on development and crisis response, I will not dare trying to discuss that in a blog post, but for those not familiar with these issues, here are three projects you absolutely have to look at:

Ushahidi – a platform that allows collecting incidents reports by everyone in an emergency or crisis, and mapping the reports visually on maps to allow quick analysis and faster response. It has been successfully used in very large scale emergencies including Haiti. (http://www.ushahidi.com)

Kiva – a website that “connects people, through lending”; a wonderful story on how the web can be used to develop microcredit, and at the same time connect people from different countries or conditions. With minimal investments in technology or marketing, Kiva has  facilitated so far more than 150 millions in loans (http://www.kiva.org).

Refugees United -a website and mobile application aimed to directly help refugees reconnect with missing loved ones. A rather simple idea, not easy to implement, but with the potential of having a mayor role in rebuilding refugees families worldwide (http://www.refunite.org)

Those are only some of the most visible initiatives and organizations that are bringing an incredible change in this world, not to speak of the impact that the “social web” is bringing to international development (and btw: I love Twitter).

Indeed the developing world has some extra needs in terms of technology: here is three elements that we should always consider. Reuse: the developing world benefits a lot from open source and technologies that can be freely reused. Mobile: mobile technology is key in the innovation in many countries. Connectivity: internet access, through a PC or mobile phone can be limited, in bandwidth, depending on the location, and variable in time.

Reminder: what is HTML5 about?

the html5 logo

HTML5 is the umbrella name  for the “Next Open Web Platform“. The HTML5 brand includes the new upcoming standard for HTML itself, but also CSS3, Web Storage, SVG1.1, Geolocation, Web Sockets, Web Workers and many more standards; the aim of these new standards altogether is to enhance the web language (HTML), integrate second generation languages (SVG, Video, etc.) and making the web a lot more “reactive” (more about HTML5: http://www.w3.org/html/)

HTML5 promises to allow simple development of rich web applications: dynamic forms, video embedding, geolocation, offline, and much more; even video games can be developed in HTML5.  Some of the most astounding HTML5 apps so far have been collected in the HTML5ADVENT  URE CALENDAR2010 (check it out, if you haven’t already!).

Why HTML5 matters for ICT4Dev?

While working with HTML5 and studying it, it became more and more evident to me how the characteristics of the new platform are very relevant for the context of the developing countries. The new standards:

Allow the development of new generation cross-platform applications

A new generation of applications can flourish and they can be cross-platform, thus running freely on the most different devices, independently from the manufacturer and on low-cost hardware. Adaptation and maintenance costs reduced.

Allow the development of mobile applications

While projects show how, in both rural areas and in emergency relief that texting/SMS can be very powerful (see FrontlineSMS for example), the battle for mobile applications started. On one side the native applications for iPhone, iPad, Android, RIM, etc. on the other side the efforts of W3C and others to bring web development to mobile devices (see Mobile Web For Social Development (MW4D) and Open Mobile Consortuim).  HTML5 has the most challenging role: the faster and better it develops on mobile browsers the highest the possibilities for developers to adopt it.

Allows reusing the incredible number of open source products, libraries and web frameworks

HTML5 could be used to enhance and reuse the incredible variety and abundance of good open source products and libraries; there is an incredible potential in the combination of web, open source, and mobile in ICT4Dev. Again, the most successful HTML5 and web-based development the more the possibilities of this ecosystem.

Allows to deal with the conditions of limited or unstable connectivity

person with mobile phone in Africa

Image (c) textually.org

The single feature of HTML5 I’m more enthusiastic about is the offine and storage or, as the W3C puts it: “HTML5 apps can start faster, and work even if there is no internet connection (thanks to the App Cache, Local Storage, Indexed DB, and the File APIs.)“. Offline and storage will allow the deployment a new breed of web applications, that simply could not exist, because of the need of an active internet connection. We can think of countless great web applications that would be improved to be used in places where connectivity is limited, bandwidth an issue and hardware resources scarce.  We can think also of collaborative tools can run also offline, on any device and without any installation, and repositories of knowledge that can be easily carried in a USB key or external hard-disk, or almost-real-time (TM) gathering of information from different devices, geotagged, and still working when connectivity is not stable.

And it’s an open standard!

That too counts: open and not controlled by any single organization means a lot more freedom of action, competition, and better allows the development of solutions outside the interests of big market players. HTML5 is a vital part of that trend for openness: open source, open standards, open data and open protocols, that is acclaimed by all and threatened by many, at the same time.

The project I’m working on

More than a year ago I started working on an apparently very complex project whose user requirements were: we need a tool that is easily managed by non technical staff, works online and offline, is cross-platform, optimized for different devices, including mobile, is lightweight in data storage and in data replication, and open source, or at lest no licence-based. So far so good… but it also should run from a USB key or other portable device and no installation should be required. Commenting and feedback would be a nice to have (I’m glad there was at least a nice-to-have ).

hey, wait, this is either impossible or insane!

After long mumbling and head-scratching it is my colleague Riccardo that came out with a possible solution based on a web application using some open source libraries already available! That would meet all the requirements above in the simplest possible way, but for the online-offline, not mobile support. HTML5 was not at all ready at that time, but we aimed to invest in a solution that would be viable in the long run, so we developed the first version using Gears (was Google Gears), with the idea of bringing the project on HTML5 later.

The project, which is called OOPS: Online Offline Publication System, is just getting its HTML5 upgrade, and will run without any installation on several platforms, including some mobile devices, online and offline. The OOPS is itself a collection of libraries put together and it is released as open source (http://code.google.com/p/online-offline-ps).

Next?

I feel as with OOPS we had only scratched the surface of the many possibilities that this new standards are giving us to develop better web applications aiming to address, by completely new means, very old, dramatic problems.

Follow

Get every new post delivered to your Inbox.

Join 1,133 other followers