t3con10 - the taste of typo3 phoenix

... still evolving

The taste of PhoenixTYPO3 5.0

Illustration by Momkai - a digital creative agency for Software Inc.http://www.behance.net/Gallery/Vabi-Phinix-_-Numex/137704

Björn Brockmann

Creative Directord.k.d Internet Service GmbH

Clients:

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

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

Lufthansa, Telekom, Cocoon, Anzag, TAZ, VGF, WWF

Jens Hoffmann

User Experience LeadLeo Burnett GmbH

Clients:

TYPO3

Evolution

Definition

Design

TYPO3

Evolution

TYPO3

Personas

TYPO3

Personas Lübeck

Content Content Editor

Personality

Creates Content

Woman

Younger

Texter

Implements Content

Younger or Old

Cheap Employe

Student

Intern

Pensioner

Goals Keep content updated

Tasks

Add, edit, move and delete content

Produce news articles

Notes

Editor is restrained from a lot of things

Will never change the overall structure of a site

Front end editing

Typically don't remember their password

Management

Content Manager

Personality

Man

Mid age

Used to Abstraction

Organizer and handles job with care

Could handle responsibilities

Goals

Keep content updated and structured

Structure the site

Tasks

Apply templates

Edit content

Edit DAM structure

Edit Metadata

Index Media

Modify page structures

Review content

Notes Needs to understand basic concepts

User Manager

Personality

Woman

Mid age

Right hand of the boss

Always charming

Goals Administer System Users

Tasks Create/Edit/Delete

Users

Groups

Rights

Notes

Typical from HR

Not really used to the System

Occasional usage of the System On monthly basis

Layout

HTML Designer

Personality

Man

Younger

Doesn't accept the status quo

Wears ugly but modern closes

GoalsImplement design

Tasks

Create/Edit HTML, CSS ans JS code

Adds fluid syntax to HTML templates

Review HTML quality

Review HTML-Design accuracy

Notes

You don't necessarily need typoscript

Types of HTML designers

Beyond Dreamweaver

Hacker dude

Experienced HTML developer

Former Designer

HTML Integrator

GoalsConnects HTML with TYPO3

Tasks

Create/Debug/Edit TypoScript Code

Add/Edit Fluid Code into HTML templates

Notes

Can edit TypoScript in the Backend or an extrnal Editor

Formally known as TypoScript Editor

PHP Developer

Goals

Expand functionality

Fix problems

Tasks

Connecting to other systems

Write new Packeges

Testing

Write stand-alone applications

Implement features

Create/Edit PHP Code

Notes

Used to PowerTools

Likes challenging tasks

Typical day for a PHP developer

Scrum meeting

Defines tasks for today

Reads specifications

Develop App

QM

Tests in the backend

Can see results in frontend

Loops between developing and testing

Publish App

Report

Marketing Manager

Personality

Man

Arrogant Humans are only Resources

Stressed

Unhappy

Well dressed

Weekly Haircut

Smokes

Goals Monitor performance of the site

Tasks

running analytic queries

generate reports

Notes

no technical guy

used to excel word

all ways running out of time

lives in email

Project Manager

Personality

Woman

Good People/Soft skills

Well dressed

Stressed

Too much coffee

Vegetarian

Goals

manage human resources

Getting website live

Tasks

monitoring employees workloads

Quality Management Language

Notes Need to use Informations Externally

SystemSystem Administrator

Personality

Afraid of sun light

Low human skills

In love with his PC

Like to show his skills by doing it the hard wayLinux & co.

Uses the keyboard, not the mouse

Wears one week the same closes

Pizza and Beer sculptured his impressive body

Playes Online-games in his free time

Goals

Keeping it secure

Keep the system runningWants to be able to script tasks

Managing multiple installations

Securing

Upgrading

Setting up TYPO3

Tasks

Housekeeping

Installing

Optimizing

Updating

running backups

Notes

Never sees the backend?

lives in the shell

Content

Klaus & MargareteContent Editor

Management

RobinContent Manager

HermineUser Manager

GerritChief editor

