Firewall Zones UI Design

Over the past couple of months I have been working with Thomas Woerner on some enhancements to and new UI for Fedora’s firewall controls. These additions are part of Thomas’s work in adding the concept of firewall ‘zones’ to Fedora to simplify firewall configuration and help make it easier for folks to keep their computers safe.

Today, we provide users with a lot of control over their firewall in the system-config-firewall, but the problem with our current model is that with a laptop, you may connect to multiple different networks during the course of the day, and firewall rules that make sense for one network might not make much sense or may even be dangerous on another network. An example of this is if you’re sitting at home or at the office, you can pretty much trust the other systems on your network (well, at least if you’re at my office where we don’t have Windows systems 😉 ), so you might want to have your httpd service running if you’re a web developer and want to show others working links to web application code running on your laptop. However, when you’re at a coffeeshop with other systems on the network that you don’t know much about, you might not want to be serving up a web application that’s in development and not fully hardened / tested for security flaws since that would leave your system open to attack. Right now, though, to handle your location changes from a UI perspective, you’d have to open up system-config-firewall manually every time you changed networks and set up every little bit of configuration you’d like for that network, every time. There’s no concept of saving profiles that you can recall later (see screenshot below).

With the firewall zones concept, we’ll pre-define a set of generally useful zones (‘Home’, ‘Work’, ‘Public’, etc.) and configure them out-of-the-box to have sane default settings for each particular type of network. We’ll also allow you to tweak these settings to your personal taste and create new, additional zones to accommodate your particular network environments. Finally, we’ll let you recall these just by selecting a profile when you’re on a given network, we’ll let you set a default zone for networks that are new to your system, and hopefully will eventually allow you to set a default on a per-network basis so you don’t have to manually set which firewall zone you want to use every time you connect to a given network.
That’s the basic concept behind firewall zones.

Managing Firewall Zones

So Thomas first came to me, gave me some of the back story above, and described the components of this application he would need UI mockups for (my notes from that conversation):

• A dialog for creating / editing / deleting firewall zones.
• An applet which:
  • Gave you a quick way to jump to the Firewall Zone dialog above
  • Provided a panic mode functionality to completely wall the computer off from the network in case of a suspected attack
  • An ‘About’ item where you could get more information about the applet

Since I didn’t have a lot of time at the time, I proposed doing the mockup sketches with pen and paper and Thomas seemed cool with that, so you’re going to see my scribblin’ by hand below rather than the usual Inkscape-designed artifacts. (I used the Gimp Difference of Gaussians trick that Garrett taught me a while back to clean these up; they were originally on yellow ruled legal pads. Cool, right?)

Round 1: First mockups

I designed the applet in the context of the GNOME 3 panel. I know yet another applet won’t be popular. Hopefully it won’t be needed long-term; I think it would be nice to have one applet icon for all security & trouble-related items (ABRT, SELinux alerts, Firewall, etc.) so those things, as necessary during crisis situations, are readily accessible but cumulatively don’t land grab a larger swath of real estate on-screen than is really called for given the infrequency of crisis situations. We’re sadly not there yet though, and needed a way to access the dialog, so we thought an applet would serve the purpose for now. (It wouldn’t be unreasonable to add it to the NetworkManager applet, but since that applet is already a bit crowded, it’s probably not the best approach.)
The applet is extremely simple, as you can see in the mockup above: it tells you what your current firewall zone is, and gives you a button to press to open up the full Firewall Zones dialog. The ‘About’ item Thomas requested I don’t think is really necessary – we could have an about in the full dialog if needed.
I wasn’t really sure about the panic mode use case at this point in time, so I dropped it from this first mockup attempt.
As far as the dialog itself goes, in this first sketch, the idea was to drive the UI from the zones themselves, and across services, ports, and interfaces, offer notebook tabs to customize each zone. For example: I want to stream audio from my media device at home when I’m at home. That requires UPNP access, so I’ll go to this dialog, select my home zone, and go to the port tab to open up the UPNP port while I’m at home. Perhaps I’ll set my coffeeshop zone to disable the UPNP port since my home media device isn’t available in the coffeeshop and I don’t want that open port sitting around as a possible way for someone to attack my system.

Round 2: Applet + Dialog Mockups, Improved

Multiple network interface support: the assignments tab

After looking over my first set of mockups, Thomas pointed out one fatal flaw – a system may have multiple network interfaces (especially in a server context), and those network interfaces may need to be set to different firewall zones. Maybe one example of this is a publicly-facing webserver with one network interface that openly serves content out to the public, and another network interface that faces its internal network that has a very locked-down firewall configuration to protect the internal network from outside attack. (For example, this web server may need to get software updates and patches from the internal network, and its firewall may be configured so that no network traffic can flow from the web server into the internal network; only from the internal network out to the web server.)
So we added a top-level ‘Assignments’ tab that provides a list of the network interfaces present on the system on the left, and per network interface you can turn the firewall off or on and assign a particular firewall zone to it on the right.

Minor improvements to the zones tab

The ‘Zones’ tab is essentially the design from round 1. However, more complex configuration might be needed (for example, a port or service we don’t know about), so there is now a ‘custom’ button in the lower right that could work similarly to the current ‘other ports’ dialog in system-config-firewall – you can set up a custom service or port to include in your firewall rules.

Updating applet to accommodate multiple network connections and add a panic button

