Quantcast

Posts tagged with design

kirbystenger: breathe deep and wander.

hi-res




the Underpants Gnomes Pattern

  1. X
  2. ???
  3. Profit!




How to colour your heatmaps. Top-left is not Tufte-compliant because primary colours occupy too much of the space (it’s distracting). Top-left also uses colours that do not grade across our perceptual space. (Although hues do grade across wavelengths of light smoothly, we don’t perceive it that way.) Topographical maps that use green, brown, and yellow likewise do not grade across perceptive colour space appropriately. Top-right is fine but perhaps a little bland. A topographical map with a lot of hills and valleys would benefit more from this than one trying to show finer detail. (My intended application—overlaying two elliptical single-peaked utility functions—would have a hard time with such an approach.) @hadley recommended this paper to me. I was asking how to select colours to represent level curves (isoclines / isoutility curves / etc) on a 2-D plot. (I.e., how to plot a ℝ²→ℝ¹ function effectively with colours other than greyscale+red.)   Big-money quote from Zeileis, Hornik, and Murrell: It has been hypothesised that human vision evolved in three stages: perception of light/dark contrasts; yellow/blue contrasts (usually associated with our notion of warm/cold); green/red contrasts (helpful for assessing the ripeness of fruit). ….. The subjective experience of [colour, however,] is less well understood.   Wikipedia pages to read: RGB (old news) HSV (old news) CIELUV HCL = Hue Chroma Lightness

How to colour your heatmaps.

  • Top-left is not Tufte-compliant because primary colours occupy too much of the space (it’s distracting).
  • Top-left also uses colours that do not grade across our perceptual space. (Although hues do grade across wavelengths of light smoothly, we don’t perceive it that way.)
  • Topographical maps that use green, brown, and yellow likewise do not grade across perceptive colour space appropriately.
  • Top-right is fine but perhaps a little bland. A topographical map with a lot of hills and valleys would benefit more from this than one trying to show finer detail. (My intended application—overlaying two elliptical single-peaked utility functions—would have a hard time with such an approach.)

@hadley recommended this paper to me. I was asking how to select colours to represent level curves (isoclines / isoutility curves / etc) on a 2-D plot. (I.e., how to plot a ℝ²→ℝ¹ function effectively with colours other than greyscale+red.)

 

Big-money quote from Zeileis, Hornik, and Murrell:

It has been hypothesised that human vision evolved in three stages:

  1. perception of light/dark contrasts;
  2. yellow/blue contrasts (usually associated with our notion of warm/cold);
  3. green/red contrasts (helpful for assessing the ripeness of fruit).

….. The subjective experience of [colour, however,] is less well understood.

 

Wikipedia pages to read:

  • RGB (old news)
  • HSV (old news)
  • CIELUV
  • HCL = Hue Chroma Lightness

hi-res




[Flash 9 is required to listen to audio.]

100 Plays • Download

02:30 If you look carefully at the entire built world, you can find little stories in every tiny thing.

If you recognise that every corner, every seam, every curve was a point of decision by a really deliberate — and probably very smart — person, you can recognise a story in every little thing.

The goal of the show—it’s worked on me—is to notice more things.

—Roman Mars, host of 99% Invisible

(Source: radiolab.org)




Logic, like mathematics, is regarded by many designers with suspicion. Much of it is based on various superstitions about the kind of force logic has in telling us what to do.

First of all, the word “logic” has some currency among designers as a reference to a particularly unpleasing and functionally unprofitable kind of formalism. The so-called logic of Jacques François Blondel or Vignola, for instance, referred to rules according to which the elements of architectural style could be combined. As rules they may be logical. But this gives them no special force unless there is also a legitimate relation between the system of logic and the needs and forces we accept in the real world.

Again, the cold visual “logic” of the steel-skeleton office building seems horribly constrained, and if we take it seriously as an intimation of what logic is likely to do, it is certain to frighten us away from analytical methods. But no one shape can any more be a consequence of the use of logic than any other, and it is nonsense to blame rigid physical form on the rigidity of logic.

Christopher Alexander, Notes on the Synthesis of Form





Makers

Artists, engineers, and entrepreneurs all build things.

But art majors, engineering majors, and business majors seem to hate each other.

That sucks.




Freshbooks vs Smartecarte

The above websites are all suspiciously similar — not made by the same person, but by the same culture: web developers. Fact:

  • All of them claim to be “the easiest way to send invoices online”.

I believe the logic behind developing these products must have gone something like this:

\text{B2B} + \text{web 3.0} = \$\$\$\$

Kind of like the underpants gnomes from South Park. I can imagine the conversations that went on as the designers were planning:

  • Designer 1: … but it will be really sleekly designed.
  • Designer 2: Yeah. Simple.
  • Designer 1: Simple, yeah, clean.
  • Designer 2: Elegant.
  • Designer 1: We’re going to make a million bucks.
  • Designer 2: We’re going to be rich.

Too bad not everybody wants to computerize every part of their lives, although web developers typically do — and are even willing to shell out $50 for a beautifully-styled Cocoa app (think Delicious Monster’s library app).

This is why applications on the web are mostly for people who work on the web

I don’t believe the invoicing applications were developed to solve a customer’s problem. How many people are really saying to themselves, “Gosh, I would be raking it in from big-money clients if only I had professional-looking invoices!” I bet a goose egg.

It is fun to play around on FreshBooks. Not gonna lie. But it can’t bring in revenue, so it can’t appeal to a B2B customer in a fundamental way. It’s more like hiring office masseurs — fun and maybe-practical-but-not-really.

