Name: ChatGPT’s UI makes no sense until you realize the genius behind it | Matt D. Smith | 23 comments
Uploaded: 2025-02-28T20:15:31.727Z
Duration: 1 min 31 s
Channel: Matt D. Smith
Description: ChatGPT’s UI makes no sense until you realize the genius behind it

Matt D. Smith

Helping ambitious designers refine their craft and build world-class interfaces. Designer for 20+ yrs. Founder of Shift Nudge.

3mo

ChatGPT’s UI makes no sense until you realize the genius behind it

23 Comments

Transcript

Chat GPTS UI makes no sense until you realize the genius behind it. System responses are 24 pixels from the left, but user responses are only 16 pixels from the right. That seems inconsistent, but it's actually a really smart design decision. Most designers assume spacing should follow strict rules, either 16 pixels everywhere or 24 pixels everywhere. But in reality, good UI isn't just about math, it's about how things feel. Let's break down why open a I did this and why it works. At first glance, this looks like a mistake. System responses have 24 pixels of padding, but user messages actually have a built in 16 pixels of padding inside the bubble. That means their actual spacing is 32 pixels and not 16. If they were both 24, user messages could feel too bulky, and if they were both 16, then system responses could feel a little bit too tight on the left edge. This is why optical alignment matters way more than just picking a number. Spacing isn't just a numbers game, it's about visual balance. When you design interfaces, don't just use even spacing everywhere. Take a step back and see how everything feels next to each other. This is something open AI clearly thought through and it's why they're chat UI feels seamless, even if the numbers look inconsistent first. Now that you know this, you'll start noticing it in other apps too. The best designers don't just rely on grids, they fine tune spacing to make the interfaces feel right. So what do you think? Did they get this right or would you tweak it? Let me know in the comments below and if you found this useful, share it with another designer friend who likes to sweat the details.

Chris Traganos

Leading Developer Evangelism for Alexa, Apps, and Games at Amazon. Ex-Stripe

3mo

Dang your video resolution is way crisper that I’ve been able to get on LinkedIn’s vertical shortform video - did you upload via the mobile app or the web site?

Raul C.

Product Design Leader at Johnson & Johnson | Juror at The FWA

3mo

Is this screenshot legit, or was it "photoshopped"? I’m asking because I tested it, and the results were quite different. What version did you test? I have the latest iOS app, updated an hour ago. Regarding optical alignment: yes, it is a thing, but not in this case. And even if the system's response were adjusting for optical balance compared to the user message bubbles, that wouldn't imply the overall page margins are mathematically unbalanced. I would never recommend using uneven margins, especially for mobile/vertical layouts, as it would be noticeable and could create an underlying discomfort for users. The two main UI elements distinguishing user messages (on the "right") from system responses are the rounded rectangle (bubble) and the large left padding, which gives the impression that those messages are coming from the right. Moreover, the system message perfectly aligns with the menu icon on the top left, which makes a lot of sense when scrolling. So, no.

1 Reaction

Joseph Angelo Todaro

Product Designer and Educator

3mo

Gold

Vanessa Carvalho

Senior Product Designer at Boats Group | UX Design & Research

3mo

I love this topic it’s fascinating. Optical alignment > pixel perfect. What matters is how it feels. We need balance psychologically because perfect mathematical alignment can still look off. Our brains don’t see in grids—they interpret shapes and spacing through context, contrast, and Gestalt principles. A design can be pixel-perfect and still feel wrong if it ignores how we actually see.

Anna Filou

0→1 Product Designer • UI/UX • Design Systems • HTML/CSS

3mo

But… the spacing *is* even. I'm all for optical alignment, but this is just… normal alignment. The text (not the bubble) of both the user and the agent are an equal amount of space away from the edges.

1 Reaction

Michael Pons

0→1 Product Designer | MVP Problem Solver | Tackling early-stage challenges at ambitious SaaS startups.

3mo

Matt D. Smith This is such a great breakdown…Goes to show all the small tradeoffs and concessions we make and how they add up to a good design decision. Nice work! 🙌