Here\u2019s a really good ol\u2019 post from way back in 2015 all about the nine states of design and how we should think all the edge cases whenever we\u2019re building interfaces. Vince Speelman writes:<\/p>\n\n\n\n\n\n\n\n
Modern UI teams are designing components first; Interfaces are merely the thoughtful composition of components. This leaves an often glaring hole for users on “the unhappy path” \u2014 The places where users may, intentionally or not, stray from your idealized flow. As we learn to craft systems rather than pages, we must invest effort into shaping these often missed states of design and create with a component lifecycle that can support everyone. Here\u2019s the lifecycle as I see it:<\/p>
\n\n
- Nothing state<\/li>\n
- Loading<\/li>\n
- None<\/li>\n
- One<\/li>\n
- Some<\/li>\n
- Too many<\/li>\n
- Incorrect<\/li>\n
- Correct<\/li>\n
- Done<\/li>\n<\/ol>\n<\/p><\/blockquote>\n\n\n\n
During the design process I think everyone (including me!) tends to focus on the ideal state of a component or interface, often leaving the extremely important edge cases forgotten until the last moment. I think I need to stick this list to my screen so I don\u2019t forget it in my next project.<\/p>\n","protected":false},"excerpt":{"rendered":"
Here\u2019s a really good ol\u2019 post from way back in 2015 all about the nine states of design and how we should think all the edge cases whenever we\u2019re building interfaces. Vince Speelman writes:<\/p>\n","protected":false},"author":223806,"featured_media":345082,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[692],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1r6NdBjvStCqOWe4orT7bNQ.gif?fit=400%2C300&ssl=1","jetpack-related-posts":[{"id":209123,"url":"https:\/\/css-tricks.com\/boxbox\/","url_meta":{"origin":345062,"position":0},"title":"BoxBox","date":"October 6, 2015","format":false,"excerpt":"BoxBox is a design app that\u2019s currently under development and the designers, Kevin Lynagh and Ryan Lucas, have written a series of articles describing their thoughts that led to its creation. First, they outline the problems with the current state of applications: We\u2019re still primarily using legacy print design applications\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":262020,"url":"https:\/\/css-tricks.com\/sketching-interfaces\/","url_meta":{"origin":345062,"position":1},"title":"Sketching Interfaces","date":"October 29, 2017","format":false,"excerpt":"From the same team that worked on the incredibly wild idea of using React to make Sketch documents comes an even wilder idea: Sketching seemed like the natural place to start. As interface designers, sketching is an intuitive method of expressing a concept. We wanted to see how it might\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":357344,"url":"https:\/\/css-tricks.com\/embrace-the-unpredictable\/","url_meta":{"origin":345062,"position":2},"title":"Embrace the Unpredictable","date":"December 1, 2021","format":false,"excerpt":"In nature, no two things are ever the same. Life is imperfect, unpredictable, and beautiful. We can walk through the same forest every day and see differently colored leaves. We can look up at the clouds every minute and watch a whole new formation. The physical world is transient and\u2026","rel":"","context":"In "2021 End-of-Year Thoughts"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-22-at-8.44.32-AM.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":360665,"url":"https:\/\/css-tricks.com\/context-aware-web-components\/","url_meta":{"origin":345062,"position":3},"title":"Context-Aware Web Components Are Easier Than You Think","date":"January 21, 2022","format":false,"excerpt":"Another aspect of web components that we haven\u2019t talked about yet is that a JavaScript function is called whenever a web component is added or removed from a page. These lifecycle callbacks can be used for many things, including making an element aware of its context. Article series Web Components\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/human-zombie-web-components.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302288,"url":"https:\/\/css-tricks.com\/web-component-for-a-code-block\/","url_meta":{"origin":345062,"position":4},"title":"Web Component for a Code Block","date":"February 18, 2020","format":false,"excerpt":"We'll get to that, but first, a long-winded introduction. I'm still not in a confident place knowing a good time to use native web components. The templating isn't particularly robust, so that doesn't draw me in. There is no state management, and I like having standard ways of handling that.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/code-block-screenshot.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366770,"url":"https:\/\/css-tricks.com\/react-hooks-the-deep-cuts\/","url_meta":{"origin":345062,"position":5},"title":"React Hooks: The Deep Cuts","date":"July 13, 2022","format":false,"excerpt":"Hooks are reusable functions. They allow you to use state and other features (e.g. lifecycle methods and so on) without writing a class. Hook functions let us \u201chook into\u201d the React state lifecycle using functional components, allowing us to manipulate the state of our functional components without needing to convert\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/react-hook.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345062"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=345062"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345062\/revisions"}],"predecessor-version":[{"id":345081,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345062\/revisions\/345081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/345082"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=345062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=345062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=345062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}