Who needs this?

If you’ve already snagged a Fortune 500 client, you can afford an artist to design an invoice for you — or choose from a Word / Pages template — or just shoot off an email that says “That’ll be 25,000 bucks, please.” And attach a spreadsheet detailing the costs.

Tracking time

Time-tracking is a great feature. I would actually push contractors to oDesk just so I can track their work. But it’s only useful if all of your work is done at a computer, and you can get comparable results with pen-and-paper. Web designers living in their own world again.

I don’t mean to demean web designers on the whole. It’s admirable that people are beautifying things, simplifying things, and focusing on user experience. And design is really important in some places (like the NYT).

I’m just saying that I would have to significantly re-arrange my own process if I committed to billing and accounting this way, without a concrete value-add. Maybe if I’m flush with investor cash and high on the concept of “being an entrepreneur” I would do this.

Anyway, let me close with a counterweight. Instead of treating customers like idiots with money to burn, this company treats customers like kings who deign to do business with them.

No-Brainer for the customer

Smartecarte — those things at the airport. Know how the smartecarte company got their product into airports? They install the racks, have their own service-people, and pay the airport rent regardless of how much money they make.

That must be a no-brainer for the airport owner. Practically free money, which people seem to like. The smartecarte doesn’t take up enough space to block out other revenue-generating space like coffee shops and magazine stores. It also adds value for travelers — one group (of several) the airports want to please.

So smartecarte does all the work, takes the risk if their projections about usage and pricing are wrong, and stays out of the airport’s (customer’s) way. The airport keeps doing things the way it always did, just makes more money.




Good use of colour here.

They break the “rule” of only using one colour, but by allying ‘Excedrin’ with ‘Effectiveness’ and ‘Tylenol’ with ‘Gentle’, they make the extra hue worth it. Hue comes to represent both the quality and the exemplar of the quality. Also, the multiple colours clarify the transition between slides.

Mathematical Marketing

I also like the liberal use of mathematics.

Perhaps “perception” is not a dimension, isn’t isomorphic to ℝ², or is unrigorous for many reasons. No matter. Math is a language, a way of thinking, and in this case it’s the clearest way to make the point.

(Source: ocw.mit.edu)










What car websites should be like:

Car websites should be communities where people can openly talk about their model, give feedback to engineers (and designers for that matter). Car websites should tell the story how the car was built and who built it and why the steering wheel looks like it is and what the main engineering problems were, and tell how the designer came up with the main idea and let people react to it. Openly.

(Source: informationarchitects.jp)




Here is how to improve your charts, graphs, maps, and plots: Erase non-data ink. Erase redundant data ink. Maximize the ratio of data to ink. Show data variation, not design variation. The surface area of graphical elements should be directly proportional to the numerical quantities represented.  (Don’t use 3-D bar charts, for example.) Don’t lie. Get as much data as you can in the first place. Apply the right transformations to the data (adjust for inflation, divide to per-capita numbers, take the square root of naturally squared quantities). Then, you can shrink the graphics way down. Increase data density and data resolution. Maximize the amount of information per unit of space. Maximize the amount of information per unit of ink. Above all else show the data. For example, here’s how he would use the eraser, not the pen to improve on the typical bar chart or histogram.  (3-D bar charts are right out.) Additionally, Tufte wants news publications to use sophisticated graphics that let the data tell their intricate story, rather than simplistic graphics that attempt to “dazzle” the viewer. Like good writing, good graphical displays of data communicate ideas with clarity, precision, and efficiency. Like poor writing, bad graphical displays distort or obscure the data, make it harder to understand or compare, or otherwise thwart the communicative effect which the graph should convey. Lastly, regarding wide versus tall graphics: If the data suggest a shape to the chart, follow that suggestion. Otherwise, move toward graphics about 50 percent wider than tall.

Here is how to improve your charts, graphs, maps, and plots:

  • Erase non-data ink.
  • Erase redundant data ink.
  • Maximize the ratio of data to ink.
  • Show data variation, not design variation.
  • The surface area of graphical elements should be directly proportional to the numerical quantities represented.  (Don’t use 3-D bar charts, for example.)
  • Don’t lie.
  • Get as much data as you can in the first place.
  • Apply the right transformations to the data (adjust for inflation, divide to per-capita numbers, take the square root of naturally squared quantities).
  • Then, you can shrink the graphics way down.
  • Increase data density and data resolution.
  • Maximize the amount of information per unit of space.
  • Maximize the amount of information per unit of ink.
  • Above all else show the data.

For example, here’s how he would use the eraser, not the pen to improve on the typical bar chart or histogram.  (3-D bar charts are right out.)

Tufte histogram

Additionally, Tufte wants news publications to use sophisticated graphics that let the data tell their intricate story, rather than simplistic graphics that attempt to “dazzle” the viewer.

  • Like good writing, good graphical displays of data communicate ideas with clarity, precision, and efficiency.
  • Like poor writing, bad graphical displays distort or obscure the data, make it harder to understand or compare, or otherwise thwart the communicative effect which the graph should convey.

Lastly, regarding wide versus tall graphics:

  • If the data suggest a shape to the chart, follow that suggestion.
  • Otherwise, move toward graphics about 50 percent wider than tall.

hi-res




How does this happen?  I am reading sites about how to layout your website to make it readable, and NONE OF THEM ARE READABLE.  They use small text and lots of distracting colors, for example.  I threw them in the plugin Readability, which I love, and problem solved.







*