This is a video of me giving a product design talk at our annual Product & Technology kickoff meeting in downtown Minneapolis. This is the 4th year I've presented at these meetings. Doesn't get any easier, but I do enjoy sharing what I know about UX, product design and craftsmanship.
Empathy for whom?
I've heard it said that the most critical trait for a designer to have is empathy. I think I agree with that. According to the Google, empathy is defined as ...
"the ability to understand and share the feelings of another."
Why is empathy important for a product designer?
In almost all cases, we are designing an experience that a person uses. Hence, the common word "user" is always associate with what we do — user, usability, user experience, etc. Unlike artists, our work is judged not only by how it looks, but also how it works. Is it easy to use? Can a user quickly understand it? Do they enjoy the experience?
As important as this trait is, I often see it applied in a subtle, yet incorrect manner. Scenarios like this often start with one of the following phrases ...
"What I think would work is __________."
"If it were me, I'd like it to work like this _________."
"You know what I think is a good idea?"
I know I'm guilty of this from time to time. Seems like we miss the boat sometimes as we attempt to be empathetic.
As designers, we can't just do what we would want if we were the user. When we do that, we are still bringing along all of our own personal preferences, expertise and preconceived notions. In a way, that's showing a self-centered form of empathy.
What I love about that definition above is the word "share". Its not enough to just understand, but we have to experience it ourselves for it to be true empathy. We have to take it a step further by putting ourselves in their shoes and really feel their pain points and look at the problem from their point of view, not our own.
How do we show empathy?
- Listen.
- Observe.
- Listen some more.
- Then ask questions.
So the next time we're solving a problem for a user, let's try to remember to apply true empathy.
AEA15: Career Advice from a Cranky Old Man
I have the good fortune of attending the premiere conference for web designers and developers in the country - An Event Apart (this time in Austin). Some notes below from the keynote presentation from Jeffrey Zeldman. Titled "The Fault, Dear Brutus (or: Career Advice from a Cranky Old Man).
- Our other jobs (before we became designers) give us perspective. Makes us thankful to be a designer. We are extremely lucky.
- Work never sells itself. You have to be able to explain your design.
- Never talk about aesthetics. Talk about the business problems you're solving.
- Attitude trumps work I'm most companies (great work + bad attitude = fired).
- In big companies, politics trumps work. Its not fair, its just how it is.
- First impressions are forever.
- We have met the enemy and he is us. We are the only thing standing between us and success.
- You need a good portfolio. Use sites like Dribbble and Behance if necessary to make sure that some of the work you do can be shown.
- Blog like nobody's reading. Blogging is how he ended up on stage today (inception joke).
- Don't wait for someone to hand you the dream job/project. Take it. DIY (do it yourself).
Kerning
There's no algorithm that the human eye can't best.—Alec Julien
Setting a Proper Corner Radius
Rounded corners are a key component in interface design. Apple's iPhone, in particular, vaulted these little rounded-corner square-shaped icons into prominence. You see rounded corners everywhere these days. And all to often, I see rounded corners that seem to have been executed as an afterthought. Designers: please spent just a few extra minutes making sure your rounded corners are done right. Examples of negligence are easiest to spot when a rounded-corner shape is inset inside another rounded-corner shape.
If the corner radius is the same for both shapes, you'll have problems. If Square A sits inside of Square B and is smaller than Square B, the corner radius for Square A also has to be smaller. See the examples below:
Its entirely possible that there's a Mr. Wizard math formula that will help you figure out how to adjust the corner radius depending on the change in size of the shape, but I'm not smart enough to figure that out. This doesn't have to be rocket science, though.
A designer's keen eye is often enough to prevent the problem. Spending just a couple of extra minutes paying attention to the details will make the world a better place, don't you think?
On Craftsmanship
When you're a carpenter making a beautiful chest of drawers, you're not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. You'll know it's there, so you're going to use a beautiful piece of wood in the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.— Steve Jobs, explaining something his father taught him
Check out this article on Fast Company, which describes the 6 Pillars of Steve Jobs' Design Philosophy.
Thank You, Steve
Its not often that we say someone has truly changed the world. That's certainly the case with Steve Jobs. I know I've been greatly impacted for the better because of his philosophy, inventions and influence in the world of web design. Long ago, he started changing the way people think about design and putting the proper importance on form in relation to function. I know I couldn't be doing what I'm doing today without him blazing a trail while I was still in elementary school. This is my favorite quote from Steve Jobs. It completely describes and even validates what I do. Thank you, Steve.
"Design is not just what it looks like and feels like. Design is how it works."— Steve Jobs
Five Fonts Designers Should Stop Using
I am a huge fan of good typography. That being said, there are very few typefaces that I really love. And there are a few widely-used fonts that I just can't stand. Sure, there are lists out there decrying the use of Comic Sans and Papyrus. That goes without saying by now, right? This isn't that type of list. This is a list of fonts that are otherwise perfectly acceptable by most designers. In fact, most people who read this list will think I'm crazy or just don't know anything about typography.
I'm not advocating that these fonts be completely uninstalled from all computers. Non-designers should feel free to mess around and use these fonts if they like. But designers can do better. Without further ado, let the countdown begin:
5. Futura
Ok, everyone can stop yelling at me now. Let me explain. Yes, I can't stand Futura. Sure, it looks great in diagrams and charts from old biology books from the 60s. But it is old and tired. There are much better choices for us now.
Recommended alternatives: Helvetica, Myriad, Frutiger
4. Trajan
This typeface should be reserved only for use in epic blockbuster movie titling. Maybe the reason I don't like Trajan is because I also hate the use of small caps. Again, there are simply better choices out there.
Recommended alternatives: Garamond, Goudy
3. Avant Garde
Another tired font that perhaps was once a great choice, but is now tired and over-used. According to Wikipedia, the term avant garde is French and "refers to people or works that are experimental or innovative, particularly with respect to art, culture, and politics." That's why we should stop using it. If we select this font, we're going out of our way to be perceived as "innovative". Let's put an end to that nonsense.
Recommended alternatives: Helvetica, Gothan, Din, anything else really
2. Lobster
We can all thank the Google Font Directory for this one. This font just screams "cliche" to me — in a really loud and annoying voice. Perhaps if you are making a logo for a restaurant, that may be the only acceptable use. I don't know, if you have a business that actually does involve lobsters, then maybe you can get away with this, but otherwise steer clear.
Recommended alternatives: Fan Script, Candy Script, Bello
1. Gill Sans
This is most likely the worst of the bunch. The only problem is I don't really have a good reason for disliking this font. But I just can't stand it. I have uninstalled it from my computer due to its offensiveness. Doing a Google search just now to look at some examples just makes me angry. Its so wrong in so many ways, I can't even begin to describe what I don't like about it. Typography kryptonite for sure.
Recommended alternatives: Helvetica, Gotham, Trebuchet, Museo, Facit, Din ... heck, even Arial is better!
Fireworks Interviews
Linus Lim has put together some really good interviews on his site, Fireworks Interviews. I always enjoy engaging with other Fireworks users and I learned a thing or two by reading some of the interviews. If you're a designer on the fence trying to decide between Fireworks or Photoshop, perhaps some of these interviews could help you decide. Or, if you'd just like to be inspired by some other Fireworks users, this is a nice resource.
Either way, check it out and while you're there you can read my answers regarding some favorite Fireworks features, how I use it and my thoughts on Fireworks vs. Photoshop.
Answering "The Fold" Question
My friend Andy shares what I think is the most appropriate answer to questions about designing for The Fold. And he says it more politely than I would.
Understanding Web Design
An oldie but a goodie. From the King of Web Design. →
Becoming a Web Designer
Recently, someone emailed me asking for advice about how to start a career as a web designer. After taking some time to organize my thoughts on the subject, I thought I'd share them here. What I love about the web design field is that it doesn't require any special certifications, formal education or any other traditional qualifiers. Everyone who has ever decided to start a career as a web designer has probably taken a different path to get there. The route I followed to get where I am today is unique to my life choices and circumstances. So it would be ridiculous to say that there is a preferred path or that one way will work better than another.
The great thing about it all is this: you get to choose the path! However you get there, here are some tips that might help along the way.
Read
Read everything about design/development that you can get your hands on. This is where it starts. We are fortunate, in this profession, that there is so much information available and that there are so many generous folks out there willing to share what they know for free. Read design magazines. Read tutorials and how-tos. Read some design books. The sources are virtually unlimited — you just have to want the knowledge enough and take the time to go get it.
Listen
I think I've mentioned before how hearing Jeffrey Zeldman speak at Web Design World in Boston in 2002 changed my whole perspective on web design and subsequently kicked my career into gear. If you've never been to a design conference, do yourself a favor and sign up for one. It really can change your life. I would highly recommend one of the An Event Apart conferences.
Practice
Publilius Syrus, a 1st Century Roman author said, "Practice is the best of all instructors." This is probably the most important part of the journey to become a successful web designer. Like any worthwhile endeavor, if you want to get better at it, you have to practice. If you want to become a web designer, then just start doing it.
I started off by looking at the code of other designers to see how they achieved certain effects. I spent a lot of time copying/pasting and deconstructing other designers' websites. I've also spent countless hours pouring over my own HTML or CSS code trying to perfect just the right look. It all takes time — and lots of practice.
So that's pretty much it. There are many ways to get there, but if you want it bad enough, then reading, listening and practicing will be your loyal companions along the way.