TYPO3 5.0 Experience Concept


Published on

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

No notes for slide

TYPO3 5.0 Experience Concept

  1. 1. TYPO3 5.0 Experience Concept ... still iterating
  2. 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. 3. TYPO3 Inspire people to share
  4. 4. Facts of TYPO3 4.x TYPO3
  5. 5. TYPO3
  6. 6. It‘s true Open Source TYPO3 is completely free of any licensing fees and vendor driven interest TYPO3
  7. 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. 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. 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. 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. 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. 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. 13. Impressive feature set TYPO3 Source: www.wenger.ch
  14. 14. Impressive feature set TYPO3
  15. 15. Joy of use! TYPO3
  16. 16. We started .. TYPO3
  17. 17. from sc ra tc h!
  18. 18. Guiding Principles TYPO3
  19. 19. Preserve the soul flexibility, scalability, connect-ability, page-tree
  20. 20. Ease the pain complexity, inconsistencies, complicated and redundant workflows
  21. 21. User centered design goals, tasks, needs and limitations of the end user(s)
  22. 22. Good Defaults reduce complexity in the interface
  23. 23. Reduce abstraction were possible (eg. the „frontend“)
  24. 24. Strong consistency honor standardised workflows, defaults and visual taxonomy
  25. 25. Context over consistency if it makes more sense that way
  26. 26. Features on demand Reduce the visual noise where possible
  27. 27. Inspirations ... we looked at over 150 Systems TYPO3
  28. 28. General Concepts TYPO3
  29. 29. Workspace Live Workspace Personal Workspace(s) TYPO3
  30. 30. Workspace Live Workspace Team / Stage Workspace(s) Personal Workspace(s) TYPO3
  31. 31. Workspace Live Workspace Team / Stage Workspace(s) Personal Workspace(s) TYPO3
  32. 32. Workspace ‣ NO editing in the live Workspace ‣ At least one Workflow step is always needed! ‣ Personal Workspaces (environments) ‣ Collaborative communication TYPO3
  33. 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. 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. 35. Dashboard ‣ Communication ‣ Tasks and Workflows ‣ Widgets and Scripts ‣ History of edited elements TYPO3
  36. 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. 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. 38. Autosave ‣ Less manual saving ‣ Do it automatically in a transparent way ‣ Easy and quick interface to roll back changes TYPO3
  39. 39. Personas TYPO3
  40. 40. TYPO3
  41. 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. 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. 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. 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. 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. 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. 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. 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. 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. 50. TYPO3
  51. 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. 52. Content Editor Marketing Manager Content Manager HTML Designer User Manager TYPO3 Integrator PHP Developer System Administrator TYPO3
  53. 53. Content Report Man agement Layout System TYPO3
  54. 54. Management Layout Content Report System TYPO3
  55. 55. UI Architecture User Global Functionalities CMS Sections Content / Structure / Settings TYPO3
  56. 56. UI Layout Global Widgets User System Sections Section Moduls Content / Structure / Settings TYPO3
  57. 57. The Concept TYPO3
  58. 58. What is a Wireframe? TYPO3
  59. 59. All you going to see are Wireframes
  60. 60. All you goingOUTS to see NO T L AY are Wireframes
  61. 61. Login TYPO3
  62. 62. The „Backend“ TYPO3
  63. 63. Global Widgets Brand & User System Sections Section Moduls Modul content
  64. 64. Menu display style TYPO3
  65. 65. Content editing TYPO3
  66. 66. Version comments TYPO3
  67. 67. Page settings TYPO3
  68. 68. Page management TYPO3
  69. 69. Page protocol TYPO3
  70. 70. Page workflow TYPO3
  71. 71. Page scrolling TYPO3
  72. 72. Management view TYPO3
  73. 73. Rootline navigation TYPO3
  74. 74. Tree view definietion TYPO3
  75. 75. Management editing TYPO3
  76. 76. Management multi-editing TYPO3
  77. 77. Global overlays TYPO3
  78. 78. Global Messages TYPO3
  79. 79. Clipboard UI TYPO3
  80. 80. Snapshot menu TYPO3
  81. 81. Chat UI TYPO3
  82. 82. Help menu TYPO3
  83. 83. User widgets TYPO3
  84. 84. Modul view filter TYPO3
  85. 85. Search TYPO3
  86. 86. Input action UI TYPO3
  87. 87. Regular user Job Tasks Tasks Tasks Done TYPO3
  88. 88. Advanced user Job Tasks Done TYPO3
  89. 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. 90. Input action UI Action Type Context TYPO3
  91. 91. Help wanted Feedback is very welcomed! TYPO3
  92. 92. Get involved & create buzz! tr.im/t35ui Abstract & Channels Structure, Wireframes, & Scribbles TYPO3
  93. 93. Questions? We need feedback! Meet us, please. TYPO3
  94. 94. Thank‘s Jens Hoffmann Björn Brockmann Mail: Mail: jens@typo3.org bjoern@typo3.org Twitter: Twitter: wrybit headballooning TYPO3
  95. 95. Go uxcamping ;) TYPO3
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.