Notes and writing

When I was growing up, I didn’t dream about becoming a designer. I enjoyed creating, exploring, communicating, but I always figured I would settle on a more conventional career. To be honest, I don’t remember having a strong conviction to be a mother either. Yet here I am.

I became a mom around the time I started my first full-time, in-house position. We moved to California 6 months after I started, and a week later we learned we were expecting. You can imagine this threw a wrench in my plans.

I had anticipated spending my weekends exploring the coast, mountains, and forests of my new state, to balance the grind of the week that was already burning hot. Suddenly, I found myself swapping hikes for doctor’s appointments. Instead of grinding, I bargained with my boss to let me work from home a few days a week.

This was a hard time in my life. I felt tired, undervalued, and anxious about my visibility in the company. Oddly enough, though, the experience of becoming a mother made me a better designer.

I share this because I’ve seen others express concern that becoming a parent will negatively affect their career. Certainly, there are examples of toxic companies that only want to hire 20-somethings with no children or worldly commitments (though why anyone would fund leadership with such short-sighted expectations is beyond me). Parenthood teaches you ways of thinking about, reacting to, and experiencing life that you can never understand until you’re in it.

(more…)

The woman who gave the macintosh a smile

Susan Kare, the woman behind the original Macintosh iconography, is being awarded the AIGA medal today for her contributions to design. With our endless set of advanced design tools that allow us to manipulate pixels on the screen as if they were real, fluid things, her work is both impressive and refreshing. Her icons, constrained to 32x32px grids, are timeless, and continue to communicate volumes despite their references to ever irrelevant technology (floppy discs?). The images of her sketchbooks offer constant inspiration.

Chroma, by Ben Thomas

I am in love with the saturated style of this photographer. Don’t these just scream summer?

Kanye West is back on Twitter and basically wrote a self-help book

This week I followed Kanye West’s Twitter feed after he started posting truisms and gems of advice on creativity, mindfulness, and being true to yourself. Seriously, I want to print these out and paste them above my desk.

On social media as a creative tool

I’ve been trying to share more of my authentic self on Twitter, lately. It doesn’t come easy to me, which is strange because I am very comfortable with myself and expressing my personality in person. Anyway, as I dig into that, I was inspired by this collection of creatives sharing how they use Twitter as a tool. As an aside, I connected my feed to the Watson Personality Insights service from IBM and was impressed by the results (though I think it tells me I need to express more of my cheerfulness online).

Results of Watson Personality insights report

Follow me at @elou

Teach kids creativity. Ultimately, machines will be better at coding

We need to rethink the way we teach our children and the things we teach them. Creativity will be increasingly be the defining human talent. Our education system should emphasize the use of human imagination to spark original ideas and create new meaning. It’s the one thing machines won’t be able to do.

This was a refreshing perspective. In the rush to teach everyone to code, I’m not sure we’ve stopped to think about the roles humans will actually be playing in 20 years. Creative thinking allows you to adapt to new environments, adopt to skills, weather adversity, and find compassion for others. Love this advice.

Designing systematic colors

This deep dive into creating color systems is heavy but fascinating. I want to walk through each of these steps using a past project of mine to see where I could have improved and adopt this process into my workflow. (Bonus: I’ve bookmarked this video of Diana Mounter discussing color systems at Github I plan to watch this weekend).

This album of vintage Airstream photos

I’ve always loved the idea of renovating an old airstream and driving around the country in a nostalgic attempt to connect with bygone days of Americana. Honestly though, it was the outfits in all their polyester glory that caught my eye in this collection. I want.

Vintage 1970s Airstream Photos

Living with 2 rowdy toddlers and 2 even rowdier pups, I’ve developed an unconscious habit of softening my knees anytime they are horsing around.

I’ve only recently become self-aware of this. If I’m standing around chatting and a child goes flying by, my immediate instinct is to widen my stance and relax my knees without even pausing my conversation.

In movies, before a crash, the pilot will often say, “brace for impact.” But parents, skiers, gymnasts, and anyone used to or expecting to take a hard hit to the legs know that tensing up and bracing the body before a blow can do more harm than good.

