Enabling websites to evaluate and enhance user experience with Artificial Intelligence
View this README in webpage form with a Demo
- Introduction
- Demo
- Installation
- Getting Started
- Examples and Applications
- Future Improvements
- License and Attribution
UX-AI provides the ability to strengthen user experience by intelligently inferring user behavior status given demonstrated page interactions. In realtime, the AI agent periodically classifies such behavior statuses as either distracted, engaged, idle, or rushed.
Our goal is for sites to leverage this valuable information to improve user experience during the browsing session.
For instance, once detecting that a user is rushed, a component containing contact information can be discretely presented before the user navigates away. See more use cases and examples here.
Most of the time, user behavior is classified as engaged, suggesting that the user is following along with the page as intended.
Don't worry, UX-AI does not save any observations of user behavior. No user-related data collected by UX-AI ever leaves the browser. Upon refresh or page close, all respective data UX-AI disappears.
View a live demo here.
First, make sure to link TensorFlow.js, the ML framework on top of which UX-AI's models are built.
<head>
...
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
</head>Download UX-AI with npm
npm install ux-ai
or link the package with a <script> tag
<head>
...
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ux-ai@latest/UXAI.js"></script>
</head>If using a UI framework with Node.js, don't forget to import the package. This is not necessary if the package is imported via <script> tag.
// top of file
import UXAI from "ux-ai"Instantiate a UXAI object, passing in an object of options.
const uxai = new UXAI({
inferenceInterval: 10000, // ms between predictions, must be between 3000 and 10000.
inferenceCallback: history => {}, // history is array of behavior status Strings
})Note that behavior status classifications are more stable with a greater inferenceInterval.
Sign Out the user when idle for 5 inference cycles:
if (history.slice(history.length - 5).every((status) => status === "idle")) {
signOutCurrentUser();
}Trigger an auto-save before the distracted user forgets:
if (history[history.length - 1] === "distracted") {
saveDocument();
}Gauge session page interest after 10 inference cycles have passed:
if (history.length >= 10) {
const interest = history.filter(status => status === "engaged").length / history.length;
console.log(`Interested ${Math.round(interest * 100)}% of the time`);
}Of course, these are just a few simple examples. Feel free to take UX-AI in whatever direction you choose, staying well within ethical boundaries.
Observation and intelligent prediction/classification methods are always under further development, though often occurring outside this repository. UX-AI will automatically use the most recently published ML model, as it is loaded over the cloud.
This project is released under the Apache 2.0 License. In your own derivations, significant changes should be stated and attributions should be maintained in the NOTICE file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent