TYPO3

The radically

for TYPO3 5.0new interface

TYPO3

Jens Hoffmann

Senior User Experience PlannerLeo Burnett GmbH

Clients:

Björn Brockmann

Creative Directord.k.d Internet Service GmbH

Clients:

TYPO3 Usability Team MemberTYPO3 Usability Team LeaderTYPO3 5.0 Core Team Member„Official TYPO3 Websites“ Team MemberTYPO3 Marketing Team Member

Fiat, Harman Kardon, Chevrolet Europe, Cadillac, Fissler, Kellogg´s, Samsung

Cocoon, Helpedia, Lufthansa, Metz, Telekom, TAZ, VGF, WWF

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 hereHoliday Inn Frankfurt City South Conference Center

50° 5'31.26" N 8°41'27.75" E

First thoughtsKopenhagen

Rasmus & Jens

Project setupBerlin

Robert & Jens

Project kickoffLübeck

Björn, Rasmus, Robert, Karsten & Jens

Project details Frankfurt

Jens & Björn

Concept refactoringIbiza

Jens

Reviewing concepts

Björn & Jens

Syncing current resultsMainz

Björn, Robert, Karsten & Jens

First public presentationFrankfurt

Björn & Jens

Early Snap Shot of the TYPO3 5.0 UI Project

Early Snap Shot of the TYPO3 5.0 UI ProjectIN PROGRESS

TYPO3

We started ...

from

scratch ...

TYPO3

Inspiration

TYPO3

Guiding Principles

TYPO3

Preserve the soulflexibility, scalability, connect-ability, page-tree

TYPO3

Ease the paincomplexity, inconsistencies, complicated and redundant workflows

TYPO3

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

TYPO3

Good defaultsreduce complexity in the interface

TYPO3

Reduce abstraction were possible (front-end)

TYPO3

Standardised workflowsbased 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-Editingactivated 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

Key Characteristics

‣ Content editing

‣ Editor is restrained from a lot of the CMS details

‣ Typically doesn't remember their password

‣ Will never change theoverall structure of a site

Mr. Klein Editor

TYPO3

Goals

‣ Keeping the website up to date

Tasks

‣ Add, edit, move and delete content

‣ e.g. produce news articles

Mr. Klein Editor

TYPO3

Needs

‣ Simplicity and ease-of-use

‣ Guidance

‣ Help moving from big picture to specific actions

‣ Proactive communication

Mr. Klein Editor

TYPO3

Content Manager

Designer

Editor

HTML Designer

Marketing ManagerPHP Developer

System Administrator

TypoScript Developer

User Manager

TYPO3

Content Manager

Designer

Editor

HTML Designer

Marketing Manager

PHP Developer

System Administrator

TypoScript DeveloperUser Manager

TYPO3

Management

Content

Layout

Report

System

TYPO3

ManagementContent

LayoutReport System

TYPO3

UI Architecture

User

Global Functionalities

CMS Sections

Content / Structure / Settings

TYPO3

Content / Structure / Settings

CMS Sections

Global Functionalities User

Moduls

UI Layout

TYPO3

The UI concept

TYPO3

What is a Wireframe?

All you going to seeare Wireframes

All you going to seeare WireframesNOT LAYOUTS

TYPO3

Login

TYPO3

www.domain.com /the/path/to/my/subpage

Login transition

TYPO3

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

Login transition

Content / Structure / Settings

Global dataview Branding & VersionGlobal widgetsUser account

CMS Sections

Moduls

TYPO3

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

Job SolutionTasksTasks Tasks

Regular user

TYPO3

TasksJob Solution

Advanced user

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;

TYPO3

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

Mail:jens@typo3.org

Twitter : wrybit

Jens Hoffmann

Mail: bjoern@typo3.org

Twitter :headballooning

Björn Brockmann

TYPO3

Support big visions!

TYPO3

~300 Association Member

~100.000 Registered User

TYPO3

Join the Association

Ask for more influence!Transparent communication?

TYPO3

Get involved & create buzz!

tr.im/t35uiAbstract & Channels

Structure, Wireframes, & Scribbles

TYPO3

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

TYPO3

Enjoy the event. ;)