Flexibility, combined with a strong foundation, makes us more resilient. The next time you’re facing a tough situation, feeling threatened, or standing your ground, pause. Consider whether flexibility may help you around the conflict.

The ability to adjust to conflict instead of trying to fight it will only make you stronger.

There is a growing trend throughout the web community to embrace an understanding of behavioral science, and to apply its tenets to our designs. This progress helps us walk the delicate balance between providing an emotional and pleasurable experience for our users and communicating content and information through clear, intuitive patterns.

When the web was first developed, it functioned as a large database, a means of transmitting information from one server to another. Its design was, inherently, mechanic, and placed little emphasis on experience or enjoyment. However, its usefulness as a computing tool was quickly surpassed by its potential to connect. The act of browsing the web grew from a personal, targeted experience (one person looking for specific information) to a multi-user and multi-use phenomena (countless people across the globe exploring a myriad of information and interactions).

Today, the web is a primary means of communication, information-gathering, and enjoyment. Its users have as many interests, limitations, and characteristics as they have faces. I cringe when I hear web design referred to as a facet of “Human-Computer Interaction”, or HCI. Computers are mechanical and thus unable to elicit emotional responses to their users’ needs. If we inject a personal element to our designs, then we can provide an emotionally-driven interaction that is more than just a series of inputs and outputs.

When designing for humans, we recognize the innate differences that each person embodies while accounting for the absolute similarities that all humans share: a sensitivity to group dynamics, emotional stimulation, positive feedback, and familiarity.

The Clique Mentality

Try as we may to distinguish ourselves as unique, the scientific consensus routinely points to our willingness as humans to adopt a “herding mentality,” wherein our decisions are weighted by what our peers are doing. Indeed, as Nir Eyal aptly points out in UX Mag, the need to feel social connectedness informs our values and drives much of how we spend our time. Scientists have found that there is a distinguishable range in a social movement at which this instinct kicks in, outside of which our decision to adopt a product (or opinion, or trend…) is left more to personal instinct than group persuasion. Malcolm Gladwell famously refers to this as the tipping point.

Knowing that this social phenomena exists leads us to dissect how popular sites use it effectively, and gives us direction to apply the successful attributes to our own projects. Facebook and Twitter are obvious examples. Their users interact with the content based on a “my friends like this, so I should too” mentality. This social validation creates a sense of trust. Trust is also achieved when content is posted by a trend setter—a leader in an individual’s network. Either way, the individual endorsement adds value to the content, and that value increases engagement, bringing return to the site owner.

There is no algorithm to when something tips, so agile designers have to build products that provide adequate incentive for the trend setters to participate while keeping all users engaged. There are a number of strong examples of this across the web:

  • Dribbble lists shots by popularity, and a popular shot can propel a user’s status skyward. Members of the community have an incentive to post high-quality content, be active in the community in order to gain followers, and post often to increase their chances of reaching the popular page.
  • Yelp relies on social validation as its core value. If someone you are connected to recommends a restaurant, that recommendation holds far more weight than a static review, and thus makes you more likely to try it out. Then, there is less social risk to posting about the restaurant after your visit since someone you know has already created a review, making you more likely to return and interact with the site again.
  • Alternatively, social media buttons may act as a negative social indicator. As noted by Oliver Reichenstein of Information Architects, a low “tweet”, “follow”, or “like” count can communicate that your content is not worthy of your reader’s trust or time. A high count may be seen as a personal advertisement, which can be just as much of a turnoff. Medium’s approach to the “tweet if you like it” button walks a perfect balance between class and effectiveness.

That button that says ‘2 retweets’ will be read as: ‘This is not so great, but please read it anyway? Please?’

Designing with Empathy

I am going to put it out there that empathy is the most defining of human characteristics, at least in so far that it distinguishes us from our robotic counterparts. It is that sensitivity to what others feel that forms the bedrock of our political, cultural, and social institutions.

Humans react to the emotional cues of their surroundings. Just as our actions follow a herding instinct, our emotions feed off of each other as well (e.g. “misery loves company”). Developing a content strategy that considers the user’s mood and disposition creates a personal user experience. As noted by John Caldwell of UX Mag, a consistent tone of voice makes a brand’s character believable and trustworthy. Without it, customers might have a contradictory impression of the brand.

