One of the most difficult (and least talked about) facets of designing in any environment is presenting the work. As a designer, it’s been your job to determine how important content should get delivered to customers and prospects and readers, and the success of that presentation and interaction is directly tied to revenue and peoples’ jobs.

No pressure.

You were hired (in whatever capacity) because you’re the expert. You have training and experience and knowledge that others don’t, and you can leverage that to make the best choices possible. As such, you owe it to whoever hired you to insist on being the expert and to take full responsibility for the things you were tasked to do.

Yet, if you come into the meeting having busted down the door with a battering ram, immediately take a condescending tone, and talk about your design decisions like you just taught a master class a Harvard, you’re only going to isolate and demean the people crucial to the design’s success.

In my experience—and in others’, as I’ll show—there are some choices you can make to set the right environment for design presentation without having to take a negative or defensive tone. Here are three that I find highly important, and I’d encourage any designer (but especially greener ones) to give these some serious thought.

Giving Options

One of the more common problems which tends to create doubt and confusion is caused by the inexperienced and anxious executive who innocently expects, or even demands, to see not one but many solutions to a problem.

Paul Rand (not to be confused with Rand Paul, mind you) was one of the most influential designers of all time. In “The Politics of Design”, amongst several hangups that can occur in a corporate setting, he calls out the frequent request to see options. This is a bad practice that needs to be nipped in the bud—yet, just like spec work, you can’t wholly dismiss anything that looks like it on the surface.

It’s your job as the designer to explain why throwing several approaches out and merging together everyone’s favorite parts is the only approach that will definitely not result in the best work.

Theoretically, a great number of ideas assures a great number of choices, but such choices are essentially quantitative. This practice is as bewildering as it is wasteful. It discourages spontaneity, encourages indifference, and more often than not produces results which are neither distinguished, interesting, nor effective. In short, good ideas rarely come in bunches.

You must guide the process in which everyone does their part, but understands that it must be a singular effort. Multiple options simply gives room for personal preference to dictate direction, and that should have little-to-nothing to do with achieving business goals.

The designer who voluntarily presents his client with a batch of layouts does so not out prolificacy, but out of uncertainty or fear. He thus encourages the client to assume the role of referee. […] Bent on impressing the client with their ardor, they present a welter of layouts, many of which are superficial interpretations of potentially good ideas, or slick renderings of trite ones.

As Paul Rand points out, your uncertainty or fear can put clients/stakeholders in the exact wrong position. You’re essentially telling them you don’t know, but you had a few decent guesses. That’s an abdication of your responsibility. No designer knows the answer (because there usually isn’t one), but you shouldn’t pass that uncertainty on to others. It’s your job to bear and parse that uncertainty.

That said, options themselves aren’t the problem, and you shouldn’t dismiss it wholesale. For instance, I recently gave a client two choices during a branding project, but I didn’t start by saying, “Here are two things I thought of. Which do you like?” Instead, I clearly communicated that a branding process, especially for a new company, is often an exercise in unearthing existing concepts of identity. As such, I wanted to see which option seemed to align most with the client’s perception of the company. I presented an option that was playful and an option that was exceptionally refined, but made it clear that neither was to be considered a proposal for the brand. I asked for trust by going through the exercise.

It worked. Options aren’t wrong, but using them to pass along uncertainty is.

Asking About Personal Preference

I think it’s safe to say most designers understand that nothing should be build because Janine likes blue or Rahul likes the look of Amazon.com. We understand that personal preference is beside the point.

However, it gets tricky when the people who insist on advocating for their preference are the people who get to make the decisions. On one hand, you certainly want to please them enough to get a good design through. On the other, you know you’re not doing yourself any favors by following every whim conceptualized by the only people in the room who are not designers.

Too far one way: you’re completely dispensable. Too far in the other: you’re a complete jerk.

The secret is in your focus on the goal and your ability to get everyone focused on the same thing—that often begins by guiding the feedback.

You should almost never ask, “Do you like this?” Anyone who’s not a designer thinks “this” means “what we’re looking at”, but what you often mean is all the work that went into it to get there.

What you should really be asking is, “Does this align with your brand?” Or, in product design, you might ask, “Does this seem to enable users to accomplish the task?” You need to explicitly tell people what kind of feedback you need to get to move forward.

Personal preference isn’t irrelevant, but once you let that cat out of the bag, it tends to turn into a litter and take over the room. Your design deserves better. Even when I ask for thoughts, I’ve framed the conversation so that the thoughts are on that.

If someone is going to break the flow of the conversation to give you completely subjective preferences, they’ll at least have had to think about it and consciously decide to do so. Your job is to relate your design decisions back to research, best practices, or experience, and show how your decisions will lead to the ultimate success of the client. If you can’t do that, either admit that you don’t know the answer, but it’s worth finding out, or explain why you think it’s not important to the end goal.

Taking It Personally

Design is not pure art. It ought not be a personal expression of your life story. It can be artful; it can appear artistic. But you were not hired to be an artist. You were hired to solve problems, and those problems don’t need to be taken likely. Design is a job.

A wholesale rejection of your design is not a wholesale rejection of you. In fact, if you can remember this and not get all self-conscious in the middle of a conversation, you can very easily find all the things that people do like about it. The more you can explain about your process and decisions, the more places there are where agreement can occur. Go back to where the client stops agreeing with your process and discuss how to move forward from there.

When you find yourself getting bombarded by critiques that seem unfounded, heed Mike Monteiro’s advice:

When the client starts critiquing the work, listen to what they are saying. Don’t feel like you have to defend all of their decisions then and there. You also don’t have to promise them anything then and there. Sometimes it’s best to sit on it for a while. It’s perfectly fine to say something like “That’s interesting feedback. Let me think about it.”

Be the expert. Keep your authority, but understand that authority exists to help your client meet their goals. Tie everything back to that, and you’ll find yourself selling designs with more ease and less stress.

November 7, 2014 — Leave a comment — In Blog, Design, UX

tl;dr

I’ve compiled some great links and discussions on the merits of the hamburger icon (some of which include actual research), and I have an alternative to propose.

menu-alt-512As much as I can hate something that’s just a part of a graphical interface, I hate the hamburger icon.

If you’re unfamiliar, the hamburger icon are those three horizontal bars that you’ll find in the top corners of mobile apps, and increasingly on mobile websites. It usually represents a shortcut to a menu of some sort.

I hate it because it’s an example of designers assuming too much about what users will intuitively understand. Icons should help users find what they’re looking for faster, while taking into consideration the space given. This much discussed grouping of three bars doesn’t necessarily have a great track record of doing that.

Context

Screen Shot 2014-03-27 at 7.41.30 AMThis icon was, in fact, originally designed to represent a hidden menu, which is probably how it started getting used to represent off-canvas mobile menus.

I designed that symbol many years ago as a “container” for contextual menu choices. It would be somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button.

Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image.

Its history is duly noted—no one made it up out of thin air. That doesn’t mean, however, that it’s doing an adequate job. In fact, two decent tests have at least given some merit to the idea that the icon isn’t performing well despite its near ubiquity (Test 1, Test 2, Test 3).

Solutions

Many people have recently written about the pitfalls of the icon and what can be done to make things clearer.

But, the thing that’s driven me craziest about this icon is that it doesn’t take much more space to use the word “Menu,” which users definitely understand.

My good friend, Matt Smith, wrote about it recently, and gave the example of putting the icon in a bounding box with the word “Menu.”

menu

Getting there!

Now, Adrian Zumbrunnen recently explored improving the hamburger icon, and showed how the same idea Matt presented could be worked into a slick interaction.

Hamburger1

Even better! It gives the perks of context but saves the space.

But, I have one more argument to make. We can use a better icon for what this button actually does on mobile devices.

Replacement for the Hamburger Icon

These two icons more closely resemble what happens after a user taps or drags the icon. The icon with the dots on the left would be used on the left side of the screen, and vice versa for the right one.

It’s close to what exists now, so it wouldn’t be a huge stretch for users (they obviously haven’t all acclimated anyway), and it’s more in line with the mobile interaction. Whereas the original icon represented a totally hidden menu, these new icons represent a menu that’s technically hidden, but is really just off the canvas.

We ought to do better by our users than just relying on the precedent set for us by other designers. I’d love for this to be discussed and considered. I’d love to need to make this icon for people, or just begin seeing it soon. I’d love to see something like it, but better than what I’ve thought of.

I would just like to see us try.

July 4, 2014 — Leave a comment — In Blog, Design, Mobile, UX

Creating websites visually—without coding—is a reality today. Tools have advanced significantly. The concerns over code quality are, at least, diminishing.

You can now work with WordPress themes and plugins that will let you “drag and drop” elements of the layout. Building and customizing design has never been easier, and it will only continue to get easier.

Most of these tools were—initially, at least—built for designers to bypass or supplement development.

But, that functionality has successfully entered the sphere of the end user. Now, many of these tools promise “anyone” can build a website themselves, without code.

And I’m all for innovation, but, do you understand website design?

This is not a whiny post about paying designers. The word itself has become diluted. I’m talking about the practice that these visual tools enable: designing for something. Do you know how to do that?

Illusion of Explanatory Depth

obama-not-badIf you’re making this face, let me explain why what I’m asking is valid and not pretentious.

Humans are highly skilled at discerning cause and effect. We can discern causal relationships fairly easily, so we’re quick to judge objects’ relation to one another. This is good for us from a survival standpoint, but it can betray us.

