Hacker News new | past | comments | ask | show | jobs | submit login
The UX of Lego Interface Panels (designedbycave.co.uk)
415 points by george_cave 82 days ago | hide | past | favorite | 38 comments

In my day (80s space Lego) we just had the one that looks like a screen of text with 3 buttons on the right. And the one that just had coloured rectangular buttons. And that was enough to run our space stations and LL928s. We didn't need any of that fancy stuff they've got now.

The blue one with a white-on-green cross was definitely Space, too. Maybe a couple of others.

Putting them together like this and photographing them well really elevates them.


(sorry, couldn't help it)

But yes, I recall that very same brick - I had a bunch of them, always thought we needed more variety.

We had them too. First the grey ones, later fancy blue ones!

There were also button panels on flat 2x1s. This article seems to have forgotten those.

Graphing the differences in the pieces on a LEGO panel was very clever!

This article also reminded me to "zoom out" on a design. If it's super confusing at that level, it probably still needs work. The ventilator example suffers from this a bit. It is really nice to have the instructions inline with the dials, but the visual design makes it look more complicated. If you imagined the LEGO-version, it would have more symmetrical color blocks and alignment. I don't mean to pick on them too harshly, sounds like it was made and distributed in record time!

The nostalgia this post hinges on is amazing. I remember every one of the example pieces they show here. And what's amazing is many of them you'll find showing up in LEGO sets today. It's pretty rare LEGO makes single-use pieces, even really obscure pieces end up showing up randomly elsewhere.

Same! Thanks OP for the trip down the memory lane. I even remember which sets I got them from, for instance the yellow one with the "sonar" I got from this submarine: https://lego.brickinstructions.com/en/lego_instructions/set/... and the grey "consolidated interface" one with this jet: https://lego.brickinstructions.com/en/lego_instructions/set/...

> I’ve no idea what all the valves in the picture below do, but I bet they don’t all open things that relate to each other.

Disappointingly, the picture is just a bank of water meters for an apartment building (possibly in Israel?). It does convey the message though: they are unrelated because each relates to a separate apartment but are all in one place so a inspector can read them from outside the building.

Reminds me of a similar setup I had in the basement of the apartment building I lived in: there were groups of valves on the water pipes running along the ceiling, and on each handle there was a tag with apartment numbers written on it.

This was essentially use-case organization, because the use case was, "in case of a leak upstream of your in-apartment valve, go to the basement, find the valve that controls the line you're attached to, shut it off, and go inform other people on the same line what's going on".

If you liked this article, I highly recommend the book 'Make it So', it's a review of the UX and UI of the interfaces in popular science fiction tv shows and movies.

Thank you, I've just looked it up and messaged the author now!

Thanks for the article, its superb! Could you share some literature as a follow-up?

I don’t know how deep into interface design you want to go, but User Friendly by Cliff Kuang is a superb intro and includes lots of anecdotes like the B-17 bomber and Ford Lincoln stories.

thx for the suggestion! I'm very much into interface design but didn't do much of physical interfaces. I guess it is more related to industrial design than the typical UX / interaction designer, it seems...

I love that book I'm re-reading it as we speak :)

Nice article with an interesting approach. Assuming the poster is the author, the word ‘irradiate’ in the caption in the B17 photo confused me, although it did lead to some interesting speculation. Did you mean ‘eradicate’ and your spellchecker went rogue?

Perfectly fine meaning #2:

To shed light on; illuminate.

irradiate ir·ra·di·ate (ĭ-rādē-āt) v. ir·ra·di·at·ed, ir·ra·di·at·ing, ir·ra·di·ates v. tr.

To expose to radiation. To treat with radiation: irradiate farm produce so as to destroy bacteria.

To shed light on; illuminate.

To manifest in a manner suggesting the emission of light; radiate: irradiate goodness.

v. intr. Archaic

To send forth rays; radiate.

To become radiant.

[Latin irradiāre, irradiāt-, to illuminate : in-, on; see in-2 + radiāre, to shine; see radiate.]

Thank you both! Yes, I'm the author. So you were correct, I had intended it to read eradicate but actually I really appreciate java-man's definition help, so I think I'll just leave it as it is now :).

Still... I would say that Chapanis' report shed light, or illuminated, or, if you want, irradiated the problem, but then the actual change of the controls eliminated or eradicated it, so we shouldn't mix them up...

I think illuminate would be the common usage here.

I wish this article actually ditched Legos and used actual examples from existing UIs. There is something to be said about fighter jet cockpits, avionics controls, understanding of haptics in older cars, power plant control boards and subway control rooms, crane operator interface, bulldozer UI, CNC machine HMI and a whole bunch of UI systems that exist out side of consumer space.

For some reason (I blame sci-fi authors and their vision of future), consumer space is eroding rapidly with touch screens. Consumers will eat up marketing bullshit when it is wrapped in a scifi wrapper, with "Now a touchscreen interface!". This is sadly eroding into things like professional oscilloscopes, and even cockpits!

They're cheap, easily reconfigurable (this is a bug, not a feature) and it makes the bean counters happy - "Oh you mean the $48 BOM can be reduced to $7.50 with one touch screen and 1 UI software contractor for 4 months! And we can market it as a cool thing without users noticing? Holyshit, you're promoted."

That said, iPhone is nice. It is rare exception, I don't know how Steve Jobs saw this, but this is perhaps his genius. iPhone + touchscreen interface totally makes sense. Blackberry folks flaunted their physical keyboards and yet, iPhone won. This frankly surprises me. If it was year 2005, I would have bet on Blackberry over iPhone. Everybody did.

Diabetic here. These days, the meter and even insulin pump comes with touch and color screens.

My vision is good, but I imagine diabetics with poor eyesight (which is a common effect of diabetes) basically get unusable devices.

My previous pump and my first meters all had dedicated buttons. A button "on", a button for "give insulin" then two buttons to "crank up or down the amount to give" and so on. All these buttons had braille on them and were tactile and often form-coded. Up, was an triangular up-arrow, etc. I could blindly operate it in my pocket with one hand.

Now my pump requires me to go through dialogs, menu's and workflows for which the state and the options are only on the screen. And my meter looks like a cheap chinese android phone (and has about the same battery time) with only touchscreen interfacing. I often miss my doses because some warning dialog breaks muscle-memory or because -somehow- the pump decides that today we need an extra step in the wizard.

It's good when medical equipment "goes with the time", but touch-screens and color-lcd screens are really not suited for medical devices in their "mass consumer" form.

Thanks for the nice thoughts. I'm a huge fan of all of the interfaces you describe from industrial and commercial applications. I've written previously about my concerns with the touchscreen dominance and the poor UX impact it can have. My day job is to design physical interfaces for all manner of automotive and consumer applications and you could say I specialise in the non-touchscreen design parts.

Regarding the LEGO references, this was just a light hearted look at the problem from a different perspective :).

