On locked bathrooms & the right to poop

Aug, 2013

I’ve been freelancing on Wilshire Blvd, about a block away from where Biggie was shot. It’s a busy street with lots of foot traffic, which is nice because you don’t experience that much in LA.

Our building is 6 stories tall. Each floor has a shared restroom but the doors are always locked. The owners of the building want to deter passersby from entering, so they lock the bathroom doors and give each tenant a key.

It sucks. I hate asking for the key every day, essentially announcing that I have to poop.

Locked bathrooms are common around the city especially in gas stations and fast food joints. For the owners, inconveniencing customers with a bathroom key is better than dealing with a trashed restroom.

I’m drawn to situations like these. Where bureaucratic rules are at odds with the rights of the users who have to live with them. It’s a bad design.

I’m not the only one who is annoyed. To my delight, one our of our neighbors has revolted. Every Monday morning he tapes the door so it can’t stay locked. But then every weekend the cleaning people tear it down, presumably under orders from management.

It’s this strange bathroom themed cat and mouse game.

Here are some of his door hacks from the past few weeks:

Duct Tape on the latch:

Duct tape is an instinctive go-to solution. But the pressure from the latch pushes at the tape each time the handle turns. By Tuesday the latch pushes through the tape and the door locks.

Medical/scotch tape over the latch:

This one looks janky. The scotch tape has less give than duct tape but this breaks down in a day or two as well.

Medical tape over the latch plate hole:

This solution attacks the latch plate. If the latch can’t find it’s way into the hole, the door won’t lock. Clever! He used medical tape and something like crumpled paper in the latch hole itself.

Unfortunately, the tape was gradually scraped away by the latch and by midweek the system failed.

Two weeks ago I threw my hat in the ring. I decided to attack that stubborn latch plate. It seemed to me like a failure of materials that prevented the previous hack from working.

At first, I considered a glue based solution but that violated the property owner’s rights too much. Glue was overkill. The solution had to be easily removable and also last through the week.

After doing some research I came upon this amazing prototyping material called Instamorph. It is moldable plastic that hardens at room temperature after you heat it in water.

If I could fill in the negative space of the latch hole with hard plastic that might do the trick…

After practicing on my door at home and briefly on the plate at work, I molded together this shape:

Voila! Perfect fit and easily removable. The latch slid over the hard plastic effortlessly.

The moldable plastic worked great all week. But in an odd twist of fate, our company moved a couple blocks away to a new location. Had we stayed there longer I could have done a 3d scan of the stopper and then 3D printed them en masse for every floor. Free stoppers for everyone!

But I’ll leave that to the next poor sap who needs to use the toilet.

The societal impact of the attention economy

Aug, 2011

From 1970 to 2000 Americans gradually stopped spending time together. They joined fewer clubs, attended fewer dinner parties, and declined invites to join the local PTA.

In his book Bowling Alone, Robert Putnum explained this decline in social capital was due in large part to increases in TV viewership. Television was such a compelling product that we consequently spent less time cultivating relationships with our neighbors and family.

The TV had privatized leisure time.

From 1970 to 2000, the average person’s attention graph went from looking like this:

To this:

Americans gave entertainment (television) more attention at the expense of time spent with friends and family.

But as bad as this decline in social capital was for the soul of the country, each of the four categories above stayed neatly in its own silo. Back then, choosing television over playing bridge with friends was very much an either/or decision.

Not anymore.

In 2011 our attention is more sought after than ever and technology (namely cell phones), enable friends, family, and websites to reach us anytime. Physical and digital requests for attention now blend together and elbow one another for space.

Some examples:

  • When Fred Wilson’s wife checks twitter during family time. (Her kids say she’s ‘there, but not really there’).
  • Reading a text while on a romantic date with your girlfriend
  • Checking personal email at the office

Nowadays our attention graph looks something like swiss cheese, with different categories intruding upon one another at small bursts throughout the day:

From Venkat’s brilliant post on the subject:

"But as you find and capture most of the wild attention, new pockets of attention become harder to find. Worse, you now have to cannibalize your own previous uses of captive attention. Time for TV must be stolen from magazines and newspapers. Time for specialized entertainment must be stolen from time devoted to generalized entertainment."

I don’t mind if Facebook steals time from magazines. But it’s troubling when it steals it from a family’s dinner time. Think of all the hours teenagers spend texting friends while out with their parents. Moments that 10 years ago would have been spent (however reluctantly) chatting and bonding.

It’s hard for mom and dad to compete with Facebook and it’s cohorts. They are battling against companies who are aggressively mapping out the human psyche in order to trigger user’s pleasure center buttons. How can dad’s cheesy jokes compete for Jr’s attention when he’s up against a small army of game psychologists who know exactly what little Timmy craves?

Some Definitions

