About: Anne Gibson

Website
Profile
Anne Gibson is an information architect and general troublemaker for a big/small technical company outside of Philadelphia, Pennsylvania. She's an editor and writer at The Interconnected. She is also published at A List Apart and The Pastry Box, and has a few pieces of short fiction being published in anthologies in 2016.

Posts by Anne Gibson:

As tenacious as a coyote – is that a thing? It should be a thing.

Once upon a time a client came to me and said, “We want to build a new capability on the website that does Magic Thing Here.” The client had a concept, some business goals, even a good idea of what the users wanted, and all we had to do was get started.

And I said sure, let’s get to work.

We sat down, had some meetings to bring me up to speed on the project, made some super-high-level sketches, brought some more people with technical acumen in, talked through it all, got to the point where it was time to bring the vision down about 10,000 feet so we could figure out what to build, and the project team hit a wall.

Hard.

Wile E Coyote attempts to run through the tunnel he just painted on the wall, bounces off, and vibrates for a while
Like Wile E. Coyote hard.

And this was a frustrating experience for everyone – not just the people on the team, but also their managers, stakeholders, etc., because nobody’s happy and nothing’s moving and at least one person had a massive headache.

***

Its worth pointing out now that this wasn’t a one-time situation. It happens on almost every project team I’ve worked on that *wasn’t* a remodel-existing-capability project. If it’s new, jumping the gap from “high level idea” to “think we can actually build” has been a challenge.

On a good day you know when you're not reaching the other side

***

So I sat down and I wrote down everything I knew about the project and then I started modeling what I knew.

There are lots of different ways to model an idea.

Maybe I created a SIPOC and some process maps to figure out what the difference between what we had as a product offering today and what we wanted to have as a product offering tomorrow would be.

Maybe I created a Capability Strategy Sheet to capture our users’ needs and business goals and then figure out how we’d measure them and move the dial.

Maybe I created a storyboard or, embarrassingly, acted out the actions the users in our personas were doing mid-meeting, based on our research.

Maybe I created a journey map of one individual external client’s perspective, so that we could identify pain points and eliminate them.

I may have even formed my fair share of Lean Startup hypotheses so that we could trim down to one specific problem to chase, and chase only it.

(Probably along the way I created a dozen really bad metaphors. Ask me about the chocolate bridge sometime.)

***

Teams get stuck. It’s not unusual, it’s not wrong, it’s not failure, it’s just part of the process.

We’re people, after all. We get just as stuck in decision fatigue and paradox-of-choice situations as our users do. In some cases, it’s because we have not-enough information, but in many, it’s that we haven’t found the right angle to apply to the information we have to make a decision.

When a team is stuck, the same analysis tools that we’d use with an unstuck team to validate a decision or argue for a specific approach will help us make a decision or choose an approach.

It may take multiple attempts and different angles, but it will eventually get things moving again.

Wile E Coyote using a stick to poke an out-of-camera pile of stuck rocks, from below, which the audience knows is going to fall on his head.
Don’t worry, it works out better for us than for him.

And despite the fact that as we plan and plot we might feel like Wile E Coyote hatching plan after plan to take down the Roadrunner, we have one  advantage he does not: we learn from our missteps, adjust, and get closer to the right course.

***

During one of these attempts to lasso the moon, we succeeded. To the team it felt like soaring into the air crossed with pulling our legs out of calf-deep molasses, but it’s forward movement. Suddenly things started making sense, a direction took shape, and we knew what to do next.

And we all lived happier ever after.

Until the next project, anyway.

Animated "That's all folks" graphic from the end of a looney toons cartoon

 

Baggage fees and gaming the system

Inspired by a recent flight and tweetstorm.

Baggage fees are a fun game, aren’t they?

It used to be that airlines assumed you were going to check a bag. Fees were only charged to consumers if they were taking more bags than usual. Until American charging for bags over 50 lbs in 2002, the money that airlines paid to ship bags along with their passengers were just considered part of the cost of doing business. That was an experience design decision, whether the company labelled it as such or not.

