Chrome’s icon provides a good example

Here’s a quick test I ran using the awesome Sim Daltonism

From Left to Right:

1. Normal web browser
2. Protanopia (no red cones, red-green blindness)
3. Deuteranopia  (no green cones, red-green blindness)
4. Tritanopia (no blue cones, blue-yellow blindness)
5. Protanomaly (anomalous red cones)
6. Deuteranomaly (anamalous green cones)
7. Tritanomaly (anomalous blue cones)
8. Typical achromatopisia (no cones)
9. Atypical achromatopsia  (low cones)

• A 3-tiered priority inbox
• GMail’s “white space” look
• The option to change your layout between Compact, Cozy, and Comfortable

Click on the image for the full-sized version

Admittedly, this is very unscientific, and I chose the 3-tier Priority inbox to emphasize what happens when you have no priority mail. Since I have a MacBook, I couldn’t even display the Comfortable layout, which is for large displays.

What is interesting through all of this is how far you have to scan down the page before your eye would hit email. A lot of the functionality is the same, so what’s the benefit of expanding the layout? I’m guessing as people have been getting higher and higher resolution displays, Google has felt less pressure to try and cram information into every pixel. It’s also interesting to see that whitespace is not just uniformly increasing, but being shuffled around in some areas, such as the search bar.

If your friend buys somewhere and tells you about it, well hey, why shouldn’t you do it too? They’ve just taken a lot of the upfront work out of the process for you. LinkedIn does an especially slick job of this with a feature that scans your email contacts and suggests connections.

The feature is contentious. Let’s be honest- I may learn about a few connections, but what I’m really doing is giving LinkedIn new leads for users (or more information they can use).

On the e right, they show pictures of a bunch of my connections who have presumably already done this. But are any of my connections aware they’re “endorsing” the feature? Sure, LinkedIn’s byline only says that these faces used the feature, not that they liked it. But I see that as just covering their asses to avoid a Facebook Beacon-like incident. If I started a restaurant and posted headshots of celebrities who ate there, there’s a lot more implicitly being said than “Brad Pitt was here.”

On the other hand, it’s notoriously hard to get users to do pretty much anything other than look at porn online. Let’s say LinkedIn wanted to be super upstanding and had a Did you like it? question box on their site after using this tool. How many people would actually answer it? Probably few, if any. Not enough to fill out the 7 photos they need for the layout. What if they only show users who used this tool and connected with someone as a result? That seems like a pretty good indicator that a user would be okay with psuedo-endorsing the tool to others.

Co-opting a user’s endorsement is a tricky ethical question. At the end of the day, you can’t stop and ask your users for constant feedback and endorsements. But does that give you license to present interfaces these interfaces anyways?

Most Facebook posts I read are about the poster and their personal life. They’re also very short, usually only a few sentences.

Google+ posts seem to rarely be about whoever’s posting, or at least, about their personal life. Instead, I see a lot more posts talking about projects, viewpoints, etc.

What really intrigues me about this is that both sites give you the same tool to post with: a rectangular text box. Here’s two screenshots I just took for this post. What’s different?

Coincidentally, when I took these screen shots, the post beneath each one illustrated exactly the point I was making about the type of posts. One of my friends is having a tough day. The other friend on Google+ is sharing a much longer post by Sergey Brin on the status of the internet.

Or is it coincidence? Are people being influenced what to talk about by the type of material that’s right in front them? We know the human mind is very susceptible to priming, subconsciously influencing a person’s actions and decisions before they’re even thinking about what they want to do.

I’m sure if you compared a bunch of other social media apps and sites, you’d see similar effects. So when you’re wondering about how to get people sharing more on your social app, is it about giving them more photo/video/smell-o-vision features to post with, or priming them to take different actions with the content they’re seeing?

The best part was probably the ending

In case you’re wondering, he was not using the iPhone controls I invented. But it’s a pretty good example of why they’re needed!

Clean but empty.

Anddd that looks boring

The UI is pretty clean and straightforward. Much better than Buzz and wayyyy better than Wave. It’s obvious what I want to do and why I’d want to do it. The problem? There’s no one else there. It kind of feels like you showed up to a hip, new club an hour before they opened. The visual design is extremely clean, but muted- I’m guessing throw the focus on the content.

Circles shows everything that’s wrong with Facebook, but isn’t a panacea (yet)

After Facebook, can you really have less than 50 “friends?”

