Hi,
I'm after some thoughts and opinions regarding the navigation/behaviour of a portion of a site I'm working on. The site is a shop, which is built with the Big Cartel framework, and is my first attempt at using more than just a couple of lines of javascript - or rather, jQuery.
The main idea behind the store is that you browse via a full-screen slider; each slide comprising a window-sized image and small amount of text i.e. the product name and price. The shop has a number of "categories" and each category has its own array of products.
When you navigate to a particular category - which is done via a simple navigation bar - the corresponding products are loaded into the slider and you are able to press/tap/swipe through them at will. Once you find a product that you'd like to buy or know more about, you click/tap on the name and the details are loaded into an overlying div via AJAX. The product details are not held in the slides as they will contain text and more images - which seems an excessive amount of data to populate a slider with. When the user wants to go back to the list of slides from the details, they can simply press a close button, and the AJAX content is deleted, restoring the page to its previous state - the slides unaltered.
Note: Whilst browsing through the category and viewing details, the URL currently remains unaltered. It will always have the format: http://www.mywebsite.com/category/categoryname
See above.
Or - to put it in more practical terms - if someone wanted to bookmark or share a particular product with a friend, they'd have some difficulty as they'd only actually be sharing the category URL, with no indication as to which product.
The most obvious and persuasive method I can think of for dealing with this is by using location hashes. I'm almost certain there's little or no other choice. But there are a couple of ways I can envisage them being used.
When the category loads, and for each subsequent slide loaded, display the URL with a product hash.
E.g. with the following format:http://www.mywebsite.com/category/categoryname#product-name. When the user loads a product's details (again, via AJAX), the url will likely remain the same.
This means there may be a slight disparity between the page that is bookmarked (with or without details) and somebody else visiting the bookmark (no details, but the correct slide). Is this discrepency a forgiveable and unimportant one?
It also means altering (disabling) the browser history on each hash change, as updating the hash results in a new browser history entry by default. Otherwise I imagine this would be counter-intuitive behaviour for a user presing "back" and expecting to go back a page, as opposed to just back a slide.Keep the URL unchanged when browsing through the slides and append the hash only when the details are loaded.
There would be little/no browser history manipulation needed with this method on the hash change, the user could also press "back" from the details and actually be taken back to the slides - albeit probably the default starting slide. The close button could work as intended, however.
This would also rely on anyone successfully creating a bookmark to have loaded the details - thus triggering the appended product hash. Not at all obvious if you're not paying attention to the address bar.A combination of the two.
A final idea would be to use the following format for browsing through the slides:http://www.mywebsite.com/category/categoryname#[integer], where[integer]is simply a number that corresponds to the slides position in the list. Then, on loading the details, the hash could change to the product name, thus distinguishing between a product's slide and a product's details.
I can't really think of any extra caveats with this one, other than a bit of convolution.
I know what I've outlined doesn't follow best practice, and that there are probably inumerable reasons not do build sites this way, but I'm too far down the rabbit hole to u-turn now. I'm still learning and I've learned a lot whilst working on this project, so please refrain from telling me what I should've done. I'm proverbially kicking myself already.
I'm inclined towards option 3, as it seems to offer the best fool-proof approach for users, but there may well be something(s) I've missed. Plus, I'm at a point where I'm a little too close to the project to be able to have a completely objective point of view. Fresh prespectives are most definitely welcome.
Thanks for making it this far.
