Thought + Quality

Oliver Reichenstein, Putting Thought Into Things:

Quality — as in “fitness for purpose” — lives in the structure of a product. A lack of quality is a lack of structure, and a lack of structure is, ultimately, a lack of thought. One does not find a solid structure by following some simple method. We deepen the structure by deepening our thought on the product. Our role as designers is to put thought into things.

I’ve noticed I do the worst, as a developer, when I’m using tools and methodology to avoid thinking. Not entirely sure how to solve this problem, write some tests and commit whatever makes them green. Troubleshoot by tinkering with commenting code out, trying different incantations, pasting snippets found on the internet.

Each advance in how I build software is lead by finding some way I defer or avoid thinking and correcting that shortcoming. In doing so, I find myself a little more opinionated, a little more specific about what really matters in making software and what is dressing.

Put more thought into what I build. Always think about what constitutes The Quality for the kind of software I want to build. Seek to avoid the tech vogue in search of deeper quality and thought. I’m far from mastering any of these disciplines, but the results so far are promising.

Get thee to thy hammock!

When Developers Design

I see lots of “should designers code?” articles and introductions to coding for designers. I see far less interest in the converse. So what’s a designer think? Cap Watkins, a designer; Should Engineers Design?:

If you think design is 100% about creating “design artifacts”, I’d say your scope is too narrow and has the potential to stunt your personal and professional growth.

There’s so much to designing that isn’t about choosing colors, fonts, producing icons, or drawing. Developers can, and should, get involved in how the applications works, how copy guides the user through workflows, when to prompt about invalid data and when to fix it automatically, and how to help users through interactions. That’s design!

To wit:

Throughout my entire career I’ve had engineering partners deep in the design process with me. I show them sketches, bounce ideas off of them, have whiteboarding sessions to figure out what we’re going to do. I trust engineers I work with to let me know when something seems confusing, when there’s an edge case I haven’t thought of and to push on my ideas to find where they break and help me make them even better.

Developers often don’t even realize they’re designing when they’re building libraries and tools for other developers. Writing a good README so developers know why your project is awesome and how to use it? That’s design. Sweating the details of an OO or REST API? That’s design. Opting to remove a feature or solve two problems with one feature? That’s design!

The design was in us the whole time, and we didn’t even know it!

I leave you with this excellent wisdom:

When you look at design as a process and not an artifact, everyone on your team becomes a designer. We have different areas of expertise and skill, no doubt, but the product experience belongs to every member of the team. The more familiar you are with each other’s responsibilities, the more you’re able to participate with and help each other out when needed.

Here’s a fun thing I do that you should try: when you read articles about design, squint a little bit and pretend it’s about designing programs. You might find something you want to try the next time you sit down to work on some code.

Pancake publishing

I’m currently jazzed by the idea of full stack writing:

Hi is what we call a “full stack” writing and publishing platform. Just what is a writing stack? Capture. Write. Publish. is our summary of it, but really it breaks down into five parts:

  • Sudden inspiration!
  • Capture
  • Draft
  • Publish
  • Converse

Some platforms provide tools for parts of the stack. Hi gives you tools for the full stack.

All the pancakes.

Love the breakfast food metaphor! Hi’s tools and community integration seem pretty nifty. That said, the break down of inspire, capture, write, converse is what I can’t get out of my head. I don’t think you need special tools to approach it with that breakdown. WordPress, Jekyll, Medium, whatever. Always be writing, publish small ideas frequently (a thing I need to do more often!), develop the ideas that stick in your head or that lead to great conversations, repeat. Don’t let the layout of your blog template or the name of the tool limit your writing. It’s an easy mental trap to fall for!

The joy of finishing

Then, the finish. Stain. Wipe. Wait. Stain. Wipe. Wait. Sand. Wipe. Stain. Wipe. Wait. Check. Seal. Wait. Sand. Wipe. Seal. Wait. Sand. Seal. Wait. And that’s if everything goes according to plan.

Finishing. It’s about woodworking. Or everything.  Or sometimes an essay about furniture is just an essay about furniture.

NSHipster rainbow bar