An excellent example of a company who embraces a consistent, empathetic tone across their brand is Mailchimp. Their online document Voice and Tone provides excellent insight into how they combine friendly, useful micro-content with a strong brand identity.

screenshot of Voice and Tone, by Mailchimp
Mailchimp’s document Voice and Tone provides insight into how the company successfully combines empathetic copy with a strong brand identity.

We humans react to empathy in product design as well. Comprehensive user research and planning leads to products that are honest, usable, and meet our user’s needs and expectations. This applies to visual design as well as back-end design.

  • A site for children will likely have a whimsical, friendly tone, while a news or financial site will showcase a more formal visual aesthetic.
  • Sites that are optimized for mobile may serve lower-resolution images and utilize a simple, stripped-down interface in order to reduce strain on the user’s bandwidth.

However, empathy requires more of designers than simply making decisions based on the user’s demographics or other characteristics. A fallacy manifests, Ralph Caplan of AIGA points out, when we as designers misinterperet empathy to mean making decisions based on the observered characteristics of an individual; truely empathic design involves understanding how that individual adjusts their behavior as a result of that characteristic, and compensating our design to meet their altered needs.

Empathy in design focuses on the user as a person, not just a consumer.

In his book Designing for Emotion, Aarron Walter explains this as a hierarchy of our user’s needs: that a product be functional, reliable, usable, and pleasurable, in that order. In this context, we understand that an empathetic designer considers their user’s physical, mental, and emotional needs.

For example, the designer of a site for children may well choose a bright, whimsical tone for the pleasurable effect it would have on its young audience. However, they also may have considered that a bright palette will keep a child’s attention for longer, that a child may need more obvious visual cues in order to differentiate actionable elements, and that large, simple typography is more readable for young people.

As food for thought, consider Comic Sans. While mocking its usage has become a bit of a game for designers, its creator never intended for it to be used as body text, or really for any purpose other than to provide a friendly typeface for children’s applications. Vincent Connare, the font’s designer, realized that there was a need for a kid-friendly typeface that was not only child-like in appearance, but more readable for them as well. Its usage made children’s applications more functional and usable. Indeed, as one teacher notes,

Comic Sans is one of the few (if not only) pre-installed typefaces readily available to the general PC user base whose lower-case ‘A’ is composed in the same manner that a child would learn to write (Comic Sans employs the latin character alpha, i.e. an ‘a’ without the hook on top). In terms of educational instruction, it’s the best available tool for the job; it literally helps to synthesize learning. In terms of its audience, it is perfectly designed.

Feedback Loops and Kudos

Social trends and emotional responses are both examples of passive feedback loops. A friend validates something, thus I trust it, thus my friends see that there is public support behind this thing, and so on as momentum builds. Likewise, if a website strikes an empathetic tone, it creates a more personalized experience for me, making me more likely to trust and engage with the website. As designers, we can take advantage of the strength of feedback loops and actively build them into our products.

Humans are naturally curious, and we respond strongly to positive reinforcement. Successfull feedback loops take advantage of both of these facts. Some of the best examples are found in gamification, the injection of game elements such as competition, status-building, achievement, and rewards.

  • Mint uses positive reinforcement in the form of goals and visual graphs to make managing finances less of a chore.
  • Code Academy and Treehouse are two examples of companies that use goals and badges to help motivate and encourage users to attempt the daunting task of learning to code.
  • Quora, Designer News, and Stack Overflow award points to users for contributing content. They further incentivize users to ensure that their contributions are meaningful and relevant by letting other users award them points based on the quality of their contributions.

I’ll forgo a thorough discussion of the components of gamification, since there are excellent examples available elsewhere. What is important is that game elements add fun and personality to routine or mundane tasks, increasing engagement and stickiness.

Trusting What’s Familiar

All of the aforementioned principles appeal to the human traits of emotion and trust. We trust the opinions of our friends. We prefer products that are personal and designed with empathy. We respond positively to game mentalities. Finally, utilizing familiar visual and interactive design elements provides the keystone to creating a credible, emotional connection between our users and our product.

