Cherry Hau
Creating a slideshow from scratch with good user experience.
One of the recent design trends on websites is to have images take up the full size of the screen. I decided to follow on with this trend, with the homepage of my website opening with a full-screen slideshow 1.1 of some of my projects that I want to showcase.
While my banner images are rendered as widescreen images, I wanted the image to be shown as full screen no matter the aspect ratio of the user’s browser.
To make the slideshow responsive to different aspect ratios, I chose to crop into a section of the image.
This works for both viewing in portrait, on a mobile device for example 1.2, or when the screen is wider than the image, in which case the image is cropped to show a thin band.
I looked at some designs online for inspiration, but there was none with the UX that I wanted. I decided to create a slideshow from scratch.
I chose to have large arrows on the sides to change slide, and dots at the bottom to show which slide was selected. I also added mouseover text to the dots, so that the user could see the title of the slide before they chose to transition to it.
I wanted to have a slideshow that would slide transition between slides. This was relatively simple to implement, using the CSS transform function.
However, two problems presented themselves. Firstly, how the slides should wrap around when going beyond the first and last slide, and secondly, how the script should handle spamming of the buttons.
The first problem, I solved by checking if the user was viewing the first slide, then if so, would move the last slide to the left rather than the right 1.4. This meant that by clicking the left arrow to descend below the first slide, it would transition left into the last slide. I did the opposite for the last slide, so that it would wrap back around to the first.
The second problem of input spamming was more difficult to solve. Firstly, I made it so that any inputs were ignored while the slide was transitioning 1.5. While this solved the problem of strange artifacts in the transition, it created bad user experience as inputs were being discarded.
This meant that, for example, if the user clicked the right arrow twice in quick succession, the slide would only advance by one as the second input was ignored.
Instead, I made it so that any input while the slides were transitioning were stored, and then another transition would occur immediately afterwards to whichever slide was selected 1.6.
This created a much better user experience, as all inputs were registered, while also avoiding visual errors of slides changing z-index mid transition, or changing direction in the middle of the screen, as well as others.
I was happy with the design and UX of this slideshow, but it was quite difficult to maintain. This is because it was all hard-coded into the HTML file, so updating text, images and links was all manual.
This is the code used to show my three main modelling projects as slides 1.7, and as can be seen, there are a lot of lines with plenty of places to make mistakes.
As I already had all my projects stored in a JSON file for my projects list page, I wanted to incorporate this into the slideshow as well.
I initially investigated doing this in JavaScript but could not find a way to do it that I was happy with. However, once I started using PHP, I found a solution.
By using PHP templates, I could pull the variables for title, subtitle, link, and images from the JSON file directly into the slideshow. More importantly, it made the slideshow a lot easier to update as each slide was represented by a single line of code rather than many.
This code 1.8 replaces all the hard-coded HTML 1.7, and with just a single line per slide, is a lot easier to maintain. Furthermore, as variables do not need to be updated manually, I do not have to worry about making mistakes when typing them out, and project tags, titles, and subtitles, will all be automatically updated if I ever choose to change them.