Categories
A Book Apart Advocacy art direction Best practices Design Designers Happy Cog™ industry

Expressive Design Systems

Yesenia Perez-Cruz started her career as a designer at Happy Cog Philadelphia. From the first day, her design gifts were unmistakable. As her career progressed, she moved from one challenging role to another. At companies like Vox Media and Shopify, and at conferences around the world, she has been a design team leader, a popular speaker, an advocate for design systems, and a voice of our industry. Today that voice took book form.

Expressive Design Systems, the first book by Yesenia Perez-Cruz, is now available from A Book Apart.

Categories
blogger Blogroll Blogs and Blogging Design Designers glamorous

My Brunch with Jen

Today my daughter Ava and I had brunch with my old friend Jen Robbins at P.S. Kitchen, a vegan restaurant in the Theater District/Hell’s Kitchen. Jen was present for, and actively participated in, the very beginnings of the creative and blogging web, and her famous book, now in its umpteenth edition, is still the best introduction to web design I know—probably the best that will ever be written.

One of Jen’s early sites, “Cooking With Rock Stars,” consisted of short video interviews she made with the likes of Jack Black, Rufus Wainwright, and others. Her show predated YouTube by five to ten years and podcasts by fifteen. It was way ahead of its time while also being a great reminder of what the web, in its infancy, was like. The rock star interviews are also fun and fascinating and deserve to be seen again.

Categories
Advocacy An Event Apart climate change Design Designers eric meyer film

Rams

By arrangement with the director, we show our audience Gary Hustwit’s “Rams”—a documentary about product design icon Dieter Rams—during the extended lunch hour on Day II of our three-day UX & front-end conference event. I just finished watching it for the fifth time.

We’ve shown Gary’s film in every city of our tour this year, and each time I’ve watched it with our attendees, I’ve seen new things in the film, and been ever more deeply moved by it.

Rams’s work, and his message to designers seems more important now than ever before. Not only should every designer see this film; I wish every human being would see it.

Brian Eno’s ambient minimalist score feels like an audio correlative to Rams’s design principles. Although it’s used sparingly, every sound counts.

The film’s final shot, where Dieter walks off into the woods, always makes me tear up.


You can watch Gary Hustwit’s film at special events worldwide, on Vimeo, at upcoming An Event Apart San Francisco (our last show of 2019 and the last time we’ll screen Gary’s film), or by ordering it from the director’s company.

Categories
Best practices Career engagement eric meyer facebook Happy Cog™ industry

Unexamined Privilege is the real source of cruelty in Facebook’s “Your Year in Review”

UNEXAMINED PRIVILEGE is the real source of cruelty in Facebook’s “Your Year in Review”—a feature conceived and designed by a group to whom nothing terrible has happened yet. A brilliant upper-middle-class student at an elite university conceived Facebook, and college students, as everyone knows, were its founding user group. The company hires recent graduates of expensive and exclusive design programs and pays them several times the going rate to brainstorm and execute exciting new features.

I’m not saying that these brilliant young designers are heartless, or that individuals among them haven’t personally experienced tragedy—that would be mathematically impossible. I have taught some of these designers, and worked with others. Those I’ve known are wonderful people who want to make a difference in the world. And in theory (and sometimes in practice) a platform like Facebook lets them do that.1

But when you put together teams of largely homogenous people of the same class and background, and pay them a lot of money, and when most of those people are under 30, it stands to reason that when someone in the room says, “Let’s do ‘your year in review, and front-load it with visuals,’” most folks in the room will imagine photos of skiing trips, parties, and awards shows—not photos of dead spouses, parents, and children.

So it comes back to this. When we talk about the need for diversity in tech, we’re not doing it because we like quota systems. Diverse backgrounds produce differing points of view. And those differences are needed if we are to put the flowering of internet genius to use actually helping humanity with its many terrifying and seemingly intractable problems.

If we keep throwing only young, mostly white, mostly upper middle class people at the engine that makes our digital world go, we’ll keep getting camera and reminder and hookup apps—things that make an already privileged life even smoother—and we’ll keep producing features that sound like a good idea to everyone in the room, until they unexpectedly stab someone in the heart.


1 Of course, not all my former students and employees work at Facebook; most don’t. But those who have gone there had other, equally lucrative options; they took the job to make Facebook, and maybe the world, a little better.

Categories
Design Usability User Experience UX

Designer Blindness

AFTER USING the web for twenty years, and software for an additional ten, I’ve come to believe that I suffer from an affliction which I will hereby call “designer blindness.”

Put simply, if an interface is poorly designed, I will not see the data I looked for, even if it is right there on the page.

On a poorly designed table, I don’t find the column containing the answer I sought.

On a poorly designed interface, I don’t push the right buttons.

On a poorly designed social sharing site, I delete my data when I mean to save it, because the Delete button is in the place most designers put a Save button.

This doesn’t happen to everyone, which is why I call it an affliction. Indeed, it happens to almost no one.

My non-designer friends and family seem quite capable of using appallingly designed (and even undesigned) sites and applications. Somehow they just muddle through without pushing the button that erases their work.

