TYPO3 5.0 Experience Concept

TYPO3 5.0 Experience Concept ... still iterating

Jens Hoffmann Björn Brockmann Creative Director User Experience Lead d.k.d Internet Service GmbH Leo Burnett GmbH Clients: Lufthansa, Telekom, Clients: Fiat, Harman Kardon, Cocoon, Anzag, Chevrolet Europe, TAZ, VGF, WWF Cadillac, Fissler, Kellogg´s, Samsung TYPO3 Design & Usability Team Leader TYPO3 Usability Team Member TYPO3 5.0 Core Team Member „Ofﬁcial TYPO3 Websites“ Team Member

TYPO3 Inspire people to share

Facts of TYPO3 4.x TYPO3

TYPO3

It‘s true Open Source TYPO3 is completely free of any licensing fees and vendor driven interest TYPO3

World‘s most used CMS ‣ Estimated 500.000+ installations ‣ 100.000+ registered users worldwide (potential developers for TYPO3 and your project) ‣ Huge powerbase with ~5000 developers and an equal number of agencys ‣ 60+ Global Usergroups ‣ Currently 32 core developer TYPO3

Technical Key-features ‣ Unlimited extendability (4000+ Extensions) ‣ Flexible conﬁguration language (TypoScript) ‣ Very powerfull serverside graphic-engine ‣ Unique Templating systems (Classic, TemplaVoilá & Fluid) ‣ Fully static content publishing for maximum performance and security ‣ Lots of authentication schemes and services connectors TYPO3

Functional Key-features ‣ Full Multi-language & Multi-site support ‣ Workspaces & Versioning (History / Undo) with advanced custom workﬂows behind ‣ Complete user permission management ‣ Enterprise Digital Asset Management (DAM) for content, media-ﬁles & documents ‣ Fully integrated Rich Text Editor (RTE) ‣ Impressive „Frontend“ Featureset with comfortable Frontend-Editing TYPO3

Global Events T3BOARD10 T3UGs T3CON10 T3SKI10-JP T3NLUG10 T3CON10-US T3DD10 T3SAIL10-DK T3UNI10-FR T3GA10 T3DIVE10 T3AK10 T3CLIMB10 T3AWT10 T3UXW09 TYPO3camps T3ZTG10 T3DAM10 T3BUGDAY TYPO3

Biggest advantages High Flexibility Free of licensing fees Unlimited extendability & features No license fee for system & server Connection to existing infrastructure Free extensions for custom usage Shorter development periods More budget for extras & support Fair Independence True OpenSource TYPO3 can never go out of business Spirit & Safety Free choice of agency at any time A step ahead of proprietary systems No mandatory recurring fees Enormous community of knowledge TYPO3

Possible Drawbacks High Flexibility Free of licensing fees Unlimited solutions for similar task No / Less income Fair Independence True OpenSource Constantly switching directions Hard to control development TYPO3

Impressive feature set TYPO3 Source: www.wenger.ch

Impressive feature set TYPO3

Joy of use! TYPO3

We started .. TYPO3

from sc ra tc h!

Guiding Principles TYPO3

Preserve the soul ﬂexibility, scalability, connect-ability, page-tree

Ease the pain complexity, inconsistencies, complicated and redundant workﬂows

User centered design goals, tasks, needs and limitations of the end user(s)

Good Defaults reduce complexity in the interface

Reduce abstraction were possible (eg. the „frontend“)

Strong consistency honor standardised workﬂows, defaults and visual taxonomy

Context over consistency if it makes more sense that way

Features on demand Reduce the visual noise where possible

Inspirations ... we looked at over 150 Systems TYPO3

General Concepts TYPO3

Workspace Live Workspace Personal Workspace(s) TYPO3

Workspace Live Workspace Team / Stage Workspace(s) Personal Workspace(s) TYPO3

Workspace ‣ NO editing in the live Workspace ‣ At least one Workﬂow step is always needed! ‣ Personal Workspaces (environments) ‣ Collaborative communication TYPO3

View Styles ‣ Custom views for data visualization via templating ‣ Easy to extend / add new views ‣ Pages, Lists, Thumbnails, vCards, Google Maps, Olap, Gant, ... TYPO3

Rootline Menu ‣ Fixed area of navigation ‣ Stay consistent in all navigation levels ‣ Sneak peek into any previous navigation level ‣ Jump back into any previous navigation level with one click ‣ Sitemap like overview TYPO3

Dashboard ‣ Communication ‣ Tasks and Workﬂows ‣ Widgets and Scripts ‣ History of edited elements TYPO3

Tabs ‣ Internal tabs behave like Browser-Tabs ‣ Changes only happen within the current Tab ‣ Use the Bowser-Tab as user interface, too TYPO3

Editing ‣ Inline-Editing activated by Double Click ‣ Advanced-Editing activated by Single Click to select + a Click to start an Action ‣ Drag & Drop for small distances ‣ Copy & Pasted for large distances TYPO3

Autosave ‣ Less manual saving ‣ Do it automatically in a transparent way ‣ Easy and quick interface to roll back changes TYPO3

Personas TYPO3

TYPO3

