Speaking Product

Just about everyone in the product and design world has had experiences where they've had to work on product ideas with people whose communication styles and ways of approaching ideation didn't quite align. For lack of a better phrase, these people don't speak product, and product ideation with them winds up being a frustrating experience.

This post is about defining roughly what speaking product means, and what you can do with people who don't. It's inspired by experiences I've had over the years of working with all different types of people on product concepts - from journalists to therapists, doctors, engineers, educators, and more.

What "Speaking Product" Means

I've noticed two patterns for people who don't speak product - they're either too abstract or too concrete.

To speak product is really to be able to understand and navigate the balance between the abstract and the concrete when discussing new concepts, knowing when to zoom in and when to zoom out, and finding the right level of detail for the problem at hand.

Ideation goes fastest at 10k-30k elevation. Too close to ground and things come crashing to a halt, stuck navigating the small hills and valleys of details. Too high up and you run out of oxygen or get sucked into space.

People who are too Abstract

Some people can only speak in abstract terms when discussing product. These are often CEOs or leaders who are too disconnected from specifics and too unskilled in product or design to make meaningful progress in product discussions. These people can see connections between disparate things, some of which may make sense if properly thought out, others of which make absolutely no sense. They tend to think their ideas are much more concrete than they are, and latch onto the emotion of 'this is going to be great' without sufficient detail for that to be an informed conclusion.

The way to work with these people is to get them to agree on examples and use cases and general goals. You may also need to tell them that the idea was theirs as you go about defining the product, especially if there's a power dynamic.

People who are too Concrete

Some people can only speak in concrete, linear terms when discussing product. These are often subject matter experts, engineers, etc. They are diligent people who want to provide the right answer, but who lack the imagination or abstract reasoning abilities to make meaningful progress in product discussions. These people need product ideas to be explained to them in torturous detail, describing a very tightly defined circumstance in which the product is used, or walking through each step of what the product may do. They tend to latch on to disproving the premise of the imagined product with (often irrelevant) edge cases and details, rather than seeing the general thrust of what the ideated product is trying to do and whether it makes sense.

The way to work with these people is to keep reinforcing the general goal and purpose of the product, to keep them focused on the bigger picture. When necessary, get feedback only in specific circumstances to reality check your ideas, but otherwise keep these people away from ideation sessions.

Learning to speak product

A lot of people are dismissive of those who cannot speak product as being people who will never be able to. There's probably some truth to that, but I remain open to the idea that finding the right balance of abstract and concrete thinking is a skill that must be learned.

Dark Mode for Coda

At some point I'm going to post my thoughts on Coda, but lets just say that I quite enjoy it as a tool to make projects with a lot of interconnections and sections manageable in a way that Google Docs, markdown editors, and other tools just cannot.

Continuing my interest in all things dark mode, one annoyance right now is that Coda doesn't seem to support themes, and presents only the standard white background layout. This is pretty jarring when authoring content at night, but because Coda is web-based, this is just a style edit away from a fix. Using the open source extension Stylebot, I've made a set of changes to Coda that darkens most of the basic UI.

Check out the Github Gist here.

Before & after

Lightswitch - adding dark mode compatibility to a website

One of my goals developing this blog was to design it to work with both light and dark color schemes. Having different background colors is very helpful for readability and eyestrain both during the day and night, and follows the ongoing trend of computers adapting to and blending into to their surroundings.

Dark mode was the major user-facing feature in September's release of MacOS Mojave and has been well received, which means other platforms (including iOS) will surely follow. It was only a matter of time before this was brought to the web, and indeed that happened with last week's release of Safari Technology Preview 68, which lets websites specify different styles based on whether the OS is in light mode or dark mode (technically, the prefers-color-scheme media query).

However, there is one issue with just letting OS mode determine a website's color scheme - user preference. Because OS mode doesn't change based on day/night, users are going to set their OS mode once and probably leave just it that way, regardless of time of day. Those users may not always want a website to be light or dark based on their OS, and may wish to override the default.

Lightswitch.js active on this website

My solution is a bit javascript I call Lightswitch that automatically detects the user's OS mode, and also allows the user to override that mode with a button you put on your site. On this blog, the button is the half circle icon in the top right corner, but you may attach the override functionality anywhere on your site -- such as this link. You can also bind it to a keypress, such as L. Try it out.

Here's the code:

/*******************************************************************************
LIGHTSWITCH: A DARK MODE SWITCHER WITH USER OVERRIDE
By Nick Punt 10/26/2018
How to use:
  *  Create two color schemes in CSS under the classes 'light' and 'dark'
  *  Add the class 'light' or 'dark' to your body as your default color scheme
  *  Add button to page with id 'lightswitch', which lets users change/override
  *  Use the class 'flipswitch' for any style changes you want on lightswitch
Logic:
  1. When user hits page for first time, color scheme is based on OS/browser
     (if supported), otherwise it defaults to the body class you added
  2. When user clicks lightswitch to override colors, their preference is stored
  3. When user alters their OS light/dark mode, switch to dark if dark mode,
     and light if light mode
     
Note:
The 'prefers-color-scheme' css support is currently only available in Safari 
Technology Preview 68+. 
*******************************************************************************/

// New prefers-color-scheme media query to detect OS light/dark mode setting
var prefers_light = window.matchMedia('(prefers-color-scheme: light)')
var prefers_dark = window.matchMedia('(prefers-color-scheme: dark)')

// Change to dark and rotate the switch icon
function darkmode() {
  document.body.classList.replace('light', 'dark');
  document.getElementById("nav-light").classList.add("flipswitch");
}

// Change to light and rotate the switch icon
function lightmode() {
  document.body.classList.replace('dark', 'light');
  document.getElementById("nav-light").classList.remove("flipswitch");
}

// Initialization triggers light/dark mode based on prior preference, then OS setting
if(localStorage.getItem("mode")=="dark") {
  darkmode();
} else if(localStorage.getItem("mode")=="light") {
  lightmode();
} else if(prefers_light.matches) {
  lightmode();
} else if(prefers_dark.matches) {
  darkmode();
}

// Fires when user clicks light/dark mode switch in top right
function handleThemeUpdate() {
  if (document.body.classList.contains('light')) {
    darkmode();
    localStorage.setItem("mode", "dark");
  } else {
    lightmode();
    localStorage.setItem("mode", "light");
  }
}

// Runs when OS changes light/dark mode. Changes only if you were on default
// color state (light on light mode, dark on dark mode).
function OSColorChange() {
  if (prefers_light.matches) {
    lightmode();
    localStorage.setItem("mode", "light");
  } else if (prefers_dark.matches) {
    darkmode();
    localStorage.setItem("mode", "dark");
  }
}

// Listeners for when you change OS setting for light/dark mode
prefers_light.addListener(OSColorChange)
prefers_dark.addListener(OSColorChange)

Download on Github

Setting content to light or dark based on the OS mode is a first step to having our computers be truly responsive to our surroundings, but it's not the final word. Ideally, websites and documents would set a color scheme based on environmental factors like time of day and lighting in the room. Javascript isn't the right way to solve these problems though - it's the OS' job to factor these in to provide a consistent experience from UI to apps to content. The best we can do in the meantime is to set up our content with light and dark variants and allow users to set override preferences on this content.