When gasoline costs rose to $150 a barrel in 2008, most airlines added baggage fees to offset the gasoline costs. That was also a design decision, or a series of them, because the companies had to figure out how to communicate the changes, collect the fees, enforce the changes and the fees, and what the impacts to the flying experience to expect.

In 2010, the IRS said that those fees were tax-free, which pretty much guaranteed that they’re never going to go away. (That was also a design decision, but “don’t change anything” is a pretty easy decision to implement.) In 2010, baggage fees cost fliers somewhere around $2,569,729,000.

But it’s also changed the way that people fly.

Before 2008, business travelers were the only people I associated with carry-on bags. The rest of us checked our suitcases so they were out of the way and only brought on the plane the things we needed while on a plane. A carry-on might consist of the camera or valuables you were afraid would be stolen from a checked bag, books, a change of clothes (in case luggage was lost, which happened frequently) and whatever was necessary to keep the kids occupied on the flight. Purses or other bags might go under the seat if you were short and didn’t want to fetch something above your head mid-flight, but there was enough room in the overhead bins that everything else — camera bags, shopping bags with souvenirs, odd-shaped items — were out of the way.

Yesterday I flew from Seattle to Philadelphia on an A231. Seating around 180 passengers, the flight was full. Had we all checked bags at around $25 each, the airline would’ve grossed about $4,500 in bag fees.

But we’re humans, so if we don’t have to spend money check a bag, we don’t. I mean seriously, the bag check process is already a pain in the butt: taking it to the check-in area, having it weighed so they can see if they can squeeze some more $$ out of you, getting it tagged, then having to pick it up on the other side of the flight from the always-slower-than-desired baggage carousel. Could the airlines redesign this process? Probably, but they haven’t.

Users make experience design decisions too, mostly about what they’ll do to make an experience easier on themselves. Since baggage fees have been introduced, more and more people have learned the art of stuffing as much as two weeks of clothes in a single carry-on suitcase.  That’s in addition to the backpack or purse or messenger bag or briefcase (termed “personal item” by the airlines) for their various electronics and assorted entertainment. Since it’s 2017, we’re carrying a whole lot more in that personal item than we ever needed in the past.

We had roughly 150 people planning a free-for-all to stuff their lives into the overhead compartments.  The A231 was built in 1997 and definitely not designed for the post-2008 bagpocalypse. We were told 30 minutes before boarding that some of the folks at the gate were going to have to check their bags. This process was, you guessed it, somebody’s design decision.

Me, I was banking on this stage of the game. Because that’s what it’s become: a game. The object: pay as little as possible to get bag from point A to point B with as little inconvenience to me as possible.

The rules are simple:

  1. Pack a carry-on suitcase that you could easily check at the last minute.
  2. Pack a “personal item” with all your actual carry-on needs.
  3. Go to the gate with your suitcase.
  4. If your plane is not full, then you throw the suitcase in the overhead bin and at the end of the flight walk out of the plane and to your destination, all your stuff in tow.
  5. If your plane is full, you’ll be offered the opportunity to check the bag at the gate for free, because if the airlines don’t do that, they can’t get all the people and all the bags onto the plane. Thus while you’ll still have to pick up the bag at the other end, you avoid the lines and hassle of checking the bag at the bag-check desk.
  6. In either scenario, you pay no bag fee.

Both to and from Seattle, my bag flew for free in the cargo area, because I knew the rules of the game.

The decisions the airlines have made were designed. I can’t say with confidence that they were designed to social engineer their customers, but that was the result. Maybe to the airlines it’s a win on both sides: passengers surely pack lighter than they did 20 years ago, which makes gasoline costs lower, and airlines collect a fee to check bags that offsets the gasoline and baggage transportation costs with some profit to spare. Even giving those of us playing the game a free checked bag at the gate, the airlines came out ahead…. on baggage costs.

In terms of money lost to flight delays, I’m not sure my trip to and from Seattle was as profitable.  We were delayed 12 minutes taking off because of the bag circus on the plane.