GenieTranslator

Report

Mr. HartmanProject Manager

BillMarketing Manager

Layout System

GallusTYPO3 Integrator

RogerPHP Developer

KasperskySystem Administrator

CorneliusHTML Designer

All Personas are Models on the Pictures here and take distance from the work context we made up.

Gerrit (Chief editor)

Goals Improve content quality

Tasks Keep the Editors busyReviews & publishes content

Needs Publishing process

TYPO3

http://j.mp/t3personasHelp to improve them!

TYPO3 Personas (Across TYPO3 versions)

TYPO3

Header

Frontend Templates

<username> LogoutSwitch to other user

SystemReportingContent

Jan 2009

DashboardAdministationReportLayoutContentView

Version.Build Username ! @ Workspace ! Logout Global Head-Context-MenusState / URL

7

Item 1

Item 3-2-1

Item 3-2-2

Item 2

Item 2-1

Item 2-2

Item 3

Item 3-1

Item 3-2

Item 4

Item 5

Item 6

<name> <date><property> <?> <state><version>

Item 1

Item 3-2-1

Item 3-2-2

Item 2

Item 2-1

Item 2-2

Item 3

Item 3-1

Item 3-2

Item 4

Item 5

Item 6

<name> <date><property> <?> <state><version>

Qucksilver

<date><property> <version><?> <state><name>

<?><name> <version> <state><property> <date>

<version><name> <?> <date><property> <state>

<date> <version>

<name>

<state>

<version>

<version>

<?>

<?>

<name>

<name>

<?>

<version>

<date>

<date><name>

<property>

<state>

<property>

<state>

<state>

<?><property>

<date><property>

<version><name> <?> <state><date><property>

<state><date> <version><?><name> <property>

<date><name> <property> <?> <state><version>

Edit Icons

7

Jul 2009

Sep 2009

Level 1Level 1Level 1Level 1Level 1Level 1Login / Register

Site switcher Rootline

Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2

Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis. Mauris ultricies quam malesuada ligula. Vivamus neque. Maecenas arcu lacus, bibendum in, pretium ut, imperdiet a, augue. Vivamus lorem velit, placerat non, porta sit amet, iaculis nec, est. Proin scelerisque lectus quis lectus. Integer felis. Duis sagittis auctor eros. Vivamus porta lacus id pede. Nulla scelerisque lorem ut quam.

Suspendisse potenti. Donec faucibus. Nunc placerat justo et dolor lobortis aliquet. Vestibulum suscipit, nunc ut laoreet porttitor, massa nulla ultricies sem, ut blandit dolor justo ut lorem. Maecenas at augue eget ante consectetuer tempor. Duis at magna id pede vestibulum accumsan. Suspendisse at massa. Proin eleifend.

Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼

Suspendisse potenti. Donec faucibus. Nunc placerat justo et dolor lobortis aliquet. Vestibulum suscipit, nunc ut laoreet porttitor, massa nulla ultricies sem, ut blandit dolor justo ut lorem. Maecenas at augue eget ante consectetuer tempor.

Duis at magna id pede vestibulum accumsan. Suspendisse at massa. Proin eleifend. Vestibulum interdum. Mauris pellentesque. Vivamus mollis viverra elit. Aliquam vulputate nisl dapibus elit. Ut ut dui ut libero sagittis malesuada. Sed in lectus.

Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr

Cras lectus. Sed imperdiet placerat est. Etiam accumsan felis eget ligula. Proin auctor, nibh sed volutpat pellentesque, tortor lectus condimentum felis, sit amet accumsan leo dui ut ligula. Pellentesque convallis. Duis dapibus neque sed lorem. Duis varius mauris vel augue. Aliquam a massa.

Version.BuildState

Hallo, Real Username Logout

5 299

DashboardSystemLayoutReportManagementContent3

Domain.org / Live / Content Group A + CG B / Admin / English & French / Design 2010 + Wireframe Style

Activate Content Editing via a "Double Click" any-where in the content frame

Mai 2010

TYPO3

Clipboard

TYPO3

Communication

TYPO3

Modul view filter

TYPO3

Content editing



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



Active editing mode



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



Activate Content Editing via a "Double Click" any-where in the content frame



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299





Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Sorry, you can't edit this element

Version.BuildState


5 299





Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Sorry, some else is already editing this.Contact him via Chat to get feedback.

Julia is editing thissince 15:37 o'clock

Version.BuildState


5 299





Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



Julia is editing thissince 15:37 o'clock

"Rollover" a Block to see user editing Infos

- Chat with Editor (if it gets edited) - View rights for edit block (if available) - View rights to move block (if available) - View rights to delete block (if available)



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



"Single-Click" to select a block

"Single-Click" + SHIFT to multi-select block's"Single-Click" + STRG to move a block(Indicate via Cursor on Rollover)

"Double-Click" to edit a block



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2

Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos.Suspendisse potenti. Donec faucibus. Nunc placerat justo et dolor lobortis aliquet. Vestibulum suscipit, nunc ut laoreet porttitor, massa nulla ultricies sem, ut blandit dolor justo ut lorem. Maecenas at augue eget ante consectetuer tempor. Duis at magna id pede vestibulum accumsan. Suspendisse at massa. Proin eleifend.

Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr

Cras lectus. Sed imperdiet placerat est. Etiam accumsan felis eget ligula. Proin auctor, nibh sed volutpat pellentesque, tortor lectus condimentum felis, sit amet accumsan leo dui ut ligula. Pellentesque convallis. Duis dapibus neque sed lorem.


Version.BuildState


5 299



Website User Jens

Custom Lorem ▼ +Custom Texts ▼Default ▼ Recycler ▼Custom Images ▼

Clipboard entry Search me Lorem Ipsum

Clipboard groups

▶◀

Pic of a car

Moved13

831

edit

▼ 99

After a selection is processed,it could be move on the page. (Called: Short distance move)

To Move (over large distances),drag&drop to clipboard "drop-zone"

To Delete (or remove a instance),drag&drop to recycler "drop-zone"



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



Activate Aloha Inline Editor via a "double click" onto anyaccessable Content Element

Use ESC key or click on the CMS head, to deactivate Aloha



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



PropertysPresets AddParameterFormat

Text selection



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299




Change selection to ...

└ Column 70% width

└ Text selection

└ Grid element 70% / 30%└ Main Content Area

└ Untitled paragraph

Select a word byclicking "into" text



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299






└ Text selection



Select a complete blockby triple clicking a block



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299






└ Text selection



Select a "Column" by clickingbetween two vertical blocks



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299






└ Text selection



Select the "Grid element" by clickingbetween two horizontal columns



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299






└ Text selection



Select the "Main Content Area"by clicking outsite all blocks



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



PropertysFormat AddParameterPresets



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



PropertysFormat Presets AddParameter

Link

Semantic enrichment

_ XTYPO3 Page Browse

Test _Person Vacation Copenhagen Lipsum



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



PropertysFormat Presets AddParameter

Open in new window

Page (internal)

Mark a section in the text and than click on a page in the menu-inspector.Or drag a link on a word in the text to create a link.

▶Page 4

Page 3

Page 6

▶✓ Page 5

◀ Back



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



PropertysPresets ParameterFormat

Add

Text Media Services

Video_ X



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



PropertysFormat Presets Parameter Add

Video_ X

TYPO3 Forms Plugins Custom content elements

Drop a "Placeholder"into any fitting Content



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis. Mauris ultricies quam malesuada ligula. Vivamus neque. Maecenas arcu lacus, bibendum in, pretium

ut, imperdiet a, augue. Vivamus lorem velit, placerat non, porta sit amet, iaculis nec, est. Proin scelerisque lectus quis lectus. Integer felis.

Uploading ...

Drag a Image from your Desktop tothis Placeholder to upload it directly.

(Aloha switches back to "Format Tab",after Media Placeholder was insert.)


Resize a Placeholderto resize the image(in advanced, quality isprocessed server-side)



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



PropertysFormat Presets Parameter Add