However, while we are very good at inferring cause and effect, we do not always understand the mechanisms underlying causality. In fact, causality has been described as a “cognitive illusion”. Much of our understanding of cause and effect is based on associations, without a true understanding of how events are really related to one another.This lack of understanding is referred to the as the Illusion of Explanatory Depth. People may believe they have an understanding of mechanistic relationships because they understand one event causes another, but when asked to explain that relationship, they fail.

So, we might be fairly good at attributing causality when observing an event, but that talent makes us think we can reverse-engineer it.

Most people don’t make a decent living at design because they’ve managed to fool everyone around them. They do so because they understand the mechanics of how design works.

Designing for Ourselves

One thing that a good designer knows how to do is eliminate their own biases—consciously and often. And I’m not talking about just doing some basic research; I’m talking about after research and expertise have been exhausted.

In the absence of detailed information, we all work from assumptions about who the user is, what he or she does, and what type of system would meet his or her needs. Following these assumptions, we tend to design for ourselves, not for other people.”

Human Factor: Designing Computer Systems for People by Richard Rubinstein and Harry Hersh

Designers are good because they, first, know how to gather objective information to base a design upon, and then, they have a stockpile of informed “assumptions” about users. This is why many designers can make decisions seem like common sense—or even easy.

So, the less experienced in understanding these assumptions you are, the more quickly you’re going to run out of them. And the more quickly you’re going to tend to design for yourself.

Are Visual Website Building Tools Bad?

No, unequivocally. Blaming a tool is dumb, and you can’t blame companies for marketing their products to a market that’s ready to buy it.

And yet, their presence makes it tempting for just about anyone to start designing things “the way I want it”. That may be 100% fine if your website is for yourself. But, if your website is for other people (e.g. any business), the way you want it should have little-to-nothing to do with it.

I’m not suggesting you have to hire a designer for everything. But I am putting you on notice that it’s not as easy as moving things around until you make the “not bad” face.

If you’re set on using a visual tool and not hiring someone to help you, you owe it to your business to do these one or two things:

Work from Templates

Find existing templates for the visual tool you’re using, or look for common layouts amongst successful products like yours.

The temptation is to differentiate yourself by not looking like everyone else. That intention is duly noted, but you ought to make real sure that everyone wasn’t already doing it better than you’re about to do. Design is not a response.

Start Learning Design

Build a base of design understanding. Pick up The Principles of Beautiful Web Design or Responsive Web Design. Try to dissect designs from companies who you know are doing well because of their online design (i.e. a purely eCommerce site).

“I don’t think this is necessary.”

Fair enough. Maybe you’ll get lucky, and what you like in a design will also work for other people. Maybe you’ll see data that appears to affirm your decision, so you’ll attribute causality to your design.

I’m not saying it can’t be done. I’m just saying you’re leaving your design to the chance that your preferences connect with people well enough to support your business.

If you don’t want to leave your business to chance, get expertise by hiring someone or exposing and counteracting your own biases.

June 13, 2014 — Leave a comment — In Blog, Design, UX, WordPress

Inside the community of web designers, debunking the myth of “the fold” has been a consistent labor of love for years now (it’s losing ground to the carousel/slider antipattern).

Most folks understand that the concept of “the fold” comes from print, and that there are different screen sizes, and that it doesn’t directly translate. There’s plenty of questions that start there, though.

  • People are too impatient to scroll, right?
  • Isn’t content above the fold more important?
  • Doesn’t the call to action need to be above the fold?

Too often, us web folks are guilty of just yelling and rolling our eyes in response. Truth is, these are totally valid questions that just need a little context and sorting. I’ll give you clear answers and link you to some of the best articles.

Do people scroll?

Yes. Stop worrying.

Scrolling is natural and common for users now. Think about it: would a Mac operating system (Lion) opt to remove scrollbars entirely if it wasn’t a pretty common thing? I scroll, you scroll, we all scroll. There’s a bunch of articles that give you research to support it.

Now, you can encourage scrolling by making it obvious that there’s more content than is being shown on load. You don’t need to add arrows or text that says, “Scroll down”. Instead, you can make things look “cut off” to hint at the remaining content. This means little more than checking common viewport resolutions and ensuring none of them look totally complete on load.

Applying this research and logic, some of the newer designs that are full-screen on load with only text and a button in the middle would not encourage scrolling.

Is “above the fold” content more important?

Well, yes, but not because it’s above any “fold”, per se. It’s because your content should always be organized by importance to the user. As I cover in one of my talks, you’ve got about 10 seconds to make a value proposition, as users will read about 20% of the text on a page—if they stick around after an initial reaction to design and loading speed.

