New article edit screen

[jonrz]

Review and organize a new edit screen.

Focus on:

• Information architecture
• Progressive disclosure
• Concatenation of options into cascaded options
• reducing the number of tabs
• Consolidate and arrange elements for better workflow and user discovery

No fancy design needed, this is mid-fi (is that a thing?)

Refer to Issue #13 regarding editor workspaces.

[brianpeat]

Here's an early (and rough) mock up. It was hacked together in Adobe Fireworks so we'll want to do something new in a better prototyping environment. The goal of this particular mock up was to try to remove the tabs and get the text edit box to ALWAYS be showing.

The tabbed side bar is certainly up for discussion as there are differing opinions on it. It could also be condensed by using icons for the tabs instead of text titles.

The image wells don't need to be that big, especially when empty, again it was just a quick mock up.

Custom fields aren't in this mock up, but one idea is to move them BELOW the editor using either accordion bars or side tabs for each tab group.

Other elements were moved around and eventually we want to get away from having a giant panel of options (either by moving some, or condensing them or hiding some under an advanced option).

[jonrz]

Let's use a trimmed down editor on all mockups. Refer to Issue #13.

[jonrz]

We must prepare two or three layouts for tests and research. One is following the lines of what Brian Peat created, other is the alternative layout described below, and a third can have a strong information disclosure interface.

Alternative layout 1

3 or 4 tabs with large labels, with icons, for better visibility.

On mobile, the tabs will be sticky on top.

Custom fields will add an extra tab, with the grouped custom fields within it. We won't have a new tab for each set of custom fields, but a new group within this tab.

For the tab with the editor, a clear "edit" icon should be used. Use Font Awesome for the other icons.

Alternative layout 2

For he information disclosure layout, consider this as a first study/draft, but feel free to go completely different than this.

[jonrz]

@brianpeat to make the case for a sidebar, we must provide a good mobile counterpart. A final proposal will only be considered with 3 breakpoints, desktop wide, desktop-narrow/tablet, and mobile-portrait.

[rgmears]

I think it's better to use the old layout for Title and Alias (IE: side by side) and the Publishing Options on the side. For me, at least, I want the editor pane to be as big as possible.

I like the image(s) in the sidebar.

And, depending on the wrapping DIVs, it would not be difficult to have the Publishing sidebar display above the editor and the Image pane below the editor on mobile devices.

[jonrz]

Refer to this comment from @C-Lodder on why it is important to have a consistent experience across devices, to make it mobile friendly from the desktop

[rgmears]

And see this comment in response: https://github.com/joomla/joomla-ux/issues/4#issuecomment-321760078