Map UI – Ghost in the Shell | Hacker News Reader

Map UI – Ghost in the Shell

ilikeinterfaces.com

158 pointsaspenmayer67 comments

There's this one GitS (SAC I think) UI thing that I think about pretty often: a bot needs to work faster so its fingers pop open revealing a huge number of additional cursed sub-fingers, such that it can type on a keyboard massively faster. I love thinking of this as such a wonderfully naive early 2000's view on HCI — there's no direct-access data API, the bot needs to use the keyboard so.... more actuators!! How much of technology has this same flavor?

This hands thing, there's a literal note in the manga about it. The man is an old neuro-scientist, but new brain implants that allow for direct CPU connectivity is something that only young neuro-surgeons are familiar with. For this reason, this man doesn'n't want a man who could be his child to operate direcly on his brain. However, the productivity boost because of the brain implant creates a gap between humans and augmented humans, so this is the solution this man found to work around his refusal to get the brain implant, and so it is clear that it is a fairly bad solution that only exists because of this human "motivation". The two points are some of the major themes that are explored in depth.

I would recommend reading Masamune Shirow's original work (it's only 2 volumes!), as you could argue that the adaptations are merely shells of the original.

On the one hand, the Mamoru Oshii movie version is a 'best of' the cool moments from the original, but it bends the narrative very strongly to express Oshii's POV rather than Shirow's. It's not as bad as in people modernizing Tolkien for example, it's more in line with how Kubrick's version of "A Clockwork Orange" differs from Anthony Burgess' original (which I also recommmend reading). On the other hand, the SAC (Stand Alone Complex) series more closely match Shirow's POV and ambience, it's not as deep, but it's really an impressive feat considering it's all original scenarii, and how entertaining it is.

The original manga is great

Worth noting that it is way more horny than the anime

Also, love Kubricks adaptation of clockwork orange, but burgess hated it and caused him to hate his own original work later in life

He even made a play with him and Kubrick as characters to talk about how much he hated the whole experience

One major change was the ending, burgess’s original has 21 chapters, and in the 21st the main character rediscovers his humanity and seeks a life of creating art

Kubrick stops his adaptation at the conclusion of chapter 20

Hilariously, the publisher behind the first US print of A Clockwork Orange removed the 21st chapter to make the novel more controversial so it would sell more

If you read clockwork definitely make sure it is the full version with all 21 chapters!

Thanks for sharing that!

imo the manga is often better the the anime adaption even if they replicate everything 1:1

A bit off topic but I found the text version of clockwork orange very hard to read and not nearly as entertaining as the movie - still an impressive piece of art.

Thanks for the recommends!

Not SAC, the original GitS movie.

> I love thinking of this as such a wonderfully naive early 2000's view on HCI — there's no direct-access data API

Even in original GitS, both cyborgs and bots have wired neck ports and can also communicate wirelessly, both subject to various kinds of attacks. Even if not intended, this typing may constitute a legit airgap defense.

Wow, that's an angle I had absolutely not thought of before. Of course they "could" just jack right in, but that's probably forbidden -- the only permitted interface is the keyboard? Maybe? That's pretty intriguing!

An analysis of the layout and usage of the so-called tera-keyboard:

https://scifiinterfaces.com/2013/07/24/the-secret-of-the-ter...

Worth a read, notably the estimated achieved speed in comparison with a human brain. I won't spoil you, but it allowing chords has... consequences.

The article also asks how a human brain could process such interaction so fast; well in GITS canon cybernetised brains are augmented/enhanced beyond normal human abilities.

The article also raises the question of why this and not a direct connection. I would yet again argue the possible security implications, notably in the context of the Puppet Master being around.

But it could also be a gracefully degrading interface, and a less cybernetised person may still be able to operate it with normal hands, or even a non cybenetised one, albeit of course at a massively reduced speed.

IOW ed is the standard text editor / it's a Unix system, I know this. After all, what better interface than text via stdin/out to scale from normal hands/eyeballs to max line rate?

EDIT: the first comment actually raises both interop and security concerns!

