https://mannhowie.com/ui-design-web Howie Mann Startup Strategy ArticlesAboutSubscribe Topics product (14) finance (12) management (11) engineering (9) marketing (7) Popular Articles User Interface Design: 5 Rules of Thumb Cognitive Reflection Test - Examples of Reacting vs Checking How Much is YouTube Worth? Over US$180bn in 2022 The IKEA Effect - Why people fall in love with their own ideas How the US Air Force Ditched the "Average" and Saved Lives How to Run a Growth Experiment - Learn the 4 Steps Finite State Machines - A Common Tool for Product Owners, Designers & Developers 5 Questions to Ask to Find Product Market Fit - User Interviews Invert, Always Invert - Find out how to kill pilots How Much is Alibaba Worth? US$900 billion in 2021 Clean Architecture Node.js - Build a REST API < All Articles User Interface Design: 5 Rules of Thumb 2 minute read | Dec 22, 2022 Topics: product Share this article: Here are five rules of thumb you can apply to common UI design challenges when building web applications: 1. Use defaults 2. Obvious settings 3. Show progress 4. Avoid interruptions 5. Flat hierarchy 1. Use defaults Provide default values to guide users on the most common choices or behaviour you want to encourage. use defaults Defaults reduce the number of choices and decision fatigue users must face. They provide context as to the next decision required. Attempt to reduce the number of inputs you require by collapsing optional values. 2. Obvious settings Settings should be obvious and unambiguous. Use radio buttons or checkboxes to indicate whether a setting is active. Where possible opt for binary settings instead of multiple states (e.g. flash mode on/ off vs flash mode auto, on or off). obvious settings mode Clearly label preference settings with positive active labels. Avoid negative labels. Checkboxes should enable things, not disable them. obvious settings preferences 3. Show progress Feedback should be immediate to communicate to users that the action has been received. When feedback cannot be immediate, use loading spinners for short waits (<10 seconds) and progress loaders for long waits (>10 seconds). show progress 4. Avoid interruptions Avoid interrupting users' workflow by making decisions to allow slips with ways to undo. Allow slips with the use of less intrusive toasts vs intrusive warning confirm modals. avoid interruptions 5. Flat hierarchy Use flat instead of deep hierarchies. Content is more discoverable if it is not deeply nested inside hierarchies. People are good at naturally grouping categories based on labels without relying on deep nesting. flat hierarchy References * The Power of Defaults (Article) - Nielsen Norman Group * Flast vs Deep Website Hierarchies (Article) - Nielsen Norman Group * Designed for Use: Create Usable Interfaces for Applications and the Web (2016) (Book) - Lukas Mathis Share this article: < All Articles Learn More Subscribe to the newsletter to get notified about future articles. Howie Mann LinkedIn and GitHub