Since the beginning of this Freedom Box series back in March, I’ve talked a lot about infrastructure and very little about what the interface is actually going to look like. I saved this portion for last because Interfaces can be very complicated and hard to get right but also because this is one of the easiest parts of the problem to solve, if we build it right.
All existing social network tools use interfaces built from the same collection of elements. It is well-worn territory and so we have a good list of what elements our interface will need. Even better for us, all of the existing interfaces are built using web tools (html and css) that allow users to choose their own arrangements for those elements. We don’t have to build the perfect interface, we just need to let users build their own.
Building Blocks of a F2F interface
Most of the functionality we expect from “Social network” tools is provided by a series of older communication bundled together. These older tools are still visible in the social network’s interface, as an Instant messenger-like contact list on one side, an email-like message window in the middle, or an RSS-like activity feed. I’ve highlighted a couple of the relevant sections from a twitter and facebook screenshot below.
For giant “social network” services like facebook, the design process is simple, just select the traditional communication elements you want to build your service around and arrange them on the page. Our job is slightly more complicated because we are building a system where individuals have much more control over their tools than in the case of centralized commercial services.
Some people are going to run email, IM, and photo sharing services and have an interface that looks a lot like Facebook or Google Buzz, Others might only want activity streams and an interface more like Twitter’s, with any number of combinations in between and some new kinds of services that we haven’t even thought of yet, let alone come up with interfaces for. Thankfully, html and css are well suited to this task.
For an example of what this might look like, check out the NatSkin style browser and play around with the options. All of the major elements of the page can be displayed or hidden, their position can be placed around the screen, and all of the decorative elements can be re-styled on the fly, and it is all done with css.
This is something we can build if we just keep in mind that we’re not design a single interface, or a single social network, we’re designing a flexible framework with some sensible defaults. Now, let’s see what we can make.
Posts in this series
Part 1 – The Idea: Freedom Box
Part 2 – Finding each other: Dynamic DNS Facebook
Part 3 – Talking amongst ourselves: Friend-to-Friend Network
Part 4 – Putting the pieces together: Freedom Box schematic
Part 5 – Making it easy: Look and Feel