There was a nice reference to that scene in the Pantheon series: an “uploaded” human (basically an emulated brain with a software human-based avatar) learns he can interact with other pieces of software directly, but can't put his mind to it yet. He does modify his avatars’ fingers in a GitS-like fashion, though, to everyone’s amusement.

Pantheon (2022–2023): https://m.imdb.com/title/tt11680642/

Was just about to mention this also. Pantheon is great! So many tech industry references and parodies...

Pantheon is so underrated!

If you’re a fan of GitS and/or Pantheon, I encourage you and anyone else to check out Psycho-Pass. It really blew me away. It manages to be at once a more gripping police procedural, like GitS, and especially like the spin-off series Stand Alone Complex, and it tries pretty hard to match the philosophical prescience of Pantheon. It also has a lot more humanity, without shying away from the psychological and cybernetic related weirdness that those series share. It also shares a production company with GitS in Production I.G.

https://en.wikipedia.org/wiki/Psycho-Pass

> Pantheon is so underrated!

I think it recently came to Netflix, and quickly became extremely popular. Hopefully it won't be underrated for long!

Just be aware that Netflix has only the first season of that series which actually already has two seasons, so look for the second season of Pantheon if you enjoyed the first season :)

> I encourage you and anyone else to check out Psycho-Pass. It really blew me away.

I also really enjoyed the parts of Psycho-Pass that I did watch. Thanks for reminding me that exists :)

I enjoyed both seasons immensely. I think it’s actually on Amazon Prime in the US, as they acquired the rights to the first season and removed it from AMC+ and HIDIVE, and then produced the second season, iirc.

Make sure you get the watch order down for Psycho-Pass. If you’re able, watch the extended edition of season 1, as Crunchyroll makes it appear to simply be another season in their listings, if you use their platform.

I just found another similar series via Wikipedia:

https://en.wikipedia.org/wiki/Id_%E2%80%93_Invaded

Have you heard anything about Id: Invaded?

Might also like Mars Express (2023)

https://en.wikipedia.org/wiki/Mars_Express_(film)

> The inspiration for the organic machines and weapons in the film leads back to the director hearing that Google was working on technology for skin cells. This led to the idea that ultimately tech would complete a full circle back to organics, something "close to us, but at the same time, they are monsters." He also tied the replacement of the robots with organics to planned obsolescence, which he wanted to lampoon.

That looks pretty cool! The art on the poster reminds me of Mœbius aka Jean Giraud, which makes sense as they’re both French, and Mœbius is world-famous, besides. It’s a shame it’s only a film, though I won’t be too picky!

https://en.wikipedia.org/wiki/Jean_Giraud

Sort of reminds me of Metallic Rouge?

https://en.wikipedia.org/wiki/Metallic_Rouge

In minority report there's a scene (https://youtu.be/NwVBzx0LMNQ?t=43) in a forensic/detective office in which MC swipes data and info on the screen (hologram ?) with their hands. Then at some point another character moves a physical object (data drive ?) from one desk to another and at first I am thinking "yeah, right.. no network to move data from one screen to the other, uh ?".

But then I remind myself of this passage from Virtual lights (Gibson):

> Was it significant that Skinner shared his dwelling with one who earned her living at the archaic intersection of information and geography? The offices the girl rode between were electronically conterminous-in effect, a single desktop, the map of distances obliterated by the seamless and instantaneous nature of communication.

> Yet this very seamlessness, which had rendered physical mail an expensive novelty, might as easily be viewed as porosity, and as such created the need for the service the girl provided. Physically transporting bits of information about a grid that consisted of little else, she provided a degree of absolute security in the fluid universe of data.

> With your memo in the girl's bag, you knew precisely where it was; otherwise, your memo was nowhere, perhaps everywhere, in that instant of transit.

One of the key themes in GITS is the interaction between biological and computer systems. Those rapidly typing fingers are probably the perfect physical metaphor for exploring that idea: how one could maximize data transfer between a physical/biological input system and a computer one.

That was in the original Ghost in the Shell (nswf):

https://youtu.be/x-zUAb_ndDk

