Know, do, feel: A useful pre-visual checklist for UI design

A simple and focussing way to begin any UI design is with words. Three important words. Know, Do and Feel. I'll discuss three questions: “What do people using this need to know", “What do they need to be able to do”, and “What might we want them to feel”.

Presented by Jemi White at UX Australia 2017

Transcript

1. Know, do, feel Jemi White Product designer at Common Code @jemirw
2. •  Fast pace. ⌚ •  User vs Business vs Developer needs. •  Hard to stay focussed on real life context of each product. I design in Agile/Lean product teams.
3. “Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan.” Eliel Saarinen, architect and designer 1873-1950
4. A simple tool for modelling the user’s context for your UI designs. Moment mapping
5. People, in moments, on the way to achieving their goals. In each moment, we need to know things, in order to choose to do things, given what we feel. A UI’s context
6. Know Prioritised information a person needs for making a decision. States •  State of the system. •  Effects of what was done. •  Future effects of what they’re doing.
7. Do Prioritised possible actions, given a person’s current goal.
8. Feel The emotional state a person might be in. Eg. “I’m worried”. Inferences or assumptions a person might make. Eg. “This feels hard”.
9. #‍ A man, aged 30-45, living in a city, wants some new clothes.
10. A man, aged 30-45, living in a city, wants some new clothes. •  Searches for clothing stores online •  Decides he likes the range on a site •  Finds something he loves •  Checks out and pays •  Gets a confirmation of his order •  Clothes arrive •  Clothes don’t fit •  Return clothes •  Better fit arrives •  Wears the new clothes
11. A man, aged 30-45, living in a city, wants some new clothes. •  Searches for clothing stores online •  Decides he likes the range on a site •  Finds something he loves Know ◦  If it will fit. ◦  How much it costs. ◦  Whether it’s on sale. ◦  What other people think of it. ◦  The brand. ◦  What else it goes with. Do ◦  Choose a size. ◦  Add to cart. Feel ◦  Excited. ◦  Like he owns it already. ◦  That shipping will be free.
12. A man, aged 30-45, living in a city, wants some new clothes. •  Searches for clothing stores online •  Decides he likes the range on a site •  Finds something he loves •  Checks out and pays •  Gets a confirmation of his order •  Clothes arrive •  Clothes don’t fit •  Return clothes •  Better fit arrives •  Wears the new clothes
13. Model - and iterate on what I know about user goals and behaviour. Share - and discuss these models with others. Contextualise - my UIs. Focus - on what’s important in each moment for people using my products. Moment mapping
14. “Everything we think we know about the world is a model. Every word and every language is a model... None of these is or ever will be the real world.” Donella Meadows, “Thinking in systems”
15. @jemirw Thankyou