I think “Attention Parasite” is an accurate term for these occasions. An Attention Parasite can be defined as anytime an electronic device is used while social obligations would demand otherwise.

As seen in the previous swiss cheese diagram, these parasites cause our relationships with friends and family to become fragmented, with our days interrupted by short texts, tweets, and notifications.

What’s the end result?

I think in the same way that TV extracted value from society in the past 30 years, these Attention Parasites will continue to extract value anywhere you bring your phone. Church, Thanksgiving dinner, school.

It may seem like a strange thing for a physical place like a church to have to compete for attention with a digital product. But imagine if half of the congregation was on Facebook during Sunday morning service. It would decrease the value of going to church for the good half because the rest of the congregation would be mentally checked out. That would severely impact the feeling of community that many people get at church.

Bit by bit the value of these arguably boring institutions will be chipped away at. Death by 1000 tweets.

Can control what we pay attention to?

It’s difficult. In the time span from 1970 to 2000 America decided television was a more compelling product than socializing, much to the detriment of society.

If Facebook is more engaging than grandma’s stories about the Great Depression then it wins. If personal email is more interesting than doing work it wins.

Plus it’s not always clear what deserves your attention. How do you measure the consequences of watching TV against a Sunday evening chat with a neighbor? People don’t think about the long term consequences of either of those things in the moment.

I’m not sure what consequences of all this will be. I think as digital products become more compelling there will be an increase in generalized feelings of discontent since these digital products are lousy at fulfilling our hierarchy of needs.

Can Facebook ever rival hanging out with friends in real life? Is online porn better than actual sex? Can feelings of confidence, respect, and self-esteem be experienced in digital methods that rival the real world?

Maybe once we realize these digital products aren’t very emotionally fulfilling we can start to channel our attention back toward areas that are.

How I create SVG animations

Dec, 2018

I’ve been getting into SVG animations lately and wanted to share what I’ve learned.

Here's a homepage prototype I created for a financial services client. The creative brief stated they wanted a homepage that would convey what the product did quickly and intuitively. Mere screenshots wouldn't cut it. So I created three animations, a chatbot, a mortgage calculator, and a dashboard – three core feature sets of their product that they wanted to highlight. As you scroll down the page each animation starts to play (best viewed on a desktop computer). None of the visuals in the animation were taken exactly from the features themselves, rather they're meant to convey an idea of what each feature does.

Kinda like a quick elevator pitch.

Many companies use a demo video to accomplish the same thing. But people have short attention spans, and animated SVG's give viewers a sample of what the product does before they invest time to learn more.

SVG vs. GIF

You can use SVG animations to make playful buttons, entertaining loading screens, and much more. They are crisp, smaller in size than a GIF (usually), and can be triggered with code. That last part is important because it means you’re not limited to using looping GIFs. Animations will play exactly when you want them to.

Getting started with animation

I use After Effects to create SVG animations. Below is a simple bouncing ball that I made. This is what it looks when you slowly scrub through the timeline:

The ball is controlled with keyframes – those little gray diagonal shapes in the timeline. As you can see, each time a keyframe is reached, the ball changes direction. Here’s the animation at the normal speed:

An important part of animating is getting elements to move smoothly. But our ball moves too aggressively. It bounces up and down without slowing down or speeding up.

That's because our keyframes don’t have any keyframe interpolation applied. That is, the motion in between the keyframes is linear so the ball moves at a constant speed. In the real world, the ball would move slowly when first released, then accelerate as it fell to the ground.

How can we achieve this?

You can manually add new keyframes (think stop-motion animation) to slow it down. That's the old school way. Or you can try Easy Ease in After Effects. But I prefer a plugin called Ease and Wizz. It uses math to tweak the motion in between your keyframes. It makes your animation feel more organic.

Here’s our original red ball. Next to it is the same animation but with Ease and Wizz applied:

See how it bounces more naturally? With just a bit of tweaking, this ball would look like it is really bouncing on the ground. I use Ease and Wizz heavily when animating in After Effects. Give it a try!

Building your SVG animation

Ok, let's get into the specifics of animating an SVG. Here is our chatbot animation from before:

This a simple chat bubble that grows vertically and horizontally from the right. All it does is change shape. Here’s the project file:

The chat bubble animates in smoothly because – you guessed it, Ease and Wizz has been applied.

Everything in this project file (except the avatar photo) was made in After Effects. When making SVG animations it is important to build as many assets as possible natively, so that later when you export to web the plugin can translate everything on the screen to code. Lines, text, and shapes, will all be converted to code. If you have illustrations from Sketch or Adobe Illustrator you can convert them to shape paths as well.

Avoid PNG's and JPG's when you can. They'll add to the size of your exported code.

Once our animation is ready, we need to export it. For that, I use a neat plugin called Bodymovin. This is what will translate the animation into code. To export your animation from After Effects, first select the composition where your animation is, then choose a destination folder, then click 'render'. It will look so something like this:

And here’s the exported code (JSON) of our chatbot animation:

Long isn't it! Fortunately, it's only 56k in size. If we were to make the chatbot into a GIF it would be 76k, and not as sharp.

Previewing your work

Previewing your animated SVG is a little tricky – you can’t view it locally. Because the animation is now code, you'll need a dev environment to watch it. To view it on your personal server make sure to also upload the lottie.js library. If you don't have access to a server, you can upload and preview your animation at lottiefiles.com.

The final thing I want to show you is how to get the animation to start playing once the user has scrolled to a specific point. For that we add a bit of javascript to detect when the desired scroll position has been reached, and then play the animation:

I had a developer friend help with this bit. But you download my code for that and everything above, plus the After Effects animations here.

7 mistakes programmers make while learning design

June, 2017

I enjoy helping programmers learn design. But sometimes they’re been given lousy advice before I meet them which has tripped them up.

The worst advice comes from content writers who regurgitate something they've read elsewhere. These writers aren’t designers themselves, so their suggestions are vague.

My fellow designers aren’t always helpful either. They may suggest you go back to school to learn design, because that's the path they took. But most programmers aren’t willing to do that, so that advice is moot.

This got me thinking about all the places where developers veer off course. Here are the six biggest mistakes developers make while teaching themselves design.

1) Lack of focus

So you've shouted to the world "I want to learn design!". That's great, but in order to accomplish your goal and prevent wasted time, you'll need to be more specific.

If you can narrow it down to "I want to learn visual design" that’s a good start. But even visual design (a.k.a. graphic design) has many specialties.

That's why I recommend that 95% of programmers should focus on web or app design. It’s specific, so you’re less likely to spend time on something that isn’t relevant, like learning about four-color printing or Pantone colors.

Your instinct may be to learn everything. But is it worth it to invest time in learning how to make a logo? The occasions when you’ll need to create a logo will be so infrequent that the time it takes to learn it may not be worth it. Same goes for book design. And motion graphics.

Interactive design on the other hand, is something you can benefit from for years to come.

The only problem is the vast majority of books and courses on “web design” will be devoted to the technical stuff like HTML/CSS. This is at the expense of what you really need to learn - composition, hierarchy, alignment etc.

This puts you in a weird position of learning design from books about print design. It's fine to read these, but while you're learning regularly ask yourself if the material is relevant to web design or not. (Btw, I’m working on a book for developers that teaches design principles in the context of web design to address this problem!)

2) Getting distracted by the tech

As a developer, you’re going to be drawn to subjects that seem like they’re design related. Things like CSS and Bootstrap. But let’s be honest – if you don’t already know those things they’ll come easily to you once you decide to learn them. Because they're technical and developers are good at technical tasks. The key to improving comes from learning how to pick the right fonts, colors, and images. Things that may not come as naturally to you.

3) Confusing Photoshop/Sketch with design

I know a lot of developers who can use Photoshop. They know the tools, but not how to utilize them to solve design problems. In the graphic design world these people are known as production artists. It’s a fine profession but it’s not what being a designer is about.

It’s tricky. You need to know the tools to be a designer, but knowing them doesn’t make you a designer.

I fell into this trap at design school. My first year was dedicated to learning Photoshop, Illustrator, and InDesign. It felt good to master those tools. At the end of the year I felt like "I made it." But learning the tools was just step one. Step two is about making the work look good. My peers in design school who understood that, kept pushing themselves and transitioned from being production artists to designers.

4) Wasting time with Photoshop effects

This is related to number three. There are a ton of tutorials out there like this that make it feel like you're learning design. They're a great way to learn Photoshop but don't think you're getting good at design by following them.

Within the Design by Numbers framework these tutorials would fall under the "style" category. There are still nine other categories that are needed to make a good design. And if you're only messing around with style tutorials, you'll never get good at the other categories.

None of the professional designers I know pay much attention to these tutorials. The only time they might seek them out is if they're trying to accomplish a look for a specific project.

5) Too much theory

Many design books are theoretical. They'll teach you in broad strokes about typography, color theory, and composition. You end up reading so much that it’s difficult to remember it all. Don’t read too much about design. Real growth comes when you’re in practice mode, not research mode.

6) Dribbble envy

Do you visit Dribbble frequently to get inspiration, but then get overwhelmed by the creativity you see there? The problem here is you’re only seeing the finished product and not the many hours of practice that it took to get that great.

This is easier to understand with sports. A little girl watching gymnastics on T.V. doesn’t expect to be that great right away. She knows it takes years of effort.

It’s fine to look at work on Dribbble, and even aspire to be that good. But don’t forget there are many steps in between.

7) The "bad genes" excuse

Some developers think design is either in you or it isn't. I think there's some truth in that. Many of the best designers in the world were artsy kids when they were little. Just as you were drawn to taking apart things with motors as a kid, they were drawn to painting Ninja Turtles. So natural talent is certainly a factor in how good you can get at design.

But you aren't competing with those top 5% of designers. So don't stress over it. Even if you don't have their natural talent, you can still get to 90% of their skill level with dedication and practice.

The anti-Trump protests in Los Angeles were even larger than we thought

Nov, 2016

Yesterday I went to the Anti-Trump rally that ended in downtown Los Angeles. After the event, the LAPD estimated the crowd size to be around 8,000 people.

That figure was not questioned by any major news source. The LA Times, Wall Street Journal, CNN, ABC and many others, all cited it. Only the New York Times did not.

Having seen the crowd with my own eyes, I thought it was larger than 8,000 people. I reached out to LAPD to find out how they got this figure and Officer Tony IM said: “It’s not an exact science, it’s a guess based on observations from our helicopters in the air and officers on the ground.”

That meant their estimate was based solely on who was flying that day, if they were good at estimating crowds, and if they were biased about the election results.

I wanted a more exact number.

Finding Source Footage

The protest stretched many blocks down Wilshire Bvld and ended on the steps of the federal building downtown. Close up footage at one location wouldn’t be useful, but I did find this great panning shot on YouTube from a user named David Baca. When stitched together, the footage shows the entire length of the protest all the way down Wilshire.

Using buildings as reference points, together with Google Maps, I was able to determine that the crowd spanned from half a block east of Lucas Ave., all the way down to Westlake Ave, near MacArthur Park.

In the full-sized image you can see what appears to be a car moving north on Westlake Ave, (just under that red dot) that’s how I decided this was the point where the protest ended. Everything on the street east of that car is filled with protestors.

The Jacobs Method of Crowd Estimation

Originally I was going to slice up the image and use Amazon’s Mechanical Turk to count the protestors. This would have worked fine for the foreground, but the people in the distance were very blurry.

So I did some research and discovered “The Jacobs’ Method” of crowd estimation.

Herbert Jacobs was a professor in the 1960s at UC Berkeley. Being at Cal during the Vietnam War, exposed him to many protests outside his office window. He was curious about the size of these crowds, which led him to come up with a simple formula. It states that in a super dense crowd (like a mosh pit), one person takes up about 2.5 square feet. A moderate crowd is one person per 4.5 sq feet. A light crowd is one person per 10 sq feet.

With this formula in mind, I set out to find some dimensions of my crowd.

Crowd Length

The protestors started in MacArthur Park. By the time David shot his footage, the crowd had reached the front of his building. The tail end of the protest was around Westlake Ave, just a couple blocks east of the park. With this in mind, I used Google Maps to calculate the distance from David’s building to the end of the protest. It was 3,570 feet, almost 3/4 of a mile.

There’s a slight scattering of protestors between Witmer and Lucas, and also at the intersection of Witmer and Wilshire. Also as you can see in the full-sized image, there were very few cars parked on the street which was helpful in determining the crowd size. Besides these points, the density of the crowd looks fairly consistent.

Street Width

Street width was easy to determine. I used Google Maps to measure the distance from curb to curb at 6 intersections. The average was 55.94’. I decided to not include the sidewalk. While I recalled seeing a few protestors there, most were onlookers from the builders, so I decided to not count them.

The Final Verdict

3,570′ multiplied by 55.95’ = 199,741.5 sq ft. Given a medium density crowd (1 person for every 4.5 sq feet) that would give us a crowd size of about 44,386 people.

However, the sample size has a few light patches of people here and there. And while the tail end near Westlake looks dense from the camera’s point of view, crowds tend to trail off near the end.

40k just seems like a lot. I wish there were more camera angles to validate that amount. If we were to use the “light” formula (1 person for each 10 sq feet), that would get us to 20,000 people. I’d guess the actual number is somewhere in between. Whatever the amount, it’s much more than the LAPD’s estimate of 8,000.

So who cares how big the crowd is? 8,000 is a decent enough turnout, right? That’s true, but hearing that number on the news isn’t likely to catch your attention. But 20,000? 40,000? That’s impressive. And it’s a better indicator of how many people were upset over last weeks election.

I would argue that any government agency has an inherent bias to under-report the size of a protest like this. A larger than normal protest implies that things aren’t quite right. And that perception can threaten the status quo.

Ideally, an independent entity like a non-profit or news organization would measure these protests. I realize that news organizations are hemorrhaging money at the moment so they don’t have a budget for some kind of dedicated protest analyst. But it would be relatively straightforward for an enterprising programmer to create a camera that counts in real time the number of people passing by. At the LA protest yesterday there were dozens of photographers. We could spare at least one of them to stand by a modified camera that tallied passersby, making us less reliant on the possible bias of government officials.