UX-Vision for the next TYPO3 CMS
5 likes9,512 views
The document outlines a personal perspective on the UX vision for the TYPO3 CMS, highlighting the need for better user workflows and clearer product strategy. It discusses team collaboration and iterations from ideas to layouts, promoting non-linear workflows and user-first approaches. Additionally, it mentions achievements and upcoming events related to TYPO3's user experience initiatives.
UX-Vision for the next TYPO3 CMS
- 1. UX-Vision for the next TYPO3 CMS TYPO3 CMS Usability Team
- 2. Web Hello. TYPO3 CMS UX-Team Leader Creative Director jens@typo3.org @wrybit | www.wrybit.de
- 3. Web Jens. Living together with my wife, sun and 2 cats near Frankfurt jens@typo3.org @wrybit | www.wrybit.de
- 4. Web WrYBiT. I like snowboarding, electronic music, visiting art exhibitions & digging into new UX challenges jens@typo3.org @wrybit | www.wrybit.de
- 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. The UX-Team Long term support of the TYPO3
- 7. The TYPO3 CMS UX-Team Long term support of the TYPO3 CMS
- 8. Members Martin Engel Björn Brockmann Fabien Udriot Felix Kopp Team Leader Release Manager Jens Hoffmann Ernesto Baschny Lars Zimmermann
- 12. Retrospective
- 30. The evolution of iMac 1998 2000 2002 2004 2005 2007 2009 Today
- 31. Status quo Aspects of a historically grown system.
- 32. 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)
- 33. 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)
- 34. iFrames From a technical depth to a technical chance?
- 39. ~100 Core modul views
- 40. With .. & without tree
- 41. With .. & without tree User tools System Web Admin tools File Help Tree
- 42. Linear workflow
- 43. 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
- 44. 25 steps
- 45. 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
- 46. 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
- 47. 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
- 49. Iterations From Idea to Layout Idea Jens Draft Lars Wireframe Björn & Jens T3UX-RLM Jens T3CON13 Martin & Jens
- 50. Iterations From Idea to Layout T3CON13 Martin & Jens
- 51. Backend Login
- 52. Backend Login
- 53. Backend Login
- 54. Welcome dialog (TourTorial start)
- 55. Dashboard
- 58. Welcome dialog („TourTorial“ started)
- 59. Open a new module (TourTorial)
- 60. TourTorial: Interact with the pagetree
- 61. Open a new module (TourTorial)
- 62. Open a new module (TourTorial)
- 63. Grid view
- 64. Grid view (Add content, via Drag & Drop)
- 65. Grid view
- 66. Grid view
- 67. Grid view
- 68. Grid view
- 69. Quick editing Distraction free editing A designer who wants to achieve good design must
- 70. 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. _
- 71. Quick editing Distraction free editing A designer who wants to achieve good design must
- 72. Quick editing (Switch context)
- 73. Quick editing (Switch context, Context Informations)
- 75. Open a new module (Tab)
- 76. Wizard workflow (Step 3, Check report)
- 77. 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 ‣
- 78. TYPO3 USER EXPERIENCE WEEK It‘s time for another one!
- 79. T3UXW09
- 81. 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 ‣ …
- 88. Honorable T3UXW09 godparents .. thank you, once again!
- 89. T3UXW14
- 90. # T3UXW14
- 91. 16.02 - 23.02.2014 Essen - Unperfekthaus
- 92. Dev 1 Dev 2 Dev 3 Dev 4 Dev 5 Dev 6 UX Coordination
- 93. Today Website will be ready „hopefully“ soon.
- 94. … send a mail to t3uxw@typo3.org
- 95. Become a godparent 900€ Support 1 Attendee
- 96. I’m open for new job opportunities in 2014. Thanks Got questions? jens@typo3.org @wrybit | www.wrybit.de