Making simple, elegant solutions is HARD and often invisible. These are some of the most common things I hear when heading for a bad UX decision.

And before any veteran designers go ripping me a new one, these are rules of thumb intended for a 101 audience. They do not apply in every circumstance. However, you must know the rules to know when to break them, and that requires varsity-level skills.

1. “I’ve got this really great idea for a site.”

I’ve seen entire sites built to do something no one wants, and it’s more common than you would believe. How, you may ask, does this happen? You start with a solution and then go find a problem it solves as justification. We get ourselves into this situation because of a lack of research into where peoples’ needs and frustrations lie.

2. “I’ve got this really great idea for a feature.”

Developing new features is most often at odds with making an interface that’s easy to use. Features have a technical cost, but the UX cost is much higher. Make the happy path supremely happy by rigorously pruning off features from the UI that are wanted by only 2% of users. For features 20% of users will need, it’s ok to make that flow a bit more lengthy. You’re optimizing for the sweet spot of tasks 80% of users will need. I’m sure *you* have never been guilty of having a pet feature. I’m sure everyone will want to use it. Avoid long fights on where in the 80/20/2 scheme the feature falls by employing a/b metrics and user testing. Otherwise, the loudest or HIPO (highest paid opinion) in the room will likely prevail.

3. “Let’s put a sentence under the button to explain.”

You can’t document your way out of a confusing UI. Remove half the words. Then remove another half. Kinks in the UI can usually be resolved by the next bullet point…

4. “What we’re doing here is so novel.”

Reuse existing paradigms. People don’t want to read unless required, so use patterns to make reading mostly unnecessary. The user must recognize which mental model is in use or else be able to quickly and correctly learn the model. Breaking a paradigm is serious, varsity-level stuff. Find someone who’s trained if you are convinced you need a novel pattern.

5. “I think the button should be on the right.”

It’s not about opinion. Here’s how you make design decisions. Step 1. Adhere to patterns in your designs. Ahem, we just covered that. Step 2. Test. Users are weirder and more interesting than you can imagine. Step 3. Go back to step 1 and refine with what your learned. Even pros (especially pros) test their designs. You can’t afford not to validate your assumptions. You MUST test with real people to escape your biases. Additionally, when you make a decision independent of data, you have a process that is vulnerable to organizational politics and maneuverings.

6. “We don’t want the user to do XYZ thing they want to do … Let’s make that path really arduous.”

If your users want to do something you don’t want, it’s time to closely examine why. Fix the root cause. Chances are this is damn hard or you would’ve already done it. Still, there’s no better solution. Fighting your users is never a winning strategy.

7. “Maybe we need a FAQ.”

Only put the information where/when the users will need to use it. In a flow, there should be a clear path for the user to take (either a CTA or a clear choice). The most important information on each page should be OBVIOUS. Think of every page a user would likely land on from search as a mini-homepage. Your site should have a purpose, and it should be clear to the user. Users should have enough context to know where they are within the structure of the site and what other related info is available.

8. “Can’t we just pop up a confirm dialog?”

Confirm dialogs are of the devil. Prevent errors. Support undo. Again, don’t document that something is dangerous if you can fix the danger. Instead of putting a sign up saying there’s a giant hole in the road, repair the hole or let the driver hit the magic button to fix the muffler that fell off.

9. “Let’s split this flow up into different steps so it seems smaller.”

Don’t lie to users. Set expectations appropriately. Wizards are usually not the answer. Make the flow smaller. Every field you ask from users reduces conversions. Also related “This thing is taking a long time, can we add a spinner?”
No, make it faster.

10. “Make it red so it will really stand out.”

There comes a time in every designer’s life where they have to learn about the birds and bees. Red is a very wonderful color in the palette. It’s saved for that special person, i.e. error text, critical system warnings. If you must use red because you’re a fire department or Ohio State University, use yellow for errors.

These things don’t get talked about nearly enough.

11. Navigation

Your site should be organized in the way your users think about it. If your nav mirrors your org chart, you didn’t make the decision with data. I guarantee users don’t think of your product the way you do. To escape your own bias, you’ll need metrics and analytics to understand what the most common tasks your users are trying to solve. Then, card sorts and tree testing can distill that into the correct, mutually-exclusive taxonomy with jargon-free labels.

12. Copy

Did I say jargon-free? To know what your users call things, you have to ask them. Those card sorts sound stupid easy, right? So go do it. Jakob Nielsen has great guidelines for writing for the web. In short, keep it short. Users scan in a F shape, so keep keywords toward the beginning of the line and especially in the headers. This is no place for cutesy language.