In fact, the less concerned with aesthetics and usability these friends and family members are, the more easily they navigate sites and applications I can’t make head nor hair of.

Like the ex-girlfriend who mastered Ebay.

Or the colleagues who practically live in Microsoft Excel, an application I still cannot use. There are tabs on the bottom, way below the fold, way past where the data stops? And I’m supposed to scroll a blank page until I find those tabs? It’s easy for most people, but it never occurs to me no matter how often I open an Excel document. I could open a thousand Excel documents and still never think to scroll past a wall of empty rows to see if, hidden beneath them, there is a tab I need to click. Just doesn’t occur to me. Because, design.

It’s not a visual or mathematical disability. If something is well designed, I can generally use it immediately. It’s the logic of design that trips me up.

I recognize that I’m an edge case—although I bet I’m not the only designer who feels this way. Give me something that is well designed, and I will master it, teach others about it, and unconsciously steal my next five original ideas from it. Give me something poorly designed, something that works for most people, and I’ll drive a tank into an orphanage.

Not that I’m a great designer. I wouldn’t even call myself a good designer. I’m just good enough to get messed up by bad design.

Yet you won’t hear me complain about my designer blindness.

See, divorce is a terrible thing, but if you have a kid, it’s all worth it. The heartache, the anger, the loss of income and self-esteem, the feeling that no matter what you say or do, you are going to be someone else’s monster forever—all the unbearable burdens of failed love and a broken family are worth it if, before that love failed, it brought a wonderful child to this world.

For my daughter I would suffer through a thousand divorces, a million uncomfortable phone calls, a trillion emotionally fraught text messages.

And how I feel about my kid is how I also feel about my design affliction. The pain of being unable to use what works for other folks is more than compensated for by the joy of recognizing great design when I see it—and the pleasure of striving to emulate that greatness, no matter how badly I fail every time.

Categories
Usability User Experience UX

Broken All the Way Down: Seeking Basic Information from Southwest Airlines

I was taking my daughter to Laguardia Airport to meet her mom, who would then take the girl on to Chicago for a few days’ holiday-time visit. Laguardia is a large airport, with many terminals, and as I hadn’t bought the ticket and wasn’t flying, I didn’t know which of the many terminals to go to.

So the day before my daughter’s trip, I visited Southwest’s website and punched in the flight number. It is a recurring flight from New York to Chicago that takes place every weekday at the same time. The website told me that the flight had left for the day. It couldn’t tell me the terminal of departure or anything else.

Next I punched in the confirmation code for my daughter’s flight. Her mother had already checked her in, and sent me a digital copy of the boarding pass, which I needed to get through airport Security, and which also didn’t have a terminal or gate number—not surprisingly, since, even for a recurring flight, gates aren’t typically assigned until a few hours before the flight departs. I didn’t expect a gate, but a terminal would be nice. When I punched in my daughter’s confirmation code, there was still no sign of a terminal.

So I scoured the entire Southwest website. No mention of terminals anywhere.

I then used both Google and Duck Duck Go to run every query I could think of that might tell me which terminal or terminals Southwest departs from at Laguardia. Neither search engine was able to return anything of the slightest use.

I began to think that Southwest might have a problem with its markup, and its content strategy, and with any additional findability voodoo that usually gets called “SEO.”

Even maps of Laguardia and maps of airlines at Laguardia and records of flights from New York to Chicago and other Giles-like aracana I eventually thought of were unable to produce a tiddle of information about which terminal at Laguardia plays home to all or even some of Southwest’s flights.

When all else fails, call the company.

As you might expect by now, it took work to find Southwest’s phone number on its website, and when I did find it, it was one of those 20th Century mnemonic numbers that are hard to use and rather meaningless in the age of smartphones: 1-800-I-FLY-SWA.

You will not be surprised to learn that I sat through a long, unskippable audio menu full of slow-talking sales puffery before I was offered the chance to say “agent” and speak to an agent (which I needed to do since none of the menu options led to the information I wanted). After I said “agent,” the robotic voice told me, “Okay, I will connect you to an agent,” and hung up on me.

I went through this three times to make sure I wasn’t going mad and there was in fact no chance of reaching an agent.

To summarize so far: basic information not on company website or, apparently, anywhere on the web. Hard-to-use phone number did not provide info in its menu, and hung up every time it promised to connect me to an actual human agent.

So I used the contact form on the company’s website to ask my question (requesting an answer the same day if possible), and to report the usability problem on the company’s phone system, wherein if a human asks to speak to an agent, the system agrees to provide an agent and then hangs up on the customer.

Today—the day after my daughter’s flight—I received via email a form letter from Southwest apologizing for not getting me the information in time (and still not giving me the information), and advising me to solve my own problems in the future by using Southwest’s super-useful toll-free number for concerns that require immediate assistance.

I guess the person who sent the form letter hadn’t read the second sentence of my two-sentence request for help, where I mentioned that the toll-free number was broken.

Here, in its entirety, is Southwest’s response:

