# Mind-Reading with Adaptive and Intelligent User Interfaces - David Khourshid
###### tags: `jsdc2019`

{%hackmd @JSDC-tw/2019-announcement %}

**@davidkpiano**
- [Github](https://github.com/davidkpiano)
- [Medium](https://medium.com/@DavidKPiano)
- [codepen.io](https://codepen.io/davidkpiano)

#### Example: fetch data button

**情境：**
我們 fetch 資料，如果太慢希望能在前端看到 Loading 圖示。
Developer 可以開 devTools，但不是每個人

Solution:
- A/B Test 效率不好，因為一次只能比較兩種狀況

- User flows are seldom linear
Take different path

- [Guess.js](https://guess-js.github.io)

## Adaptive user interface (AUI)
adapt to people, not just devices
以 Inbox 為例：
- 判斷某流程的使用率
- 是否要刪除
- 輸入文字，知道你要輸入什麼

### Challenging
- [Current Challenges and Applications for Adaptive User Interfaces](https://www.intechopen.com/books/human-computer-interaction/current-challenges-and-applications-for-adaptive-user-interfaces)

### Model-dirven development
- 繪製流程圖
- Finite state machine
- have one initial state
- a finite number of **states**
- a finite number of **events**
- a mapping of sates **transitions** triggered by events
- a finite number of **final states**
- FSMs with switch / case
- Define **transitions** between **states** & **events**

- FSMs with object mapping
- 從 state 著手
- 從 transitions 著手

- [Xstate](https://xstate.js.org/)
- [Github](https://github.com/davidkpiano/xstate)

- Statechart (1986)
- Hierarchical State Machines
- Components
- Actions
- Guards - conditions
- Hierachy
- Orthogoality - parallel
- History

- Game plan
1. Abstract model
2. Transition analysics
3. Identify adaptive paths
4. Use analysis for adaption

我們可以將流程的使用率視覺化，來發掘使用者使用頻率最高的流程
這裏展示在 UI 的操作上，用 Object 紀錄不同動作的頻率

- Analysis of transitions
- example: login IG
- Analysis of events
- To know what user wnat to do
- Decision trees
- Prediction via shrotest path algorithm
- Higher-order Markov models
[Variable-order Markov model (Wikipedia)](https://en.wikipedia.org/wiki/Variable-order_Markov_model)

- Deep Reinforcement Learning

>DEV EXPERIENCE <---------> UX
- Determinism
- Visualization
- Commnuication
- Testability
- Simulation
- Analytics

Adpative User Interfaces
- Create personalized systems
- Prevent information overload
- Provide intuitive guidance
- Understand tasks & goals

Modeling considerations
- Micro vs Macro Adaptivity

Advantages of using statecharts
- vitualized modeling
- preciese diagrams
- Automatice code generation
- Comprehanceisve test

Disadvantages of usining
- Learning curve
- modeling

Complexity trade-offs

specttrum

## Reference
- [Statecharts](https://spectrum.chat/statecharts?tab=posts)
- [Welcome to the world of Statecharts](https://statecharts.github.io)
- [XSTATE](https://xstate.js.org/)

## Q&A
1. Custom
- UI different AUI
2.