TYPO3 User eXperience Week 2014 - Full report on T3UXW14
October 06, 2014
Category: Community, Top News
Author: T3UXW14 TEAM
Keywords: T3UXW14, usability, themes, distributions, backend, UX
A small house in the middle of the forest. The weather is rainy, fog all around. 30 people in the middle of nowhere with no place to run - no one would hear you scream. What sounds like the plot of a horror movie, turned out to be one of the most productive open source meetups in history of TYPO3.
If you ever asked for diversity in an open source community, the TYPO3 User Experience Week 2014 (T3UXW14) was the place to be. A full week of focused work on the TYPO3 CMS project - with people from almost every background imaginable. Not only did the week see User Interface people and coders - the majority were editors shedding light on their daily work, opening up perspectives to the hard-core-coders. Developers work very focused on their work and often get caught in a tunnel vision. One third of the participants were women - unusual for most tech events and another great sign that we’re on the right track with our community policy of inclusiveness.
Besides some well known personalities from the TYPO3 ecosystem we had a lot of people, who were rather new to TYPO3 itself or at least new to attending a TYPO3 event.
Besides the pure work focus of the week, we spent quite some time socializing and having fun - who would have thought we had so many skilled guitar players and that you can build a drum set from regular restaurant supplies.
Belated apologies to the other hotel guests for our late night jam sessions.
Another interesting issue that we dealt with was removing doubt from new members of the TYPO3 community. In general we have the reputation of being a rather tech-oriented community but T3UXW14 proved that reputation wrong… big time.
By being open and inviting to all new members we were able to get a tremendous amount of valuable input from the attendants new to this event or to contributing to TYPO3 in general - which in return drove the results we have today.
Instead of coding all week this years UXW focus was determined by a simple, but effective formula:
Concept > Prototype > Patch to merge.
By applying this working mode we created more room for ideas than only thinking about technical implementation details or alike.
Right at the beginning we kickstarted three task forces (Backend Usability, Distributions and Themes), each team working on a specific part of TYPO3 CMS.
The Themes team had already taken care of concepts and prototypes in the preceding time working on the crowdfunded project. Their job was to work towards a finalisation of the Themes project.
The Distributions team was closely related to Themes in its mission to provide easier access to TYPO3 CMS for entry users. The main focus was to streamline the current official' Introduction Package distribution. You can read more about this further down this document.
The Backend Usability task force pretty quickly split off in 4 subteams.
Following the initial roadmap Felix Kopp already showed at the Active Contributor Meeting in Munich about how the TYPO3 CMS backend should evolve over time, certain subtasks were created:
Strong Defaults Initiative
In order to make TYPO3 CMS more accessible to new users and developers huge steps in regards of having strong defaults when installing TYPO3 out of the box were made.
This way we can remove the amount of possible ways to achieve tasks within TYPO3 CMS which in the past became more of a problem than a real aid for editors.
By supplying strong and meaningful defaults we pursue the goal of making all TYPO3 CMS functions act the same - making the system more intuitive and thus better in every respect.
The clipboard was one of the thorns in our eyes for the last decade. The team around Xaver started on a clean slate and defined what a clipboard should be able to do in order to aid the editor every day.
The main changes are, that the clipboard is always available to the editor regardless of the selected module and will act as a mixture of a pure clipboard and also as a place to store ideas.
Apart from that the clipboard will be able to copy the content of a record instead of just a reference to a record. This way the clipboard will be able to hold records, that act like templates and that can later be inserted almost anywhere without altering the record, that was copied.
Since the overall goal for the new TYPO3 CMS backend is to drastically reduce the amount of visual clutter and to massively reduce the information density for an editor, the idea of an App (application) API was born.
The basic principle is to supply an API so intuitive and simple to use, that not using it would be insane. The core will ship a fixed set of components that will also increase in number over time to supply a helpful set of tools to build your own apps.
Setting up an app should be done via a simple, yet intuitive configuration file, which in return, would result in more and more apps looking alike, being easily skinnable and contributing to the overall look and feel of TYPO3 CMS.
After Felix introduced Twitter Bootstrap for the backend layout, Benni Kott set the next step building a prototype into a real TYPO3 CMS backend to see how the conceptual ideas work out in real life.
After implementing the prototype Felix and Benni started discussing the basics of backend skinning and the user journey throughout the system. The discussion mainly focused on the amount of menu levels, colors and icons sizes, as well as icon color schemes.
Another important task was to re-think the way the TYPO3 backend interacts with the editor verbally. Not all messages behave the same, dialogues act differently under certain conditions and alike.
The working group came up with a strategy paper defining guidelines how the system should interact with editors.
We are aware that changing every label or message within the TYPO3 CMS core is a huge task that cannot be handled at once, but we are certain that having a guideline will aid us in the process of dealing with some of our legacy.
Applying the principles of NLP (Neuro Linguistic Programming) will ensure a smooth and friendly user experience - it will just be more fun to work with TYPO3 CMS.
The dashboard concept defines a central hub for any kind of information within TYPO3 CMS. Basically it serves as a central hub to display… well…. anything that might aid the editor in daily work.
Aiding the editor starts with basic metrics about the TYPO3 CMS installation and should go as far as to what content has been edited by whom at what time. The dashboard will be the central place to launch your favorite apps from.
While TYPO3 CMS has a powerful way of handling multi-language output the Multi-Channel team (Paul, Martin and Andrea) wanted to take that a step further. In a lot of cases languages have been mis-used to control other channels of content. While we consider this “clever use of game mechanics” it still makes more sense to supply a robust framework to support multi-channel output in multiple languages.
With multi-channel support you will enjoy the flexibility of tailoring the system towards your needs.
The workspaces task-force (Alexandra, Paul, Martin, Andrea) came up with a very very very VERY nice concept of how things should be handled in the future but it is way too early to show something. While we know that we have some debt in regards to workspaces and workflows we will come up with something that will blow your minds later(tm). While testing with different roles on a website it they were able to show problems in the actual version while doing things at the same time.
For now it needs to be sufficient to let you know that there will be a very natural and social way to edit your contents in your teams.
Available since TYPO3 6.0, sys_category comes with a few managing problems. Categories can be added everywhere and in a multiple website instance, without further configuration, it could be messy to handle them. The team (Patrick, Benjamin, Fabien) came out with configuration scenarios to address those and proposed different suggestion to bring categories a bit further by having better interfaces for editors and propositions for an App that would be specialized in Categories handling. But they also did a good job and added some workarounds regarding the actual problems of overall categories, even in multidomain page trees.
Patrick and Andrea worked on past observations made at different meeting about shortcomings for FAL. From these notes some features and wishes were communicated. File search, replacements, batch operations and localizations have all been discussed. Ideas and UX recommendations were also discussed and presented. They are now working on a FAL Tutorial and documentation for the TYPO3 Community. Additional they are still in touch with the developers to get things done and test it for the future.
The participants of the TYPO3 Themes Packages crowdfunding initiative were asked to vote on their favourite framework to base Themes on, which resulted in an impressive 90% preference for Twitter Bootstrap. For the Themes Team the week was divided into two parts: Finalizing the so called bootstrap base package and starting to build the first theme packages on top of that base.
Finalizing the Bootstrap Base Package for THEMES
While Kay was mainly working on the actual THEMES extension, which is the base of the whole project, Joey and Thomas refactored the configuration and the frontend output of the bootstrap base package. Together with the backend team they took the decision to step away from Flexforms as far as possible in favor of some additional fields for the content table. This reduces technical problems and improves performance, since the new fields can be directly filled with the necessary generic classes. These classes then will be mapped onto the matching classes of the underlying frameworks, so even different base packages will be pretty much compatible to each other. Parameters for these fields can easily be added with TSconfig so that the interface for editors will be as flexible as possible while still being as restrictive as necessary.
Building the first theme packages for Bootstrap
Kerstin and Natalie joined the themes team to get their hands dirty as the pioneers building the first theme packages on top of the new base package. Kay helped them to get their development systems up and running. For this purpose Kay created a Vagrant box, which can already be downloaded from github. After a short introduction into the principles of the THEMES extension and the bootstrap base package, they both chose a downloadable design to start their theme package with. Together with the team they managed to have first results already visible at the final presentation at the end of the week, but they continued their work and those theme packages will be soon available for download in the TER. The full license involved with these designs is covered by the money collected during the crowdfunding campaign, so the download will be free for everyone. While it took Kerstin and Natalie a few days to create these packages, the code and configuration they created will help potential theme developers to create their themes in a matter of hours once they get into it.
A team consisting of Andrea, Monika and Ben worked on the Introduction Package Distribution. The current installation is not up to date and largely filled with demo content. The team updated all images, links and text. After initially wanting to create a full manual for the Introduction Package the team decided to bring the 'Getting started' documentation up to current standards.
The 'Getting Started' documentation is based on the Introduction Package and needs serious updating. The team got instructed on working with GitHub and before you knew it pull requests were all over the place. A first start for the comprehensive Introduction Package manual was also made. The team had close contact to Benjamin Kott to get informed on the bootstrap foundation of the package. The current foundation is powerful and flexible and a tutorial on how to adapt the package seems beneficial to the community.
The quicktour distribution is intended for use in training sessions as well as for demo purposes. The team focused on reducing content clutter, limiting us to the most basic content elements and thereby reducing the entry level for beginners. The quicktour distribution is also meant to attract people to TYPO3. With that in mind we chose to create a content case appealing to a broad audience. The current introduction package comes with demo content, but is very technically focused and thus more targeting integrators.
Once it is finished the quicktour will be shipped with the guided tour extension, including learning units (English language) for basic editor tasks, for example adding a text and image content element or editing basic page properties. The team defines editors as the major TYPO3 user group. Onboarding this target group will greatly increase the CMS user base.
During the T3UXW14 the Distribution team was able to finish up most of the editorial and conceptional work. The content case is set up and integrated already in a test environment. The learning units are prepared and will be integrated once the guided tour extension is ready for implementation. Some fine tuning needs to be done for finalisation of the learning unit integration and the shipping of the quicktour distribution beta. We already have a fairly big group of people for testing once we hit beta for input on further improvements before opening quicktour to the public.
Guided Tour Extension
The guided tour extensions purpose is to create an engaging walkthrough of common routines in any TYPO3 backend. This extension is targeted at official TYPO3 distributions, like the quicktour distribution or introduction package, as well as for usage in commercial projects, for example to educate editors on how to manage content in standard and complex TYPO3 instances. With this extension the need to create extensive and rather quickly outdated static editor documentation or learning videos will be reduced. Learning units will be easy to add, manage and distribute. This can be done by agencies who create tailor made TYPO3 backends or extension authors for their own extension.