Fetch data

📄

GET api/users

Pending

200 VALE

Fetch data

📄

GET api/users

Cargando...

200 VALE

Fetch data

📄

GET api/users

Cargando

📄

GET api/users

Cargando

📄

GET api/users

Cargando

📄

GET api/users

Cargando

📄

GET api/users

Qué narices

Fetch data

📄

GET api/users

Cargando

200 VALE

Fetch data

📄

GET api/users

Cargando

📄

GET api/users

Cargando

📄

GET api/users

Cargando

📄

GET api/users

Cargando

Fetch data

Everyone is
different.

A/B tests

are ineffective.

User flows are
seldom linear.

github.com/guess-js/guess

📄

Adaptive user interfaces (AUI)

Adapt to people,
not just devices

Delete

Are you sure?

Yes

Delete

Undo

Deleted!

Developing AUIs
is challenging.

Source: Current Challenges and Applications for Adaptive User Interfaces

Model-driven
development

Source: https://dribbble.com/shots/6206737-Early-stage-flowcharts-for-Mobile-users

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

Signing in...

Profile

Home

SUBMIT

SUCCESS

UNAUTHORIZED

PROFILE

Statecharts
(Hierarchical State Machines)

Statecharts: A Visual Formalism for Complex Systems (David Harel, 1997)

Statecharts

Idle

Searching...

entry / prefetchResources

entry / fetchResults

Actions - onEntry, onExit, transition
Guards - conditional transitions

[query.length > 0]

Statecharts

Actions - onEntry, onExit, transition
Guards - conditional transitions
Hierarchy - nested states
Orthogonality - parallel states
History - remembered states

Idle

Searching...

Success

Failure

RESOLVE

REJECT

Searched

Hierarchical states

Idle

Searching...

Success

Failure

RESOLVE

REJECT

Searched

Hierarchical states

const machine = Machine({
  initial: 'idle',
  states: {
    // ...
    searching: {
      on: {
        RESOLVE: 'searched',
        REJECT: 'searched.failure'
      }
    },
    searched: {
      initial: 'success',
      states: {
        success: {},
        failure: {}
      },
      on: { SEARCH: 'searching' }
    }
  }
});

How was your experience?

𝘅

Good

Bad

Tell us why?

𝘅

Submit

Thanks for your feedback.

𝘅

Define transitions between
states & events

function searchReducer(state = 'idle', event) {
  switch (state) {
    case 'idle':
      switch (event.type) {
        case 'SEARCH':
          return 'searching';
        default:
          return state;
      }
    case 'searching':
      switch (event.type) {
        case 'RESOLVE':
          return 'success';
        case 'REJECT':
          return 'failure';
        default:
          return state;
      }
    case 'success':
      switch (event.type) {
        case 'SEARCH':
          return 'searching';
        default:
          return state;
      }
    case 'failure':
      switch (event.type) {
        case 'SEARCH':
          return 'searching';
        default:
          return state;
      }
    default:
      return state;
  }
}

FSMs with switch/case

https://codepen.io/davidkpiano/pen/dc81af7260581c1fbbf5b5154caa2228

const 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'
    }
  }
};

Define transitions between
states & events

const transition = (state, event) => {
  return machine
    .states[state] // current state
    .on[event]     // next state
    || state;      // or same state
}

FSMs with object mapping

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'
    }
  }
});

github.com/davidkpiano/xstate

npm install xstate

xstate.js.org

import { feedbackMachine } from './feedbackMachine';
import { useMachine } from '@xstate/react';

const App = () => {
  // const [state, dispatch] = useReducer(feedbackReducer, 'question');
  const [current, send] = useMachine(feedbackMachine);

  if (current.matches('question')) {
    return (
      <QuestionScreen
        onClickGood={() => send({ type: 'GOOD' })}
        onClickBad={() => send({ type: 'BAD' })}
        onClose={() => send({ type: 'CLOSE' })}
      />
    );
  } else if (/* ... */) {
    // ...           
  }
}

Abstract model
Transition analytics
Identify adaptive paths
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.

𝘅

Give Feedback

❓

Gallery

Profile

Camera

SUCCESS

TAP PROFILE

TAP CAMERA

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

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

More info: Towards Data Science - Decision Trees in Machine Learning

All data

Prediction via
shortest paths

Shortest path algorithms (Dijkstra, Bellman-Ford, A* search, etc.)
Analytics provides weights
Represents happy paths
Can be automatically generated

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();

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
```

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
```

0.75

0.25

(D) 0.95

(D) 0.05

A -> B
A -> C
A -> B
A -> B

E ->
D ->
E ->
F ->

Higher-order Markov models

Variable-order Markov models (Wikipedia)

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()
  })
});