How can I show 2 different products, see both of them but interact just with one first and THEN switch to another one?

Question

Ok, this is my first question here, please forgive me for the long text :)

Let's consider we have 2 products to show: product A and product B.

They are the result of a process I asked someone else to do for me, and I get now the chance to show what was done in my absence from another person, and if needed, give feedback to him/her.

These products are different in content, but It's necessary/mandatory to show them at the same time.

For each of them we have got: an info text and 2 call to action button (let's say "Y" or "N").

If I make rollover on the product A space (close to it too) dedicated to this specific product (and its related stuff explained above) I will see it in first plane. At the same time I cannot interact with the other product B space's stuff 'till I will go without the cursor on the product B area and so on.

If I click "Y" I will go to another page (let's say homepage). If I click "N" I will go to another one for the feedback.

I would avoid scroll and see everything in above the fold area.

Is tab system the best way to show them? Or is it improvable by UX and UI? Because it's really messy to show two tabs in a width of 1230px (bootstrap grid).

Answer 1

Whatever your constraints, stick to conventions where possible. Check out Nielsen's 10 Heuristics for good rules of thumb.

If an element is not editable, it should appear disabled or inactive. Help the user by explaining why something is locked with an alert. Set the users' expectations and afford them clues as to what is going on. Tabs are used as a metaphor for stacked content (like paper file folders with tabs). Consider a progress bar or pagination to show steps in a process.

Do not forget to verify your design assumptions with users. ~5 are needed.

I referenced Bootstrap because you mentioned it - illustrative purposes only.

Answer 2

I would just suggest a higher resolution display because frankly that's the easiest way to do it. 2560x1600/2560x1440 are generally 27" or bigger and aren't cramped like 4K monitors, and you can get high-quality displays for $250+.

Assuming cost is an option, it's also possible to set each tab as an individual window and set each to 1230px (since that seems to be your requirement). With a 1080p display, with one window on the left and the other on the right, there's only 540px of overlap. Then you can just alt-tab between the two when demoing, leaving the majority of both displays visible.

If neither of these work for you, can you give a little more context? I'm not fully understanding the space issue with the UI or why it may need changing, especially if this is specifically for a demo.