Your SlideShare is downloading. ×

TYPO3 5.0 Experience Concept


Published on

Presentation of the new UI for TYPO3 5.0. …

Presentation of the new UI for TYPO3 5.0.
It showed the new way to the new UI and the UI itself, based on Wireframes. We cover some Theoretical topics for e.g.: Underlaying guiding principles, Some Inspirations, typical CMS Personas, our General Concepts and the Concept as Wireframes.

This is the extended Version of the Presentation. At the UXcamp 2010 #uxce10 we showed a shorter Version, which was still to long, sorry for that :) This is the Presentation from the TYPO3 Conference 2010 in Dallas.

Published in: Design, Technology
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. TYPO3 5.0 Experience Concept ... still iterating
  • 2. 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 „Official TYPO3 Websites“ Team Member
  • 3. TYPO3 Inspire people to share
  • 4. Facts of TYPO3 4.x TYPO3
  • 5. TYPO3
  • 6. It‘s true Open Source TYPO3 is completely free of any licensing fees and vendor driven interest TYPO3
  • 7. 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
  • 8. Technical Key-features ‣ Unlimited extendability (4000+ Extensions) ‣ Flexible configuration 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
  • 9. Functional Key-features ‣ Full Multi-language & Multi-site support ‣ Workspaces & Versioning (History / Undo) with advanced custom workflows behind ‣ Complete user permission management ‣ Enterprise Digital Asset Management (DAM) for content, media-files & documents ‣ Fully integrated Rich Text Editor (RTE) ‣ Impressive „Frontend“ Featureset with comfortable Frontend-Editing TYPO3
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. Impressive feature set TYPO3 Source:
  • 14. Impressive feature set TYPO3
  • 15. Joy of use! TYPO3
  • 16. We started .. TYPO3
  • 17. from sc ra tc h!
  • 18. Guiding Principles TYPO3
  • 19. Preserve the soul flexibility, scalability, connect-ability, page-tree
  • 20. Ease the pain complexity, inconsistencies, complicated and redundant workflows
  • 21. User centered design goals, tasks, needs and limitations of the end user(s)
  • 22. Good Defaults reduce complexity in the interface
  • 23. Reduce abstraction were possible (eg. the „frontend“)
  • 24. Strong consistency honor standardised workflows, defaults and visual taxonomy
  • 25. Context over consistency if it makes more sense that way
  • 26. Features on demand Reduce the visual noise where possible
  • 27. Inspirations ... we looked at over 150 Systems TYPO3
  • 28. General Concepts TYPO3
  • 29. Workspace Live Workspace Personal Workspace(s) TYPO3
  • 30. Workspace Live Workspace Team / Stage Workspace(s) Personal Workspace(s) TYPO3
  • 31. Workspace Live Workspace Team / Stage Workspace(s) Personal Workspace(s) TYPO3
  • 32. Workspace ‣ NO editing in the live Workspace ‣ At least one Workflow step is always needed! ‣ Personal Workspaces (environments) ‣ Collaborative communication TYPO3
  • 33. View Styles ‣ Custom views for data visualization via templating ‣ Easy to extend / add new views ‣ Pages, Lists, Thumbnails, vCards, Google Maps, Olap, Gant, ... TYPO3
  • 34. 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
  • 35. Dashboard ‣ Communication ‣ Tasks and Workflows ‣ Widgets and Scripts ‣ History of edited elements TYPO3
  • 36. Tabs ‣ Internal tabs behave like Browser-Tabs ‣ Changes only happen within the current Tab ‣ Use the Bowser-Tab as user interface, too TYPO3
  • 37. 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
  • 38. Autosave ‣ Less manual saving ‣ Do it automatically in a transparent way ‣ Easy and quick interface to roll back changes TYPO3
  • 39. Personas TYPO3
  • 40. TYPO3
  • 41. Klaus & Margarete (Content Editor) All ages and backgrounds Proficient 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
  • 42. 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 Configure modules Integrate assets Needs Maintain an overview at all times Focus on task at hand TYPO3
  • 43. Hermine (User Manager) 30+ Right hand of the boss or HR Always charming Proficient 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
  • 44. 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
  • 45. 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
  • 46. 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 fluid syntax to HTML templates Needs HTML editor & QA tool TYPO3
  • 47. Gallus (TYPO3 Integrator) 20+ Aims to be a developer Deep knowledge in TYPO3 Certified by T3A Able to read modern programming paradigmas Goals Connect HTML with TYPO3 Tasks Create, edit & debug TypoScript Enhance HTML templates with Fluid Configure packages Needs Powerful editing and debugging tools TYPO3
  • 48. 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
  • 49. 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
  • 50. TYPO3
  • 51. 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
  • 52. Content Editor Marketing Manager Content Manager HTML Designer User Manager TYPO3 Integrator PHP Developer System Administrator TYPO3
  • 53. Content Report Man agement Layout System TYPO3
  • 54. Management Layout Content Report System TYPO3
  • 55. UI Architecture User Global Functionalities CMS Sections Content / Structure / Settings TYPO3
  • 56. UI Layout Global Widgets User System Sections Section Moduls Content / Structure / Settings TYPO3
  • 57. The Concept TYPO3
  • 58. What is a Wireframe? TYPO3
  • 59. All you going to see are Wireframes
  • 60. All you goingOUTS to see NO T L AY are Wireframes
  • 61. Login TYPO3
  • 62. The „Backend“ TYPO3
  • 63. Global Widgets Brand & User System Sections Section Moduls Modul content
  • 64. Menu display style TYPO3
  • 65. Content editing TYPO3
  • 66. Version comments TYPO3
  • 67. Page settings TYPO3
  • 68. Page management TYPO3
  • 69. Page protocol TYPO3
  • 70. Page workflow TYPO3
  • 71. Page scrolling TYPO3
  • 72. Management view TYPO3
  • 73. Rootline navigation TYPO3
  • 74. Tree view definietion TYPO3
  • 75. Management editing TYPO3
  • 76. Management multi-editing TYPO3
  • 77. Global overlays TYPO3
  • 78. Global Messages TYPO3
  • 79. Clipboard UI TYPO3
  • 80. Snapshot menu TYPO3
  • 81. Chat UI TYPO3
  • 82. Help menu TYPO3
  • 83. User widgets TYPO3
  • 84. Modul view filter TYPO3
  • 85. Search TYPO3
  • 86. Input action UI TYPO3
  • 87. Regular user Job Tasks Tasks Tasks Done TYPO3
  • 88. Advanced user Job Tasks Done TYPO3
  • 89. 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;
  • 90. Input action UI Action Type Context TYPO3
  • 91. Help wanted Feedback is very welcomed! TYPO3
  • 92. Get involved & create buzz! Abstract & Channels Structure, Wireframes, & Scribbles TYPO3
  • 93. Questions? We need feedback! Meet us, please. TYPO3
  • 94. Thank‘s Jens Hoffmann Björn Brockmann Mail: Mail: Twitter: Twitter: wrybit headballooning TYPO3
  • 95. Go uxcamping ;) TYPO3