NSHipster Rainbow bar

My favorite design touch in the Gowalla apps was the rainbow bar. Small wonder that fellow Gowalla alumni Mattt Thompson included one on the landing page for his collection of NSHipster essays that you can now buy as an eBook with cash money. Ed. apparently all the Gumroad pages have a rainbow bar. Mattt’s still awesome.

Web design for busy programmers

Here it is: I’m somewhere between horribly afraid and way-too-smart to seriously attempt front-end web work. Browsers are not the software whose bugs I am interested in knowing about.

That said, putting information on the web that doesn’t look like utter dross is a kind of required literacy in our field. While bravely dipping my toes back into the front-end waters, I recently found some great tricks. Rediscovered, probably, but I’m not sure where the idea originally came from.

Most important: design in greyscale. Color is hard and can lead to tinkering. My goal is to get in and out of the front-end bits quickly, so tinkering is the enemy. Greyscale is one dimensional, greatly simplifying matters. Give important information higher contrast and less important information or “chrome” less contrast. Now you’re done thinking about color.

Almost as important: use a fixed-with font. As a programmer, you look at them everyday, so it’s a touchpoint of comfort. Pick a font you don’t use in your editor all day, just so you can stare at something different for a while. Copy and paste a “font stack” from the aptly named fontstacks. Make important things big and unimportant things small. Now you’re done thinking about type.

The key to avoiding browser dragons, it seems, is to skip horizontal layout, i.e. pull quotes, text wrapped around images, etc. It’s pretty easy to use CSS if you only run things down the left side of the page. All the depth and despair of CSS is in trying to get things to appear off the left margin. So don’t do that. Leave it to people who know how browsers work and how to manage their gnarly bugs. Now you’re done thinking about layout.

It’s tempting to think you should make your code examples look really nice. Don’t worry about it; highlighting code is of marginal value. You’ll never be satisfied with how it looks. The human mind is capable of reading code without a rainbow spectrum of colors. Spend time on writing about the code, not on polishing the colors and how its highlighted.

With all of those things out of the way, your way is clear to think about the really important things. What do you need to say, how do you structure the message, what do you leave out, how do you organize all the information? That’s the essence of publishing on the web, not the accidental complexity of making things look interesting.

Context is data to burst your bubbles

Designing with context:

Context is a slippery topic that evades attempts to define it too tightly. Some definitions cover just the immediate surroundings of an interaction. But in the interwoven space-time of the web, context is no longer just about the here and now. Instead, context refers to the physical, digital, and social structures that surround the point of use.

Great design is built around people, not devices or software. Applying responsive design or native app UX is a tool, not a solution. Instead, we should design software that solves a problem for a real person (not a power-user or one of our colleagues) given the devices available to them and the context of use they’re in.

A high information density display is no good to a parent trying to get their kids out the door. Documentation based on video tutorials is no good for someone riding a bus. A developer troubleshooting a service bottleneck needs to know more than the average response time.

As both designers of user experiences and developers of software, we need to get away from the desk and out amongst those we’re building for. It’s too easy to build for ourselves and our friends. We need to consider how others approach and use what we make. Armed with that context, we can design a solution for everyone, and not just those we share a bubble with.

A handful of useful project mantras

You could do a lot worse than following the heuristics set out by this Software Architecture cheat sheet. The tip I need to follow more often is “Is There Another Way”; I frequently get way too caught up in my first idea, which is usually too simplistic or requires too much architecture. The tip I often try to guide people towards is “What If I Didn’t Have This Problem?”; routing around problems or trying to reduce them to problems that require less code is a super-powerful judo chop.

Hello, you beautiful fixed-width font

Pitch. Not quite a programmer’s font, but holy cow is it gorgeous.

I love the thought put into this type; the creator actually tried to recreate the artifacts of type created by physically striking paper. Turned out that took away from the font, but it’s delightful that he went that deep in considering what a fixed-width font should feel like.

The history of fixed-width, typewriter-esque fonts is fantastic too. Even if you’re not typography-curious like myself, you should read the whole thing and not just look at the fantastic specimens.