Designing the Puzzazz Logo

One of the most popular posts on my web site is about logos: One Thing About Logos. I'll have to admit it surprised me, but, more than six months after I posted it, it still gets hits every day from people trying to figure out how to design a logo, or how to get somebody else to design a logo for them.

So, here's another thing about logos.

This is the logo that I created for my new puzzle web site, Puzzazz (which you can read about here). The first thing I did was define what I wanted the logo to convey. Puzzling, a sense of fun, solid, but not too professional.

Next, I put the word Puzzazz into a lot of different typefaces -- about one hundred in all. I really wanted to get a feel for the word and what would reflect my values. This was really useful, but I didn't pick the font just yet, although I'd narrowed it down to a set of about a dozen sans serif and lightly serifed fonts. Instead, I turned to what the entire logo was going to be.

With most logos, you have two basic options -- an icon or symbol plus text, or just text, possibly stylized or incorporating an icon as a letter. For an icon, you really need a solid icon and I just couldn't see that here. Most of the icons I could think of were tied to a specific puzzle type and the only one I had that wasn't was a "?" symbol -- and that just didn't work with Puzzazz. So, I started looking at the letters and what I could do with them.

Puzzazz has four Zs in it. Do you know how many words have four Zs in them? Not counting "pizzazz," which was the inspiration for Puzzazz, there are two (that's a bonus puzzle right there). But the four Z's are both an opportunity and a problem. I spent a lot of time creating Zs. I took Zs out of a bunch of the fonts I was considering and tweaked them. I created some really cool Zs and some really cool ZZ pairs. But, basically, they were all too cool. The Zs were so neat that the other letters were overshadowed and the whole word became harder to read. If I pumped up the volume on the other letters, the whole word just became wacky. So, I realized the Zs were more of a problem than an opportunity and I had to make them pretty normal.

So, I turned to the P, which isn't too surprising. After all, when a logo has a special letter, probably nine times out of ten, it's the first letter. It was at this point that the idea of combing the P with a ? occurred to me. I drew a few and realized it was time to figure out the overall look. So, I went to my narrowed-down list of fonts and picked one. Here's the font I ended up with:

If this doesn't look familiar, it should -- it's Arial Bold. But, if you compare the letter forms to what I ended up with, you'll see they're all different. Still I liked the overall letterforms and it's a lot easier when you have a starting point than if you start from scratch. First, I adjusted the weight of the letters to something I liked better, and I reshaped the Zs to decrease their heaviness and take away the rigidness that I feel the Arial Zs have. The angularity and steeper vertical lines also makes the negative space in the two ZZ pairs more irregular and more interesting, which is important to keep those letters from dominating. Next, I created the P, figuring out the size so I could get the ? in there and make sure both the P and the ? were completely readable without interfering with each other. Finally, I replaced the A with a completely new letter modeled on the U, which eliminated the visual breaks around the A and gave the whole word a more uniform look. With the logo almost complete, I tried a bunch of different sizes for the P (relative to the other letters) to see what would give me the best look, and I ran the logo by a bunch of people to get feedback on the sizing.

Now I was ready for color. I tried a bunch and liked a lot of them, so I decided to use them all and not have an official color for the logo. On the web site, you'll see the logo in 9 different colors. And here it is in another color:

Finally, as befits a logo for an internet site, I created a favicon of the P:

So how did I do? Let's review the key things that I said any good logo should have:

It's about one thing. The P is it.

There can be a second element for flavor, but it has to be subservient to the one thing. The rest of the letters, even the Zs, are not a second element -- they're just letters which fit the word, which was the whole point of drawing them. You could argue that the colors are a second element, but that's certainly subservient since, at any given time, you only see the logo in one color.

The logo must reflect the identity. Let's see...
Puzzling - What could be more puzzling than a question mark? And embedding it inside the P means that some people don't notice it immediately, which provides a nice discovery moment for them.
A sense of fun - I think the ? conveys this a bit and the colors help.
Solid - The weight of the letters conveys solidity. The Zs are simpler than many, which reinforces that.
Not too professional - The pointed corners on the Zs and the curves of the U and A help pull the logo back from being too professional.

The logo must look good in black & white. Got it, though I do think it looks great in color.

No tiny detail. Check.

I'm happy with it.

Takeaways From UX Office Hours

I had my first User Experience Office Hours today at StartPad. The idea is that, once a month, I'll spend half a day helping whoever shows up with user experience issues. It's free and I don't get anything for it (in fact, if you count parking, it costs me). I'm doing it largely to give back to the community, but I'm not oblivious to the fact that my efforts might indirectly contribute to a future consulting gig or even a job. Even better, maybe I'll benefit because somebody else with skills that I don't have will step up and end up helping me in the future.

One interesting thing today was how different and how similar my four visitors today were. Because I didn't say I was going to blog about it, I'm going to have to omit the details this time around.

Two of the people had completely unpolished user interfaces and two people had user interfaces that were attractive already. The four products were in four completely separate areas with radically different user bases. Two were pretty early and two were getting ready to ship.

Three of the four shared a common problem -- they were doing more than one thing. Here's a good rule: Do one thing and do it really well. This is a good rule for UX in general -- focus your UI on what you want to enable for your users and make every part of your UI resolve around it. But, this is a particularly good rule for startups. You simply don't have the time or luxury to do two or more things.

Put another way, your startup is making a bet. What is that bet? Figure it out and go all in. Don't make two bets or five bets. If you believe that your widget is going to change the world, don't also build an anti-widget just in case you're wrong. That's a way to fail even if you're right.

Not surprisingly, all four really needed to understand their potential users better. This is an issue even at big companies. There are lots of techniques for this, but, fundamentally, they all boil down to this: if you were a user, what would you want? One guy's project is for use by experts in a particular domain. He didn't even know how lucky he is -- there is no UI easier to design than one that's for experts. Experts know the domain, so you don't have to explain anything to them. They're willing to learn your product if it makes them more efficient. If you're a developer, think what you want from your IDE. Raw speed. Same here. This doesn't mean you should make it ugly, but looks certainly aren't the high order bit.

In another case, a small company had built some really cool technology which integrates with software from a certain large company. But, they're trying so hard to fit in that they don't stand out. In a large sense, their company is predicated on the notion that the big piece of software isn't satisfying the needs of some users. I think they're right. Yet, their small product looks too much like the big product. In terms of the user interface, it's similar in more ways than it's different. And they need to be different -- if the big product isn't satisfying user needs, they need to be less like it, not more like it. They need to understand those dissatisfied users, figure out how what they've built will satisfy those users, and put that front and center. Unfortunately, it's hard work, so this problem was the one where I was the least helpful.

All in all, I think it went well. I learned a few things myself and I certainly hope my visitors found it useful. Future office hours will be on the third Thursday of the month, so that makes the next one Thursday, October 16th, from 2-6PM at StartPad. Maybe I'll see you there.

What's a Mockup For?

Back when I was at Microsoft, I participated in a couple of UI design competitions. Someday, I'll write about the one where we had 15 minutes to design an interface from scratch in front of a live audience. But, today, I'm writing about one where we had the luxury of a whole week to design an interface from scratch.

I was assigned, at random, to a team of four people, competing against three other teams of four people each. We were given the challenge on Monday morning and we had to present it to the entire group on Friday. I have to confess I can't remember exactly what the challenge was, but it was something to do with databases.

We had to analyze the situation to determine the key pain points, come up with an approach to address those pain points, design the user interface that would accomplish that, and create a complete presentation with showcased our interface and explained why it was the best possible solution. We had a decent, balanced team, with people with different strengths, so it was not hard for us to do those first few things. By Tuesday, we knew what we wanted to accomplish and we had sketched out a design on the whiteboard in my office. We were on our way! But, while many teams had artists, our team didn't have one. We'd seen some pretty slick presentations in previous weeks and we knew there was no way to pull that off.

We decided that our best course of action was to present hand-drawn interfaces, much like we had on my whiteboard. So, after trying a few different techniques, we ended up drawing pieces of the interface by hand, scanning them in and then adding text in PowerPoint. It made for a pretty effective presentation. It got our points across, but the drawings didn't look like we were trying to show off.

Recently, I ran across a tool designed to make UI mockups that captures the same spirit. It's called Balsamiq Mockups. This week, I needed to draw some UI mockups and I thought I'd give it a try. First the bad news: Balsamiq is not a perfect product. It has some interface flaws that make it clunkier to use than it should be. Case in point: rather than a toolbar or a fixed property pane, Balsamiq Mockups has a "Properties Inspector" which appears and disappears, moves around, and changes its content depending on what you have selected and where. When it first appears, it's basically a gray-on-gray mess and nothing in it is targetable until you move the mouse pointer over it. It's a bad attempt at interface innovation (and a bit surprising for a product for people creating interfaces).

But don't let the bad news discourage you. The fact is that it's a pretty good start. He's got a healthy set of interface elements, a good way of editing them quickly and efficiently, and a nice automatic gridding system that helps you lay out your interface elements. And, none of the flaws got in the way of my knocking out some pretty decent-looking mockups in just a few minutes, much faster than it would have been in the tools I use most frequently -- Photoshop, Illustrator, PowerPoint, or even just typing text (which is probably my most common mockup creation tool). The example below was done in about a minute. And the Balsamiq Mockups results accomplished exactly what I wanted to accomplish -- they let me play with my concepts and get my points across.


I'm hoping that the author (who refers to himself as "one guy in his studio") fixes some of the flaws and resists the temptation to make it into the next great UI design tool instead of a great mockup tool.

It's important to remember that a mockup is just that -- a mockup. It's not the final UI. There are times for pixel-perfect mockups and there are times for concept mockups. We already have some great products for the former; it's nice to see someone build a product around the latter. Now we just have to figure out when we should be using each tool.

Spam from GMail

I really like how GMail matches its advertisements to the content of my email. In this case, I had just marked an email as spam:

Real World Worst Case Design

My father-in-law has Alzheimer's, so when I saw a post about a device that was supposed to help people with dementia, of course I read it.

The Memento Memory Lifebook is designed as a "wearable mobile product solution" to serve as a multi-faceted holistic mobile memory aid device as well as providing a security safeguard for elderly individuals with mild-to-moderate dementia.

It's a cool concept, the designer (Peter Sin Guili, a product design student at LaSalle-SIA College of the Arts in Singapore) thought a lot about the problems of potential users, and the design reflects thinking about those problems. That's a good start for any designer right there. The design is a "diploma project," meaning it will probably never see the light of day as a real product. Unfortunately, that's probably a good thing. I say it's a good thing because I think the design is off-base for its target market. And I say it's unfortunate because it would be great if there were a product that could help like Peter aimed to.

To say that there are special needs for people with dementia is an understatement.

Even in the early stages of Alzheimer's, I saw a gap between what my father-in-law thought he could do and what he could actually do. After retiring, he acquired a PC at home (he'd had one at the office), but, despite many hours of computer lessons, he was unable to learn how to use Outlook Express, Quicken, or Internet Explorer. They were the only programs he needed and they're not complicated programs.

