Human Interface Guidelines

Introduction

Commotion is an open-source communication tool that uses wireless devices to create decentralized mesh networks. It is currently being developed by multiple organizations around the globe, including the Open Technology Institute, The Work Department, The Guardian Project, and The Serval Project.

These Human Interface Guidelines are intended to unite developers and designers in creating a consistent and accessible user experience across Commotion tools. People working on Commotion software should adhere to these guidelines and make suggestions for improving them as needed. We want Commotion to be accessible to a broad population of users around the world, and a coordinated design approach can facilitate widespread adoption.

The visual styles that you see throughout these guidelines are rooted in the Commotion Brand Identity, which was created in 2012 in collaboration with early Commotion developers. The Commotion brand is easy to use, versatile, and humanistic to complement the useful technology behind it that will ultimately help people connect with one another. It’s important to stick to the core principles -- but there’s also space to adapt the identity to various platforms and applications in a creative way.

Thanks for being a part of the Commotion project. Together, we’ll build software tools that offer an outstanding user interface, are credible, easy-to-use, and flexible enough to evolve around the world but maintain a core set of functions and standards.

Screenshots for Android 4.0 are used throughout this guide.


Platforms

While Commotion began its life as a package for the OpenWRT router platform, it has grown into a multi-platform project. Its core technology, the OLSR routing daemon, can be compiled and run on many different devices. Commotion serves as a management and configuration layer atop OLSR, providing a reliable and flexible platform for people to set up small-to-medium sized wireless mesh networks.

Because of the project’s history and the nature of the platform, the OpenWRT router interface will tend to have the most robust set of features and serve as a benchmark for other platforms and their interfaces. The Commotion interface extends the default OpenWRT configuration system using LuCI.

To best understand the Commotion OpenWRT user experience, consider how an average small community wireless network would be set up.

Now, consider how this user experience might be different for someone joining an existing network with a mobile phone in order to access a service somewhere on the local network.

(See Developing a use case for tips on brainstorming user scenarios.)

These different user experiences will, of course, require slightly different interfaces. The neighbor setting up four routers on rooftops will require different tools than a visiting friend who wants to log into the network and access a community file server, but both of these users should experience some shared elements. Both of these users will encounter the Commotion product name, and both will learn a few key terms. In the case of the neighbor who is setting up the network, much of this learning will happen while they read through documentation or use the OpenWRT configuration interface. They will spend quite a bit of time entering settings and becoming familiar with user interface look and feel.

In the case of a visitor signing on to the network, they might only come into contact with the Commotion software for a brief moment when they connect to an access point (named “commotion-something”) and click through a captive portal splash page with a Commotion logo and some descriptive information. These are very different uses of Commotion, but both situations should leave the user with a positive impression and some basic knowledge about the project: the name, the logo, and ways to find out more information and get help.


User interface mockups

As part of the Commotion development process, UI mockups were created by designers at The Work Department to inspire the software's design. You can see those initial ideas on Flickr. The early ideas were shared with the Commotion community to solicit feedback. The UI examples throughout these guidelines have since been refined and approved by the core Commotion team.


Building successful software

Users expect long-term reliability, speed, and ease of use when using wireless devices. The Commotion user interface should:

  1. Walk a user through the setup process.

  2. Work well across platforms, browsers, and devices.

  3. Be as fast as using a non-mesh WiFi access point.

  4. Help users understand mesh network security.

  5. Allow for easy monitoring of network status in terms that users can understand.

  6. Offer troubleshooting suggestions when a network does not work correctly.


Building a successful neighborhood network

Building a community, either online or offline, requires effective social and cultural organizing. Learning and trust play a key role in creating a neighborhood network that can benefit a wide array of individuals. Commotion software should facilitate positive human interactions that build a social network while building a mesh network.

If a Commotion application allows the user to build or maintain a network, it should reference relevant Commotion documentation regarding neighborhood network building and organizing. You might include some of this content inline in the software and some as links to online sources.