The full movie is free on Youtube (In the US, anyway): https://youtu.be/iHil4Y4r3Wk

And a link directly to that scene: https://youtu.be/iHil4Y4r3Wk?t=2748 and the other time they show it: https://youtu.be/iHil4Y4r3Wk?t=3297

Moreover, this almost makes sense as a security mechanism. A keyboard is a one-way input device; You don't get feedback from it. A monitor provides feedback that's fuzzy - Harder to exploit via a visual image where you're expecting and parsing text than a direct digital link.

You can use opto-electronic isolators on a direct digital link as well.

You could also just connect up to the computer via TOSLINK, that has no backchannel and no risk of interference either.

That's the "Almost" in almost makes sense :)

What's most shocking about that scene is not the typing speed, but being able to think of the code to write that quickly!

Clearly he's using ChatGPT.

I've seen similar comments about that scene over the years but I don't get it.

How is it naive?

It's clearly creative license to be more interesting and provocative. They could have just made his eyes glow and stuff happen on screen, but that wouldn't have been as cool.

This is not an example of the "rule of cool", there's a human and technological point that is made by this scene. However, because the movie drops most of the context from the original work, it is only something visually striking and impressive for most people. In-universe, this is considered almost nonsensical technology (for the obvious reasons that are invoked here).

It doesn't really matter what it's an example of nor what the real motivation was. Your emphasis that it's deliberate only supports my point that it's not a naive vision of future HCI from the 90s.

I don't think OP finds it not cool; otherwise he would had forgotten the scene long ago.

Yeah I think that kind of thing isn't supposed to be "predictive". The "rules" in series aren't very clear, sometimes they type stuff out into a keyboard, sometimes they connect a cable from their head, sometimes they just pass stuff around/hack basically just just "telepathically" without even needing the wire, they do whatever seems cool for a scene. I think the "splitting fingers" thing happens in one of the movies but also in SAC, but I think the point is just that it looks interesting and seeing the fingers do that and start suddenly typing quickly gives a sense of tension/urgency that you wouldn't get if it was just the character sitting back and staring at the screen (even if "in universe" they're able to work just as effectively that way)

Agreed the main reason is the point of the show is to be entertaining and visually interesting, and that is entertaining and visually interesting. Why do the robots look like spiders without any of the features of spiders that would actually be useful in a robot but look scary instead of cute to humans? It's not because it's a naive idea of what robots would look like.

But even aside from the fact that visual style outweghs realism in this work, it's not weird or remarkable anyway.

The robot has to type sometimes for the same reason you sometimes have to manually type a password into a keypad or your food order into a pos terminal even though you have a password manager in a phone with a dozen kinds of connectivity in it. None of your dozen forms of connectivity is compatible or available with any of the terminals dozen forms of connectivity. Even if you both have something the same plug, it doesn't mean you can use it.

You may also choose to do your "adversarial interfacing" the manual way even if you had a direct option available and even if you desperately wanted speed, simply for safety.

> I love thinking of this as such a wonderfully naive early 2000's view on HCI

Not really so naive when you look into 'robotic process automation' https://en.wikipedia.org/wiki/Robotic_process_automation . Huge industry, and can be just moving a mouse around on a screen and triggering keyboard inputs. If robot hands were cheap and dexterous enough...

I assume the naive part is that the keyboard polling interface probably doesn't allow that much input ?

Otherwise yes, we do this kind of approach so much irl. The most useful kind is the Switch it's button actuator, that will just push a button when making it "smart" is just impossible or not worth it.

The less useful kind is what the Rabbit R1 was trying to do, with website interaction automation in a full VM because each service wouldn't provide an API.

On the Enterprise-D in “Star Trek: The Next Generation”, they don’t have WiFi or any other kind of local wireless except for voice calls.

So when the android Data needs to access some information, he reads it from a GUI terminal, but at 1000x speed.

(It seems like the iPad-like touchscreen tablets don’t have WiFi either because they are frequently used to “sneakernet” information inside the ship.)

Think about it from an animator's point of view. What's more fun, plugging a cable in or typing your heart out? There's a whole dotted outline where I could put a plug for my indie game...