As the disease has progressed, that gap has widened. At this point (about five years in), he has lost many skills that he once had. He thinks he can drive, but he can't. He thinks he can make phone calls, but he can't without assistance. And, perhaps surprisingly, it's more likely that he could drive than make a phone call on his own. If you're not going any place in particular, driving is very reactive -- the car is moving and you respond to what's happening. (I'm not saying this is safe!) But, to make a phone call, it's necessary to remember the number being dialed, and which digits you've already dialed, from start to finish. It's beyond him. And the gap applies even more to learning new things than to things that he already knows. At one point, we considered getting him a simple cell phone (like one of the ones with just two buttons) but we realized it would make less sense to him than the cell phone he already had and couldn't use. Even though it's simpler, it would be new. As he has declined, we kept thinking of technological solutions to help him and kept realizing that they wouldn't help at all.

In executing the design of the Memento Memory Lifebook, the designer made a list of things that would be a problem for someone with dementia, then came up with solutions for each of those problems -- a phone directory, a GPS locater, an RFID scanner for tracking belongings, medical reminders, photo reminders, etc. The device has a few clearly-targeted functions, clearly marked with simple icons. For many situations, those would be good designs.

But, the dementia patient doesn't know what they don't know.

They're confused, but they think they don't need any help. This means that, here, you need to look at the worst case, not the best case, or even the average case, and the sad reality is that people with dementia won't be able to figure out a device lke this at all or, for that matter, remember to use it. Normally, worst case design means that you're trying to avoid breaking in the worst case -- optimize for the average case, survive the worst case.

