meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

New Article: “Compassionate UX”

Sara and I wrote an article for UX Booth, “Compassionate UX”, and it was published last week.  Two quotes (out of a ~1,750-word article):

When we get laser-focused on positive outcomes, we often fail to notice how things might go terribly wrong. But whether you’re working on something as complex as artificial intelligence or as simple as a line of microcopy, you’ll create the best products when you intentionally set aside your goals of “delight” or “engagement,” and make time to think critically about where your product might break.

It’s easy to see this as an uncomfortable restriction on the creative process, and that’s actually a pretty accurate description. Of course thinking about users’ varied identities and emotional states creates limiting factors. But that’s what design is: it is a creative solution to a set of constraints.

Read the whole thing over at UX Booth.

Pathfinding

This is a thing I’ve been trying to figure out in my spare time, mostly noodling about in my head with various ideas when I have some down time, and now I want to know if there’s a formal answer of some sort.  It goes like this: in a lot of situations, ranging from airplane autopilots to self-driving cars (I think) to videogames, there are times when you want a moving object to get itself as precisely as possible with a known path.  For example, having the autopilot line up with the approach path for a runway.

So how is that done?  What’s the general approach to programming a moving thing to find, with decent efficiency, its way onto a given path in 3D space?  Or in 2D space, if that’s easier to understand?  I can think of a few naïve approaches, but none of them seem anywhere near robust enough to be trusted.

Design For Real Life Now Available

A banner showing ‘Design for Real Life’ in various media

Available as of this morning from A Book Apart in both digital and paper formats: Design for Real Life, the book Sara Wachter-Boettcher and I started writing not quite a year ago.

Anil Dash was kind enough to write a wonderful foreword for the book, in which he perfectly describes the background we were working against:

Two billion people now have some kind of access to internet technologies, and almost all of them are spending more and more time with their thumbs flicking across their phones. And the technology they’re using has a real impact on their lives. They don’t use an app to “share photos”; they use it to maintain a relationship with distant family. They don’t need to do “online banking”; they need to lend a friend money to help them out of a jam. Nobody wants to learn a complicated set of privacy controls; they just want to be able to express themselves without antagonizing bosses or in-laws.

Our thesis, against that, was to say, “As personal and digital lives become closer and effectively merge, the things we design will have to work harder and harder to deal with real people in all their messy complexity.  How can we start people thinking about this, and what tools can we give them?”  That’s what we strove to create, and now you can judge for yourself whether we succeeded.

I’ll be honest: we were pretty scared as we wrote it.  This is not a topic area that’s gotten a ton of attention, and in a lot of ways we were breaking new ground—but, at the same time, we were very aware that there was existing research and knowledge in related areas, so we wanted to be sure we were inclusive or, and respectful of, that work.  We talked to a lot of people in a variety of disciplines, trying to make sure we brought in information that would help the reader and not flying in the face of things that were already known.

So you can imagine our relief and gratitude as we’ve heard glowing reactions from people who read preview drafts—among them Kim Goodwin, Indi Young, Sara Soueidan, Caren Litherland, and Karen McGrane.  Paul Ford said, “Anyone who aspires to build global products that people love should read this book now,” and Kate Kiefer Lee said, “It will be required reading on my team.”

You might think cover blurbs like those are pure marketing fluff, and maybe in some genres they are.  For us, they serve double duty: to let you know that people who know what they’re talking about believe we know what we’re talking about, and also to let us know that.  There were days we weren’t entirely certain.

To be clear, this isn’t a book about forever treating people with kid gloves.  We say “compassion isn’t coddling”, and that’s absolutely the case.  An error message still needs to convey the error; an account lockout still needs to keep the account locked.  But how we convey errors or lockouts, and how we make people aware of the possible ramifications of their actions, is critical.  Just as there are good ways and bad ways to commiserate with a grieving friend or handle a difficult work situation, there are good ways and bad ways to approach people in our designs.

As I said before, we need to deal with real people, in all their messy complexity.  We hope Design for Real Life is the start of a whole new conversation within our field, one that will teach Sara and me just as much as anyone else about how we can be more thoughtful and humane in what we create.

Design for Real Life

The cover of ‘Design for Real Life’

