165 design references

Serotoninn · a runway beside the menu

Reel by Andrew Chornyy

Open the menu onto a full-length look from that department, so the clothes stay in view while the shopper picks where to go.

Visit website · Serotoninn

What to look at

The reel opens on serotoninn.com: SEROTONINN, a model split down the middle (color on one side, black and white on the other), WHERE GLAM MEETS GRUNGE, and BERLIN in red. Andrew opens CATEGORIES. On the left, a vertical list of departments, each with a count in brackets. A full-length model stands over that list and changes with the row: a black corset, a yellow bodysuit, a long black coat, a silver dress. The department name lands in huge type at the bottom, such as BODYS, COATS, or DRESSES. On the right, smaller full-body shots change under SEROTONINN. In one frame the list fades under a close-up of black fabric.

The category list on the left, with a full-length model standing over the names, and smaller looks on the right under SEROTONINN.
The category list on the left, with a full-length model standing over the names, and smaller looks on the right under SEROTONINN.
The yellow look arrives with the bodysuits row, and the word BODYS sits in huge type at the bottom. The picture matches the department.
The yellow look arrives with the bodysuits row, and the word BODYS sits in huge type at the bottom. The picture matches the department.

Why it works

This finding is about a website menu, which is what the reel is showing, not about the Facebook post itself. Nielsen Norman Group's mega-menu research says a large menu works when the choices are visible together, and that a picture in that menu can help a person visualize and compare the options. The same group's information-scent research says the picture beside a category should be a fair example of that category, not a generic photo. In the reel the yellow look arrives with BODYS and the long coat with COATS, so the picture is doing that job. The same group also says a picture in a menu helps only when it illustrates the actual choice, and that a menu should get someone to that choice quickly. When the black close-up covers the list, the picture is in the way of the words. The live source still includes a muted, looping, autoplaying menu video, plus a separate video file named for departments, including BODYS, COATS, and DRESSES. Andrew says he will remember the store. That is his claim, not a test.

Try it

  1. Pair each department name with one look from that department, as a still or a short clip.
  2. Keep the name and the count readable on top of the picture. Do not let the film cover the list, the way the black close-up does in one frame.
  3. Match the look to the department under the pointer, and show a poster of that look if the clip has not loaded.
  4. If a visitor has asked for less motion, show the poster and do not autoplay.
  5. Leave the department list usable with the pictures turned off, each name as its own link.

What it costs

The menu starts film on its own. web.dev explains that autoplaying video and other motion a person did not ask for can overwhelm people, and that prefers-reduced-motion is the signal to cut it. The page source also includes a separate video file for many departments, so the menu is carrying a lot of film before anyone has chosen. Nielsen Norman Group says a picture with nothing to do with the choice wastes the space, and that the menu should guide people to the choice quickly. A model standing on top of the words is that failure, and it showed up inside this reel.

Words worth knowing

Sources