Wagtail dashboard enhancements

[hminnovation]

The Wagtail dashboard currently doesn't deliver as much value as it could do given, after login, that it's the first thing a user sees.

I think this relates to ticket #575, and the idea of being a next step after #1891

No solutions here, and is based around what I would find beneficial when I'm working as an editor in Wagtail. I wanted to share these to start the conversation around this and what others felt should be on the dashboard.

Thoughts

Unpopulated

Populated

Annotated version

Unpopulated

1. Site name echoed, removing the string Wagtail CMS;
2. Changing icon for user without Gravatar. Personally feel the smiley is more gender neutral than a user represented by head and shoulder. Also everyone likes smiling faces right?
3. Guides to Wagtail
4. If Gravatar hasn't been changed show a notice
5. Text to show if no recent edits made (would need some more thought)
6. Text to show if no recent site activity. I'm not sure it's possible for there to never have been recent site activity (since we create a homepage on install) but perhaps we can work around that? It's a quote from Clueless so it definitely needs some more thought
7. A block highlighting that this dashboard is extendable. Since this is a CMS for developers I think it's good to make sure we clarify elements like this are extensible

Populated

1. Site name echoed, removing the string Wagtail CMS;
2. Gravatar (if populated) as main focal point to personalise the page for the user;
3. Editor and developer guides, along with Wagtail info, always visible;
4. Hover over to reveal action buttons. Information arrange vertically (rather than in columns) to aid scannability
5. Recent edits and recent activity have same height as one another for consistency and make arranging the elements on the page easier. I was thinking that clicking reveal more would show a maximum of eight recent items in total (e.g. three more than currently being shown here)
6. Vague representation of a user installed block modeled loosely on @tomdyson's https://github.com/tomdyson/wagalytics

Populated version using existing style guide

Above a rough view of what it could look like if implemented using the existing UI styleguide.

[timorieber]

This would add huge value to the dashboard. And really nice ui drafts...

[alexgleason]

Awesome work!

Personally feel the smiley is more gender neutral than a user represented by head and shoulder. Also everyone likes smiling faces right?

This is the best reasoning.

[tmsndrs]

Really like the idea of improving the dash. For me the 'vital statistics' aren't really that helpful here. hierarchically I would reduce these a whole bunch. As an editor the things I think would be most useful would be:

• visitor numbers
• top referrals
• top site search terms
• social sharing
• top page views (with some sense of device type maybe?)

alerts for engagement drop off or spikes, 404 errors etc

each for a definable time period with sensible defaults (last seven days feels appropriate to me).

As an editor I would want to look at these daily and having them in the dash would add massive value to Wagtail. One thing I find with Google Analytics is that many editors are often scared by the complexity and not sure how to interpret it but these simple metrics would support people in creating much better content and UX. I think one approach would be to only include things that are instantly actionable from a content perspective and use analytics for the long term analysis.

If we could also have some automated 'human' tips similar to those on Filament.io that would be awesome.

Equally this is the sort of stuff I've had to spend a lot of time pulling off into SMT reports in the past and if we could help editors automate this type of thing that would be great.

The main thing here will be finding the appropriate Wagtail balance of simple, beautiful but also immensely valuable so we'll want to avoid overwhelming editors with numbers and lists.

One other thing that's missing from these UI designs is the moderation section.

[SalahAdDin]

👍
@tomdyson Have an analytics package, so, you could make and packages, if torchbox staff don't want make the dash more customizable.

[thibaudcolas]

For anyone wanting to work on this, we’ve recently discussed similar topics in a team meeting and @allcaps summarized our take in #1891 (comment).

To make progress on this issue in particular, I would suggest to treat the following separately:

• Creating new panels for the dashboard
• Improving Wagtail’s support for custom panels in ways that make what’s suggested this possible (if not possible already)
• Redesigning the Wagtail dashboard with its existing built-in and custom panels

In particular, personally I would find it valuable already to see a blog post / recipe / documentation on how to make a custom panel to start with.

[thibaudcolas]

I’m going to convert this to a Discussion now, to give this a bit more visibility, and reflect the fact there isn’t a really clear point at which this will be "done".

[thibaudcolas]

👋 for anyone interested in this, just wanted to mention we’re intending to improve the dashboard in the upcoming August release of Wagtail. We’ve not yet explored which improvements would be most beneficial – feedback is most welcome.

[thibaudcolas]

From @vossisboss in v5.1* roadmap discussions:

I also am glad the dashboard is getting some love. Long-term, I think it would be great to make the dashboard "editable" so that people can pick and choose the items/views that are most relevant to their daily workflows.

For example, if I could pick and choose what I saw, I would likely not include the stats with the number of pages and such. That is definitely useful information for me as someone who spends a lot of time on the website, but it isn't information I track on a daily basis. Of the current dashboard offerings, I would most likely include "Most recent edits" on my board since I use that all the time, and the pages awaiting moderation. I don't find the "locked pages" item useful at all and it takes up unnecessary space. I wish I could dismiss that part of the dashboard.

