[Commotion-dev] complete Android GUI mockups

Wed Jun 20 17:13:35 UTC 2012

Thanks so much for sharing your UI mockups. They were very useful in giving us some more perspective and ideas for the HIG, which we are writing now. I've included some draft sections of the HIG below - feel free to use this in your development or send me back your comments on things you feel strongly about.

Also, please read this when you get a chance to see some of our ideas: https://blog.commotionwireless.net/blog/2012/05/user-interface-prototype-what-commotion-software-could-look

Here's a compilation of our thoughts on the design you proposed. Some of it may be redundant with conversations with OTI.

It would be best to use the common language proposed below.
It would be best to use the Commotion colors, typeface, and other brand assets. You can find the complete usage guidelines at https://blog.commotionwireless.net/files/Commotion%20Brand.pdf and the individual files at nina.inst7.thermitic.net/commotion_assets061912.zip
We like the status bar icon idea, which we hadn't thoroughly considered before. We do think that the icon should be a signal strength bar instead of color-coded. Users are far more familiar with strength bars on their cell phones and computers. We will draft an icon that could be used here.
It's unclear to us why profiles are necessary and seem to complicate the process. From our understanding, the basic user will only need to occasionally set their network name and channel. Are there reasons why a basic user would need to save more than that? We're unsure of the rationale. 
We think that the network status page should be displayed differently: simply using text for this phase of the project. In future iterations, it would be great to see visualizations. We're concerned that the hexagon layout cannot accurately represent the real world (arrangement of nodes in space) and can be confusing due to fundamental geometric restraints. In the HIG, we're going to propose a simple status page and mention that developers could use some sort of network visualization tool in the advanced area.
We're also thinking of including the log in the native menu in Android or in the green footer on all other applications.
We like the notification concept!

Let us know if you have feedback on anything here.

All the best,

Michael

------------------

DRAFT HUMAN INTERFACE GUIDELINES (excerpts)

Common language

A successful UI running on multiple devices must share appropriate, accessible and common language. The following list of terms should be used throughout Commotion apps. Some of them include descriptions that can be included in optional tooltips for the user who needs more information.

Project Terms

Short description: Commotion is an open, yet secure, circumvention tool to create decentralized mesh networks. More at www.commotionwireless.net.
Additional information for “about” pages: The project is collaboratively developed by The Open Technology Initiative, The Work Department, The Guardian Project, The Serval Project, and volunteers.

Terms for a Basic User

Many terms below reference a definition. A term’s definition should be included in the UI either inline or as a pop-up tooltip in order to help beginning users understand basic concepts.

Mesh Network Name (or SSID)
(Inline definition: Unique name that is 5-12 characters. You can use numbers, letters & special characters. Must be the same among multiple nodes.)
(Pop-up tooltip: The name of the wireless network between mesh nodes. Each node on the mesh network must have the same name.)
Node Name (Inline definition: Unique name that is 5-12 characters. You can use numbers, letters & special characters.)
Channel (Inline definition: Every node on the network must have the same channel.)
Join a mesh network
Create a mesh network
Looking for networks...
Joining...
Node 
(An individual part of a mesh network.)
Client
(A WiFi device outside the mesh network that temporarily connects to it.)
Advanced User
About
Help

Key Processes

Setting up and maintaining a network

The flowchart here below describes the steps that a user should go through in order to create or join a mesh network. The process begins with a simple splash screen that includes the Commotion logo and is followed by automatic network detection.

Creating or joining a network should be a fast task that a user learns quickly and can also teach others. Once a device is connected to a mesh network, a user may close the app or the page and come back later if they want to leave the network or change settings.

Flowchart at https://www.lucidchart.com/documents/view?#4fa8-4758-4fd78800-9087-17c90a5705ae?branch=22cccd6e-2c2f-4147-872b-9b8c7e346444

- - - -
Michael Gregor
Digital Strategy Consultant
313.437.1244 (office)
theworkdept.com

This email message and any attached files are confidential and are intended solely for the use of the addressee(s) named above. If you are not the intended recipient, any review, use, dissemination, forwarding, printing, copying, or other distribution of this email message and any attached files is strictly prohibited.

On jun 20, 2012, at 8:00 a.m., commotion-dev-request at lists.chambana.net wrote:

> ----------------------------------------------------------------------
> 
> Message: 1
> Date: Tue, 19 Jun 2012 21:18:34 -0400
> From: Hans-Christoph Steiner <hans at guardianproject.info>
> To: Commotion Development List <commotion-dev at lists.chambana.net>
> Subject: [Commotion-dev] complete Android GUI mockups
> Message-ID:
> 	<8DD09F00-0EEB-4782-9E20-1AFFCC7B5D02 at guardianproject.info>
> Content-Type: text/plain; charset=us-ascii
> 
> 
> I posted Harlo's complete GUI mockups to the redmine, please check it out and let us know what you think:
> 
> https://code.commotionwireless.net/issues/162
> 
> .hc
> 
> 
> ------------------------------

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.chambana.net/pipermail/commotion-dev/attachments/20120620/a348ee75/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 495 bytes
Desc: Message signed with OpenPGP using GPGMail
URL: <http://lists.chambana.net/pipermail/commotion-dev/attachments/20120620/a348ee75/attachment-0001.sig>