Jump to content

Editor Usability in the ProcessWire Admin interface

Recommended Posts

I find that editors with low web skills have difficulties working with the ProcessWire Admin interface. I am here talking about users who rarely write text and with low web skills. Also, my customers are Danish but see the ProcessWire Admin interface in English -- they are not all comfortable working in an English user interface (I can fix this in part by adding fields in Danish).

The main reason for the usability challenges is that users are forced to work in the tree structure in the ProcessWire Admin interface as it is today. The Page tree can be hard to comprehend when getting back to Admin after 2 months or more.

Below I offer observations on what I have seen customers do in the user interface, and based on that I suggest how usability may be improved.

Note, this post is written in a positive spirit with the intention to improve ProcessWire.

Observed user behavior

1. New pages. Users incorrectly place new pages at root level when they correctly should have been placed in - say - the "News" section.

  • Observed behavior: Users log in to Admin, immediately see the "New" link and create a new page. The link is incorrectly being placed at root level.
  • Correct behavior: Users log in to Admin, click "News", click "new" (next to "News").
  • Training users in doing the right thing is also hard. It is hard to explain users to: "1) log in to Admin, 2) click "News", 3) click "new" (next to the News link)."
  • As a possible workaround, I can lock down the content types that can be created from the root level, but in my view that should not be stricly necessary.

2. Overview. Users find the admin interface hard to understand when getting back to it after 2 months. Some of the questions users (and me too) ask themselves are: "What can I do here?", "Under which section (segment1 nodes) should I add my new Product or Event?"

Possible workaround: The web designer can spend time writing a guide, but I guess most would prefer that the admin interface answered the question "What can I do here?" -- possibly with a written instruction.

3. Clutter in the tree structure. As a web designer I have to store categories andother system nodes in a tree structure that is visible to end users. I create a "Value lists" node and put pages that I use in different Select boxes in other pages -- editorial users really don't need to see these "Value lists" in the main view.

Better: Move system information to a secondary area as in many other CMSes (see suggestion 3 below).

4. User error risks. Users can mess up the entire site structure if they start moving around with root-level pages. For instance, Navigation will suffer when using the Simple Navigation module. Also entire sections can be deleted / moved by editors.

Suggested Solutions

1. Buttons. As a web designer it would be nice to have the option to create "buttons" on the admin start page (/processwire/page/).

Example Buttons:

  • "New Article" - clicking the button will create a new page of type "Article" and place it under a specified parent page ("/articles").
  • "New Event"
  • "New Product"
  • "New Solution"
  • "New Employee"

2. Apps. Pretend that the website contain many "apps". As a web designer I can create such "apps" in Admin. Apps can be as simple as a shortcut in a menu (right menu as seen here).
3. "Site system trees". The Page tree contain two very different types of data. The first is content, the next is "system nodes". I would like to move the "system nodes" to one or more "site system trees".

As a web designer I can create a "system tree" for the site that contain non-content nodes. A link to the "site system tree" can be placed in the admin navigation (Pages, Setup, Modules, Access). Access to "system trees" can be restricted. My "system tree(s)" would contain information such as:

  • Blocks
  • Snippets
  • Menus
  • Site settings
  • Search
  • Admin
  • 404 Page Not Found
  • Trash

PS: How do I create "Admin apps" in the Admin left menu (as in this example)?

  • Like 1

Share this post

Link to post
Share on other sites

I have observed clients having issues knowing which "New" button to use, but I'm not sure how this could be made more intuitive. It would be interesting to hear some different ideas.

That said, the page tree is very intuitive, in my opinion. Most CMSs require you to do a two step process: create a page in some sort of massive "content bin" and then create a menu item that links to it. Usually the interface for creating the item is far less elegant than PW's page tree. In my experience, PW is a breath of fresh air for clients.

You do have to put in some effort if you want to make the experience as seamless for clients as possible. In my opinion, the "Family" settings for templates is not optional. You really need to put the time in to set these-- Clients shouldn't be able to create a blog entry or news article outside of the blog or news section. That's just asking for trouble!

Also, you can do a lot by setting access/permissions on your templates. You can prevent certain pages from being modified, while still allowing access to modify their children by giving the child templates different access settings. You can also lock pages. I really recommend playing around with some of these settings and logging in with your editor permissions to test them out until you get things fool-proof.

  • Like 8

Share this post

Link to post
Share on other sites

I think most of your issues are gone when you understand a little more about processwire. I would suggest to install a 'play install' where you can mess around and are allowed to break anything without issues. Especially take a look at permissions and roles and all template settings.  

1. New pages.

solution: Set your family settings right in the admin.

2. Overview.

Again family settings & give examples and explanation at field level.

3. Clutter in the tree structure. 

Put settings in /processwire/settings/ folder (Don't forget te set access for settings folder)

4. User error risks.

Setup proper permissions and it's solved.

1. Buttons.

Already there (parental relation in template settings)

PS: How do I create "apps" nav items a left menu (example)?
Create a page under /processwire/
  • Like 8

Share this post

Link to post
Share on other sites

Just short from mobile....;-)

