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.
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
10. It‘s true Open Source
TYPO3 is completely
free of any licensing fees
and vendor driven interest
TYPO3
11. 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
12. 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
13. 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
15. 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
16. 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
43. Workspace
Live Workspace
Personal Workspace(s)
TYPO3
44. Workspace
Live Workspace
Team / Stage Workspace(s)
Personal Workspace(s)
TYPO3
45. Workspace
Live Workspace
Team / Stage Workspace(s)
Personal Workspace(s)
TYPO3
46. Workspace
‣ NO editing in the live Workspace
‣ At least one Workflow step is always needed!
‣ Personal Workspaces (environments)
‣ Collaborative communication
TYPO3
47. View Styles
‣ Custom views for data visualization via templating
‣ Easy to extend / add new views
‣ Pages, Lists, Thumbnails, vCards,
Google Maps, Olap, Gant, ...
TYPO3
48. 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
49.
50. Dashboard
‣ Communication
‣ Tasks and Workflows
‣ Widgets and Scripts
‣ History of edited elements
TYPO3
51. Tabs
‣ Internal tabs behave like Browser-Tabs
‣ Changes only happen within the current Tab
‣ Use the Bowser-Tab as user interface, too
TYPO3
52. 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
53. Autosave
‣ Less manual saving
‣ Do it automatically in a transparent way
‣ Easy and quick interface to roll back changes
TYPO3
56. 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
57. 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
58. 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
59. 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
60. 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
61. 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
62. 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
63. 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
64. 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
66. 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
67. Content Editor
Marketing Manager
Content Manager
HTML Designer
User Manager
TYPO3 Integrator
PHP Developer
System Administrator
TYPO3
68. Content
Report
Man agement
Layout
System
TYPO3