User Interface Design explained

I finally figured out how to explain to people what I do.

I draw boxes all day.

Some boxes have words.
Some boxes have pictures.
Some boxes open new boxes when you touch them.

Many boxes sit side by side.
A few boxes sit alone.
But mostly boxes sit inside of other boxes.

Sometimes I show these boxes to people. They look at the boxes with a serious expression on their face,  “Hmmm. Maybe you should move that box over a little bit.” Or, “I don’t like the words on that box.”

Drawing boxes may not be be the most glamorous job in the world but it could be worse. I could have been a psychologist.

Don’t Rush

Most people feel crappy when they’re late for an appointment. There’s a sense of anxiety and dread that comes with running late. It’s the natural response respectable people have when they’re not making good on their commitments to others. It’s a terrible feeling.

Rushing your team is artificially making people late. Shifting an arbitrary deadline behind people forces them to have the same emotions as when they’re not meeting their commitments. The entire priority structure shifts from product quality to deadline quality.

Deadlines are a critical reality to any enterprise. You must ship! But you must ship competent products. The real trick is setting scope around quality milestones rather than time milestones. Anyone know how to do that?

Every Website is a Mobile Website

I was having a conversation about our mobile strategy with some of our engineers. One of them asked the reasonable question, “Why do we need a mobile website if we build a native app?”

There is no such thing as a “desktop” web or “mobile” web. There is only the web and the window through which you view it.

People access the web from a panoply of devices: laptops, netbooks, tablets, kindles, super-sized phones, platform phones, “feature” phones TVs, glasses, cars and even refrigerators. Virtually every one of these devices has a different specification around screen size, processor power, and platform.

In March 2013 our site was accessed by: 605 screen resolutions 332 browsers 398 operating systems

It’s a guarantee that your “desktop” site has been visited by a personal device it wasn’t intended for. Building a website in 2013 means building a site that is friendly to “personal” devices.

I use the term “personal” devices coined by Ryan Singer to distinguish them from a mobile context. Nobody’s accessing your site on a netbook standing on line at the cafe but they are using their second screen on the couch. The majority of access from “mobile” devices happens in the home or the office. I suppose “personal” accurately covers all the bathroom browsing happening.

The slow & steady demise of private messaging

We’ve been debating the value of including a private messaging feature on our product. It’s a pretty common feature you see in large social networks and user generated content sites. It’s so common that most people don’t even question its necessity.

On the other hand newer products like Pinterest, Instagram and Path do not have any sort of messaging feature. Why? Are they on to something?

Here’s what I’ve concluded about private messages:

Private messaging is a hinderance to unleashing network effects. They inhibit community development by obscuring participation. If all the site users are communicating in private out of public view then there’s less social proof for newcomers to latch onto. A vibrant public discourse is more inviting for new users. It’s a classic network effect because it increases the value of the entire system for each participant when new participants join.

There is also a generational difference in how users value privacy in digital products. People have a profound connection with the technology prevalent in their formative years.

1. Older users (40+ years) still use email and direct messaging heavily. They treat social networks as an extension of one to one communication like phones and letters.
2. Gen X + Y people (age 20-40) will use some private messaging for sensitive information while using public communication to try and cultivate a personal brand.
3. The millenials (< 20 years) live their digital lives much more publicly. Their intimate communication is handled through group texts, snapchat and some facebook messages.

I think this trend of less need and reduced sense of “ownership” of your personal history will continue and we’ll see less demand for private messaging over time.

Tell me. What are the compelling reasons to continue building and maintaining this feature?

Edit

Path has recently introduced a very popular messaging feature. Go figure. http://techcrunch.com/2013/03/08/in-first-24-hours-of-3-0-launch-path-made-more-money-than-ever-and-sent-more-than-1m-messages/

Content Carousels Are Obsolete

Content carousels solve problems that no longer exist. They are outdated in the age of long pages and touch devices.

The primary argument for using content carousels is to squeeze more content “above the fold.” The fold myth has been thoroughly debunked∞. Internet users have grasped the concept of object permanence and understand that content offscreen still exists. People are comfortable scrolling or sliding down the page to browse through content. Scrolling is the preferred interaction because it allows users to visually scan for content they are interested in.

Carousels inhibit discovery by making scanning more difficult. Internet users scan a page for content. Eye tracking tests demonstrate how quickly attention flits across the screen as users hunt for the scent of information they are looking for. A carousel obscures content from scanning. Even carousel designs that display some content metadata (i.e. title, byline, date) obscure visually drilling down for detail.

People don’t engage carousels because it requires more work. Switching the user interaction from scrolling to paging requires the user to stop their current movement, discover a new interaction, and then engage that. It is both a physical and cognitive interruption. Scrolling down the page works extremely well and is already an interaction users expect to take.

I look forward to replacing our content carousels with content that is laid out to welcome engagement.

New thinking about design process

Most people describe their design process by talking about the artifacts they create. Sketches, wireframes, mockups, prototypes. These artifacts usually happen in in the same order. They start rough and gradually increase in fidelity until it’s time to ship. Some teams add variations on this theme by changing the tools, changing the people involved, or changing the fidelity of each artifact. These changes belie the fundamental form that is the same. That’s because the artifacts are not where real design happens.

Design is achieved in the reflection between execution.

It doesn’t matter what the artifacts in your process are as long as you have the space for critical thinking between them. The artifacts themselves are simply the residue of execution. They are a tool to aid your analysis of the problem. Artifacts exist solely to question & refine your thinking.

The creation process is a series of transformations. You begin with an idea and transform it several times through different forms. Wireframes are a transformation of sketches. Mockups - be they photoshop or html - are a transformation of wireframes. The transformation itself is the key. Each juncture gives you the opportunity to review the idea. It forces you to analyze that previous step to validate it solves the goal of the project.

The goal of design is to solve some problem by shaping form. Solutions require critical thinking and validation. Not providing the room for that thinking is what leads to inferior solutions.

>The loudest note in music is the rest.

Negative space is a critical part of form in design. The forms that are implicit are just as important as the explicit forms. The same is true in shaping your design process. The transformation from one artifact to the next is the rest. It deserves the same attention as the execution.

This insight has led me to change my design process quite a bit. I find myself sharing designs earlier and more frequently. I’ll create more variations and mockups simply for discussion points. I think this has improved the quality of my work and I hope that adding more space between artifacts can help other people.

Design Awareness

A presentation meant to bridge the gap between designers and the rest of our team.

Designer to Developer Dictionary

You could say developers are from Mars and designers are from Venus. But really developers are from earth and designers are from earth so we should get over it already and just do some work. To do that we’ll need to bridge their divergent languages. I began this glossary to help repair the tower of babel.

Systems

This is a work in progress. I will add more terms as I think of them.