Project description

This project has been developed in the context of my bachelor thesis. The goal is to find a fitting form of visualization for contextual information in the field of automotive digital forensics. The application should explore forms of data visualization that guide the user's attention to important elements on the current page. Through directing the focus, the user is leaded from element to element and in the end discovers the information they were searching for. The focus solely lies on the visualization and no other functionality is planned up to now.

How to work with the framwork?

1. Go through the setup of the project provided below
2. Play with the Vue project (this repo) and fill out the questionnaire
3. Play with the Adobe Xd project and fill out the questionnaire

Information about the used questionnaire

After testing the Vue project prototype and after testing the Adobe Xd project prototype, the UEQ (User Experience Questionnaire) has to be filled out. The questionnaire is based on sementic differential, where the user has to decide which of two words with opposite meanings more likely applies to the tested product. An example would be the words attractive and unattractive. Now the user has to choose on a seven point Likert scale, which word they think applies more to the product.

The questionnaire has to be filled out two times, one time for the Vue project prototype and one seperate time for the Adobe Xd project prototype. This is necessary to be able to compare the results of both visualizations.

A short introduction to how the UEQ is used, is included in the questionnaire itself. The handbook is only to provide further information on the questionnaire.

The data collected through the questionnaire will only be used in the context of this bachelor thesis and will not be given to any other parties.

Project setup

Please follow the steps below to get a local version of this application up and running:

1. Install node.js the LTS version 16.13.1 https://nodejs.org/en/download/
2. Run npm install -g yarn to install the current version of yarn
3. Run npm install -g @vue/cli to install the current version of vue's cli
4. Clone this repository and navigate to the cloned folder
5. Run yarn add .\package.json on Windows or yarn add package.json on Linux to add all package requirements
6. Run yarn serve to start the server
7. Open localhost:8080 in your browser

Vue project

1. An example test scenario would be: You want to know what data components would contain relevant data to clarify the question of guilt in an accident. Try to find out by using the application.
2. Test the application further by clicking around for a bit
3. Fill out the user experience questionnaire provided questionnaire

Adobe Xd project

1. The click prototype with the second form of visualization can be found here
2. Try testing the same scenario as before: You want to know what data components would contain relevant data to clarify the question of guilt in an accident. Try to find out by using the application.
3. Test the prototype further by clicking around
4. Fill out a second questionnaire again found questionnaire, it is the same questionnaire but this time for the click prototype

Feedback

Please send me your feedback and the questionnaires via email to [email protected].

Thank you for participating!