I'm sure there's something to be said for the visual appeal, but I think they actually did justify it in universe as an isolation mechanism; physically using a keyboard means no BadUSB or such.

Presumably the cybernetic typing mechanism is for enhanced access to terminals not equipped for direct machine interface. :)

... or as an interface to an actively hostile/compromised device!

I've always loved that scene in particular, I know exactly the one you're talking about.

Maybe it’s just the artist way of acknowledging that nothing is ever going to be faster than VIM?

The goal of interfaces in the real world is to help people perform tasks quickly/efficiently, without error (and to easily recover when errors are made).

The goal of interfaces depicted in movies/media is to look cool.

(Sadly too many designers do not understand this)

The line between “cool” and “ridiculous” isn’t always that broad.

In order to look at this and think “wow, that’s so cool, now it can type super fast” I do I agree that you need some nativity to not think “why not just plug in?”

Although, on second thought, maybe you need some pessimism and think “that’s a cool way to deal with incompatible ports and apis”

The character in the scene can’t plug in bc they don’t want to get the implant - it’s not explained in the anime tho

I’ve always loved cyberpunk-style interfaces (and even have an inspiration folder on my computer for them) but sadly it doesn’t seem to be particularly popular style. I suppose because app designers are generally aiming to be as inoffensive and easily understandable as possible, which usually means a bland minimalism with some friendly corners.

Whereas the various iterations of cyberpunk tend to be maximalist, use colors considered “outdated” (I’m thinking of that Matrix green so ubiquitous in the 90s-00s), or just too cold and machinic seeming.

Hey some fellow green line enjoyers! I'm working on a small side project I'm calling a "Terminal-punk Fantasy Art Game" at spellkaster.app to scratch my cyber-itch.

Escape from New York has some amazing cyberpunk UI aesthetic, so does Jurassic Park and the 90's Lost in Space movie. Lost in Space in particular has some absolutely gorgeous scifi UI.

There is also a youtube channel called 'Datawave FM - midfi synthwave radio for retro computer funk' that has amazing music and visuals.

Great suggestions, thanks for this. I agree, Escape from New York (and many other 80s films) do have some awesome green line graphic design.

I might suggest the opposite, actually; (many) real interfaces prioritize function over looking fancy. Ex. When I use vi, there's basically nothing to see; it would be kind of awful as entertainment, because it's not geared for appearance.

I love UIs from Sci-fi films.

Mamoru Oshii also made a live action film in 2001 called Avalon and in it the main character uses a terminal interface that I always thought was pretty cool. It's almost a classic monochrome terminal interface except there's no vertical scrolling when new data pushes away the old data. Old data goes backwards/behind on the z-index and blurs.

You can see it here:

https://youtu.be/m6NKhXlFU-s

I wonder why no terminal app implemented Z-axis scrollback like in Avalon, since they increasingly (e.g., Alacritty) boast GPU-based rendering it seems like it wouldn’t be such a resource hog but can look gorgeous.

And practical, too. It would make going through multi-screen lengthy program output much more palatable. Part of the problem here is scrolling by arbitrary offsets, of course (imagine being able to just say “it’s N screens back at this point”, where each screen is an unchangeable recognizable landmark), and once that anti-feature is gone pushing screens back on Z becomes the logical next step, allowing for more spatial reasoning.

— I use tmux, what’s the point?

— Add a button to push a screen back on demand, a way to bookmark screens, and it would elevate multiplexer & TUI experience just as well.

Seems like a great resource but I would have hoped a site focused on UI would have proper z-indices for the main menus.

Fix: `.site-header { z-index: 2 }` - 1 is used by the header's text.

I messaged them on LinkedIn, but we're not connected so I used the note feature as I am not a paying member of LI, and if I don't hear back, I'll try sending them a message on ArtStation.

I have directed them to your post. Thanks for your help!

Yeah, I found that the menu contents would overflow behind the content on some pages, which is frustrating and ironic.

A workaround is to open the menu heading you wish to explore as a link in another or same tab, then explore the contents on the resulting page.

While im not a big fan of alot of anime, GITS always has been my favorite to a degree that i actually own the DVD's , Mangas, a tachicoma figure and a giant custom GITS image on my wall :D

Also i created a custom PnP rulebook for a GITS-world based PnP (would love to publish it but i prolly would just get sued sadly).

Whenever i see gits i upvote <3

And then there is GitS 2, which is... something else...

If with GitS 2 you mean that strange thing that appeard on netflix some time ago... i couldn't even watch it completly because its that bad.

And lets not talk about that bu*** live action movie with Scarlett Johansson ....

No, I don't know what you are talking about, I'm talking about the second animated movie (that came out two decades ago) based on the second manga : both very weird and philosophical, probably just too weird and philosophical (at least for who I was two decades ago).

Hell yeah. I still have the original 1996 VHS English-dubbed release from Manga Entertainment. Having a KMFDM song be the soundtrack to Manga Ent's intro video[0] absolutely blew me away because this was my favorite band at the time I got the copy of the VHS! Great memories :D

[0] https://www.youtube.com/watch?v=cCbUMEooHhI

A friend of mine recreated the UI in TouchDesigner here https://www.instagram.com/p/DC5roCqSPUQ/ !

There are a few movies that are my immediate "go-to's" to try a new monitor, computer or otherwise multimedia-capable setup (like when I got a projector)... Ghost in the Shell is absolutely one of them (two others being Hackers and Vampire Hunter D: Bloodlust) :) There is just so much unbelievably good animation and art direction in GitS that is the perfect thing to enjoy on a new screen or computer or so on.

As a study of UI the piece is pretty interesting in that it reminds one of all the maps in GitS. I'd like to suggest that the interesting thing about GitS maps is what they don't show. Each map shows exactly what the protagonist wants at that point in the plot. The green screen attribute of the maps is perhaps a feature - colour is only used if it is necessary to present the required information.

People have raised the bar so much that after the intro images I was let down when it wasn't a blog post of someone recreating it with Javascript.

The map UI in Oblivion feels much more thought out in terms of being a usable, communicative interface. I really appreciate the care that went into its design.

https://ilikeinterfaces.com/2015/02/14/map-ui-oblivion/

I love GitS, but is this post just blog spam?

I'd say not, since they also have reviews of UI that the site is exhibiting, but beauty is in the eye of the beholder.

The curator of the site is Fey Vercuiel, who apparently has done UI/UX on some AAA games, so it's not exactly nobody, and besides, I think the main site stands on its own fairly well.

They have a whole section for GitS:

https://ilikeinterfaces.com/tag/ghost-in-the-shell/

There are also a lot of categories you can explore. I think for this kind of site, having clear examples of something you already have in mind as inspiration can help in ideation as a jumping off point, and having a site to share that context with others to collaborate is useful to me, and perhaps to you?

The naviagation is kind of broken, so you have to click on the menu headings as links instead of expanding them, since the contents flow behind the content in the foreground for some reason.

I posted it because I was reminded of this fictional map UI when I saw this actually existing map UI on these AR glasses I saw today:

> I've waited 10 years for Glasses like this – Even Realities G1 [video]

https://news.ycombinator.com/item?id=42285596

If you like GitS related content, you may also like these:

> Architecture from Ghost in the Shell in Hong Kong

https://news.ycombinator.com/item?id=42286193

> Teruhisa Tajima, logo designer: story behind designing Ghost in the Shell's logo

https://news.ycombinator.com/item?id=42286243

What is 'blog spam'? Someone can write a blog post and post it here if they deem it relevant. The community then decides through voting whether or not it is worth our attention no?

This isn't Reddit where everyone is allergic to self-promotion.

If this is blog spam, everything is. The disappointment sinks in when you realize that they are people who are waiting for things rather than trying to create functional equivalents.

Ghost in the Shell is one of the best sci-fi visual media

I always loved the look of this UI, but now that we have the same tech I am glad our UIs look the way they do, and shudder at the thought of using the GitS UI for any real map interactions

This is one of the coolest websites that I've ever seen

Reply on news.ycombinator.com