Text Media Services Grids Effects

Video_ X

"single click" a ElementTo activate it as filter



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



PropertysFormat Format Parameter Add

Introduction Video_ X Browse

Introduction of the new TYPO3 Version

This is a Introduction

Introduction into the new Versioning Syst...

This is a Video about a Introduction of TY...



Site search ...

CTA AD

Level 2

Level 2

Level 2

Level 2

Level 2




Level 4

Level 4

Level 4

Level 4

Level 3

▶

▼



Brand logo (Home)

Platinum Ad

Platinum Ad

Titel Nr


Version.BuildState


5 299



PropertysFormat Format Parameter Add

Introduction Video_ X Browse

Introduction of the new TYPO3 Version

This is a Introduction

Introduction into the new Versioning Syst...

This is a Video about a Introduction of TY...

Drag the selectedVideo into a Text block

TYPO3

Definition

TYPO3

Design Patternbased on a consistent visual taxonomy

TYPO3

ABCEDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnoprstuvwxyz123456789

ABCEDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnoprstuvwxyz

123456789

ABCEDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnoprstuvwxyz

123456789

16px

12px

10px

TYPO3

#ffffff

TYPO3

#000000

TYPO3

#ff8700

TYPO3

#279742 - #094b19

TYPO3

#dd0000 - #730000

TYPO3

#333333 - #555555

TYPO3

#fff8d6 - #dfc97c

TYPO3TYPO3

Horizontal value slider

TYPO3TYPO3

Horizontal scrollbar

Active

TYPO3TYPO3

Horizontal scrollbar

Inactive

TYPO3TYPO3

Input field

TYPO3TYPO3

Switch

TYPO3TYPO3

Checkbox & Selectbox

TYPO3

„Major Action“ Button

Selected state

TYPO3


Default state

Default state


TYPO3


Rollover state

TYPO3


Pushed state

TYPO3


Active state

TYPO3

Icons

Modul Icons

Action Icons

Status Icons

TYPO3

Icons

TYPO3

Icons

Modul Icons

Action Icons

Status Icons

TYPO3

InteractionPatterns

TYPO3TYPO3

mouse ◌ highlight if actionable

mouse ◯ display tooltip

mouse↓↑ execute / open

mouse↓↑↓↑ initiate in place editing

mouse↓↔↑ drag & drop

mouse[r]↓↑ context menu

shift↓ mouse↓↑↑ expand selection

TYPO3TYPO3

ctrl↓ alt↓ 1↓↑↑↑ switch to Content

ctrl↓ alt↓ 2↓↑↑↑ switch to Management

ctrl↓ alt↓ 3↓↑↑↑ switch to Report

ctrl↓ alt↓ 4↓↑↑↑ switch to Layout

ctrl↓ alt↓ 5↓↑↑↑ switch to System

ctrl↓ alt↓ 6↓↑↑↑ switch to Dashboard

ctrl↓ alt↓ e↓↑↑↑ toggles navigate / edit

ctrl↓ alt↓ z↓↑↑↑ display Change protocol

ctrl↓ alt↓ s↓↑↑↑ active Search interface

TYPO3

User Interface Guidelines

Definitions

TYPO3

Design

TYPO3

Depth

TYPO3

Login

TYPO3

Content

TYPO3

Management

... taste well?

Illustration by Momkai - a digital creative agency for Software Inc.http://www.behance.net/Gallery/Vabi-Phinix-_-Numex/137704

TYPO3

Questions?We need feedback! Meet us, please.

TYPO3

[email protected]

Björn Brockmann

Mail:Twitter :

[email protected]

wrybit

Jens Hoffmann

Mail:Twitter :

Join theTYPO3 Design & Usability Team

• Are you passioned in design?

• Are you smart in usability?

• Are you awesome in writeing?

• Submit an application to forge

• Ask your designers to volunteer

• Ask your employers for support

t3con10 - the taste of typo3 phoenix

Design

typo3 goals

personas typo3

evolution typo3

coffee typo3

header typo3

content qualitytasks

html templateseditor

contenttaskscreateedit