Achieving a state-of-the-art backend design for Neos

Categories: Community Created by Rasmus Skjoldan
A community report about the recent process of talking to expert advisors about the TYPO3 Neos User Experience plan and how that has improved the backend design.

Neos UX consultancy


In May this year, I asked the EAB for a small budget for Neos user experience consultancy which the EAB granted. So what was this small project about? In the budget application I summarized it like this:
 “It is a goal of the project to make sure the overall Neos experience across all user scenarios is as changeable and extensible as possible, making sure we implicitly dictate only the most key features and embedded processes of the UI. In other words, to make sure Neos gets as consistent, beautiful, personalizable and unbloated interface as possible.” 
The project aimed to primarily improve not the 1.0 release of Neos UI – but beyond 1.0. We wanted to make sure that 1.0 had the best possible, strategic UX foundation. In order to make sure that the screen real-estate and user interface of 1.0 gets room for the planned, future features – then 1.0 urgently needed to be extendable in the right places – all following a more strategic product vision.  My own time has all been sponsored by my employer, <link http: moc.net>MOC. Travel costs and consultancy fees were covered by the Association budget. With this report, the consultancy project is finalized.
Upon being approached by Rasmus for a small, extraordinary budget post, mid-year, for advancing the user experience and interface for TYPO3 Neos, the EAB decided to grant a small budget for this. It was clear, though, that the interface of the previous alpha releases of Neos still lacked a broader user experience strategy to guide the structure, look, and feel of the new backend. Figuring out how to make the new product a joy to use naturally requires strategic thinking – and not just visual design work. Funding outside consultants via Rasmus’ project, made it possible for the EAB to provide the means for providing input at a critical point in the development of Neos.
– Jan-Hendrik on behalf of the EAB


What has been done


This consultancy project was set up like this:
  • Meet with outside experts and make them challenge our current UX plans
  • Relay advice from consultants back to the Neos team
  • Improve UX planning based on the advice and subsequently improve the UI
A secondary goal of the project has been to increase awareness of Neos and reach more out to the UX and content strategy community. I set up 3 meetings:
  • Leisa Reichelt, Head of User Research at the Government Digital Service in the Cabinet Office, London
  • Yat Hui of Urban Beings, urban planning architect for the Greater London Authority
  • Christoph Lüscher, partner of Information Architects Inc., Zürich
In parallel to these 3 meetings, I communicated intensively with a very broad range of people both inside the TYPO3 community and outside. Apart from the Neos team members, other TYPO3-insiders such as Alain Veuve, Daniel Hinderink, Kian Gould and many others contributed greatly. As I have a seat in the network of J.Boye <link http: jboye.com groups group-list cms-expert-group>CMS Expert Group Europe, it was also a natural place to seek advice from both competing CMSes and vendor-neutral client advisors like <link http: jboye.com>Janus Boye from Denmark and Perttu Tolvanen from <link http: northpatrol.com>North Patrol, Finland. The parallel research led to the <link http: neos.typo3.org ux future>2017 WCM Forecast covered on <link http: www.cmswire.com cms customer-experience wcm-insights-what-web-content-management-will-look-like-by-2017-021869.php>CMS Wire - and mentioned in many other places. Topics of the consultancy meetings included a broad range:
  • Presentation layer and content editing/storage - decoupled or closer related?
  • Multi-channel content delivery
  • Device previews
  • Content-first approaches
  • Process-flexibility of the CMS
  • Collaborative content authoring
  • The language barrier of CMSes
  • Wayfinding in user interfaces
  • Moderation capabilities needed by media organizations
  • Social media integration
  • Prototype tool functionalities in the CMS
  • Long-lived versus short-lived content
  • Needs of marketing-driven enterprises
  • Targeted, differentiated user experiences and content
Many more topics were discussed to make sure we covered both strategic aspects of the product vision and the more detailed work of user interfaces, integration, editing workflows, localization, AB-testing, SEO and so on. 

Results