Here, we need to optimize for the worst case, because all of the users will eventually get there. And, unfortunately, the intended users are incapable of learning to use and using the device. From my experience, I think this is probably true even with people in early stages of dementia. And we complain when users don't read the manuals! Looking at the worst case, I would posit an underlying design axiom -- the product has to work without user interaction. For example, I see my father-in-law wandering around his house, looking for something to remind him of what he's supposed to be doing. He always thinks he's busy, but he can't remember what he's busy with. If you took the idea of using an RFID sensor and made it programmable by a caregiver, then made it announce recognized places and objects automatically as they were noticed, you might have something. But, even then, there are huge hurdles, like having him remember to wear this foreign object, him wondering why it's talking to him, etc. I honestly don't know if there are any technological solutions that can help.

It's nice to see designers, even a student designer, thinking about problems like this. I do applaud that. And I wish it was an easier problem.

See also: Gizmodo, MedGadget.

Stupid Password Policies

I have a friend who has a whole bunch of passwords written down, on a whole bunch of Post-It notes, right next to her computer. Why on earth would she do that? Well, it's not her fault. It's the fault of overzealous web sites that not only force her to have complex passwords, but have conflicting rules. She can't make up one password that she uses everywhere.I frequently recommend that people make up a rule for their passwords -- for example, name of their dog and a number, followed by something they can associate with the web site. This way they only have to remember a single, simple password but have a more complex password. This way, they might have passwords like spot3nile for Amazon, spot3junk for Ebay, spot3green for American Express, etc. But even this fails miserably because there are so many different conflicting standards. It's all part of the fake security that so many web sites have.Here are some of the password policies that I've seen recently:

• no restrictions at all
• 6 or more characters, no restrictions
• 6-8 characters, at least one non-letter, symbols are recommended
• 6-8 characters, at least 1 letter and at least 1 number, and at least 1 symbol
• 6-8 characters, at least 1 letter and at least 1 number, and at least 1 symbol
• 6-8 characters, at least 1 letter and at least 1 number, no symbols allowed
• 8-12 characters, at least 1 uppercase, 1 lowercase, 1 number, no symbols allowed
• 6-8 digits

I'm sure the list could be much larger if I did some research. In addition to this, there are case-sensitive and case-insensitive passwords. The thing I hate the most is the insistence on an upper case letter (the USPS web site is one of the sites that does this). I invariably forget the requirement and can't log in. Maybe if their web site said "don't forget: our stupid password policy means that your password has an uppercase letter in it" it would help me. I even use one web site where they use a Flash object that times inter-character intervals to see if it's really you typing your password. If you don't type your password in the same way, they ask you one of three random follow-up questions to make sure it's you. Without fail, every single time I have logged in, I have been asked one of the follow-up questions. Why not just ask it in the first place?!To make the whole situation even stranger, many sites provide a password reset mechanism which is incredibly easy to break. All you need is my zip code and my mother's maiden name, or some nonsense like that. I don't think I've ever seen a question that my brother and my wife wouldn't know the answer to. Hell, my kids know most of the answers!Who exactly are these password policies helping? 

Update: Serendipity! Just saw a New York Times Bits posting on pretty much this same topic: Falling Over Fallback Password Questions. An extra point from a comment that I wish I'd remembered -- how many sites are there that, after requiring you to use a ridiculously long and complex password, that you may well be using on other sites, simply email it to you in plain text when you go through the reset mechanism? What are they thinking?