Circles is definitely awesome. There is no concept of “Friends” just people you organize into various social cliques.  The UI is very slick- nice animations and a great example of a modern drag’n'drop interface. I suspect going back to Facebook now I’m going to have a nagging feeling of “but why I can’t share this with just some people instead of everyone?” That backlash user experience could be what pushes people towards Google+ and away from Facebook. But really, if Facebook Friends is the Social Web 1.0, Google+’s Circle’s is the Web 2.0

But it’s not perfect. In just a few minutes, I found that I kept wishing I could add people to more than one circle at once, e.g., College and Living Group. Organizing, even when flashy, is a pain in the ass. It’d be great if I could have friends suggest Circles to me that I could then cherry pick and edit.

Speaking of people in Circles, apparently ~6-10 people is what Circles is intended for, and the UI certainly reflects it. I can see how this works well for Family and BFF, but the interface quickly breaks down after adding ~10 people.

I know what I am, but what are you?

Where’s my lovely circles?!

Google’s clearly thought hard about privacy and Circles when you’re creating content (a new post, uploading photos, etc). That interface is slick, and generally follows Mac’s improved Text Field + Tags UI idea. However, it’s a little less clear when you’re responding to content someone else has posted- is it just to that person? their circle? who’s in that circle?… What if my boss is in the “Friends” circle of someone else? Does he see what I write back to my friend’s posts? There’s a lot of ambiguity in the privacy.

Aftermarket Modifications

What I see on the Google+ homepage:

There’s a lot to discover here

What’s actually going on:

Oh! There’s a feature down there?

Some of the UI is seamless- Circles and Photos, for example. However, Hangouts and Spark feel like they were separate projects bolted onto Google+ after the fact. This isn’t bad, but it does give an inconsistent UX where you’re wondering if there are hidden doors to Narnia in Google+ that will open up some whole new world.

Incomplete Judgement

Google’s learned a lot about building a social UI, but the hard part about a social interface isn’t making buttons prominent and an easy to use UI, it’s in the experience of interacting with others. Right now, that interaction barely exists. So why we can see what Google has done, it’s like walking in on a restaurant’s first day. Sure it looks nice, the menu sounds good. But will the food be tasty? Will the servers pay attention to me? Will my friends come there?

The old iconic Food Pyramid has received a serious upgrade today, the MyPlate. Gone is the notion of a pyramid. Instead, we’re shown a plate, with the food portions on it, in all it’s What-You-See-Is-What-You-Get glory. The USDA’s food pyramid originally started out in 1943 as, ironically, a donut

It’s not clear to me if the slices are intentionally the same size, but this is where the concept of what graphically showing people what food they should be easting. While the USDA has gone back and forth about what food groups need to called out, the biggest problem has always been how to communicate to Americans how much they should be noshing, gnawing and guzzling. In what seems like a headline from the Onion, there was a breakthrough in food group graphics with the iconic Food Pyramid:

Unfortunately, the pyramid had several problems- it was long argued that the portions were vague… How much sugar exactly is in a pyramid capstone? It’s a lot bigger than all those bread loaves below it… is it more important than the other food groups because its at top? The idea, to give users a direct mapping between what groups and how much of each group is key for a diet, but the pyramid doesn’t cut it.

In fact, it was only now that I realized the background of each food group is supposed to, for some unknown and vague reason, represent the amount of fats and sugars in each group. Until I was looking this up today, I always thought that was a cool starry background. What can I say? If you were elementary school in the early 90s, there were 3 things the US did- the food pyramid, DARE and Hubble. Everything else somehow supported those programs, I assumed they gave you pamphlet explaining exactly how when you turned into an adult.

Anyways, jumping into the new millenium. The USDA’s attempted to revise the food pyramid  in 2005 with the MyPyramid: Steps to a Healthier You. It looks like some sort of cross between a rainbow, a Mayan temple and the Sydney Olympics:

If anything, this pyramid has even more infographic failure stuffed into it. The rays are still portioned, and we’ve lost the lovely fat & sugar starry night. It’s extremely difficult to determine how much each portion represents- at the top they all end in a point (don’t eat anything, you fat ass) while the bottom descends in enough food to feed several “Healthier You”s. It might be alright if the bars along the bottom kept the same width ratio as the rays, but they’re all the same size! There’s even a yellow “ray” that is not explained, perhaps a vestigial sugar group?

Which brings us all to today. I like the direct, no nonsense approach of the MyPlate, even if the graphics look like they’re from a web developer who was incarcerated in 1998 and just released on payroll. However, I have to question how effective this plate will be- the portions have changed, but now they’re so close in size, it’s hard to know what to do with that information. It’s pretty clear you should eat more grains and vegetables, but by how much? Is that extra space for veggies about the size of a stick of celery? What if I don’t eat meat pie? How do I know how much meat is too much?

