OregonLaws.org - Snacky is signed in
I’m currently designing the part of OregonLaws.org that (1) tells a visitor that they’re logged in, and (2) gives them the link to logout. I hadn’t thought to look at current practices at first; I simply came up with my own idea: A new tab would appear with the visitor’s name. Clicking the tab would show the visitor’s account page collecting all of their personal information and preferences.
Current best practices
(Click the images to view the entire un-cropped screenshots.)
Just today I started noticing how other sites are handling this, and a convention has definitely emerged. I can’t believe I haven’t explicitly compared these until now. I’m now looking at redesigning the site to follow it. This is because I do believe that visitors’ expectations about a site’s functioning are a gift that shouldn’t be rejected. Here are the indicators I found on a sample of modern websites whose design I like.
These first examples are my favorites: clean and very easy-to-read design. Colors are used well, and there’s enough whitespace around the indicator to quickly find and understand it.
Another PB Works screen
I was browsing a PBWorks site, and the you’re-logged-in indicator was so clear and useful that it inspired me to survey what’s out there and write this blog post.
37 Signals always seems to do pretty much everything right. So I went to a couple of my sites with them to see how it looks, and yep — well executed.
Basecamp by 37 Signals
The same good concept, but less-than-excellent implementations
Remember the Milk
Then I found a few sites that aim for the same type of system, but the visual design doesn’t appeal as much. They’re either cluttered by the rest of the page content, or there’s other content added into the indicator so that it’s harder to find the actual logged-in status.
Remember the Milk has an excellent, easy-to-use website. But their design of this particular piece has two problems: The user’s name, indicating that they’re logged in, is far to the left of where it usually appears. Secondly, this position puts it miles from the Logout link, making the two hard to find.
Twitter‘s indicator has always annoyed me subtly. I find it unwieldy—too much stuff is up there. There’s a Profile link but then also the person’s picture and id right below. I bet that no one clicks Profile.
And Google Reader‘s implementation looks very… well, Google. Yes, It works great. But all those lines cluttering up the display: the underlined links, the vertical dividers… And page content is very close to it. On the positive side, the user’s name/email is very easy to pick out and comprehend.