Bar charts are widely used for their simplicity in data representation, prompting numerous studies to explore and model how users interact with and perceive bar chart information. However, these studies have predominantly focused on sighted users, with a few also targeting blind screen-reader users, whereas the graphical perception of low-vision screen magnifier users is still an uncharted research territory. We fill this knowledge gap in this paper by designing four experiments for a laboratory study with 25 low-vision participants to examine their graphical perception when interacting with bar charts. For our investigation, we built a custom screen magnifier-based logger that captured micro-interaction details such as zooming and panning.
Our findings indicate that low-vision users invest significant time counteracting blurring and contrast effects when analyzing charts. We also observed that low-vision users struggle more in interpreting bars within a single-column stack compared to other stacked bar configurations, and moreover, for a few participants, the perception accuracy is lower when comparing separated bars than when comparing adjacent bars.
You will need node.js and git (optional) installed globally on your machine.
Step 1: Get Code
Download or clone this repo by using the link below:
[email protected]:anonymous281107/GraphicalPerception24.git
Step 2: 🛠 Installation and Setup Instructions
The preferred package manager for running this project is yarn
Using Yarn (Optional)
Install yarn globally using npm
npm i -g yarn
Go to project root and execute the following commands in console to get the required dependencies:
yarn install
or
Using NPM
Go to project root and execute the following commands in console to get the required dependencies:
npm i
Step 3: Running the project
Go to project root and execute the following commands in console to run the project
yarn start
or
npm run start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
- Make sure that all the code is commented and legible variable names are used. Do not have any unnecessary overheads or redundant code.
A new branch is to be created for new feature with an appropriate name. For example, when adding the video-conferencing feature, one should create a new branch from the main branch named graphicalperceptionlv-customtheme (There is no set naming nomenclature that one has to follow. Just use legible branch name)
