Mind Reading With
Intelligent & Adaptive UIs
@davidkpiano
Everyone is
different.
A/B tests
A/B tests
are ineffective.
are ineffective.
User flows are
seldom linear.
![](https://blog.mgechev.com/images/intro-guess-js/guess.png)
📄
📄
📄
📄
Adaptive user interfaces (AUI)
Adapt to people,
not just devices
![](https://s3.amazonaws.com/media-p.slid.es/uploads/174419/images/6061405/Clippy.png)
Delete
Are you sure?
Yes
No
Delete
Undo
Deleted!
![](https://cdn.vox-cdn.com/thumbor/ubfdRZDXD_vueh9arpZa3o8rSak=/1600x0/filters:no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/10801379/Smart_compose_Taco_Tuesday.gif)
Developing AUIs
is challenging
![](https://www.intechopen.com/media/chapter/8958/media/image1.png)
Model-driven
development
![](https://cdn.dribbble.com/users/1182959/screenshots/6206737/wt_linktransfer_mobile_4x.png)
Finite state machines
-
have one initial state
-
a finite number of states
-
a finite number of events
-
a mapping of state transitions
triggered by events -
a finite number of final states
Sign in
Signing in...
Profile
Home
SUBMIT
SUCCESS
UNAUTHORIZED
PROFILE
How was your experience?
𝘅
Good
Bad
Tell us why?
𝘅
Submit
Thanks for your feedback.
𝘅
Close
import { Machine } from 'xstate';
const feedbackMachine = Machine({
id: 'feedback',
initial: 'question',
states: {
question: {
on: {
CLICK_GOOD: 'thanks',
CLICK_BAD: 'form',
CLOSE: 'closed',
ESC: 'closed'
}
},
form: {
on: {
SUBMIT: 'thanks',
CLOSE: 'closed',
ESC: 'closed'
}
},
thanks: {
on: {
CLOSE: 'closed',
ESC: 'closed'
}
},
closed: {
type: 'final'
}
}
});
import { feedbackMachine } from './feedbackMachine';
import { useMachine } from '@xstate/react';
const App = () => {
const [current, send] = useMachine(feedbackMachine);
return (
// ...
);
}
Determinism
Visualization
👩💻 Developer Experience
Communication
Analytics
Simulation
Testability
👨👩👧👦 User Experience
1. Abstract model
2. Transition analytics
3. Identify adaptive paths
4. Use analysis for adaptation
Game plan
Photo by NEW DATA SERVICES on Unsplash
![](https://s3.amazonaws.com/media-p.slid.es/uploads/174419/images/6061460/new-data-services-746321-unsplash.jpg)
Success
Signing in
Error
0.9
0.1
Weighted graphs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/174419/images/4643165/Screen_Shot_2018-02-25_at_10.15.19_AM.png)
How was your experience?
𝘅
Good
Bad
Tell us why?
𝘅
Submit
Thanks for your feedback.
𝘅
Close
Give Feedback
❓
❓
Login
Gallery
Profile
Camera
SUCCESS
TAP PROFILE
TAP CAMERA
BACK
BACK
Scroll
Analysis of transitions
🗺 Login, Gallery, Gallery
🗺 Login, Gallery, Camera
🗺 Login, Gallery, Profile
0.90, 0.31
0.90, 0.57
0.90, 0.12
0.90
0.31
0.57
0.13
UNAUTHORIZED
0.10
SUCCESS
(decide)
TAP AD
Analysis of actions
+10
Gallery
Ads interspersed
Ads shown at top
Ad
Scroll
Scroll
TAP AD
+10
-1
-10
INTERSPERSED > .5
TOP > .5
Decision trees
Contextual data
- Registration date
- Number of friends
- Posting frequency
- Location
- ...etc.
New user?
< 30 days
>= 30 days
Show ad at top
Friend count?
< 100
>= 100
Show more ads
Show less ads
All data
Prediction via
shortest paths
A
B
C
D
E
- Shortest path algorithms (Dijkstra, Bellman-Ford, A* search, etc.)
- Analytics provides weights
- Represents happy paths
- Can be automatically generated
A
B
C
D
E
import { Machine } from 'xstate';
const myMachine = Machine({
// ...
});
const myService = interpret(myMachine)
.onTransition(state => {
analytics.track({
target: state.value,
source: state.history
? state.history.value
: undefined,
event: sanitize(event),
timestamp: Date.now()
});
})
.start();
A
B
C
D
E
import { Machine } from 'xstate';
import { getShortestPaths } from '@xstate/graph';
const myMachine = Machine({
// ...
});
const shortestPaths = getShortestPaths(myMachine);
-
A: A
-
B: A -> B
-
C: A -> B -> C
-
D: A -> D
-
E: A -> D -> E
A
B
C
D
E
import { Machine } from 'xstate';
import { getShortestPaths } from '@xstate/graph';
const myMachine = Machine({
// ...
});
const shortestPaths = getShortestPaths(myMachine);
0.9
1.0
0.4
0.6
0.1
0.4
0.6
-
A: A
-
B: A -> D -> E -> B
-
C: A -> D -> E -> C
-
D: A -> D
-
E: A -> D -> E
A
B
C
0.75
0.25
D
E
(D) 1.00
(D) 0.00
A -> B A -> C A -> B A -> B
E -> D -> E -> F ->
Higher-order Markov models
Agent
Environment
Action
State
Reward
![](https://s3.amazonaws.com/media-p.slid.es/uploads/174419/images/4839817/Screen_Shot_2018-04-22_at_11.13.29_AM.png)
Reinforcement
learning
![](https://s3.amazonaws.com/media-p.slid.es/uploads/174419/images/4839817/Screen_Shot_2018-04-22_at_11.13.29_AM.png)
service.onTransition(state => {
analytics.track({
source: state.history.value,
target: state.value,
context: state.context,
event: state.event,
timestamp: Date.now()
})
});
![](https://developers.google.com/analytics/images/terms/logo_lockup_analytics_icon_vertical_black_2x.png)
Application
Executable Model
Metrics Tracking
Adaptive Transitions
Adaptive UI
![](https://mixpanel.com/wp-content/uploads/2016/09/logo-clear.png)
Prevent Information Overload
Provide intuitive guidance
Understand Tasks & Goals
Create Personalized Systems
Adaptive User Interfaces
Micro vs. Macro Adaptivity
Prediction vs. Feedback
Local vs. Global
Data vs. Simulation
Modeling considerations
xstate
@xstate/react
@xstate/graph
@xstate/vue
@xstate/test
@xstate/analytics
@xstate/sim
@xstate/viz
✅
✅
✅
🔜
🔜
🕐
🕐
🕐
Make your code do more.
Thank you React Finland 🇫🇮
@davidkpiano
Mind Reading with Intelligent & Adaptive UIs
By David Khourshid
Mind Reading with Intelligent & Adaptive UIs
React Finland 2019
- 3,968