The Standford Web Credibility Project found that

…a broad range of design decisions—ranging from visual elements to information architecture to the use of advertisements—can powerfully influence whether visitors are likely to find a site credible. Like human communicators, web sites benefit (or suffer) based upon their appearance. Part of the goal of our project is to understand which design elements have an impact on credibility.

Note that they compare web sites to human communicators, emphasizing our users’ tendency to draw an emotional reaction (for better or worse) from the outward appearance of a website.

Untrustworthy design may or may not be easy to spot. One creeping issue is the prevelance of Dark Patterns, an interface or component that is intended to trick a user into doing something. These include bait and switch tactics, hidden costs, and misdirection.

In addition to avoiding these common pitfalls, web designers can include common design patterns to help visitors feel comfortable with their interface.

  • Use consistent styling, content, and metaphors across your site and apply accessible fallbacks. It’s easier to trust a site that is usable over one that is not. Consistent styling of links, navigation, and other interactive elements ensure that a user can interact with the site with confidence. Likewise, adhering to code standards and accessibility best practices leads to providing a seamless experience for all of your users, regardless of the device that they use to access your content. A site that is well-designed from the inside-out naturally seems more professional, and therefore more credible.
  • Take advantage of common patterns. There are things we absolutely know about how people browse the web, and designing with these standards in mind will make your site feel familiar. For example, we know that people’s eyes track in an “F-shape” as they browse a site. Knowing this, you can place navigation horizontally along the top of the page or vertically down the left of the page. We know that people expect the site logo to link to the homepage, and for content to be listed from most important to least. As responsive design continues to proliferate, users may come to expect enhanced readability without sacrificing content on a mobile device. Your design does not have to be unoriginal or overly trendy in order to adopt common visual standards.
  • Make your interfaces clear and your interactions understandable and learnable. There are a lot of catch phrases being tossed around the design community right now: intuitive design, invisible interface, honest design, to name a few. Don’t get caught up in the hype. Interfaces can be both visible and useful if they are simple and straightforward (read these two articles for fantastic discussions on the shortcomings of the “no UI” movement). It’s ok to introduce new interactions, even if they aren’t inherently intuitive, as long as you teach them effectively.

In summary

Design for humans injects personality into the computer side of “human-computer interaction.” It uses emotional cues to inspire user behavior and make people feel comfortable and safe with our design, as though the web site or app were an extension of the person themselves. Like brands that have become household names—Kleenex, Kellogs, Google—we strive to make the usage of our products second nature. Creating an emotional connection between your site and your users leads to better retention, engagement, and trust.

What is it about our culture that some people are so keen to fail while others aren’t? The ability to cast off from the shore with the full ability that you may sink is a trait many envy. I envy it.

In Silicon Valley, failure has become somewhat of a badge of honor. A startup founder who was willing to move on his idea, though it didn’t gain traction, still holds value to venture capitalists and the industry at large.

The reality is, it’s not the failure that’s impressive, but rather the willingness to take a risk, to expose your brainchild to the evaluation of your peers (and complete strangers) and put it all on the line. Those people who are confident enough in themselves and their skills are willing to risk having nothing in order to have it all, and more importantly, to make something that matters; something that lasts.

I struggle every day with my fear of failure. I find myself afraid to speak my mind, share my thoughts, write a personal blog post, embark on my own. Working for a startup has eased that. I’m better at sharing ideas that may fail. In fact, many of my ideas do fail, but that makes the ones that stick much stronger.

As designers, we have to see failure as an opportunity. We must be willing to expose ourselves to criticism and change. To know that version A-L may not be accepted, but version M will be phenomenal. By being willing to fail, we are constantly pushing ourselves forward.

Empathy is so hot right now.

Whether you’re a user experience professional, visual designer, marketer, developer, empathy is the new skill to have. Unfortunately, like most buzz words that become jargon, the value of the word is being lost in the noise.

What really is empathy? The first definition that may likely come to mind is “the ability to put yourself in someone else’s shoes.” Much like its cousins, sympathy and mindfulness, its a skill that requires emotional intelligence and awareness.