Form Over Function

I recently bought a Jawbone Noise Assassin Bluetooth headset. The Jawbone, in many ways, is a designer's dream, starting with the packaging, which is incredibly elegant -- a clear plastic shell that contains black, folded paper boxes, a delight to open and explore. The headset itself is gorgeous. It's small, lightweight (about 1/3 oz), and comfortable. It comes with leather-wrapped earloops in two sizes, plus two more thin ones designed for use with eyeglasses, and three sizes of earbuds. It comes in black, silver, and gold.

There are a lot of nice touches to the design. One example: the first time you turn it on, it automatically starts in pairing mode so you can connect it to your phone. And, of course, it has the main selling point -- world-class background noise elimination which uses a combination of a patented voice-activity sensor and "advanced DSP algorithms," which have been improved singe the original model (the Jawbone Noise Shield). It may well be the best Bluetooth headset on the market. But, despite all this, there are a couple of significant missteps -- in which the designers have gone for form over function.

Buttons Aren't Bad 

First, for some reason, the designers seem to think that buttons are bad and they tout the fact that there are no visible buttons. Here's what they say:

No Visible Buttons
The "invisible button" policy at Jawbone accomplishes a clutter-free look. Touch-surface technology allows the user to operate switches by lightly pressing the outside shield.

I don't object to invisible buttons per se, but it seems the desire to hide the buttons has overridden the usability of the design. Take a look at the position of the Talk button:

How do you press this button? Well, basically, you press the whole headset into your ear. I don't know about you, but pressing a headset into my ear isn't comfortable, even with a super lightweight headset like this. To turn the headset on or off, you have to press that button for 2 seconds. I will note that this is an improvement from the first Jawbone, where both buttons required pushing the headset into your ear and they took noticeably more pressure to activate. Next time around, how about positioning the buttons so that you press them by grasping the top and bottom of the headset?

Standards Aren't Bad

Second, for some inexplicable reason, the Jawbone uses a completely non-standard power adapter. It has an elegant connector -- small, shaped to fit the Jawbone, and it attaches with magnets. It's a huge improvement from the very wacky, hard-to-fit adapter from the first Jawbone. But, why does it exist? Most small devices like this use a mini-USB connector and there is a new, smaller micro-USB connector standard. I have half a dozen devices in my house that all use a mini-USB connector. Why doesn't the Jawbone use a standard connector?

I could excuse it if they were trying to create a new standard -- perhaps a magnetically attached USB connector that others could use. But they're not -- their connector will never fit anything else because it is shaped to fit the headset. Sure, it's elegant. But, it's not elegant enough to override the pain of the extra cable. I have chargers for my cell phone at home, in my office, and in my car. But I have to carry the cable for the Jawbone around if I want to be able to charge it with me wherever I go. When I travel, I'll have to take an extra cable just to charge my Jawbone -- and, if I forget the cable, I'm screwed.

Documentation Isn't Bad

It's minor compared with the other problems, but the folded, white-on-black documentation, while gorgeous, is inadequate. How many volume levels are there? (Since the volume cycles only one way with a button press, you need to know this -- it's 5.) What is the funny sound I hear sometimes when I'm wondering around my house? (I think it's an out-of-range indicator.) How do I end a call? (Press the Talk button.) Is there anything else I need to know? How about a little table?

The Jawbone Isn't Bad

There are some other nits. For example, the LED indicator light, which lights in both red and white to indicate different things is underneath my finger when I'm pressing the Talk button. The LED lights up to confirm that 2 seconds has elapsed when I'm turning the Jawbone on or off, but I can't see it. Maybe I just have big fingers.

In the end, I still recommend the Jawbone Noise Assassin, but not by much (and I also recommend it over it's predecessor, the Noise Shield). It's a good headset, but it would be a home run if they fixed these flaws. For me, the advantages of their design, including the noise elimination, just barely outweigh these disadvantages.