Tabbed form – horizontally stacked sections

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

enter image description here

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
  1. All sections are in tabs

enter image description here

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?
Tags: