Hi all,
At DWTECH15 I attended the sounding board regarding input for optimizing the Dynamicweb back-end interface. I thought there was a lot of useful input and great ideas, and the subject has been floating around in my mind since the conference. Also because I use it a lot on a daily basis.
As you mentioned at DWTECH15 a completely new construction of the DW interface is a huge task to complete, and it is not something that can be implemented like any other release/update in the very near future. So it might be preferable to do the interface optimization over several steps, beginning with the more easy changes and improve the interface gradually. The worst outcome would be if nothing happened at all. I am not wure how far you have come in the process, so I will just give you my input, and I hope it will be useful for you.
One place to start could be all the different the popup-windows used for different input and selections. It would be great to ensure consistancy, so they all follow the same overall structure, layout, and naming and positioning of the buttons. It could also be nice if they all open in the same position/area of the browser, so the editor knows where to expect the popups to appear.
It would be even greater to have wizard-like way of using popups for input, so e.g. the different popup-windows needed for creating a text link to a pdf-file would all happen in the same window/modal, divided into steps. But I don't know if that would be a bigger task than just creating a higher level of consistancy.
When we all talk about optimizing the DW interface, everyone has their individual way of thinking about a possible solution to a given problem. I think it might be useful to see some concrete ideas or suggestions for a solution, so that everyone can pitch in on the process and come up with ideas. So I created a conceptual wireframe for a couple of content areas in DW, as my way of suggesting a simplification of the interface. I know there will probably be some use scenarios where my suggestions fall short with the current underlying system architecture and creation flows, and some necesary buttons are missing for the flow to work. But this is just a suggestion for navigational simplification to spark some ideas, and I hope the community will pitch in with more ideas ;-) So here goes...
Basically I thought about what could be done in a more efficient way without having to alter the overall structure of the DW back-end. So I tried to keep the current context areas:
- overall context selection (bottom left)
- context navigation (mid left)
- context content (mid screen)
- simple navigation (top)
But I tried to simplify the areas where the user are supposed to navigate and click. The idea is to make the interface for the editor less filled with options to begin with, and easier to comprehend, as well as making each navigation contexts more scalable than the current ribbon. Also the user should be able to see in which context he is at any given moment.
file: 1-dw-interface-page.jpg
This wireframe shows what you see when you have selected a page in the context navigation (page tree). The page tree section could be simplified to showing only a website selection as dropdown in the top left, search CTA top right, and page tree only containing page names and +/-. The functionality for "Add page" and "Sort pages" could be placed at the bottom, of course, this requires the current underlying technical process of creating a new page would be optimized. Same thing about selecting which level of pages you want to sort. But the idea is that you don't really need more than one CTA for each of these functions. Otherwise it clutters the page overview (as it is now).
In the content context in the middle of the screen, the biggest change I suggest is introducing a simple menu bar with mouseover submenu items if necessary. It is scalable in the top level as well as the sublevel. I examined the functionality of a page and grouped the settings in to these options:
- Page content: shows the items on the page. Works more or less as the current DW.
- Add: submenu functions for adding new item or global element.
- Action: is active when you select one or more items (checkbox) in the content overview. Submenu functions would be Copy, move, delete, etc., whatever you want to do with the selected item(s).
- Marketing: one page containing all settings/configurations for the page regarding marketing. This includes SEO meta data fields and SEO functions. All functinos would be grouped in meaningfull sections on the page.
- Properties: same idea as Marketing, just have this one page where all the general page functionality is found, divided in to meaningfull sections.
- Show page: opens the current page in a new windows.
- Frontend editing: opens the current page in a new windows for frontend editing.
file: 2-dw-interface-page.jpg
Just showing a submenu for Add options.
file: 3-dw-interface-page-properties.jpg
The properties page containing the general settings for a page grouped in sections.
file: 4-dw-interface-item-content.jpg
In this wireframe the user has clicked an item in the page content overview, so here we see the content settings for the item. Again, the biggest difference is the second menu bar at the top. It shows the page menu bar above as greyed out, but it is there to show the user, that you have clicked your way down one step further in the system. The item menu also has a clear "back to page" link. However this introduces an issue, in my opinion, because on the one hand I feel it is a good way of indicating the context for the user, but at the same time, the functionality would be somewhat similar to clicking "Cancel" below. So maybe it can be left out. But I just like the idea of having a visual, clickable option for context navigation, rather than "Cancel" because that doesn't inform the user that you go back up to page context. The field sets below can be collapsed with a clear tab and works just as item fields do now.
That's it, I hope this was somewhat useful for you guys, and that the community will continue to provide feedback and ideas for you, so we can get this optimization show on the road! :-)
Oh, and by the way, this mockup uses Fontawesome for icons. Please think about using Fontawesome and flat design in the optimized back-end interface. It would be so awesome.
Have a great easter :-)
