Add New Page: You are not allowed to add pages Select section/namespace. New page title.
 

LuCI OpenWRT Theme

This document follows the process of us developing an updated Commotion OpenWRT theme (in early 2013) that is compliant with the new Human Interface Guidelines (https://commotionwireless.net/docs/hig/introductionh1. Development References

Resources

Work Session 1

After flashing two nodes with fresh OpenWRT builds, we took screenshots of most parts of the interface. During this session, we walked through the live interface, annotated our printed screenshots, analyzed intersections with the Human Interface Guidelines, and began planning the forthcoming design work. The annotated screenshots are attached to this page.

What do users experience when plugging in a node for the first time?

Experienced users might know the device's IP and type it into their web browser.

Inexperienced or lazy users might open a browser and type in the URL they want to go to.

Mac OSX users will see the node splash page automatically when they connect to the network. (This is outside of any browser and the window cannot be resized.) If they click ACCEPT, they briefly see commotionwireless.net in their browser, but then it closes.

The current splash screen serves two potential purposes: informing an admin that they’re on a certain node that isn’t configured yet, and informing a random user that they’re on an unconfigured network that might not work.

Design needs that we identified:

  1. Style areas according to the 6 visual language types described in the HIG.
  2. Add tooltips as described in the HIG, if possible.
  3. Change language so that it is consistent with the language described in the HIG. Ensure that all terms used throughout the UI are consistent. Use tense and grammar that is modeled in the HIG.
  4. Create styles for:
    • heading 1
    • heading 2
    • heading 3
    • body
    • dictionary term
    • dictionary definition
    • tooltip
    • option select (dropdown)
    • radio button
    • check box
  5. Create icons for:
    • question mark > tooltip/definition
    • show/hide password
    • AP/MESH/PLUG/VPN
    • signal strength
  6. Clarify what the administrative password is used for.
  7. Clarify the splash page and connection process for average users and administrators. Make new buttons.
  8. Top navigation menu.

Work Session 2

We took screenshots of the interface on mobile, they're attached to this page.

We discussed the upcoming quick start interface with OTI. This is intended for novice users setting up an OpenWRT node. The theme will be built with the assets developed for the full Commotion OpenWRT interface.

We began developing mockups for the new interface and auditing the text within the existing interface. (Some are attached.) We started drafting updated text that complies with the HIG.

Work Session 3

We discussed next steps and walked through the mockups that our designers created earlier. We found some obvious parts in need of design (buttons, icons, alerts) and started on those. A few of our staff also began work on implementation. While Ben got a development environment configured (via VirtualBox), Libby prepared specifications for some mockup pages. When that pre-work was done, we dove into implementation.

Screenshots of our process are attached.

Work Session 4

We chose to use zepto.js for frontend purposes. Per zepto's recommendations, we'll load jquery for IE dynamically.

We began designing and implementing a responsive drop-down menu system. Lots of work is ahead in this area as we attempt to create a menu system that meets accessibility guidelines and works well on mobile devices.

Continued icon design. Continued creating design specs.

Work Session 5

We received feedback from OTI staff on interface mockups.

We completed an audit of all the icons used in the interface. The results are attached to this page.

We ran into a menu bug in Chrome 26 and a responsive bug in IE 8. We worked to troubleshoot and resolve these.

We modified some of the translation (.pot) files to update interface text so that it complies with the HIG. We began testing with the new .pot files.

We continued implementing new styles and experimenting with solutions for a mobile-responsive menu.

Work Session 6

Our mobile-responsive menu is now functional. See https://code.commotionwireless.net/attachments/download/233/screenshot21.jpg for an example.

The entire site is also responsive. The text and menus adapt to different browser window sizes.

We continued working on style implementation and tweaks. Our remaining design tasks include table styles and warning styles.

Work Session 7

After some research, we determined the best way to override existing help icons and implement a new tooltip system that appears underneath some fields.

Found a bug on firewall status page: active tab gets a black border in Chrome 26. Bug not present in Firefox.

Worked on table styling and status widgets.

We created a VirtualBox image of the draft interface as it stands right now, to begin sharing with OTI. That's available in https://code.commotionwireless.net/issues/398.

Work Session 8

We adjusted table colors and padding for easy use on <600px mobile screens.

We created mockups for warning messages and status messages. They are attached. We completed a few iterations of the status message style.

We worked on the footer styling and tested out some designs.

We found a frustrating LuCI bug: hitting ENTER from a LuCI form will SAVE but not SAVE & APPLY. This is a good default behavior, but in the case of changing the password it doesn't make sense.

Upcoming work: think through contextual error messages that show up in the context of whatever section a user is editing.

Work Session 9

We completed table header tweaks along with some mobile refinements.

We tested on two old Android handsets and in Windows IE.

Found an IE ⇐8 bug in /www/luci-static/resources/cbi.js and patched it.

Submitted bug ticket to luci.subsignal.org:

While testing my theme in older Internet Explorers, I came across a bug in cbi.js:

Line: 960
Error: Function.prototype.apply: argument is null or undefined

where line 960 looks like:

if (!1))

fun.apply() takes an array as its second argument. Some browsers don't freak out if it isn't an array, but some do. By wrapping the argument in brackets, this problem is avoided. A patch is attached.

Work Session 10

We updated fonts, buttons, and tabs after finding design bugs throughout the interface.

We completed tweaks to the theme based on mobile testing. They included adjusting padding, tables, and button size/positioning.

The new theme is available at https://github.com/bnchdrff/commotion-openwrt-theme

Testing

We tested the new theme on:

Android 1.6 (mobile phone) Android 2.2 (mobile phone) Android 2.3 (mobile phone) Android 4.1 (mobile phone) Safari on iOS 6.1 on iPhone

Interface Text

During the process, we conducted a partial audit of the text throughout the interface. We developed recommendations for updating some of the text to better comply with the HIG. We were able to implement some of the recommendations in translation files, but others have not been implemented yet.

See our ideas in https://code.commotionwireless.net/attachments/download/245/Interface%20Text.odt

Potental HIG Updates

A number of things could be added to the Human Interface Guidelines as a result of the new design work on this theme. They include:

  1. Updated colors that now provide enough contrast “when viewed by someone having color deficits or when viewed on a black and white screen” (“W3C”:http://www.w3.org/TR/AERT#color-contrast).
  2. New terms
  3. New example status and warning message styles
1) (value.length == 0) && optional) || vstack[0].apply(value, vstack[1]