13. Login

Do you really need login or can you do the same thing with a cookie? Delay it until absolutely necessary even if so. Give users a way to gradually engage with your site. They won’t make an account until they understand the value. A registered user is like gold, so treat them as such. Nothing will destroy your engagement of returning users faster than forgetting who they are, so persist user sessions FOREVER. Go assign yourself that bug to make links from your emails automatically log them in.

Further reading

Steve Krug, Don’t Make Me Think

uxmyths

It’s Complex To Make A Product Simple

13 Signs Your Site Needs a UX Exorcism is a post from: Crystal Beasley, UX Designer at Mozilla

I’m using this to improve the password field for Mozilla’s identity project. Join the discussion in comments here or on the github issue.

Simple: Getting users to pick strong, memorable passwords is a post from: Crystal Beasley, UX Designer at Mozilla

Yes, this is a post about Mozilla, but you can generalize to any open-source software project. At every conference I hear the same refrain, “Why is design so hard in open source?” It’s so hard because *drumroll please* it’s not made a priority. None of the top decision-makers are designers. Period. The End. You can stop reading.

Without someone in the c-level or steering committee with a design background to speak on users’ behalf, Mozilla is missing out. Engineers and business people see entirely different challenges. Without all sides (technical needs, business needs, user needs), we have a giant blind spot.

Chief of Experience? Never heard of one.

If everyone jumped off the bridge, would you do it too? It’s true, there aren’t many tech companies, especially open-source ones that have a design representative at the executive level. Google, Microsoft, Opera, Facebook, Intel, Amazon and even Adobe lack it. There are some surprising companies that do. Oracle has a Chief Evangelist of User Experience. Flipboard has a Head of Design. Nokia and Yahoo have a Senior VP of Design. You might’ve heard of the most notable SVP of Design, Johnny Ive of Apple. You’ll note titles of this position haven’t settled down, not surprising given the short time the discipline has been around.

There’s an opportunity for Mozilla to be the first big open-source tech company to deeply bake design DNA into the process. Gary (CEO) has been exalting us to to produce a kick-ass product. UX and UR are a source of innovation. Further, prioritizing around user needs is essential to making an excellent product.

One bit I didn’t expect in my survey was that the Chief of Design is a well-established role in car companies. Tesla, BMW, Volvo… they all have one. It’s curious to me because car manufacturers are entrenched in technical, mechanical requirements as well. Seems as though they’ve figured out that it takes more than the feature list and specifications to sell cars to people.

Get to the point

1. UX is an objective discipline, not something based on feelings about which shade of blue is prettier.
2. It should be an organizational priority that blocks projects from launching in the same way the infrasec does.
3. UX is vital part of every project. We shouldn’t DO a project unless a trained interaction designer can ensure user needs are met. Until UX is included from the very beginning, before requirements are written, it will be chasing after product and engineering.

So what do we DO?

1. We need someone with an interaction design background at the c-level and/or steering committee.
2. Hire UX at a sane number. The ratio in my group is 30:1. It should be around 4:1.
3. Until we can do that, hire contractors to pick up the slack.

[Video: the ROI of User Experience]

[Post: We Tried to Warn You, Socializing UX into organizations]

Chief eXperience Officer at Mozilla in 2012 is a post from: Crystal Beasley, UX Designer at Mozilla

A little background for those unfamiliar: Ziba is an experience design firm here in Portland. If you’ve seen a recent Wacom tablet or the beautifully high-low TDK boombox, you’ve appreciated their work.

Two things stood out to me about their offices.

Emphasis on the individual contributor

Yes, the giant roboman is awesome, but look across. Right when you walk in the lobby, the wall behind reception is covered in the names of the employees. It might seem like a small thing, that is unless you are one of the names on the wall. The list contains the current employees in chronological order of when they started to work for Ziba. The talent is really all information/innovation companies are. This might not resonate as much in non-Westerners where the highest good is to be part of a whole, but from this little girl from Arkansas, much respect.

Project rooms

The desks at Ziba are kept deliberately small. There are no cubes. The desks are arranged into long rows. Funny thing was, almost no one was at their desk. Kai said and observation confirmed, folks spend the majority of their time inside project rooms. The uninitiated might assume it was merely a conference room where no one had bothered to clean all the stuff off the walls.

This space was organized around the core idea that the best, most creative work is done when you get people out from behind their desks into a big room. Squeezed together around a big table, people can cheat off their neighbor’s test paper, or as we call it in the professional world, cross-pollination. As they develop concepts, mockups are printed out and pinned around the room. They have giant format plotters for printing oversize documents. There are post-its from various brainstorming methodologies confettied across the walls. Whiteboards are covered in elegant scrawls.

