UX-Vision for the next TYPO3 CMS

TYPO3 CMS Usability Team

Hello.TYPO3 CMS UX-Team Leader Creative Director

Web

jens@typo3.org@wrybit | www.wrybit.de

Jens.Living together with my wife, sun and 2 cats near Frankfurt

Web

jens@typo3.org@wrybit | www.wrybit.de

jens@typo3.org@wrybit | www.wrybit.de

WrYBiT.I like snowboarding, electronic music, visiting art exhibitions & digging into new UX challenges

Web

Open SourceSpirit of sharing.

Passion for contribution.

Participation.

Focus onquality over quantity.

Fair fame.

collaboration.Team Thinking bold.

Exchanging thought.

Freedom.

Indifferences.Lack of strategy.

Flat hierarchy.

Community engagement.

Non-profit corporation.

Inspiring.

Never finished.

Flexibility.

Long term support of the TYPO3

UX-TeamThe

Long term support of the TYPO3

UX-TeamThe TYPO3 CMSCMS

Members

Team Leader Release Manager

Fabien Udriot

Björn Brockmann Lars Zimmermann

Felix Kopp

Jens Hoffmann Ernesto Baschny

Martin Engel

Challenge

Moderate

Maintain Innovate Vision & Strategy

Community

Product

Feedback Motivate

InspireTeam Build Support

Retrospective

The evolution of iMac

1998 2000 2002 2004 2005 2007 2009 Today

Status quoAspects of a historically grown system.

CMS

Framework

CMS

Framework

Framework

TYPO3 CMS TYPO3 Neos TYPO3 Flow

Web-Sites Web-Apps (with GUI)

Web-Services (without GUI)

This is my personal perspective and not approved by any other official TYPO3 team.

Revolution

Evolution

Sam

eSa

me

CMS

Framework

CMS

Framework

Framework

TYPO3 CMS TYPO3 Neos TYPO3 Flow

Web-Sites Web-Apps (with GUI)

Web-Services (without GUI)

This is my personal perspective and not approved by any other official TYPO3 team.

Revolution

Evolution

Diff

eren

ce

iFramesFrom a technical depth to a technical chance?

~100 Core modul views

With .. & without tree

Web

File

User tools

System

Admin tools

Help

Tree

With .. & without tree

Linear workflow

Text w/ Image

Create Page

Create Record

Select Record

Type

Open File Modul

Open Page

Modul

Select Folder

Enter Upload Modul

Browse local file-

system

Upload File

Re-Select Page

Re-Select Content Element

Select Media

Tab

Open T3-File-Browser

Re-Open Page

Modul

Write Text

Save & Close

Record

Add Metadata

Re-Select Folder

Re-Select & Insert Image

Select local

Image

Save & Close

Record

Preview Text /w Image

Navigate to Page

Open Preview Modul

Add Metadata

steps25

Text w/ Image

Create Page

Create Record

Select Record

Type

Open File Modul

Open Page

Modul

Select Folder

Enter Upload Modul

Browse local file-

system

Upload File

Re-Select Page

Re-Select Content Element

Select Media

Tab

Open T3-File-Browser

Re-Open Page

Modul

Write Text

Save & Close

Record

Add Metadata

Re-Select Folder

Re-Select & Insert Image

Select local

Image

Save & Close

Record

Preview Text /w Image

Navigate to Page

Open Preview Modul

Add Metadata

Upload File

Write Text

Save & Close

Record

Preview Text /w Image

Summary

‣ Product vision or strategy bit unclear

‣ iFrames separate Menus & Moduls

‣ Linear, technical driven workflows

‣ Current grouping by technical context

‣ Long, recurrent click paths for editors

Suggestions

‣ User and content first

‣ Define defaults for beginners

‣ Enable non-linear workflows

‣ Features on demand

‣ Prefer existing solutions

‣ Create small & re-usable parts

‣ Avoid abstraction where possible

VisionTeamwork, fifth iteration

IterationsFrom Idea to Layout

Idea Draft Wireframe T3UX-RLM T3CON13Jens Lars Björn & Jens Jens Martin & Jens

IterationsFrom Idea to Layout

T3CON13Martin & Jens

Backend Login

Backend Login

Backend Login

Welcome dialog (TourTorial start)

Dashboard

Dashboard (Add widget)

Dashboard (Widget added)

Welcome dialog („TourTorial“ started)

Open a new module (TourTorial)

TourTorial: Interact with the pagetree

Open a new module (TourTorial)

Open a new module (TourTorial)

Grid view

Grid view (Add content, via Drag & Drop)

Grid view

Grid view

Grid view

Grid view

A designer who wants to achieve good design must

Distraction free editing

Quick editing

A designer who wants to achieve good design must not regard himself as an artist who, according to taste and aesthetics, is merely dressing - up products with a last - minute garment. The designer must be the gestaltingenieur or creative engineer. They synthesise the completed product from the various elements that make up its design. Their work is largely rational, meaning that aesthetic decisions are justified by an understanding of the product’s purpose. _

Distraction free editing

A designer who wants to achieve good design must

Distraction free editing

Quick editing

Quick editing (Switch context)

Quick editing (Switch context, Context Informations)

Device simulation

Open a new module (Tab)

Wizard workflow (Step 3, Check report)

Summary

‣ True branding possibilities‣ Less navigation, consistent styling & more space‣ New learning curve via inline „TourTorials“‣ Non-Linear workflow via Tabs‣ Personae/Roles via Tab-Sets‣ Context focused grouping and view switches‣ Device simulator and distraction free editing‣ Transparent Sub-Modul-Navigation‣ Simple wizard driven workflows

TYPO3 USER EXPERIENCE WEEK

It‘s time for another one!

T3UXW09

Event participants 2009

T3UXW09 Achievements ‣ New Backend-, Login-, Installer & Error-Skin

‣ Creation of the Introduction Package

‣ Built new page- and file-tree from scratch

‣ Page Module backend grid & grid layout editor

‣ Page Module with „drag & drop“

‣ Smart renaming & rearrangement of labels

‣ Basic TYPO3 backend template structure & guide

‣ Core Sprite-Image- & CSS-Merger-Engine

‣ Better Backend Search

‣ …

Honorable T3UXW09 godparents

.. thank you, once again!

T3UXW14

#T3UXW14

16.02 - 23.02.2014Essen - Unperfekthaus

CoordinationUXDev 1 Dev 2 Dev 3 Dev 4 Dev 5 Dev 6

TodayWebsite will be ready „hopefully“ soon.

… send a mail to t3uxw@typo3.org

900€Support 1 Attendee

Become a godparent

jens@typo3.org@wrybit | www.wrybit.de

I’m open for new job opportunities in 2014.

ThanksGot questions?