Over the last few months we have been working with Jared Ponchot, on redesigning the create content page. Based on our research and further discussion we chose a direction for which we developed more detailed designs.
The research primary conclusions that we applied are:
- Keep the current approach of listing content fields in the main area but look into more ways to group related fields beyond fieldsets.
- Rework the vertical tabs pattern into a less horizontal space consuming sidebar. (And look into applying a similar sidebar concept to other admin screens.)
- Move primary publishing options out of these tabs and position them closer to the Publish/Save actions.
The model below gives a good idea of how this works out in terms of placement of actual interface elements.
During this process, Jared Ponch created visual designs as shown below. Together with Bojhan and Roy each iteration was reviewed and researched further where needed. The sources of some of these iterations are attached.
We researched existing systems, contrib and various custom Drupal content creation screens, from which we brainstormed loads of ideas - we have a few of those drawings listed below.
Applying the design model
The first thing we did is introduce the concept of a sidebar that holds meta configuration that is now contained in the vertical tabs. To avoid taking too much space, a accordion pattern would work best. It allows for complex forms to scale vertically and lets short forms be easily collapsed/closed.
As you can see in the concept above, this allows for a whole slew of additional designs from moving the position of our buttons to showing one or more tabs in an expanded state from default.
The major issue we saw, is that this introduces a visually very heavy sidebar which distracts attention from the content area. In the next iterations we focused on placement of the buttons and making the sidebar less visually prominent.
As you can see, Jared also applied significant changes to the visual styling of the Seven admin theme.
Placement of buttons and publishing options
Next, we focussed on the placement of the buttons and publishing options. As noted in the research these two are currently too disconnected which causes major usability issues.
One of the patterns we noticed from looking at other systems is having the current publishing state (published, unpublished) of the content item close to the Save button.
This assumes that in the future we will have more states than just published and unpublished - we hope improvement on the content staging front will make this happen.
Above are various ideas around button placement and display of publishing options.
- This example has the buttons in the sidebar, using a background effect you see that clicking save means you publish your changes. Using a dropdown here instead of separate buttons, lets us to scale this to N number of publishing states. The obvious advantage of this placement is that its directly in your view and hard to miss. Which is also the biggest drawback, its visual prominence distracts from the content fields.
- Another idea we explored in our research is placing the buttons in the shortcut bar. This clearly separates the forms you have to work with from the Save action. This creates a dedicated space where you can expect buttons to show up. Systems like Joomla, Hippo, ModX (links are images) do this too. A downside is that it’s an unusual web pattern.
- This example puts the buttons at the bottom and adds some visual styling to seperate it more clearly from the content fields. This is how we already do things across core. By applying a bit more distinct styling we increase its visual prominence. The advantage is that this is an expected pattern for many. The downside is it being visually less prominent in the layout of the page, likely out of the initial view port.
These initial explorations of where we could place these buttons seemed to favor either 1, or 3. We wanted to explore 1 further, to see if we could incorporate more publishing options - something that would be far harder to do in option 3.
Publishing options
You can see a few explorations below, incorporating more editorial workflow configuration into the area. Much of this was inspired by reviewing contrib modules doing this, for example scheduler and workflow.
One of the interesting things that we found is that we can bring these settings more together without requiring significantly more vertical or horizontal space. Even if we don’t get many content staging improvements in Drupal 8, contrib modules could implement the patterns shown above for scheduling, revisioning and staging content in the create content UI.
These explorations created the idea of separating the top part of the sidebar from the scalable accordion pattern. It made sense to consider the top ‘publishing’ zone as an area where very explicitly designed (customized) publishing options can be added. The second ‘settings’ zone could then make use of the more generic accordion pattern to capture all other items. This primarily to benefit the top publishing information to stand out more.
The explorations where followed by more detailed designs, where we explored how we could incorporate more configuration into this publishing area.
We concluded in this iteration that although there is merit to placing more configuration in the sidebar top it is also gets distracting. It does seem to make sense to explicitly organize this sidebar into two areas. The top zone for the primary publishing functionality, the bottom zone for the accordion with all the other settings and config forms.
We imagine that contrib solutions could then be configured to show either in the top or bottom zone. To become part of the top zone would require a very precise and minimal UI. You really want that area to stay calm and just not look like its all a lot of work. To add functionality to the accordion would allow for a bit more UI noise as most of it would initially be hidden from sight. This is not to say we should lower our standards, but lets be pragmatic here.
Extending Seven theme: detailed reviews
On top of these more fundamental iterations we also did a lot of smaller changes to the visual styling of Seven. Mark Boultons original design deliberately focussed on toning down most of the page elements to create a sense of calmness and introduce a clear seperation between backend (Seven) and the actual front-end (your site) which is to take central stage. There are some issues with how Seven styles certain page elements like the overlay close button, the secondary/primary tabs and the lack of button state styling for example, but we do want to maintain the established visual design direction.
For this we have done various rounds of more detailed feedback, from thoughts on the actual visual styling, to concerns from an accessibility and legibility perspective. Below are two examples of this type of feedback.
While working on these visual details we continued to iterate on:
- Reducing the complexity of the top of the sidebar. We started out with quite a lot of bells and whistles there but continued to move towards more static information to reduce the visual clutter.
- Placement of buttons at the bottom.
- Stress-testing the accordion pattern with contrib projects that add lots of options.
- Styling of individual form elements.
Where we are now
We wanted to get our final ideas out before Denver, to give our perspective to a lot of the discussion around our content creation experience. The proposal below is not final, there are still a lot of parts that we need to discuss and iterate further upon. On the other hand, we hope this post has shown that we have a solid basis to work with here.
Below is the latest version of our design for the content creation page. A .PSD of it is attached.
To recap, the main changes we propose are :
- Introduce a new grouping pattern in the form of a sidebar, to allow for easier scanning of settings and avoid the space-consuming vertical tabs.
- Placing the primary publishing options closer to the action of saving.
- Update the look & feel of Seven to solve a number of visual design issues.
- Introduce a more consistent pattern for actions.
We would love to know your thoughts. What do you think works well? What do you think needs further investigation?
AttachmentSize
create-content-small.jpg83.14 KB
8_add-content_b.jpg217.54 KB
8_add-content_d.jpg230.66 KB
placement1.jpg22.97 KB
placement2.jpg23.31 KB
8_add-content_e.jpg233.99 KB
8_add-content_f.jpg243.19 KB
placement3.jpg24.07 KB
Joomla.png106.59 KB
ModX.png138.58 KB
Hippo.png169.96 KB
5-possible-workflow-states-small.jpg37.97 KB
5-possible-workflow-states.jpg54.96 KB
Publish-settings.png29.81 KB
sidebar-publishing-big-save.jpg36.17 KB
review-jponch-v1-small.jpg62.24 KB
review-jponch-v1-big.jpg284.07 KB
siebar-detailed-review.jpg101.21 KB
final-design-small.jpg127.1 KB
Latest.jpg230.67 KB
latest-iteration-contentcreation.psd4.05 MB
publishing-horizontal.png83.63 KB
