During this project we redesigned the website for the minor 'web development' at the University of Applied sciences in Amsterdam. We have done our best to make a very experimental yet pleasurable web site.
A big theme in this project was 'accessibility'. The site should be pleasurable for everyone, not just for the 'general public'.
- NPM (node package manager)
- NodeJS
- GULP (task-runner)
- Browserify
git clone git@github.com:baskager/redesign-minor-web-dev.git
This will install all the NPM packages that are used throughout the project.
cd app
npm install
This ensures that the docker scripts will use the right build for development
export NODE_ENV=development
git checkout develop
This starts a 'postgres' container and an 'adminer' container. More info on these containers can be find in the /docs folder.
./start-servers.sh
This imports the database file contained in /sql/dumps/minorwebdev.sql
./import-database.sh
cd app
This will check for changes in the assets and run the gulp task runner when needed.
gulp watch
We recommend using Nodemon for development. This will restart the server when the code is changed. The will also run the server on http://localhost:3000.
npm install -g nodemon
nodemon server.js
This ensures that the docker scripts will use the right build for production
export NODE_ENV=production
This can take a while as it correctly installs and builds the webserver container
./start-servers.sh
This imports the database file contained in /sql/dumps/minorwebdev.sql
./import-database.sh
Your server should now run on the production server on port 3000, you could use a proxy through Apache or NGINX to serve the site on a domain or on another port.
Rick made a very experimental version of a keyboard that ( according to his research ) shoud be very accessible for Marijn. Check out his progress Blog for the full research and results of the test with Marijn.
For deaf people it is hard to follow lectures. They have to focus on the speaker, the interpreter and the slides at the same time. As we are making a website for a minor lectures are part of it. To make it easier for deaf people to follow the lectures I made a video player focused on improving this experience. We tested the video player with Marie, a deaf graphic designer. She gave us a lot of interesting feedback. With this feedback we improved the video player to it's current form.
The video player contains the following features:
- Synced split screen view of the lecture and the slides
- Subtitles (loaded as SRT format).
- The subtitles can switch side using the mouse or arrow keys.
- Slide overview to quickly navigate trough the lecture
- The possibility to slowdown or speed up the lecture.
- The video player can be controlled using the keyboard.
The spatial navigation functionality is deeply inspired by the original Opera function and by multiple large screen navigation systems. Users can easily navigate through elements using their arrow keys. Unlike the forward jumping tab key, users can navigate in any direction. The enter key will emulate the mouse's on click event. More information can be found on James personal progress blog.
Marijn once told me that the biggest disadvantage of the tab key was the fact that it always starts at the top of the website. If the user chooses to scroll down the page and wants to interact with an element, he will need to spam the tab key until he get's there. With this functionality James wrote, the focus key will always follow the user's window location. The focus state will change its current element depending on what is currently displayed on the screen. More information can be found on James personal progress blog.
In our interviews/test with Marijn, he told us that he really liked interfaces dat can be used through hotkeys. Now, all the pages in the main menu are available when you use the keys with a number on it. Look at the number in de main navigation to know which number you have to press. This feature can be toggled on or off when you press alt + ctrl simultaniously. Every user should be able to navigate quickly through the website without too much effort. Especially in combination with the spacial navigation and focus on scroll position.
How to use the hotkeys
- If the indicator on the bottom right is transparent, press
control + altto toggle the hotkeys. - With [1, 2, 3, 4, 5, 6] you can navigate through the different pages on the website.
I made this prototype because I heard that marijn hated carousel elements in websites because they never seem to work with spacebar or tabs and are often very fidgety.
For this reason, I tried to make a carousel element that would be more pleasurable for Marijn to use and ended up with two prototypes:
- A carousel element with navigation using 'tab' keys and 'arrow' keys.
- A carousel element with navigation using 'tab' keys, 'arrow' keys and clickable buttons on the side
After the third usability/accessibility testing with Marijn, it became clear that he prefers the second option, but, was confused about not being able to use the 'spacebar' key to navigate through the carousel items. With this feedback, I decided to create another prototype with the 'spacebar' navigation added. This last version of the prototype made it to the website.
The experiments were eye-opening for us as a team. Every member of the team represents the 'general public'. We use a computer and websites like most of society. Not often do we as developers realise our privileges and that leads to designing and developing things that might not be ideal for users that need/use additional accessibility features.
Testing and conversing with Marijn and Marie made us realise that the web/software is used in so many different ways and what for some is pleasurable can be an obstacle for others.
We found out that it is extremely difficult to make something pleasurable and accessible at the same time. It takes experiments, testing and a lot of iterations to get something right. It, however, is extremely useful and after a while it just makes sense.
When designing pleasurably accessible website elements you will find out that some designs are actually more pleasurable for the general public as well. There are some things we just get wrong in general and continuously testing helps us to realize this.
We highly recommend making websites/software more accessible if the time and money is available. You'll find out a lot of things that you can implement in future projects. Your finished work will have far more value because there are far more people that can use your product pleasurably. This isn't just financial value, it's also social value.
It really means something to the people who use it and we think that is powerful.
- Don't assume things are pleasurable for everyone. Test it with a diverse group of people, including people who need accessibility software like screen readers.
- Take your time to experiment and build prototypes, it's actually really fun and useful.
- We all have something to learn, even when we think we don't.
Write this when we sign off on the project
We use semantic versioning. More information can be found on http://semver.org
We use the "MIT License"
A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications and larger works may be distributed under different terms and without source code.
You can find our license here: https://github.com/baskager/redesign-minor-web-dev/blob/master/LICENSE
Ex-Graphical Design student that refound himself as a Frontend Developer at the University of Applied Science Amsterdam.
Designer that also likes to code.
Doesn't really know what he's doing, but he's doing just fine.
A designer who just recently discovered his love for code.s
Software Engineer studying at The University of Applied Sciences Leiden. Really likes databases, performance, security and clean code.
A very special thank you to Marijn and Marie for helping us with accessibility testing and the design process. This project would not have been possible without them.
We would also like the thank all the teachers for the guidance in this project but also in the entire minor. They really went out of their way to push us and teach us something new.
James Peter Perrone Jefferies:
- Learn how to build and manage complex project structures, for example, components splitting, folder structure, and name conventions.
- Don't be afraid to try new stuff out, be creative, and build awesome stuff where users can say: WoW!
- Don't write "quick fixes" or "prototype code". Try to write good code from the startup. Because I know that I won't refactor it later.
Jamal van Rooijen:
- Learning how to plan properly in this project. Especially since we are with a team of five people. Dividing tasks and completing our personal goals can only be achieved by planning properly.
- Learning more Javascript by developing interactive elements on the website, without being afraid to try new and innovative things if it seems too 'hard' on first glance.
- Combining style and functionality, which should result in something that is pleasurable to use and has a 'Wow factor'.
Rick:
- Animations and Transitions that increase the user experience
- Clean code so that it is readable for everyone
- A bit design to improve my skills
Bas Kager:
- Learn how to build proper CSS layouts with flexbox, grid and best practices.
- Get up to speed with tasks runners.
- Learn more about web design (best) practices
Jelle Overbeek:
- Performance matters - Setting up a Node server including performance optimisations
- Web Design - Out of the box design, include more creativity than usual and try to deliver a wow experience.
- WAFS - General JavaScript knowledge, make efficient JavaScript functions.
- Add masters project to program page.
- Fix bug where hotkeys are captured when in input field
- Improve video player on mobile.
- Fix mobile menu bug
- Fix mobile headers
- Improve animation speed
- Add filter functionality to student work.
- Add Github API
- Make whole website dynamic from database
- Add Instagram and/or Twitter feed to give a feeling about the minor.