Tuesday, September 27, 2011

User Interface concept for Mozilla Boot To Gecko


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





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.


16 comments:

User Interface Design said...

Great work! I am hoping the same best work from you in the future as well. In fact your creative writing abilities have inspired me to start my own Blog now.

User Interface Design

chenmeinv0 said...

mont blanc
ugg boots uk
uggs uk
the north face outlet
ray ban outlet
adidas trainers uk
michael kors
ray ban glasses
vikings jerseys
prada outlet
2016.12.15xukaimin

Unknown said...

true religion outlet
oakley sunglasses
softball bats
hilfiger outlet
michael kors outlet
nike air
roshe run
nike factory
longchamp pas cher
longchamp
2017.11.20chenlixiang

Unknown said...

qzz0605
canada goose jackets
ugg boots
dior outlet
10 deep clothing
yeezy boost
ugg outlet
pandora charms sale clearance
clarks shoes
ray ban sunglasses
polo outlet

jeje said...

Les variations de couleur ne sont nike air max 1 ultra moire homme noir blanc rien d'exceptionnel. L'Hyperenforcer possède à la fois une technologie hyperfuse et flywire. Une bonne façon de rendre les choses beaucoup plus amusantes devrait être de transporter une autre personne qui aimera partager ce savoir avec vous et qui connaît votre sens new balance femme a courir du style. D'autres marques, styles et accessoires de taille enfant comprennent les sacs à dos Nike Shox R3 Air Max, les sacs à dos Jordan Select, asics cumulus homme les lunettes de soleil Under Armour Core et bien plus encore. Les fans de vêtements Hip Hop aux États-Unis et dans d'autres pays du monde entier sont pris air jordan future low noir femme par la mode Bapes d'assaut. Si vous pouviez avoir des enfants à votre fête, alors vous voudrez peut-être ne pas vous souvenir des costumes les plus effrayants offerts, sinon vous pourriez avoir des petits qui crient nike internationalist femme rouge à la place de se réjouir.

tamer said...

شركة مكافحة الفئران بالرياض
تعيش الفئران فى عشائر كبيرة وتنتقل من مكان لأخر عبر المواسير وفى الشوارع وربما تحت الأرض، لذلك فإن عملية التخلص منها تحتاج إلى أيدي عاملة ماهرة وقادرة على التخلص الأمن منها باستخدام أحدث الوسائل بالإضافة إلي الاستعانة بمواد حاصلة على الموافقة العالمية من منظمات الصحة الدولية، وكذلك وزارة الصحة بالمملكة، حتي تكون أمنة على صحة الأطفال وكبار السن ولا تحتاج منك إلى مغادرة المنزل، لذلك توفر شركة مكافحة الفئران بالرياض فنيين متخصصين على أعلى مستوي ومدربين ومجهزين بكل ما تحتاج إليه لتنفيذ تلك المهمة بنجاح وفي أسرع وقت ممكن، الأمر الذي يخلصك من ذلك الإزعاج الذي يراودك كثيرا كلما لمحت فأرا أو رأيت فضلاته فى المكان الذي تسكن فيه.

seocom said...

