Slashdot Mirror


Design Principles Behind Firefox OS Explained

At MozCamp Warsaw, a presentation was given on the design principles behind the core Firefox OS experience. Layering of applications (if you're wondering why the Firefox mobile interface has that weird curve by the tab control, you'll find answers here), an emphasis on content over visual frills for their own sake, consistent iconography, and clean typography dominate.

69 comments

  1. Nice... by Anonymous Coward · · Score: 0

    I like!

    1. Re:Nice... by jellomizer · · Score: 0

      However Mozilla, has a tendancy of loosing focus. Ok we come out with a good design, then over time things get added and then you get a bigger and bigger pile. Becuase they don't know when to stop.

      A lot of the design seems to be taked from Windows 8 land. And the real devil is beyond screen shots when things are running in real time. Fat fingers will just mean something is too small. Or the particular effect just cannot be optimes to run smothly enough.

      --
      If something is so important that you feel the need to post it on the internet... It probably isn't that important.
  2. But, by Anonymous Coward · · Score: 3, Funny

    can you run Chrome on it?

  3. I'm guessing the main principle... by unitron · · Score: 5, Funny

    I'm guessing the main principle is to find ways to annoy people who liked the previous versions and to hide stuff from them.

    How very Microsoft of them.

    --

    I see even classic Slashdot is now pretty much unusable on dial up anymore.

    1. Re:I'm guessing the main principle... by squiggleslash · · Score: 2

      Just wait to you use the new GNOMEphone!

      --
      You are not alone. This is not normal. None of this is normal.
    2. Re:I'm guessing the main principle... by funwithBSD · · Score: 1

      The daily quote on ./ was right on target today:

      The truth about a man lies first and foremost in what he hides. -- Andre Malraux

      --
      Never answer an anonymous letter. - Yogi Berra
    3. Re:I'm guessing the main principle... by Anonymous Coward · · Score: 0

      Firefox started it first.

      Well, Chrome start it first. Firefox copied Chrome.

    4. Re:I'm guessing the main principle... by Anonymous Coward · · Score: 1

      You forgot upgrading the OS every hour or didn't you know that FF OS 39 is already in beta and will be available in 2 hours.

    5. Re:I'm guessing the main principle... by serviscope_minor · · Score: 5, Funny

      GNOMEphone, eh? I can see it now.

      In the name of simplifications they'll remove some or all of the numbers from the keypad, because an internal user study told them that all 10 digits is simply too complex.

      Then someone will write into the forum to complain.

      "I frequently need the digits 5 to 9 (inclusive) to call a wide variety of my contacts. These are vital to my workflow"

      "WONTFIX. Our dicision is final."

      "FUCK YOU I NEEDED 9 BECAUSE A FIRE STARTED MY HOUSE BURNED DOWN"

      "Please take your unhelpful comments elsewhere"

      --
      SJW n. One who posts facts.
    6. Re:I'm guessing the main principle... by Celarent+Darii · · Score: 0

      Actually Gnome 3 did the same. What is wrong with OS designers these days?

    7. Re:I'm guessing the main principle... by Anonymous Coward · · Score: 1

      Meh. You only need 4 buttons to dial up to 0xE.

  4. If their design . . . by smooth+wombat · · Score: 1, Troll

    is anything like their punctuation, grammar or spell-check, I see bad things in the future.

    --
    We will bankrupt ourselves in the vain search for absolute security. -- Dwight D. Eisenhower
  5. Rounded corners have nothing on this... by HerculesMO · · Score: 1

    It's almost a tit for tat copy of Windows Phone, in so many ways.

    --
    The price is always right if someone else is paying.
    1. Re:Rounded corners have nothing on this... by CaptSlaq · · Score: 1

      It's almost a tit for tat copy of Windows Phone, in so many ways.

      I was thinking the exact same thing: There's a lot of Metro those mockups.

    2. Re:Rounded corners have nothing on this... by Anonymous Coward · · Score: 0

      The principles are very similar, but there are some key differences. Recalling the design principles of Metro:

      Typography. Type is beautiful. Not only is it attractive to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Additionally, well placed type can help lead you to more content.

      Motion is what brings the interface to life. Transitions are just as important as graphical design. By developing a consistent set of motions or animations, a system is created that provides context for usability, extra dimension and depth and improves the perceived performance of the whole interface.

      Content not Chrome is one of the more unique principles of Metro. By removing all notions of extra chrome in the UI, the content becomes the main focus. This is especially relevant due to the smaller screen size and gesture-based interactions.

      Honesty. Design explicitly for the form factor of a hand held device using touch, a high resolution screen and simplified and expedited forms of interaction. In other words, be “authentically digital”.

      And the design themes for Firefox OS:

      Shapes which are Bold, Geometric but with hints of organic softness.
      UI that communicates a sense of handcrafted design.
      Design that is minimal, effective and intuitive but doesn’t feel soulless; has warmth.

      Metro explicitly states typography and content is king, but clearly (especially if you read the rest of the article) these are key elements for Firefox OS as well. In my reading the two key differences relate to the honesty point and how the user is drawn in to the UI. Metro uses honesty as a design principle, with the outcomes being "authentically digital" using "fierce reduction". Firefox OS is more prescriptive on bold geometric shapes and minimal, effective and intuitive design. These are very similar (especially compared to the greater bling of Android or the skeuomorphism of iOS), but the Metro approach is a bit more extreme on these. This is related to how the UI draws the user in. Firefox OS uses handcrafted design, warmth, and organic softness, presumably to make the UI more approachable and draw the user in. Metro rejects these and relies on motion to draw the user in. A simple example of this is the live tiles in WP versus icons (or even thumbnails). WP icons are typically very minimal, and a screenful of WP icons is actually ugly. The icons or thumbnails of Firefox OS are attractive and much more approachable. WP only really becomes attractive when the tiles are live and there is motion to catch your eye and consume the large flat areas.

      Despite the similarities, and the fact that Firefox OS was obviously heavily inspired by Metro, I find it quite interesting to see how a set of design themes or principles actually translates into software features.

  6. Use Moar Memory. by Anonymous Coward · · Score: 0, Troll

    Cache everything 40 times.
    Use MB sized buffers for chunks of data less than a kB.
    Cache all traffic in memory.
    Cache all images in memory multiple times, especially large ones.
    Cache all ads in memory.
    Pre-load all links and cache in memory to give the illusion of speed.
    Multiply all memory allocation sizes by 100.

    Did I mention to cache everything in memory? I did mean everything.

    1. Re:Use Moar Memory. by larry+bagina · · Score: 1

      Heh. Anybody else remember when resizing a Netscape window would do a full page reload? Look ma, no cache!

      They're like an asshole that does a line of coke at a party and turns into a raging cokehead, stealing from friends, sucking dick for drug money, etc. Then they turns to Jesus and insists on telling everyone about it. Moderation people! Do a couple lines of coke on Friday and Saturday night. Go to church on Sunday.

      --
      Do you even lift?

      These aren't the 'roids you're looking for.

    2. Re:Use Moar Memory. by Anonymous Coward · · Score: 0

      You forgot caching all of the OTHER installed browsers' disk caches in memory, and in its own disk cache, effectively making a copy of the 1048576 1kb files that IE uses for its default 1GB disk cache.

    3. Re:Use Moar Memory. by Anonymous Coward · · Score: 0

      Anybody else remember when resizing a Netscape window would do a full page reload?

      Shit was so cache.

  7. Re:ARRRRRRRRGHGHGHGHGGGGHHHHH!!!!!!! by EmagGeek · · Score: 0

    You're holding it wrong. If you hold it right, that won't happen.

  8. Deja vu by ebh · · Score: 2

    EmacsM-^H Firefox would be a great OS if only it had a decent text editorM-^HM-^H web browser.

    1. Re:Deja vu by aaaaaaargh! · · Score: 1

      Amazing, I didn't know what M^H does until today, and I'm using Emacs for 4 years now...

    2. Re:Deja vu by psyclone · · Score: 1

      Do you 'set -o vi' on the command line? Emacs style keystrokes (set -o emacs) rock in Bash.

      Try: M-b and M-F to move by word. (alt+b, alt+f, alt+backspace = M-^H for other readers)

  9. Smoking crack by onyxruby · · Score: 5, Interesting

    Designing an OS? Are you serious? Have you ever looked at the documentation on Firefox beyond the user stuff? Mozilla's support for using Firefox on more than one computer at a time is so bad that the web is littered with abandoned effort after abandoned effort from end user to do it for them!

    How on earth do they think they are going to support an operating system which /requires/ management when they can't even support a browser that requires management? You shouldn't have to go dozens of web sites to track down the settings and troll developer forums to get the settings needed to mass deploy an application.

    Mozilla, you really, really need to spend some time talking to people in the enterprise and learning what their needs our for managing fleets of computers. I've been on more than one meeting where Firefox was axed from deployment - even though every single person in the room personally used it, preferred it, acknowledged it was more secure - strictly because it is completely unmanageable for an enterprise. Don't get me start on their administrative toolkit either. It isn't close to usable and doesn't begin to cover what is needed.

    I'm sorry, until you can get your act up to speed for a single application support at least somewhere to the level of say, Microsoft, Adobe, Oracle, your simply being absurd. It's not about the technical capabilities of your applications, it's about the ability to use and administer it on an enterprise scale.

    I'm sorry, the enterprise experience with trying to manage Firefox is so bad that the idea of a Firefox Operating System is going to cost the poor person who suggests it their reputation at best.

    1. Re:Smoking crack by onyxruby · · Score: 4, Insightful

      lockPref("app.update.mode", 0);
      lockPref("app.update.service.enabled", true);
      lockPref("app.update.enabled", true);
      lockPref("app.update.interval", 14400);
      lockPref("app.update.auto", true);
      lockPref("app.update.autoUpdateEnabled", true);
      pref("toolkit.telemetry.prompted", 2);
      pref("toolkit.telemetry.rejected", true);
      pref("toolkit.telemetry.enabled", false);

      Yeah, I think I got that memo. Now, I want you to find a single source me on their website that explains all of those settings, what they do, their values, what file you put them in, their context and how to implement them for all users at an enterprise level.

      For enterprise deployments, your need to be able to set your configuration for any number of settings with ease. You can't do that with Firefox in the enterprise, I'm sorry but you just can't. I might need to configure any number of well over a thousand some settings, of which auto update is only one of them.

      This is what Firefox needs to be able to stand a chance in hell of making it in the enterprise. Understand that the enterprise /wants/ to use Firefox - badly.
      1. Enterprises need a single file that they can easily manipulate to change as needed for all users. Mozilla.cfg sort of handles this, but only in a limited capacity.
      2. Central sources for documentation. Why does about:config only have some entries defined? I shouldn't have to troll developer forums or bug reports to find out how to manipulate something.
      3. Easier support. The fact that it's open source is meaningless when programmers are not the ones supporting and distributing Firefox into production. IT professionals who are /not/ programmers need to be able to readily research and configure Firefox the way they want it.
      4. Don't make judgement calls for my organization. You feel wonderful about browser rights, that's nice. I'm not confusing 75,000 users with a prompt about their 'browser rights' and crap-flooding the helpdesk. I should be able to easily disable this kind of thing without spending a lot of time trying to find the right setting.
      5. Whoever came up with a six week release schedule needs to be placed into a monastery where they measure time by the seasons to gain some perspective. This places a heavy burden on enterprises and is a support burden. No other software product has this kind of release schedule and it goes against industry best practice.

    2. Re:Smoking crack by Waccoon · · Score: 1

      It doesn't help that some settings disappear for no reason after an update. A lot of good those tweaks will do by next version... which will take all of a week.

    3. Re:Smoking crack by Gordo_1 · · Score: 2

      [rant...]
      5. Whoever came up with a six week release schedule needs to be placed into a monastery where they measure time by the seasons to gain some perspective. This places a heavy burden on enterprises and is a support burden. No other software product has this kind of release schedule and it goes against industry best practice.

      Simmer down and go here:
      http://www.mozilla.org/en-US/firefox/organizations/all.html

    4. Re:Smoking crack by Xest · · Score: 1

      That and when you point out issues to them i.e. memory leaks in Firefox they deny they exist. Then they finally admit to them when they fix them a couple of years later they deny ever denying they existed and basically try and troll you over it.

      Between that sort of attitude, a concern I have that at least one of their devs didn't seem to grasp basic modular extensible software design, and things like the do not track debacle where they came up with some nonsensical reason as to why not to enable it by default (which again, has now proven to be nonsensical now the ad companies refuse to honour it anyway) I'm not convinced these are the sorts of folks I want going anywhere near my OS right now.

      Firefox was great, it really was, but it steadily lost it's way and lost it's focus. It's developers I've encountered seem to have an attitude of the customer is always wrong, and they're always right, about everything, ever - the issues you cite are emblamatic of this exact attitude. It's marketshare decline has been evidence that it's not simply me that thinks the browser isn't as good as it used to be a lot of people clearly feel it's been outcompeted. Mozilla needs to engage constructively with it's users much more effectively than it has, simply telling them they're wrong about everything clearly isn't effective.

      Honestly, Mozilla needs to take a massive step back, look at itself, reevaluate it's goals and check it is still following them, consider where they went wrong to cause people to start walking away from them, and learn a basic bit about dealing with users in a constructive manner before it embarks on this sort of thing. I'd actually like to see this succeed as competition is always good, but it needs a real step change in so many areas and so many ways at Mozilla if it's to go anywhere.

  10. Where's the d@mn home button? by DougInNavarre · · Score: 1

    I started to dislike Firefox's layout when they moved the "Home" button to the right side...away from the tabs and menu where my mouse would normally be.

    1. Re:Where's the d@mn home button? by doom · · Score: 1
      "Oh but the home button on the right is a far more logical layout when you consider the importance of grouping by global functionality to keep similar things near their point of action -- " Just kidding.

      The "Alt + Home" keyboard command will jump you straight to your home page, without mousing around.

      I've started disliking the "firefox experience" since everything has become flashed up... a page with a flash window always steals the keyboard controls, so I can't, for example, kill it with a control W.

    2. Re:Where's the d@mn home button? by Anonymous Coward · · Score: 0

      Wow, someone who actually uses the home button.

    3. Re:Where's the d@mn home button? by allo · · Score: 2

      you know, that you can move the buttons in any way you want? right click the menubar, then select customize. now you can move buttons.

    4. Re:Where's the d@mn home button? by DougInNavarre · · Score: 1

      lol...TBH I didn't know or pay attention during FF's many version upgrades. Now the "Home' button is at the top left where it should be and with FF just under full screen all most used desktop icons are a simple roll off the page away. thnx

    5. Re:Where's the d@mn home button? by allo · · Score: 1

      just customize it ...
      i am using no googletoolbar (because of web-shortcuts, gg is google) and the buttons left of the urlbar. the next/prev buttons are not shown when disabled via userchrome and with status4evar i even have an oldschool statusbar.
      firefox might be quite unusable with its current defaults, but you can make it look like an old good version with some efford.

    6. Re:Where's the d@mn home button? by RaceProUK · · Score: 1

      a page with a flash window always steals the keyboard controls

      Not quite - it's more Flash refusing to free they keyboard unless you force focus to a textbox or something. Then Flash finally relinquishes control to the browser.

      --
      No colour or religion ever stopped the bullet from a gun
  11. Looking more appealing than Android at the moment by thetoadwarrior · · Score: 1

    Visually it looks really nice and it's not being developed by an advertising agency so that's a huge bonus. I'm definitely going to give it a try.

  12. Comment removed by account_deleted · · Score: 1

    Comment removed based on user account deletion

  13. HTML5 is HTML5 is HTML5? by Anonymous Coward · · Score: 0

    So are you saying my HTML5 app will only work well on one mobile platform?

    Will all those nice design principles be applicable directly to Android, iOS and WP?

  14. Re:Memory is Cheap by Celarent+Darii · · Score: 1

    You sound more like a memory chip salesman than a software developer actually.

  15. Re:So? by Lennie · · Score: 2
    --
    New things are always on the horizon
  16. Re:Memory is Cheap by serviscope_minor · · Score: 2

    Why are we still complaining about how much memory ANYTHING takes up anymore?

    How much will it take to replace my 1GB Eee900 (with 1G and almost impossible to upgrade to 2) with something which isn't any heavier? A lot more than $79, that's for sure.

    Also, how do I plug that $79 DIMM into my android phone?

    Your friendly neighborhood software development manager.

    Ah, so you're personally responsible for the bloated monstrosities that pass a programs these days.

    Please, PLEASE quit your job.

    --
    SJW n. One who posts facts.
  17. Design Summary by Merk42 · · Score: 1, Flamebait

    Here is the entire design document in one sentence:
    Make the app look like an Android app, make the home screen look like iOS (but circles instead of rounded squares).

    1. Re:Design Summary by drkstr1 · · Score: 1

      Here is the entire design document in one sentence: Make the app look like an Android app, make the home screen look like iOS (but circles instead of rounded squares).

      This one has my vote. :-)

      --
      Fanboy Status: Apache Flex, C#, Eclipse, KDE, Pirate Party, Ron Paul, Slackware, Windows 7
  18. Comment removed by account_deleted · · Score: 1

    Comment removed based on user account deletion

  19. Looks promising by TheSkepticalOptimist · · Score: 1

    However it definitely seems a blend of Windows Phone meets iPhone with a little Android thrown in (just kidding).

    Even if this fails as a product, it is important to get Apple aware that there are competitive forces out there creating better UI paradigms then "just a grid of app icons".

    Mozilla should take great care however because a circle is just a rounded rectangle with corner radius = 1/2 height of rectangle.

    --
    I haven't thought of anything clever to put here, but then again most of you haven't either.
  20. Re:Memory is Cheap by partyguerrilla · · Score: 3, Insightful

    This is a mobile OS.

  21. First Chrome. Now Firefox. by slapout · · Score: 1

    We used to say that all programs evolve until they can send email.

    Are we going to need a new saying: "Every web browser grows until it becomes an operating system."

    --
    Coder's Stone: The programming language quick ref for iPad
    1. Re:First Chrome. Now Firefox. by Anonymous Coward · · Score: 0

      Not always. I know of 2 operating systems that appear to be growing into web browsers (windows, osx).

    2. Re:First Chrome. Now Firefox. by pr0nbot · · Score: 1

      Looking forward to IE6OS... *shudder*

  22. Firefox OS memory management by mrprogrammerman · · Score: 0

    I hope they didn't use the same implementation of malloc/free as the browser:

    void free(void *p)
    {
    }

  23. These are not design principles. by lennier · · Score: 4, Insightful

    These are styling principles.

    Yes, I know the entire commercial world in 2012 has decided to remap the dictionary and call "design" what the world of commerce in 1982 would have called "style", and "architecture" and "engineering" what the world of 1982 would have called "design". And product designers no longer actually design things but just draw sketches of what the colouring of the pictures on the skin of the 3D printer will look like, while the product architects, who don't have architecture degrees, build flowcharts for the engineers, who don't hold engineering degrees, to build.

    But darnit, I still remember when "design" meant how a product works at a technical level, and that's what I came to the article expecting to read, and that's the opposite of what I got.

    Get off my perfectly manicured ironically Le Corbusier-inspired post-post-postmodernist lawn.

    --
    You are not a brain: http://books.google.com/books?id=2oV61CeDx-YC
  24. Once you go Native, you never go back! by lbenes · · Score: 1

    As someone who switched from a browser based OS, WebOS, to iPhone 3GS, and now to Android, I can tell you I will never go back to another laggy HTML based OS. If anything, I'd like to see Android move away from its VM based apps to something like Apple's native apps. Many apps ran better on my 3GS than they do on my much more powerful S3. Mozilla is going the wrong direction on this one. Native > Java > JavaScript

    The whole idea of using HTML, CCS, and JavaScript as the back end technology for a low-end smartphone is nuts. Even the best HTML rendering engines are CPU and memory hogs. CSS was never designed for and is nearly impossible to hardware accelerate, and JavaScript is notoriously difficult to optimize and even the best VMs like V8 run orders of magnitude slower then Native code, while the VM itself takes up a massive amount of memory.

    I get that Mozilla wants to put Firefox on a phone. Fine, but first, focus one building a competitive browser. At the end of the day, I want a responsive fast phone, like the iPhone or Galaxy S3, not some dog slow HTML monstrosity.

    Mozilla please just invest your limited resources on making a lean browser that can compete with Chrome!

  25. This is my favourite bit by SirNorris · · Score: 0

    Limited, if any skeuomorphic textures and graphic effects as they are deemed a distraction

    Thank Jebus for that...

  26. Re:Memory is Cheap by EmagGeek · · Score: 1

    Obviously, humor is not your strong suit.

  27. Re:Hip Philosophy Haiku by jmcvetta · · Score: 1

    Oh, to have mod points...

  28. Re:So? by BZ · · Score: 1

    I think your understanding is wrong. See https://blog.mozilla.org/blog/2012/07/02/firefox-mobile-os/ (yes, it's basically a press release, but it's a convenient one-stop shop for a list of people who have plans, theoretical or not, to ship Firefox OS devices).