I want to create an easy to navigate gallery, and to ensure I do so I have researched user interface and user experience in regards to image gallery and navigation arrows.
I read an article called “Why Users Aren’t Clicking Your Home Page Carousel” on a website called uxmovement who say that less than 1% of users click on home page carousels. Apparently the problem with this is because the carousels have bad navigation – if the navigation arrows on a carousel don’t give users an incentive to click, they won’t click.
Reading this made me sad because I had begun to design a carousel similar to the one on the left with the little dots because it looks minimalist and not cluttered.
I then read an article called “Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors” on Nielsen Norman Group’s website that is Evidence-Based User Experience Research, Training and Consulting (pretty reliable source, I think). The article featured the image carousel on Nest’s website, which I really like the look of. It plays automatically and has a small, unintrusive play/pause button. The images are clickable below the feature image, which means users can see what they are clicking (making them more likely to click, according to the previous article). I quite like it as it is very minimalist, and the captions are nicely incorporated onto the images.
Nielson lists some guidelines for good carousel design which includes:
– Use icons and links that are understandable and recognisable. (They make a fair point that the user doesn’t know which image is clicked when a dot or number is used as navigation items, so I have decided against using dots).
– Indicate how many frames are present and where the user is within the progression to help the user feel in control. (This also makes sense and is a tip I will remember when editing my mockup).
– Make links and buttons large enough to decipher and click
Then I went on to find more slider / web carousel inspiration and came across the article “Use of Huge Sliders in Web Design: Best Practice“. I really like how the following image sliders are displayed.
(The above image is a screenshot from lindalino). I don’t like how this gallery scrolls vertically instead of horizontally but the caption displays really nicely on top of the images. I like the idea of using full screen images in full focus. I would have to find somewhere to display the upcoming images, though, as this doesn’t show how many images are in the carousel or give previews of them.
This website incorporates an image slider as their entire website which is intriguing. The bottom links navigate through the slideshow, which is a feature I like. I think it’s also interesting that the title of the website is at the bottom of the page.