MozCamp Warsaw: Design Principles Behind Firefox OS UX

Patryk Adamczyk

82

This is the presentation I gave at MozCamp Warsaw earlier this month. Many people have been asking for it, so it made sense to create a post about it, and give a bit more context the slides.

 

Rewind to MWC 2012…

It all started like a “skunks works” project, we had a few people working on many parts… I was contributing a few hours a week, and Josh Carpenter @joshcarpenter was tasked on penning the entire UX with the Visual Design in about a week for the MWC demo, which is a near impossible feat! But our showing at MWC was success…

 

Since both of our teams were small and had strengths in different areas it only made sense to partner up for v.1 of the OS.

 

At this point (April 2012) with this new partnership I wanted to create a realignment of the visual design. (At the time this identity map made sense but as we proceed forward, it will be refined post v.1). Working with the UX team on where we want to take the visual design of all our products the following themes emerged:

  • 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.

Much like various versions of Firefox, the overall concept here is premium and of quality, but not because its expensive. Good quality design should be accessible to masses much like our products. Our strong focus is on high quality and distinctive design in the marketplace.

 

Design Philosophy (DNA)

Common elements in every application:

  • Familiar Layout
    • Top Header which contains a backward navigation button (back, cancel or menu) on the left side of the screen, screen title to show the user where they are (left justified) and up to 2 action buttons often allowing for forward progression within the application
    • Bottom Toolbar containing up to 5 action icons
  • Magazine Like Layout: emphasis on typography and we wanted to make each app like it was type set by a human so we opted to go for a strong left alignment rather than mindlessly center aligning everything. This magazine like layout translates to images as well, many of them are strategically cropped to best suit their purpose in the application.
  • Bold Colour to better appeal to our launch audience through the communication of warmth and confidence.

 

(Diagram thanks to Ian Barlow @ibarlow). Layering of content has been a comment UI element sense in Firefox for Mobile, we’re bring this element into Firefox OS in full force.

Content for user consumption is on the top level, settings are always found beneath.

 

You can see how the header navigation and layering of visual design come together in this example. The user presses the menu button on the top left hand corner, the menu slides out from beneath the content. Since the menu doesn’t progress the user further in the app it slides from the left.

 

In the Firefox browser example the tabs are more of a menu, so they are depicted beneath the content since they allow the user to progress forward in the app, they slide out from the right.

These left <> right transitions create a natural path for discoverability.

 

Many applications have a distinct character visually catered to their use, with a list layout, focused on quick triage of content.

  • Productivity applications create a sense of an office; bright with an emphasis on typographic content.
  • Media applications create a more theatric (dark) experience with emphasis on graphical content rather than text.

 

Media content varies per application, so aim here was to create a foundational grid which would work with each content type.

 

Our media applications have the following characteristics…

  • Content is King while chrome is a distraction therefore, it is minimized.
  • Asymmetrical layout (left alignment)
  • Limited, if any skeuomorphic textures and graphic effects as they are deemed a distraction
  • Any elements non essential for communication should be secondary

 

The aim of imagery is to add value not clutter. Rather than having a gray note graphic for missing album art, we created custom painting inspired placeholders for missing album art. In the productivity apps rather than having a missing contact image silhouette icon which creates noise (where emphasis should be on typography), no contact graphic appears.

 

Apps outside of the core media and productivity suite have distinct identities. Our aim was to balance sophistication with the approachability skeuomorphic design brings, textures are subtle and forms are stylized. A variety in bright highlight colours bring warmth and soul to each application.

 

For v.1 our feature set had to be focused… but we felt wallpapers and allowing users to customize them was something that we had to include. The user has access to their full app grid or can live on the homescreen, their wallpaper (most likely being of their favorite person(s) or place) in full view.

 

Examples of various Firefox OS elements. Strong emphasis on Typography
Familiarity (Firefox browser similar to Android version), Iconic Shapes but most importantly variety.

 

Iconography

 

Peter La @ArtofPeterLa came up with this concept for the application icons: “Free the Web.” The icons would placed on a plate but some of them would break out to enforce the concept. We initially thought about using a square plate but the circle form created a unique opportunity to own a shape not common on any major OS, this would give Firefox a more distinct appearance.
We use a variety of plates, with certain colours suited better for certain application types:

  • phone related: green
  • media related: blue
  • productivity related: orange
  • settings and utilities: gray

 

The overall concept for the action icons revolved around Friendly + Confident

  • Mature Forms with emphasis on confidence through selective cropping
  • Curvature should be small (tight) to communicate a sense of polish and approachability, but not overt to appear childish or cartoony
  • Geometric curvature is favored over organic, but the ideal would have mixture of two (geometric without feeling stiff)

 