Obviously, not every delayed flight is due to baggage handling.  On the other hand, both of my flights were late, one by 44 minutes and the other by 47, and the baggage circus had a visible and obvious impact on the lateness of both flights.

In 2010, the FAA estimated that flight delays were costing airlines $8 billion a year and passengers $17 billion.

$8 billion in lost money is a lot higher than $2.5 billion in baggage fees.

But why would passengers tolerate losing $17 billion when they could save that money by cooperating with the airlines? Surely $25 in checked bags to help the plane take off earlier is worth the money at that point.

This is where brand equity comes into play, or rather, lack thereof. The airline industry as a whole has made design decisions that communicate to the passengers they’d rather charge us $25 a bag — which causes both them and us hassle — than make luggage handling easy or inexpensive or both. They’ve also made it clear that flights are going to be late. Some of them have a distinct reputation for it. That’s also a design decision.

When your customers expect that you’re going to pick their pocket at every opportunity, and they expect that you’ll be late whether they do their best to speed along the process or not, they’re disincentivized to help your business run smoothly.

In other words, we, the passengers, gave not one shit that we delayed the flight. We were busy trying to cram 150 bags into not-enough-space. We were tying up the aisle trying to move against traffic because we had to stuff bags in overhead bins that rightfully “belonged” to people 20 rows behind us.

(Or we were trying to finish the last 20% of The Hunger Games while the circus went on around us. Maybe that was only me, but I doubt it.)

(To add insult to injury, the flight boarded front-to-back -definitely not the fastest way to board an airplane – and it seemed like it was specifically to ensure the people paying the most for seats at the front of the plane got a crack at the overhead bins first. That was a design decision to communicate to customers who was valued and who wasn’t.)

As designers, we have a responsibility to both our clients and our users to look at how we incentivize behavior through design. We need to expect behavior changes by our end-users when we change a process. We need to expect that those behavior changes won’t always be positive and consider what someone who has no desire to help the company would do when faced with an annoying process or feature or cost.

Only then can we help the businesses we design for decide whether the cost to brand equity, performance, and cost, is worth $25 per bag.

And if we don’t? Someone who thinks $2.5 billion in bag fees is good experience design will do it for us.

Black is the New Black: Navigating in black and white

If you search for the latest in web design trends in 2017, you’ll see a lot of pretty reasonable sounding articles all putting together roughly the same list:

  • Animation is starting to be used correctly and tastefully
  • Mobile-first design is becoming more of a norm
  • Hero images still haven’t gone away and are getting “trendier”
  • Single-page (i.e. “embrace the scroll”) design
  • Grid-based layouts
  • Personalization (though no one could agree what it meant)

Surprisingly, they all missed one, and it’s a big one. In fact, I’d argue that it’s almost as big as Hollywood’s obsession with orange and teal. I call it “Black is the New Black” and it’s the proliferation of dark grey or black text on a white or light grey background as navigational elements.

Let’s take a look at the global header and global navigation for some of the top websites in the United States as reported by Alexa:

1. Google

Google's website header as of March 19, 2017. It is black text except Google logo, and the selected item in the global navigation menu, which is blue. The selected item also has a blue underline.

2. Youtube

The Youtube global header as of March 19 2017. Except for the red in the company logo and the user's profile, all elements of the header are black or grey.

4. Amazon

Amazon's global header as of March 19, 2017. Below a row of images representing products, the brand channel is a very dark blue with white text for the global navigation. The sub navigation directly below is black on white text. Very few elements contain color.

9. eBay

Ebay's global header as of 19 March 2017. After a bright green advertising bar at the top, the global header is fully black on white text with the exception of the eBay logo and the calls to action to sign in or register (which unusually, are on the left side of the screen).

10. Netflix

Netflix's global header as of 19 March 2017. With the exception of the Netflix logo and the chose menu, all elements are white on a dark grey background. We know it's dark grey because when the menu's open, it's an even darker shade of grey. Chosen elements are red on black, which I'm sure makes a certain colorblind subset of the population thrilled since they can't see it.

