Tabbed form - horizontally stacked sections

Question

I have a product edit form that i've broken into tabs.

General information about the screen:

1. This is product edit screen; creation is handled in other place. When on this screen, all products will, for sure, have at least 'General info' section already filled in. (lists sections are not mandatory)
2. I want to avoid vertical scrolling (overall app layout is made that way)
3. People will edit 'General info' very rarely. Most of the time they will handle things in one of the lists tabs.
4. Information in 'lists' tabs are optional and not sequential.

I've created 2 variations of it.

---

1. General info section always visible

What i like about this version:

• always see where he is (on what product screen)
• always edit general data easily

What i potentially don't like:

• i am not sure if this flow with 3 horizontally stacked sections introduce friction in user experience
• the idea was to replicate vertical sections stacking but with the goal of avoiding vertical scroll thus i made it horizontal

---

2. All sections are in tabs

What i like about this version:

• removes that potential friction and has only 2, clean screen sections: tabs and dedicated forms based on selected tab

---

Questions:

1. Is any of versions breaking some strong, important ux rules? If so, please elaborate which?
2. Is any of versions much better, based on some ux rules? If so, please elaborate why?
3. None of the versions shows complete product. Should maybe one of the tabs be overall product view? In that case, would one tab being 'view only' and others be 'edit' be confusing?

Answer 1

Version 2 is better and here is why:

1. You created more consistency and a simpler flow. Now every section of your form is alike.
2. It's truer to your workflow. Users are not going to go back to modify their personal information while filling out the rest of the form. It makes sense to not show it the whole time through like in version 1.
3. The screen is less crowded and there's more white space. The less you can put on a page, the better.
4. Version 2 is easier to adapt to smaller screens. There's only two columns instead of three.