Currently we have over 100 icon metaphors…

 

Colour has always been an important part of Firefox, especially the colour orange. We tried various concepts of application but in the end using only orange as a high colour did not work, so it has been reserved as an accent with its heaviest use in the productivity applications’ header. We used blue as highlight colour instead for the following reasons:

  • Complements the Firefox orange beautifully
  • The majority of the human population prefer blue

There was also an opportunity to speak to the partnership with Telefonica by choosing a blue hue which aligns to their brand colour.

 

YES! All will be converted to CSS in one common library. We expect to support the developer & design community with a robust set of building blocks which will be released sometime before the OS goes to market and will be found on our new style guide website: http://www.mozilla.org/en-US/styleguide/

 

Typography

This is the Firefox logo, it uses Meta (like much of Mozilla’s brand) which was designed over 2 decades ago by Erik Spiekermann who intended it to be a “complete antithesis of Helvetica,” which he found “boring and bland. Meta as great as it is, was designed for a print environment and due to licensing restrictions can not be freely distributed…

 

A few of our friends at Telefonica worked with Erik in the past which lead to an opportunity to work with him again on a typeface for the Firefox OS. So, it only made sense to create a digitally evolved version of our favorite typeface with increased legibility at small sizes and a more contemporary feel. More information on this project will come in the near future for now, above is a sample…

 

Sound Design

During the MozCamp presentation I played some samples, since then those have been revised, so a preview of the suite will be seen in a future blog post. However I can speak about the overall art direction which revolves around 3 themes a contemporary baseline inline with the overall visual theme of the OS and 2 variations on it. The first variation is much more relaxed, casual and soothing to contrast with its polar opposite, a sound theme that is direct, loud and more on the professional side.