All of these brand and navigational experiences have a few things in common:

  • They use almost no color in the global navigational elements
  • The chosen element’s state of being chosen is illustrated through a change in font weight or border
  • The navigation bar is almost indistinguishable from the brand channel (where the brand tells you who they are, and often where the search elements hang out) or the utility bar (where top-level utilities like “messages” or “log in / log out” are located.

It’s not surprising that designers would want to understate their global navigation; I think we can all agree that we don’t want the global navigation to have a stronger visual hierarchy than the content of the page. Picking a limited but accessible color palette such as a white background with dark grey text or a dark grey background with white text accomplishes these goals.

And in the era of “flat design” it’s not too much of a surprise that the navigation menu looks neither like a row of file folder tabs nor like a row of gradient-decorated buttons. There’s something very sleek (or maybe naked?) about a row of links floating in space.

But there are also problems.

It’s breeding like bunnies

(Incidentally, I raised rabbits as a kid and it’s harder to get them to do that than you’d think, but I’m going with the metaphor anyway.)

The examples above concentrate on strictly the global navigation, but that’s not the only place Black is the New Black is showing up.

Youtube, Facebook, and Amazon are all using black heavily in their local (left-nav) navigation bars:

Youtube's left navigation column as of 19 March 2017. The choices are black on a white background, the hover state is white on a black background, and the selected item is white on a red background. The subheadings are red on a white background, though.

Facebook's left navigation bar as of 19 March 2017. It is black text on a light blue background, with black headers. The selected item has an even lighter blue background with black text.

Amazon's left navigation bar as of 19 March 2017 (on my account, anyway). Technically this is more of a filter because it allows the user to view the breadcrumb of categories that brought them to the current page then manipulate a bunch of checkboxes to change the result set. Still, the headings are light grey and larger than the subheadings, which are the same color choices as the itnteractive elements except the subheadings are bold. Only brand elements like the Amazon Prime or Amazon Fresh logo are in color.

 

 

 

 

 

 

Wix is using black on their Most Popular list as well as their global navigation.

A screenshot of Wix as of 19 March 2017. The global navigation uses black text on white for active items and blue text on white for the selected item. The list of "most popular" articles is also written in the same black text as the header and the body copy.

Alexa is using white-on-dark-blue for their global navigation and black-on-white for their in-page navigation.

The header of the Alexa website, which ranks the popularity of other websites (among other things) as of 19 March 2017. The header is a dark blue with white text, and the in-page sub navigation tabset, which in this case allows the user to toggle between "world", "country", and "by category" is black on white with a blue bottom border and bold text for the selected item.

And then there’s the New York Times:

The homepage of the New York Times as of 19 March 2017. There is no text on this page whether global navigation, in-page navigation, or body copy, that isn't black on white.

 

There is nothing on this page written in text, clickable or not clickable, that isn’t black on white.

Okay, okay, so maybe she’s called the Grey Lady for a reason and it’s a purposeful decision to cast away usability just to look like the newspaper. But CNN was never a newspaper, and they followed suit:

A screenshot of CNN's homepage taken 19 March 2017. Following the trend, nothing on CNN's website is in color except the CNN logo and the timestamp on one news article that occurred less than an hour ago. (But only the timestamp, not the title.)

 

If we had only been seeing this trend in the global navigation, we could’ve argued that people know global navigation is interactive because almost all websites place their global navigation in the same place, and it’s a learned behavior.  As the trend spreads from global navigation to local navigation to in-page navigation to plain old links, the amount of cognitive load the user needs to use to determine what’s interactive goes up significantly.

It’s difficult to tell the state of an element

For most of these examples, the primary global navigation is a tabset metaphor: you’re looking at one set of data under a specific category. If you didn’t come in the front door (thank you Google) or you have forgotten how you got to where you are, the global tabs provide you with a sense of environment and direction: here’s where you are, here’s where you can go.

So if the navigational elements don’t look like they have a specific state set, it can be confusing for the user to orient themselves. Amazon’s design  is probably the most difficult to use. Neither the global navigation nor the subnavigation change regardless of which category you’re viewing. Where are you on Amazon’s site? Who knows? Just search again and hope you get somewhere useful.

There’s also the question of number of states. For global navigation on externally-facing websites we generally only see two states: active (which means you could select it) and selected (which means you already did). On internally-facing websites or applications, though, we frequently have a third choice for disabled tabs.

Why would you display a navigational element a user couldn’t access? One reason may be because you’re in tech support and you can see other people’s accounts but not modify them — you may still need to tell Mr. Smith where the Private Data tab is located even if you can’t view it.

Internal employees providing wayfinding for other users, whether they’re internal or external users, is the most frequent use of disabled navigation elements, but I’ve seen others in the wild. Sometimes to gain access to secure content, the user has to take other steps first, which could even include plugging in a dongle or drive. Sometimes authentication is required. Sometimes it’s a vendor product and it’s just what you got stuck with.

At any rate, if the user needs to know the tab exists but can’t use it, it has to have a disabled state. And therein lies a problem: if the selected state is grey and the active state is a different grey, what color is the disabled state (which is traditionally grey)? One could argue to introduce a third lighter grey, but then one has to be careful to make the disabled grey different enough from the active grey to look disabled while also not making it so light that it no longer fails color contrast testing for accessibility.

(Incidentally, I did have someone argue once that disabled items don’t need to be readable. Hogwash. Either you need to know what’s disabled, in which case they need to be readable, or you don’t need to see them at all.)

Let’s say that we find a suitable grey or font weight or something that differentiates disabled from active or selected. Great! Now we just need to solve the problem two more times, for the hover state and the focus state.

There is only so far that we can stretch font weights and underlines and borders if we limit ourselves to a greyscale navigation system.

It matches the body copy

In almost all of the cases cited above, the body copy for the site was the same color or nearly the same color as the navigational elements. If everything’s the same color and weight and nearly the same size, what’s clickable and what isn’t?

I’ve heard many a designer over the years claim that a user will explore a page and click on things to see if they do anything, but my experience in usability testing points otherwise. People don’t click things that don’t look clickable. As Jakob Nielsen says, “Life is too short to click on things you don’t understand.”

“Just click it to find out” on an iPad using a cellular connection on a train is not exactly the speediest way to explore a website.

I’ve hear designers and developers also justify decisions like this by “the cursor will change when they hover over it”, which may be true if the user is using a mouse, but fails miserably for my iPad. Hover states are not guaranteed and can’t be used as a primary affordance.

Finally, I’ve heard the case that users are smart enough to understand that something is an article title or breadcrumb or link just by what it says and will click because they understand what they’re looking at. That works fine for experienced web users, but for young people, those with cognitive disabilities or reading difficulties, or people who are reading in a foreign language, the affordance of a change of color or other indicator that something is a link may be the same affordance that helps them understand the words are an article title.

Affordances are important

Clean simple designs are important to ensuring that our users put the bulk of their thinking on the content we’re presenting and not the navigational framework around it.

At the same time, there are critical reasons to make interactive elements stand out from their non-interactive brethren: mostly that we want our users to interact with them.

We want the choice to click on something to always be successful. We want the user to trust the interface. We want to communicate state, not only by the context clues of the surrounding content, but by the visual and structural display of the content itself.

To that end, not everyone’s global header has to be black text on a white background (or vice versa). It’s not only okay to be different, but when designed well, it will give us a more effective design than those following Black is the New Black will be able to boast.

Navigation elements should always clearly communicate their state.

Links should look different from body copy, even if the link is to the side of the page or above or below the body copy.

Text should have significant enough contrast from its background and its neighbors to both read it and understand the affordances it carries.

Most importantly, there’s more than three colors in the world, and we should not be afraid to use them, especially when it results in a product that’s easier for our users to understand.