Please give us an example of the interface you designed (or one you are especially proud of)!

So the things I'm most proud of aren't quite launched yet, but I work right now on a lot of electric mobility projects. Something like a charger for an electric car is especially fascinating because you have none of the cues of typical car refuelling (smell, sound, vibration) and you can create an entirely new metaphor and language around how that charging experience plays out with light, sound, haptic...

Often you'll have a client who says "I want my product to be smart and connected so I need a 5 inch touch screen on the front of the box" and its fun to show them an entirely different approach that delivers both a better user experience and also becomes a key differentiator for their brand.

You can see a few (older) things that I've worked on at my employer's website here: https://kiska.com/

> "I wish this article actually ditched Legos and used actual examples from existing UIs."

I disagree. There are already plenty of articles discussing UX that way. Using Lego is an interesting change of perspective that lets us look at this in a different way.

> That said, iPhone is nice. It is rare exception, I don't know how Steve Jobs saw this, but this is perhaps his genius. iPhone + touchscreen interface totally makes sense.

He basically took an Asian tablet (these existed at the time), made it smaller and added phone capability. Funny thing is that almost nobody uses the phone capability anymore these days.

I'm glad that road safety requires at least "some" sanity in the UI of cars.

Too bad mobile phones don't have such requirements, so there you have to guess all the time whether in this week's version of an app you'll have to swipe left/right/up/down for unmarked features, long press or short press, use the three dots or the hamburger? Will tapping this phone number allow to see info or will it immediately start calling the person? Do the icons designed for flat looks rather than distinguishable and informative even tell?

These interface panels would look better with the careful addition of subtle raised features and indentations to accentuate the screen printing.

Dang, stole my thunder. I was just pondering doing a blog post series on these exact panels as I have finally started sorting my collection after 40 years and found at least 10 of these that I have.

I may still do a series based on the real-world tech that these were modeled after in their time periods. Some of them are super-fun retro.

This is great. I feel like I'm seeing more and more things modeled in LEGO, and it makes me happy that the community is cross-generational and growing.

On a side note, he picked some of my personal favorites from my childhood in the 90s. The 1x2 tile QWERTY keyboard also found its way into more than it's fair share of things I made.

I absolutely love that someone has this much free time and this kind of tongue-in-cheek obsession.

It was tongue-in-cheek, right?

I don't see much of an objective pattern for placement along the organized-chaotic axis

To me that axis seems more legible-illegible than organized-chaotic. The panels on the top of the chart "read" as buttons and levers and things I'm already familiar with. The panels at the bottom have oddly particular layouts that don't seem familiar.

To see a 2x2 of order-chaos and legible-illegible as applied to brands, check out the K-Hole Brand Anxiety Matrix: http://khole.net/issues/03/

Are you a LEGO collector? Or how did you acquire all these panels?

I bought them all through BrickLink.com, you can search for and select individual bricks you want to buy. I think it took about 5 or 6 separate orders to different suppliers to get a good range.

As a synthesiser designer, I'd like to thank you for the effort required to document this process and for sharing your fine conclusions.

Now do a Fitts' Law analysis! :)

Seriously though, your collection is pretty neat. My mind wanders at the thought of putting a synthesiser-generator around the collection of 'fake' panels, such that they end up actually doing something .. if there were a way to use colors as layers, could maybe even use that as a hinter for an automatic signal flow, hmm...

So fitting that this is set in all-caps Futura-like typeface for the headers and pretty grotesque Source Sans. It's like I'm reading something from ‘2001’.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact