The radically
new interface
for TYPO3 5.0
TYPO3

Jens Hoffmann Björn Brockmann
Creative Director Senior User Experience Planner
d.k.d Internet Service GmbH Leo Burnett GmbH
Clients: Cocoon, Helpedia, Clients: Fiat, Harman Kardon,
Lufthansa, Metz, Chevrolet Europe,
Telekom, TAZ, Cadillac, Fissler,
VGF, WWF Kellogg´s, Samsung
TYPO3 Usability Team Leader TYPO3 Usability Team Member
TYPO3 5.0 Core Team Member
„Official TYPO3 Websites“ Team Member
TYPO3 Marketing Team Member
TYPO3

CSS
TYPO3

Crowd Shouts Slides
Click Read Shout
TYPO3

TYPO3
TYPO3

GOOD!
TYPO3

TODAY
TYPO3

WE
TYPO3

MAKE
TYPO3

TYPO3
TYPO3

HISTORY
TYPO3

AGAIN!
TYPO3

tt_clap
TYPO3

How we got here
Holiday Inn Frankfurt City South Conference Center
50° 5'31.26" N 8°41'27.75" E
TYPO3

First thoughts
Kopenhagen
Rasmus & Jens

Project setup
Berlin
Robert & Jens

Project kickoff
Lübeck
Björn, Rasmus, Robert, Karsten & Jens

Project details
Frankfurt
Jens & Björn

Concept refactoring
Ibiza
Jens

Reviewing concepts
Björn & Jens

Syncing current results
Mainz
Björn, Robert, Karsten & Jens

First public presentation
Frankfurt
Björn & Jens

Early Snap Shot of the
TYPO3 5.0 UI Project

E SS
Early Snap Shot of the
R
P R
TYPO3 5.0OUIG Project
IN

We started ...
TYPO3

from
scratch ...

Inspiration
TYPO3

Guiding Principles
TYPO3

Preserve the soul
flexibility, scalability, connect-ability, page-tree
TYPO3

Ease the pain
complexity, inconsistencies, complicated and redundant workflows
TYPO3

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

Good defaults
reduce complexity in the interface
TYPO3

Reduce abstraction
were possible (front-end)
TYPO3

Standardised workflows
based on good defaults
TYPO3

Strong consistency
honor established workflows and visual taxonomy
TYPO3

Context over consistency
if it makes more sense that way
TYPO3

General Concepts
TYPO3

General Concepts
‣ Workspace
‣ Views
‣ Navigation
‣ Dashboard
‣ Tabs
‣ Editing
‣ Autosave
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 Workflow step is always needed!
‣ Personal Workspaces (environments)
‣ Collaborative communication
TYPO3

Views
‣ 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 Workflows
‣ Widgets and Scripts
‣ History of edited elements
TYPO3

Tabs
‣ Behave like Browser Tabs
‣ Changes only happen within the current Tab
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

TYPO3

Mr. Klein Key Characteristics
Editor
‣ Content editing
‣ Editor is restrained from
a lot of the CMS details
‣ Typically doesn't remember
their password
‣ Will never change the
overall structure of a site
TYPO3

Mr. Klein Goals
Editor
‣ Keeping the website up to date
Tasks
‣ Add, edit, move and delete content
‣ e.g. produce news articles
TYPO3

Mr. Klein Needs
Editor
‣ Simplicity and ease-of-use
‣ Guidance
‣ Help moving from big picture
to specific actions
‣ Proactive communication
TYPO3

eloper
cri pt Dev
TypoS Editor
Conten t Manager
User Manager
Designer
HTML Des
igner
eloper
PHP Dev Marketing M
anager
System A dministrator
TYPO3

Editor
Marketing Manager
Content Manager
HTML Designer
User Manager
TypoScript Developer
PHP Developer
Designer
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 Functionalities User
CMS Sections
Moduls
Content / Structure / Settings
TYPO3

The UI 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

Login transition
www.domain.com /the/path/to/my/subpage
TYPO3

Login transition
www.domain.com /typo3 # /the/path/to/my/subpage
TYPO3

Global dataview Global widgets Branding & Version
User account
CMS Sections
Moduls
Content / Structure / Settings

Menu display style
TYPO3

Search
TYPO3

Overlay Menus
TYPO3

Content editing
TYPO3

Version comments
TYPO3

Page settings
TYPO3

Page management
TYPO3

Page protocol
TYPO3

Page workflow
TYPO3

Page scrolling
TYPO3

Management view
TYPO3

Rootline Navigation
TYPO3

Tree view definietion
TYPO3

Management editing
TYPO3

Management multi-editing
TYPO3

Input action UI
TYPO3

Regular user
Job Tasks Tasks Tasks Solution
TYPO3

Advanced user
Job Tasks Solution
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

Next ...
TYPO3

How we will proceed
1. Ongoing weekly sessions
2. Qualitative reality checks
3. Prototypes & Refactoring
4. Core concept freezing
5. Creating screen designs
6. Creating module concepts
7. Results reviewing / QM
TYPO3

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

Support big visions!
TYPO3

~100.000 Registered User
~300 Association Member
TYPO3

Join the Association
Transparent communication?
Ask for more influence!
TYPO3

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

Questions?
Meet us at a „Birds of a Feather“ session
Friday - 18:00 - Baden
TYPO3

Enjoy the event. ;)
TYPO3