• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The radically new interface for TYPO3 5.0

The radically new interface for TYPO3 5.0



In this Presentation you could see the first details about the radically new interface for TYPO3 5.0. (Authors: Jens Hoffmann, Björn Brockmann)

In this Presentation you could see the first details about the radically new interface for TYPO3 5.0. (Authors: Jens Hoffmann, Björn Brockmann)



Total Views
Views on SlideShare
Embed Views



21 Embeds 5,116

http://typo3.org 4689
http://www.slideshare.net 139
http://registedone.wordpress.com 114
http://www.bertrandkeller.info 50
http://localhost 48
http://www.acqal.com 21
https://typo3.org 13
http://www.e-presentations.us 7
http://stuff.lime-flavour.de 6
https://gdfsuez.bluekiwi.net 6
http://simonmichaelis.de 5
http://social.complot-preview.ch 5
http://translate.googleusercontent.com 3
http://dev.rathenau.nl 2
http://webcache.googleusercontent.com 2
resource://brief-content 1
http://safe.tumblr.com 1
http://bertrandkeller.info 1
http://www.techgig.com 1
http://web.archive.org 1
http://simonmichaelis.tumblr.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    The radically new interface for TYPO3 5.0 The radically new interface for TYPO3 5.0 Presentation Transcript

    • 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
    • WE TYPO3
    • MAKE TYPO3
    • TYPO3 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