push.cx
Peter Bhat Harkins
ListLibrary.net UI Design
I wanted ListLibrary.net to have a really nice user interface for browsing and reading mailing lists at length. The design leans towards terseness: get rid of the clutter and assume that people who’ve browsed a page or two will understand how things are sorted out.
I started on the list info page, and I started from the top. Instead of putting the name ListLibrary.net in as a heading, I put it down in the footer, the name of the list is the title for the page.
After that, I knew I wanted to display information about the list like homepage and description, but it’s something you’ll probably only read once. So I let it move down the page a bit.
What slid in under the title was the table of links to month pages. I’m really happy with this table, even though it takes a little puzzling out. Instead of linking down into pages for years or quarters, the table displays the number of messages and threads in each month, trading immediate clarity for depth.
{.alignnone .size-full .wp-image-772 width=”590” height=”384”}
The month page is the first place the thread-centric nature of the site becomes apparent. Rather than immediately list all the individual messages, they’re tucked away until you click the blue bar to expand one (or double-click for all).
{.alignnone .size-full .wp-image-776 width=”546” height=”216”}
I touched on the thread list in my announcement post, but it’s where I spent the most time tweaking so I’m going to write a bit more about it.
Rather than repeat the subject (which rarely changes), it displays the author’s name to make it easy to pick out posts from favorites. If the subject does change, the new subject is displayed off to the right. The date and time (always UTC, an OK compromise) is less prominent and, though this screenshot doesn’t show it, replies that happen to fall in later months will be pulled forward to appear in one single thread. You can also see the vertical line that makes it easy to pick out sibling replies.
{.alignnone .size-full .wp-image-778 width=”546” height=”201”}
The thread view pages repeats that thread list and then displays the messages. I played around with indenting them like the thread list, but they look much better full-width, especially on deeply-nested threads.
The header has the usual name, email (spam-protected but hopefully recognizable if you already know it), timestamp, permalink. When you hover over a message, it shows you a bit more information in the header: easy links to a message’s parent and replies.
{.alignnone .size-full .wp-image-781 width=”546” height=”42”}
The only other design note worth mentioning is typography. The page is high-contrast, clean type, with a vertical grid for easy reading.
I’m happy with how this design works. I think the attention I paid to these small details has paid off, and it’s a lot more attractive than, well, pretty much anything else I’ve designed. I’ve developed it on-and-off over the last 18-months, so it’s had a lot of time to give this polish.