Research (3): Navigation Design & More Examples

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.

Capture

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.

Capture`

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.

Capture1

(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.

Capture2

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.

 

 

 

 

Advertisements

3 thoughts on “Research (3): Navigation Design & More Examples

  1. I can see where you got your ideas for the “Mt Ruapehu” title and caption ontop of your photos.

    I can see the inspiration in your work and i like how you have applied it to your gallery, with improvements – making the titles more transparent and more clean.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s