UX London Redux - Dan Saffer
description
Transcript of UX London Redux - Dan Saffer
![Page 1: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/1.jpg)
Dan SafferPresentation & Workshop Redux
Chris Petzny, EMC Conchango
![Page 2: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/2.jpg)
Dan Saffer
• Interaction designer
• Founder and principal of Kicker Studio, a design consultancy for consumer electronics, devices and interactive environments
• Before that, was Experience Design Director at Adaptive Path
• Author of Designing Gestural Interfaces and Designing for Interaction
![Page 3: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/3.jpg)
Imagine I asked you to design a product.
![Page 4: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/4.jpg)
Imagine I asked you to design a product.
Maybe a website.
![Page 5: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/5.jpg)
Imagine I asked you to design a product.
Maybe a website.
For sharing medical information.
![Page 6: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/6.jpg)
The product is for the blind.
![Page 7: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/7.jpg)
The product is for the blind.
And the deaf.
![Page 8: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/8.jpg)
Could you do it?
Where would you start?
![Page 9: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/9.jpg)
Designing from the Inside-Out: Behaviour as the Engine of Product Design
![Page 10: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/10.jpg)
Users experience products from the outside-in, namely from the interface and the physical form.
In other words, as far as users are concerned, the interface is the product.
![Page 11: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/11.jpg)
But.
The best products are usually not those that are designed with only the outside in mind.
![Page 12: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/12.jpg)
Those delight briefly. But prolonged use turns delight to anger and disgust. They are quickly discarded, replaced, and forgotten.
They are the junk food of products.
![Page 13: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/13.jpg)
However, it is easier to focus on form than behaviour.
It is equally easy to focus on thetechnology that makes the product possible.
Because it is easier to talk or demonstrate or even think about how a product looks than it is to design how it will work.
![Page 14: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/14.jpg)
This isn’t to say we should ignore aesthetics or technology, because that would be foolish.
The best products are designed from the inside-out.
Meaning, everything flows from behaviour.
![Page 15: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/15.jpg)
Behaviour
• How the product acts (feedback)
• The tasks the product allows users to do
• Maximising the abilities of the product
• A focus on actions it (you) want to engender through use
![Page 16: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/16.jpg)
To design the best products. focus on behaviour as the starting point.
But then we’ve got this problem.
If The Interface is The Product, how do we design from the inside out?
![Page 17: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/17.jpg)
Step 1: Behaviour as Design Strategy
![Page 18: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/18.jpg)
Differentiators have traditionally been features.
But we can make behaviour the differentiator. In not only how the product behaves, but the behaviour it engenders.
Behaviour is one defence against feature-itis.
![Page 19: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/19.jpg)
People love features. We enjoy comparing features and choosing the productwith the most features.
![Page 20: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/20.jpg)
Companies love features, too. It gives them something to easily market and allows them to simply replicate what their competitors are doing without having to come up with real differentiators.
![Page 21: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/21.jpg)
It’s easy to replicate features. But is is hard to copy how features behave if care is taken to design them well.
And that should be our design strategy.
![Page 22: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/22.jpg)
Step 2: Behaviour as Design Research
![Page 23: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/23.jpg)
Stop looking for people’s goals and preferences, start looking for what they do and why they do it.
Look at their
Motivations Expectations Actions
![Page 24: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/24.jpg)
Translating goals or (worse) preferences into a design will probably lead to something terrible.
![Page 25: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/25.jpg)
Translating goals or (worse) preferences into a design will probably lead to something terrible.
![Page 26: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/26.jpg)
Step 3: Behaviour as Product Structure
![Page 27: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/27.jpg)
How does the system behave when users engage with it?
What is the feedback like?
The same feature can feel completely different based on how it responds and how it is accessed.
Transitions matter.
![Page 28: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/28.jpg)
What activities does the product need to support?
Especially figure out what is the core activity. This will determine the product’s Buddha Nature.
The core activity also determines the Hero Task.
![Page 29: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/29.jpg)
What behaviour do you want to encourage? Discourage?
![Page 30: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/30.jpg)
It is hard to change learned behaviour. Once people get used to do something one way, especially if they do it very regularly, it is hard to get them to change.
It is often easier to change the non-human parts of the system than it is to change human behaviour.
![Page 31: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/31.jpg)
Start from the behaviour, and then figure out what should control it: the physical form, UI elements on a screen, or even gestures in space.
For users, the interface is the system, and they don’t care which discipline(s) designed it, only that it looks good and works well.
![Page 32: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/32.jpg)
This is how we overcome the interface/inside-out paradox.
Behaviour drives the form and the mechanics.
![Page 33: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/33.jpg)
So was Dan saying form follows function?
Somewhat. But don’t quote him.
![Page 34: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/34.jpg)
“We’re often not making things better, we’re just making things different.” Peter Saville
![Page 35: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/35.jpg)
Go make things better.
![Page 36: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/36.jpg)
Ideation & Design Principles: Ye Olde Design Workshoppe
![Page 37: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/37.jpg)
Design principles
![Page 38: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/38.jpg)
Why design principles
• Help pick the right concept
• Help make design decisions
• Can be longer lasting than product itself
• Help find the Buddha Nature of a product
![Page 39: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/39.jpg)
Design principles• Based on design research
• Short
• Memorable
• Cross-feature
• Specific (no “Easy to Use”)
• Differentiators taken together
• Non-conflicting
![Page 40: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/40.jpg)
Charmr
• Wear it during sex
• Make better use of data
• Easy to learn and teach/No numbers
• Less stuff
• Keep diabetics in control
• Keep diabetics motivated
![Page 41: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/41.jpg)
Brainstorming
![Page 42: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/42.jpg)
Brainstorming rules
• No bad ideas, no criticism
• Stay focused: Stray ideas into “parking lot”
• Don’t spend a lot of time on any one idea
• Use the whole room
• No multitasking (i.e. phones/laptops/etc. OFF)
• Start with a warm-up exercise
![Page 43: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/43.jpg)
Brainstorming sprints
• Fixed time limit
• Quantity, quantity, quantity
• Reward quantity, not quality!
• Breaks (even small ones) between sessions
• Drawing, dammit. This is design!
• Focus on pain points and opportunities
![Page 44: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/44.jpg)
Brainstorming Techniques I
![Page 45: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/45.jpg)
Brainwriting
Each person writes down or sketches the beginning of an idea silently on a piece of paper. This could be as simple as a single word or a shape.
After three minutes, the person passes the paper to his neighbour, who continues the idea. This repeats around the circle until it gets all the way back around to its originator.
![Page 46: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/46.jpg)
Break the rules
Rather than ignore the project’s constraints, you list them out and one-by-one proceed to figure out how to break them.
![Page 47: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/47.jpg)
Force fit
Distil the problem down to two words that are in opposition, then put those words together into a phrase. For example, “intense peace.” Then ruminate on what exists in the world that embodies that phrase, then try to apply it to the project for inspiration. Nature and art often work well for this.
![Page 48: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/48.jpg)
Poetry
Reduce the problem down to a haiku or bento poem. Such a small form makes you figure out what are the most important parts of the problem.
![Page 49: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/49.jpg)
Brainstorming Techniques II
![Page 50: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/50.jpg)
Questioning
Start with a very general concept and keep asking two questions: how and why. For example, “We are going to build a social networking site.” Why? “So record collectors can exchange albums.” How? “By uploading their rare albums.” How? Etc.
![Page 51: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/51.jpg)
Swiping
Swiping is stealing the best ideas from another field or domain. It starts by abstracting your problem (“This is about finding something small”) and asking what other products or fields have ways of doing the abstraction.
![Page 52: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/52.jpg)
Laddering
Laddering means either moving “up” to a level of abstraction (“What is this problem an example of?”) or moving “down” to something concrete (“What is an example of this problem?”).
![Page 53: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/53.jpg)
Bizarro World
Pretend you wanted to make the opposite product or the opposite outcome. Invert everything: what is good is bad, what is desirable isn’t, etc.
![Page 54: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/54.jpg)
What happens next?
![Page 55: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/55.jpg)
Clustering concepts
• Cluster similar concepts around activities, characteristics, metaphors, etc.
• Name the clusters
• Consider collapsing similar concepts or stringing together concepts
• Do an initial sorting of concepts
![Page 56: UX London Redux - Dan Saffer](https://reader033.fdocuments.net/reader033/viewer/2022042515/5456f657b1af9f39378b5073/html5/thumbnails/56.jpg)
Clustering concepts
• Cluster similar concepts around activities, characteristics, metaphors, etc.
• Name the clusters
• Consider collapsing similar concepts or stringing together concepts
• Do an initial sorting of concepts
• Evaluate concepts against design principles