Klaus & Margarete (Content Editor) All ages and backgrounds Proﬁcient with keyboard and mouse Interact with the system on a irregular basis Do not change the structure of the site Goals Implement new content and keep it up to date Tasks Add, edit, move and delete content Needs Simplicity and ease-of-use Guidance Reduced abstraction Proactive communication TYPO3

Robin (Content Manager) 25+ Organizer Handles job with care Advanced PC skills Uses CMS features to the max Goals Structure the site Enable new feature sets Tasks Manage site & page structure Apply templates Conﬁgure modules Integrate assets Needs Maintain an overview at all times Focus on task at hand TYPO3

Hermine (User Manager) 30+ Right hand of the boss or HR Always charming Proﬁcient with keyboard and mouse Occasional usage of the CMS Goals Administer System Users Tasks Create, Edit, Delete: Users, Groups & Access Rights Needs Simplicity and ease-of-use Guidance Reduced abstraction Proactive communication TYPO3

Sgt. Hartman (Project Manager) 25-35 Good People/Soft skills Well dressed Stressed Too much coffee Needs to use information externally Goals Get the website live on time Tasks Monitor and manage tasks & employees workloads Needs Resources & task managing tool TYPO3

Bill (Marketing Manager) 30+ Humans are only Resources Stressed & out of time Well dressed Weekly Haircut Expert in excel & word Lives in email Goals Monitor performance of the site Tasks Run analytic queries and communicate them in reports Needs Site performance data gathering visualization & export TYPO3

Cornelius (HTML Designer) 16-25 Designer gone coder & vice-versa Hacker dude beyond Dreamweaver Knows his Mac inside out Doesn't accept the status quo Goals Implement site design Tasks Create, Edit: HTML, CSS & JS code Add ﬂuid syntax to HTML templates Needs HTML editor & QA tool TYPO3

Gallus (TYPO3 Integrator) 20+ Aims to be a developer Deep knowledge in TYPO3 Certiﬁed by T3A Able to read modern programming paradigmas Goals Connect HTML with TYPO3 Tasks Create, edit & debug TypoScript Enhance HTML templates with Fluid Conﬁgure packages Needs Powerful editing and debugging tools TYPO3

Roger R. (PHP Developer) 25-45 Loves modern programming paradigmas Uses power editors Likes challenging tasks Goals Expand functionality Fix problems Tasks Create/Edit PHP Code Implement features Connect other services Unit testing Write stand-alone applications Needs Web-Application framework Debug functionality Unit status monitor TYPO3

Kaspersky (System Administrator) 30-50 Avoids sunlight The console is his interface Love to automate tasks Goals Set up TYPO3 installation Keep the system secure and running Manage multiple installations Tasks Installing, optimizing & updating TYPO3 Performing backups Needs System monitor Service interfaces TYPO3

TYPO3

Integrator Content Ed it TYPO3 or Conten t Manager Pr oject Manager User Manager HTML Des igner eloper PHP Dev Marketing M anager System Administrator TYPO3

Content Editor Marketing Manager Content Manager HTML Designer User Manager TYPO3 Integrator PHP Developer System Administrator TYPO3

Content Report Man agement Layout System TYPO3

Management Layout Content Report System TYPO3

UI Architecture User Global Functionalities CMS Sections Content / Structure / Settings TYPO3

UI Layout Global Widgets User System Sections Section Moduls Content / Structure / Settings TYPO3

The Concept TYPO3

What is a Wireframe? TYPO3

All you going to see are Wireframes

All you goingOUTS to see NO T L AY are Wireframes

Login TYPO3

The „Backend“ TYPO3

Global Widgets Brand & User System Sections Section Moduls Modul content

Menu display style TYPO3

Content editing TYPO3

Version comments TYPO3

Page settings TYPO3

Page management TYPO3

Page protocol TYPO3

Page workﬂow TYPO3

Page scrolling TYPO3

Management view TYPO3

Rootline navigation TYPO3

Tree view deﬁnietion TYPO3

Management editing TYPO3

Management multi-editing TYPO3

Global overlays TYPO3

Global Messages TYPO3

Clipboard UI TYPO3

Snapshot menu TYPO3

Chat UI TYPO3

Help menu TYPO3

User widgets TYPO3

Modul view ﬁlter TYPO3

Search TYPO3

Input action UI TYPO3

Regular user Job Tasks Tasks Tasks Done TYPO3

Advanced user Job Tasks Done TYPO3

sex is updatedb; locate; talk; date; cd; strip; look; touch; finger; unzip; uptime; gawk; head; apt-get install condom; mount; fsck; gasp; more; yes; more; umount; apt- get remove --purge condom; make clean; sleep;

Input action UI Action Type Context TYPO3

Help wanted Feedback is very welcomed! TYPO3

Get involved & create buzz! tr.im/t35ui Abstract & Channels Structure, Wireframes, & Scribbles TYPO3

Questions? We need feedback! Meet us, please. TYPO3

Thank‘s Jens Hoffmann Björn Brockmann Mail: Mail: jens@typo3.org bjoern@typo3.org Twitter: Twitter: wrybit headballooning TYPO3

Go uxcamping ;) TYPO3