رقم شركة مكافحة حشرات بالاحساء
الحشرات لا تستطيع القضاء عليها بسهولة لذا عليك الاتصال برقم شركة مكافحة حشرات بالاحساء حيث تختبئ بمفاصل الدرف الخشبية و خلف الثلاجات و البوتاجازات و تتميز الحشرات بقدرتها القوية على الهرب والاختباء بين المقتنيات كما تعيش الصراصير حول مصادر المياه مثل مواسير الصرف الصحي و البيارات كما يعيش البعض الآخر في المناطق العالية فوق الثلاجات و حول إطارات الصور و ساعات الجدران فتقدم الحل الأمثل للقضاء على الحشرات حيث توفر المبيدات الحشرية الحديثة و المتجددة للقضاء عليها بتأثير المبيدات عليها حيث يشعر أفراد الأسرة بالقلق من وجودها في منزلهم حيث ينشر الفوضى والأمراض خاصة الأمراض المعوية بسبب نقل المرض من الفضلات.
______________________
شركة نظافة بالاحساء
شركة نظافة بالاحساء هي الأفضل أينما كنت فسوف تجدنا لنساعدك بكل ما لدينا من خبرة و جودة في مجال الخدمات المنزلية و ذلك بما نستخدمه من أساليب حديثة من التكنولوجيا لكسب ثقة عملائنا لذلك فقط كل ما تفعله الآن هو الاتصال بشركتنا حتى تستفيد مما تقدمه من خدمات التنظيف عالية الجودة و العروض الهائلة و التي تحقق بها الشركة نظافة كافة أجزاء المنزل و إضفاء عليها مظاهر الجمال و اللمعان وتنظيف مداخل و واجهات المنازل سواء الواجهات الزجاجية أو الحجرية مع مراعاة تلميعها و إزالة الأتربة منها و تتوافر خدمة تنظيف السلالم و المصاعد التابعة للمصانع و الشركات الكبيرة و الفلل اتصل الآن.

Shaimaa Elsadek said...

شركة تنظيف مجالس بالدمام
شركة تنظيف كنب بالدمام
شركة تنظيف خزانات بالدمام
شركة مكافحة حشرات بالدمام
شركة مكافحة النمل الابيض بالدمام
شركة مكافحة الصراصير بالدمام
شركة مكافحة البق بالدمام
شركة رش مبيدات بالدمام
شركة مكافحة الفئران الدمام

Shaimaa Elsadek said...

شركة مكافحة الحمام بالدمام
فني تركيب كاميرات مراقبة بالرياض
فني تركيب مكيفات بالدمام
شركة تركيب مكيفات بالدمام
شركة صيانة مكيفات بالدمام
شركة تنظيف مكيفات بالدمام
شركة تنظيف كنب بالرياض
شركة تنظيف مجالس بالرياض
شركة تنظيف سجاد بالرياض

Shaimaa Elsadek said...

شركة تنظيف موكيت بالرياض
شركة تنظيف فرشات بالرياض
شركة تخزين عفش بالدمام
شركة تنظيف بالخبر
شركة جلي بلاط بالدمام
شركة تسليك مجاري بالدمام

Shaimaa Elsadek said...

شركة تنظيف حمامات بالدمام
شركة تنظيف مطابخ بالدمام
شركة تنظيف مساجد بالدمام
شركة تنظيف واجهات حجر بالدمام
شركة تنظيف مسابح بالدمام
شركة صيانة مسابح بالدمام

Shaimaa Elsadek said...

شركة تنظيف فلل محروقة بالرياض
شركات نقل العفش بالرياض
شركات مكافحة الحشرات بالرياض
شركة مكافحة الحمام بالرياض
شركة تنظيف واجهات كلادينج بالرياض
شركة كشف تسربات المياه بالقصيم
شركة كشف تسربات المياه بعنيزة
شركة شفط بيارات بالرياض
شركة طارد الحمام بالرياض
نقل عفش بالرياض

jasonbob said...

moncler outlet
lebron james shoes
yeezy
birkin bag
golden goose
yeezy boost 350 v2
kyrie irving shoes
air jordan
golden goose

elfares said...


شركة مكافحة الثعابين في الفجيرة
شركة مكافحة الثعابين في ام القيوين
شركة مكافحة الثعابين في ابوظبي
شركة مكافحة الثعابين في راس الخيمة
شركة مكافحة الثعابين في عجمان
شركة مكافحة الثعابين في العين

roothee said...

my review here high end replica bags i loved this bag replica high quality this content 7a replica bags wholesale

prokr.co said...

Use a backpack with wheels: If you're traveling with a lot of luggage but still want the convenience of a backpack, consider using a backpack with wheels. These backpacks typically have a telescoping handle and wheels, making them easier to maneuver through airports and train stations.

I hope these tips help make your luggage moving experience much easier!
prokr.co