The organization of the backend UI has been greatly improved based on conclusions after the meetings. It would take a seperate article to explain the entire structure and plan of the Neos interface but some of the specific results that came out of the consultancy meetings are:
  • Main distinction between long-lived and short-lived content which we need to handle in very different ways in the UI
  • Templates are shorter-lived entities and must be treated as such
  • Social media and analytics integration is key and must reside in prominent places of the UI
  • Distraction-free writing has to be even more distraction-free than what we imagined (for journalists to really like it)
  • Auto-detection of content elements should properly wrap text (better guessing what's a header, sub, body, caption etc.)
  • Editing multi-channel-ready content must be coupled with better previewing UI’s
We gained many more insights which will find ways into our user experience planning and the specific UI's.  


The background story


While developing Neos, how do we keep up with the changes happening around us? When we started the TYPO3 5.0 Phoenix project, the CMS world was so different. Amazing UX/UI work for Phoenix was done by Jens Hoffmann and Björn Brockmann. They did truly awe-inspiring work. Let’s all sincerely thank them for that great effort! With Flow, we developed an application framework – instead of just plunging into building a new CMS right away. This framework now means that we can rearrange the building blocks today - to match the needs of today. But it naturally took time to build that. And meanwhile, the CMS world shifted and turned, evolved and revolved. That meant we had to let go of a lot of work. Not only design, UI or UX work – but also endless lines of code were dropped. Many times over even. Yet, this happened to other CMS projects, too - for both open and closed source. Just look to Magnolia CMS where <link http: www.betterfasterbigger.com why-magnolia-cms-version-5-is-like-no.html>Boris Kraft explains why it took time to deliver Magnolia 5:
“We have worked on Magnolia 5 for years, starting with early designs back in 2008. The reason it took so long is because the market for content management keeps changing rapidly.” 
Today, we’ve built a new CMS on top of the flexible TYPO3 Flow application framework. And today, we can start counting the months (instead of the years) until we can release the 1.0 version of Neos. That’s the way we’re making sure that we are delivering a relevant product that matches demands on delivery date.

How talk leads to better usability


Let me give you an example of how talking to some of these experts have led to direct changes in the UI. I sat down at a table with Leisa Reichelt in London and asked...

If I want to build a tool that helps the brain simultaneously publish to multiple unknown media independent from form, what are my options then? And what processes should I start to get closer to answering it?

Leisa: First, commit to multichannel!
Rasmus: Yeah, I want that, too. How should we start?
Leisa: Create an environment that makes people think in a better way.
Rasmus: Brilliant! How do I do that?
Leisa: Get people to think about content in a better more structured way


What Leisa really says here is: “Consider dropping WYSIWYG inline editing”. Here, my mind was about to explode - considering how much effort we had put into that feature and how widely it has been communicated as a killer feature of Neos. We talked about many other subjects - but to tell the story about how advice leads to product changes, I’ll explain what then happened after the meeting. I walked back to the hotel and wrote an insanely long mail to some of the developers on the Neos team. The subject included something like “the London voice of doom”. I rambled along the lines of: “Leisa tells us to consider killing WYSIWYG inline editing because it messes up the minds of our editors when they need to become experts in writing content for multiple channels.” Sebastian Kurfuerst answered:
“While you might want to throw away inline editing by default of the website, I think that we should/could use Inline Editing as well for more abstract representations of content, like the wireframe mode."
Suddenly it made perfect sense and we found a way to go forward with all what we already had. The simple dialogue led to 2 things: We discovered how blurry the definition of “inline editing” really is and that inline editing refers to very different things. People like Jeff Eaton has been thinking hard and long about this issue and explained brilliantly the different definitions in his writing on <link http: www.lullabot.com blog article inline-editing-and-cost-leaky-abstractions>Inline editing and the cost of leaky abstractions. The second result was a month-long UX process that led to the <link http: rasmusskjoldan.com post wysiftw>initial UI draft of how to structure editing modes and previews – which we now have a solid direction for. Remember, there are only very few reference points about this issue around us. Every CMS is struggling with these problems at the moment. If we do our job well in this area, then we might just be the ones who get copied. What happened in the process here was that we figured out when to use WYSIWYG inline editing and when to use inline editing in abstract views. It sounds so simple today – but it was a major head-ache before. We wouldn’t have had that clear distinctions between different parts of the interface had it not been for outsiders challenging our planning.

More input? 

So what do you think – should we continue meeting with outside experts to get them to challenge our plans? Personally, I think it has been a terrific way of tapping into the ressources of some of the best and brightest on the planet. Advisors like the ones we’ve met with don’t require a long briefing – they already know the problems intimately. That’s why I hope to keep doing this and keep approaching experts for both smaller sessions or longer periods of collaboration. I will look very much forward to hearing what others in the TYPO3 community think!

Even more background


About the consultancy project:

<link http: rasmusskjoldan.com post neos-ux-input>rasmusskjoldan.com/post/54426908820/neos-ux-input The UX masterplan of Neos:
<link http: neos.typo3.org ux uxmasterplan>neos.typo3.org/ux/uxmasterplan Visiting Information Architects:
<link http: robertlemke.com en blog typo3-neos-ux-information-architects-zuerich>robertlemke.com/en/blog/typo3-neos-ux-information-architects-zuerich
<link http: rasmusskjoldan.com post neos-meets-with-ia-and-talks-about-how-to-build-a-cms>rasmusskjoldan.com/post/56254662500/neos-meets-with-ia-and-talks-about-how-to-build-a-cms The 2017 WCM Forecast:
<link http: neos.typo3.org ux future>neos.typo3.org/ux/future
<link http: www.slideshare.net rasmusskjoldan>slideshare.net/rasmusskjoldan/2017-wcm
<link http: www.cmswire.com cms customer-experience wcm-insights-what-web-content-management-will-look-like-by-2017-021869.php>cmswire.com/cms/customer-experience/wcm-insights-what-web-content-management-will-look-like-by-2017-021869.php On WYSIWYG inline editing and editing/preview in TYPO3 Neos:
<link http: rasmusskjoldan.com post wysiftw>rasmusskjoldan.com/post/58364140673/wysiftw 
Later commented by Mark Boulton at
<link http: www.markboulton.co.uk journal wysiwtfftwomg>markboulton.co.uk/journal/wysiwtfftwomg