Empathetic component design
0 likes109 views
The document discusses the importance of empathy in designing reusable UI components, emphasizing the developer experience (DX) and how it affects user satisfaction. It presents principles for creating an empathetic API, highlighting the value of self-documenting elements and 'dumb' components that facilitate ease of use. By focusing on emotional responses and clear communication, developers can better meet the needs of their users.
Empathetic component design
- 2. Empathetic component design Reusable UI components Frank Linehan Senior Software Engineer
- 3. I’m Frank(ie) Senior Software Engineer on Mobile APM I like to build reusable patterns.
- 4. What is Empathy? The action of understanding, being aware of, being sensitive to, and vicariously experiencing the feelings, thoughts, and experience of another of either the past or present without having the feelings, thoughts, and experience fully communicated in an objectively explicit manner.
- 7. Why think about Developer Experience (DX)? ● DX is about how developers feel while using your API – it’s emotive. ● The Principle of Least Astonishment states that the result of performing some operation should be obvious, consistent, and predictable, based upon the name of the operation and other clues.
- 8. Design with developer empathy What is the problem we’re trying to solve? Who are we solving this problem for? What exactly do we want the users of our API to feel? What kind of experience are we trying to create and what kind of emotional response are we aiming for?
- 9. A Empathetic API in practice - with React Make our users (hey that is us) feel good.
- 10. Make it easy to understand
- 11. Self documenting React proptypes are a great way to self document a component. By specifying what types of props a component expects during development. Engineers will know what the component needs to function.
- 12. Make it easier to use
- 13. Make it Easier To Use: Worry about data Concept of “Dumb” React components: are composable, easy to configure, and not opinionated on how they are used. These “dumb” components might take data as a prop or specify the API call the component should make. Management of fetching data is up to the owner of the reusable component, she could use a API package of generic API calls. Separating the data calls from the “dumb” component.
- 14. API Example
- 15. “dumb” components should have enough state to be useful. There should be some way to pass the useful data up to the parent, letting the parent know when the state has changed. Make it Easier To Use: A little state goes a long way
- 16. Make it feel good
- 17. Namespaces are your friends
- 18. Namespaces are your friends cont...
- 19. “Programs must be written for people to read, and only incidentally for machines to execute.” – Hal Abelson, Structure and Interpretation of Computer Programs “The best programs are written so that computing machines can perform them quickly and so that human beings can understand them clearly. A programmer is ideally an essayist who works with traditional aesthetic and literary forms as well as mathematical concepts, to communicate the way that an algorithm works and to convince a reader that the results will be correct.” – Donald E. Knuth, Selected Papers on Computer Science
- 21. Why do this? You will better understand the needs of your customers at work.