Processors provide all option to create a simple user interface....build for every specific project separate....

Just some points on this to search some reading stufff...may I link it later..

- family tab settings

- template permissions

- make intensive use of the "add new" button....my clients log in after two months and click just....add new select article/page/document...

- even create a simple administration dashboard is easy like creating a template for the backend....there are some modules on this topic...

- its even possible to change the process of the "pagelisttree" to use Lister pro module

......much more option on this and every turn is on the one who use and setup the system for the client.... ;-)

Regards mr-fan

  • Like 3

Share this post

Link to post
Share on other sites

Martjin was faster while I'm fighting with my touch screen....:-(

Just ask exactly your usecases with a good description and there will be a solution ....the administration interface from pw is just API and pages like everything else...

  • Like 1

Share this post

Link to post
Share on other sites

I would also like to add to what thetuningspoon posted.

The bigest problem that I have observed with develpopeing any application is where users not knowledgeable in the technology request more and more 'one-click' solutions to the tasks they wish to perform. I'm not knocking these users at all -- We all started with no understanding (and we should never forget that). I personally, however, do not think it is the correct approach to modify PW in this manner. It is a framework upon which we as developers build an application, and subsequently a simple-to-use interface. I only ever intend to expose the PW administration to any of my clients that are qualified, otherwise, I will construct an interface for them to use.

As developers, our target audiences have a wide range of skills; from no skill at all, to the skill levels seen from the members of this forum (excluding myself). Although PW is presented as usuable by skill levels between this range, I think the responsibility lies with the user to learn the platform we recommend (assuming we pick the platform that best fits their capability and functional requirements). If they are unable or unwilling, then they might want to stick with - *shudder* - wordpress.  :)  Being new to ProcessWire myself, I am learning more and more about its capabilities, and my capabilities using it, as my framework of choice. Does PW fit every requirement? Of course not. But, in my humble opinion, it is the most robust and developer-friendly CMF I have found.

  • Like 3

Share this post

Link to post
Share on other sites

Dagnabit! Y'all have quick trigger fingers. :)

  • Like 2

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By sambadave
      Hi there
      Short version of question
      Let's say I have a page in the admin that contains a field... Is it possible to output the content from that field on another page in the admin? Almost like a reference.
      Longer version of question (with example)
      A house builder with multiple (60+) developments. They want to be able to create notices/messages that can be added to one or many developments. Handy for things like regional covid lockdowns or temporary office closures due to bad weather.
      My approach for the admin editing options:
      Add each message to each development
      Pros: You edit the message on the development page in context
      Cons: Very time consuming and repetitive if the same message needs to be applied to 60+ developments
        Control all the messages from one admin page and say which development each message should be applied to
      Pros: Easier to add/remove messages to more than one development at a time. Control all messages from one place.
      Cons: Content is not added on development page, which is where typical admin users may expect to find it I went for option 2 due to flexibility, and created a page within the admin for global development notices. This contains a repeater with:
      Field for message to display Checkbox list of all developments. The user can select which ones to apply each message to It's working really well but the only thing is that if the user goes to a specific development in the admin, the relevant messages aren't displayed in context (as they aren't edited on that page and instead on the global development notices page)... which may cause confusion when a new staff member / content admin tries to edit the text but there is no field when they go to the development admin page where they expect to see it...
      I don't require the message(s) to also be editable on the development page, but I wondered if there was a nice way to show it/them somehow. I feel like I am missing something really simple as I'm sure ProcessWire will have a nice way of achieving this, or maybe there are field settings that allow this kind of thing to happen?
      Any ideas on approaches or similar experiences would be much appreciated, even if it is just a much simpler example with the content from one field being shown on another admin page to get the ball rolling.
      Thanks in advance for any advice :)
    • By humanafterall
      I would like to set an admin template to 'https only' as recommended in the Processwire security docs.
      However if I do this it forces this setting locally too, resulting in https://localhost requests which result in an error page.
      Is there a simple way round this? Setting https for templates in the config?
    • By DanielKit
      Hi. I'm currently stuck at the login page in my project. Once I enter my admin username and my password and press login, nothing happens. The page just reloads. However, the URL changes from http://myipaddress/processwire to http://myipaddress/processwire/?login=1. I've checked all of my server settings, and to my knowledge, all seems to be fine there. I don't know where to go from here.. Thanks in advance!
    • By modifiedcontent
      Small annoyance: I get a horizontal scrollbar in UIkit admin area - or actually Admin Theme Boss based on Uikit 3. I tried to fix it with CSS, but had trouble isolating/targeting it and don't want to mess with module or core files. I think this issue has been reported before. Is there a recommended fix? 
    • By codevark
      The Minimal Site works fine, but if I try to login as admin, I have no idea what the credentials are.
      I did not do the "install" process myself. The OVA came with everything set up, but there's no mention of the PW admin credentials being set to some initial value.
      Wondering if anyone else has tried the Bitnami OVA and if there's a simple answer.
  • Create New...