On March 8th, 2016—just eight days from the day I’m writing this—Design for Real Life will be available from A Book Apart.  My co-author Sara Wachter-Boettcher and I are really looking forward to getting it into people’s hands.

The usual fashion is to say something like “getting it into people’s hands at long last”, but in this case, that’s not really how it went down.  Just over a year ago now, Sara published “Personal Histories”, and it was a revelation.  In her post, I could see the other half of the book that was developing in my head, a book that was growing out of “Designing for Crisis” and “Inadvertent Algorithmic Cruelty”.  So I emailed Sara and opened with:

Your post was like a bolt of lightning for me.  In the same way the Year in Review thing opened my eyes to what lay beyond “Designing for Crisis”, your post opened my eyes to how far that land beyond reaches.

After research and some intense discussions, we started writing in the spring of 2015, and finished before summer was over.  Fall of 2015 was devoted to rewrites, revisions, additions, and editing.  Winter 2015-2016 was spent in collaborative editorial and production work by the amazing team at A Book Apart.  And now…here we are.  The book is just a week away from being in people’s hands.

To celebrate, Sara and I will be hosting, with incredibly generous support from A Book Apart and PhillyCHI, a launch party at Frankford Hall in Philadelphia.  We’ll be providing some munchies, some tasty adult beverages, and there will be giveaways of both paper and digital copies of the book.  We’d love to see you there!  If you can make it, please do RSVP at that link, so we know how much food to order.

We chose Philadelphia as the site for our launch party for a few reasons.  For one, Sara lives there, so only one of us had to travel.  But to me, it brings some very personal histories full circle, because Philadelphia is where this really all got started.  It’s where Rebecca first went to be treated, where she was given the best possible shot at life, and where I started to notice the failures and successes of user experience design when it collided with the stresses of real life.

In a number of ways, this book has been a labor of love.  The most important, I think, is the love Sara and I have for our field, and how we would love to see it become more humane—really, more human.  That’s why we packed the book not just with examples of good and bad design choices, but of how we can do better.  The whole second part of the book is about how to take the principles we explore in the first part and put them to work right now—not by throwing out your current process and replacing it with a whole new, but by bringing them into your existing practice.  It’s very much about enhancing what you already do.

It’s been an intense process, both emotionally and work-wise.  We pushed as hard as we could to get this to you as soon as we could.  Now the time is almost here.  We’re really looking forward to hearing what you think of it.

Designing for Crisis, Design for Real Life

Back in October of 2014, at An Event Apart Orlando, I returned to public speaking with “Designing for Crisis”, my first steps toward illuminating how and why design needs to consider more than just the usual use cases.  I continued refining and delivering that talk throughout 2015, and it was recorded in October 2015 at An Event Apart Austin.  As of late last week, you can see the entire talk for free.

Vimeo: Designing for Crisis by Eric Meyer

There were a lot of strange confluences that went into that talk, some of them horrific, others just remarkable.  One that stands out for me, as I look at that screenshot, is how a few years ago, Jared Spool gave a talk at AEA where he discussed the GE Adventure Series, in a segment that never failed to choke me up (and often choked up Jared).  I remember being completely floored by that example, and at one point, based solely on what he’d said about the GE Adventure Series, I remarked to Jared that I occasionally thought about switching career tracks to become an experience designer.

Less than two years later, I stood in one of the first Adventure Series rooms at the University of Pittsburgh Medical Center, standing in the middle of a design I’d only ever seen on a projector screen, the same room you can see in the screenshot above, as my daughter’s head was scanned to see if the experimental medicine we’d been giving her had slowed her tumors.

Six months after that, I was talking about it on stage in Orlando, as an example of how designing for crisis can have spectacularly positive results.  The video we released last week came a year later, and is a much better version of that first talk.  I’m very happy that we can now share it with the world.

As I’ve said before, I came to realize that “Designing for Crisis” was just one piece of a larger puzzle.  To start exploring and understanding the whole puzzle, I recently finished co-authoring Design for Real Life with Sara Wachter-Boettcher, to be published by A Book Apart, possibly as soon as March (but there’s not an official date yet, so that could change).  In it, Sara and I explore a small set of principles to use in approaching design work, and talk about how to incorporate those principles into your existing design practice.  The book is the foundation for a new talk I’ll be presenting at every An Event Apart in 2016—including this year’s Special Edition show in Orlando.

As soon as the book is available for order, we’ll let everyone know—but for now, I hope you’ll find last year’s talk useful and enlightening.  Several people have told me it changed the way they approach their work, and it serves as a pretty good introduction to the ideas and themes I’ve built on it for the book and this year’s talk, so I hope it will be an hour well spent.

Subgrids Considered Essential

Grid layout is a pretty darned fantastic thing.  I’ve been digging into it as I write the grid layout chapter of CSS:TDG4e, and there are more things in here than have been dreamt of in our layout philosophies.  One of the things I’ve recently come to realize is the power and necessity of subgrids.

To understand why, let’s explore a use case, which you can see in various forms on this test page.  I cribbed this use case pretty directly from Fantasai, but I’m going to be analyzing it a little differently.  The basis is a form with the various fields and labels in unordered list items, to help with accessibility and to be basically readable and usable if the CSS somehow fails to be applied.  The markup looks like this:

<form method="post" action="script.cgi">
  <ul>
    <li><label for=name>Name:</label>
        <input id=name name=name></li>
    <li><label for=email>Email:</label>
        <input id=email name=email type=email></li>
    <li><label for=tel>Telephone:</label> 
        <input id=tel name=tel type=tel></li>
    <li><label for=url>Homepage:</label>
        <input id=url name=url type=url></li>
    <li><label for=bday>Birthday:</label>
        <input id=bday name=bday type=date></li>
  </ul>
</form>

The basic form with no grids.

Ideally, we’d like the form fields to all line up into a column, and the labels to be in another column.  Furthermore, we’d like the label column to be only as wide as the widest label’s element box, and no more; the rest of the grid can be taken up by the input column.

This seems like a case tailor-made for grid layout, but there’s a problem.  Because grid items are only ever the child elements of a grid container, we can’t just apply a grid to the ul element and go from there.  Instead, we have to make each li element a grid container, in order to make each label and input element a grid item.  But that means each list item’s grid affects its children, with no reference to the other list items’ grids.  We can write the template we want, like so:

form ul li {display: grid;
  grid-template-columns: [start label] max-content [input] 1fr [end];}

Each list item a grid, but to what end?

That will get us a result almost precisely as if we’d applied no grids at all.  The only difference is that the input elements will all be as wide as their columns, according to the CSS Grid specification.  Chrome fails to do this last bit correctly, whereas Firefox Nightly gets it right, but otherwise the layout is essentially the same.  You can see this in the #form1 example on the test page.  (Remember, you have to have a current grid-supporting browser for the examples to correspond to what I’m talking about here.)

We can get closer to our goal by experimenting with a fixed-width grid column for the labels, figuring out the width of the widest label, and then just making all the label columns be that wide.  That would be written something like this:

form ul li {display: grid;
  grid-template-columns: [start label] 7em [input] 1fr [end];}

Using fixed-width columns to simulate a single column.

That works pretty well so long as none of the labels ever change—if a label is added (or edited) to be wider, it will wrap to multiple lines.  Alternatively, if the longest label is dropped or edited to be shorter, the label column won’t resize down.  It will just stay the same dumb fixed width until someone hand-adjusts it.  And honestly, at that point I may as well be using flexbox, which would do this version of the layout just as well, and would be more widely supported for the near to intermediate future.  At any rate, you can see the grid version of this in the #form2 example on the test page.

But what if we could set a grid on the ul element, and then make all the li elements grids that use their parents’ grid for the layout of their children?  That’s exactly what subgrids do.  This is the solution we’ve been seeking, in basic form:

form ul {display: grid;
  grid-template-columns: [start label] max-content [input] 1fr [end];}
form ul li {display: grid; grid: subgrid; grid-column: start / end;}

Here the list items establish grid containers, thus making the label and input elements into grid items like before, but are stretched across the two columns of the ul while using those very grid lines for laying out their child elements, plus those children influence the placement of their grandparent’s grid lines.  Thus, we can specify things like max-content for the label column size and have it Just Work™.

