--- url: https://floriankiem.com/writing/tips-to-improve-your-product-ii title: "Tips to improve your product II ‹ Florian Kiem" description: "More tips, and a few small details, that make the web a better, more fun place to be in." crawled_at: 2026-11-02T13:04:49Z lastmod: 2026-11-01 ask: https://floriankiem-com.ora.run/ask docs: https://floriankiem-com.ora.run/docs lang: en --- # Tips to improve your product II November 1, 2026 # Second edition of web design tips After I shared some lesser-known tips to improve products a few weeks ago, here's the second part of that. I believe that these are even less known. Find the first part here . ## Number inputs change when you scroll Silverline Bank · Main account ·· 4021 · No. 0250 · Oct 10, 2026 Pay to the order of Maya Lindqvist $ Two hundred fifty and 00/100 Dollars · Memo · Rent, November · ⑆021000021⑆ 004021⑈ 0250 · Silverline Bank · Main account ·· 4021 · No. 0251 · Oct 12, 2026 Pay to the order of Jonas Albrecht · $ · Eighty and 00/100 · Dollars · Memo · Bike repair · ⑆021000021⑆ 004021⑈ 0251 · Silverline Bank · Main account ·· 4021 · No. 0252 · Oct 14, 2026 Pay to the order of Sofia Marín $ One hundred twenty and 00/100 Dollars · Memo · Concert tickets · ⑆021000021⑆ 004021⑈ 0252 - gives you very little control, since the browser handles most of its behavior natively - Biggest issue: scrolling while hovering a focused input doesn’t scroll the page, it changes the number instead - Scroll direction decides whether the value goes up or down - Sometimes that’s handy, but for most numeric inputs today it makes the UX worse - Instead use ## Don't reorder a list under the cursor Design sync Design sync 5 in call Order paused - Jonas Albrecht - Maya Lindqvist - Sofía Marín - Clara Weiss - Theo Brandt - Users want to interact with what they see - If lists change while you hover them, it's hard to predict where the target goes next - Disable automatic list sorting while hovering, like in the example, to improve the UX ## Don't disable the submit button - Disabled buttons don't tell users what the error is - Context is important, especially if agents start to use the web more and more - Make buttons clickable and show a clear error message instead ## Escape closes only the top layer New event Fri, Oct 17 · 14:00 Repeat - If you have multiple layers (e.g. Dropdown > Dialog > Main surface), close them one by one - Make sure that the top layer is always the one auto-focused, and layers below shouldn't close when escaping ## Select the value when a field is clicked Rectangle Hero card · Frame 12 W H R O % - In some editors, where values are inserted and changed often, it's better UX to select the value by default - This is especially important if inputs usually get fully replaced instead of edited - This depends heavily on the use case of an app ## Select a range with shift-click Expenses October - In interactive lists, when holding the shift key while selecting, all rows in between should be selected as well - This resembles the native behavior of most operating systems - Most custom lists that are based on dynamic arrays forget about this behavior - Especially on longer lists, easy multi-selection is a key UX pattern ## Drag things from where they were grabbed Website launch · To do 2 · Write the changelog · Record the demo · Done 1 · Update the pricing page - Sudden item shifts are unnatural and, worst case, lead to wrong outcomes when dropping - To keep things predictable, the offset between the mouse cursor and the draggable element should be kept, starting from where it was grabbed - This keeps elements in the position they had when pressing down, no matter where the cursor starts dragging the element ## Give colors their own dark mode values call dad back · oat milk, limes · ship the tips post - When defining the color system of a product, make sure to view colors in both light and dark mode - Colors need to be adjusted for dark environments when dark mode is available - Make sure to keep the same hue, but make the color a little dimmer and more saturated ## Cheat sheet ``` Please check the UI details of our app: Number inputs - Don't use `type="number"`, scrolling over a focused one changes the value instead of the page - Use `` instead Live lists - Don't reorder a list while it's hovered - Pause automatic sorting on hover and apply the new order once the cursor leaves Submit buttons - Don't disable submit buttons - Keep them clickable and show a clear error message saying what's missing Escape - With multiple layers (e.g. Dropdown > Dialog > Main surface), Escape closes one layer at a time - The top layer is always the one focused, layers below stay open Select on click - In editors where values usually get replaced instead of edited, select the whole value on click - Only where it fits the use case Shift-click - In lists with checkboxes, shift-click selects all rows between the last click and this one - Match the native behavior of the operating system Dragging - Keep the offset between the cursor and the element from where it was grabbed - Never snap the element's center to the cursor Dark mode colors - Check every color in both light and dark mode - Keep the hue, but make dark mode values a little dimmer and more saturated ``` ## Stay in touch I write here every now and then. Leave your email and I'll send a short note when something new is up. # Footer Pages · Work · About · Writing · More · Colophon · Experiments · Legal · Imprint · Privacy Policy · © 2026 Florian Kiem All rights reserved. No reproduction or AI training.