This post will be about ways to improve Mailman’s interface.
Mailman is a popular tool, used by organizations to manage mailing lists. I know that the Mailman developers have been working on the UI for Mailman 3.0 for quite a while now. And I know that Máirín Duffy has lots of neat ideas for new mailing list features. But let’s take a step back and wonder: what’s wrong with Mailman’s current UI?
Well, lots. Many people have pointed out Mailman’s weaknesses, like the fact that passwords are sent in cleartext. Or that it kind of uses accounts, but not really, and as a result you sometimes need to log in, sometimes you don’t and other times you can just log in without a password. But in this post I’ll leave the technical aspects and interaction design mostly for what they are. Instead, let’s look at the UI design of two of Mailman’s pages. Most of it will be unproductive complaining, but the idea is to learn from it so we can prevent similar problems in the future.
The goal is simple: we want to make getting information about mailing lists quick and painless. That should be a reasonable goal, since supplying mailing list info is a pretty basic task for mailing list software.
To start with, let’s visit MediaGoblin’s mailing list page and go over the different elements from top to bottom. The bright blue bar with the text “lists.mediagoblin.org Mailing Lists” is the title. Losing the URL and the needless capilization to make it read “MediaGoblin mailing lists” would be slightly better, but that’s a nitpick.
Moving downwards, we come across a whole bunch of text:
Firstly, we’ve got “Welcome!”. Which is very kind, but not necessary at all. Actually, it’s worse than unnecessary. Nine out of ten homepages since the dawn of time have used “Welcome!”, which makes it not only feel less sincere but also slightly annoying. Let’s drop it.
After that: “Below is a listing of all the public mailing lists on lists.mediagoblin.org. Click on a list name to get more information about the list, or to subscribe, unsubscribe, and change the preferences on your subscription.” Translation: “Here are all the mailing lists. Click on them for more info or to do something with them.” This should not be explained explicitly. If it needs to be, then the UI has failed. UI’s should be as self-explanatory as possible, and these two basic things can definitely explain themselves.
“To visit the general information page for an unadvertised list, open a URL similar to this one, but with a ‘/’ and the list name appended.” I don’t know what this is about, to be honest. From what I understand about unadvertised lists, you should not advertise them. More importantly, instructing users to manually edit the address is a big no no.
“List administrators, you can visit the list admin overview page to find the management interface for your list.” Alright, cool. But a link saying “Admin page” would work just as well. Admins would know it’s for them. Others would know it’s not for them.
Next: the table with the lists. It consists of two columns, each accompanied by a title explaining what’s in the column. Let’s count. We’ve got a title containing “Mailing Lists”. Additionally, we’ve got a piece of text explaining that this page does, in fact, contain mailing lists. And finally, we’ve got the actual list of mailing lists with a confirmation that these are the lists. Just one of these would do just fine. Let’s keep the title and ditch the rest.
It also says “Description” above the second column. Here’s a tip: if you have an element and put text right next to it, it’s pretty clear that that text relates to the element. Again, no need to explicitly mention that the descriptions are descriptions. If that’s not obvious, the descriptions are awful. And if a description is not available, no need to say “[no description available]”! Just leave it out.
Lastly, the footer, containing four images that link to the websites for Mailman, Python, GNU and Debian, respectively. These four are left-aligned in a table of four columns, which means the spacing doesn’t make any sense. And regardless of the width of your browser window, the Mailman and Python images always align with the two columns above. As a result, you might think that the Mailman image falls under the “List” column and the Python image somehow relates the the descriptions. They don’t. To be honest, I don’t agree with having these logos in the footer to begin with.
Now let’s take a look at the page as a whole. The things that will draw your attention: the title (that’s fine), the words “List” and “Description” (because they are sized exactly the same as the title), and the four images at the bottom (because they are the only illustrations on the page, but also because two of them use a bright red). That’s not what should happen at all. This page is used only to display the list of mailing lists. That is what should draw your eye when you reach this page. It should be the center of attention, because that’s the page’s main purpose.
So, I’ve got lots of complaints about this page. Let’s apply them and do a quick redesign. It could look something like this:
That’s really all that’s needed. Simple and to the point. This could easily fit on a mobile browser screen.
As you can see, I’ve also changed the style a bit. Mailman’s full name is actually GNU Mailman and it’s part of the GNU project. In typical GNU style, we are greeted with full-width body text that has no styling at all applied to it. You could call it minimalistic or spartan, but you could also call it unreadable and bland. Moreover, it makes it harder to identify as a Mailman page.
Back to the lists. If we click one of the links - let’s go with devel - we end up on the list page.
Interesting things:
Under “About devel” there’s a description, which curiously enough is not the same as the description on the previous page.
There’s a link to the “devel Archives”, where I can read “the collection of prior posting to the list”. Personally, this is the reason I usually visit this page (I don’t subscribe or unsubscribe often). But it’s just a simple link surrounded by text: it could be much more obvious.
Under “Using devel” it says “You can subscribe to the list […] in the sections below.”. That was already obvious since one of the sections is named “Subscribing to devel” and there’s a “Subscribe” button. But in case I still wasn’t sure, the following section tells me I can “Subscribe to devel by filling out the following form.”
To the right of “About devel” there’s a section containing the words “English (USA)”. That must be the language used on this list. Cool. But halfway down the page, “English (USA)” is repeated. Mailman wants to know in “which language […] you prefer to display your messages”. Which is polite to ask, but if there’s only one choice it’s not really a question. It could be removed.
At “Would you like to receive list mail batched in a daily digest?” I can answer “No” or “Yes”. This could be replaced by a checkbox, but that’s a nitpick.
“If you leave the field blank, you will be prompted for your email address.” Really no need to explain that. If I forget to enter my email, I will be prompted anyway.
The cleartext password issue, but as I said we’ll ignore that for now.
A redesigned list page could look something like this:
The form used to subscribe to a list is gone. Before, it took up most of the page, regardless of whether you actually want to subscribe. It could be moved to a separate screen, or a dropdown, or whatever. That means it will require more clicks to reach, sure, but keep in mind that subscribing is something you usually only do once or twice.
Since both of these redesigns are quite simple and we only have two mailing lists, we might even want to combine them:
In this case, the “Announce” and “devel” links will take you directly to the archives (for me, reading old mailing list posts is one of the main reasons I visit this page).
That’s it for now. Things to take away from this:
Use visual design to create a clear hierarchy. Internal design consistency can help identify different elements and their purpose.
Find out what a page’s most important user goal is, then build the design around that.
Don’t repeat information unless it serves a purpose. Keep unnecessary information to a minimum. Get to the point as quickly as possible.
In short, the design of a page matters. It’s not just about making it pretty, it’s about making it easy to understand. Simple design improvements can help users to navigate, grasp and make use of software.