UX-Vision for the next TYPO3 CMS

7,083 views
7,167 views

Published on

In this presentation you will see a short retrospective of the past TYPO3 versions. Followed up by a status quo of the current TYPO3 CMS version which lead to some UX suggestion. And than our Vision via some detailed layouts by the "TYPO3 CMS Usability Team" for a possible future major release of the TYPO3 CMS.

Try the simple interactive prototype: http://j.mp/T37-vision-proto
And watch the full Talk at T3CON13: http://j.mp/T37-vision-talk

Your constructive feedback is very welcome!
Open up a issue at http://j.mp/T3cmsUX or mail me.

Published in: Design, Technology

UX-Vision for the next TYPO3 CMS

  1. 1. UX-Vision for the next TYPO3 CMS TYPO3 CMS Usability Team
  2. 2. Web Hello. TYPO3 CMS UX-Team Leader Creative Director jens@typo3.org
 @wrybit | www.wrybit.de
  3. 3. Web Jens. Living together with my wife, 
 sun and 2 cats near Frankfurt jens@typo3.org
 @wrybit | www.wrybit.de
  4. 4. Web WrYBiT. I like snowboarding, electronic music, visiting art exhibitions & digging into new UX challenges jens@typo3.org
 @wrybit | www.wrybit.de
  5. 5. Indifferences. Lack of strategy. Non-profit corporation. Freedom. Thinking bold. Inspiring. collaboration. Team Participation. Spirit of sharing. Open Source Passion for contribution. Focus on Never finished. quality over quantity. Exchanging thought. Fair fame. Community engagement. Flat hierarchy. Flexibility.
  6. 6. The UX-Team Long term support of the TYPO3
  7. 7. The TYPO3 CMS UX-Team Long term support of the TYPO3 CMS
  8. 8. Members Martin Engel Björn Brockmann Fabien Udriot Felix Kopp Team Leader Release Manager Jens Hoffmann Ernesto Baschny Lars Zimmermann
  9. 9. Challenge Product Maintain Innovate Vision & Strategy Community Feedback Motivate Moderate Build Inspire Support Team
  10. 10. Retrospective
  11. 11. The evolution of iMac 1998 2000 2002 2004 2005 2007 2009 Today
  12. 12. Status quo Aspects of a historically grown system.
  13. 13. This is my personal perspective and not approved by any other official TYPO3 team. TYPO3 CMS TYPO3 Neos TYPO3 Flow 
 CMS CMS Revolution 
 
 Framework 
 
 Evolution Framework Web-Sites 
 
 Framework Web-Apps (with GUI) Web-Services (without GUI)
  14. 14. This is my personal perspective and not approved by any other official TYPO3 team. 
 CMS TYPO3 Neos Same TYPO3 CMS TYPO3 Flow CMS Revolution Difference 
 Web-Sites Framework 
 
 
 Same Evolution Framework 
 
 Framework Web-Apps (with GUI) Web-Services (without GUI)
  15. 15. iFrames From a technical depth to a technical chance?
  16. 16. ~100 Core modul views
  17. 17. With .. & without tree
  18. 18. With .. & without tree User tools System Web Admin tools File Help Tree
  19. 19. Linear workflow
  20. 20. Text w/ Image Open Page Modul Create Page Create Record Select Record Type Write Text Add Metadata Save & Close Record Open File Modul Select Folder Enter Upload Modul Browse local filesystem Select local Image Upload File Add Metadata Re-Open Page Modul Re-Select Page Re-Select Content Element Select Media Tab Open T3-FileBrowser Re-Select Folder Re-Select & Insert Image Open Preview Modul Navigate to Page Preview Text /w Image Save & Close Record
  21. 21. 25 steps
  22. 22. Text w/ Image Open Page Modul Create Page Create Record Select Record Type Write Text Add Metadata Save & Close Record Open File Modul Select Folder Enter Upload Modul Browse local filesystem Select local Image Upload File Add Metadata Re-Open Page Modul Re-Select Page Re-Select Content Element Select Media Tab Open T3-FileBrowser Re-Select Folder Re-Select & Insert Image Open Preview Modul Navigate to Page Preview Text /w Image Save & Close Record
  23. 23. Summary ‣ Product vision or strategy bit unclear ‣ iFrames separate Menus & Moduls ‣ Linear, technical driven workflows ‣ Current grouping by technical context ‣ Long, recurrent click paths for editors
  24. 24. Suggestions ‣ User and content first ‣ Define defaults for beginners ‣ Enable non-linear workflows ‣ Features on demand ‣ Prefer existing solutions ‣ Create small & re-usable parts ‣ Avoid abstraction where possible
  25. 25. Vision Teamwork, fifth iteration
  26. 26. Iterations
 From Idea to Layout Idea Jens Draft Lars Wireframe Björn & Jens T3UX-RLM Jens T3CON13 Martin & Jens
  27. 27. Iterations
 From Idea to Layout T3CON13 Martin & Jens
  28. 28. Backend Login
  29. 29. Backend Login
  30. 30. Backend Login
  31. 31. Welcome dialog (TourTorial start)
  32. 32. Dashboard
  33. 33. Dashboard (Add widget)
  34. 34. Dashboard (Widget added)
  35. 35. Welcome dialog („TourTorial“ started)
  36. 36. Open a new module (TourTorial)
  37. 37. TourTorial: Interact with the pagetree
  38. 38. Open a new module (TourTorial)
  39. 39. Open a new module (TourTorial)
  40. 40. Grid view
  41. 41. Grid view (Add content, via Drag & Drop)
  42. 42. Grid view
  43. 43. Grid view
  44. 44. Grid view
  45. 45. Grid view
  46. 46. Quick editing Distraction free editing A designer who wants to achieve good design must
  47. 47. Distraction free editing A designer who wants to achieve good design must not regard himself as an artist who, according to taste and aesthetics, is merely dressing up products with a last - minute garment. The designer must be the gestaltingenieur or creative engineer. They synthesise the completed product from the various elements that make up its design. Their work is largely rational, meaning that aesthetic decisions are justified by an understanding of the product’s purpose. _
  48. 48. Quick editing Distraction free editing A designer who wants to achieve good design must
  49. 49. Quick editing (Switch context)
  50. 50. Quick editing (Switch context, Context Informations)
  51. 51. Device simulation
  52. 52. Open a new module (Tab)
  53. 53. Wizard workflow (Step 3, Check report)
  54. 54. Summary True branding possibilities ‣ Less navigation, consistent styling & more space ‣ New learning curve via inline „TourTorials“ ‣ Non-Linear workflow via Tabs ‣ Personae/Roles via Tab-Sets ‣ Context focused grouping and view switches ‣ Device simulator and distraction free editing ‣ Transparent Sub-Modul-Navigation ‣ Simple wizard driven workflows ‣
  55. 55. TYPO3 USER EXPERIENCE WEEK It‘s time for another one!
  56. 56. T3UXW09
  57. 57. Event participants 2009
  58. 58. T3UXW09 Achievements ‣ New Backend-, Login-, Installer & Error-Skin ‣ Creation of the Introduction Package ‣ Built new page- and file-tree from scratch ‣ Page Module backend grid & grid layout editor ‣ Page Module with „drag & drop“ ‣ Smart renaming & rearrangement of labels ‣ Basic TYPO3 backend template structure & guide ‣ Core Sprite-Image- & CSS-Merger-Engine ‣ Better Backend Search ‣ …
  59. 59. Honorable T3UXW09 godparents .. thank you, once again!
  60. 60. T3UXW14
  61. 61. # T3UXW14
  62. 62. 16.02 - 23.02.2014 Essen - Unperfekthaus
  63. 63. Dev 1 Dev 2 Dev 3 Dev 4 Dev 5 Dev 6 UX Coordination
  64. 64. Today Website will be ready „hopefully“ soon.
  65. 65. … send a mail to t3uxw@typo3.org
  66. 66. Become a godparent 900€ Support 1 Attendee
  67. 67. I’m open for new job opportunities in 2014. Thanks Got questions? jens@typo3.org
 @wrybit | www.wrybit.de

×