The radically
new interface
for TYPO3 5.0
          TYPO3
Jens Hoffmann                          Björn Brockmann

Creative Director                      Senior User Experience Plan...
CSS

      TYPO3
Crowd Shouts Slides

 Click   Read   Shout




                 TYPO3
TYPO3
    TYPO3
GOOD!
    TYPO3
TODAY
    TYPO3
WE
     TYPO3
MAKE
       TYPO3
TYPO3
    TYPO3
HISTORY
     TYPO3
AGAIN!
     TYPO3
tt_clap
      TYPO3
How we got here
Holiday Inn Frankfurt City South Conference Center
50° 5'31.26" N               8°41'27.75" E


          ...
First thoughts
 Kopenhagen

Rasmus & Jens
Project setup
    Berlin

 Robert & Jens
Project kickoff
              Lübeck

Björn, Rasmus, Robert, Karsten & Jens
Project details
   Frankfurt

  Jens & Björn
Concept refactoring
       Ibiza

        Jens
Reviewing concepts
    Björn & Jens
Syncing current results
            Mainz

 Björn, Robert, Karsten & Jens
First public presentation
         Frankfurt

       Björn & Jens
Early Snap Shot of the
TYPO3 5.0 UI Project
E  SS
 Early Snap Shot of the
               R
      P R
 TYPO3 5.0OUIG Project
IN
We started ...



                 TYPO3
from

 scratch ...
Inspiration



              TYPO3
Guiding Principles



                TYPO3
Preserve the soul
flexibility, scalability, connect-ability, page-tree




                                               T...
Ease the pain
complexity, inconsistencies, complicated and redundant workflows




                                        ...
User centered design
goals, tasks, needs and limitations of the end user(s)




                                          ...
Good defaults
reduce complexity in the interface




                                     TYPO3
Reduce abstraction
    were possible (front-end)




                                TYPO3
Standardised workflows
      based on good defaults




                               TYPO3
Strong consistency
honor established workflows and visual taxonomy




                                         TYPO3
Context over consistency
      if it makes more sense that way




                                        TYPO3
General Concepts



              TYPO3
General Concepts
     ‣   Workspace
     ‣   Views
     ‣   Navigation
     ‣   Dashboard
     ‣   Tabs
     ‣   Editing
 ...
Workspace
   Live Workspace




Personal Workspace(s)



                        TYPO3
Workspace
   Live Workspace


Team / Stage Workspace(s)


Personal Workspace(s)



                        TYPO3
Workspace

‣   NO editing in the live Workspace
‣   At least one Workflow step is always needed!

‣   Personal Workspaces (...
Views

‣   Custom views for data visualization via templating
‣   Easy to extend / add new views

‣   Pages, Lists, Thumbn...
Rootline Menu
‣   Fixed area of navigation
‣   Stay consistent in all navigation levels
‣   Sneak peek into any
    previo...
Dashboard

‣   Communication
‣   Tasks and Workflows
‣   Widgets and Scripts
‣   History of edited elements



            ...
Tabs

‣   Behave like Browser Tabs
‣   Changes only happen within the current Tab




                                    ...
Editing
‣   Inline-Editing
    activated by Double Click
‣   Advanced-Editing
    activated by Single Click to select
    ...
Autosave

‣   Less manual saving
‣   Do it automatically in a transparent way
‣   Easy and quick interface to roll back ch...
Personas



           TYPO3
TYPO3
TYPO3
Mr. Klein   Key Characteristics
Editor
            ‣   Content editing
            ‣   Editor is restrained from
         ...
Mr. Klein   Goals
Editor
            ‣   Keeping the website up to date


            Tasks
            ‣   Add, edit, mov...
Mr. Klein   Needs
Editor
            ‣   Simplicity and ease-of-use
            ‣   Guidance
            ‣   Help moving f...
eloper
           cri pt Dev
   TypoS                                           Editor


                           Conten...
Editor

                       Marketing Manager


     Content Manager
                               HTML Designer
     ...
Content

                 Report



   Man agement
                      Layout



     System


                         ...
Management            Layout
Content                Report            System




                                     TYPO3
UI Architecture

             User
     Global Functionalities

        CMS Sections

 Content / Structure / Settings




...
UI Layout
Global Functionalities                User
             CMS Sections
                 Moduls




     Content / ...
The UI concept



             TYPO3
What is a Wireframe?



                 TYPO3
All you going to see
  are Wireframes
All you goingOUTS
              to see
NO   T L  AY
   are Wireframes
Login



        TYPO3
Login transition


www.domain.com /the/path/to/my/subpage




                                         TYPO3
Login transition


www.domain.com /typo3 # /the/path/to/my/subpage




                                      TYPO3
Global dataview                    Global widgets   Branding & Version
                                                   ...
Menu display style



                TYPO3
Search



         TYPO3
Overlay Menus



                TYPO3
Content editing



              TYPO3
Version comments



              TYPO3
Page settings



                TYPO3
Page management



              TYPO3
Page protocol



                TYPO3
Page workflow



               TYPO3
Page scrolling



                 TYPO3
Management view



              TYPO3
Rootline Navigation



                TYPO3
Tree view definietion



                 TYPO3
Management editing



                TYPO3
Management multi-editing



                   TYPO3
Input action UI



                  TYPO3
Regular user


Job   Tasks   Tasks   Tasks   Solution




                              TYPO3
Advanced user


Job       Tasks       Solution




                      TYPO3
sex   is   updatedb;  locate;
talk; date; cd; strip; look;
touch; finger; unzip; uptime;
gawk; head; apt-get install
condo...
Input action UI


Action   Type   Context




                      TYPO3
Next ...

           TYPO3
How we will proceed
   1. Ongoing weekly sessions
   2. Qualitative reality checks
   3. Prototypes & Refactoring
   4. Co...
Thank‘s
Jens Hoffmann         Björn Brockmann


Mail:                 Mail:
jens@typo3.org        bjoern@typo3.org

Twitte...
Support big visions!


                TYPO3
~100.000 Registered User
~300 Association Member


                   TYPO3
Join the Association

Transparent communication?
  Ask for more influence!

                    TYPO3
Get involved & create buzz!


    tr.im/t35ui
           Abstract & Channels
    Structure, Wireframes, & Scribbles


    ...
Questions?
Meet us at a „Birds of a Feather“ session
Friday - 18:00 - Baden


                                   TYPO3
Enjoy the event. ;)




                TYPO3
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
The radically new interface for TYPO3 5.0
Upcoming SlideShare
Loading in …5
×

The radically new interface for TYPO3 5.0

11,193 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
11,193
On SlideShare
0
From Embeds
0
Number of Embeds
5,203
Actions
Shares
0
Downloads
147
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

×