"...the distribution of user fixations along stripes that were 100 pixels tall. The bars represent total gaze time, as opposed to the number of fixations."

“…the distribution of user fixations along stripes that were 100 pixels tall. The bars represent total gaze time, as opposed to the number of fixations.”

For a pretty definitive understanding of the data behind this, the Nielsen Norman Group spells it out for you. They tested back in 2010, based on the then-common resolution of 1,024 x 768. The most popular now is 1,366 x 768—so, same height, but more width. In their eyetracking studies, they found user viewing time was distributed like so:

Above the fold: 80.3%
Below the fold: 19.7%

You can see from the graph on the right, though, that there’s not an incredible change in the trajectory of viewing time as it crosses “the fold”. Now, imagine that everyone wasn’t on the same screen; the difference starts to fade.

The biggest takeaway?

People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

That’s crucial to understand, and leads well into the final point.

Should the call to action be above the fold?

Maybe. It definitely shouldn’t be hard to find, or after an extraordinary amount of boring copy.

To get the full experience, read one of KissMetrics’s posts on the topic. Definitive, exhaustive, or conclusive? Not necessarily, but it proves the larger point quite well with some data and common sense.

Higher conversion rates have nothing to do with whether the button is above the fold, and everything to do with whether the button is below the right amount of good copy

That’s the ticket. If folks are ready to convert when they get to you, or they don’t take much convincing, of course you should have a call to action above “the fold”. But, if folks generally need convincing, putting the call to action up there could actually hinder your conversions.

Now that you’ve separated facts from common practices, you can make better decisions for your layout. You’ve ensured:

  • users know to scroll on load based on the design.
  • the content is good and is ordered properly.
  • the call to action is in the “right” place.

And now, you can start testing and optimizing your way to more success.

February 14, 2014 — Leave a comment — In Blog, Design, UX

Let me begin with this: I didn’t intend to have a presentation featured on SlideShare. I put up the deck for “Fearless: Adopting Brave Experimentation” because a couple of folks requested it following my talk at an AWDG meetup. Countless talented people actually design their slides for sharing online, so, how did mine end up featured, giving me nearly 20,000 views?

Turns out, I actually followed some of SlideShare’s own suggestions for getting featured. They give seven helpful tips, and I’d like to augment them with how I did on each, and how they can also help your live audience (the most important “views”). I think it’s quite possible to design a deck for presenting and sharing online.

Aesthetics

1. Write a powerful headline.

In this case, the headline of a slide deck should correspond to the title of a presentation. I’ve found that having an interesting and accurate title for your talk can set the proper context—it can also be the difference between a full room and an empty one. Take the time to come up with something interesting, then bounce it off others to see if it makes sense. Being clever is only awesome when it’s also helpful. Some of my recent ones include “No one cares about your content (yet)” and “Temporary Cache Assistance (The Transients API)”.

2. Create an enticing cover slide to draw in your audience.

Your cover slide is what your audience will be staring at for 2-30 minutes prior to your presentation. Don’t make them second guess their decision to hear you that quickly! 🙂

Here’re a few of mine:

3. Be well designed (no one likes looking at ugly slides).

I have the advantage of being a designer already, so that makes slide design a bit easier, obviously. If you want better looking slides, but don’t feel like you can design them well, go buy one.

Whether you design your own or not, make them easy to read, simplistic, and keep a common theme throughout. I like to use big images that I wash out with color to help with contrast.

Story Arc

4. Keep us engaged. Make your deck so captivating, the reader effortlessly clicks through to the end.

Easier said than done, am I right? I’m not even sure I would say my deck accomplished this, but it’s an important thing to strive for. Tell a story, and place the listener/viewer squarely inside of it. Narratives help explain complex concepts in small amounts of time—which sounds a lot like a presentation.

5. Fully communicate your message (keep it short, but still like a story).

I’ve struggled to end a talk well more than once—it’s tempting to throw in extra points that didn’t fit into the greater presentation, or to feel like a specific ending is a bit too dramatic. But, knowing how to end means that you’ve encapsulated a message, and that’s crucial. If you can’t fully communicate a message within a set of slides or your allotted amount of time, simplify your message.

Relevance

6. Tackle a news related or trending topic (lists are good, too!).

“Fearless…” is relevant to ‘hot’ topics insofar as it’s about UX, failure, and data. I think SlideShare’s tip here should be applied in a broader context, though: talk about something people already care about, and say something unique (or say something uniquely).

7. Be trend setting in terms of design, style, or content. Be something others want to emulate.

This is more easier-said-than-done advice, and a bit of a moving target. Ultimately, thought leadership and trend-setting is done by those who have something interesting to say and are able to convey it clearly. Go for that.

December 13, 2013 — Leave a comment — In Blog, Design, Presenting