1

I am working on a application that allows users to buy games. There is a sidebar with the global navigation throughout the whole app.

enter image description here

And I am now wondering if I can hide the sidebar during the checkout process. I started thinking about this for two reasons:

1) To let users focus on the payment process and not distract them with irrelevant information (like the navigation at that point) - like is sometimes done with registration process

2) I would like to show the summary of the shopping cart during the checkout, kind of display two columns at the same time and I feel like there's not a lot of space for all those elements to breath

This is what it looks like right now: enter image description here

So I figured maybe I could hide that sidebar altogether to gain some space, but I am not sure if it's an entirely good idea.

Improve this question
3
  • 2
    You can do whatever you want, really. But part of making such decisions is that you're doing it based on research. Have you reviewed your competitors, or other checkout journeys to see what the industry patterns are?
    – JonW ♦
    Apr 26, 2018 at 12:28
  • Lets say your users gets halfway through the checkout process and decides they want to add something to their cart before checking out - Is that still going to be possible with the sidebar removed? As JonW says, you need to do some research although I would suggest, after checking what your (successful) competitors are doing, test your flow with users - run some task based tests to see how they cope with the interface.
    – Roux Martin
    Apr 30, 2018 at 12:31
  • If my memory serves correctly, a similar issue is tackled by Sony's PS4 store interface. If you're in the exploration aspect of the app, you have a sidebar menu. Here you can choose to either explore featured titles in a horizontal interface, or choose a menu item to go straight to a game title overview. Once you start browsing the actual store, you'll find the navigation at the top of the screen. The same goes for the purchasing screen. Nav is hidden, apart from the "back" option. I think you'll have to evaluate whether you need a sidebar menu for a store overview in the first place.
    – Wendy Wojenka
    May 1, 2018 at 11:36

2 Answers 2

Reset to default
1

Just as JonW said, you can do whatever you want but if you chose to hide the sidebar, I would recommend that you don't hide it for good but allow the user to slide it back into view.

I would place a burger menu icon in place of the sidebar (top, left) and when the user click the sidebar slides back into view and place an X in your sidebar so that the user can hide it back and gain more space on the screen.

enter image description here

If you don't want to squeeze your content again, you could make the sidebar absolute and stick it to the left side of the screen so that it overlaps the rest of the content when sliding into view. You can also place an transparent overlay underneath the sidebar when it comes into play:

enter image description here

Improve this answer
4
  • If I left the option to open the sidebar and squeeze it together with the rest of the screen again, the point of hiding it in the first place would not make sense. Unless the sidebar then would open up over the rest of the content. This is because I'd like to hide it to make more space, so when I open it back, the two columns would be squeezed again and I'd need to design it, so they look good with the sidebar open, so I am back to square one.
    – Ola Osinska
    Apr 27, 2018 at 6:48
  • @OlaOsinska Well, not exactly square one, if you never want to squeeze the view again, you kinda gave your own answer. Make the sidebar overlap the view. Make it absolute to your body and stick to the left with -sidebarSize.
    – Alin
    Apr 27, 2018 at 7:55
  • could you explain your last sentence? - I am not sure I understand what you mean by "body" and sidebarSize. thanks!
    – Ola Osinska
    Apr 27, 2018 at 8:20
  • @OlaOsinska Sorry, I was talking in terms of HTML and CSS. By body I was referring to your main wrapper and sidebarSize is the width of your sidebar.
    – Alin
    Apr 27, 2018 at 8:47
-1

I am not sure why you want to reinvent the wheel here, making cart persistent has not worked well for anyone even Amazon. This idea was A/B tested and I assume it didn't win.

Now think of cart experience in the real world, when you go grocery shopping, you put whatever you want to buy in the cart. The cart is always with you while you shop but it never asks for your attention. It is available on demand for review.

Once done, you go to billing counter and that's where you review the items you have added to the cart. If you don't want something, you just remove or if you want to add something you either go back and add or finish billing the current order and then start fresh.

One of the Jakob Nielsen's Usability Heuristics

Match between the system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

To answer your question, I won't have a persistent cart but something which is available on demand (maybe hover interaction).

Improve this answer
1
  • My question is about collapsing the sidebar, not at all about the existence of the cart in the interface, so I do not get your answer.
    – Ola Osinska
    May 7, 2018 at 8:09

Your Answer

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

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