/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    img: "img",
    em: "em",
    ul: "ul",
    li: "li"
  }, _provideComponents(), props.components), {Scream} = _components;
  if (!Scream) _missingMdxReference("Scream", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Any system with user interface has certain state at any given point in time. Usually its state changes over time by external factors or with user actions. Users need to understand system's current state to be able to perform meaningful actions upon it."
    }), "\n", _jsxs(_components.p, {
      children: ["In this case user interface is like an ", _jsx(_components.a, {
        href: "/notes/signal-to-noise-ratio",
        children: "imperfect"
      }), " magnifying glass that allows you to look at the snapshot of the system at its current state."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.img, {
        src: "/notes/show-me-the-data-1.png",
        alt: "System state is changing over time"
      }), "\n", _jsx(_components.em, {
        children: "System state is changing over time"
      })]
    }), "\n", _jsx(_components.p, {
      children: "So it all goes down to how full is the picture that user sees while working with the system via its user interface."
    }), "\n", _jsx(Scream, {
      children: "To act efficiently, the user must see the most recent version of the system possible"
    }), "\n", _jsx(_components.p, {
      children: "Do not hide data that is already available to the user."
    }), "\n", _jsx(_components.p, {
      children: "Some examples of the existing state of the system:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Validation error in the input field. If it is known that the field has error, it should be visible permanently."
      }), "\n", _jsxs(_components.li, {
        children: ["Some setting was just saved. It should be clear that currently there are no new unsaved changes. On the other hand, if there was an error while saving changes, it should be clear that current changes were ", _jsx(_components.em, {
          children: "not"
        }), " saved."]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "All valuable information about the current state should be visible, identifiable and persistent."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Show me the data

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    h2: "h2",
    blockquote: "blockquote",
    em: "em",
    img: "img",
    ol: "ol",
    li: "li"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["Same space can hold different amounts of data. The more datapoints are packed into the same space, the more data dense it is. All well explained by Edward Tufte in his ", _jsx(_components.a, {
        href: "https://www.edwardtufte.com/book/the-visual-display-of-quantitative-information/",
        children: "first book"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Data is a tool"
    }), "\n", _jsx(_components.p, {
      children: "The more specialized interface you are building, the more information density it should have. Professional tools are meant to be loaded with data. Classic example is a pilot's cockpit – for regular person it is overwhelming, for a pilot it is all clear and everything is in place."
    }), "\n", _jsx(_components.p, {
      children: "People gradually learn their tools and it becomes natural to interpret lots of data points – much more than today's average information product suggests as a standard. It is likely a mistake to try to hide data within 'clear minimalistic' designs when working on interfaces people spend a lot of time with."
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "Nothing is lost by to those puzzled by the frame of dashes, and something is gained by those who do understand. Moreover, it is a frequent mistake in thinking about statistical graphics to underestimate the audience. Instead, why not assume that if you understand it, most other readers will too? Graphics should be as intelligent and sophisticated as the accompanying text."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "E. Tufte. The Visual Display of Quantitative Information, 136"
      })
    }), "\n", _jsx(_components.p, {
      children: "Directing user attention towards more important data over not-so-important data is a great way of building interfaces, but hiding data in favor of presenting things in a simpler way is a mistake in most cases."
    }), "\n", _jsx(_components.p, {
      children: "For example, trading terminals are notorious for their complexity, but somehow professional traders use them to their advantage without going insane."
    }), "\n", _jsx(_components.p, {
      children: "Should trading terminals looked like this, it would be impossible:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/notes/information-density-1.png",
        alt: "Oversimplified trading terminal interface"
      })
    }), "\n", _jsx(_components.p, {
      children: "A ticker, current price and a simplified graph, nothing else. Minimal? Yes, just like an effort of the designer who produced this (me)."
    }), "\n", _jsx(_components.h2, {
      children: "Increase signal-noise ratio and information density"
    }), "\n", _jsx(_components.p, {
      children: "This principle can be applied to any other interfaces too. Question is in how efficiently we can organize data given limited space and attention of the user within current context. Space can be saved by making data elements multifunctional, resulting in increased information density. Attention of the user can be directed by color, visual accents, type, imagery, etc."
    }), "\n", _jsx(_components.p, {
      children: "Rather than complementing control elements with additional hints or other elements, better strategy is to increase information density of elements by merging their properties like in this example:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/notes/information-density-2.png",
        alt: "Online store items"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["We got rid of repeating ", _jsx(_components.em, {
        children: "Buy"
      }), " label and increased information density of the buttons. Now each button performs two functions instead of one, taking up half the space:"]
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsxs(_components.li, {
        children: ["Performs ", _jsx(_components.em, {
          children: "Buy"
        }), " action"]
      }), "\n", _jsx(_components.li, {
        children: "Shows price"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Functionality was not harmed, as button with the price unequivocally tells user what it does. Even if it is not, after one try user will get the grip of it and, as a reward, will avoid seeing a whole battery of 'Buy' buttons every single time."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Information density

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Many designers for some reason ignore that copy is a huge, probably the most important part of any design. Just try to design something without writing anything!"
    }), "\n", _jsx(_components.p, {
      children: "Yet this remains a common practice to give text the lowest priority and prepare something with 'temporary' copy. That temporariness gets ignored and, finally, makes it to production because everybody got used to it. Big mistake lies in a fact that temporary copy equals unfinished design. Why there were enough time to design forms, buttons, scenarios, but no time or brainpower for copy? How is that?"
    }), "\n", _jsx(_components.p, {
      children: "Given all that, every designer should know how to work with text. How to format it, what to write, how to pass the message across to the user. You can differentiate inexperienced designers from veterans by looking at how they work with text."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Text is design

/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p"
  }, _provideComponents(), props.components);
  return _jsx(_components.p, {
    children: "Sometimes somebody has to just bake bread."
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Not all successful products are innovative

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    img: "img"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: [_jsx(_components.img, {
        src: "/notes/you-are-missing-out-on-new-features-1.png",
        alt: "Chrome update modal"
      }), "\nTypical FOMO-inducing marketing that has nothing to do with the real causes of why software has to be updated. That is a bad product design. Any company that uses such approach at the core of its product is lying in a sense."]
    }), "\n", _jsx(_components.p, {
      children: "Creating a sense of urgency works and helps you sell more – that is clear. But the whole wording is ridiculous. Why in the world you think I am missing out on your new features? In fact I am having a great time without them!"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


You are missing out on new features

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    ol: "ol",
    li: "li"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Many programming languages with static typing infer types from expressions when possible. However, it is interesting that most (if not all of them) programming languages are missing out on opportunity to infer types from variable names."
    }), "\n", _jsxs(_components.p, {
      children: ["There are lots of certain naming patterns formed in most of the languages. For example, it is a common practice to start a boolean variable name with ", _jsx(_components.code, {
        children: "is"
      }), " in JS or end it with ", _jsx(_components.code, {
        children: "?"
      }), " in Ruby. But why not make it a part of the language type system?"]
    }), "\n", _jsx(_components.p, {
      children: "Definition of the variable could be a bit simpler (in pseudocode):"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "def bool is_valid = false\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "could be:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "def is_valid = false\n"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Interpreter or compiler could rely on variable names in addition to inference from usage. Interpreter could also add this ", _jsx(_components.code, {
        children: "bool"
      }), " internally or use other tricks. We, humans should not care much about this."]
    }), "\n", _jsx(_components.p, {
      children: "Benefits are obvious:"
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "Variables naming gets easier."
      }), "\n", _jsx(_components.li, {
        children: "Stricter conventions enforce consistency across codebase."
      }), "\n", _jsx(_components.li, {
        children: "Less code."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "What is it that prevents us from doing this?"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Infer types from variable names

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    img: "img",
    em: "em",
    a: "a"
  }, _provideComponents(), props.components), {Scream} = _components;
  if (!Scream) _missingMdxReference("Scream", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Indeed, not all interaction animations are good for user experience."
    }), "\n", _jsx(_components.p, {
      children: "Take a look at this Stripe navigation:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/notes/stripe-menu.gif",
        alt: "Stripe main navigation"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Looks cool, but it is also slow. Imagine you have to use something like this every day. After 10 minutes it will become ", _jsx(_components.em, {
        children: "really"
      }), " annoying. Instead of clicking and doing whatever you are up to, you have to wait."]
    }), "\n", _jsx(_components.p, {
      children: "Compared to MacOS menu interaction speed, Stripe menu interaction is dead slow:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/notes/macos-menu.gif",
        alt: "MacOS menu speed"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["According to ", _jsx(_components.a, {
        href: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4456887/",
        children: "certain studies"
      }), " the mean human visual reaction time is 180–200 ms. We can suppose that any animated response to user actions that happens faster than that will be perceived as fast. Everything that takes longer will be perceived as slow."]
    }), "\n", _jsx(_components.p, {
      children: "Compare how slow and almost painful it feels when animation takes 300 ms, not even talking about 500 ms. Even 150 ms is a bit slow if you picky."
    }), "\n", _jsx("style", {
      children: `
.note-wrapper {
  display: flex;
  flex-flow: row nowrap;
  margin: 30px 0 50px;
  gap: 80px;
  justify-content: center;
}
.note-col {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
p.note-p {
  margin-bottom: 20px;
  font-size: 15px;
  color: #aaa;
}
.note-link {
  font: 50px/1.2 sans-serif;
  color: #0061C7;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
  transition: color .15s linear 0s;
  cursor: pointer;
}
.note-link:hover {
  color: #E55725;
}
.note-link.t150 {
  transition-duration: 0.15s;
}
.note-link.t300 {
  transition-duration: 0.3s;
}
.note-link.t500 {
  transition-duration: 0.5s;
}
.note-link.non-linear {
  transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}
`
    }), "\n", _jsxs("div", {
      className: "note-wrapper",
      children: [_jsx("div", {
        className: "note-col",
        style: {
          alignSelf: 'flex-end',
          marginBottom: '14px'
        },
        children: _jsxs("svg", {
          width: "20",
          height: "20",
          viewBox: "0 0 20 20",
          fill: "none",
          xmlns: "http://www.w3.org/2000/svg",
          children: [_jsx("line", {
            x1: "0",
            y1: "20",
            x2: "18",
            y2: "2",
            stroke: "#009fff",
            strokeWidth: "2"
          }), _jsx("line", {
            x1: "0",
            y1: "20",
            x2: "20",
            y2: "20",
            stroke: "#aaa",
            strokeWidth: "2"
          }), _jsx("line", {
            x1: "0",
            y1: "20",
            x2: "0",
            y2: "0",
            stroke: "#aaa",
            strokeWidth: "2"
          })]
        })
      }), _jsxs("div", {
        className: "note-col",
        children: [_jsx("p", {
          className: "note-p",
          children: "150 ms"
        }), _jsx("a", {
          className: "note-link t150",
          children: "Hello"
        })]
      }), _jsxs("div", {
        className: "note-col",
        children: [_jsx("p", {
          className: "note-p",
          children: "300 ms"
        }), _jsx("a", {
          className: "note-link t300",
          children: "Hello"
        })]
      }), _jsxs("div", {
        className: "note-col",
        children: [_jsx("p", {
          className: "note-p",
          children: "500 ms"
        }), _jsx("a", {
          className: "note-link t500",
          children: "Hello"
        })]
      })]
    }), "\n", _jsxs(_components.p, {
      children: ["However it would be unfair not to mention that we can mitigate slow animation effect by adjusting the transition timing function from ", _jsxs("span", {
        style: {
          color: '#009fff'
        },
        children: ["linear ", _jsx("svg", {
          style: {
            display: 'inline'
          },
          width: "20",
          height: "20",
          viewBox: "0 0 20 20",
          fill: "none",
          xmlns: "http://www.w3.org/2000/svg",
          children: _jsx("line", {
            x1: "1",
            y1: "19",
            x2: "19",
            y2: "1",
            stroke: "#009fff"
          })
        })]
      }), " to ", _jsxs("span", {
        style: {
          color: '#e84b4b'
        },
        children: ["logarithmic ", _jsx("svg", {
          style: {
            display: 'inline'
          },
          width: "20",
          height: "20",
          viewBox: "0 0 20 20",
          xmlns: "http://www.w3.org/2000/svg",
          "xmlns:xlink": "http://www.w3.org/1999/xlink",
          children: _jsx("path", {
            fill: "none",
            stroke: "#e84b4b",
            d: "M 1,19 c 0,-9 9,-18 18,-18"
          })
        })]
      }), " and effectively increasing animation speed at the beginning:"]
    }), "\n", _jsxs("div", {
      className: "note-wrapper",
      children: [_jsx("div", {
        className: "note-col",
        style: {
          alignSelf: 'flex-end',
          marginBottom: '14px'
        },
        children: _jsxs("svg", {
          width: "20",
          height: "20",
          viewBox: "0 0 20 20",
          xmlns: "http://www.w3.org/2000/svg",
          "xmlns:xlink": "http://www.w3.org/1999/xlink",
          children: [_jsx("line", {
            x1: "0",
            y1: "20",
            x2: "20",
            y2: "20",
            stroke: "#aaa",
            strokeWidth: "2"
          }), _jsx("line", {
            x1: "0",
            y1: "20",
            x2: "0",
            y2: "0",
            stroke: "#aaa",
            strokeWidth: "2"
          }), _jsx("path", {
            d: "M 1,19 c 0,-9 9,-18 18,-18",
            fill: "none",
            stroke: "#e84b4b",
            strokeWidth: "2"
          })]
        })
      }), _jsxs("div", {
        className: "note-col",
        children: [_jsx("p", {
          className: "note-p",
          children: "150 ms"
        }), _jsx("a", {
          className: "note-link t150 non-linear",
          children: "Hello"
        })]
      }), _jsxs("div", {
        className: "note-col",
        children: [_jsx("p", {
          className: "note-p",
          children: "300 ms"
        }), _jsx("a", {
          className: "note-link t300 non-linear",
          children: "Hello"
        })]
      }), _jsxs("div", {
        className: "note-col",
        children: [_jsx("p", {
          className: "note-p",
          children: "500 ms"
        }), _jsx("a", {
          className: "note-link t500 non-linear",
          children: "Hello"
        })]
      })]
    }), "\n", _jsx(_components.p, {
      children: "It helps a bit, although only to certain extent."
    }), "\n", _jsxs(_components.p, {
      children: ["And back to Stripe menu example – the fact that I cannot move cursor to just appeared menu faster than it actually appeared does not even matter. It still feels slow, because I ", _jsx(_components.em, {
        children: "expect"
      }), " it to already be there."]
    }), "\n", _jsx(_components.p, {
      children: "So,"
    }), "\n", _jsx(Scream, {
      children: "Animation of interactive elements should be finished earlier than anticipated interaction"
    }), "\n", _jsx(_components.p, {
      children: "That means that any interactive element should change its color, position, opacity, transformation or any other visual feedback faster than the average human reaction time. Otherwise it will be perceived as slow. Clicking the button that reacts longer than you would normally expect would feel unnatural and fake, slow."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Show it immediately

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    code: "code"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "TypeScript is a strange beast. It helps achieve type safety, but at a certain point, it stops being helpful and instead complicates things a lot."
    }), "\n", _jsx(_components.p, {
      children: "First of all, I don't know any engineer who is a real expert in Typescript that can do whatever they want with it. Everyone knows it only to certain degree and applies to the certain extent. Not as infrequent as desired, Typescript 'coverage' takes more time to complete than actually writing functional Javascript."
    }), "\n", _jsxs(_components.p, {
      children: ["In fact Typescript is so powerful that you can do the ", _jsx(_components.a, {
        href: "https://www.learningtypescript.com/articles/extreme-explorations-of-typescripts-type-system",
        children: "metaprogramming"
      }), " with it, so the real question is how precise you want to be with the types. And it seems there is no finish line. You can go on forever in describing all intricate details of the logic of your code."]
    }), "\n", _jsx(_components.p, {
      children: "When the code is really complicated and messing with third-party libraries it becomes really hard to cover it with Typescript in full. At this point how can you be sure that everything is bulletproof? If not so sure then what is the point of it all? The basic cases are covered, but complex logic remains a black box because nobody has that needed level of Typescript to close all the gaps."
    }), "\n", _jsxs(_components.p, {
      children: ["The most complex code that would benefit the most from Typescript is often left uncovered and with simplified types or even ", _jsx(_components.code, {
        children: "any"
      }), "s instead."]
    }), "\n", _jsx(_components.p, {
      children: "C'est la vie!"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Advanced Typescript problem

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: [_jsx(_components.a, {
        href: "https://www.alfredapp.com/",
        children: "Alfred for Mac"
      }), " is an app that works in a way similar to MacOS's Spotlight, but is heavily customizable and, most importantly, has a feature called Workflows. You can script a lot of things with Workflows. So I script."]
    }), "\n", _jsxs(_components.p, {
      children: ["I use Alfred on a daily basis, probably hundreds of times per day to save myself time. Hard to say how much I saved, but it feels so much better to avoid going through the same interfaces and doing the same actions over and over again to open bookmarks, translate stuff, google, answer emails or search for my notes. Alfred is the ", _jsx(_components.a, {
        href: "/notes/remove-interfaces",
        children: "Adapter interface"
      }), " of my choice and an ongoing experiment on how much I can automate."]
    }), "\n", _jsxs(_components.p, {
      children: ["I transform strings with my ", _jsx(_components.a, {
        href: "/projects/string-multitool",
        children: "String Multitool"
      }), ", I also have a workflow that opens any GitHub repository from my org with a few keystrokes, I organize my links with my own ", _jsx(_components.a, {
        href: "/projects/bookmarks",
        children: "Bookmarks"
      }), " workflow, I paste emojis and text snippets with Alfred, and do many other things. So it is really saving me a ton of time."]
    }), "\n", _jsx(_components.p, {
      children: "But the most interesting question is whether it actually makes me more efficient at what I do? I see a lot of great fellow engineers that do not use such tools. Sometimes it is really painful to watch how they do things manually. But that does not make them less productive."
    }), "\n", _jsx(_components.p, {
      children: "I tend to think that productivity (if under this word we mean actual results) and work speed are two different swim lanes – you will not necessarily be productive if you will be fast and vice versa. But I also tend to think that overall result is a compound of many traits, thus improving any of them improves the whole as well. If you hone your craft you should optimize and sharpen your tools as much as you can. Reducing time spent doing repetitive tasks is one of these sharpening techniques."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Why I use Alfred

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    img: "img"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "When there is a need to show many similar elements, at certain point there are too much of them. One of the common solutions is to hide part of them behind small 'Expand' button or something similar. Most of the time it works, but in some cases it reduces interface efficiency."
    }), "\n", _jsx(_components.p, {
      children: "Typical situation – we have five elements, but we also set the limit after which we hide excessive elements to four. Four looks just right on our page, not too little, not too much."
    }), "\n", _jsx(_components.p, {
      children: "So here we are with a list of four elements, let them be tags and a 'more' button after them. If one clicks on 'more' another single tag gets revealed. Congratulations, we now got one of the dumbest interfaces in the world!"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/notes/hiding-excessive-elements-1.png",
        alt: "Do not hide just one element"
      })
    }), "\n", _jsx(_components.p, {
      children: "To avoid such disgrace, we can design this block in a smarter way."
    }), "\n", _jsx(_components.p, {
      children: "If the total number of elements exceeds our limit (say, four) by more than two, then we will show 'more' button. If not, we will just show all of them, six at max. This is much better than hiding just two elements behind an extra click."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Hiding excessive elements

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    img: "img",
    em: "em",
    ul: "ul",
    li: "li"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/notes/time-of-events-1.png",
        alt: "Many moons ago"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Let's talk about how to represent time of events in user interfaces. For example, we have some articles in a blog and we would love to let reader know when each one of them was published. Usually there are two ways to go: simply show date and time (like ", _jsx(_components.em, {
        children: "15 May 2015 15:07"
      }), "), or show relative time (like ", _jsx(_components.em, {
        children: "4 days ago"
      }), ")."]
    }), "\n", _jsx(_components.p, {
      children: "If you think about it a bit, you will see that showing relative time does not make any sense and uninformative. '6 weeks ago', '17 days ago', '2 weeks and 5 days ago' – how long is that? How could this information be more helpful than a plain date?"
    }), "\n", _jsxs(_components.p, {
      children: ["In most cases people are aware what date it is today to make calculations by themselves ", _jsx(_components.em, {
        children: "if they need to"
      }), ". Compare that to the effort needed to convert relative '6 weeks ago' to the date in your head. Even if it is '2 days ago', that is less informative than a plain date."]
    }), "\n", _jsx(_components.p, {
      children: "Another benefit of absolute time format is that it always takes predictable amount of space opposed to relative format."
    }), "\n", _jsx(_components.p, {
      children: "You never know how many characters this will take in your interface:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.em, {
          children: "Edited 2 weeks ago"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.em, {
          children: "Edited 3 months ago"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.em, {
          children: "Edited few minutes ago"
        })
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "For some layouts this can be rather important."
    }), "\n", _jsx(_components.p, {
      children: "On the other hand space taken by date here is always 10 chars:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.em, {
          children: "Edited on 15.03.2023"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.em, {
          children: "Edited on 07.06.2021"
        })
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "It is always a win to choose plain date over relative time to specify timestamp of event."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Time of events

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    img: "img",
    h2: "h2"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["Sometimes it feels like integrating a back button into your breadcrumbs navigation is a good idea:\n", _jsx(_components.img, {
        src: "/notes/back-button-in-navigation-1.png",
        alt: "Breadcrumbs with back button"
      })]
    }), "\n", _jsx(_components.p, {
      children: "Do not fall for it. It usually causes more problems than provides benefits."
    }), "\n", _jsx(_components.h2, {
      children: "It is unclear what exactly back button does"
    }), "\n", _jsx(_components.p, {
      children: "With back button it is not clear whether it goes back in history or just to parent entity."
    }), "\n", _jsx(_components.p, {
      children: "The former does not make sense at all – it just duplicates browser's back button functionality."
    }), "\n", _jsxs(_components.p, {
      children: ["The latter could be easily replaced with parent entity name:\n", _jsx(_components.img, {
        src: "/notes/back-button-in-navigation-2.png",
        alt: "Breadcrumbs with parent entity name"
      })]
    }), "\n", _jsx(_components.p, {
      children: "This approach provides more context and clearer structure."
    }), "\n", _jsx(_components.h2, {
      children: "Context-dependent back button"
    }), "\n", _jsx(_components.p, {
      children: "Sometimes you need to allow user to get back to wherever he came from, when the structure is not linear and user can navigate to the page from numerous locations directly. Back button then serves as a portal back to the origin location."
    }), "\n", _jsx(_components.p, {
      children: "This looks like only valid scenario for back button usage. But since we must have that context of the origin (or how do we navigate them back in other case?) somewhere in application's state, then again we can just show the origin rather than generic back button."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Back button in navigation

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Here is a good interface principle aimed to test how scalable and well prepared your design is for real life."
    }), "\n", _jsx(_components.p, {
      children: "If you have something listing similar entities, just multiply them by 100 and see what happens."
    }), "\n", _jsx(_components.p, {
      children: "Say you have a text field that user should fill in and it looks neat in your design. What if you multiply number of chars by 100? Maybe single line input is not enough, maybe it will blow up or maybe you need to limit the number of chars."
    }), "\n", _jsx(_components.p, {
      children: "Have a field with tags? What if you multiply their count by 100?"
    }), "\n", _jsx(_components.p, {
      children: "List of entries on a page, page numbers on a page, uploaded images, thumbnails, item cards, to-do list and so on... What if you multiply each one of them by 100? That is a good question to start with."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Multiply by 100

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    img: "img"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/notes/checkbox-vs-switch-1.png",
        alt: "Checkbox vs switch"
      })
    }), "\n", _jsx(_components.p, {
      children: "You can see checkboxes everywhere on screen user interfaces. But here and there they are represented as switches. Both are boolean fields, both switch binary state. What is the difference?"
    }), "\n", _jsx(_components.p, {
      children: "A switch put in a long form, say, order form, would feel unnatural. Checkbox in a form would feel more organic. That is because levels of interactivity of these elements are different. Checkbox is less interactive, it gets applied not immediately, but after some other actions performed. For example, after you click the submit button."
    }), "\n", _jsxs(_components.p, {
      children: ["This intuitive distinction comes from the real checkboxes from the real paper forms:\n", _jsx(_components.img, {
        src: "/notes/checkbox-vs-switch-2.png",
        alt: "Checkbox in a paper form"
      })]
    }), "\n", _jsx(_components.p, {
      children: "Usually you would not expect anything happen after ticking it on a piece of paper. Things will happen only after you hand in the form to the local authority."
    }), "\n", _jsxs(_components.p, {
      children: ["This is the real switch:\n", _jsx(_components.img, {
        src: "/notes/checkbox-vs-switch-3.jpg",
        alt: "Physical switch"
      })]
    }), "\n", _jsx(_components.p, {
      children: "Opposed to checkbox, you would expect immediate feedback from physical switch after turning it on or off."
    }), "\n", _jsx(_components.p, {
      children: "Rule of thumb for computer interfaces – use checkboxes for choices/options executed later and switches for immediately applied state change."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Checkbox vs switch

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    em: "em"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "There are times when you face a problem and you dead sure that it is impossible to resolve it due to circumstances out of your control. It is always worth questioning this impossibility."
    }), "\n", _jsxs(_components.p, {
      children: ["It is not about motivation or popular 'everything is possible' motto, but more about actualization of your knowledge. Say, you 100% sure there is no native method to flatten an array in your favorite programming language. And if you have to flatten a specific array in your code right now, you instantly start thinking about how you would implement a recursive function to do just that or maybe how to change the initial shape of data. But what if you were wrong and there ", _jsx(_components.em, {
        children: "is"
      }), " a native method out there? What if it has been added to the language just recently?"]
    }), "\n", _jsx(_components.p, {
      children: "So here is the principle – every time you think something is impossible, confirm it. Maybe circumstances have changed and what was impossible before is absolutely possible now."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Check impossibility

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Essentially every programming code does two things – it is an input interface for computer and a self-documenting program manual for humans who will read the code later."
    }), "\n", _jsx(_components.p, {
      children: "Each and every programming language designed for humans, not for computers. Computers are fine with just ones and zeros. Let's not forget about it when writing code as we are doing it for another human being rather than for machine. This other human being could possibly be yourself in the future."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Code is an interface

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    img: "img",
    em: "em"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["If we think about the most efficient user interface possible, with ", _jsx(_components.a, {
        href: "/notes/signal-to-noise-ratio",
        children: "signal-to-noise ratio"
      }), " close to 1, it literally has no interface. Everything you are about to imagine is already done or in the process."]
    }), "\n", _jsx(_components.p, {
      children: "How close can we get to it realistically? Thing that comes to my mind first is standartization. Currently, each and every website or app has its own user interface and we have to learn how to use it. After several decades of evolution of internet, some UI control elements are more or less standardized. Take button, for example. It is simple, everybody knows what it does in theory, but still sometimes buttons on certain websites have strange and unconventional behavior."
    }), "\n", _jsxs(_components.p, {
      children: ["Typical experience today looks approximately like this:\n", _jsx(_components.img, {
        src: "/notes/remove-interfaces-1.png",
        alt: "User interacts with UI of an app"
      })]
    }), "\n", _jsx(_components.p, {
      children: "How can we avoid having to learn interface of each and every website/app? Standardize it, of course! Each button should be with the same design, have the same functionality, same states and behavior."
    }), "\n", _jsx(_components.p, {
      children: "Yes, this is utopia of course, nobody will do that."
    }), "\n", _jsx(_components.p, {
      children: "What if apps and websites had some kind of universal API that would allow us to control them programmaticaly via certain protocol. We could use it to operate them from outside. And we could create some kind of adapter that would connect our own custom interface to the app. That way we could remove inefficient 'alien' user interface and use our own, familiar user interface, customized just for us."
    }), "\n", _jsxs(_components.p, {
      children: ["Let's call it ", _jsx(_components.em, {
        children: "Adapter interface"
      }), ". The whole idea could be illustrated with something like this:\n", _jsx(_components.img, {
        src: "/notes/remove-interfaces-2.png",
        alt: "User interacts with app via adapter interface"
      })]
    }), "\n", _jsx(_components.p, {
      children: "Adapter Interface could be as personalized as needed for each individual, question is only in creating such adapter that works with various APIs and does its job."
    }), "\n", _jsx(_components.p, {
      children: "For example, let's take MacOS's Finder app. Imagine you need to move a file from one folder to another folder. You have to do absurd amount of small actions to achieve that. You need to move your cursor around, click Finder app in the Dock, wait until window appears, go to the folder where the file is located currently, drag it to some other folder in a weird way, make mistakes, start over again, etc."
    }), "\n", _jsx(_components.p, {
      children: "But this operation itself is basic and have been essential to computers for the last several decades. Why it takes such an amount of effort to just move the file between folders?"
    }), "\n", _jsx(_components.p, {
      children: "Now imagine how much easier it could be done with a Terminal app. Mouse or trackpad are not needed at all. You don't have to fight with user interface, all you have to do is just fire simple commands. Thing is, the simpler the action, the lesser interface is needed. So every OS is a compromise between really complicated concepts and really simple commands. It's nice to have a user interface to better understand and have a better control over complex stuff, but for simple actions an additional user interface is often just an overkill."
    }), "\n", _jsx(_components.p, {
      children: "We can use Adapter Interface to address basic and the most repetitive tasks just like moving the file. Just a few more examples: google something, open certain web page, open certain app, check email, turn certain setting on or off, paste certain text snippet. The list goes on."
    }), "\n", _jsx(_components.p, {
      children: "All these actions could be done without any interface with a single button click."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Remove interfaces

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    em: "em"
  }, _provideComponents(), props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Any data transmitting system has certain limited bandwidth, i.e. amount of useful information that it can pass through over certain period of time."
    }), "\n", _jsxs(_components.p, {
      children: ["In real world, efficiency of any data transmitting system is always less than 100%. Say, certain system can transmit ", _jsx(_components.em, {
        children: "X"
      }), " amount of actual meaningful data per unit of time of total ", _jsx(_components.em, {
        children: "Y"
      }), " amount of data sent per same unit of time. Then signal-to-noise ratio would be X/Y. For example if 73% of data sent is actual meaningful data, that means that the rest 27% is either noise or just signal loss. Or, more realistically, vice versa. Anyway, amount of meaningful data transmitted is always less than 100% and ratio is always less than 1."]
    }), "\n", _jsxs(_components.p, {
      children: ["We can apply this to user interface as well. Since 'user interface' has a word 'interface' in it, that means that some kind of data transmission is happening. So, any user interface allows user input to pass through and provides some response back to the user. That is a ", _jsx(_components.em, {
        children: "signal"
      }), ". Along with signal always comes ", _jsx(_components.em, {
        children: "noise"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: "Designer's task is either to increase a fraction of signal or decrease a fraction of noise. In a nutshell, that's what any user interface is all about and that's the only reason why one would want to improve it. Any interface can be viewed through the prism of signal-to-noise ratio."
    }), "\n", _jsx(_components.p, {
      children: "Potentially almost any change in user interface would affect this ratio. However, the designer should first take advantage of the improvements that provide the most value."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Notes