82 responses

  1. md wrote on :

    Everything looks amazing – well done. But the app icons don’t look nearly as slick as everything else…

    1. Patryk Adamczyk wrote on :

      Still tweaking them… however any actionable comments are more than welcome and will be considered.

      1. Barnaby Walters wrote on ::

        I actually much prefer the squarer layout in the second slide to the glossy round icons. Overall I love the flat, non-skeuomorphic aesthetic in gaia (IMO phone displays aren’t 3D so they shouldn’t try to fake it), and whilst I like the idea of using colours to signify purpose, I don’t see how glossy, faux-3D app icons really fit in to the rest of the aesthetic.

        I am currently running a b2g simulator on my mac, and am looking forward to running it on a real device :)

        1. Patryk Adamczyk wrote on :

          re: circle icons. Yes I preferred the square icons myself, but then after living with the circles you can’t go back, they evoke a much more approachable feel which is our aim.
          re: skeuomorphic design. We are trying to find a balance here, it will still be refined in future versions and for v.1. But there is a greater appeal from the mass audience to a style that feels touchable and if you look at our v.1 target, it makes sense to skew the visuals to better appeal to that market.

          1. JT wrote on :

            What about visual notifications? are there going to be numbers simply indicating the quantity of notifications, and a separate center, or will there be a more advanced design? I personally find that the biggest challenge in front of designers developing a design language for an operating system is how they get the most relevant information to the user, the quickest. It might bear some thinking. As far as the shape, circular certainly seems to gel better with the overall scheme, especially when its used as the backdrop for the app symbol.

          2. andrew wrote on :

            I agree with square layout looks better…these give a lot more personality than the rounded icons…it’s hard be original now, when exist 3 major phone OS and I think than you get this using the square icons….I don’t like much the action buttons…looks a bit “generics” and the looks is a bit boring…I really like the gallery,clock,calculator and radio..looks really nice…

            I know than the orange is a really important color for firefox but it’s not the favorite of many people…maybe use it for highlight some key parts or use some orange lines…

      2. Mirek2 wrote on :

        I would get rid of the faux reflection — it feels tacked on, especially because it is the same all throughout the UI, no matter an object’s physical location.
        I would limit the background gradient in each icon to one color. The blue-to-green gradient of the phone icon looks odd.
        I would recommend using only white for the icon symbols, or at least a very subtle silver-to-white gradient. The darker gray in the Phone icon makes the phone harder to distinguish.
        A thicker and more geometric stem for the note in the Music icon would also be good.

        P.S. Why not use the Thunderbird icon for e-mail?

        1. Patryk Adamczyk wrote on :

          re. Thunderbird – We did not want to badge the mail app with the Thunderbird branding unless it really felt like Thunderbird. Our browser is branded Firefox, because it feels and functions like Firefox.

      3. Riz wrote on :

        The icons really are quite beautiful. I especially like your description of them as “approachable.” Thinking of that — approachability — I’m not convinced that the “Free the Web” component of the design is a good idea. Perhaps I’ll be in the minority, but there’s something… dissonant about those icons that appear to be “breaking out.”

        The video app is the strongest example. There’s a real tension produced by the sharp corners of the film interrupting the smooth curve of the plate. Contrast that to the calculator icon (admittedly, my favorite). The bottom of the calculator assumes the curve of the circle, while the top retains it’s squared edges without any sense of encroachment. There’s much less *conflict* there, for lack of a better word, and if approachability is the goal, perhaps minimizing such conflicts would be beneficial.

        Also, “Free the Web” causes a bit of an optical illusion: those icons that are “breaking out” make their plates look smaller, which can trick the eye into seeing unequal icon sizes in the app tray. (Look at video icon next to the music icon in the ‘Content Catered to You’ image above.)

        Thanks for sharing your hard work. It’s really a thing to behold.

      4. Techiy wrote on ::

        I like the concept of plates, it immediately points to me that I could sort apps according to functionality. Organizing 100+ apps manually is tiring.

  2. Ahmed Nefzaoui wrote on :

    I could think of all the opportunities that will expand from this great project.. That’s just awesome :)

  3. Vincent wrote on :

    Great design. Thanks for sharing the insight behind it.

  4. tom jones wrote on :

    i like all the design elements, especially the round icons, photos and action icons half off-screen, layering, etc..

    i don’t like the skeuomorphic clock and calculator apps, but i guess that’s standard today.. :(

    i like the new font, even if it looks a bit more like Helvetica, i just don’t understand what’s wrong with the lowercase letter “y”, it looks like an error, and not in a good “typographic personality detail” way??

    overall, great job, can’t wait for more!

    1. Patryk Adamczyk wrote on :

      re:font. Its still work in progress, we did want to “cool” the font down from Meta, but still select a few characters to have more flare so its not as bland as Helvetica. At larger sizes more details would also emerge.

      1. tom jones wrote on :

        sorry, maybe i was a touch over-dramatic there..

        i checked the original Meta, and it also seems to have that strange “y” letter, only a bit less pronounced, and seems only noticeable on very large sizes.

        so obviously, it’s not *that* of a big deal.. ;)

  5. Rhys wrote on :

    I have been an avid Android user since it’s inception and have enjoyed the gradual changes of the themes and UX over time. I have used many different ROMs and themes to try to get the look I want, however there is always a small problem of inconsistancy. I have also looked at the UX guidelines for Android from a development point of view and can definitely say that the Firefox OS guidelines are beautiful. The overall look is fantastic and clean, blowing the noisy iOS and chaotic Android out of the water. I look forward to getting a device.

    Also, another great appeal of the Firefox OS is the open nature of the whole project. As with Firefox, developing a derivative is easy and practical.

  6. rhy wrote on ::

    NICE! Can’t wait to install this on one of my android phones!

  7. Tarsem Singh wrote on ::

    Good research work.

  8. Khalid wrote on :

    Too many thoughts incorporated into this work and output is really truly sleek. The colors used are also pleasant. Loved it! Hats off you guys!

  9. tom jones wrote on :

    also, that detailed, full-of-gradients Firefox icon looks somewhat out of place among all the other, much simpler, modern, minimalistic icons. maybe a redesigned, more stylized Firefox would fit better with the rest of the app icons and the design of the OS itself?

    maybe something inspired by manga, or comic books, or maybe even these paper doll fire foxes :)

    http://redbaiduri.blogspot.com/2010/10/kumi-paper-dolls-fox-fire.html

    1. Patryk Adamczyk wrote on :

      We’re still tweaking (everything), but yes I would tend to agree with you on the Firefox it could be crisper especially when seen on the phone screen. However its something that I need to negotiate with our Brand team on. And yes, love the doll (as seen in the Paris office earlier this year). http://www.flickr.com/photos/twistedbydesign/7103297721/in/set-72157629877688861

      1. Bob wrote on :

        Firefox OS is looking SEXY.

        Also, your blog post and replies are a lesson on how to engage with the community and respond to feedback. The people over at GNOME could learn a thing or two from people like you.

  10. Raymundo Dionicio wrote on :

    This is beautiful.
    Really.

    :)

  11. Aleksy wrote on :

    Way to go guys. That’s a really great job.

  12. ivan wrote on :

    Make the display of the calculator multi-line please.

    I’ve never understood the persisting of this restriction even on modern computers, by which I mean the computers of the last 30 years.

    1. Patryk Adamczyk wrote on :

      For v.1 we had 2 options… no calculator or a very basic calculator to limit scope creep. So we were lucky to have this app make it in. But yes, for v.2 with proper dev. commitment we’ll do something less basic! And multiline makes perfect sense as an option.

      1. mits wrote on :

        Whenever you input a few digits, it’s convenient to have them as big as possible. On the other hand, if you work with a lot of numbers, you’ll naturally bring the phone closer to you (to check if you typed the number correctly), so a smaller font isn’t as disturbing. I’ve seen this in practice on the Nokia N9, in both the dialer and calculator. I think this would work well on a basic calculator, and have a button to switch to a scientific version, which would naturally have a different layout.

  13. Robert DC. Reyes wrote on ::

    Awesome job! Can’t wait to see it in action with the Firefox OS device soon.

  14. Arun wrote on ::

    Excellent work Mozilla. Hope this turns out successful.

    I am waiting for FirefoxOS to be released so that I can buy my first smart phone.

  15. sanket wrote on :

    Everything looks great. Apart from the Radio and Calculator apps. The design could be less skeuomorphic and the approach to design should be more functional. (I quote Tom Jones on this). Also, the keys (buttons?) of these apps blend in with the dark gray background and it’s not easy to distinguish them against background of same colour. A slight variation in colour or contras will be immensely helpful making tapping on flat 2D surface easy, considering these keys will be used quite frequently while using these apps.

  16. Robert Kaiser wrote on ::

    I hope there will be some ability to do custom theming of styles and sounds – but I guess that’s probably post-v1. ;-)

    1. Patryk Adamczyk wrote on :

      If we have time for v.1, then yes. Otherwise v.2 for sure.

  17. Shawn wrote on :

    Just because I am very tired of patent trolls…. (Typically tired of Patents in general as they prevent the improvement and expansion of great ideas ( .. I’m probably violating a patent right now by using both my nostrils to breath in air..) )
    With your Settings menu coming out behind the inbox in your one screenshot.. I notice that the 3 lines indicating the settings button, and the layout of the settings in general looks very similar to how Facebook has their menu…
    Are you concerned that companies are going to be jumping all over you saying that you infringed on their idea(s)?
    I have not completed reading everything, but I felt the question is worth asking.. Because in today’s world – it is bound to happen.

    1. Patryk Adamczyk wrote on :

      There are common building blocks emerging, the slide in menu has become both an elegant and effective solution for in app menus. Many developers are using this paradigm, and we have our own twist on it. That being said, we are careful to NOT infringe on patents and have our legal team making sure.

      Realistically we’re more likely to have our ideas “inspire” others as we post “work in progress” and not the final product design. This has been an issue in the past with some of our other products, but in the end it just promotes progress on the web, and results in better product for all web users.

  18. Joram wrote on :

    I love what you guys have done. Excellent design work.

    I have to agree with some of the comments on the round app icons. They look out of place within the rest of the design.

    Perhaps a “foundational grid” system for app icons with square-ish icons similar to those on slide two would not only streamline the look but also lend the flexibility afforded by a grid, some icons could then span two cells vertically or horizontally to fill out open cells (open cells don’t look nice in my opinion).

    Thank you for all your efforts guys.

  19. Ersatz wrote on :

    Looks awesome. One comment on skeuomorphism in UI design–since Ice Cream Sandwich, stock Android has gotten rid of “buttons” in favor of flat action icons. It looks slick in many cases in my experience, it’s a major usability loss. In some apps (including key ones like the dialer and recent calls list), it’s not always clear where you are supposed to touch to launch the action you want– what look like text fields are actually “buttons”. In other cases, there are icons that are purely decorative/informational or text fields that do not have have an associated action in what look like interaction areas. This is especially tricky in touch interfaces where there is no concept of “hover”. I’m excited to see that you appear to be keeping this important visual cue in your of apps. Beware of flatland!

  20. chris wrote on :

    Man, this is so awful. It is like we have traveled back to the dreadful days of semantic, object-based OS design.

    To explain for those of you with no knowledge of recent computer engineering history. Back before the days of Microsoft’s Windows NT (Windows 2000, XP, Vista, 7, and non-metro half of 8 are all built on the principle of the original NT design) , NT was proposed as a poor stop gap, while the PhD’s at Microsoft completed their design of an object-based semantic OS and filesystem. Needless to say, the idea of a semantic OS quickly proved to be the worst idea in the world, and was relegated to the dreadful Palm and Pocket PC OS’s found on the grotty second generation PDAs that ruled before the days of Android and iOS.

    Today, the dreadful idea of the semantic OS is gaining traction again, because it serves the interests of those that make money by offering ‘services’ rather than files. Those that ‘rent’ you films, for instance, don’t want you thinking of the film in terms of a video file that you play by sending it to your media player of choice. They want you perceiving the film as a service that just magically plays on your device when you select it (utilising the DRM ridden hardware and software locks, of course).

    Why has Microsoft’s Windows been the most successful (user) OS ever seen in the history of computing? Because it is an open, neutral platform that encourages LATE semantics (semantics via apps, rather than early semantics bound to all data and interactions). If you want something clever on Windows, you install something clever on Windows. This philosophy is so complete, Microsoft ensured that the apps that came with Windows were putrid- worst of class- so that the user immediately understood that THEY were responsible for finding decent apps to do almost everything.

    Pretty skins and clever skinable shells should never be confused with the underlying OS. Shells should be apps, and nothing more. The underlying GUI mechanisms should be universally available to all apps that wish to run on the OS.

    What we have with the Firefox OS UX is pretty, fashionable junk, designed to jump on the Apple phone bandwagon. Every idea shown here becomes obsolete with moment Apple decides to change the rules again.

    “Content is King”? What does that dribble mean? If, say Netflix wants to offer a great front-end for their online services, THEY should be the ones crafting a software shell with all the whizy graphics built from a sane set of software libraries.

    Power-users want a NONE semantic way of moving and accessing their files. They want to choose where they put their files, and what applications run these files. PalmOS (in all its forms) died because users were NOT allowed to do this. Data files had to be moved as objects under the permission of apps that ‘owned’ those file types, to positions determined by the app. PalmOS only gained some traction when it had been thoroughly hacked to allow the same file behavior as users experienced on desktop Windows. Palm spent hundreds of millions building its object-based OS, and every aspect of early semantics worked toward their final doom.

    For heaven’s sake, the world needs an enduring replacement for Microsoft Windows, as Microsoft drops all support for NT (which is NT through non-RT Win8 remember). As even cheapo phones have more power than desktop PCs from the end of the last century, why can’t all modern computer devices be given a sane, free, ‘vanilla’ OS on which the fancy stuff can run as a pure application? This Linux based OS needs to focus on everything that made Windows (once) great, especially a sane, universal approach to device drivers (which I appreciate tend to be binary blobs on a SoC computer).

    Surely the Firefox OS project should see itself as competing with Android. On the phone, Android will be a no brainer, even with the cheapest phones. The real fight is for a generic replacement of Windows, as Microsoft and Apple withdraw from this marketplace fully (in favour of subscription and service based software concepts). No flavour of ordinary Linux can get the job done. Chrome OS is dead in the water.

    The fight is to be the future OS on generic laptops, generic PCs, generic gaming computers. The free OS with excellent drivers, and brilliant library support for GUI, audio, visual and other sophisticated functions. Let the OS be the OS… let the shell provide shell functions and let the apps decide on their own look-n-feel.

    Who am I kidding? It is easier for Mozilla to attract people who want to work on irrelevant high-fashion here-today-gone-tomorrow rubbish than to find people who comprehend the real enduring needs of the marketplace. Android is everywhere because it is both a true OS AND then a fashion platform for current styles of user-interface. Google fully intends to make Android a general OS that can replace windows (within 2 years) just as Apple and Microsoft intend to withdraw from the general OS business as quickly as possible.

    A small window exists that might allow Mozilla to preempt Google, but no part of Mozilla is professional enough to get this fact, or exploit it. God, Valve must be gagging for a partner to provide a free Linux-based OS for their non-MS-Windows gaming platform. This is the business Firefox OS should have been pitching for!

    1. Patryk Adamczyk wrote on :

      There were many reasons why we set out to create this type of OS. For v.1, our target audience is not the power user, nor desktop. What the future hold is still uncertain. Clearly you are passionate about technology and what we are doing, I strongly encourage you to use this passion to either contribute to what we’re doing or fork / port gecko to desktop. Please visit our wiki / github or IRC and start hacking… https://wiki.mozilla.org/B2G/Hacking

  21. Mirek2 wrote on :

    You need to redesign the lock screen, as it violates Apple’s patent: dragging something across a predefined path to unlock a device.

    Google has circumvented this by not having a predefined path, letting the user drag the lock icon freely. Google has a patent on this, but, given Google’s history, there’s little risk of patent litigation (at least compared to Apple).

  22. fvsch wrote on ::

    Great work here. I really look forward to Firefox OS and hope I’ll be able to replace my old Android phone with a simple smartphone running Firefox OS sometime in 2013. Would be fun to design+develop a small app for that platform too.

    Re. the design, I think it’s great, “simple” and beautiful, well thought-out but not as drastic as Metro (sorry, Win8-style). Some good design principles here. I’m not a fan of the round app icons, and the custom designs for apps that don’t use the main design guidelines (mostly the clock and calculator) seem a bit crude; perhaps they didn’t receive the same level of attention – and rightly so, since it’s more important to get the reusable stuff right. Anyway, keep up the good work. :)

    In the short term I guess Firefox OS can become a compelling option for people who only want basic smartphone features, not the full iOS/Android library of specialized apps. In the long term, well we’ll see how it goes.

  23. Vascro wrote on :

    I think the design would look nicer if you used the matte look instead of glossy. I don’t know about other people, but everyone is trying to look glossy nowadays to show “newness” and whatnot, but matte is a really nice look too, maybe have that in settings or something? Other than that, the OS looks great and I can’t wait to get my hands on it.

    1. Patryk Adamczyk wrote on :

      This is something we’re still experimenting with…

  24. Tal Tarablus wrote on :

    So basicly its based on the same elements Windows Phone is based on?

    1. Patryk Adamczyk wrote on :

      You mean based on classic swiss design elements? Which were an inspiration to a previous OS Peter and myself designed before Windows Phone existed.

      1. Dennis Lindkvist wrote on :

        Sure :) … Windows Phone OS is more likly inspired by Zune ;)

  25. UnknownCommenter wrote on :

    This looks really good! I am a fan of the circle icons and it overall looks quite clean. I hope this can get ported over to android phones so I can use it!

    Great work guys, real exited!

  26. John Kneeland wrote on :

    This is simply gorgeous. You can see that this has been a labor of love (and considerable intelligence and talent too! :) )

    The future of HTML5 and an open web is bright, thanks to you great Mozillans. I can’t wait to see the final products!

  27. hmmmm wrote on :

    I have personally been annoyed by the distractions of transitions and the empty faux feeling of skeumorphism ever since the first iPhone release. Hated it, in fact. So, if the Mozilla design aesthetic is to minimize transitions and “skeuomorphic … graphic effects as they are deemed a distraction” – a direction which I applaud whole-heartedly – how can you say you’re promoting the the spirit of that aesthetic when your website performs a flashy, distracting time-wasting reshaping animation every time I resize the page? Just wondering what I’m missing here…

    1. Patryk Adamczyk wrote on :

      I can only speak for UX on products.

  28. David Poninski wrote on ::

    Awesome stuff! The circle icons are questionable but square has become stale so it’s nice to see a new approach. The only think I think could be improved upon the messages UI. It doesn’t seem to match the rest and it’s not aesthetically pleasing. Personally I would look at integrating some of the calendar agenda view into messages with adding the color bar next to the message from each person. I think that would make it cleaner and add a unique flavor to it. Then if you were to hold down the text it would slide over to show the select box to do your editing. It would also leave room for an avatar next to the color bar if that was a road you wanted to test out.

  29. Techiy wrote on ::

    I would suggest the most frequency used action buttons being placed near to the bottom to cater my short fingers :)

  30. Anon wrote on :

    Skeuomorphism in UI design: Recently there was a article on internet about this & I tend to agree with it, even though I am from old era. Now a days children have never seen the old phone or calculator or radio. It makes sense for me, but children really cannot connect with it. The cog-wheel icon for settings makes my son think of bi-cycle. He doesn’t have a clue, as to why that icon represents settings.

    1. Patryk Adamczyk wrote on :

      I do agree with you in part. But design and products flow in cycles. You can see this in other products especially photography, retro camera designs, and even an increased consumption of film among digital camera owners. Also I am confident that smart phones are not allowed during exams in many schools, kids still have to use traditional calculators. Without those stylist tackle features most apps would just be a keyboard and an input field, we wanted to infuse them with some character.

      As far as the cog wheel, settings has become synonymous with a gear / cog wheel in pretty much every OS.

      Another thing to consider is the audience, most of what you’re saying is true, but exclusive to the minority of the world’s population.

  31. Sid wrote on ::

    The apps on home screen, especially Messages and Calculator, don’t look good with round icons. Will there be a mix of round icons and Win8 like tiles? I don’t think round icons suit for all, or maybe it is just me.

    But Firefox OS is THE OS that you can trust and the version 1 is just awesome!

    1. Patryk Adamczyk wrote on :

      Our aim for v.1 was to create a system, a uniform set that would work well together and with 3rd party apps. As soon as you start adding different plated shapes, the system begins to break. We have reworked messages several times, and likely will still tweak it. Calculator was a VERY late addition (a few days before I made this presentation), so it will get reworked before our gold build, I am sure.

  32. LB wrote on :

    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!

    1. Patryk Adamczyk wrote on :

      I’ve lived on WebOS a few years back and our platform is definitely faster on similar hardware. As far as the browser goes, you may have noticed we recently updated Firefox for Android, nothing short of a complete redesign front and back end. http://www.mozilla.org/en-US/mobile/ Its competitive with Chrome on 4.X and on older 2.X Android hardware its by far your most complete (feature + performance) choice.

  33. Caspy7 wrote on :

    Having only used only one mobile UI I don’t feel that I have a great breadth of experience in mobile UX, but I complement you guys on a thought-through and consistent design.

    I did want to say that I’m not a fan of the clock for these reasons:
    – I tend to set wake up alarms at night – in the dark. This looks quite bright and would seem like a spotlight.
    – I personally get light-sensitive very frequently and the above actually hurts.
    – Lack of digital time display. I’m a fairly intelligent adult, but all my life I’ve struggled with reading analog clocks. With enough time I can figure out the time, but not nearly as quick as a glance at a digital display. (Because of the work I usually just ignore analog clocks unless I really need one.)

    1. Patryk Adamczyk wrote on :

      There is a digital display option. And we are working on a darker version for the same reasons you outlined.

  34. Ash wrote on ::

    Very cool, I can’t wait to get my greasy fingers on a real live Firefox phone.

    Curious what kind of work has been put into notifications? I know Android has generally had really good (I’d say verging on too much) notification handling, and iOS has traditionally had bad/no real notification support… is there a plan for Firefox?

    1. Patryk Adamczyk wrote on :

      We do have a notification system which revolves around the status bar, is more robust than most other v.1 OS releases… but its still v.1 so the focus has been on core functionality.

  35. Gorgone Zola wrote on :

    > The user presses the menu button on the top left hand corner <

    This sounds like a nightmare. Why are you placing a UI element that important at the most hard to reach corner of the screen. This means the user needs a second hand to access the app menus? Bad idea. Imho.

    But overall, very very nice!

    1. Patryk Adamczyk wrote on :

      Yes agreed. But we did design it with a form factor in mind in which this would not be an issue for (most) users.

  36. Enrique Álex wrote on :

    Nice mix of iOS and Windows Phone ¬¬
    Guys there’s nothing new here!

  37. Gorgone Zola wrote on :

    Which form factor would that be? Smart phones? If so, it is an issue for most people with thumbs <10cm ;-)

    Seriously, I think this is not a good idea. It is really hard to reach for most people. Can you please explain in more detail why its up there? Same goes for the browser address bar and other design elements. Why are they located on top of the screen, not at the bottom or something?

  38. Toma wrote on ::

    The outgoing call screen looks amazing.

    I would have preferred you use blue as the primary colour and orange as the highlight colour. I also don’t like the choice to use circular icons. Something about them just looks and feels odd. Being distinctive is a business decision, not a UX one.

    Otherwise, I love that you guys have a clear and distinct design philosophy.

  39. Rodislav wrote on ::

    Hi, some concerns

    – use more swype, most of time users don’t use action buttons
    – that leads to – please make action buttons bigger, because you can hide them, so when they appear, they can be big!

    – don’t waste space, circular icons looks – somewhat ok, but you loose space
    – make different icons, try to see the world from point of view of armies of bad designers who make shitty icons, and try to make something to avoid bad looking (symbian is the perfect example)
    – teach galleries to understand different sizes and format of images, videos, etc

    hire some advanced flash developers, they know what I’m talking about!

  40. Alexander wrote on :

    Looking great so far!

    Two things in the Mail app don’t work for me (from a user perspective), though:
    – The pen button means “Compose new mail”, I guess. But what does the “+” do, then? Confusing.
    – The truncated contact photos make me want to swipe to the left to reveal the full image. (The menu pushing the app partially to the right seems to imply that this is possible.)

    Thanks for the preview.

    1. Patryk Adamczyk wrote on :

      “+” always means, in this case new message.
      “pen” means edit.

      But yes its confusing specifically in this case, recently we reworked those icons for that reason.

  41. DL wrote on :

    Hi there!
    This is amazing work you done it .It looks very nice.
    Is it possible to make a variety of different layouts and icons so the users could choose its own preference ?That would be awesome.And could it be possible to show icons from the angle ?

    Keep a amazing work and hope to use It very soon.

  42. Jason Sexton wrote on ::

    I wish there were a way for people to rate the images that you have posted. If so, you would be able to get a better idea of the public’s reception to different aspects of the design, and maybe comment on photo/screenshot specifics.

    I love the font, it adds a personality that Helvectica doesn’t have.

    The callender/”Date Select” looks great in terms of the transparency and the use of blue. I wish you guys had a way to bring some sort of sync feature between Thunderbird/Lightning and a mobile rendidtion of them. That would allow you to have three (Browser/Email/Callender) major players on the homescreen that users can already relate to.

    The call screen looks amazing. I wish I already had it for my android phone.

    I hope that Persona takes off to the point where it’s a safer alternative to “Sign up using Facebook” and you can integrate this into a popup feature within applications.

    The menu button with three lines looks to generic. It looks a lot like the options button that Google Chrome recently added.

    I know the circle icons are controversial, but it just reminds me of an android launcher that’s cropped the icons into a shape. It gives it a gemmicky feel, but I can’t give an honest opinion about it without having gotten used to it. We like in a square world, so most users are biased in this sense.

    Overall, it’s great start. There are tons of software applications like Thunderbird, the Lightning add-on, and Firefox have to offer to the mobile environment. I’m excited to see where it will be when it comes time to get my next phone.

  43. Francisco wrote on :

    Looks great, would be good to have the option to leave the icons without the plate, or to have multiple options: Square, circle or none plate behind the icon.

  44. Christopher wrote on :

    Looks nice. Except for the round icons. I would also much prefer square buttons/icons with slightly rounded corners.
    I hope there will be icon themes! If yes this won’t be a problem.

  45. Mark wrote on :

    This looks great! I’m very much looking forward to trying it out :-)

  46. Namith wrote on :

    love the concept and overall design.
    The round icons, not so much.
    In general I think circles can be made to look nice inside squares, squares however take more effort to make them look nice inside circles. You can see it in app. grid, Gallery, Marketplace and calender icons just don’t look right.

  47. bastpt wrote on :

    It’s really amazing. Keep it up! Don’t leave the project as happened to MeeGo. Looking forward to see the Firefox OS in action :-) All the best!

  48. Marko wrote on :

    I’m really liking where Firefox OS is going especially the layers. Hopefully I’ll be able to port this to my Galaxy Nexus if the OS will incorporate some type of software buttons or even better, gestures which I find more satisfying (Notification bar moved to the bottom and making it thicker to add a home button in the center. tap it to go home, hold it down or swipe up from it to enter multitasking, tap or swipe up from the time or notification to open the notification shade or layer).

    Just like the other commenters, not really liking the skeumorphism in the calculator or radio and the brightness and faux reflection of the app icons.

    Some things that weren’t mention that personally bugged me (nit picking) was how some of action icons looked busy and how the header navigation was so thick when compared to the tool bar (looked vertically cramped in the music app). I feel like the thicker header nav is excess chrome and that it would take up valuable screen real estate, especially when holding the phone sideways.

    I am very optimistic where Firefox Os is going and would much rather be using it than anything else!

    1. Patryk Adamczyk wrote on :

      Re Header.
      The header is large as it often contains the most used button in the OS… “BACK”, it also contains cancel / close. So we wanted to make sure the hit target was generous. Also in several apps you’ll see action buttons on the right.
      As far as the toolbar, we may actually increase the height, its about 5 px shorter than I’d want it to be for optimal – minimum touch size. For v.1 horizontal orientation is VERY limited, only a handful of apps support it, they will likely get a revised layout with a thinner header.

  49. Przemek wrote on :

    Great work Patryk! I know Peter and you work really hard on this project and you pulled it off in a very limited amount of time. I like the insight into all the design and I really like the grid layout work in your media apps :)

    1. Patryk Adamczyk wrote on :

      Thanks! And good luck with all the BlackBerry 10 work! Can’t wait to use it!

  50. Pingback from Has Firefox OS A Good Chance Against The Big Smartphone Platforms from Google and Apple? | Y.I Readings on ::

    […] Overall, challenges are there to excite people and to be overcome. The Mozilla Firefox OS effort is as encouraging as it looks daunting. A great idea to enable largely web technology-powered devices. Maybe the time is right and technology (soon) mature enough to let come to fruition what Patryk Adamczyk talked about at the MozCamp Warsaw with a bunch of much interesting pictures: Design principles behind Firefox OS user experience [17]. […]

More comments:1 2