Differences between revisions 10 and 11
Revision 10 as of 2011-10-23 05:23:47
Size: 9117
Editor: ?NickDaly
Comment: Added another UI design.
Revision 11 as of 2011-10-24 23:40:48
Size: 9352
Editor: ?NickDaly
Comment: Noted that push and pull notifications are combined.
Deletions are marked like this. Additions are marked like this.
Line 93: Line 93:

This mockup combines push and pull style notifications. This implies a private,
authenticated storage system (for pull notifications): your FBX will store
notifications for your recipient until they poll your server for updates.

User Interface

Main features

The user interface will play a big role in user's first impressions. It must be simple, lightweight and extensible.

  • simple : anyone should be able to use the interface intuitively
  • lightweight : embedded devices have limited resources, these should not be tied up on the interface.
  • extensible : the interface will be the user's window into their freedombox, and functionality will grow with time.

There might need to have two separate interfaces :

  • One will be dedicated to the freedombox administration itself.
  • The other would be dedicated to people using the FreedomBox. Using this interface, they should be able to manage their different online identities.

Administrative interface

This interface should be the one used to administrate the FreedomBox. It should help people in easily add, remove and configure services on this box, as well as user accounts. It might be divided in different panels :

  • Freedombox status, which would sum up informations on the running system (number of services, their states, accounts, etc...)
  • Services panel, where owner(s) can add/remove/configure services
  • Account/member panel, where owner(s) can manage user accounts.
  • Backup panel? (or is it part of the services?)
  • ?

User interface

This interface will be dedicated for users (being owner of the box or just users) to manage their online identities. They should be presented with a list of their current identities, and a way to configure them. A button should let them create new identities.

With this interface, users should be able to select which services this identity will use, being one on the same FreedomBox they created the identity, or elsewhere.

There might be some overlapping with the administrative interface at some point, for example if users want to register a subdomain in a DDNS system. Should this be a request to the FreedomBox owner(s), or should users be able to manage this on their own, maybe depending of the owners did give them the right to do so?

Other projects

Some projects already exists to configure a system using a web browser.

LuCI

LuCI is a free, clean, extensible and easily maintainable web user interface for embedded devices.

While most similar configuration interfaces make heavy use of the Shell-scripting language LuCI uses the Lua programming language and splits up the interface into logical parts like models and views, uses object-oriented libraries and templating. That ensures a higher performance, smaller installation size, faster runtimes and what is even more important: better maintainability.

ExtJS

It is an application framework released under GPLv3.

FB related features :

Ideas

3 vertical panels

3 vertical panels, read from left to right then from top to bottom.

More conventional

Widgets and searchbar, horizontalb tabs, vertical panel

Top Tabs, Vertical Control Panel

Categories of activities across the top, with individual activities across the left. I'm imagining this as a web-app accessible by logging into the FreedomBox from some as-of-yet-unimagined login page.

In this mockup, a few conventions are used: "X" means "remove this", while a small blank box is a text-field or text-box (depending on size).

This mockup combines push and pull style notifications. This implies a private, authenticated storage system (for pull notifications): your FBX will store notifications for your recipient until they poll your server for updates.

Interaction Screen

Interaction: View and reply to others' posts. Sort them by time, popularity, and frequency of interaction with poster. This is a combination of both pull notifications (reading a blog's RSS feed for updates) and push notifications (email, XMPP).

When viewing, you can show or hide any combination of groups and people within groups.

When replying, you can select groups that can see the post.

Creating a New Post Screen

Composing a New Post: Creating a new post.

A rich-edit box allows users to add the combination of all supported posting methods. For example, if you have a service that supports pictures in the body of the post, you'd have the option to embed a photo. If you only had plain-text support, you wouldn't have HTML formatting available.

Addressing a New Post Screen

A New Post's Recipients: You select recipients on the "With" tab. You can select any number of groups and any combination of people within groups, or even just make it public.

If some recipients can't receive all the features you've put in your post (can't receive images via tweet, for example), you receive a warning. The user can then either remove the images or add other communication methods to the person.

When you're done, post it with the "Post" button. If you've decided to make the post "public", you'll be able to select the distribution methods here. It could include your Blog, etc.

Managing Groups Screen

Groups: Add and remove people from groups. If no group is selected, create a new group.

Managing People Screen

People: Perhaps the most important image of all, how the system sees a person. Very reminiscent of Emacs' BBDB, you can pull self-published contact data from the user, which contains their publically available authentication and communication contact information, sorted in preference of use.

The list beneath the name contains:

  • Preferentially ordered authentication methods.
  • Preferentially ordered communication methods.

When posting to a person, your FBX will use the recipient's preferred order to post the data to that person. If your FBX has both email and micro-blogging support and the recipient prefers micro-blogging to email, and your post is 140 characters or less, then the post would be delivered via private tweet.

About Me Screen

See the About screen for more details.

About Me: This is where a user customizes his/her authentication methods and communication preferences. The list of communication preferences is sortable and editable: the order can be changed and available communication methods can be added, removed, or hidden from the public at any time.

"Hidden from the public" should set off a few alarm bells: anybody knowing your key ID can look you up and subscribe to your public posting methods. They won't be able to see anything you post to those methods unless you make the post public, but they'll know the point of communication is there anyway.

About Screen

About: The About page where the FBX project is described and options are hidden.

Users can select from multiple configured personae, though only one's ever active at a time. They can also end their session by logging out.

The hardware option describes the hardware the system's currently running on, and lists other hardware successfully tested with the FBX that the user might be interested in using, as well as giving relative benchmarks.

The software option describes the currently used software on the system and options / instructions for hacking that software.

The "Important System Messages" should appear at the bottom of every page. They should be used when the system is running out of disk space, loses its Internet connection, etc.

Template Screen

Template: A template to be used in designing additional screens.


CategoryFreedomBox