Here I made a drag & drop for Marijn Meijles who suffers from a motor disorder.
I got the assignment to create a website purely based on the needs of one person. For me, this person was Marijn Meijles, who suffers from a motor disorder. He has difficluties with using the keyboard and navigating his way through websites. My job was to create a drag & drop that Marijn was able to use.
As I was building just for him, I wanted to dedicate my design fully on his lifestyle. He enjoys beers and books in his spare time. Therefore, I decided to build my drag & drop in these two themes. Marijn can drag & drop the images of beers or books and put theme on a timeline. The place Marijn decides to drop his image, declares the satisfaction he gets from reading or drinking it. Below are the starting screens of both themes.
You can find all the progression of my work documented in my Wiki. This will include my three tests of my prototype with Marijn. I'm also reflecting on this project at the end of that page.
To get a better understaning of how I implemented the Design Principles into my design, you can have a look at my Wiki: Design Principles.
Here I will give some more information about my user: Marijn Meijles. I will explain who he is, what he wants to achieve on my website, how he will achieve this and why he will be using my website.
- Who is Marijn Meijles?
Marijn suffers from a motor disorder. This means that he struggles to use his computer more than others. What this doesn't change is his personality. Marijn is a funny guy who enjoys his work and taking work of others to another level.
- What does Marijn want to achieve on my website?
He wants to be able to drag items and drop them wherever he likes to. In my case, he will be dragging images of beers or books and dropping them on a timeline to see what he thinks of them.
- How will he achieve this?
Marijn is able to drag the items by using his keyboard, especially the H, J, K and L keys. He can use the O and P key to navigate through the images. If he wants to use his trackpad, he can as well, since he's also able to drag with his mouse.
- Why will he be using my website?
To be honest, my website doesn't really have a real goal of using it. That doesn't mean that he can't be having fun while using it. Therefore, this will be the main reason of using my website, just to have some fun.
If you want to use my code for your own, you can clone the repository as a local file:
git clone https://github.com/dannyfrelink/drag-drop
You then need to install all NPM packages:
npm install
Now you're able to start working with my project. Simply run the following line in your terminal:
npm run dev
I have used the MIT License for this repository.
JavaScript - Move Object with Arrow Keys using JavaScript Function. (z.d.). Includehelp. Geraadpleegd op 20 april 2022, van https://www.includehelp.com/code-snippets/move-object-with-arrow-keys-using-javascript-function.aspx
Drag and drop. (z.d.). Quirksmode. Geraadpleegd op 20 april 2022, van https://www.quirksmode.org/js/dragdrop.html