[Commotion-dev] complete Android GUI mockups

Sun Aug 5 02:20:17 UTC 2012

I'm a fan of the mesh diagram in the icon, do you think you could make a thick-lined version for these tiny icons?  I think they could read similarly to the thin-lined big versions.

As for the on/off button, this new icon looks more like a button and seems to me well suited to represent the "off" state.  Do you think you could make an "on" version with the mesh lines or something like that?

.hc

On Aug 3, 2012, at 11:06 PM, Nina Bianchi wrote:

> Thanks for testing these icons in context... based on this feedback, we could explore an even further simplified version. Sample attached.
> 
> -Nina
> 
> 
> <commotion_adaptation.png>
> On Aug 3, 2012, at 2:22 PM, Hans-Christoph Steiner wrote:
> 
>> 
>> Now that I've applied some of these graphics to the Android app, here's
>> some quick feedback:
>> 
>> - the lines in the icon are much too thin to be visible when used
>> without a background.  App and Nofitication icons in Android are 24x24,
>> 36x36, 48x48 and 96x96 at the supported resolutions
>> 
>> - the icons don't really work on the default button backgrounds.  these
>> backgrounds can vary a fair amount depending on which Android version
>> 
>> - the icons alone don't look like a button
>> 
>> .hc
>> 
>> On 06/20/2012 01:13 PM, Michael Gregor wrote:
>>> 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
>>>> 
>>>> 
>>>> ------------------------------
>>> 
>>> 
>>> 
>>> 
>>> _______________________________________________
>>> Commotion-dev mailing list
>>> Commotion-dev at lists.chambana.net
>>> http://lists.chambana.net/mailman/listinfo/commotion-dev
>>> 
>> _______________________________________________
>> Commotion-dev mailing list
>> Commotion-dev at lists.chambana.net
>> http://lists.chambana.net/mailman/listinfo/commotion-dev
> 
> _______________________________________________
> Commotion-dev mailing list
> Commotion-dev at lists.chambana.net
> http://lists.chambana.net/mailman/listinfo/commotion-dev