Because the room is dedicated to a client, you never have to clear off the walls to make room for someone else. The cruft can accumulate. The importance of this not obvious at first, but is key to the creative process. You have to absorb the idea or form for at least a few days. The most important benefit of the project rooms is to never lose ideas – pin them up – and then to be able to connect previously disjointed thoughts or see new patterns that spark further ideas. This space allows time for designs to live and breathe so you can properly figure out what is working. You’ll walk in one morning and it’ll be obvious what to do next. This can’t be rushed.

Ziba generally keeps one project room per client. There may be more than one project in the room at a time. It’s a big benefit to keep the design languages consistent as each takes shape.

I also spoke to Bill DeRouchey, former Interim Director when this building was brand new. He was in their previous space as well. The project rooms there had been retrofitted into the existing footprint, not as perfectly. He said they didn’t have enough for all of the work to go in project rooms, so mockups, notes, cruft flowed out into the halls. Some of the best insights were from someone not assigned to that client randomly walking by and stopping to take a look. It’s an open question whether the serendipity from this imperfection is worth more than the clean beauty and efficiency of the current space.

Kai said clients make great effort and take great pleasure in coming to work in “their” project rooms with the creative teams. I asked how they extended the experience when clients aren’t able to travel on a regular basis. Not surprisingly, they’ve cooked up a clever solution. There is a panoramic camera that takes a 360 degree shot so they can pan and zoom around and see how things are morphing.

I hope to steal this trick and the project room concept for Mozilla. Project rooms are by no means a shocking new idea for agencies. They’ve been using them for years. I’m writing this to bring it to light so that engineering-driven companies who have in-house design groups like Mozilla can steal this idea. Designers’ needs are distinct from developers and not so obvious.

The key bits are

• expansive whiteboards
• pinboards
• post-its
• a way of printing things out in large format
• a large conference table in the middle
• a great team that constantly curates the room and evolves the vision

All in all, Ziba is an inspiring, beautiful place filled with unnecessarily clever (ok, maybe necessarily clever) people. I suspect it’s a wonderful space to come to every day.

Spaces shape creativity: Ziba project rooms is a post from: Crystal Beasley, UX Designer at Mozilla

You know Kenneth. From 30 Rock. The one who’s well-meaning, goofy, clumsy, sweet and… charming? Or something not quite like that. His earnestness makes you want it all to work out for him, but you know it won’t.

My Android tablet, the Samsung Galaxy Tab, is Kenneth.

Its helpfulness is enraging. There’s a bright little bring-a-ling chime that happily informs you that the battery is going to die. At least, that’s what I think it means. It reminds me despite the fact that it’s 4:13am, and that waking me means it’s in mortal danger.

Why, indeed, is the chime a peppy tune? The UX doesn’t naturally map to a dead battery. Dead battery sounds to me like slow, falling, sonorous tones. When you wake the device to see what was so very important, there’s no notification. So, I’m not even sure what the chime means.

Kill. Kill. Die. Die. Die.

Ok, I feel better.

===

UPDATE 11/16/2011 – My trusty iPhone, though the battery was so dead it shut itself off at 10pm, saved enough juice to sound my wake up alarm the next morning. MY HERO!

My Android tablet is Kenneth Parcell is a post from: Crystal Beasley, UX Designer at Mozilla

There aren’t many things more viscerally experienced than a protest. It’s got all the right components: big crowds, a common purpose you’re passionate about, defiance of authority and the accompanying tinge of danger.

For me, that danger was foremost in my mind. A funny but serious post went up on the weekly rag, The Portland Mercury, ominously titled Read This Before You Protest: An Open Letter to Occupy Portland from a Public Defender It gave sober advice that being arrested is a real, painful, annoying, costly possibility. I wrote the only phone number connected to a landline that I knew of on my arm in marker, as directed, so I could place a collect call from jail. Combine that with the macing by the NYPD at Occupy Wall Street protests days ago and Portland’s problem with police violence going back some years.

I pondered, “should I go at all?” How could I best limit my risk. I am tiny. You many know this already. I am 5’2″ and people don’t believe me when I say I weigh more than 100lbs. (I do.)

Possibility #1: Put on my sturdiest boots, a nice brown hiking pair. Look tough. Grrrrrrr. Could I get my hands on a bullet-proof vest on short notice? These are thoughts in my head.