Did you know that the emphasis is no longer on the relative portions? That’s right. Apparently portions are no longer a focus according to officials. So why use an infographic that encourages you to think in terms of sizes and ratios?

Humans are bad at both dieting and estimating the area of pie charts, so why throw the two together? If the USDA wants to really go with What-You-See-Is-What-You-Eat, it should abandon the abstract portions and give people concrete examples, especially in the age of the Internet- 3 apples, 2 stalks of broccoli and a chicken thigh will always be much easier to understand than rainbows and pyramids.

Williams F1 Steering Wheel – bisgovuk on Flickr

I recently read an interesting blog post about what all the buttons, knobs and dials do on an F1 steering wheel. With all the rage about easy-to-use interfaces these days, pics of these “interfaces” look like some sort of photoshop joke. However, they’re very real and very useful to the F1 drivers. F1 Fanatic’s blog post lists 22 different functions on a Sauber steering wheel, from shifting gears to “drink bottle” and a speed limiter for the pit lane. I am surprised by how small the knobs are, given that the drivers have to wear gloves for safety, they must have require a fair amount of torque to change to another setting.

It goes to show that the best interfaces are not necessarily the simplest ones. F1 drivers have a job that requires a lot of attention, and their hands must always be on the wheel. So what could be a terrifyingly complicated interface is actually very simple and usable for the right expert.

In contrast, look at this:

The rear of a TGV’s engine cab

That’s an enormous panel of buttons and lights that’s behind the operator in the high-speed TGV. It’s not that useful, even for the expert TGV train operators.

Note: I’m not going to talk about “browser” tabs, such as seen in web browsers like Firefox, etc or other document based UIs.

What are tab interfaces?

Tab interfaces are based on the principle of progressive disclosure. With limited screen real estate, tabs are a convenient way to quickly offer a user several large areas of functionality which are not dependent each other. Essentially, they allow you to be get extra layers of interfaces without expanding your visual footprint. However, what you gain in the compactness of your interface is traded off by increasing the cognitive workload of your user. In essence, tabs are the antithesis of WYSIWYG- you’re not seeing everything you can do, and it quickly becomes easy to forget (or not know in the first place) about functionality.

What are they bad at?

Tab-based interfaces get a bad rap in interface design, and rightly so. They’re a powerful tool that’s easy to abuse and hard to do right. Let’s look at some of the specific problems:

Transparency

A tab is a perfect invisibility cloak: very useful, but hard to find when it’s not in your hands.

This one is blatantly obvious, but often forgotten. Sure, every time you startup the application, you’re staring at the that first tab, and forgetting all the rest. So you’re lulled into a false sense of security that you’re keeping your interface transparent and showing all of your functionality or information. I’ll be the first to admit I’ve worked on tab-based interfaces where I’ve completely forgotten what was in the other tabs. And I designed the UI!

Screen Real Estate for the Feature

Tabs often loving embrace your layout, and then choke it to death.

Tab interfaces are usually given 1/4th to 1/3rd of the available screen real estate in the app (there are notable exceptions). This means you may be trying to squeeze a set of functions and information that really needs an entire window into a tiny sidebar.

Encouraging User Engagement

Initially, 3 out of every 4 users will never use what it is in that tab. Over time, this may go down to 1 in 4.

You see this one a lot, especially in interfaces that originally did not have tabs UIs. Suddenly, a new awesome feature is introduced and there’s no where to put it in the existing UI. What to do? Tabs to the rescue! Unfortunately, that awesome feature is now hidden away on some other tab where users will never find it. My rule of thumb? Putting functionality into a tab will knock down its chances of being used by 25%, at least. With new or novice users, I’d put that number at 75%.

Teams and Product Decision

Tabs are like nails. Once you’ve used them, it’s hard to not try hammering everything with them.

In a team setting, it’s hard to judiciously use tabs. Everyone becomes drunk off tab grog and starts seeing every nail as just something to toss in another tab. If you’re designing a tab for a team, you’re constantly in fear that the next day there’ll be a whole new set of features and everyone’s response will be “just put it in another tab.” After a few months, your interface is useless and awash in a sea of tabs. As a designer, it is very difficult to counter with “we already have too many tabs” or other well reasoned arguments. Everyone else has seen this easy solution- there’s already the code for the tab UI and works, and now you’re the buzz killing prima donna who wants to introduce new design work, again. Why don’t you go work at the MOMA if you always want to be doing something different?

