Introducing The Layout

As engineers, I believe the way we approach a problem is as important as the code we write. This is especially relevant in the context of UI engineering where design is such a vital element.

Unfortunately, it seems quite hard to find good content about everything that happens around us and inside our heads when we are building user interfaces. This is what The Layout is about.

My intent is to create a space for high quality content discussing the principles, mindset, and practices that I believe shape the craft of UI engineering. It is meant to be a shared space with many voices—so, expect some awesome guest authors.

I’ve just posted the very first article, Mind the Gap. My plan is to publish a new article every other week-ish. For now, subscribe to the RSS feed or simply follow The Layout on Twitter or Google+ to get future updates.

I really hope you enjoy it!

Syndicated 2013-05-17 05:28:00 from Lucas Rocha

UI polishing in Firefox for Android

Last week, we did our very first topic-oriented hackathon focused on UI polishing bugs. The UI changes we’ve done will make a substantial difference in the experience of using Firefox on Android. Here are some of my favourite fixes and improvements.

Tabs

Details in the tabs UI can make a big difference UX-wise. We changed the tabs button icon (see image) to provide better affordance. The new icon also features a much cooler animation when tabs are added or removed.

Last but not least, we added a subtle parallax effect when you the open/close the tabs panel giving it a more fluid feel.

Address bar

As Wes has already reported, you now have the option to show URLs instead of page titles in the address bar. The domain highlight (see image) is a nice touch and gives us feature parity with Firefox on desktop.

The reader and stop buttons now have properly sized hit areas to avoid tapping other parts of the toolbar by mistake—a long overdue issue.

That’s not all

Reader Mode will get some nice style updates for serif fonts, doorhanger notifications now have a more polished animation, text selection handles have a more consistent style, favicons in the awesomescreen will look fancier, some visual glitches in the awesomescreen and toolbar were fixed, and more.

Not all these changes are in Nightly just yet but they will show up in the next days. Firefox 23 has everything to be my favourite release ever. Download and install our Nightly build on your Android and let us know what you think.

Syndicated 2013-04-29 14:15:05 from Lucas Rocha

Multi-part items in Smoothie

Smoothie makes it really easy to load ListView/GridView items asynchronously, off the UI thread. It handles all the complexity from gestures, threads, scrolling state, preloading, and view recycling behind a simple API.

Up until now, one of the biggest limitations of the Smoothie API has been the lack of proper support for multi-part items. What is a multi-part item? It’s a ListView/GridView item composed by multiple parts that have to be loaded asynchronously with different priorities as you scroll.

Classic example: a list of photos with items composed by the photo image and the author’s avatar—both loaded from the cloud. With the existing API,  Smoothie would force you to load the whole content of each item in one go. This means you were forced to load both the main photo image and the avatar image for each item before loading the next item in the list.

What if you wanted to start loading the main photo image of all visible items before loading their respective avatars? The photos are probably the content your users are actually interested in after all. That’s what the multi-part item support is about. It allows you to split the loading of each item into multiple asynchronous operations with different global priorities.

So, how would you implement the above example assigning higher priority to the main photo image over the avatar using Smoothie? Assuming you’re already familiar with Smoothie’s API, just follow these steps:

1. Override the getItemPartCount() method from ItemLoader. Return the number of parts the item in the given Adapter position has.
2. Handle the new itemPart argument accordingly in loadItemPartFromMemory(), loadItemPart(), and displayItemPart(). These methods will be called once for each item part.

The item parts will have indexes starting from zero. e.g. for items with 2 parts, the part indexes will be 0 and 1. The indexes also define the relative priority between parts. Smoothie will load the part with index 0 for all visible items before loading part with index 1.

Important note: I had to break the API backwards compatibility. If you don’t really need multi-part items, the only change you’ll have to make in your code is to subclass from SimpleItemLoader instead of ItemLoader. SimpleItemLoader is an ItemLoader specialized in single-part items that hides all the part-related bits from the API.

The updated documentation contains code samples and a more detailed overview of the new API. Grab the latest code while it’s hot. Feedback, bug reports, and patches are all very welcome as usual.

Syndicated 2013-04-22 11:51:24 from Lucas Rocha

Firefox for Android’s UI polishing Hackathon

We’ve been discussing the idea of doing periodic topic-oriented hackathons in the front-end team. The idea is simple: pick a topic—a specific part or aspect of the product—and have the whole team focused on it for a couple days. The goal is to bring substantial and fast improvements on specific areas.

As an initial experiment, we’ll be doing the first hackathon this week from Wednesday to Friday and we’re going to focus on UI polishing bugs—those UI papercuts that are not so prominent in isolation but, when fixed en masse, make a whole lot of difference.

It’s important to have a good list of bugs before we begin. So, you can start nominating Fennec bugs for the hackathon now by tagging them with “ui-hackathon”. We’ll cleanup this list and maybe prioritize them a bit during the planning session on the first day of the hackathon.

As usual, everyone is welcome to participate. You can help us by tagging bugs, or better yet, fixing them. Have a look at the wiki page for more details on the agenda.

Syndicated 2013-04-22 09:51:49 from Lucas Rocha

UI improvements in Firefox for Android

Now that we’ve landed all the major changes for our next UI iteration, it’s probably a good time to spread the word about it and get some more feedback.

The goals with these changes are: keeping a clear distinction between different types of tabs; making better use of the screen real estate on different form-factors and orientations; and being more compliant with Android’s design language. So, what’s new?

Tab types

With the introduction of private browsing support in Firefox 21—now in Aurora—came the need for a clear distinction between regular and private tabs. We’ve done two UI changes to accomplish that.

First of all, the tabs tray is now divided into sections for each type of tab—regular, private, and remote—so that you always keep things separate and organized. Furthermore, once you select a private tab, the main toolbar becomes dark as a clear sign that you’re in a different browsing mode.

Two-way tabs tray

We now use a horizontal scrolling tabs tray whenever it improves our use of the screen space. This is achieved with a TwoWayView—announced a few days ago.

On phones, the tabs tray is vertical in portrait mode and horizontal in landscape mode. On tablets, the tabs tray is a vertical scrolling side bar in landscape mode and a horizontal strip in portrait mode. Small tablets (7″ or so) now share the exact same tabs UI than large tablets.

Holo-ish

The Firefox UX team has been working on streamlining the Firefox UI across all platforms—both on desktop and mobile. The idea is that Firefox should feel like the same product wherever you use it. Finding the right balance between cross-platform design consistency and native platform compliance can be tricky but I think we’re getting there.

We’ve recently landed a new skin for Firefox for Android that is more aligned with Android’s Holo design language. Almost all textures and gradients were replaced by flat colors giving a much lighter feel to the browser. I love it!

All these UI changes are now available in the Nightly build. Give it a try and let us know what you think—ideally in form of bug reports!

Syndicated 2013-02-25 18:46:52 from Lucas Rocha