Visual Reboot of Firefox Mobile for Android

Patryk Adamczyk

27

Design is the Differentiator.

Firefox is a premium application with a strong and distinct brand. With a recent strong wave of competitive browsers, all with similar features; design and product identity has become the differentiator. When high performance and stability are expected, a smart user experience and an emotional connection to the brand is what drives users to use the product.

Firefox design is focused on a swift, direct mobile experience. Magazine like aesthetic, less emphasis on decoration with greater focus on content and the tools to ease its access. Forms are rendered with a fine balance of organic and geometric shapes to further echo the Firefox brand messaging. Controls and layout are minimal, with emphasis on function. The aesthetic design promotes interaction with clear, direct iconography, rendered with friendly and efficient forms.

The visual design has been carefully crafted to communicate Firefox’s character subtly through a tasteful aesthetic which accents the native design language. However there are areas of the Firefox aesthetic which were designed to further maintain a unique feel.

 New Start Page & Interface Design

  • Colourful layout with large thumbnails (if available).
  • Unified curved tab design.
  • Awesome Screen data integrated into the start page.

 

Visual Design Differentiators.

 

Tab Shape

Fluid and organic, unique to Firefox.

 

Awesome Screen

Unique to the Firefox experience.

 

Orange Focus Highlight

  • Speaks strongly to the Firefox brand.
  • Future plan includes the transitioning of all native (blue in Ice Cream Sandwich) highlights to our Firefox orange.

 

Consistency and Polish.

Through iteration and testing we have refined the interaction patterns for both phone and tablet use. Resulting in a unified Firefox experience across the Firefox landscape while being conscious of user specific needs on each platform and form factor.

The visual design first seen in the refresh of Firefox Mobile on Android will evolve into the unified style spanning across all devices (phones, tablets, tablet PCs) and on many platforms. Resulting in a purpose-built UI, optimized for portrait and landscape orientations on phones and tablets; while still maintaining a quality and consistent user experience.

 

Visual Elements.

Layering

As an advanced web browser, Firefox gives the user various tools and options. These options are hidden behind the web content, invoked with a gesture (swipe). The rendering of these panels is darker appearing as if they are deeper in the Z axis, beneath the core content. The transitions simulate the movement of the view port to reveal more content.

 

Colour

On Android often instances of colour inconsistency exist between the flavours of Android. On many devices you’ll see at least 2 colours used for focus states. On Android 4.x devices you’ll see blue and orange (for legacy apps) while on skinned devices running Android 2.3.X, the user will experience the manufacturer’s brand colour and the native Gingerbread orange.

Aim is for a cohesive user experience on Firefox properties, leading with design that is unique to Firefox and doesn’t depend on manufacturer or Google Android skinning while maintaining familiar interaction elements.

A desaturated blue (silver) acts great as a field colour both for the Firefox logo and various text / media content. Use of a saturated blue over a gray allows for a friendlier experience. The hint of blue in the grays acts as a great high contrast complementary colour when used with the orange highlight.

Texture

Texture / noise has been introduced into the backgrounds for both greater aesthetic interest and reducing banding found in subtle gradients on some lower colour depth screens.

 

Hints at Interaction.

In a touch interface it is expected that everything can be interacted with, but good user experience should guide interaction and not promote trial and error pecking. With subtle lighting effects, touch elements will appear closer to the user on the Z axis and appear more pressable than other items. The reverse effect is applied to input fields, subtly carved into the chrome, hinting that the form can be filled; with text in this case.

Size

Size and spacing is based on physical measurements to optimize for scalability between various form factors. Due to larger real estate tablet can afford for larger touch targets and more easily accessible actions.

Phones

Bar Height: 7 mm
Input Field Height: 5 mm
Button Widths: 5 mm
Input Field Text Height: 7 pt

Tablets

Bar Height: 9 mm
Input Field Height: 7 mm
Button Widths: 9 mm
Input Field Text Height: 9 pt

Forms

All shapes and icons are rendered to have inviting feel to further engage the user:

  • Forms are rendered with soft edges
  • Corners possess a small radius
  • Objects possess realistic shading

Pressable Items

Any item that manipulates chrome should have some 3D styling, rising above the background. This can be accomplished with a drop shadow and / or bevel.

Input Fields

Any item that acts like an input field should be inset in the surface that it is set upon. The design’s aim is to invite the user to interact with the control but not feel it will work like a button since it doesn’t appear that it can be pressed down.

27 responses

Post a comment

  1. ferongr wrote on :

    The new UI is sleek, but what greatly strains me during using it is that it’s designed for right-handed users. Lefties are gonna have a hard time.

    For an accessibility conscious organization like Mozilla, such a thing is a big oversight.

    Reply

    1. Patryk Adamczyk wrote on :

      It is not an oversight. We were feature limited for this large update. We are working on some great features to improve accessibility as well as optimization for left handed users for a future release.

      Reply

  2. Edd Turtle wrote on ::

    Great Update! Brilliantly refined and smoother (and surprisingly faster!)

    Reply

  3. Danny Arar wrote on ::

    Great Article Pat, loving the new browser, it definitely speaks to the Mozilla brand in terms of Visual language and you did a very good job at combining it with the look and feel of the Android OS …I would have loved to see some different iterations in order to take a look at the creative process :) But none the less you’ve settled for a style (the radius around the input field and tabs) I have not seen a lot so far which is great!

    Reply

    1. Patryk Adamczyk wrote on :

      Good feedback, we’ll definitely add iterations in future posts.

      Reply

  4. Zeeshan wrote on :

    I’m sure you guys can make a robot browser or something similar like siri of iphone, a browser that not only for browsing it can do many things it will rock on android. current rating of firefox on play store is really low but its best browser for pc i hope it will be best on android too.

    Reply

  5. Jack wrote on :

    Great redesign Patryk – have been using it for a while now on the Nightlies.

    Two questions if I may:

    (1) Why is the URL Bar so high (7mm).
    Real estate is at a premium and I feel that it takes up too much space.

    Is there anyway we can hide it?

    (2) Can we hide the status bar?
    This is something that other browsers offer and again would maximise what little space we have on our screens

    (3) Why does the add new tab button have to be hidden in the tab drop down menu?
    I think it takes that extra tap to open a new tab that could be avoided if the + sign was always visible

    Many thanks for your help!

    Reply

    1. Patryk Adamczyk wrote on :

      (1) Why is the URL Bar so high (7mm).
      [PA] 7mm is the acceptable minimum touch height for most users. We couldn’t enlarge the touch targets as they would spill into the view port. Also see answer below for #2.

      (2) Can we hide the status bar?
      [PA] We are working on it :) Couldn’t get it in for v.1 of the refresh.

      (3) Why does the add new tab button have to be hidden in the tab drop down menu?
      We optimized for most users, who frequently don’t implicitly create new blank tabs. Currently most mobile (hand held) users, use the browser for fact checking (1 tab) But we are always improving / optimizing the UI based on our user feedback and usage.

      Reply

  6. vincent wrote on :

    and Tablet?

    Reply

    1. Patryk Adamczyk wrote on :

      Coming in a future release :)

      Reply

  7. Pingback from Mozilla Shows Off New Firefox For Android Design | WebProNews on ::

    [...] was just a few slides without any kind of explanation behind the design itself. Patryk Adamczyk has more information on the new design over at the Mozilla UX blog. He says that the new design is “focused on a swift, direct [...]

    Reply

  8. duola wrote on :

    I want a full-screen function without addons.

    Reply

  9. Björn Lindahl wrote on ::

    I really like the new Firefox but some things is a bit annoying.

    I’d prefer the close tab button (the X) in tab overview to be on the right side. Using a larger screen it’s really to far to reach it with one hand.

    It would be even nicer if it would be possible to swipe away the tabs from the overview in order to close them, as the task manager in Android do it.

    The swipe left/right to switch to another tab in Chrome is really convenient and maybe something you should consider to include in future releases as well.

    Reply

  10. Kosie du Buisson wrote on :

    I like the design, but there is one part of it that really doesn’t tie in with the rest … the Awesome Screen. It doesn’t share any design elements with the rest of the interface, and as a result it looks completely out of place. In fact, the Awesome Screen really looks like it could be a different app all together … the search/URL input has a completely different appearance and style to the URL bar … even the color scheme is different.

    If it wasn’t for the Awesome Screen, I’d say that the visual reboot is great … but considering how the Awesome Screen looks, it feels like there is something substantial that has been overlooked.

    Reply

    1. Patryk Adamczyk wrote on :

      We used the same colour scheme in the awesome screen, but I understand your concerns. We are addressing this in a future release let me assure you :)

      Reply

  11. SuperPutte wrote on :

    Great design, and it’s very speedy too :)

    However, I miss the following:
    1. an Exit-button somewhere on the screen, easy accessible
    2. an option to keep the screen alive all the time while browsing
    3. the memory/cpu usage is high – that drains the battery….
    4. speed-dial on homepage
    5. a working adblock-addon (not your department, I know…)

    Keep up the good work :)

    Reply

  12. www.romeapartments.com wrote on ::

    I do believe all the ideas you have offered on your post. They’re really convincing and will certainly work. Still, the posts are too short for starters. May you please prolong them a little from next time? Thank you for the post.

    Reply

  13. C. Scott Ananian wrote on ::

    How do I turn off the orange highlight? My app has colored buttons for kids to press, and it’s very annoying that the buttons turn orange (and stay orange) when they are pressed…

    Reply

    1. Patryk Adamczyk wrote on :

      Currently you can’t its hardcoded, but we are working on making it more neutral in an upcoming release.

      Reply

  14. Adevarul wrote on :

    Just installed Fire Fox for Android. Top sites screen is home and there is no way to remove the entire (outdated) list of “top sites” which aren’t my top site picks and I don’t want them there even if they were. Since there is no way to delete the entire TOP SITE screen I did the next best thing and uninstalled Fire Fox. Back to Google browser for me. Extremely disgusted since I’m a long time FF user. It’s been my default browser on my laptop for years.

    Reply

    1. Patryk Adamczyk wrote on :

      Unfortunately, (currently as of v.15) you can not customize the Top Sites they are generated by a frequent use algorithm. However we do release frequently and customization of the start screen has been a hot request. So you’ll see it as a feature in an upcoming release.

      Reply

  15. Bushra Tabassum wrote on :

    Thanks for these useful information and tips. Are these features of Firefox available for Symbian?

    Reply

    1. Patryk Adamczyk wrote on :

      Thanks for the feedback, unfortunately they are not available for Symbian at this point.

      Reply

  16. Devacharya wrote on ::

    I think good update for Firefox. A new UI is very attractive and interesting. Look and feel is so nice..
    Thanks for sharing us..

    Reply

  17. sachi wrote on :

    hi,
    I think this is a very good article and good updets.

    Reply

  18. abbas wrote on :

    what is the requirement of firefox os?

    Reply

    1. Patryk Adamczyk wrote on :

      For the simulator > Firefox the browser in a desktop environment.
      For a mobile phone we recommend 800MHz CPU with 256 MB of Ram and a 320×480 display.

      Reply

Post Your Comment