Finally, the applet dialog has gotten a bit beefier after the multiple network interface use case discussion we had. It’s modeled very much after NetworkManager’s applet. Each network interface / connection is listed alongside its current firewall zone, so at a glance you can see the firewall status for all of your network interfaces & connections. Below this list is a separator that provides you the link to the full firewall zones dialog, as well as the previously-discussed panic button to block a suspected network attack.

Setting a default zone

Initial designs and discussion

So last week Thomas came back to me after he’d put together some glade mockups. He was afraid the initial design (see screenshot above) that he’d done up in glade was overly complicated, and there must be a more simple / elegant way to offer a default firewall zone for users. This would be the default zone unknown / new networks would be assigned; it would appear during firstboot after installation since it would be nice to know before you start up your system how you would like the firewall to treat networks as they are encountered.
After a bit of discussion on the screen, I came up with the following goals for it:

• Enable users to easily select their default network zone.
• Provide users a basic understanding of what the default network zone is and what the implications of selecting it are.
• Help users make an informed choice as to which zone might work best for them, out of what may potentially be a long list.

While this initial glade mockup makes it appear as if there may be four ‘buckets’ or ‘categories’ of firewall zones because of the four vertical sections of buttons, there weren’t, really, and visually it’s a bit of a toss-up whether it’s intentional or not because the alignment of the buttons is a bit haphazard within the rows. There were no titles or names or descriptions for the various categories. Also, high vs. low wasn’t labeled – it actually denotes the level of trust you’re placing in your network, not the level of security you’re getting out of the choice! Finally, each zone has a simple name without any kind of description to help the user figure out which one would meet their needs – even if they decided they wanted to be somewhere in the middle in terms of security & trust level, picking a choice across the columns of the row they selected would be difficult without more information.

So over IRC we talked through an alternate way of arranging the screen, where we created four distinct buckets (‘Very high trust,’ ‘High trust’, ‘Medium trust’, ‘Low trust’) and had the user select the trust level they felt appropriate first, then within the trust level, use the drop down to select the particular zone in that level. While I think the explicit categorization helped a little, this arrangement combines radio buttons and dropdowns, which I think physically is a little clunky. It also suffers the same issue as the first mockup – we’re limited to only a simple label for distinguishing between zones within a category. High/low is also not really clear – I still felt as if someone might assume it’s security level, not trust level.

More detailed descriptions

So I came up with a quick Inkscape mockup showing what the dialog might look like if we provided some more details on each individual zone. The name’s in the upper left of each list entry, the description below that, and the general category in the upper right. The main way this UI works is you have one list of all of the zones available, and you could filter it down using the dropdown in the upper right to only see zones with the security level you’re interested in and compare them within that category using the fuller description.
The weakness of this mockup is that it’s geared for a large set of zones to choose from. However, users won’t have a large initial set of zones, and it could be confusing when they filter and only see one zone to choose from unless we default to showing all available zones in the filter dropdown. Also, what if you wanted to compare across ‘High’ and ‘Very high’ security zones? You couldn’t unless you viewed all zones, including medium and low.

So then we tried this toggle idea. You’ll see a listing of the various categories along the top of the list, and you can click once to see those zones included in the list below, click again to ‘turn off’ that category. After doing this mockup though, I definitely felt like it needed more thinking. Is this on/off button-based filtering really common enough for users to follow? I liked that we could set the list to, by default, display the zones we felt most useful for basic users but still enable more advanced users to get to what they needed, but I’m not sure as a UI pattern it’s common enough to be intuitive.
Thankfully Thomas did some brainstorming on his own after I sent him this mockup, and came up with this glade design:

While interacting with this glade file felt more natural than the button-based filtering one before it, the problem is that spreading the categories across notebook tabs means you’ll have one zone list per tab, and there is no unified list. So if I pick a zone in the first tab, then a different one in the second tab – which zone is the selected zone? It’s an instant apply dialog, sure, so some folks would assume their last-selected zone is the one that’s actively selected. Alternatively, though, I think a different user might think they had to pick one zone per tab. We could work around this in the design by having some central (outside of the notebook tabs) indicator to say what the currently selected default zone is. It might make the screen more cluttered. Some more IRC discussion and thinking later, thankfully spurred by this design, and we came up with the next mockup…

The winner… so far?

This is kind of a rip-off of how the GNOME control center’s keyboard layout tab works. By default, you have the three zones that would be the most useful for desktop users to work with in a list. Whichever zone is highlighted is the selected zone. As you click on zones in the list, you get a full description of that zone in the pane on the right. Now, this makes it more difficult to compare across many zones, but I anticipate that many Fedora desktop users are just going to pick from the base set of three or so that we offer by default and not worry too much about the others. If you’d like to explore additional firewall zones, you can click the “+” button at the bottom of the list and select from others we’ve made available by default.
If this was a control center module, it would not have the ‘Choose selected zone’ button on the bottom-right, because it would be an instant-apply window. However, for firstboot it needs a button to progress forward (or backwards to the hub, as the case may be.)
(And now I see an inconsistency in the mockups 🙂 “Firewall Zone” in the window title, but “Network zone” in the dialog content!)

What do you think?

This is a little something Thomas and I have been working on over the past couple of months. Let us know what you think or if we missed anything!

Shameless plug

This is cool, right? Think you or someone you know could do this kind of design work and really enjoy it? We’re looking to hire a great interaction designer to work on projects like this, so if you or someone you know are interested, please apply!