I'm suggesting that we lay the groundwork for flexibility in the dashboard because ultimately every user is going to have different needs and I think people would appreciate being able to tailor their dashboard views. I'm not sure how many package authors make the effort to extend the dashboard now, but they might also appreciate having a way to extend the dashboard and give people a way to see things that they need (like article analytics).

[cnk]

I oversee a number of web sites but am not primarily a content producer on any of them. What I want to know when I log into a site is what pages where edited most recently (by anyone, not just me) and when was the last time any of the site users have logged in.

[benenright]

Here's an update on how we have been exploring ways in which the dashboard can be enhanced.

• Area 1: Content Finding & Creation

  • Explored patterns similar to ‘adding blocks’ flyout creating/adding content (pages, snippets, etc.). aswell as a prominent search
  • Identified potential issues in a multi-site setup with this approach though - ie. what site am I searching? (parked this for now since majority of sites are not multi-site)

• Area 2: Reporting

  • While perhaps not for the MVP, explored integrating content, sustainability, and a11y checkers to highlight improvable content (ref: content quality checkers discussion).

• Area 3: Attention & Task Management

  • Developed a "things that need my attention" section with a page list tailored for different user types (admin, moderator, editor, etc.) and surfaced key actions or a dropdown for ‘respond’ options. Interesting exploring the cross-over between 'my pages in a workflow that need action (eg 'changes requested') (editor perspective) vs 'pages in a workflow awaiting action/moderation etc' (more a moderator's perspective)

• User Interface Enhancements

  • Incorporated a simplified top area for acc. shortcuts, settings access, avatar changing, and a link to the editor’s guide.
  • Emerging a “workflow first” concept, especially for moderators, to prominently show pages that require attention and their position in a workflow.
  • Think we're doing a better job of representing a page's status within a workflow in the final screen below but def still room for improvement here

• Consistency and Future Projections

  • Discussed follow-on work to enhance the visual language consistency across the Wagtail admin for workflows.
  • The first release is targeted to be very straightforward and simple.
  • Anticipated the future necessity for customisable panels, catering both to developers building the site and to individual user preferences, adhering to Wagtail’s principle of flexibility.

[lb-]

I love the 'add content' idea, very doable and also super convenient. Maybe we can call it 'Create', Jira has a bit Create button at the top / on their 'dashboard like' page and it's super useful.

Another idea for Area 3: Attention & Task Management could be the concept of starred pages or content in Wagtail, for my day to day usage of Confluence I find it incredibly useful to be able to star pages or items and see a list of these conveniently.

One additional reminder for designs is the usage of alerts in the dashboard page, for new upgrades available (admins only) and also when we highlight new features for all users. I am not sure we are using this every single release but it is something that we call attention to on this page.

[vossisboss]

Thank you for this update Ben! This is a really great start.

I've already posted my thoughts on the content quality stuff over here. Please make that item something that can be switched on and off as well. In the current iteration, it looks like it is a mandatory thing and cannot be removed from the dashboard.

The rest of these options look really useful to me! Having a more prominent search bar that could be added to the dashboard would definitely be an improvement over the current design. Having access to Recent edits, tasks, and that big beautiful plus button for quickly adding new content would be wonderful! I love that the design allows room for adding or removing what is most useful too.

I like @lb- 's idea of being able to Star or bookmark pages too. It would be very helpful to get to the pages that I update regularly really quickly.

[Scotchester]

A very minor comment about showing the user's role in the top right: Users can belong to multiple groups, so this could get unwieldy.

[thibaudcolas]

Suggestion by @Azemblage in #11155 to surface CMS comments on the dashboard. In particular if we had comments with mentions to specific users (expanding upon the idea of the dashboard as an "inbox" of sorts). Currently I don’t believe we surface comments anywhere in the UI except from the editing experience. Even just having a count in some places (page listings? workflow-related listings?) could be a nice improvement.

[lb-]

Drag & Drop / Reordering of panels

This was discussed briefly at a core team meeting but just wanted to add a few notes / sub-thread about this.

• PR adding sorting/re-ordering functionality Migrate re-ordering to stimulus controller w-sortable #11250 - this will make it easier to add drag/drop functionality in other places later (such as the dashboard)
• This would be doable, we could build this in a similar way to how we store the 'dismissed' items for Wagtail updates attached to the user model.
• Big question though, is this really wanted by users? I know these things are interesting to build but many users may not care about this ability.

[yigakpoa]

Is it okay if i research on best practices and how other projects create accessible charts?

[thibaudcolas]

Yes @yigakpoa, I think so! I proposed this as a good design-led accessibility task for @Toriasdesign too, so make sure to check in with her.

We’re specifically interested in the types of "numbers over time" charts that would be used for this new dashboard design (so sparklines in particular). Aside from that, I don’t think there’ll be too much that’s specific to Wagtail here.

[thibaudcolas]

Sharing notes from @yigakpoa for future reference: Wagtail: how other projects create Accessibility Charts.

I’ve spent a bit more time on this from my end and have identified Core Web Vitals as a type of data we’d likely want to chart in a Wagtail UI. So LCP is in seconds, CLS is a unitless factor between 0 and 0.5 (ish), and IN is in milliseconds.