Archive | Better Software 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!

Mobile webapp for Ushahidi

16 Dec

As a (web) project and program manager working in the humanitarian and for development, I’ve been always fascinated by the amount of challenges that any tool aimed to the fields presents; just to cite a few: reliability, low bandwidth, cross-platform, offline support, extreme simplicity, and of course it should work-when-everything-else-fails(TM). I will not mention that, as a plus, in many cases budgets and funding are limited, if not extremely limited, compared to complexity.

I guess this is the reason that pushes those who works in this domain to keep being extremely pragmatic, ingenious and sometime very innovative.

In Reflab we have lately labelled this whole lot of design challenges as building resilient tools (resilience being THE buzzword nowadays, I guess it is a good choice to promote the idea).

In such context of resilient applications, limited connectivity is one of the main issues I’ve been personally working on in the last years, first developing OOPS, i.e. offline and portable web-based information publishing (or offline websites, if you prefer) and later working on Data Collection.

The idea for a not-so random Hack of Kindness

some nice folks hacking HTML5 for Ushahidi at RHoK

Just before ICCM 2011 I though we could apply what we had learned so far in data collection and mobile web applications to a project that we really appreciate a lot and which, hopefully, would immediately benefit: Ushahidi.

Ushahidi is an amazing tool in terms of impact in crisis management, works well via web and also has mobile applications for several platforms. A mobile web application, with offline support, would make it address some extra use cases: offline data collection, of course, but it would also make it a lot more easy to distribute, update and, last but not least, as Erik (@whiteafrican) immediately pointed me out, if would be great if it could support Custom Forms.

So, together with some friends and colleagues we when forward spending a few evenings, and then a whole RHoK weekend to develop the Ushahidi mobile webapp.

The hack

What we did: using the Ushahidi APIs, HTML5 and some Javascript libraries we could quickly build a very first version of the application, then a second one by the end of the weekend.

The app uses different HTML5 features:

  • application cache for offline use of static resources (html, css, javascript)
  • storages (Web SQL) for report data saved locally on the browser
  • geolocation API to obtain latitude and longitude from the device GPS
  • FormData to post the image
  • online/offline events

The UI interface is based on jQueryMobile, server-side there is a very lightweight back-end written in Python, that can simply be replaced by other frameworks or directly integrated in Ushahidi core.

What does the application provides: at the moment is only manages reports, collecting data online and offline, saving it locally and sending it when some connectivity is available. It features all basic fields, included GPS coordinates and image/photo upload (on platform supporting it), but not the custom forms.

Not bad to have something running, plus some documentation; and the same code could be used for other mapping or assessment tools!

Credits go to Riccardo Lemmi (guru and lead), Francesco Occhipinti (Javascript wrestler), Francesco Merlo (Python/API uber-developer) and Antonio Tirabasso (wise UI engineer).

What’s next?

In the pipeline we have: to put everything on Github, work on the UI (no work has been really done, yet), and do a real-world simulation/testing.

I really hope the app will prove useful to Ushahidi users: with the feedback collected we could then consider extra features, better interfaces and move forward looking at the custom forms.

Thanks to Heather Leson (Ushahidi Director Community of Engagement) we are now looking to other related challenges and will connect with more people willing to join online-offline and connectivity-related developments!

 
References:
The Next steps for Ushahidi Hacks
Online offline web applications
OOPSHTML5 rocks

Playing for a better world

1 Mar

Foreword: a few things worth a lot of attention

This post is about an idea that came some time ago and that I’d like to share; before  getting to the point there are a few concepts I’d like to introduce. I’m writing this post mostly for myself and my friends, but I hope if it can inspire people to dig into the concepts I bring here, if they are new to them, and enjoy the very early stage of a crazy idea (yes, yes, another one).

Videogames matter! (confession of a videogames addict)

one of my pg in wowI’ve grown up with video-games since they exists. I’ve been playing a lot,  too much. Beside the fun, I’ve always tried to study them, evaluate, analyse and enjoyed a lot of discussions about them with a couple of friends, passionate as I am. World of Warcraft has been my second life for several years now, an unbelivable source for learning and the ultimate time-sink.  Videogames are, at the same time, bliss and a curse.

No matter if you are a videogame addic, if you never understood them or if  you and never played or hate them: videogames is not something that can be ignored. (I suggest reading the book Fun Inc.: Why games are the 21st Century’s most serious business by Tom Chatfield, for an introduction to the role of videogames in our present and future).

More than fun

Then something I would have never imagined started to make his way into these discussions with friends and colleagues: gaming can be used with different purposes than “fun”! About two years ago we started imagining several possibilities to engage people in real world  using “games” and game techniques. The original idea came from looking at the emerging social gaming, especially on Facebook, and analysing some of the best in leveraging the network of friends, creating a new wave of time-sinks and ultimately a lot of fun and some little good.

Since then we discovered Games for Change: a multitute of innovative and often very experimental games aimed to change the world for the better: in education, training, democracy, politics, climate change, etc. etc. We have been inspired by Jane’s talks and articles, and we’ve been studing and working to be able to bring this passion into our professional future.

Good changes can be brough to the world leveraging the little gamer that is inside each one of us… with a Purpose.

