I repost this article, because the last time i post, the comment link can't load properly
This concept is my imagination of Mozilla Boot To Gecko web based OS user interface. Since its not officially use by them, i use the imaginary FXos as the name of the OS.
The name "FX" is derived from FirefoX. It will be use across the product lineup in my concept. Imagine FXu, FXt, FXm and so on. I will released them as soon as possible, so stay tune.
The concept is based on my previous UI concept posted on webian.org community. The original concept can be seen at
mobile UI concept
http://getsatisfaction.com/
and for desktop/tablet UI concept
http://getsatisfaction.com/
http://getsatisfaction.com/
and for desktop/tablet UI concept
http://getsatisfaction.com/
Previous UI concept for Webian Mobile
Please note that, this concept is far from finish, i still tweak it alot, and the ui mockup is still missing. I will complete it one by one.
FXos UI Concept - A Guideline
last rev 26-09-11
Hardware
When designing this concept, i also thinking about the hardware to make sure user will have the best user experience possible.
The hardware for this concept is monoblock bar shaped phone, without any physical button except the power button (and maybe camera button). So, no home key, back key whatever. The phone styling should be clean and honest.
An early sketches of the hardware concept can be seen in my next article. I will further explore the hardware design along the UI concept.
Basic concept
FXos use different UI concept than traditional desktop OS. In traditional desktop OS, which is based on old desktop methaphore, we usually found ui elements like desktop, application windows, taskbar, cabinet like file manager etc.
Instead, FXos develop its UI concept based from a modern internet browser UI. In this UI, we found different common UI element than on desktop methaphore based OS. Here we have element like tittle bar that also function like a tab, address bar, status bar etc. And in browser UI, all content will be presented in full screen. So no windowed content.
In FXos, the browser UI is developed further to make it suitable as an stand alone OS for devices for desktop/laptop, tablet and smartphone.
There are 3 main container that represent 3 most importand element of the OS. These container is called layer. Beside as the representation 3 main element, the layer also build related on how we can navigate the OS as natural as possible. The three layers are, the base layer, the presentation layer and expose layer.
Layer on FXOS
Base Layer
Is the lowest layer of all. It will always sit on the bottom of the others. The Base Layer will be the container for all setting of the device, from control panel, quick switch (something like power switcher in Android), the Tab Dock, Tray Botton and so on.
Presentation Layer
The second on is Presentation layer. This is the container of the content. All webpage and webapp and application launcher are places here. This is the main space for user interaction.
Presentation layer showing website in active tab. There is a small tip poin at the lower of the web indicating in which tab the website belong to.
Website shows in full screen. Note that, in full screen view, there is a small semi transparent icon in the lower left of the screen. I plan to use this as an alternative shortcut to the "Tab Dock" or may something else.
Expose Layer
And the last one is the expose layer. This layer is use to switch opened content either it is a website or a webapp. How the tab can be displayed can be costumized. It can be cover flow like, tile with preview or whatever.
Website/webApp can be pinned at expose layer. in this example, "the stream" is pinned at the top left of the screen for easy to remember location.
So, 3 layer. And each can be accessed with special different gesture. No button are required.
Key UI element
Tab Dock
The Tab Dock is a mash up between browser tab and an application dock (think MacOSX dock, or windows 7 new taskbar). The reason behind this, is that, "dock" size is usually bigger than traditional tab that browser has, so its more finger friendly (important for touch based UI). The dock also placed at the bottom of the screen, so it follow the concept of clustering main activity at the bottom of the screen.
The dock can also contain pinned webapp or UI element. In this case, the "Stream" screen can be access thru the pinned button placed at the Tab Dock.
Other important element that place at the Tab Dock is the "Tray Button".
New tab screen
When user click a add new tab button on the Tab Dock, this screen is shows up. Its a combination of app launcher and traditional address bar set (address back, back, forward and search).
If you've seen my previous concept for Webian, i have move the url/search box on the top of the screen. This way, the box will not be covered by virtual keyboard. Or have to slide up when the virtual keyboard is shown. It can sit there peacefully and always accessible. This design will also be use across FXos app (see "the stream" bellow)
Stream
Stream is a replacement of traditional home screen. Like its name, it shows information stream related to user preference. Here user can have social network update, location where he/she is, related surrounding place,new sms messange, calendar alarm and to do list etc.
At the top of the stream, there is a text box. It can used to tweet, send sms, email, update your social network status etc. User can select what services they preffered.
I imagine that, with stream, we can reduce the time user need to access dedicated messaging app. They can send and response to message right here without having to open sms app, or twitter app for example.
The stream also represent how app will looks like in FXos.
Tray Button
It is the replacement of current traditional system tray. It is a live button, means that, it will dynamically change the information displayed on it related to system condition. User can also click it to reveal more system notification and response to it.
Base screen
This is the base layer. It contain device setting, quick activation bar, volume etc
System navigation
In designing a system navigation for the FXOS, we have to considered what is the main input device of the next personal computing. And from my perspective they are :
1. Touch screen - for tablet and smartphone
2. Touch pad - for laptop and desktop
3. Touch mouse - for laptop and destop.
From the three of them, the newest one is the touch mouse. I think it will be the next evolution of the mouse (begin with Apple Magic Mouse) and soon will be used by most of the pople.
I note the touch mouse because, the availability of it enable us to bring the same consistent way to interact with our OS. Some basic key element can now be done via simple gesture.
But, it will have a consequences. Since the touch mouse is buttonless, for the sake for consistencies, other devices will also have no physiscal button for navigating the UI. The tablet and smartphone loaded with FXOS will not need any physiscal button.
Again, make it simple, natural and consistence.
Gesture
Here are standar gesture use to navigate FXOS
Double tap
Shows the expose layer.
Tap and hold
Reveal tab dock and reveal a simple popup option. Swipe left to open new tab, swipe right to close current tab.
Swipe from the bottom of the screen
Shows the base layer where device setting and control panel placed.
Swipe from the left edge of the screen
Back to previous screen, similar function to Android back button. Or can be used like browser back button.
Swipe from the right edge of the screen
Forward to previous screen. Or can be used like browser forward button.
Pinch zooming
Just like on the other platform, this for zoom in or zoom out the webpage/photo etc
Draw left pointed arrow with finger
Back to previous page for a website viewing.
Draw right pointed arrow with finger
Forward to previous for webiste viewing.
Application design
Basic design guideline for application UI.
Webapp function button
Like my previous concept ( getsatisfaction.com/webian) all the basic function of the devices is located near the bottom of the screen.
The webapp, in the other hand put all the function near the top of the screen. This will make it clear for the user, which one belong to the app, which one belong to the underliying OS.
Webapp presentation
All webapp (so does website) will presented in full screen.
App navigation
Content of the FXOS webapp will be presented horizontally (think Microsoft Metro UI without that overlapping content). The screen animation will give a clue to the user about this. This approach will also drop the need of dedicated physical back button. User can swipe back and forth with easy and natural way.
