LCARS

Announcing LCARS: Star Trek UI with a central focus area

The futuristic UI from Star Trek has some useful properties.

Why Star Trek?

A web interface inspired by LCARS, the fictional computer interface from Star Trek: The Next Generation. The honest answer for 'why?' is that it seemed like fun to try. But after building and refining it, I found that LCARS has real advantages for bioinformatics work. These advantages actually arise from the constraints the LCARS designer was working under.

A Design Born in TV Production

Michael Okuda designed LCARS for the Star Trek TV show, which imposed some unusual requirements:

• It had to be instantly reconfigurable for whatever the plot needed (weapons, medical, engineering)
• It had to look believable as an expert interface - something trained professionals would actually use under pressure
• It had to be readable on camera while actors performed in front of it
• It had to not distract from the action happening in front of the display
• The props/screens had to be inexpensive to make, leading to the innovative for its time flat panel controls - decades ahead of touch sensitive iPhones.

These constraints pushed the design toward modularity, high contrast, clear hierarchy, and drawing visual attention to the centre. These turn out to be useful properties for data-intensive software too.

Peripheral Vision and the Foveal Region

Your peripheral vision is good at detecting color, shape, and motion, but poor at reading text. Your fovea, the central 2° of your visual field, handles fine detail. Traditional interfaces often fight this by scattering small labeled buttons across the screen, forcing you to look away from your data to find controls.

LCARS puts chunky, color-coded controls at the edges where peripheral vision works well. After brief familiarization, you feel where the controls are rather than searching for them. The center of the screen stays clear for the detailed content you actually need to read. Moreover blinking of the peripheral controls can draw your attention there, if it is needed.

In SeqQuests, my bioinformatics tool built on this design, the curved LCARS frames become functional buttons with labels. The panels they surround hold detailed information rendered in conventional, readable typography. Star Trek used labels just for effect, such as 'DNGN' on a pipe in the Enterprise engine room - standing for "Does Nothing, Goes Nowhere". In SeqQuests the labels are meaningful and say what the buttons do.

Variable Button Sizes

Larger targets are faster to click (Fitts's Law). But most interfaces look awkward with mixed button sizes - it breaks the grid and appears unpolished. LCARS's organic shapes make varied sizes look intentional. I discovered this benefit after playing with the new LCARS-styled interface. In my design, frequently-used functions get large buttons; rare functions get small ones. Adding or removing buttons doesn't require repacking a layout. We always get a frame of buttons around the central panel.

Color as Vocabulary

You perceive color before conscious thought engages. SeqQuests uses this by giving color subtle meaning - grouping display options in one color family, configuration in another. Hovering over any button highlights all buttons of that color, reinforcing the grouping. Users build intuition about what controls do, without re-reading every label.

Serious Software, Playful Interface

The playful appearance might seem at odds with serious work. I think the opposite is true. Fun is part of the engineering process. It is a design goal. Software should be a pleasure to use. Part of a good quality process is making sure engineers enjoy the process of design and work. This keeps them invested in the work. Fun can lead to better outcomes all round.

Current Configuration

The display is desktop only, not mobile. LCARs is made for nice big panels on a starship. I've gone for the 3D molecular viewer from NGL as it gives a strong and interesting visual object for the focus of attention. The example buttons around and below it are not representative of how to use LCARS at scale. The demo is minimal - just to show the idea of one set of buttons around a configuration panel, another set around the main display.

A more idiomatic way to use LCARs is with vast quantities of information. SwissProt has 570,000+ proteins. You wouldn't dedicate a button to each molecule, nor use up your main display panel buttons by having both Dark mode and Light mode. But for a demo I wanted to wire up something active to each button rather than just present a skeleton.

Log

• 04-Nov-2025: Launched
• 16-Jan-2026: Took bare-bones LCARS and connected up the PDB demo
• 08-Feb-2026: Now shows batches of 6 proteins from a list

Made with Claude and Gemini

First time out Claude made a very complicated version, where each of the buttons was carefully shaped individually. They never actually joined up right, because Claude can't properly 'see' what it is doing. However, I spotted that instead of building up the shapes, I could carve out the shapes I wanted by css tricks. I had a conversation with Claude about exactly how. Specifically I struggled with scrollbars and flex in css, which Claude told me is notorious for being confusing. That conversation and the examples in it saved a lot of time that I would have burned looking through css documentation to find what I needed.

Later on, Gemini surprised me by wiring up the bioinformatics version, given Claude's framework as a starting point. I didn't need to find a molecular viewer for JavaScript, read about the boilerplate to make it work, or deal with CORS to get the data files from PDB. The layout of LCARs is unusual, but onClick for the buttons is standard and familiar to the coding AIs. Boilerplate code connected up to buttons is well within the comfort zone of current AI.

Claude went down the hard and error prone route of constructing the button shapes, rather than carving out using an overlay. Gemini added a standard molecular viewer and data file retrieval easily. Familiar code for Gemini.