I had fun imagining a twist for Firefox OS’s UI. This started when I wrote the following mail to provide feedback for Fx OS’s front-end.
Both apps and websites present content and settings/navigation tools. As a custom controls, menus and the likes mostly sit at the top of the screen in a header, while content is placed below. Most (all?) mobile OSs follow this tradition, including FxOS.
When single-handedly holding a smartphone, though, we use our thumb to press the controls and the top of the screen is the most difficult area to reach. Moreover, the thumb could partially cover some of the content at the bottom of the screen.
Given those observations, I can’t help wondering whether it would be beneficial to reverse this structure: placing app controls in a footer at the bottom of the screen, close to the thumb, and leaving the top area for content.
That would radically revolutionise the whole UI and I cannot imagine all the consequences (and issues) that would arise. I think though that it would enable some exciting possibilities: for example accessing an app’s menu by sliding up the footer, just like we access the system tray by sliding down the status bar.
Unfortunately I have not the skills required to put this into practice. So, the only thing left was to create some mock-up screenshots to see how this would look like!
Let’s start with the Homescreen:
The search bar has been moved at the bottom, and that’s all.
This is what would happen to the E-Mail app. The App Header now is a Footer. Moreover the search area on the left half of the System Bar has been merged with the footer, so that it now serves either as a search bar and as a title for the current app.
The small darker lines at the top of the footer indicates there’s a menu to be discovered. Dragging the bar upwards reveals the menu:
Likewise, dragging down the Status Bar open the System Tray, just as usual but without hiding the footer (pretend you see the E-Mail app behind the transparent System Tray, my GIMP-fu is not that good):
The App footer may contain special commands on the right, like the usual New Message. Let’s navigate into the app structure by reading message, and this is what happens:
A Back arrow has appeared right of the Search/Title Bar. This is the usual Back arrow, but it is also a browser-like back-in-history arrow: in FxOS the two concepts are merged into one, just like web-apps and web-sites are.
A bar with quick-commands lays over the App Footer (nothing forbids that). Though, it may make sense to make a menu out of it:
Let’s change app and pick Message. This is what happens when the keyboard appears:
The keyboard works as usual, but sits on top of the App Footer. This is a bit ugly because the grey colour of the keyboard does not match that of the footer, but this too can be amended by introducing a coloured keyboard (which my lack of GIMP-skills prevents me to produce).
As I said before, the Search/Address Bar and the App Title have been merged. Thus, tapping on it brings the user to the search screen.
Notice how this time the keybard is below the App Footer: this is because now we are writing into the Address Bar, so we should have it in front of our eyes.
This is it. I’m no designer so I don’t actually know whether this is a viable design or not. Still, I had fun in making this, and maybe it will give some contribution to the future Firefox OS UI nonetheless.