Possibility #2: I am vulnerable. Go with it 100 percent. Put on my bright pink scarf and lipstick. Walk out of the house exactly as I would on any other day. My theory being that looking entirely the opposite of the stereotype male hooligan in black shitkickers would mean that even if I did get in a tight spot, I’d be most likely to have someone protect me. My exaggerated femininity would be my shield. Let’s be honest, I might need someone to scoop me up from danger, whether it be BY a cop or FROM one.

I decided that I was actually safer by looking more vulnerable. When faced with something that you’d rather hide, you can either hide it really well or you can play it up even bigger. So yeah, I went with option two. Did you even think for a minute that I wouldn’t? That hiding it bit rarely works out well anyway.

Fight to be authentic. Your strength lies there.

The reality was there were no arrests in the crowd of 10,000. It’s Portland. We’re so polite we sat down on the ground when they asked so that everyone could see and hear. I hope as the protest continues through the night in Chapman and Lownsdale squares as peacefully as when I left it.

“First they ignore you,
then they laugh at you,
then they fight you,
then you win.”

–Mahatma Gandhi

Crowds continue to fascinate me. If you’re interested in a scholarly tome on the issue, I can’t recommend Elias Canneti’s Crowds and Power highly enough.

UX of a Protest: Occupy Portland is a post from: Crystal Beasley, UX Designer at Mozilla

My goal was to grab users as they landed anywhere on our support site, throw them over to usertesting to watch them navigate our site to find information that solved their support issue.

The first couple tests I did failed hard. Not a single user successfully finished a video. Ouch! The conversion funnel from screener to finished video is a long and arduous one.

via Nate Bolt, Ethnio

Here’s what I learned in three weeks of tuning and tweaking.

Usertesting.com

Make an account and create a new task. Choose to have Ethnio pay the incentives. I still don’t have 100% completion rate, so I request twice the number of users that I ultimately need. You just write to support@usertesting.com and have the extra credits refunded afterward.

URL

Usertesting requires a URL that will be shown to the participant when they start the test. This was a problem for me because I was recruiting from all over the site. There was no way to pass the participant’s original URL from Ethnio. When I used our homepage as the start page, it changed the users’ behavior. The hack I ultimately went with was to make a static html page that said “thanks, please close this tab.”

simple html page

Scenario:

Today we would like to watch you as you would normally use our website to solve whatever task it was that brought you to us. Please speak aloud as we virtually peek over your shoulder so we can learn how you use our site.

Tasks:

1. Please tell us what brought you to support.mozilla.com (example: I googled it and found this page.)
2. What issue are you trying to solve?
3. As you use our website, please keep talking and saying what you’re thinking. We’re especially interested in hearing if you find anything confusing or frustrating.

Take the URL it generates and move onto setting up Ethnio.

Ethnio

FYI, you may need to do start the Ethnio setup first to get the javascript you’ll need to have on your production server. I had to wait an extra week waiting on the code to ship. You can these edit settings at any time, so it’s no problem to use fake info at first. The setup is broken into five steps.

Setup

There’s nothing tricky here. Follow their prompts.

Invite

I had to be specific that I needed them to start the task immediately. Some users were going about their task and then coming back after to fill out what they thought was a survey.

ethnio screener

Questions

Two important yes/no questions are “Does your computer have a microphone?” and “Are you okay with us watching and recording your computer screen and voice?”

Thanks

The white screener will show to users who aren’t selected for the study. In the right-hand green box, turn on activate branching logic. This will bring up all the extra options you’ll need to wire in usertesting.com.

The light green box is the screener that users who’ve been selected will see. Users will automatically be selected and sent of to usertesting.com from there without further intervention from you. The right-hand blue box is where you put the URL that usertesting gave you.

At the bottom of this page is the logic that will let you filter out the users that don’t match your criteria. You’ll need to filter out users who said they don’t have a microphone and those who don’t give consent for recording their screens.

Activation

This is where you get the js activation code. There are other options here but js is the way to go for live recruiting. When you’re ready to start your test, toggle on the test on the screener tab.

Paying incentives

After the participant has completed and uploaded their video to usertesting, you’ll see their email address. You can then search the recruits page and mark them as completed by clicking on “new.” This will make them appear on the incentives tab where you can then pay them.

mark as completed

Ethnio + Usertesting.com for real-time unmoderated usability testing goodness is a post from: Crystal Beasley, UX Designer at Mozilla

Post in collaboration with Bram Pitoyo, Digital Design Strategist & Typographer at Wieden+Kennedy.

Firefox joined Safari in supporting hyphenation. Despite CSS coming out 14 years ago in 1996, we’re just now getting some of the fine-grained controls necessary for beautiful typography. Details of the proposed spec at Mozilla Developer Network.

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

Words need to be hyphenated because paragraphs need to be justified. But do you know why most justified texts aren’t very readable even though it looks visually pleasing at a glance? It’s not because they’re justified. It’s because they’re not justified carefully.

Mental exercise: why is the documents you’ve justified in MS Word so hard to read compared to a book? Justified text in books looks great because a lot of things have been adjusted:

1. Margin kerning. E.g. hanging punctuation.
2. Character kerning. Ie. letter-spacing needs to be made tighter or looser to make the appearance more even to the eye. ^[1]
3. Additional kerning for specific characters. E.g. when typesetting French, you’d need to add a word space before (:) and after («»), and a thin space before (?), (!) and (;). ^[2]
4. Word-spacing. You can’t rely on spacing that’s mechanically widened to fit the paragraph width.
5. Ligatures. Ie. when you letterspace loosely, ligatures should be turned off.

Justified text in a word processor doesn’t look pleasing because, well, the application doesn’t come with most of these settings.

But how far ahead (or behind) are web browsers in this department? All browsers have a setting to tweak word and letter-spacing (though not finely), and turn ligatures on and off (different browsers, different syntaxes). ^[3] Problem is, you’d need to adjust everything manually.

Firefox does allows for fine control of letterspacing, although it’s the only browser that does. Here’s a great discussion of this still frustrating topic on the Treehouse Agency blog.

Sure, everything I’ve just described kind of returned us back at square one. But this isn’t to say that justified text isn’t appropriate to use on the web. Here’s how you can start today:

Many of us have control over words on the webpage, even as designers and developers. We can add, remove or change words around to make the word-spacing more even. If not, we have the capability to ask the copywriter sitting in the next room if this nicely-fitted wording still conveys the meaning just as well as the last version.

Since doing this to every paragraph isn’t practical, you might want to limit the use of justified spacing to shorter bodies of text that are easier to control in terms of wording. Longer subheads and introductory paragraphs are perfect.

Sources:

1. http://texblog.net/png/blindtext.png
2. http://www.microsoft.com/typography/developers/fdsspec/punc.htm
3. http://marc.baffl.co.uk/browser_bugs/css-ligatures.html

Web typography: hyphenation & justification is a post from: Crystal Beasley, UX Designer at Mozilla

Login persistence has to be one of my top three UX annoyances. I see it everywhere, on tons of sites, big and small. Login friction is a huge problem and yet so many get it wrong.

I have a couple of theories about why this is. Login persistence seems like a minor issue and it’s never URGENT so it never makes it up to the top of the list to get fixed. Also, there’s no real upside for a developer in reducing security. Setting the login cookie to expire in a year or never means someone *could* impersonate a user on a shared and/or public computer. OH NOES! They could add tons of comments to your TPR report generator site in someone else’s name! OH THE HORROR!

To add insult to injury is that damnable little “remember me” checkbox. Does it ever do anything? I’d like it if when I checked the box it would make the developer rip a really big windy at that moment. I digress… People are sad when you forget them. ALWAYS REMEMBER PEOPLE.

Amazon has sorted this out. They have millions of people’s credit card numbers. They are a giant retailer. Their risk is much higher than yours and yet, they let you put stuff in your cart, show you recommendations based on your personal information, and see the contents of your cart. It’s when you checkout that it triggers you to login. At that point, you have a very clear task to accomplish and are motivated.

How motivated are your users? I hope you’re providing a richer experience to users who are logged in. Yet users are only motivated to login when they have a specific task to accomplish that requires it.

Proposal for best practice is this: have users logins persist forever. If you have sensitive info such as ecommerce, reauth right before they access that info. To keep your pretty databases from filling up with random sessions, delete the cookie if a user hasn’t logged in after two or three months. That way even infrequent users will never have to reauthenticate.

We made this change on support.mozilla.com and it has been very well received.

What complexities do you think this would introduce?

UX Best Practices: login persistence is a post from: Crystal Beasley, UX Designer at Mozilla

Photo by Jim Fruchterman, distributed under creative commons license

Do your team meetings to discuss what/how/when to build XYZ new hot thing feel a little too much like a session of the United Nations Security Council? Wouldn’t it be nice if you had those headsets that translated designspeak to devspeak and vice versa?

I’ll be speaking at WordCampSF this Saturday, Aug 13th about communication strategies that will improve your team relationships and help you have more productive conversations.

Hot damn! I was on the homepage of slideshare for a minute!

Being “right” is not enough is a post from: Crystal Beasley, UX Designer at Mozilla