The radically new interface for TYPO3 5.0

10,934 views
10,793 views

Published on

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

Published in: Design, Education
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total views
10,934
On SlideShare
0
From Embeds
0
Number of Embeds
5,189
Actions
Shares
0
Downloads
146
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

The radically new interface for TYPO3 5.0

  1. 1. The radically new interface for TYPO3 5.0 TYPO3
  2. 2. 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
  3. 3. CSS TYPO3
  4. 4. Crowd Shouts Slides Click Read Shout TYPO3
  5. 5. TYPO3 TYPO3
  6. 6. GOOD! TYPO3
  7. 7. TODAY TYPO3
  8. 8. WE TYPO3
  9. 9. MAKE TYPO3
  10. 10. TYPO3 TYPO3
  11. 11. HISTORY TYPO3
  12. 12. AGAIN! TYPO3
  13. 13. tt_clap TYPO3
  14. 14. How we got here Holiday Inn Frankfurt City South Conference Center 50° 5'31.26" N 8°41'27.75" E TYPO3
  15. 15. First thoughts Kopenhagen Rasmus & Jens
  16. 16. Project setup Berlin Robert & Jens
  17. 17. Project kickoff Lübeck Björn, Rasmus, Robert, Karsten & Jens
  18. 18. Project details Frankfurt Jens & Björn
  19. 19. Concept refactoring Ibiza Jens
  20. 20. Reviewing concepts Björn & Jens
  21. 21. Syncing current results Mainz Björn, Robert, Karsten & Jens
  22. 22. First public presentation Frankfurt Björn & Jens
  23. 23. Early Snap Shot of the TYPO3 5.0 UI Project
  24. 24. E SS Early Snap Shot of the R P R TYPO3 5.0OUIG Project IN
  25. 25. We started ... TYPO3
  26. 26. from scratch ...
  27. 27. Inspiration TYPO3
  28. 28. Guiding Principles TYPO3
  29. 29. Preserve the soul flexibility, scalability, connect-ability, page-tree TYPO3
  30. 30. Ease the pain complexity, inconsistencies, complicated and redundant workflows TYPO3
  31. 31. User centered design goals, tasks, needs and limitations of the end user(s) TYPO3
  32. 32. Good defaults reduce complexity in the interface TYPO3
  33. 33. Reduce abstraction were possible (front-end) TYPO3
  34. 34. Standardised workflows based on good defaults TYPO3
  35. 35. Strong consistency honor established workflows and visual taxonomy TYPO3
  36. 36. Context over consistency if it makes more sense that way TYPO3
  37. 37. General Concepts TYPO3
  38. 38. General Concepts ‣ Workspace ‣ Views ‣ Navigation ‣ Dashboard ‣ Tabs ‣ Editing ‣ Autosave TYPO3
  39. 39. Workspace Live Workspace Personal Workspace(s) TYPO3
  40. 40. Workspace Live Workspace Team / Stage Workspace(s) Personal Workspace(s) TYPO3
  41. 41. Workspace ‣ NO editing in the live Workspace ‣ At least one Workflow step is always needed! ‣ Personal Workspaces (environments) ‣ Collaborative communication TYPO3
  42. 42. Views ‣ Custom views for data visualization via templating ‣ Easy to extend / add new views ‣ Pages, Lists, Thumbnails, vCards, Google Maps, Olap, Gant, ... TYPO3
  43. 43. 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
  44. 44. Dashboard ‣ Communication ‣ Tasks and Workflows ‣ Widgets and Scripts ‣ History of edited elements TYPO3
  45. 45. Tabs ‣ Behave like Browser Tabs ‣ Changes only happen within the current Tab TYPO3
  46. 46. 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
  47. 47. Autosave ‣ Less manual saving ‣ Do it automatically in a transparent way ‣ Easy and quick interface to roll back changes TYPO3
  48. 48. Personas TYPO3
  49. 49. TYPO3
  50. 50. TYPO3
  51. 51. 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
  52. 52. Mr. Klein Goals Editor ‣ Keeping the website up to date Tasks ‣ Add, edit, move and delete content ‣ e.g. produce news articles TYPO3
  53. 53. Mr. Klein Needs Editor ‣ Simplicity and ease-of-use ‣ Guidance ‣ Help moving from big picture to specific actions ‣ Proactive communication TYPO3
  54. 54. 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
  55. 55. Editor Marketing Manager Content Manager HTML Designer User Manager TypoScript Developer PHP Developer Designer System Administrator TYPO3
  56. 56. Content Report Man agement Layout System TYPO3
  57. 57. Management Layout Content Report System TYPO3
  58. 58. UI Architecture User Global Functionalities CMS Sections Content / Structure / Settings TYPO3
  59. 59. UI Layout Global Functionalities User CMS Sections Moduls Content / Structure / Settings TYPO3
  60. 60. The UI concept TYPO3
  61. 61. What is a Wireframe? TYPO3
  62. 62. All you going to see are Wireframes
  63. 63. All you goingOUTS to see NO T L AY are Wireframes
  64. 64. Login TYPO3
  65. 65. Login transition www.domain.com /the/path/to/my/subpage TYPO3
  66. 66. Login transition www.domain.com /typo3 # /the/path/to/my/subpage TYPO3
  67. 67. Global dataview Global widgets Branding & Version User account CMS Sections Moduls Content / Structure / Settings
  68. 68. Menu display style TYPO3
  69. 69. Search TYPO3
  70. 70. Overlay Menus TYPO3
  71. 71. Content editing TYPO3
  72. 72. Version comments TYPO3
  73. 73. Page settings TYPO3
  74. 74. Page management TYPO3
  75. 75. Page protocol TYPO3
  76. 76. Page workflow TYPO3
  77. 77. Page scrolling TYPO3
  78. 78. Management view TYPO3
  79. 79. Rootline Navigation TYPO3
  80. 80. Tree view definietion TYPO3
  81. 81. Management editing TYPO3
  82. 82. Management multi-editing TYPO3
  83. 83. Input action UI TYPO3
  84. 84. Regular user Job Tasks Tasks Tasks Solution TYPO3
  85. 85. Advanced user Job Tasks Solution TYPO3
  86. 86. 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;
  87. 87. Input action UI Action Type Context TYPO3
  88. 88. Next ... TYPO3
  89. 89. 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
  90. 90. Thank‘s Jens Hoffmann Björn Brockmann Mail: Mail: jens@typo3.org bjoern@typo3.org Twitter: Twitter: wrybit headballooning TYPO3
  91. 91. Support big visions! TYPO3
  92. 92. ~100.000 Registered User ~300 Association Member TYPO3
  93. 93. Join the Association Transparent communication? Ask for more influence! TYPO3
  94. 94. Get involved & create buzz! tr.im/t35ui Abstract & Channels Structure, Wireframes, & Scribbles TYPO3
  95. 95. Questions? Meet us at a „Birds of a Feather“ session Friday - 18:00 - Baden TYPO3
  96. 96. Enjoy the event. ;) TYPO3

×