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.

๐Ÿ“„

๐Ÿ“„

๐Ÿ“„

๐Ÿ“„

Adaptive user interfaces (AUI)

Adapt to people,
not just devices

Delete

Are you sure?

Yes

No

Delete

Undo

Deleted!

Developing AUIs
is challenging

Model-driven
development

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

Success

Signing in

Error

0.9

0.1

Weighted graphs

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

Reinforcement
learning

service.onTransition(state => {
  analytics.track({
    source: state.history.value,
    target: state.value,
    context: state.context,
    event: state.event,
    timestamp: Date.now()
  })
});

Application

Executable Model

Metrics Tracking

Adaptive Transitions

Adaptive UI

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

  • 82
Loading comments...

More from David Khourshid