Panda’s Guide to User Experience

by:   |  Posted on

I blacked out when he said he wanted to underline text so that the site looked more interactive. I couldn’t hear him anymore because of the internal dialogue reinforcing my superiority. “He doesn’t think of the user. He only cares about sales. What kind of stupid idea is that? A really, really stupid one. What happens when someone tries to click the underlined text? Nothing? Awesome plan.”

I was stuck in the room for another 15 minutes, so I decided to play a game called “in what universe is this a good idea?”

Continue reading Panda’s Guide to User Experience

Grow Your Career without Leaving Your Company

by:   |  Posted on

When I wanted to make a career shift to information architecture, I was reluctant because I loved the team I worked with. So instead of leaving to find the right work, I tried to start doing it where I was.

What follows are my recommendations on how to make similar moves. It’s not rocket science, but it’s always nice to get some reminders. The least rocket science-y part is the first: Set a goal. You can’t get to where you’re going unless you know where that is. But once you have that, you can move on to the real stuff.

Pretend to be good at your job

This is the part where you take your perceived weakness and you pick up somebody else’s strengths. It’s more nuanced than just pretending to be good. You’re pretending to be someone else, who is good at those things.

When I’m acting, I like to have props. I knew there was a joke about UXers being obsessed with post-its, Sharpies, and dry erase markers, so I went to the supply closet and got as many as I could carry. As my friend who owns a tuxedo once said, “If you own a tuxedo, you’ll find a place to wear it.” And he was right. Suddenly, all of my work required huge white-boarding sessions and arrays of colorful post-its.

The unintended consequence was that it took all of my processes out of my head and put them on the walls around me. Without much of a change, I suddenly looked a lot smarter and more engaged with my work. Accidentally, I got a bit smarter, too. Writing things out and staring at them on a wall prevented me from skipping over important details or making huge leaps of logic. It also helped to explain to my co-workers and clients how I was tackling problems. When I was being transparent with my work, it was easier for them to engage with me and participate. Pretending to be good at my job was going so successfully that I decided to try something else.

Refer to your work as IA

This wasn’t anything elaborate. I would just look at something and say, “From an information architecture perspective, this is a great design.” I was planting the seed for the discipline. This is a good step for those who aren’t very good at self-promotion, because it takes the focus off of you and puts it onto the discipline and how that will help your company.

Build alliances

After I had been acting good at my job for a while, I realized my plan might actually work. But I knew I needed to be a little more strategic about things to make it happen. I had to build alliances. But I’m not on Survivor, so I didn’t want to be a creep about it. Instead, I made friends.

This was a pretty easy step because I already had friends. And as you do with friends, I looked around to see who I could help. I saw that the designers were way overworked.

They were our unicorns. They handled the IA, UX, and visual design, and I wanted to get in on the action. They would sit in meetings and be working on things for another client. That would be frustrating for the people in the meeting because we couldn’t get their full attention and frustrating for them because they just needed to get things done.

So, I struck a deal with them that I’d go to the upfront meetings–the really tedious ones where you’re just trying to get the stakeholder to say the same thing twice. Then, I’d compile everything I’d learned and hand it off to them. This was an obvious win-win because they had more time to do work, and I got to try out some new things I wanted to learn.

Take on side projects

There were more skills I wanted to pick up, so I decided to take on a side project. If you’re looking to do something extra but are having trouble deciding what type of side project to take on, think about the things you and your friends snark about at lunch. What’s the thing that drives you nuts?

For me, it was the fact that we didn’t have an interface messaging voice and tone guide. To turn this into an actual project, I had to find other people who were interested in consistent messaging. I identified some likely allies (marketing, sales, technical writers) and some less likely ones (developers, translations manager). Together, we started to chip away at the style guide and tackle the worst messaging.

Have the right people on your side

Whenever you’re trying to do any corporate maneuvering, it’s always important to have the right people on your side. And in this case, I was just lucky.

So, that’s my tip: Be lucky.

For me, that luck came in the form of a new boss who couldn’t believe we didn’t have an information architect on staff. Her boss, who allowed her to make me that IA, knew me as someone knowledgeable about the internet from the previous summer…when I taught him to use Twitter.

Don’t be mysterious, be helpful

So, success! I became an information architect. Now the problem was that I had to convince people I was worth keeping. I had seen other people try to do that by silo-ing off their responsibilities and trying to make their work seem really mysterious, and therefore extra important. That never worked because everyone saw right through it. I wanted to take a more transparent approach, so I spent a lot of time explaining to people what I did.

Educate your team

Since my company had never had an information architect, I had to educate everyone about why this new role existed and how it would help them achieve their goals more effectively.

Early on, I showed a stakeholder a wireframe, and she asked why the interface was black and white now. This was adorable but also totally my fault. She never should have seen that without knowing what it was. So I added a few upfront stakeholder meetings so everyone knew what I was doing and presenting.

One mistake I made was not paying attention to the corporate comings and goings around me. When new people joined the team, I had to quickly explain to them why this role was important, and I wasn’t always good at that. After being closed out of a number of meetings and big decisions, I realized I wasn’t convincing some people of my value. Since then, I make a point of keeping a few examples of the things I bring to a project that wouldn’t have been there without an IA in my back pocket. And if I can’t identify anything, I know I’m not contributing enough to that project.

Never stop pretending to be good