Or it would Just Work™, except that as I write this, none of the grid implementations have subgrid support.  Authors who want to create the kind of layout we’re after have to compromise in one way or another—either by faking the content-sizing with a fixed-width column, or by stripping down the markup until there’s barely anything left—thus sacrificing accessibility, progressive enhancement, and general best practices, as Fantasai illustrated in her article.

You can probably see a lot of other ways in which subgrids would be useful.  Take defining a full-page grid, the kind with a bunch of regularly repeating grid lines onto which various elements can be attached, like this one or this one.  In this scenario, being able to designate each section of the page a subgrid would let you have all the pieces inside that section participate in, and lay out in relation to, the overall page grid.  Without subgrids, you’d either have to make every element you want to lay out a child of the body element (or whatever you used to create the page grid), or you’d have to recreate segments of the page grid in each nested grid, and give up any hope of columns that can flex with the contents of multiple page sections.  Neither solution is appealing.

This is why I’ve come to the same conclusion other grid experts (like Rachel) already have: subgrids are a major component of grid layout, and should be a part of any grid layout implementation when it emerges from developer-preview status.  If that means delaying the emergence of grids, I think it’s worth it.

I say that because our field has a tendency to glom onto the first iteration of a technology, learn it inside out, hack around its limitations, and then ignore any future improvements unless somehow forced to do so.  If grid layout is released without subgrid support, we’re risking shoving subgrids into the back of the author-practices cupboard for a long time to come.  And along with it, potentially, grids themselves.  The frustration of trying to build layouts without subgrids will quickly become overwhelming for all but the simplest cases, leading authors to try and then discard grids as a serious tool.

First impressions matter.  CSS itself suffered for years from the initial impressions designers formed of “boring, boxy” layouts, and it still suffers from the handicap of being a presentation system without a layout engine at its core.  Grid layout is the first serious candidate to fill that hole in the past two decades, and I don’t want to see them hamstrung from the outset.  Subgrids are essential to the adoption of grids.  I hope they’ll be implemented as soon as possible, and before grids are pushed into public release channels.

A “Year in Review” Review

A year ago today, I went onto Facebook and was shocked by what I saw.  After a few moments, I started thinking through what had happened, and why, and decided to quickly blog about it.  Before a week had gone by, that post had become a news story covered around the world, showing up in newsprint and on web sites, leading to interviews and more.  There was a moment where I was sitting in my office with my daughter when she looked over, took in my expression, and asked me if I was okay.  I couldn’t speak for a minute.  The story had just hit TIME Magazine and the New York Times.  It was a truly surreal experience.

From out of that experience, a lot of things grew.  I realized that “Designing for Crisis” was one piece of a larger topic, started to get a handle on that topic, and teamed up with Sara Wachter-Boettcher to create a book which we just finished writing, title to be announced shortly, and expect to be on shelves within a few months.

In parallel to that, I was asked to talk with the design and content teams at Facebook, which I did in the spring of 2015.  It was an incredibly productive and honest discussion, entirely because the team at Facebook was truly concerned and open to change.  You can see how this has evolved over time in On This Day, whose messaging has become more human and sensitive to the possibility of harm.  And you can especially see it in the 2015 edition of Year in Review.

Year in Review’s timeline ad for 2015.

Whereas last year, the YiR feature was clearly designed around awesome years and happy people, this year’s is a lot more respectful and careful.  It isn’t as dynamic, but when it comes to memories, this seems entirely appropriate.  As Sara and I say in our book, this is “what it looks like when an organization embeds caring into its product, and is willing to own up to mistakes”.

I know the Facebook copy “we care about you and the memories you share” has been derided in some quarters, because people reflexively assume that no company (least of all Facebook) actually cares about you as anything more than a sales unit.  Maybe that’s true of some parts of Facebook—it’s a very large company, after all, with a lot of competing fiefdoms—but the design and content teams were writing from the heart.  They honestly do care about the people who use their products, and they care very much about how their work affects people.  They know they’ll stumble sometimes, but they’re committed to trying anyway and learning from their stumbles.  For that alone, they have my deepest respect.  To forge ahead in front of an audience of well over a billion people takes an incredible amount of courage.

Year in Review will be a part of the talk I’ll be giving in 2016 at An Event Apart, just as it was of Sara’s and my forthcoming book.  In brief, the assessment that you’ll find in both places: Year in Review 2015 is a significant step forward, a great example of compassionate design at scale.  I applaud Facebook for forging a path forward.

The Face of My Daughter

As Rebecca’s Boardwalk wound down, one of our friends came up to me to say goodbye.  “This was just great, such a tribute,” she said.  “I know it must have been a really hard day for you.”

Instead of replying directly, I thanked her for coming, because I didn’t know how to tell her that it hadn’t really been hard at all.  Not in the way she’d meant, anyway.

It was eighteen months ago today that, in the span of half a day, Rebecca turned six and died.  Although I have tried in various ways, there is really no way to express what that was like.  There is no way I have found to convey the feeling of saying goodbye to your child forever, nor of what it takes to tell her it’s okay to go.  Those who understand have done it themselves.  Those who haven’t, don’t, and I hope for their sakes they never do.

In the time since, I’ve devoted a lot of time and attention to grieving.  Just as Kat and I were with Rebecca’s last weeks, and with her cancer treatment, and as we have been with the raising of all our children, and in most of what we do in life, I have been—for lack of a better term—deeply mindful of my grieving.  I don’t mean to link it to the current fad of “mindfulness”, which I know next to nothing about.  I just mean that Kat and I always try to be present for the present, and keenly aware of the future.  Acting locally and thinking globally, temporally speaking.

What I’m really trying to say is that a couple of months ago, more or less, I realized that I had turned a corner.  The agony of immediate grief has passed.  When I think of Rebecca, and even of her death, it is not a knife in my heart and guts.  Sometimes it’s a dull ache, and sometimes it just…is.

And then sometimes, when I think of her, I think of the happy times and smile.  They are memories very much like those I have for Carolyn and Joshua, when I think back to a special day we shared, or a family trip, or a moment of accomplishment.  The sort of wistful, sweet, I remember-when smile that lightly touches the heart.  And if I then remember that there will be no more such moments, it is often felt as a simple fact of life, neutral in many ways.  I have, in a very real sense, accepted it.

I had imagined that I would one day be able to say this—in fact it was always a goal—but I expected it to take years.  I even wonder at times if I truly loved her, to have let go of agonizing grief so soon.  The rest of the time, though, I know that it is my love of her and her mother and her siblings—and more importantly, all their love of me—that has allowed this.

When I do grieve anew, it is usually for my other children, who must grow up without the sister they love so dearly.  But as Kat and I have showed them how to grieve, honestly and without shame or fear, now I hope to show them how to come to terms with it and find a kind of peace.

So yes, in my experience, time does heal wounds.  To heal is not to completely restore; I am not who I was and never will be.  That is always true, of course.  Every day makes each of us into someone new.  I changed irrevocably the day I first got married, and again the day I got divorced.  So too the day I married again, and the day Kat and I decided to become parents, and each time a child came into our lives.  And the day a child left us.

Deep wounds can weaken us, may even threaten our lives…and when they heal, scars remain.  This is the form of closure I have always sought: the stitching of a grievous wound, to let the ragged edges grow back together, slowly closing up to knit new tissue.  The mark is there, and will be until I finally die—but a mark is not an impediment to living.  Our scars are a part of us, and to deny them is to deny a piece of ourselves.  I know, because I tried.  For a time, I forgot the face of my daughter.  I remember it now.

Of course I still miss her, and of course some days are not so graceful as all this might sound.  Some days my throat still tightens with grief until my breath grows short.  There are not many such days, though, and fewer as time goes on.  Bit by bit, day by day, the pain eases and the fondness returns.  My memories of Rebecca are tinged more with affection than sorrow.

As she would want, really.  Her six-year-old ego, selfish in its unselfish way, would have wanted me to be sad that she went away; but her six-year-old spark, so bright and merry, would have wanted me to stop crying.  And sometimes, when I do feel the edge of grief’s blade come close, I can hear her say, as she did whenever she wanted my attention and wasn’t getting it, in her affectionately amused, slightly exasperated, wryly matter-of-fact tone: “Daddy, you’re getting distracted.”

And then I smile.

August 2016
SMTWTFS
July  
 123456
78910111213
14151617181920
21222324252627
28293031  

Archives

Feeds

Extras