0

I'm working on my personal site as a gallery for my photography with an attached shop and while I have a strong CS background which makes the JS/PHP/CSS stuff easy to me, I sometimes struggle with the UX aspects. One such thing is the placement of a "return to shop" button / link on the product pages.

Obviously, there's already a "shop" menu item. However, I figured that some users might be confused or struggle when there's no "return" button. Therefore I implemented a few different ways which look more or less favorable for me:

enter image description here This was my first implementation. A link just above my product description. It's the most straight forward way I can think of, the arrow points to the left, indication back, and everything's (title etc) is left-to-right, just as most visitors speaking / reading English would expect. However the element feels a bit detached and lost.

enter image description here Here I've put the link / button next to the title. I like that it's more incorporated, but the arrow points awkwardly towards the title.

enter image description here Same as above, but the arrow pointing to the right which breaks the return / back semantics in my eyes, since that's usually connected to forward / next actions.

enter image description here Here I've put the back element to the left which feels nice for the back button, but the title is not where one would it expect and breaks the left-to-right reading habit.

enter image description here Finally, for wider screens, I've implemented a two-column layout with the image on the left and title + description on the right. The back element looks kinda ok here although a bit like outlier as well.

Can you give me some advice on how to handle this issue best? Where should I place the button / link? Should I put one there after all, since there's already a "Shop" item in the menu?

As an extension to my question, what are good resource to read up about UX in general?

Thank you very much!

4
  • Why do you need a "return to shop" button when you have the "Shop" button in the menu?
    – Danielillo
    Jul 8, 2023 at 12:28
  • I figured that some users might be confused or struggle when there's no "return to shop" button. It might not be clear for a user to return to the shop by just clicking "shop" again, especially since the current "state" of the site (product page) isn't reflected in the menu. Hence I wanted to make it super-obvious with an additional button. But that's just my subjective impression and I'm open to suggestions here.
    – jchnkl
    Jul 8, 2023 at 14:50
  • 1
    Having the Shop button, the browser Back button, and the Home button in the logo, I don't see it necessary to add more noise to the page, especially being a photography site.
    – Danielillo
    Jul 8, 2023 at 15:15
  • @Danielillo I kind of followed your suggestions and removed it altogether. However, I've added a return to shop button / link below the "Add to Cart" button which is the last element on the page, making the return to shop link the last element. It doesn't clutter the interface and provides the user the possibility to go back when they've scrolled down that far. If you want to provide your comment as answer, I'll accept it because I generally agree with you.
    – jchnkl
    Jul 25, 2023 at 11:17

2 Answers 2

0

Having the Shop button, the browser Back button, and the Home button in the logo, I don't see it necessary to add more noise to the page, especially being a photography site.

0

I recommend leaving it out. Most users are already familiar with their browser's back button. Common shopping websites also leave it out. (see Appple, Amazon, Costco)

The only reason I can see to include them button is if the item is presented on the same page as the results without redirecting, in which case the browser's back button wouldn't do anything.

If you do want to include a back button, the first one looks best to me. That is where most users would expect a back button to be.

Another option would be to have the back button before the title in the white space, like this:

site

And then switch to the first one (with the back button on top) for smaller screens.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.