On the surface, it makes a lot of sense. By empathizing with our users (clients, colleagues, etc), we are able to create more meaningful experiences, and therefore better designed products. However, there’s a paradox to empathy: The more we think we know another’s needs, the less effort we make to find out what their real needs are.

(more…)

Yesterday, I was asked to answer a question on Quora: What do the top 1% of user interface designers do differently than the other 99%? I think the original poster was assuming that the top eschelon of UI designers use different tools or techniques in their practice.

However, I see expert UI design differently. Those designers who really meet their mark and set the bar are not the ones posting pixel perfect mocks to Dribbble that would create horrible usability issues in practice; rather, the best UI designers are the ones who create interfaces so intuitive, so simple and clear, that the design itself really fades from view.

So I answered the question in kind:

  • They talk to the people who are going to be actually using their product
  • They hear criticism and feedback as an opportunity to improve things for the user and NOT as a personal knock
  • They are tied to an outcome, not the design itself, and they realize that the first 50 versions of their design may get scrapped before the 51st is accepted
  • They iterate on small things instead of feeling forced to recreate the big picture
  • They don’t follow trends blindly
  • Most of their work happens in sketches, on whiteboards, through conversations, and only a small piece of it concerns whether something will look nice on their portfolio
  • They allow data to guide their design, but they are not afraid to question the conclusions that are drawn from it
  • Most importantly, they see design as a process that involves multiple people and inputs – they lack ego and embrace empathy.

What do you think?

I stumbled upon this great article,  Slaying 5 UX myths for the good of mankind, and was blown away by the reality (and humor) of this quote:

Gone is the view of humans as rational beings who make decisions based on logical reasoning. Embrace instead humans as they are, turning to intuition when too tired to read, making poorer decisions when grumpy and who want to buy from you because you have a pretty smile and you like cats.

Can I get an “amen”?!

When I was studying economics, one of my biggest gripes was the idea that we could make large-scale policy decisions based on perfect models and the false notion of the “rational individual.”

Well, let’s face it folks: people are not rational. That’s why news about Kim Kardashian gets more attention than children starving in Darfur. It’s why we continue to vote for politicians who work against our own interest. It’s why we eat junk food, knowing full well its negative effects on us, because we like it.

And when you’re done reading this great article (which you should), follow it up with Never Ask What They Want — 3 Better Questions to Ask in User Interviews.

You’ll thank me later.

There has been a lot of bashing on pre-processors lately, and rightfully so. Sort of.

Certainly, these tools, such as SCSS and LESS, can result in excessive bloat and specificity issues in their generated CSS. Lyza Gardner struck the nail on the head in A List Apart this month:

Pre-processors have a way of keeping us at arm’s length from from the CSS we’re building. They put on us a cognitive burden to keep up on what’s evolving in CSS itself along with the tricks we can pull off specific to our pre-processor. Sure, if we’re intrepid, we can keep on top of what comes out the other end. But not everyone does this, and it shows.

But when it comes to pointing the finger, we should be looking at the author, not the tool he uses.

Pre-processors caught on largely because they made it easier to create scalable CSS that paralleled the structure of a pattern library. They made it easier to track variants off of a single element without duplicating any code or requiring additional class names on a single HTML element.

When used correctly, they make coding CSS – and more importantly, maintaining a large CSS code base – so much easier.

To truly take advantage of the strengths of pre-processers, we have to be aware of their limitations and weaknesses, plan accordingly, and think ahead. You could say the same thing about HTML, Javascript, image use, etc. Like any tool, a pre-processor is only as strong as the person who wields it.

(more…)

As designers, we spend far too much time analyzing how to refer to ourselves. “Product designer, UX/UI designer, visual designer, full-stack designer, lead designer of products”…do any of these really tell you about the person behind the title? If you saw a resume with one of these titles at the top, would it shape your expectations?

My bet is, no.

For example, I have reviewed countless resumes for people heralding themselves as a UI/UX designer because they have worked with wireframes. Often times, these individuals have never once spoken to an actual user or conducted any user research.

But can you blame them? Read any job description for designers, and you’ll think you can only be hired if you can conduct research, generate content, formulate an app’s infrastructure and key interactions, test prototypes, design the whole thing using the latest trends, and then launch the product with CSS, HTML, and Javascript.

It’s no wonder designers are forced to market themselves as the full package, even if it’s just to get a foot in the door. Plus, descriptions like these contribute to imposters syndrome. Your company may be missing out on the perfect candidate because he didn’t think he fit the full description of what you were seeking.

As an industry, I think it’s time we take a step back and just embrace the title “designer”. That, in of itself, expresses so much.

A designer is a problem solver; a thinker; a doer. They are someone who can navigate complex ideas and processes and help define a clear way to manage them. And they have core strengths and weaknesses, too. But I would get more from someone saying “I am a designer that focuses on visual design and product interactions” than if they just said “I’m a UI/UXer.”

I’m sure we’re all familiar with the phrase “less is more.” The same holds true in this case.

Someone trying to describe themselves as a unicorn through their title often fails to match my expectations going in. On the other hand, I would not shortchange someone who simple called themselves “a designer.” I would feel confident that she could understand the core values behind UX research, content strategy, or interaction design, even if they weren’t familiar with the nuances and deliverables associated with that field.

A designer is a problem solver; a thinker; a doer. They are someone who can navigate complex ideas and processes and help define a clear way to manage them.

It’s time we rid ourselves of the debates over who we are and what we do. Be a T-shaped designer, find the area you love, focus on it, cultivate your skills, but expose yourself to other areas too. Don’t be afraid to try new things, like illustrations and mobile app design.

When you’re applying for your dream job, proudly say, “I am a designer” and own it. Own your strengths, own your weaknesses, but know that you can

User research is paramount to a well-balanced design process. It helps us create and implement interfaces that adhere to the needs and expectations of our users. But how do we adjust for different behavioral patterns amongst that group?

People tend to fall into one of two categories – thinkers and doers; cautious and impulsive; perceptive and decisive. Neither of the two is ‘better’ than the other, but they absolutely are distinct.

In a past life, I was a multi-day raft guide on the Colorado River. Almost all of the people on my trips fell into one of these two groups. Some of my passengers wanted a controlled experience. They wanted to know where we were stopping every day, which rapids we were hitting, what we were serving for each meal, and detailed information about all aspects of the canyon itself. Other people wanted a more adventurous trip. They tended to be the ones who wanted to try and row my boat, who ran up the side hikes in front of the guide without waiting for interp, who came prepared with a swath of information that they had looked up, and who wanted to define their experience for themselves.

These two types of visitors, both unique in their own right, also shared many things in common. Namely, they still required a guide to get them down the river. They still needed assistance, but they looked for it differently. The latter group would ask which way to go and then take off to explore independently, while the former stuck close to the guide for step-by-step instruction. But they were on the same journey.

I refer to these two groups as the tourists and the explorers, respectively, and they did not leave those distinctions behind when they left the trip.

Like my passengers, your users will generally separate into these two groups. One will look for detailed walkthroughs and guidelines while the other will jump right into the interface and start playing around. However, both require a clear and intuitive interface with useful navigation and action-oriented user flows. That’s the common denominator.

(more…)

Content first. User experience design. These terms are tossed around daily by eager commentators.

The new trend of “flat design” has been founded on the premise that realistic elements on a web page diminish the experience for the user by presenting a dishonest representation of what the page presents: digital content. Or, as opined by the good folks at Layer Vault who take distinction for naming the trend,

designing honestly means recognizing that things you can do with screens and input devices can’t be done with physical objects — more importantly that we shouldn’t try copying them.

This distinction is well-meant, but fallacious. In attempting to justify their decision to break away from the trends of unnecessary realism and skeuomorphism, the writer asserts that realistic design is dishonest. It is not. When done incorrectly, realistic design is bad design. When done correctly, it translates lines of code into a rich experience for the user, one where actions are intuitive, interfaces are beautiful and interactive, and content communicates on a level unobtainable by mere text. When done correctly, it is honest.

(more…)