7 ms·

The UX of Lego Interface Panels

415 points by george_cave 6y ago

ajarmst 6y ago
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?
- java-man 6y ago
  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.]
  - george_cave 6y ago
    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 :).
  - richardwhiuk 6y ago
    I think illuminate would be the common usage here.
  - rob74 6y ago
    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...
- deleted 6y ago
  [deleted]
fermienrico 6y ago
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.
- george_cave 6y ago
  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 :).
  - java-man 6y ago
    Please give us an example of the interface you designed (or one you are especially proud of)!
    - george_cave 6y ago
defterGoose 6y ago
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.
kanobo 6y ago
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.
- george_cave 6y ago
  Thank you, I've just looked it up and messaged the author now!
  - victornomad 6y ago
    Thanks for the article, its superb! Could you share some literature as a follow-up?
    - george_cave 6y ago
      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.
      - victornomad 6y ago
        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...
- victornomad 6y ago
  I love that book I'm re-reading it as we speak :)
ocdtrekkie 6y ago
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.
- JorgeGT 6y ago
  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/6175/Crystal_Explorer_Sub_ 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/6331/Patriot_Jet https://lego.brickinstructions.com/en/lego_instructions/set/...
jsmith99 6y ago
> 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.
- TeMPOraL 6y ago
  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".
codeulike 6y ago
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.
- deleted 6y ago
  [deleted]
- flir 6y ago
  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.
- rcarmo 6y ago
  SPACESHIP! (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.
  - mcv 6y ago
    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.
uxamanda 6y ago
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!
peacefulhat 6y ago
I don't see much of an objective pattern for placement along the organized-chaotic axis
- zachrose 6y ago
  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/ http://khole.net/issues/03/
beenBoutIT 6y ago
These interface panels would look better with the careful addition of subtle raised features and indentations to accentuate the screen printing.
JKCalhoun 6y ago
I absolutely love that someone has this much free time and this kind of tongue-in-cheek obsession. It was tongue-in-cheek, right?
aasasd 6y ago
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’.
WalterGR 6y ago
Are you a LEGO collector? Or how did you acquire all these panels?
- george_cave 6y ago
  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.
  - fit2rule 6y ago
    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...
Aardwolf 6y ago
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?
incanus77 6y ago
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.

415 points by george_cave 6y ago

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?

java-man 6y ago
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.]
- george_cave 6y ago
  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 :).
- richardwhiuk 6y ago
  I think illuminate would be the common usage here.
- rob74 6y ago
  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...
deleted 6y ago
[deleted]

fermienrico 6y ago

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.

george_cave 6y ago
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 :).
- java-man 6y ago
  Please give us an example of the interface you designed (or one you are especially proud of)!
  - george_cave 6y ago

defterGoose 6y ago

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.

kanobo 6y ago

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.

george_cave 6y ago
Thank you, I've just looked it up and messaged the author now!
- victornomad 6y ago
  Thanks for the article, its superb! Could you share some literature as a follow-up?
  - george_cave 6y ago
    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.
    - victornomad 6y ago
      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...
victornomad 6y ago
I love that book I'm re-reading it as we speak :)

ocdtrekkie 6y ago

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.

JorgeGT 6y ago
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/6175/Crystal_Explorer_Sub_ 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/6331/Patriot_Jet https://lego.brickinstructions.com/en/lego_instructions/set/...

jsmith99 6y ago

> 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.

TeMPOraL 6y ago
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".

codeulike 6y ago

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.

deleted 6y ago
[deleted]
flir 6y ago
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.
rcarmo 6y ago
SPACESHIP! (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.
- mcv 6y ago
  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.

uxamanda 6y ago

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!

peacefulhat 6y ago

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

zachrose 6y ago
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/ http://khole.net/issues/03/

beenBoutIT 6y ago

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

JKCalhoun 6y ago

I absolutely love that someone has this much free time and this kind of tongue-in-cheek obsession. It was tongue-in-cheek, right?

aasasd 6y ago

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’.

WalterGR 6y ago

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

george_cave 6y ago
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.
- fit2rule 6y ago
  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...

Aardwolf 6y ago

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?

incanus77 6y ago

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.