UX and TYPO3—the Challenges for the Next Five Years

So our goal was to first move from level 3 to level 4. We decided to: 

1. Found a dedicated team (done) 
2. Build a global UX picture (done)
3. Integrate UX tasks into workflows (WIP)
4. Set up metrics to track results (WIP)

This is only level 4. TYPO3 UX will be structured but still not fully integrated. We still have work to do to reach level 5.

What Do we Mean by a Building UX Strategy?

To handle the execution aspect of a product’s user experience, we need people, processes and tools. But without a strategy, we are only able to fix UX issues, improve existing features, and react to existing problems. Without the bigger picture, we are missing the meaning of all our UX decisions. 

We waste time and resources by working on independent pieces of a product without converging in a well-defined direction. Without a UX global strategy, we can probably improve pieces of the user experience, but a great List module, or a powerful translation system will never make a good Content Management System as a whole.

The UX strategy is the foundation on which we find meaning in the execution. The vision tells us where we want to go and more importantly why. Then, we can set the goals and see how we get there. Finally, we can make a real plan, and decide who does what and when.

What Should the TYPO3 User Experience Be?

If you go to the home page of typo3.com or typo3.org, the first word you read to define your favorite CMS is Professional. This word is important, because it creates expectations. So our users should have a professional experience when using TYPO3? How do we translate this in terms of content management? 

When we think professional, we think:

• High quality: The generated contents respect the standards, the best practices, and are secured. The user can trust the information displayed, the tool does not mislead.
• Productivity: The user can handle a large amount of websites, languages, pages, contents, or editors.
• Efficiency: The user can perform tasks efficiently, whether they are one-off tasks or mass actions. Content is the value that the user is generating, so they must be able to create it fast and easily.

To sum it all up in one sentence: Users get more results with less effort and less time.

The good news is that it has exactly the same definition for sustainability! And we know that tomorrow, nobody will want to work with a tool that does not take this matter seriously.

What Is the TYPO3 UX Big Picture?

Have you ever heard of Kaizen? For those who don't know, here is a very short definition: The Japanese word kaizen means change for better, it is a continuous improvement set of methods that consists in making important changes by small steps. One of the Kaizen tools is the 5S. This technique is designed for efficiency and productivity, while ensuring a pleasant working climate. 

Like all methods, if it’s followed literally without common sense, it can become a creativity killer. That's not what we want to do, instead we will use this method as an inspiration and translate it into a guidance for our users. The 5S main goal is to maintain a pleasant and efficient professional working area, and this is exactly what we want for our users.

The first S, SEIRI, is about giving up the useless. For example, we want editors to stop keeping useless pages and content, and stop hiding everything instead of deleting.

The second S, SEITON, is about ordering the useful. For example, an editor should have action buttons or modules that they most often need to be more accessible than the others.

The third S, SEISO, is about keeping a fresh working area. Because there is no dust in a virtual working space, in terms of UX we can translate that to keeping a fresh look-and-feel. So that the users keep enjoying working with modern tools.

The fourth S, SEIKETSU, is about creating standards, guiding the end-users to follow good processes. For example, a developer shouldn’t wonder how to build a specific module UI, and should have components ready to use that will follow the overall TYPO3 UX standards. Then editors won’t mess up their working area because of a poorly designed interface.

Then, the fifth S, SHITSUKE, is about sustaining the processes. For example, editors could have dashboard widgets tracking records that haven’t been used for a long time that suggest having a look at them.

UX work is based on concepts. When we want to create, improve or change something, we call it a concept. So we started to find concept categories (or thematics) that would be consistent with our main goals. It means that UX concepts that don’t fit into these goals won’t be our priority for the next TYPO3 version.

The three thematics are: 

• Keep the House Clean, to help end-users not mess up the TYPO3 backend. 
• Better use of space, to help end-users work efficiently. 
• Keep a fresh look and feel, to enure that-end users will enjoy using the TYPO3 backend.

Another task that is longer term and will continue through the releases is to gradually build a component system for developers and integrators.

Then, as good practices are implemented in the backend, the dashboard widgets will finally make sense, and help users sustain their TYPO3 backend cleanliness.

How Do we Work?

It always starts with a problem to solve. If your idea isn’t born from a problem to solve, you may not improve the UX. If we consider that this problem fits in our priorities and topics, we start some UX research first to answer the most important question: Why? For example: “Why does a user prefer to hide and keep their content rather than deleting it?”

Then, we fill a table with 10 Usability Heuristics for User Interface Design  to help us gather all the interface issues and possible improvements. When this concept document is ready enough, we can start with drawing mockups if needed, or directly propose a solution.

Annett & Rachel presented a concrete example of our UX workflow during the TYPO3 Developer Days 2022. 

How Do You Fit in Here?

Even if there is a UX Team, you are part of the project. As a Developer, Designer or Integrator be aware that you also influence the backend UX. 

So what can you do? As a developer, you can use the existing official Styleguide extension when you create any backend UI. As an Integrator, when you think about your editor workflow, you can consider the consistency with the existing core modules. 

If you are not sure, you can ask anytime in the #cig-ux TYPO3 Slack channel. We are always interested in discussions about possible improvements and would like to get in contact with you. If you find some inconsistencies in the current behavior, you could help us to create patches for those issues. 

If you are interested in this topic but you don’t feel like a UX expert, please do not hesitate to contact us, we are always searching for people. 

We need you!

Useful Links

• UX and TYPO3 presentation from TYPO3 Developer Days 2022
• The TYPO3 UX Team page   
• UX Maturity Model from NN Group
• Integrating Sustainability and Lean: SLIM Method and Enterprise Game Proposed PDF 
• 5S Methodology (Wikipedia)
• Ten usability heuristics from NN Group
• “If I press delete, it’s gone” — User Understanding of Online Data Deletion and Expiration PDF
• From digital amnesia to the augmented mind PDF
• Structured Content Initiative—What happened in April? The survey results!  
• https://ux-testing.snowflake.ch/typo3   (ux1/ux1)
• TYPO3 UX Page Module Pilot