Aalto Interface Metrics (AIM) is a new service that lets you automatically test the usability and aesthetics of your websites using several verified user interface metrics. Simply enter a webpage URL or upload a screenshot, and select desired metrics to get started. AIM segments the page, and displays a preview. As results are computed, they are presented along with detailed explanations, and histograms for comparison. AIM is fully open-sourced, and we invite you to extend the service with your own contributions. Head over to interfacemetrics.aalto.fi to give it a try, and for more information.
AIM's codebase is divided into four distinct parts:
The web application's frontend is built with Vue.js, whereas the backend is based on Tornado. The frontend and the backend communicate with each other via WebSocket.
The metrics library and the segmentation script are both dependencies for the web application's backend. Other dependencies include Node.js + npm (frontend), Python 2.7 + pip (backend), and MongoDB (database). In addition, the backend depends on Headless Chrome and layout-learning. The former is used to capture web page screenshots and the latter offers an implementation for the visual search performance metric (needs to be compiled under the target platform, only Linux is available for now).
Start by creating the aim database in MongoDB with the following two collections under it: screenshots and results.
Configure backend environment variables for development, test, and production. Next, go to the aim_backend directory, and create and activate a new Python virtual environment (if needed). The final step involves running the following commands:
# Install required packages
pip install ../aim_metrics
pip install ../aim_segmentation
pip install -r requirements.txt
pip install opencv-pythonConfigure frontend environment variables for development, test, and production. Then, go to the aim_frontend directory and run the following command:
# Install required packages
npm installTo run the backend server, go to the aim_backend directory and execute:
# Start the server
python uimetrics_backend/main.pyGo to the aim_frontend directory, and run the following command:
# Serve with hot reload at localhost:8080
npm run devTo build the frontend for production:
# Build for production with minification
npm run buildAfter the build is complete, the files (for production) can be found under the newly created dist directory. These files are meant to be served over an HTTP server, such as Apache HTTP Server.
It is highly recommended to use a load balancer (e.g., Apache HTTP Server) in a production environment, as certain metrics are extremely CPU intensive. This means that the backend needs to be launched with multiple instances, each listening to a different port. A process manager (e.g., pm2) will come in handy at that point. Also, define the AIM_ENV environment variable on the production server and set its value to "production" (defaults to "development").
Go to the aim2_metrics directory and read README.md for details.
Please read CONTRIBUTING.md for details on contributing to AIM.
Detailed changes for each release are documented in the release notes.
AIM and related research have been funded by the Technology Industries of Finland Future Makers project SOWP (2017-2019) and the European Research Council starting grant (COMPUTED 2015-2020).
For questions and further information, please contact us via email at interfacemetrics@aalto.fi.
Copyright (c) 2018-present, User Interfaces group, Aalto University, Finland
This software is distributed under the terms of the MIT License. See LICENSE.txt for details.