165 design references

Obys Experiment Space · a floating grayscale archive

Reel by Andrew Chornyy

A drifting field of gray pictures can show that a studio has many experiments, and without a name on each picture it does not say which one to open.

Visit website · Obys Experiment Space

What to look at

The page is white with black type. The title is stacked and huge: OBYS, EXPERIMENT, SPACE. Small words sit above it: Space, About, White/Pride, a clock, and Contact. A "Since" line sits at the left and "Never Finished" at the right. Under the title, a loose row of gray pictures drifts and reshuffles. They are different sizes, some tilted, and they look like pages, posters, and shapes. No project name is readable on them at this size. Around the ninth second one picture is orange, a figure on a bright field, and the rest stay gray. The pointer is a small dot. Andrew's caption asks what this is and where to click.

The title stays fixed while a loose row of gray pictures, in mixed sizes, sits underneath with no readable project names.
The title stays fixed while a loose row of gray pictures, in mixed sizes, sits underneath with no readable project names.
One picture is orange and the rest stay gray. The orange one still has no name you can read.
One picture is orange and the rest stay gray. The orange one still has no name you can read.

Why it works

People pick a link from its information scent: the label, the picture, and what they already know. Nielsen Norman Group says the label is the main cue, and that a picture should add a real hint about that page rather than a generic shape. These tiles have no readable name, and at this size most of the pictures are hard to tell apart, so the scent is weak. The title names the place. It does not name a project. The same group says clickable things need a visible cue, and quotes Jakob Nielsen: "Life is too short to click on things you don't understand." A flat gray card with no name is that problem. Similarity works the other way here. Items that share a color and a card-like shape are read as one group, which is why the gray row holds together, and the one orange picture stands apart because it does not share that color. Standing apart is not the same as having a name. Andrew calls this a UX mistake he sees often. That is his judgment. The reel does not show a click that failed.

Try it

  1. Put the project name on every preview, in a place that does not depend on hovering.
  2. Use one color, as the orange picture does, only to mark the item under the pointer, and keep the name there too.
  3. Write one sentence under the title that says these are experiments and that a click opens one.
  4. On a phone, show a simple named list. Do not replace the archive with a note to come back on a larger screen.
  5. If a visitor has asked for less motion, stop the drift and leave a still row of named pictures.

What it costs

The tiles move on their own. web.dev explains that prefers-reduced-motion is how a site detects a request to cut animation, because motion a person did not ask for can bring on dizziness and nausea. A drifting row is that kind of motion. The live HTML also tells a small screen, "This experience was designed for desktop. Please revisit from a larger screen," so the archive is missing on a phone. A weak scent has its own cost: the information-scent research says that when the first screen does not give enough of a cue, people leave instead of exploring.

Words worth knowing

Sources