When I started my ruse to pretend to be good at my job, I didn’t realize that I could never stop pretending to be good. In fact, now that I had the title I wanted, I had to be MORE good at my job. Outwardly, this meant bigger white-boarding sessions and more post-it notes. But behind the scenes, it meant more strategic twitter follows, local meetups, and reading to make sure I was up on what our industry leaders were saying.

Live happily ever after

This might not be your exact story, so this won’t all be the same for you. The part that’s universal is the importance of figuring out what someone else needs, putting that together with what you want, and identifying a path to meet both goals.

What my company needed was someone to provide continuity to a range of projects, help out the designers who never had time to do the work they wanted to, and have everyone write from a common style guide. What I wanted was to be an information architect.

When I put these together I had an opportunity to help my team and try out some things I thought would be interesting. Keep the focus on helping others, getting smarter and being a good human being.

In Defense of Floppy Disks: The Vocabulary of the Interface

by:   |  Posted on

I work on interfaces used by college students to search for academic articles. Librarians buy these databases. Librarians happen to be wonderful clients to build products for because they always let you know what they don’t like.

A few years ago, my department started hearing complaints about the “save” icon on our interface. The librarians were concerned that, since college students had never seen floppy disks, they wouldn’t know what the icon meant. In the next round of user testing, we dutifully asked college students if they understood the “save” icon–they did–and if they’d prefer a different icon–they didn’t. So we left it at that.

But librarians are a naturally curious and skeptical people and one round of qualitative research would not satisfy them. I needed 100 people to say I was right. So I conducted a survey to find out if people understood the meaning of the icon, and whether they could identify the symbol represented in the icon–the icon’s origin. I got 224 respondents, ranging from elementary school children to art professors. But I was only concerned with the college students, so I narrowed my results to the 131 people who selected the 18-25 age range. And I figured if I was going to ask them about one icon, I might as well ask them about 11 icons.

The save icon

Save icon
Save designed by Cris Dobbins, from The Noun Project

96% of respondents knew that the square icon with the notch cut out of the top right represented a floppy disk (one person guessed that it was an SD card, which was wonderful because that also represents file storage). If I’d asked only about the icon’s meaning, I would have declared this an unequivocal win. However, I also asked people to tell me what the icon meant on a computer or phone. Around 80% said it represented save. The rest of the answers were in the ballpark of save functionality (storage, memory, files, dark matter) but I had expected every single person to respond with “save.” Apparently one exasperated survey taker had the same assumption because they wrote, “Seriously, I’m only 20, but young people aren’t THAT blind to old tech.”

“Seriously, I’m only 20…” (pdf)

Clear origins, cloudy meanings

Magnifying glass icon
Magnifying Glass designed by Hafizh from The Noun Project
Pencil icon
Pencil designed by Blake Thompson from The Noun Project

Two icons represented objects that were common enough to be identified, but their meanings were not clear. The magnifying glass and pencil illustrations were obvious, but both have been used for many different functions on interfaces. The magnifying glass went roughly 80/20 for search/zoom. The pencil was split among many good answers, such as compose, write, draw, highlight, note and edit. Their high recognition shows that they’re still good to use and likely identifiable in context.

More confusing icons

Contact icon
Contact designed by Johan H. W. Basberg from The Noun Project

When I constructed the survey, I threw in some easy icons that were recognized by everyone (envelope, telephone handset, trash can), but I also put in a couple just to stump people. These were icons for voicemail and contacts as represented by an abstracted reel-to-reel and a Rolodex card, respectively. In both cases, the guesses for what object the icon represented were across the board (some guesses for the voicemail icon included “opera glasses,” “googly eyes,” “two circles connected by a line,” and “I have no fucking clue.”) The surprising result was that, despite not being able to pick a Rolodex card out of a lineup, 80% knew that the icon meant contacts.

Voicemail icon
Voicemail from The Noun Project

It was not such a clear win for the Voicemail icon (52% got it correct), but it may be that a less frequently encountered icon is harder to recognize out of context. When I showed the survey to a 40-year-old coworker, he couldn’t figure out what the icon represented either. Then I had him take out his phone. And right there in the status bar was the icon showing that he had unheard voicemails.

Link icon
Link designed by David Waschbüsch from The Noun Project

The chain link icon, used to represent links, fared the worst of all. Around 60% knew that it was a picture of a chain, but only 45% said it was used for linking. Many thought it was a paperclip, for attaching, and 25% didn’t even attempt to guess what it represented on a computer.

Now what?

My research shows that there’s definitely some confusion around the meaning of most of these icons. But I’m advocating their continued use because basing them in real-life objects makes them familiar to some users, if not all. Ultimately, the most important thing is to have icons that make it clear to as many people as possible what they do in the interface. It’s better to have 80% of users see the floppy disk, dig back into their memories of childhood technology and connect to this image as representing the act of saving, than have 100% of users see a downward facing arrow and wonder what it means.

We’ve already chosen to stick with familiar imagery in our written language. We talk about “stock tickers” and “diplomatic cables” even though tickers don’t actually tick anymore and none of the diplomatic cables published on WikiLeaks were sent using a telegraph. Our vocabulary has evolved past the objects the words represent and our visual language should do the same. If you disagree, then I challenge you to first stop using the phrase “hang up the phone,” because phones haven’t actually hung in decades.