What are they good for?

Okay, enough about why we all hate tabs and hope that they never come to our birthday party. Tabs do have several compelling reasons to put them in your application.

They’re Known

Tabs get around. A lot.

Thanks to (or cursed by) Windows 95 and onwards, tabs have been a reliable part of the everyday user’s interface diet for years. Unlike a lot of other UIs related to showing/hiding things, users are comfortable with tabs and understand how they work. Of course, that doesn’t mean your tabs will not still suck to use if you have uninformative tags like “Cool” and “Boring” along with icons of ponies and unicorns.

Prioritizing

Hey! Tab #2′s functions probably aren’t going to be useful for me as Tab #1′s functions. Thanks Interface Man!

Let’s face it, some parts of your application aren’t as needed as other parts. They’re also usually conveniently related to other, more useful things. Tabs make it easy to automatically prioritize features for your user. For example, if I had an application for controlling my internet-enabled oven, it would be useful to have a set of tabs, let’s call them Baking, Advanced and Diagnostics. My Baking tab simply shows some common settings, temperature, cooking time, etc. My Advanced tab contains functionality that’s secondary, but I still want access to, like Cleaning Mode, Convection Fan, etc.

Easy to Access

Just click and bam! A whole new interface.

One great thing about tabs is that they’re much faster to get to than navigating through some menu or opening a new window. In the oven example above, even though I rarely use it, I can easily get to the Diagnostics functionality very quickly and see if the oven is just turned off, or there’s a gas leak and I should run screaming from my house. In contrast, think about how long it would take me to hunt through menus, or a well-meaning but vast grid of inputs.

Hooray, examples!

Below are a few sets of example tab interfaces I’ve come across. I’m purposely ignoring document-based tabs and tabs on websites and focusing on application, modal based tabs. Or basically, tabs in an interface which primarily act as sidebar or modal switcher for views. From the interfaces I could find with tabs, they seem to follow three styles: Icons, Text and Micro.

Icon Tabs

Firefox 3.6′s Preferences

A nice combination of icons and text, it’s clear what each tab is focused on.

OS X 10.5 System Preferences

An interesting approach to the tab hell that usually arises in Windows preference panes which have many, many different areas to configure.

iTunes Preferences

A sleek version of the Preferences window. Notice how the selected tab is much more apparent compared to the older implementation used by Firefox.

OmniGraffle’s Inspector

Nice iconography-based approach by OmniGraffle for controlling different attributes of an object

Office 2007 from KrAzY KorY on Flickr- Click to view full size

Microsoft’s famous re-working of the menus in their Office product line into the Ribbon. Jensen Harris, the lead manager on the Office UX team has a great presentation on how they developed the Ribbon.

Text-based Tabs

Panic Transmit

Transmit (a FTP application) uses tabs to allow users to filter/select what type of server they want to connect. Although it contains icons, I think the type is most dominant.

Aperture 3

Apple’s photo processing software, successfully uses tabs to move between viewing the entire photo library and metadata/post-processing adjustments for a single photo.

OS X 10.5 Date & Time Preferences

This is one of the few examples of the classic Aqua tabs I could find still remaining the UI. Perhaps a bit worn now, but certainly clear and effective for a text-based modal tab

Papers

Papers tabs (in a sidebar related to a selected article) are far too subtle for my tastes and look almost like a tagging interface.

Things

Things, a productivity app, in contrast, uses tags as “tabs” for filtering views.

Photoshop CS4

Photoshop. I hate this interface. However, it’s worth noting how the decision of having the tab’s pane float over the image leads to a lot of interface hassle and constantly juggling windows around

Delicious Library

Delicious Library’s simple, but clear tabs. An interesting side note is that you have to manually click an edit/save button before switching away otherwise you loose changes.

Micro Tabs

iTunes Music Browser

The very small, but very clear tabs for changing the music browsing view in iTunes

Eclipse Workspaces

Eclipse loves stuffing functionality into little packages, and their tab setup for changing between workspaces is no different.

OS X 10.5 Finder

Xobni

I was involved in the initial design for the top of set of tabs.

Wrap Up

As you can see, there’s a variety of ways to style tabs. What sort of information do you want the tab to communicate? How many tabs do you need to accomodate? What does a selected tab look like? Although I didn’t discuss it here, the future of tabs is clearly in the mobile domain, where space is limited.

http://www.youtube.com/watch?v=kG58zTVjoyY

Unfortunately, I can’t say anything more until the research is publicly released.