https://ux.tfmstyle.com/ The UX Handbook is a collection of short, practical guides to building interfaces, written and maintained by TFMSTYLE. Each entry takes one problem, like validating a form, designing an empty state or loading a long list, and gives you the rules for getting it right. en Tue, 28 Jul 2026 23:50:50 +0000 https://ux.tfmstyle.com/guide/validate-forms-in-a-way-that-helps-usershttps://ux.tfmstyle.com/guide/validate-forms-in-a-way-that-helps-usersForms & InputsTue, 28 Jul 2026 09:00:00 +0000Avoid validating fields while users are still typing. Triggering errors mid-word creates unnecessary friction and interrupts their flow. https://ux.tfmstyle.com/guide/use-the-golden-ratio-to-create-more-balanced-interfaceshttps://ux.tfmstyle.com/guide/use-the-golden-ratio-to-create-more-balanced-interfacesVisual DesignTue, 28 Jul 2026 09:00:00 +0000Use the golden ratio (1.618) as a design guideline for creating consistent relationships between elements. It can help replace random decisions with a repeatable visual rhythm. https://ux.tfmstyle.com/guide/use-the-60-30-10-rule-to-build-balanced-color-systemshttps://ux.tfmstyle.com/guide/use-the-60-30-10-rule-to-build-balanced-color-systemsVisual DesignTue, 28 Jul 2026 09:00:00 +0000Stop choosing colors randomly. A simple proportion system can create consistency and visual balance across an interface. https://ux.tfmstyle.com/guide/use-white-space-to-create-better-visual-hierarchyhttps://ux.tfmstyle.com/guide/use-white-space-to-create-better-visual-hierarchyVisual DesignTue, 28 Jul 2026 09:00:00 +0000Do not treat white space as empty space. It is an active design tool that creates clarity, improves focus, and gives content room to breathe. https://ux.tfmstyle.com/guide/use-grids-as-a-system-for-creating-hierarchyhttps://ux.tfmstyle.com/guide/use-grids-as-a-system-for-creating-hierarchyVisual DesignTue, 28 Jul 2026 09:00:00 +0000Do not treat grids as a collection of equal columns. A good grid creates relationships between content and helps users understand what matters most. https://ux.tfmstyle.com/guide/use-fittss-law-to-design-faster-interactionshttps://ux.tfmstyle.com/guide/use-fittss-law-to-design-faster-interactionsPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000Understand the principle behind Fitts’s Law: the time required to reach a target depends on two factors: https://ux.tfmstyle.com/guide/use-consistent-animation-timing-to-create-responsive-interfaceshttps://ux.tfmstyle.com/guide/use-consistent-animation-timing-to-create-responsive-interfacesMotion & InteractionTue, 28 Jul 2026 09:00:00 +0000Use timing ranges that match how users perceive motion. Animation speed affects whether an interface feels smooth, broken, or unnecessarily slow. https://ux.tfmstyle.com/guide/use-confirmation-dialogs-only-when-neededhttps://ux.tfmstyle.com/guide/use-confirmation-dialogs-only-when-neededFeedback & StatesTue, 28 Jul 2026 09:00:00 +0000Do not ask “Are you sure?” for every action. https://ux.tfmstyle.com/guide/use-color-as-a-communication-systemhttps://ux.tfmstyle.com/guide/use-color-as-a-communication-systemVisual DesignTue, 28 Jul 2026 09:00:00 +0000Remember that color is not just decoration. It changes how users perceive importance, meaning, and action. https://ux.tfmstyle.com/guide/understand-the-psychology-behind-typing-indicatorshttps://ux.tfmstyle.com/guide/understand-the-psychology-behind-typing-indicatorsPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000Recognize that typing indicators are not just status signals. They influence how users perceive waiting, attention, and conversation flow. https://ux.tfmstyle.com/guide/understand-the-psychology-behind-engagement-patternshttps://ux.tfmstyle.com/guide/understand-the-psychology-behind-engagement-patternsPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000Recognize that many digital products are designed around human behavior. Understanding these patterns helps designers create experiences that are engaging while also respecting user attention. https://ux.tfmstyle.com/guide/understand-different-types-of-empty-stateshttps://ux.tfmstyle.com/guide/understand-different-types-of-empty-statesFeedback & StatesTue, 28 Jul 2026 09:00:00 +0000Not every empty screen means the same thing. The interface should explain why there is no content and what the user can do next. https://ux.tfmstyle.com/guide/ux-writing-is-interface-designhttps://ux.tfmstyle.com/guide/ux-writing-is-interface-designContent & UX WritingTue, 28 Jul 2026 09:00:00 +0000Every word changes how users understand the product. https://ux.tfmstyle.com/guide/ux-laws-reference-von-restorff-effecthttps://ux.tfmstyle.com/guide/ux-laws-reference-von-restorff-effectPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000The item that looks different gets noticed. https://ux.tfmstyle.com/guide/ux-laws-reference-tesler-s-lawhttps://ux.tfmstyle.com/guide/ux-laws-reference-tesler-s-lawPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000Every system has complexity. The question is where it lives. https://ux.tfmstyle.com/guide/ux-laws-reference-peak-end-rulehttps://ux.tfmstyle.com/guide/ux-laws-reference-peak-end-rulePsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000People judge experiences mostly by the most memorable moment and the ending. https://ux.tfmstyle.com/guide/ux-laws-reference-miller-s-lawhttps://ux.tfmstyle.com/guide/ux-laws-reference-miller-s-lawPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000Human working memory is limited. https://ux.tfmstyle.com/guide/ux-laws-reference-jakob-s-lawhttps://ux.tfmstyle.com/guide/ux-laws-reference-jakob-s-lawPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000Users spend most of their time using other products. https://ux.tfmstyle.com/guide/ux-laws-reference-hick-s-lawhttps://ux.tfmstyle.com/guide/ux-laws-reference-hick-s-lawPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000The more choices users have, the longer it takes them to decide. https://ux.tfmstyle.com/guide/ux-laws-reference-fitts-s-lawhttps://ux.tfmstyle.com/guide/ux-laws-reference-fitts-s-lawPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000The time required to reach a target depends on distance and size. https://ux.tfmstyle.com/guide/ux-laws-reference-doherty-thresholdhttps://ux.tfmstyle.com/guide/ux-laws-reference-doherty-thresholdPsychology & UX LawsTue, 28 Jul 2026 09:00:00 +0000Users feel systems are responsive when feedback happens quickly. https://ux.tfmstyle.com/guide/prevent-errors-before-they-happenhttps://ux.tfmstyle.com/guide/prevent-errors-before-they-happenForms & InputsTue, 28 Jul 2026 09:00:00 +0000The best error message is the one users never need to see. https://ux.tfmstyle.com/guide/design-the-mvp-experiencehttps://ux.tfmstyle.com/guide/design-the-mvp-experienceFoundations & ProcessTue, 28 Jul 2026 09:00:00 +0000Minimum viable product does not mean minimum quality. https://ux.tfmstyle.com/guide/design-for-user-confidencehttps://ux.tfmstyle.com/guide/design-for-user-confidenceFeedback & StatesTue, 28 Jul 2026 09:00:00 +0000Confidence is the feeling that users know what they are doing. https://ux.tfmstyle.com/guide/design-for-trusthttps://ux.tfmstyle.com/guide/design-for-trustTrust, Privacy & EthicsTue, 28 Jul 2026 09:00:00 +0000Trust is created through consistency, transparency, and control. https://ux.tfmstyle.com/guide/design-for-safe-areas-and-device-cutoutshttps://ux.tfmstyle.com/guide/design-for-safe-areas-and-device-cutoutsLayout & ResponsiveTue, 28 Jul 2026 09:00:00 +0000Treat the screen and the usable area as different rectangles. Rounded corners, camera cutouts, home indicators, and on-screen keyboards all take space that your layout does not own. https://ux.tfmstyle.com/guide/design-for-returning-usershttps://ux.tfmstyle.com/guide/design-for-returning-usersOnboarding & GrowthTue, 28 Jul 2026 09:00:00 +0000Returning users need speed, not education. https://ux.tfmstyle.com/guide/design-for-performance-perceptionhttps://ux.tfmstyle.com/guide/design-for-performance-perceptionPerformance & ReliabilityTue, 28 Jul 2026 09:00:00 +0000Speed is not only technical. Users judge performance by what they see and feel. https://ux.tfmstyle.com/guide/design-for-network-failureshttps://ux.tfmstyle.com/guide/design-for-network-failuresPerformance & ReliabilityTue, 28 Jul 2026 09:00:00 +0000Assume connections will fail. Every important action needs a plan for failure. https://ux.tfmstyle.com/guide/design-for-long-term-usehttps://ux.tfmstyle.com/guide/design-for-long-term-useFoundations & ProcessTue, 28 Jul 2026 09:00:00 +0000A product is not judged only by the first session. It is judged by repeated use. https://ux.tfmstyle.com/guide/design-for-international-usershttps://ux.tfmstyle.com/guide/design-for-international-usersContent & UX WritingTue, 28 Jul 2026 09:00:00 +0000Do not assume every user shares the same language, culture, or formatting expectations. https://ux.tfmstyle.com/guide/design-for-first-time-usershttps://ux.tfmstyle.com/guide/design-for-first-time-usersOnboarding & GrowthTue, 28 Jul 2026 09:00:00 +0000First use determines trust. https://ux.tfmstyle.com/guide/design-for-cognitive-accessibilityhttps://ux.tfmstyle.com/guide/design-for-cognitive-accessibilityAccessibilityTue, 28 Jul 2026 09:00:00 +0000Remember that attention, memory, and processing speed vary by person and by day. Stress, tiredness, pain, and unfamiliarity affect the same abilities that a permanent condition does. https://ux.tfmstyle.com/guide/design-for-400-percent-zoom-and-text-resizinghttps://ux.tfmstyle.com/guide/design-for-400-percent-zoom-and-text-resizingAccessibilityTue, 28 Jul 2026 09:00:00 +0000Treat zoom as a supported viewport, not an edge case. A desktop screen at 400% zoom is roughly the width of a phone, so the responsive work you already did should carry most of it. https://ux.tfmstyle.com/guide/design-a-z-index-layering-systemhttps://ux.tfmstyle.com/guide/design-a-z-index-layering-systemLayout & ResponsiveTue, 28 Jul 2026 09:00:00 +0000Name your layers before you number them. Every interface has the same handful, and once they are named the arguments about which sits on top mostly disappear. https://ux.tfmstyle.com/guide/design-a-scalable-design-systemhttps://ux.tfmstyle.com/guide/design-a-scalable-design-systemDesign Systems & TokensTue, 28 Jul 2026 09:00:00 +0000A design system is not a library of components. It is a shared language. https://ux.tfmstyle.com/guide/design-a-fluid-type-scalehttps://ux.tfmstyle.com/guide/design-a-fluid-type-scaleLayout & ResponsiveTue, 28 Jul 2026 09:00:00 +0000Scale type between sizes rather than switching at breakpoints. Fixed steps mean the headline is right at two widths and wrong at every width in between. https://ux.tfmstyle.com/guide/design-a-component-contribution-modelhttps://ux.tfmstyle.com/guide/design-a-component-contribution-modelDesign Systems & TokensTue, 28 Jul 2026 09:00:00 +0000Assume the system will be incomplete forever. Product teams will always need something that does not exist yet, and the only question is whether that work comes back to the system or forks away from it. https://ux.tfmstyle.com/guide/design-with-real-user-researchhttps://ux.tfmstyle.com/guide/design-with-real-user-researchFoundations & ProcessTue, 28 Jul 2026 09:00:00 +0000Do not design only from assumptions. https://ux.tfmstyle.com/guide/design-with-real-contenthttps://ux.tfmstyle.com/guide/design-with-real-contentFoundations & ProcessTue, 28 Jul 2026 09:00:00 +0000Placeholder content creates fake confidence.