Gaming as an interface

The last important concept I need to introduce is that games can teach us a lot on how to design powerful engaging applications and tools. Learning from psycology, motivational design or BJ Foggs work on behavioural changes, the message seems always to be that what some game developers is very relevant and meaningful for application design.

The phenomenon is hyped as gamification: “Gamification is the use of game play mechanics for non-game applications, particularly consumer-oriented web and mobile sites, in order to encourage people to adopt the applications. It also strives to encourage users to engage in desired behaviors in connection with the applications” from Wikipedia.

In other words Gamification is the concept that basic elements that make games fun and engaging can be applied to things that typically aren’t considered a game, to bring real-life changes and behaviours (see also The Gamification Encyclopedia): nice examples are Foursquare, Wii Fit, Jinx and …

But, as some of my friends, working in psycology put it: gamification focuses on using gaming as an interface. The approach is definitively much more than only badges, points and achivements. All literature on the topic dates 2010 or 2011, the very term “gamification” is too recent (and ugly) to describe the concept and the approach new and not mature at all; there is too much hype about it and a lot of promeses about it that will not be fullfilled.

I’m not sure what will be the true role and evolutions of the concept but I’m firmly convinced that yes, “gaming” can be used as a paradigm to design new powerful applications. In paricular observing the latest developments in MMORPGs, gaming platforms, and “social gaming” (Zynga, etc.) there is a LOT to learn.

This very week at the Game Developers Conference in San Francisco gamification enthusiasts and traditional videogame designers are meeting and joyfully fighting (The Great Gamification Debate!).

“Better World” project

So here is the idea, crazy and worth pursuing: build an environment to match resources (time, ideas, money, skills, etc) needed by NGOs and resources availables in the world (from all people) in a huge games-like experience aimed to changing the world.

The idea came while working on Miomood (a startup on mood tracking&sharing): to build an application, a Facebook application or Facebook “extention” that would help engage users in quests, missions, “call to arms” and battles… in the real world. The application would make it easy for NGOs to develop it’s social mission (whatever it is) using the Social Network.

The pain it addresses: activism, social engagement, volunteering, lobbying, etc. are quite painful, hard and complex activities for most of the people: the result is that there are millions of “sleeping activists”, marginally-engaged people, lost volunteers-to-be. Becase these issues are complex, the contest is complex, true engagement expensive and time consuming.
The good news is that social engagement seems to be very important in the “personal network” of a person, as it relates to “shared values”, moreover, a lot is about “education” and “information” and gaming is excellent at both training and forming.

io senza frontiere scheenshot

Game-like Facebook application by MSF Italia

The opportunity it delivers: move huge amounts of spare-time, game-time (& cognitive surplus) into changing the world for real.
NGOs  would “create” the content in a guided, simple, clear format: the same way they manage a Facebook page they would be able to add a “Quest” or a “Mission” or an “Action”. Title, difficulty, location, requirements, goals… storyline. NGOs would need to well design their contents, their messages and stories, but will not have to develop any mechanic, user interface or web platform.

A world-changer, the user, the player would join the “call”. The identity of the “world-changer” would be his/her real identity, enriched and customized with special skills and abilities, experience, place visited, language spoken, etc. The world-changer answering the call would need the help of his/her friends very often to complete the Quest, the Mission or the action. She/he would along the way socialize with others, maybe even people of distant countries. Along the way discover new and more complex ways of interacting. And be rewarded.

Here is an overview of the main motivational drivers that should be considered the design:

1) Achievement

  • Advancement (points, badges, medals, titles, stats, experience, talents, …) example: “green points”
  • Mechanics (how to spend points, talents, get rewards, …)
  • Competition (there can be good competition too, even in social engagement) example: “world-travelling ladders”

2) Social

  • Socializing (within the personal network and beyond) example: exchanging messages with the volunteers in Haiti.
  • Relationship (everywhere is the design!)
  • Teamwork (everywhere is the design!)

3) Immertion

  • Discovery (new people, new problems, new landscapes, both local or very distant)
  • Role-Playing (world-changer would be taken into being THE BEST possible themselves, right?)
  • Customization (background, avatar, objects carried, t-shirts weared, photo uploaded, …)
  • Escapism (very different from a MMORPG, not sure how it fits, right now)

I’m sure someone have more than enough imagination to “see” how such a project could look like.

It is worth noting that Facebook is already evolving to support some of these needs, expanding our “online self”. Moreover such platform is not only about game mechanics, badges or points, but an evolving system to allow the design of rewarding and joyful experiences when acting in changing the world!

Key design challenges: simplicity, cleanness, avoid transforming serious things in a game (but “play” for real changes!), avoid retoric, avoid frustration when approaching real-world problems as complex as hunger, poverty, etc. and reach the MAXIMUM number of people (get the “marginal” engagement of millions).
A lesson we have all to learn again from WOW: it has brought to a MMORPG millions of people that where not even gamers before! Now popular games such Zynga products and loads of online and social games are expanding this territory. I feel it is the right time to expand into more massive “serious” gaming.

Follow

Get every new post delivered to your Inbox.

Join 1,130 other followers