Dear Jeffrey,

Thank you for your email. We certainly wish we had been able to touch base with you prior to your travel. We realize how important it is to respond to our Customers’ concerns in a timely manner, and we regret disappointing you in this regard. For future reference, you may contact our toll-free number, 1-800-I-FLY-SWA, for concerns that require immediate assistance.

We appreciate your patronage and hope to see you onboard a Southwest flight soon.

Sincerely,
Wanda, Southwest Airlines

The file reference number for your e-mail is 255648215756.

You can’t make stuff like this up. The last sentence is my personal favorite. There’s nothing like a file reference number to cheer you up after experiencing failure at every customer experience point you touched.

In the end, because my kid’s mom had shared the flight details, Tripit texted me the terminal information hours before I needed it. Terminal B, which is about two-thirds the size its needs to be for the amount of traffic it handles, was predictably mobbed with holiday travelers. There was not a free seat in the house.

Business is booming.

Categories
Design type Typography webfonts

Webfonts with Stylistic Sets from Hoefler & Co.

Now there’s a way to transform your web typography at the touch of a button: introducing Stylistic Sets for webfonts at Cloud.typography.

www.typography.com/blog/webfonts-with-stylistic-sets/

Categories
Code CSS CSS3 Design type Typography

Big, Beautiful Dropcaps with CSS initial-letter

Just beautiful.

demosthenes.info/blog/961/Big-Beautiful-DropCaps-with-CSS-initial-letter

Categories
Design Designers

Developer versus designer

TO A developer, the problem is a clumsy stacking of concurrently loading web views, interfering with the smooth functioning of JavaScript. To a designer, the problem is the idea sucks.

Categories
Design Usability User Experience UX

Managing Facebook Like. Or not.

I’M ON FACEBOOK. I want to see everything I supposedly “like” and prune the list of things I don’t. There should be a page where I can do this—that’s UX Design 101—but instead there’s just a sidebar box on my profile page showing a rotating, random sampling of liked items. The box is fine as an outward-facing device: on my profile page, it gives visitors a teasing hint of some of the cool stuff a deep guy like me digs. But inward-facing-wise, as a tool for me to manage my likes, it’s useless.

At the top of sidebar box, there’s text stating that I currently have “372 likes.” The text is a hyperlink. Here’s what should happen when I click that link: I should be taken to a page listing my likes (or the first, say, 100 of my likes, with a pagination tool). Each liked item should link to its corresponding Facebook page in case I need to refresh my memory about it. (This is the one part Facebook actually gets right.) More importantly, each liked item should be preceded by a checkbox. I should be able to check off 50 items on the page that I no longer like, and press a button allowing me to delete them all at once.

A number of elegant variations will occur to even the least experienced interface designer at this point: Perhaps there’s a drop-down allowing me to choose functions other than deletion; perhaps there’s a link to “select all” or de-select all; and so on. Such variations could make Facebook’s hypothetical best-practice “like management” page easier, faster, or more pleasant to use. But they are pretty much beside the point, as Facebook does not provide a like management page when I click that stupid link.

When I click that link, what I get instead of a useful, simple management page—the kind we’ve been building in hypertext for over 15 years—is a small, in-page pop-up window, with a scrolling sidebar … because, like the sidebar box, this window is also a tease instead of a tool.

Inside that scrolling box is every item I’ve liked. I have to scroll to see anything beyond the first handful of liked items. There are no checkboxes. There is no master switch to delete one or more items. There isn’t even an in-place deletion button beside each listed item, like the primitive edit tool in the first iPhone 3G.

No, my friends. There’s nothing.

If I want to delete a liked item, get this! I have to click the item’s hyperlink, go to the individual item page, and then hunt around on that page in search of a tiny link that would let me “unlike” that item. If I manage to find that link and unlike that one item, there’s no confirmation dialog, and I’m not returned to the floating box, because the item’s like page doesn’t know about the box.

All that JavaScript, and no connections. All those pages, and not even the most basic tools.

And nobody complains. Why? Because nobody really uses liked items. Indeed nobody really uses Facebook, except to post links and photos and comment on their friends’ links and photos. Liked items are for advertisers, they’re not for you. In Facebook’s estimation, you don’t need to remove a page you no longer like, because you are never going to visit it anyway.

Hey, they have the stats, they know what their users do and don’t do.

Facebook is a charnel house of features that appeal to advertisers and businesses without actually being used, supported by tools that don’t work, for people who don’t care.

Now I, uh, like Facebook fine, for the same reasons you do (if you do), and I generally ignore its well-branded but otherwise abortive gestures toward key features that have made it famous without actually doing a damned thing—“like” being the people’s Exhibit A. But as a designer, it bothers me, not only because badly designed things bother designers, but because badly designed things in a highly successful product spur a lust for imitation. I don’t want our clients to think “like” works. I don’t want them desiring similarly broken functionality on sites we design for them. I don’t want them thinking users don’t need tools that work, simply because millions of users don’t complain about broken tools on Facebook. Tools like like and its sad little pop-up.

Me no like.